best-email-builder 0.6.0 → 0.8.0

package/dist/ai.js

@@ -1,6 +1,6 @@
 import {
   cleanRichText
-} from "./chunk-SAIW46IC.js";
+} from "./chunk-P7ABBLX6.js";
 import {
   Button,
   Dialog,
@@ -23,9 +23,11 @@ import {
   createHttpCaller,
   useSearchShortcut,
   useUi
-} from "./chunk-JU3OUO6X.js";
-import "./chunk-QPAZLCPO.js";
+} from "./chunk-DXWIVGHP.js";
+import "./chunk-FAEVYSIF.js";
 import {
+  AGENT_ERROR_CODES,
+  AGENT_PROTOCOL,
   AI_MESSAGES,
   AI_PROVIDERS,
   DEFAULT_CLAUDE_MODEL,
@@ -37,25 +39,28 @@ import {
   PURPOSE_CATEGORIES,
   REWRITE_ACTIONS,
   REWRITE_LANGUAGES,
+  agentEmailModel,
   claudeEmailModel,
   claudeProvider,
   createEmailGenerator,
   emailWords,
   failureCode,
+  listProviderModels,
   providerEmailModel,
   purposesByCategory,
   resolveProvider
-} from "./chunk-NZIQF7IW.js";
+} from "./chunk-SHHHYRPC.js";
 import "./chunk-OWVXKMLI.js";
-import "./chunk-W424KPCR.js";
+import "./chunk-AXIM6E7T.js";
 import {
   brandTemplate,
   hasBrand
-} from "./chunk-JI36FNWE.js";
+} from "./chunk-62HBUBBI.js";
 
 // src/ai/keys.js
 var STORAGE_PREFIX = "best-email-builder:ai-key:";
 var CHOICE_SLOT = "best-email-builder:ai-provider";
+var MODEL_PREFIX = "best-email-builder:ai-model:";
 function browserStorage() {
   try {
     const storage = globalThis.localStorage;
@@ -70,10 +75,12 @@ var choiceOf = (provider) => Object.freeze({
   model: provider.model ?? null,
   keyUrl: provider.keyUrl,
   keyHint: provider.keyHint,
-  free: provider.free
+  free: provider.free,
+  publicModels: Boolean(provider.publicModels)
 });
-function createKeyStore(providerOrList) {
-  const providers = Object.freeze((Array.isArray(providerOrList) ? providerOrList : [providerOrList]).map(choiceOf));
+function createKeyStore(providerOrList, { fetch: fetchImpl } = {}) {
+  const originals = Array.isArray(providerOrList) ? providerOrList : [providerOrList];
+  const providers = Object.freeze(originals.map(choiceOf));
   if (!providers.length) throw new TypeError("createKeyStore: at least one provider");
   const known = (id) => providers.some((provider) => provider.id === id);
   const memory = /* @__PURE__ */ new Map();
@@ -104,6 +111,12 @@ function createKeyStore(providerOrList) {
   const kept = read(CHOICE_SLOT);
   let current = known(kept) ? kept : (providers.find((provider) => keyOf(provider.id)) || providers[0]).id;
   const get = (id) => keyOf(id === void 0 ? current : String(id));
+  const providerId = (id) => {
+    if (id === void 0) return current;
+    if (!known(id)) throw new TypeError(`ai.key: no provider "${id}" \u2014 one of ${providers.map((provider) => provider.id).join(", ")}`);
+    return id;
+  };
+  const lists = /* @__PURE__ */ new Map();
   const changed = () => {
     snapshot = Object.freeze({ asking: Boolean(pending), refused, connected: Boolean(get()) });
     for (const listener of [...listeners]) listener();
@@ -145,6 +158,33 @@ function createKeyStore(providerOrList) {
       write(CHOICE_SLOT, id);
       changed();
     },
+    model: (id) => {
+      const choice = (
+        /** @type {ProviderChoice} */
+        providers.find((provider) => provider.id === providerId(id))
+      );
+      const kept2 = memory.get(MODEL_PREFIX + choice.id) ?? read(MODEL_PREFIX + choice.id);
+      return kept2 || choice.model || "";
+    },
+    chooseModel: (model, id) => {
+      if (typeof model !== "string" || !model.trim()) throw new TypeError("ai.key.chooseModel: a model id");
+      const choice = (
+        /** @type {ProviderChoice} */
+        providers.find((provider) => provider.id === providerId(id))
+      );
+      const value = model.trim() === choice.model ? "" : model.trim();
+      memory.set(MODEL_PREFIX + choice.id, value);
+      write(MODEL_PREFIX + choice.id, value);
+      changed();
+    },
+    listModels: async (id, { apiKey, signal } = {}) => {
+      const at = providers.findIndex((provider) => provider.id === providerId(id));
+      const key = String(apiKey ?? keyOf(providers[at].id)).trim();
+      const slot = `${providers[at].id}
+${key}`;
+      if (!lists.has(slot)) lists.set(slot, await listProviderModels({ provider: originals[at], apiKey: key, fetch: fetchImpl, signal }));
+      return lists.get(slot);
+    },
     request: () => {
       if (!pending) {
         let resolve = () => {
@@ -170,48 +210,305 @@ function createKeyStore(providerOrList) {
 }
 
 // src/ai/ConnectAi.jsx
-import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
-import { ArrowUpRight, Eye, EyeOff, Gift, KeyRound, ShieldCheck, TriangleAlert } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
+import { ArrowUpRight, Eye, EyeOff, Gift as Gift2, KeyRound, ShieldCheck, TriangleAlert } from "lucide-react";
+
+// src/ai/ModelPicker.jsx
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Check, ChevronDown, Gift, LoaderCircle, Search } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ModelPicker({ aiKey, provider, apiKey, delay = 0, value, onChange, open, onOpenChange }) {
+  const { t } = useUi();
+  const [list, setList] = useState(
+    /** @type {{status: 'loading'|'ready'|'needs-key'|'refused'|'failed', models: import('./providers.js').ModelChoice[]}} */
+    { status: "loading", models: [] }
+  );
+  const [query, setQuery] = useState("");
+  const [freeOnly, setFreeOnly] = useState(false);
+  const [active, setActive] = useState(0);
+  const triggerRef = useRef(
+    /** @type {HTMLButtonElement|null} */
+    null
+  );
+  const listRef = useRef(
+    /** @type {HTMLDivElement|null} */
+    null
+  );
+  const labelId = useId();
+  const valueId = useId();
+  const listId = useId();
+  const hintId = useId();
+  useEffect(() => {
+    if (!apiKey && !provider.publicModels) {
+      setList({ status: "needs-key", models: [] });
+      return void 0;
+    }
+    const controller = new AbortController();
+    setList({ status: "loading", models: [] });
+    const timer = setTimeout(() => {
+      aiKey.listModels(provider.id, { apiKey, signal: controller.signal }).then(
+        (models2) => !controller.signal.aborted && setList({ status: "ready", models: models2 }),
+        (error) => !controller.signal.aborted && setList({ status: error?.code === "KEY_REFUSED" ? "refused" : "failed", models: [] })
+      );
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [aiKey, provider.id, provider.publicModels, apiKey, delay]);
+  useEffect(() => {
+    if (!open) return;
+    setQuery("");
+    setFreeOnly(false);
+  }, [open]);
+  const models = useMemo(() => {
+    const listed = new Map(list.models.map((model) => [model.id, model]));
+    const seen = /* @__PURE__ */ new Set();
+    const all = [];
+    const add = (model) => {
+      if (model.id && !seen.has(model.id)) seen.add(model.id) && all.push(model);
+    };
+    for (const id of [provider.model, value]) if (id) add(listed.get(id) || { id, name: id, free: false });
+    list.models.forEach(add);
+    return all;
+  }, [list.models, provider.model, value]);
+  const hasFree = list.models.some((model) => model.free);
+  const typed = query.trim();
+  const matches = useMemo(() => {
+    const words = typed.toLowerCase().split(/\s+/).filter(Boolean);
+    return models.filter((model) => (!freeOnly || model.free) && words.every((word) => `${model.id} ${model.name}`.toLowerCase().includes(word)));
+  }, [models, typed, freeOnly]);
+  const custom = typed && !/\s/.test(typed) && !models.some((model) => model.id === typed) ? typed : "";
+  const count = matches.length + (custom ? 1 : 0);
+  const current = models.find((model) => model.id === value);
+  useEffect(() => setActive(Math.max(0, matches.findIndex((model) => model.id === value))), [matches, value]);
+  useEffect(() => {
+    if (open) listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [active, open]);
+  const close = () => {
+    triggerRef.current?.focus();
+    onOpenChange(false);
+  };
+  const pick = (id) => {
+    onChange(id);
+    close();
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((at) => count ? (at + (event.key === "ArrowDown" ? 1 : -1) + count) % count : 0);
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const id = active < matches.length ? matches[active]?.id : custom;
+      if (id) pick(id);
+    }
+  };
+  const optionId = (at) => `${listId}-${at}`;
+  const badges = (model) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    model.free && /* @__PURE__ */ jsxs("span", { className: "eb:inline-flex eb:shrink-0 eb:items-center eb:gap-1 eb:rounded-full eb:bg-success/10 eb:px-1.5 eb:py-px eb:text-[10.5px] eb:font-medium eb:text-success", children: [
+      /* @__PURE__ */ jsx(Gift, { className: "eb:size-3", "aria-hidden": "true" }),
+      t("Free")
+    ] }),
+    model.id === provider.model && /* @__PURE__ */ jsx("span", { className: "eb:shrink-0 eb:rounded-full eb:bg-muted eb:px-1.5 eb:py-px eb:text-[10.5px] eb:font-medium eb:text-foreground-lighter", children: t("Default") })
+  ] });
+  const status = {
+    loading: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(LoaderCircle, { className: "eb:size-3 eb:shrink-0 eb:animate-spin", "aria-hidden": "true" }),
+      t("Loading the models of {provider}\u2026", { provider: provider.name })
+    ] }),
+    "needs-key": t("Paste the key to see all the models of {provider}.", { provider: provider.name }),
+    refused: /* @__PURE__ */ jsx("span", { className: "eb:text-warning", children: t("{provider} refused this key: its models could not be listed.", { provider: provider.name }) }),
+    failed: t("The list of models could not be loaded. The default model works, or type the id of another."),
+    ready: list.models.length ? hasFree ? t("{count} models, the free ones first.", { count: list.models.length }) : t("{count} models.", { count: list.models.length }) : t("{provider} lists no models here: type the id of the one you want.", { provider: provider.name })
+  }[list.status];
+  return /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1.5", "data-testid": "eb-ai-connect-model-field", children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "eb:text-[12.5px] eb:leading-none eb:font-medium eb:text-foreground", children: t("Model") }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-labelledby": `${labelId} ${valueId}`,
+        "aria-describedby": hintId,
+        onClick: () => onOpenChange(!open),
+        className: cn(
+          "eb:flex eb:h-9 eb:w-full eb:min-w-0 eb:items-center eb:gap-2 eb:rounded-md eb:border eb:border-input eb:bg-transparent eb:px-3 eb:text-left eb:shadow-xs eb:transition-[color,box-shadow] eb:outline-none eb:focus-visible:border-ring eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50",
+          open && "eb:border-ring"
+        ),
+        "data-testid": "eb-ai-connect-model",
+        children: [
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "eb:min-w-0 eb:truncate eb:font-mono eb:text-[12.5px] eb:text-foreground", children: value || t("Choose a model") }),
+          current && badges(current),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("eb:ml-auto eb:size-4 eb:shrink-0 eb:text-foreground-muted eb:transition-transform", open && "eb:rotate-180"), "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "eb:flex eb:flex-col eb:overflow-hidden eb:rounded-md eb:border eb:border-border eb:bg-background",
+        onKeyDown: (event) => event.key === "Escape" && close(),
+        "data-eb-models": "",
+        "data-testid": "eb-ai-connect-models",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:items-center eb:gap-2 eb:border-b eb:border-border eb:p-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "eb:relative eb:min-w-0 eb:flex-1", children: [
+              /* @__PURE__ */ jsx(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  autoFocus: true,
+                  role: "combobox",
+                  "aria-expanded": "true",
+                  "aria-controls": listId,
+                  "aria-autocomplete": "list",
+                  "aria-activedescendant": count ? optionId(active) : void 0,
+                  "aria-label": t("Search the models"),
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value),
+                  onKeyDown,
+                  placeholder: t("Search the models\u2026"),
+                  autoComplete: "off",
+                  autoCapitalize: "off",
+                  autoCorrect: "off",
+                  spellCheck: false,
+                  className: "eb:h-8 eb:w-full eb:rounded-md eb:bg-surface-75 eb:pr-2 eb:pl-7 eb:text-[13px] eb:text-foreground eb:outline-none eb:placeholder:text-foreground-muted eb:focus-visible:ring-2 eb:focus-visible:ring-ring/40",
+                  "data-testid": "eb-ai-connect-model-search"
+                }
+              )
+            ] }),
+            hasFree && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": freeOnly,
+                onClick: () => setFreeOnly((on) => !on),
+                className: cn(
+                  "eb:inline-flex eb:h-8 eb:shrink-0 eb:items-center eb:gap-1.5 eb:rounded-md eb:border eb:px-2.5 eb:text-[12px] eb:font-medium eb:transition-colors eb:outline-none eb:focus-visible:ring-[3px] eb:focus-visible:ring-ring/50",
+                  freeOnly ? "eb:border-success/40 eb:bg-success/10 eb:text-success" : "eb:border-border eb:text-foreground-lighter eb:hover:bg-muted"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Gift, { className: "eb:size-3.5", "aria-hidden": "true" }),
+                  t("Free only")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { ref: listRef, id: listId, role: "listbox", "aria-labelledby": labelId, className: "eb:max-h-56 eb:overflow-y-auto eb:p-1", children: [
+            matches.map((model, at) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                id: optionId(at),
+                type: "button",
+                role: "option",
+                tabIndex: -1,
+                "aria-selected": model.id === value,
+                "data-active": at === active,
+                "data-model": model.id,
+                onClick: () => pick(model.id),
+                onMouseMove: () => at !== active && setActive(at),
+                className: cn(
+                  "eb:flex eb:w-full eb:min-w-0 eb:items-start eb:gap-2 eb:rounded-md eb:px-2 eb:py-1.5 eb:text-left",
+                  at === active ? "eb:bg-accent eb:text-accent-foreground" : ""
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Check, { className: cn("eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-primary", model.id !== value && "eb:invisible"), "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxs("span", { className: "eb:flex eb:min-w-0 eb:flex-1 eb:flex-col eb:gap-0.5", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "eb:flex eb:min-w-0 eb:items-center eb:gap-1.5", children: [
+                      /* @__PURE__ */ jsx("span", { className: "eb:truncate eb:text-[13px] eb:text-foreground", children: model.name }),
+                      badges(model)
+                    ] }),
+                    model.name !== model.id && /* @__PURE__ */ jsx("span", { className: "eb:truncate eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", children: model.id })
+                  ] })
+                ]
+              },
+              model.id
+            )),
+            custom && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                id: optionId(matches.length),
+                type: "button",
+                role: "option",
+                tabIndex: -1,
+                "aria-selected": false,
+                "data-active": active === matches.length,
+                onClick: () => pick(custom),
+                onMouseMove: () => active !== matches.length && setActive(matches.length),
+                className: cn(
+                  "eb:flex eb:w-full eb:min-w-0 eb:items-center eb:gap-2 eb:rounded-md eb:px-2 eb:py-1.5 eb:text-left eb:text-[13px] eb:text-primary",
+                  active === matches.length ? "eb:bg-accent" : ""
+                ),
+                "data-testid": "eb-ai-connect-model-custom",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "eb:min-w-0 eb:truncate", children: t("Use \u201C{model}\u201D", { model: custom }) })
+                ]
+              }
+            ),
+            !count && /* @__PURE__ */ jsx("p", { className: "eb:px-2 eb:py-3 eb:text-center eb:text-[12px] eb:text-foreground-muted", children: t("No model matches.") })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { id: hintId, role: "status", className: "eb:flex eb:min-h-4 eb:items-center eb:gap-1.5 eb:text-[11.5px] eb:text-foreground-muted", "data-testid": "eb-ai-connect-models-status", children: status })
+  ] });
+}
+
+// src/ai/ConnectAi.jsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LISTABLE_KEY = 20;
 function ConnectAi({ aiKey }) {
   const { t } = useUi();
   const state = useSyncExternalStore(aiKey.subscribe, aiKey.state, aiKey.state);
-  const [value, setValue] = useState("");
-  const [shown, setShown] = useState(false);
-  const [chosenId, setChosenId] = useState(aiKey.provider.id);
-  const inputRef = useRef(
+  const [value, setValue] = useState2("");
+  const [shown, setShown] = useState2(false);
+  const [chosenId, setChosenId] = useState2(aiKey.provider.id);
+  const [picks, setPicks] = useState2(
+    /** @type {Record<string, string>} */
+    {}
+  );
+  const [modelsOpen, setModelsOpen] = useState2(false);
+  const inputRef = useRef2(
     /** @type {HTMLInputElement|null} */
     null
   );
-  const choicesRef = useRef(
+  const choicesRef = useRef2(
     /** @type {HTMLDivElement|null} */
     null
   );
-  const inputId = useId();
-  const hintId = useId();
+  const inputId = useId2();
+  const hintId = useId2();
   const choices = aiKey.providers;
   const chosen = choices.find((provider) => provider.id === chosenId) || aiKey.provider;
   const { name, keyUrl, keyHint, free } = chosen;
-  useEffect(() => {
+  useEffect2(() => {
     if (!state.asking) return;
     setChosenId(aiKey.provider.id);
     setValue("");
     setShown(false);
+    setPicks({});
+    setModelsOpen(false);
   }, [state.asking, aiKey]);
   const key = value.trim();
   const saved = aiKey.get(chosen.id);
   const unusual = Boolean(key && keyHint && !key.startsWith(keyHint));
   const refused = state.refused && chosen.id === aiKey.provider.id;
+  const modelFor = (id) => picks[id] ?? aiKey.model(id);
   const submit = (event) => {
     event.preventDefault();
     const answer = key || saved;
     if (!answer) return;
     if (chosen.id !== aiKey.provider.id) aiKey.choose(chosen.id);
+    if (picks[chosen.id] && picks[chosen.id] !== aiKey.model(chosen.id)) aiKey.chooseModel(picks[chosen.id], chosen.id);
     aiKey.answer(answer);
   };
   const choose = (id) => {
     setChosenId(id);
     setValue("");
+    setModelsOpen(false);
   };
   const onChoicesKeyDown = (event) => {
     const at = choices.findIndex((provider) => provider.id === chosen.id);
@@ -222,25 +519,30 @@ function ConnectAi({ aiKey }) {
     choose(choices[to].id);
     choicesRef.current?.querySelectorAll('[role="radio"]')[to]?.focus();
   };
-  return /* @__PURE__ */ jsx(Dialog, { open: state.asking, onOpenChange: (open) => !open && aiKey.answer(null), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(Dialog, { open: state.asking, onOpenChange: (open) => !open && aiKey.answer(null), children: /* @__PURE__ */ jsx2(
     DialogContent,
     {
-      className: cn("eb:gap-0 eb:overflow-hidden eb:p-0", choices.length > 1 ? "eb:sm:max-w-xl" : "eb:sm:max-w-md"),
+      className: cn("eb:max-h-[calc(100dvh-2rem)] eb:gap-0 eb:overflow-y-auto eb:p-0", choices.length > 1 ? "eb:sm:max-w-xl" : "eb:sm:max-w-md"),
       "data-testid": "eb-ai-connect",
       onOpenAutoFocus: (event) => {
         event.preventDefault();
         inputRef.current?.focus();
       },
-      children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, children: [
-        /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-5 eb:px-6 eb:pt-6 eb:pb-5", children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { className: "eb:flex-row eb:items-start eb:gap-3.5 eb:pr-6", children: [
-            /* @__PURE__ */ jsx("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-full eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx(KeyRound, { className: "eb:size-5", "aria-hidden": "true" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-              /* @__PURE__ */ jsx(DialogTitle, { children: t("Connect {provider}", { provider: name }) }),
-              /* @__PURE__ */ jsx(DialogDescription, { className: "eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", children: t("The AI writes with your own {provider} key. Connect it once: this browser remembers it.", { provider: name }) })
+      onEscapeKeyDown: (event) => {
+        if (!modelsOpen) return;
+        event.preventDefault();
+        if (!(event.target instanceof Element && event.target.closest("[data-eb-models]"))) setModelsOpen(false);
+      },
+      children: /* @__PURE__ */ jsxs2("form", { onSubmit: submit, className: "eb:min-w-0", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-col eb:gap-5 eb:px-6 eb:pt-6 eb:pb-5", children: [
+          /* @__PURE__ */ jsxs2(DialogHeader, { className: "eb:flex-row eb:items-start eb:gap-3.5 eb:pr-6", children: [
+            /* @__PURE__ */ jsx2("span", { className: "eb:flex eb:size-10 eb:shrink-0 eb:items-center eb:justify-center eb:rounded-full eb:bg-primary/10 eb:text-primary", children: /* @__PURE__ */ jsx2(KeyRound, { className: "eb:size-5", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+              /* @__PURE__ */ jsx2(DialogTitle, { children: t("Connect {provider}", { provider: name }) }),
+              /* @__PURE__ */ jsx2(DialogDescription, { className: "eb:text-[13px] eb:leading-relaxed eb:text-foreground-lighter", children: t("The AI writes with your own {provider} key. Connect it once: this browser remembers it.", { provider: name }) })
             ] })
           ] }),
-          choices.length > 1 && /* @__PURE__ */ jsx(
+          choices.length > 1 && /* @__PURE__ */ jsx2(
             "div",
             {
               ref: choicesRef,
@@ -251,7 +553,7 @@ function ConnectAi({ aiKey }) {
               "data-testid": "eb-ai-connect-providers",
               children: choices.map((provider) => {
                 const checked = provider.id === chosen.id;
-                return /* @__PURE__ */ jsxs(
+                return /* @__PURE__ */ jsxs2(
                   "button",
                   {
                     type: "button",
@@ -264,12 +566,12 @@ function ConnectAi({ aiKey }) {
                       checked ? "eb:border-primary eb:bg-primary/10" : "eb:border-border eb:hover:bg-muted"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs("span", { className: "eb:flex eb:items-center eb:gap-1.5 eb:text-[13px] eb:leading-tight eb:font-medium eb:text-foreground", children: [
-                        /* @__PURE__ */ jsx("span", { className: "eb:truncate", children: provider.name }),
-                        provider.free && /* @__PURE__ */ jsx(Gift, { className: "eb:size-3 eb:shrink-0 eb:text-success", "aria-label": t(provider.free) }),
-                        aiKey.get(provider.id) && /* @__PURE__ */ jsx("span", { className: "eb:ml-auto eb:size-1.5 eb:shrink-0 eb:rounded-full eb:bg-success", title: t("Key saved"), "aria-label": t("Key saved") })
+                      /* @__PURE__ */ jsxs2("span", { className: "eb:flex eb:items-center eb:gap-1.5 eb:text-[13px] eb:leading-tight eb:font-medium eb:text-foreground", children: [
+                        /* @__PURE__ */ jsx2("span", { className: "eb:truncate", children: provider.name }),
+                        provider.free && /* @__PURE__ */ jsx2(Gift2, { className: "eb:size-3 eb:shrink-0 eb:text-success", "aria-label": t(provider.free) }),
+                        aiKey.get(provider.id) && /* @__PURE__ */ jsx2("span", { className: "eb:ml-auto eb:size-1.5 eb:shrink-0 eb:rounded-full eb:bg-success", title: t("Key saved"), "aria-label": t("Key saved") })
                       ] }),
-                      provider.model && /* @__PURE__ */ jsx("span", { className: "eb:truncate eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", title: provider.model, children: provider.model })
+                      modelFor(provider.id) && /* @__PURE__ */ jsx2("span", { className: "eb:truncate eb:font-mono eb:text-[10.5px] eb:text-foreground-muted", title: modelFor(provider.id), children: modelFor(provider.id) })
                     ]
                   },
                   provider.id
@@ -277,24 +579,37 @@ function ConnectAi({ aiKey }) {
               })
             }
           ),
-          refused && /* @__PURE__ */ jsxs("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-2 eb:rounded-md eb:border eb:border-destructive/30 eb:bg-destructive/10 eb:px-3 eb:py-2 eb:text-[12.5px] eb:text-destructive", children: [
-            /* @__PURE__ */ jsx(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+          refused && /* @__PURE__ */ jsxs2("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-2 eb:rounded-md eb:border eb:border-destructive/30 eb:bg-destructive/10 eb:px-3 eb:py-2 eb:text-[12.5px] eb:text-destructive", children: [
+            /* @__PURE__ */ jsx2(TriangleAlert, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
             t("{provider} refused the last key. Paste another one.", { provider: name })
           ] }),
-          (keyUrl || free) && /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-wrap eb:items-center eb:gap-x-3 eb:gap-y-2", children: [
-            keyUrl && /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm-compact", children: /* @__PURE__ */ jsxs("a", { href: keyUrl, target: "_blank", rel: "noopener noreferrer", "data-testid": "eb-ai-connect-get-key", children: [
-              t("Get a key"),
-              /* @__PURE__ */ jsx(ArrowUpRight, { "aria-hidden": "true" })
-            ] }) }),
-            free && /* @__PURE__ */ jsxs("span", { className: "eb:inline-flex eb:items-center eb:gap-1.5 eb:rounded-full eb:bg-success/10 eb:px-2.5 eb:py-1 eb:text-[11.5px] eb:font-medium eb:text-success", children: [
-              /* @__PURE__ */ jsx(Gift, { className: "eb:size-3.5", "aria-hidden": "true" }),
+          (keyUrl || free) && /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-wrap eb:items-center eb:gap-x-3 eb:gap-y-2", children: [
+            keyUrl && /* @__PURE__ */ jsx2(Button, { asChild: true, variant: "outline", size: "sm-compact", children: /* @__PURE__ */ jsxs2(
+              "a",
+              {
+                href: keyUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                onClick: (event) => {
+                  event.preventDefault();
+                  window.open(keyUrl, "_blank", "noopener,noreferrer");
+                },
+                "data-testid": "eb-ai-connect-get-key",
+                children: [
+                  t("Get a key"),
+                  /* @__PURE__ */ jsx2(ArrowUpRight, { "aria-hidden": "true" })
+                ]
+              }
+            ) }),
+            free && /* @__PURE__ */ jsxs2("span", { className: "eb:inline-flex eb:items-center eb:gap-1.5 eb:rounded-full eb:bg-success/10 eb:px-2.5 eb:py-1 eb:text-[11.5px] eb:font-medium eb:text-success", children: [
+              /* @__PURE__ */ jsx2(Gift2, { className: "eb:size-3.5", "aria-hidden": "true" }),
               t(free)
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("API key") }),
-            /* @__PURE__ */ jsxs("div", { className: "eb:relative", children: [
-              /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-col eb:gap-1.5", children: [
+            /* @__PURE__ */ jsx2(Label, { htmlFor: inputId, children: t("API key") }),
+            /* @__PURE__ */ jsxs2("div", { className: "eb:relative", children: [
+              /* @__PURE__ */ jsx2(
                 Input,
                 {
                   ref: inputRef,
@@ -312,7 +627,7 @@ function ConnectAi({ aiKey }) {
                   "data-testid": "eb-ai-connect-key"
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -320,20 +635,33 @@ function ConnectAi({ aiKey }) {
                   onClick: () => setShown((current) => !current),
                   "aria-label": shown ? t("Hide the key") : t("Show the key"),
                   "aria-pressed": shown,
-                  children: shown ? /* @__PURE__ */ jsx(EyeOff, { className: "eb:size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "eb:size-4", "aria-hidden": "true" })
+                  children: shown ? /* @__PURE__ */ jsx2(EyeOff, { className: "eb:size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(Eye, { className: "eb:size-4", "aria-hidden": "true" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("p", { id: hintId, className: "eb:min-h-4 eb:text-[11.5px] eb:text-foreground-muted", children: unusual ? /* @__PURE__ */ jsx("span", { className: "eb:text-warning", children: t("{provider} keys usually start with {prefix}.", { provider: name, prefix: keyHint }) }) : saved && !key ? t("A key for {provider} is saved in this browser: Connect uses it, or paste another one.", { provider: name }) : keyHint ? t("{provider} keys start with {prefix}.", { provider: name, prefix: keyHint }) : null })
-          ] })
+            /* @__PURE__ */ jsx2("p", { id: hintId, className: "eb:min-h-4 eb:text-[11.5px] eb:text-foreground-muted", children: unusual ? /* @__PURE__ */ jsx2("span", { className: "eb:text-warning", children: t("{provider} keys usually start with {prefix}.", { provider: name, prefix: keyHint }) }) : saved && !key ? t("A key for {provider} is saved in this browser: Connect uses it, or paste another one.", { provider: name }) : keyHint ? t("{provider} keys start with {prefix}.", { provider: name, prefix: keyHint }) : null })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            ModelPicker,
+            {
+              aiKey,
+              provider: chosen,
+              apiKey: key.length >= LISTABLE_KEY ? key : saved,
+              delay: key.length >= LISTABLE_KEY ? 350 : 0,
+              value: modelFor(chosen.id),
+              onChange: (model) => setPicks((current) => ({ ...current, [chosen.id]: model })),
+              open: modelsOpen,
+              onOpenChange: setModelsOpen
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "eb:flex eb:items-start eb:gap-2 eb:border-t eb:border-border eb:bg-surface-75 eb:px-6 eb:py-3 eb:text-[11.5px] eb:leading-relaxed eb:text-foreground-lighter", children: [
-          /* @__PURE__ */ jsx(ShieldCheck, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-foreground-muted", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { children: t("The key stays in this browser and is sent only to {provider}.", { provider: name }) })
+        /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-start eb:gap-2 eb:border-t eb:border-border eb:bg-surface-75 eb:px-6 eb:py-3 eb:text-[11.5px] eb:leading-relaxed eb:text-foreground-lighter", children: [
+          /* @__PURE__ */ jsx2(ShieldCheck, { className: "eb:mt-0.5 eb:size-3.5 eb:shrink-0 eb:text-foreground-muted", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx2("span", { children: t("The key stays in this browser and is sent only to {provider}.", { provider: name }) })
         ] }),
-        /* @__PURE__ */ jsxs(DialogFooter, { className: "eb:border-t eb:border-border eb:px-6 eb:py-4", children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => aiKey.answer(null), children: t("Cancel") }),
-          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !key && !saved, "data-testid": "eb-ai-connect-submit", children: t("Connect") })
+        /* @__PURE__ */ jsxs2(DialogFooter, { className: "eb:border-t eb:border-border eb:px-6 eb:py-4", children: [
+          /* @__PURE__ */ jsx2(Button, { type: "button", variant: "ghost", onClick: () => aiKey.answer(null), children: t("Cancel") }),
+          /* @__PURE__ */ jsx2(Button, { type: "submit", disabled: !key && !saved, "data-testid": "eb-ai-connect-submit", children: t("Connect") })
         ] })
       ] })
     }
@@ -341,8 +669,8 @@ function ConnectAi({ aiKey }) {
 }
 
 // src/ai/GenerateButton.jsx
-import { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
-import { Check, Loader2, Search, Sparkles, TriangleAlert as TriangleAlert2 } from "lucide-react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { Check as Check2, Loader2, Search as Search2, Sparkles, TriangleAlert as TriangleAlert2 } from "lucide-react";
 
 // src/ai/chip.js
 var chipClassName = (selected = false) => cn(
@@ -351,39 +679,39 @@ var chipClassName = (selected = false) => cn(
 );
 
 // src/ai/GenerateButton.jsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var fold = (text) => text.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
 function GenerateButton({ context, generate: generateEmail }) {
   const { editor, ready, isDirty, markDirty, template, setMeta, variables, sender, brand } = context;
   const { t, locale, notify } = useUi();
-  const [open, setOpen] = useState2(false);
-  const [purpose, setPurpose] = useState2(
+  const [open, setOpen] = useState3(false);
+  const [purpose, setPurpose] = useState3(
     /** @type {string|null} */
     null
   );
-  const [details, setDetails] = useState2("");
-  const [query, setQuery] = useState2("");
-  const [busy, setBusy] = useState2(false);
-  const [error, setError] = useState2("");
-  const [seconds, setSeconds] = useState2(0);
-  const [dirty, setDirty] = useState2(false);
-  const abortRef = useRef2(
+  const [details, setDetails] = useState3("");
+  const [query, setQuery] = useState3("");
+  const [busy, setBusy] = useState3(false);
+  const [error, setError] = useState3("");
+  const [seconds, setSeconds] = useState3(0);
+  const [dirty, setDirty] = useState3(false);
+  const abortRef = useRef3(
     /** @type {AbortController|null} */
     null
   );
-  const searchRef = useRef2(
+  const searchRef = useRef3(
     /** @type {HTMLInputElement|null} */
     null
   );
   useSearchShortcut(searchRef);
-  useEffect2(() => () => abortRef.current?.abort(), []);
-  useEffect2(() => {
+  useEffect3(() => () => abortRef.current?.abort(), []);
+  useEffect3(() => {
     if (!busy) return void 0;
     setSeconds(0);
     const timer = setInterval(() => setSeconds((s) => s + 1), 1e3);
     return () => clearInterval(timer);
   }, [busy]);
-  const groups = useMemo(() => {
+  const groups = useMemo2(() => {
     const words = fold(query.trim()).split(/\s+/).filter(Boolean);
     return purposesByCategory().map((group) => ({
       ...group,
@@ -444,12 +772,12 @@ function GenerateButton({ context, generate: generateEmail }) {
     setBusy(false);
   };
   const canGenerate = Boolean(purpose || details.trim());
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, children: [
-      /* @__PURE__ */ jsx2(Sparkles, {}),
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(Button, { variant: "outline", size: "sm-compact", disabled: !ready, onClick: openDialog, children: [
+      /* @__PURE__ */ jsx3(Sparkles, {}),
       t("Generate")
     ] }),
-    /* @__PURE__ */ jsx2(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange: close, children: /* @__PURE__ */ jsxs3(
       DialogContent,
       {
         className: "eb:flex eb:max-h-[calc(100dvh-2rem)] eb:flex-col eb:gap-0 eb:p-0 eb:sm:max-w-2xl",
@@ -459,13 +787,13 @@ function GenerateButton({ context, generate: generateEmail }) {
           searchRef.current?.focus();
         },
         children: [
-          /* @__PURE__ */ jsxs2(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-3", children: [
-            /* @__PURE__ */ jsx2(DialogTitle, { children: t("Generate an email") }),
-            /* @__PURE__ */ jsx2(DialogDescription, { children: t("Pick what it is for. AI writes a complete email that opens here, ready to edit.") })
+          /* @__PURE__ */ jsxs3(DialogHeader, { className: "eb:gap-1.5 eb:px-6 eb:pt-6 eb:pb-3", children: [
+            /* @__PURE__ */ jsx3(DialogTitle, { children: t("Generate an email") }),
+            /* @__PURE__ */ jsx3(DialogDescription, { children: t("Pick what it is for. AI writes a complete email that opens here, ready to edit.") })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "eb:px-6 eb:pb-3", children: /* @__PURE__ */ jsxs2("div", { className: "eb:relative", children: [
-            /* @__PURE__ */ jsx2(Search, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx3("div", { className: "eb:px-6 eb:pb-3", children: /* @__PURE__ */ jsxs3("div", { className: "eb:relative", children: [
+            /* @__PURE__ */ jsx3(Search2, { className: "eb:pointer-events-none eb:absolute eb:top-1/2 eb:left-2.5 eb:size-3.5 eb:-translate-y-1/2 eb:text-foreground-muted", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx3(
               Input,
               {
                 ref: searchRef,
@@ -479,16 +807,16 @@ function GenerateButton({ context, generate: generateEmail }) {
                 disabled: busy
               }
             ),
-            /* @__PURE__ */ jsx2(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-2 eb:-translate-y-1/2" })
+            /* @__PURE__ */ jsx3(SearchKeyHint, { className: "eb:absolute eb:top-1/2 eb:right-2 eb:-translate-y-1/2" })
           ] }) }),
-          /* @__PURE__ */ jsx2("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:border-y eb:border-border eb:px-6 eb:py-4", "data-testid": "eb-generate-purposes", children: /* @__PURE__ */ jsxs2("fieldset", { disabled: busy, className: "eb:m-0 eb:min-w-0 eb:border-0 eb:p-0", children: [
-            /* @__PURE__ */ jsx2("legend", { className: "eb:sr-only", children: t("What is the email for?") }),
-            groups.length === 0 && /* @__PURE__ */ jsx2("p", { className: "eb:py-6 eb:text-center eb:text-[13px] eb:text-foreground-muted", children: t("Nothing matches. Describe your email in the details below.") }),
-            /* @__PURE__ */ jsx2("div", { className: "eb:flex eb:flex-col eb:gap-4", children: groups.map((group) => /* @__PURE__ */ jsxs2("section", { className: "eb:flex eb:flex-col eb:gap-2", "aria-label": t(group.label), children: [
-              /* @__PURE__ */ jsx2(SectionLabel, { children: t(group.label) }),
-              /* @__PURE__ */ jsx2("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: group.purposes.map((entry) => {
+          /* @__PURE__ */ jsx3("div", { className: "eb:min-h-0 eb:flex-1 eb:overflow-y-auto eb:border-y eb:border-border eb:px-6 eb:py-4", "data-testid": "eb-generate-purposes", children: /* @__PURE__ */ jsxs3("fieldset", { disabled: busy, className: "eb:m-0 eb:min-w-0 eb:border-0 eb:p-0", children: [
+            /* @__PURE__ */ jsx3("legend", { className: "eb:sr-only", children: t("What is the email for?") }),
+            groups.length === 0 && /* @__PURE__ */ jsx3("p", { className: "eb:py-6 eb:text-center eb:text-[13px] eb:text-foreground-muted", children: t("Nothing matches. Describe your email in the details below.") }),
+            /* @__PURE__ */ jsx3("div", { className: "eb:flex eb:flex-col eb:gap-4", children: groups.map((group) => /* @__PURE__ */ jsxs3("section", { className: "eb:flex eb:flex-col eb:gap-2", "aria-label": t(group.label), children: [
+              /* @__PURE__ */ jsx3(SectionLabel, { children: t(group.label) }),
+              /* @__PURE__ */ jsx3("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: group.purposes.map((entry) => {
                 const selected = purpose === entry.id;
-                return /* @__PURE__ */ jsxs2(
+                return /* @__PURE__ */ jsxs3(
                   "button",
                   {
                     type: "button",
@@ -497,7 +825,7 @@ function GenerateButton({ context, generate: generateEmail }) {
                     onClick: () => setPurpose(selected ? null : entry.id),
                     className: chipClassName(selected),
                     children: [
-                      selected && /* @__PURE__ */ jsx2(Check, { className: "eb:size-3", "aria-hidden": "true" }),
+                      selected && /* @__PURE__ */ jsx3(Check2, { className: "eb:size-3", "aria-hidden": "true" }),
                       t(entry.label)
                     ]
                   },
@@ -506,8 +834,8 @@ function GenerateButton({ context, generate: generateEmail }) {
               }) })
             ] }, group.id)) })
           ] }) }),
-          /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:flex-col eb:gap-3 eb:px-6 eb:pt-3 eb:pb-6", children: [
+            /* @__PURE__ */ jsx3(
               Textarea,
               {
                 value: details,
@@ -522,15 +850,15 @@ function GenerateButton({ context, generate: generateEmail }) {
                 }
               }
             ),
-            error ? /* @__PURE__ */ jsxs2("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-              /* @__PURE__ */ jsx2(TriangleAlert2, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+            error ? /* @__PURE__ */ jsxs3("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+              /* @__PURE__ */ jsx3(TriangleAlert2, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
               error
-            ] }) : dirty && !busy && /* @__PURE__ */ jsx2("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The email being edited will be replaced, unsaved changes included.") }),
-            /* @__PURE__ */ jsxs2("div", { className: "eb:flex eb:items-center eb:justify-end eb:gap-2", children: [
-              busy && /* @__PURE__ */ jsx2("p", { className: "eb:mr-auto eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: t("Writing your email\u2026 {seconds} s", { seconds }) }),
-              busy && /* @__PURE__ */ jsx2(Button, { variant: "outline", size: "sm", onClick: cancel, children: t("Cancel") }),
-              /* @__PURE__ */ jsxs2(Button, { size: "sm", onClick: generate, disabled: !canGenerate || busy, "data-testid": "eb-generate-submit", children: [
-                busy ? /* @__PURE__ */ jsx2(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx2(Sparkles, {}),
+            ] }) : dirty && !busy && /* @__PURE__ */ jsx3("p", { className: "eb:text-[12px] eb:text-foreground-muted", children: t("The email being edited will be replaced, unsaved changes included.") }),
+            /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:items-center eb:justify-end eb:gap-2", children: [
+              busy && /* @__PURE__ */ jsx3("p", { className: "eb:mr-auto eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: t("Writing your email\u2026 {seconds} s", { seconds }) }),
+              busy && /* @__PURE__ */ jsx3(Button, { variant: "outline", size: "sm", onClick: cancel, children: t("Cancel") }),
+              /* @__PURE__ */ jsxs3(Button, { size: "sm", onClick: generate, disabled: !canGenerate || busy, "data-testid": "eb-generate-submit", children: [
+                busy ? /* @__PURE__ */ jsx3(Loader2, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx3(Sparkles, {}),
                 t("Generate")
               ] })
             ] })
@@ -542,9 +870,9 @@ function GenerateButton({ context, generate: generateEmail }) {
 }
 
 // src/ai/RewriteText.jsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
-import { ChevronDown, Languages, Loader2 as Loader22, Sparkles as Sparkles2, TriangleAlert as TriangleAlert3 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { ChevronDown as ChevronDown2, Languages, Loader2 as Loader22, Sparkles as Sparkles2, TriangleAlert as TriangleAlert3 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function nativeName(code) {
   try {
     const name = new Intl.DisplayNames([code], { type: "language" }).of(code) || code;
@@ -555,18 +883,18 @@ function nativeName(code) {
 }
 function RewriteText({ editor, selection, rewrite }) {
   const { t, notify } = useUi();
-  const [running, setRunning] = useState3(
+  const [running, setRunning] = useState4(
     /** @type {string|null} */
     null
   );
-  const [error, setError] = useState3("");
-  const [instruction, setInstruction] = useState3("");
-  const abortRef = useRef3(
+  const [error, setError] = useState4("");
+  const [instruction, setInstruction] = useState4("");
+  const abortRef = useRef4(
     /** @type {AbortController|null} */
     null
   );
   const label = selection.tagName === "mj-button";
-  useEffect3(() => () => abortRef.current?.abort(), []);
+  useEffect4(() => () => abortRef.current?.abort(), []);
   const currentText = () => {
     const element = editor.getElement(selection.id);
     return (label ? element?.content : element?.html) ?? "";
@@ -600,27 +928,27 @@ function RewriteText({ editor, selection, rewrite }) {
     setRunning(null);
   };
   const busy = Boolean(running);
-  const spinner = /* @__PURE__ */ jsx3(Loader22, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
-  return /* @__PURE__ */ jsxs3("section", { className: "eb:space-y-2.5", "aria-label": t("Rewrite with AI"), "data-testid": "eb-rewrite", children: [
-    /* @__PURE__ */ jsxs3(SectionLabel, { className: "eb:flex eb:items-center eb:gap-1.5", children: [
-      /* @__PURE__ */ jsx3(Sparkles2, { className: "eb:size-3", "aria-hidden": "true" }),
+  const spinner = /* @__PURE__ */ jsx4(Loader22, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs4("section", { className: "eb:space-y-2.5", "aria-label": t("Rewrite with AI"), "data-testid": "eb-rewrite", children: [
+    /* @__PURE__ */ jsxs4(SectionLabel, { className: "eb:flex eb:items-center eb:gap-1.5", children: [
+      /* @__PURE__ */ jsx4(Sparkles2, { className: "eb:size-3", "aria-hidden": "true" }),
       t("Rewrite with AI")
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: [
-      REWRITE_ACTIONS.map((action) => /* @__PURE__ */ jsxs3("button", { type: "button", className: chipClassName(), disabled: busy, onClick: () => run(action.id), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:flex-wrap eb:gap-1.5", children: [
+      REWRITE_ACTIONS.map((action) => /* @__PURE__ */ jsxs4("button", { type: "button", className: chipClassName(), disabled: busy, onClick: () => run(action.id), children: [
         running === action.id && spinner,
         t(action.label)
       ] }, action.id)),
-      /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, disabled: busy, children: /* @__PURE__ */ jsxs3("button", { type: "button", className: chipClassName(), children: [
-          running === "translate" ? spinner : /* @__PURE__ */ jsx3(Languages, { className: "eb:size-3", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, disabled: busy, children: /* @__PURE__ */ jsxs4("button", { type: "button", className: chipClassName(), children: [
+          running === "translate" ? spinner : /* @__PURE__ */ jsx4(Languages, { className: "eb:size-3", "aria-hidden": "true" }),
           t("Translate"),
-          /* @__PURE__ */ jsx3(ChevronDown, { className: "eb:size-3", "aria-hidden": "true" })
+          /* @__PURE__ */ jsx4(ChevronDown2, { className: "eb:size-3", "aria-hidden": "true" })
         ] }) }),
-        /* @__PURE__ */ jsx3(DropdownMenuContent, { align: "start", "aria-label": t("Translate into"), children: REWRITE_LANGUAGES.map((code) => /* @__PURE__ */ jsx3(DropdownMenuItem, { lang: code, onSelect: () => run("translate", { targetLanguage: code }), children: nativeName(code) }, code)) })
+        /* @__PURE__ */ jsx4(DropdownMenuContent, { align: "start", "aria-label": t("Translate into"), children: REWRITE_LANGUAGES.map((code) => /* @__PURE__ */ jsx4(DropdownMenuItem, { lang: code, onSelect: () => run("translate", { targetLanguage: code }), children: nativeName(code) }, code)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       "form",
       {
         className: "eb:flex eb:gap-1.5",
@@ -629,7 +957,7 @@ function RewriteText({ editor, selection, rewrite }) {
           if (instruction.trim()) run("custom", { instruction: instruction.trim() });
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             Input,
             {
               value: instruction,
@@ -640,55 +968,55 @@ function RewriteText({ editor, selection, rewrite }) {
               disabled: busy
             }
           ),
-          /* @__PURE__ */ jsx3(Button, { type: "submit", variant: "outline", size: "icon-sm", "aria-label": t("Rewrite"), disabled: busy || !instruction.trim(), children: running === "custom" ? /* @__PURE__ */ jsx3(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx3(Sparkles2, {}) })
+          /* @__PURE__ */ jsx4(Button, { type: "submit", variant: "outline", size: "icon-sm", "aria-label": t("Rewrite"), disabled: busy || !instruction.trim(), children: running === "custom" ? /* @__PURE__ */ jsx4(Loader22, { className: "eb:animate-spin" }) : /* @__PURE__ */ jsx4(Sparkles2, {}) })
         ]
       }
     ),
-    running && /* @__PURE__ */ jsxs3("p", { className: "eb:flex eb:items-center eb:gap-2 eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: [
+    running && /* @__PURE__ */ jsxs4("p", { className: "eb:flex eb:items-center eb:gap-2 eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: [
       t("Rewriting\u2026"),
-      /* @__PURE__ */ jsx3(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
+      /* @__PURE__ */ jsx4(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
     ] }),
-    error && /* @__PURE__ */ jsxs3("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-      /* @__PURE__ */ jsx3(TriangleAlert3, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+    error && /* @__PURE__ */ jsxs4("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+      /* @__PURE__ */ jsx4(TriangleAlert3, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
       error
     ] })
   ] });
 }
 
 // src/ai/SubjectIdeas.jsx
-import { useEffect as useEffect4, useLayoutEffect, useRef as useRef4, useState as useState4 } from "react";
-import { Check as Check2, Loader2 as Loader23, Sparkles as Sparkles3, TriangleAlert as TriangleAlert4 } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef5, useState as useState5 } from "react";
+import { Check as Check3, Loader2 as Loader23, Sparkles as Sparkles3, TriangleAlert as TriangleAlert4 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var MAX_AVOID = 12;
 function SubjectIdeas({ editor, meta, onSubject, suggest, variables = null }) {
   const { t, locale } = useUi();
-  const [running, setRunning] = useState4(false);
-  const [error, setError] = useState4("");
-  const [ideas, setIdeas] = useState4(
+  const [running, setRunning] = useState5(false);
+  const [error, setError] = useState5("");
+  const [ideas, setIdeas] = useState5(
     /** @type {string[]|null} */
     null
   );
-  const [original, setOriginal] = useState4("");
-  const shownRef = useRef4(
+  const [original, setOriginal] = useState5("");
+  const shownRef = useRef5(
     /** @type {string[]} */
     []
   );
-  const abortRef = useRef4(
+  const abortRef = useRef5(
     /** @type {AbortController|null} */
     null
   );
-  const subjectRef = useRef4(meta.subject);
+  const subjectRef = useRef5(meta.subject);
   subjectRef.current = meta.subject;
-  const rootRef = useRef4(
+  const rootRef = useRef5(
     /** @type {HTMLDivElement|null} */
     null
   );
-  const focusRef = useRef4(
+  const focusRef = useRef5(
     /** @type {'list'|'button'|null} */
     null
   );
-  useEffect4(() => () => abortRef.current?.abort(), []);
-  useEffect4(
+  useEffect5(() => () => abortRef.current?.abort(), []);
+  useEffect5(
     () => editor.on("load", () => {
       abortRef.current?.abort();
       abortRef.current = null;
@@ -701,7 +1029,7 @@ function SubjectIdeas({ editor, meta, onSubject, suggest, variables = null }) {
     [editor]
   );
   const typed = meta.subject.trim();
-  useEffect4(() => {
+  useEffect5(() => {
     if (ideas && typed && !ideas.includes(meta.subject) && typed !== original) setOriginal(typed);
   }, [ideas, meta.subject, typed, original]);
   useLayoutEffect(() => {
@@ -773,16 +1101,16 @@ function SubjectIdeas({ editor, meta, onSubject, suggest, variables = null }) {
     onSubject(options[to].text);
     rootRef.current?.querySelectorAll('[role="radio"]')[to]?.focus();
   };
-  const spinner = /* @__PURE__ */ jsx4(Loader23, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
-  return /* @__PURE__ */ jsxs4("div", { className: "eb:space-y-2", "data-testid": "eb-subject-ideas", ref: rootRef, children: [
-    !ideas && /* @__PURE__ */ jsxs4("button", { type: "button", className: chipClassName(), disabled: running || !ready, onClick: run, "data-subject-ideas-button": true, children: [
-      running ? spinner : /* @__PURE__ */ jsx4(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
+  const spinner = /* @__PURE__ */ jsx5(Loader23, { className: "eb:size-3 eb:animate-spin", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs5("div", { className: "eb:space-y-2", "data-testid": "eb-subject-ideas", ref: rootRef, children: [
+    !ideas && /* @__PURE__ */ jsxs5("button", { type: "button", className: chipClassName(), disabled: running || !ready, onClick: run, "data-subject-ideas-button": true, children: [
+      running ? spinner : /* @__PURE__ */ jsx5(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
       t("Suggest subjects")
     ] }),
-    ideas && /* @__PURE__ */ jsxs4("div", { className: "eb:space-y-2 eb:rounded-md eb:border eb:border-border eb:p-1.5", children: [
-      /* @__PURE__ */ jsx4("div", { role: "radiogroup", "aria-label": t("Subject ideas"), className: "eb:space-y-0.5", onKeyDown, children: options.map((option, index) => {
+    ideas && /* @__PURE__ */ jsxs5("div", { className: "eb:space-y-2 eb:rounded-md eb:border eb:border-border eb:p-1.5", children: [
+      /* @__PURE__ */ jsx5("div", { role: "radiogroup", "aria-label": t("Subject ideas"), className: "eb:space-y-0.5", onKeyDown, children: options.map((option, index) => {
         const chosen = index === checked;
-        return /* @__PURE__ */ jsxs4(
+        return /* @__PURE__ */ jsxs5(
           "button",
           {
             type: "button",
@@ -795,28 +1123,28 @@ function SubjectIdeas({ editor, meta, onSubject, suggest, variables = null }) {
             ),
             onClick: () => onSubject(option.text),
             children: [
-              /* @__PURE__ */ jsx4(Check2, { className: cn("eb:mt-0.5 eb:size-3.5 eb:shrink-0", chosen ? "eb:text-primary" : "eb:invisible"), "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx4("span", { className: "eb:min-w-0 eb:flex-1 eb:break-words", children: option.text }),
-              option.yours && /* @__PURE__ */ jsx4("span", { className: "eb:shrink-0 eb:text-[11px] eb:text-foreground-muted", children: t("yours") })
+              /* @__PURE__ */ jsx5(Check3, { className: cn("eb:mt-0.5 eb:size-3.5 eb:shrink-0", chosen ? "eb:text-primary" : "eb:invisible"), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx5("span", { className: "eb:min-w-0 eb:flex-1 eb:break-words", children: option.text }),
+              option.yours && /* @__PURE__ */ jsx5("span", { className: "eb:shrink-0 eb:text-[11px] eb:text-foreground-muted", children: t("yours") })
             ]
           },
           `${option.yours ? "yours" : "idea"}:${option.text}`
         );
       }) }),
-      /* @__PURE__ */ jsxs4("div", { className: "eb:flex eb:items-center eb:gap-1.5 eb:px-1 eb:pb-0.5", children: [
-        /* @__PURE__ */ jsxs4("button", { type: "button", className: chipClassName(), disabled: running || !ready, onClick: run, "data-subject-ideas-button": true, children: [
-          running ? spinner : /* @__PURE__ */ jsx4(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs5("div", { className: "eb:flex eb:items-center eb:gap-1.5 eb:px-1 eb:pb-0.5", children: [
+        /* @__PURE__ */ jsxs5("button", { type: "button", className: chipClassName(), disabled: running || !ready, onClick: run, "data-subject-ideas-button": true, children: [
+          running ? spinner : /* @__PURE__ */ jsx5(Sparkles3, { className: "eb:size-3", "aria-hidden": "true" }),
           t("More ideas")
         ] }),
-        /* @__PURE__ */ jsx4(Button, { type: "button", variant: "ghost", size: "xs", className: "eb:ml-auto", disabled: running, onClick: done, children: t("Done") })
+        /* @__PURE__ */ jsx5(Button, { type: "button", variant: "ghost", size: "xs", className: "eb:ml-auto", disabled: running, onClick: done, children: t("Done") })
       ] })
     ] }),
-    running && /* @__PURE__ */ jsxs4("p", { className: "eb:flex eb:items-center eb:gap-2 eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: [
+    running && /* @__PURE__ */ jsxs5("p", { className: "eb:flex eb:items-center eb:gap-2 eb:text-[12px] eb:text-foreground-muted", role: "status", "aria-live": "polite", children: [
       t("Reading the email\u2026"),
-      /* @__PURE__ */ jsx4(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
+      /* @__PURE__ */ jsx5(Button, { type: "button", variant: "link", size: "xs", className: "eb:h-auto eb:px-0", onClick: cancel, children: t("Cancel") })
     ] }),
-    error && /* @__PURE__ */ jsxs4("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
-      /* @__PURE__ */ jsx4(TriangleAlert4, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
+    error && /* @__PURE__ */ jsxs5("p", { role: "alert", className: "eb:flex eb:items-start eb:gap-1.5 eb:text-[12px] eb:text-destructive", children: [
+      /* @__PURE__ */ jsx5(TriangleAlert4, { className: "eb:mt-px eb:size-3.5 eb:shrink-0", "aria-hidden": "true" }),
       error
     ] })
   ] });
@@ -865,24 +1193,27 @@ function createAi(options = {}) {
   }
   const ownOnly = !model && !http && PARTS.some((part) => typeof options[part] === "function");
   let transport = {};
-  const key = provider && askKey ? createKeyStore(providers) : null;
+  const key = provider && askKey ? createKeyStore(providers, { fetch: fetchImpl }) : null;
   if (provider) {
     const models = /* @__PURE__ */ new Map();
     const keyFor = () => key ? key.get() : apiKey || "";
     const modelOf = (id) => {
-      if (!models.has(id)) {
-        const chosen = (
-          /** @type {import('./providers.js').AiProvider} */
-          providers.find((item) => item.id === id)
-        );
+      const chosen = (
+        /** @type {import('./providers.js').AiProvider} */
+        providers.find((item) => item.id === id)
+      );
+      const name = key ? key.model(id) : chosen.model;
+      const slot = `${id}
+${name}`;
+      if (!models.has(slot)) {
         models.set(
-          id,
-          chosen.createModel ? chosen.createModel({ apiKey: keyFor, fetch: fetchImpl }) : providerEmailModel({ provider: chosen, fetch: fetchImpl, apiKey: keyFor })
+          slot,
+          chosen.createModel ? chosen.createModel({ apiKey: keyFor, fetch: fetchImpl, ...name ? { model: name } : {} }) : providerEmailModel({ provider: chosen, fetch: fetchImpl, apiKey: keyFor, ...name ? { model: name } : {} })
         );
       }
       return (
         /** @type {import('./generator.js').EmailModel} */
-        models.get(id)
+        models.get(slot)
       );
     };
     const model2 = async (request) => {
@@ -959,6 +1290,8 @@ function askedAgain(run, key) {
   };
 }
 export {
+  AGENT_ERROR_CODES,
+  AGENT_PROTOCOL,
   AI_MESSAGES,
   AI_PROVIDERS,
   DEFAULT_CLAUDE_MODEL,
@@ -968,12 +1301,14 @@ export {
   PURPOSE_CATEGORIES,
   REWRITE_ACTIONS,
   REWRITE_LANGUAGES,
+  agentEmailModel,
   claudeEmailModel,
   claudeProvider,
   createAi,
   createEmailGenerator,
   emailWords,
   failureCode,
+  listProviderModels,
   providerEmailModel,
   resolveProvider
 };