@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/settings/EmbedProviderList.tsx

@@ -0,0 +1,274 @@
+import type { FocusEvent } from "react";
+import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { Badge, Button, Input, Switch } from "../ui";
+import { StatusDot } from "../Section";
+import { cn } from "../../lib/cn";
+import type { EmbedEngineInfo } from "../../lib/api/embeddings";
+import { t } from "../../i18n";
+
+// Embeddings engine list — an ordered fallback chain (router), the mirror of the
+// Voice (TTS) provider list. Arrows reorder the chain, the switch enables/disables
+// an engine, and each row picks that provider's EMBEDDING model right here — the
+// API key of a built-in comes from Engines & models, so there is nothing to
+// re-declare. Users can also ADD any number of custom OpenAI-compatible endpoints
+// (a local Zen / LiteLLM / llama.cpp server); those carry their own base_url +
+// key + model and can be removed. `tf` (the offline fallback) is pinned last and
+// always on. Data from the daemon (/embeddings/providers).
+
+export interface CustomBlock {
+  label?: string;
+  base_url?: string;
+  api_key?: string;
+  model?: string;
+}
+
+const META: Record<string, { name: string; modelPlaceholder?: string; note: string; local?: boolean }> = {
+  ollama: { name: "Ollama", modelPlaceholder: "nomic-embed-text", note: "local · key-free", local: true },
+  gemini: { name: "Gemini", modelPlaceholder: "text-embedding-004", note: "key from Engines & models" },
+  openai: { name: "OpenAI", modelPlaceholder: "text-embedding-3-small", note: "key from Engines & models" },
+  tf: { name: "Offline (tf)", note: "bag-of-words · low quality", local: true },
+};
+
+const isMarker = (v: string) => v.startsWith("***");
+
+interface Props {
+  engines: EmbedEngineInfo[];
+  order: string[]; // effective chain order from the daemon (tf last)
+  models: Record<string, string>; // current embedding model per built-in provider id
+  customConfigs: Record<string, CustomBlock>; // per custom:<slug> id → its config block
+  busy?: boolean;
+  onReorder: (nextOrder: string[]) => void;
+  onToggleEnabled: (id: string, enabled: boolean) => void;
+  onSetModel: (id: string, model: string) => void;
+  onSetCustomField: (id: string, field: keyof CustomBlock, value: string) => void;
+  onRemoveCustom: (id: string) => void;
+  onAddCustom: () => void;
+}
+
+export function EmbedProviderList({
+  engines,
+  order,
+  models,
+  customConfigs,
+  busy,
+  onReorder,
+  onToggleEnabled,
+  onSetModel,
+  onSetCustomField,
+  onRemoveCustom,
+  onAddCustom,
+}: Props) {
+  const byId = new Map(engines.map((e) => [e.id, e]));
+  // Reorderable engines only — tf is pinned last and shown separately.
+  const ids = [
+    ...order.filter((id) => byId.has(id) && id !== "tf"),
+    ...engines.map((e) => e.id).filter((id) => id !== "tf" && !order.includes(id)),
+  ];
+  const tf = byId.get("tf");
+
+  const move = (id: string, dir: -1 | 1) => {
+    const idx = ids.indexOf(id);
+    const next = idx + dir;
+    if (idx < 0 || next < 0 || next >= ids.length) return;
+    const reordered = [...ids];
+    [reordered[idx], reordered[next]] = [reordered[next], reordered[idx]];
+    onReorder(reordered);
+  };
+
+  const arrows = (id: string, idx: number | null, pinned: boolean) => (
+    <div className="flex flex-col">
+      <button
+        type="button"
+        onClick={() => idx !== null && move(id, -1)}
+        disabled={busy || pinned || idx === 0}
+        aria-label={t("memory_panel.move_up")}
+        data-testid={`embed-provider-${id}-up`}
+        className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+      >
+        <ChevronUp className="size-3.5" />
+      </button>
+      <button
+        type="button"
+        onClick={() => idx !== null && move(id, 1)}
+        disabled={busy || pinned || idx === ids.length - 1}
+        aria-label={t("memory_panel.move_down")}
+        data-testid={`embed-provider-${id}-down`}
+        className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+      >
+        <ChevronDown className="size-3.5" />
+      </button>
+    </div>
+  );
+
+  const availabilityBadge = (e: EmbedEngineInfo) =>
+    e.available ? (
+      <Badge tone="success">{t("memory_panel.available")}</Badge>
+    ) : e.configured ? (
+      <Badge tone="warning">{t("memory_panel.unavailable")}</Badge>
+    ) : (
+      <Badge tone="muted">{t("memory_panel.not_configured")}</Badge>
+    );
+
+  const builtinRow = (id: string, idx: number) => {
+    const e = byId.get(id)!;
+    const meta = META[id] || { name: id, note: "" };
+    return (
+      <div
+        key={id}
+        data-testid={`embed-provider-${id}`}
+        className={cn(
+          "flex items-center gap-3 rounded-lg border border-border px-3 py-2.5",
+          !e.enabled && "opacity-60",
+        )}
+      >
+        {arrows(id, idx, false)}
+        <StatusDot ok={e.available ? true : e.configured ? false : null} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">{meta.name}</span>
+            {meta.local && <Badge tone="info">{t("memory_panel.badge_local")}</Badge>}
+            {availabilityBadge(e)}
+          </div>
+          <div className="mt-1.5 flex items-center gap-2">
+            <span className="shrink-0 text-xs text-muted-foreground">{t("memory_panel.model_label")}</span>
+            <Input
+              defaultValue={models[id] || ""}
+              placeholder={meta.modelPlaceholder}
+              disabled={busy}
+              onBlur={(ev) => {
+                const v = ev.target.value.trim();
+                if (v !== (models[id] || "")) onSetModel(id, v);
+              }}
+              className="h-7 max-w-[16rem] font-mono text-xs"
+            />
+          </div>
+        </div>
+        <Switch checked={e.enabled} onChange={(v) => onToggleEnabled(id, v)} disabled={busy} />
+      </div>
+    );
+  };
+
+  const customRow = (id: string, idx: number) => {
+    const e = byId.get(id)!;
+    const c = customConfigs[id] || {};
+    const set = (field: keyof CustomBlock) => (ev: FocusEvent<HTMLInputElement>) => {
+      const v = ev.target.value;
+      const cur = c[field] || "";
+      if (field === "api_key") {
+        if (v && !isMarker(v) && v !== cur) onSetCustomField(id, field, v);
+        return;
+      }
+      const trimmed = v.trim();
+      if (trimmed !== (cur || "")) onSetCustomField(id, field, trimmed);
+    };
+    return (
+      <div
+        key={id}
+        data-testid={`embed-provider-${id}`}
+        className={cn(
+          "space-y-2 rounded-lg border border-border px-3 py-2.5",
+          !e.enabled && "opacity-60",
+        )}
+      >
+        <div className="flex items-center gap-3">
+          {arrows(id, idx, false)}
+          <StatusDot ok={e.available ? true : e.configured ? false : null} />
+          <div className="min-w-0 flex-1">
+            <Input
+              defaultValue={c.label || ""}
+              placeholder={t("memory_panel.custom_label_ph")}
+              disabled={busy}
+              onBlur={set("label")}
+              className="h-7 max-w-[16rem] text-sm font-medium"
+            />
+          </div>
+          <Badge tone="info">{t("memory_panel.badge_custom")}</Badge>
+          {availabilityBadge(e)}
+          <Switch checked={e.enabled} onChange={(v) => onToggleEnabled(id, v)} disabled={busy} />
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => onRemoveCustom(id)}
+            disabled={busy}
+            aria-label={t("memory_panel.remove")}
+            data-testid={`embed-provider-${id}-remove`}
+          >
+            <Trash2 className="size-3.5" />
+          </Button>
+        </div>
+        <div className="grid gap-2 pl-9 sm:grid-cols-3">
+          <label className="flex flex-col gap-1 text-[11px] text-muted-foreground">
+            {t("memory_panel.base_url_label")}
+            <Input
+              defaultValue={c.base_url || ""}
+              placeholder="https://host:port/v1"
+              disabled={busy}
+              onBlur={set("base_url")}
+              className="h-7 font-mono text-xs"
+            />
+          </label>
+          <label className="flex flex-col gap-1 text-[11px] text-muted-foreground">
+            {t("memory_panel.model_label")}
+            <Input
+              defaultValue={c.model || ""}
+              placeholder="text-embedding-3-small"
+              disabled={busy}
+              onBlur={set("model")}
+              className="h-7 font-mono text-xs"
+            />
+          </label>
+          <label className="flex flex-col gap-1 text-[11px] text-muted-foreground">
+            {t("memory_panel.custom_key_label")}
+            <Input
+              type="password"
+              defaultValue={c.api_key || ""}
+              placeholder={t("memory_panel.custom_optional_ph")}
+              disabled={busy}
+              onBlur={set("api_key")}
+              className="h-7 font-mono text-xs"
+            />
+          </label>
+        </div>
+      </div>
+    );
+  };
+
+  const tfRow = () => {
+    const e = tf!;
+    const meta = META.tf;
+    return (
+      <div
+        key="tf"
+        data-testid="embed-provider-tf"
+        className="flex items-center gap-3 rounded-lg border border-border px-3 py-2.5"
+      >
+        {arrows("tf", null, true)}
+        <StatusDot ok={e.available ? true : null} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">{meta.name}</span>
+            <Badge tone="info">{t("memory_panel.badge_local")}</Badge>
+          </div>
+          <div className="mt-0.5 truncate text-xs text-muted-foreground">{meta.note}</div>
+        </div>
+        <span className="shrink-0 text-xs text-muted-foreground">{t("memory_panel.always_on")}</span>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-2">
+      {ids.map((id, idx) => (byId.get(id)?.custom ? customRow(id, idx) : builtinRow(id, idx)))}
+      {tf && tfRow()}
+      <button
+        type="button"
+        onClick={onAddCustom}
+        disabled={busy}
+        data-testid="embed-provider-add"
+        className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-muted-foreground transition-colors hover:border-emerald-500/50 hover:text-foreground disabled:opacity-50"
+      >
+        <Plus className="size-4" /> {t("memory_panel.add_custom")}
+      </button>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/settings/EnginesPanel.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Plus } from "lucide-react";
+import { Cpu, Plus } from "lucide-react";
 import { Section } from "../Section";
 import { Button, Empty, Loading } from "../ui";
 import { useToast } from "../Toast";
@@ -7,7 +7,9 @@ import { useGlobalConfig } from "../../hooks/useGlobalConfig";
 import { ENGINE_OPTIONS } from "./providers/typeStyles";
 import { ProviderCard } from "./providers/ProviderCard";
 import { ProviderModal, type ProviderSaveResult } from "./providers/ProviderModal";
+import { ProviderTestDialog } from "./providers/ProviderTestDialog";
 import type { Provider } from "./providers/types";
+import { ConfirmDialog } from "../common/ConfirmDialog";
 import { t } from "../../i18n";
 
 const KNOWN_ENGINES = new Set(ENGINE_OPTIONS.map((o) => o.value));
@@ -24,6 +26,7 @@ function toProvider(slug: string, v: Record<string, unknown>): Provider {
     default_temperature: typeof v.default_temperature === "number" ? v.default_temperature : undefined,
     default_max_tokens: typeof v.default_max_tokens === "number" ? v.default_max_tokens : undefined,
     is_active: typeof v.is_active === "boolean" ? v.is_active : undefined,
+    thinking: typeof v.thinking === "boolean" ? v.thinking : undefined,
     context_limit_tokens: typeof v.context_limit_tokens === "number" ? v.context_limit_tokens : undefined,
     model_context_limits: (v.model_context_limits as Record<string, number>) || undefined,
     pricing: (v.pricing as Provider["pricing"]) || undefined,
@@ -35,6 +38,8 @@ export function EnginesPanel() {
   const { config, isLoading, patch, mutate } = useGlobalConfig();
   const [modalOpen, setModalOpen] = useState(false);
   const [editing, setEditing] = useState<Provider | null>(null);
+  const [testing, setTesting] = useState<Provider | null>(null);
+  const [confirm, setConfirm] = useState<Provider | null>(null);
 
   if (isLoading) return <Loading />;
 
@@ -63,6 +68,10 @@ export function EnginesPanel() {
     };
     const unset: string[] = [];
     const opt = (key: string, val: unknown) => { if (val === undefined || val === "" ) unset.push(`${base}.${key}`); else set[`${base}.${key}`] = val; };
+    // Only the "off" state is stored. Leaving the key out is what tells the
+    // adapter to send nothing and let the provider decide.
+    if (provider.thinking === false) set[`${base}.thinking`] = false;
+    else unset.push(`${base}.thinking`);
     opt("base_url", provider.base_url);
     opt("default_model", provider.default_model);
     opt("context_limit_tokens", provider.context_limit_tokens);
@@ -82,10 +91,10 @@ export function EnginesPanel() {
     } catch (e) { toast.error((e as Error).message); }
   };
 
-  const remove = async (p: Provider) => {
-    if (!confirm(t("engines_panel.delete_confirm", { name: p.name || p.slug }))) return;
+  const doRemove = async () => {
+    if (!confirm) return;
     try {
-      await patch(undefined, [`engines.${p.slug}`]);
+      await patch(undefined, [`engines.${confirm.slug}`]);
       toast.success(t("engines_panel.deleted"));
       mutate();
     } catch (e) { toast.error((e as Error).message); }
@@ -98,11 +107,11 @@ export function EnginesPanel() {
       action={<Button size="sm" variant="primary" onClick={openCreate}><Plus size={14} /> {t("engines_panel.new_btn")}</Button>}
     >
       {providers.length === 0 ? (
-        <Empty>{t("engines_panel.empty")}</Empty>
+        <Empty icon={Cpu}>{t("engines_panel.empty")}</Empty>
       ) : (
         <div className="grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
           {providers.map((p) => (
-            <ProviderCard key={p.slug} provider={p} onEdit={() => openEdit(p)} onDelete={() => remove(p)} onToggle={() => toggle(p)} />
+            <ProviderCard key={p.slug} provider={p} onEdit={() => openEdit(p)} onDelete={() => setConfirm(p)} onToggle={() => toggle(p)} onTest={() => setTesting(p)} />
           ))}
           <button
             type="button"
@@ -115,6 +124,8 @@ export function EnginesPanel() {
         </div>
       )}
 
+      <ProviderTestDialog open={!!testing} provider={testing} onClose={() => setTesting(null)} />
+
       <ProviderModal
         open={modalOpen}
         initial={editing}
@@ -122,6 +133,15 @@ export function EnginesPanel() {
         onClose={() => { setModalOpen(false); setEditing(null); }}
         onSave={save}
       />
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doRemove}
+        title={t("engines_panel.delete_confirm", { name: confirm?.name || confirm?.slug || "" })}
+        confirmLabel={t("common.delete")}
+        testId="engine-delete-confirm"
+      />
     </Section>
   );
 }

package/src/interfaces/web/src/components/settings/MemoryPanel.tsx

@@ -7,6 +7,8 @@ import { UiSelect } from "../UiSelect";
 import { useToast } from "../Toast";
 import { useGlobalConfig } from "../../hooks/useGlobalConfig";
 import { Embeddings, type EmbedMode } from "../../lib/api/embeddings";
+import { EmbedProviderList } from "./EmbedProviderList";
+import { ModelPicker } from "../chat/ModelPicker";
 import { t } from "../../i18n";
 
 // Memory / RAG embeddings configuration. Mirrors the Voice (TTS/STT) panel:
@@ -28,6 +30,14 @@ const modeOptions = () => [
   { value: "single", label: t("memory_panel.mode_single") },
 ];
 
+interface CustomEmbedBlock {
+  label?: string;
+  base_url?: string;
+  api_key?: string;
+  model?: string;
+  enabled?: boolean;
+}
+
 interface MemoryCfg {
   embeddings?: {
     provider?: string;
@@ -35,6 +45,7 @@ interface MemoryCfg {
     ollama?: { model?: string; base_url?: string };
     openai?: { api_key?: string; model?: string; base_url?: string };
     gemini?: { api_key?: string; model?: string };
+    custom?: Record<string, CustomEmbedBlock>;
   };
   compact_threshold?: number;
   keep_recent?: number;
@@ -42,8 +53,6 @@ interface MemoryCfg {
   compact_fallback_model?: string;
 }
 
-const isMarker = (v: string) => v.startsWith("***");
-
 export function MemoryPanel() {
   const toast = useToast();
   const { config, isLoading, patch } = useGlobalConfig();
@@ -61,6 +70,7 @@ export function MemoryPanel() {
   const provider = providers?.configured_provider || emb.provider || "auto";
   const mode: EmbedMode = providers?.mode || emb.mode || "chain";
   const engines = providers?.engines || [];
+  const order = providers?.order || [];
 
   const apply = async (set: Record<string, unknown>) => {
     setBusy(true);
@@ -100,6 +110,42 @@ export function MemoryPanel() {
     }
   };
 
+  const models: Record<string, string> = {
+    ollama: emb.ollama?.model || "",
+    openai: emb.openai?.model || "",
+    gemini: emb.gemini?.model || "",
+  };
+
+  // Custom OpenAI-compatible providers, keyed by their full "custom:<slug>" id so
+  // the list component can look each row's config up directly.
+  const customBlocks = emb.custom || {};
+  const customConfigs: Record<string, CustomEmbedBlock> = {};
+  for (const slug of Object.keys(customBlocks)) customConfigs[`custom:${slug}`] = customBlocks[slug];
+
+  const slugOf = (id: string) => id.replace(/^custom:/, "");
+  // Config path segment for an engine's own block: built-ins are top-level
+  // (memory.embeddings.<id>), custom providers nest under .custom.<slug>.
+  const enabledKey = (id: string) => (id.startsWith("custom:") ? `custom.${slugOf(id)}` : id);
+
+  const addCustom = () => {
+    let n = 1;
+    while (customBlocks[`c${n}`]) n += 1;
+    apply({ [`memory.embeddings.custom.c${n}`]: { label: t("memory_panel.custom_default_label"), base_url: "" } });
+  };
+  const removeCustom = async (id: string) => {
+    setBusy(true);
+    try {
+      await patch(undefined, [`memory.embeddings.custom.${slugOf(id)}`]);
+      await mutateProviders();
+    } catch (e) {
+      toast.error(t("memory_panel.save_failed", { msg: (e as Error).message }));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const setCustomField = (id: string, field: string, value: string) =>
+    apply({ [`memory.embeddings.custom.${slugOf(id)}.${field}`]: value });
+
   return (
     <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
       <Section
@@ -107,16 +153,6 @@ export function MemoryPanel() {
         description={t("memory_panel.embeddings_desc")}
       >
         <div className="space-y-3">
-          <Field label={t("memory_panel.provider_label")} hint={t("memory_panel.provider_hint")}>
-            <UiSelect
-              value={provider}
-              onChange={(v) => apply({ "memory.embeddings.provider": v })}
-              options={providerOptions()}
-              disabled={busy}
-              className="max-w-xl"
-            />
-          </Field>
-
           <Field label={t("memory_panel.mode_label")} hint={t("memory_panel.mode_hint")}>
             <UiSelect
               value={mode}
@@ -127,13 +163,57 @@ export function MemoryPanel() {
             />
           </Field>
 
-          <div className="flex flex-wrap items-center gap-2 pt-1">
-            {engines.map((e) => (
-              <Badge key={e.id} tone={e.available ? "success" : "muted"}>
-                {e.id}: {e.available ? t("memory_panel.available") : t("memory_panel.unavailable")}
-              </Badge>
-            ))}
-          </div>
+          {mode === "chain" ? (
+            // Ordered fallback chain — reorder, enable/disable, and pick each
+            // engine's embedding model right here. Keys are reused from Engines &
+            // models, so there is nothing to re-declare. The first AVAILABLE
+            // engine wins, so with Ollama down the chain skips to the next one.
+            <Field label={t("memory_panel.chain_label")} hint={t("memory_panel.chain_hint")}>
+              <EmbedProviderList
+                engines={engines}
+                order={order}
+                models={models}
+                customConfigs={customConfigs}
+                busy={busy}
+                onReorder={(next) => apply({ "memory.embeddings.order": next })}
+                onToggleEnabled={(id, enabled) =>
+                  apply({ [`memory.embeddings.${enabledKey(id)}.enabled`]: enabled })
+                }
+                onSetModel={(id, model) => apply({ [`memory.embeddings.${id}.model`]: model })}
+                onSetCustomField={setCustomField}
+                onRemoveCustom={removeCustom}
+                onAddCustom={addCustom}
+              />
+            </Field>
+          ) : (
+            <>
+              <Field label={t("memory_panel.provider_label")} hint={t("memory_panel.provider_hint")}>
+                <UiSelect
+                  value={provider}
+                  onChange={(v) => apply({ "memory.embeddings.provider": v })}
+                  options={providerOptions()}
+                  disabled={busy}
+                  className="max-w-xl"
+                />
+              </Field>
+              {provider !== "auto" && provider !== "tf" && (
+                <Field label={t("memory_panel.model_label")}>
+                  <Input
+                    defaultValue={models[provider] || ""}
+                    placeholder={t("memory_panel.model_ph")}
+                    disabled={busy}
+                    onBlur={(ev) => {
+                      const v = ev.target.value.trim();
+                      if (v !== (models[provider] || "")) apply({ [`memory.embeddings.${provider}.model`]: v });
+                    }}
+                    className="max-w-md font-mono text-sm"
+                  />
+                </Field>
+              )}
+            </>
+          )}
+
+          <p className="pt-1 text-xs text-muted-foreground">{t("memory_panel.keys_reuse_note")}</p>
 
           <div className="flex flex-wrap items-center gap-3 pt-1">
             <Button variant="secondary" onClick={runTest} loading={busy}>
@@ -142,91 +222,16 @@ export function MemoryPanel() {
             <Button variant="secondary" onClick={runReindex} loading={busy}>
               <Database size={14} /> {t("memory_panel.reindex_btn")}
             </Button>
+            {providers?.active_embedder && (
+              <Badge tone={providers.active_embedder === "tf" ? "warning" : "success"}>
+                {t("memory_panel.active_embedder", { embedder: providers.active_embedder })}
+              </Badge>
+            )}
             {testResult && <span className="text-sm text-muted-foreground">{testResult}</span>}
           </div>
         </div>
       </Section>
 
-      <Section title={t("memory_panel.ollama_title")} description={t("memory_panel.ollama_desc")}>
-        <Field label={t("memory_panel.model_label")}>
-          <Input
-            defaultValue={emb.ollama?.model || "nomic-embed-text"}
-            placeholder="nomic-embed-text"
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value.trim();
-              if (v && v !== emb.ollama?.model) apply({ "memory.embeddings.ollama.model": v });
-            }}
-            className="max-w-md"
-          />
-        </Field>
-        <Field label={t("memory_panel.base_url_label")} hint={t("memory_panel.ollama_base_url_hint")}>
-          <Input
-            defaultValue={emb.ollama?.base_url || ""}
-            placeholder="http://localhost:11434"
-            disabled={busy}
-            onBlur={(ev) => apply({ "memory.embeddings.ollama.base_url": ev.target.value.trim() })}
-            className="max-w-md"
-          />
-        </Field>
-      </Section>
-
-      <Section title={t("memory_panel.openai_title")} description={t("memory_panel.openai_desc")}>
-        <Field label={t("memory_panel.model_label")}>
-          <Input
-            defaultValue={emb.openai?.model || "text-embedding-3-small"}
-            placeholder="text-embedding-3-small"
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value.trim();
-              if (v && v !== emb.openai?.model) apply({ "memory.embeddings.openai.model": v });
-            }}
-            className="max-w-md"
-          />
-        </Field>
-        <Field label={t("memory_panel.api_key_label")} hint={t("memory_panel.openai_key_hint")}>
-          <Input
-            type="password"
-            defaultValue={emb.openai?.api_key || ""}
-            placeholder="sk-…"
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value;
-              if (v && !isMarker(v)) apply({ "memory.embeddings.openai.api_key": v });
-            }}
-            className="max-w-md"
-          />
-        </Field>
-      </Section>
-
-      <Section title={t("memory_panel.gemini_title")} description={t("memory_panel.gemini_desc")}>
-        <Field label={t("memory_panel.model_label")}>
-          <Input
-            defaultValue={emb.gemini?.model || "text-embedding-004"}
-            placeholder="text-embedding-004"
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value.trim();
-              if (v && v !== emb.gemini?.model) apply({ "memory.embeddings.gemini.model": v });
-            }}
-            className="max-w-md"
-          />
-        </Field>
-        <Field label={t("memory_panel.api_key_label")} hint={t("memory_panel.gemini_key_hint")}>
-          <Input
-            type="password"
-            defaultValue={emb.gemini?.api_key || ""}
-            placeholder="AIza…"
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value;
-              if (v && !isMarker(v)) apply({ "memory.embeddings.gemini.api_key": v });
-            }}
-            className="max-w-md"
-          />
-        </Field>
-      </Section>
-
       <Section
         title={t("memory_panel.compaction_title")}
         description={t("memory_panel.compaction_desc")}
@@ -266,28 +271,22 @@ export function MemoryPanel() {
           </Field>
         </div>
         <Field label={t("memory_panel.compact_model_label")} hint={t("memory_panel.compact_model_hint")}>
-          <Input
-            defaultValue={mem.compact_model || "ollama:gemma4:31b-cloud"}
-            placeholder="ollama:gemma4:31b-cloud"
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value.trim();
-              if (v && v !== mem.compact_model) apply({ "memory.compact_model": v });
-            }}
-            className="max-w-md"
-          />
+          <div className="w-fit rounded-md border border-border px-2 py-1">
+            <ModelPicker
+              value={mem.compact_model || ""}
+              onChange={(v) => apply({ "memory.compact_model": v })}
+              disabled={busy}
+            />
+          </div>
         </Field>
         <Field label={t("memory_panel.compact_fallback_label")} hint={t("memory_panel.compact_fallback_hint")}>
-          <Input
-            defaultValue={mem.compact_fallback_model || ""}
-            placeholder={t("memory_panel.compact_fallback_ph")}
-            disabled={busy}
-            onBlur={(ev) => {
-              const v = ev.target.value.trim();
-              if (v !== (mem.compact_fallback_model || "")) apply({ "memory.compact_fallback_model": v });
-            }}
-            className="max-w-md"
-          />
+          <div className="w-fit rounded-md border border-border px-2 py-1">
+            <ModelPicker
+              value={mem.compact_fallback_model || ""}
+              onChange={(v) => apply({ "memory.compact_fallback_model": v })}
+              disabled={busy}
+            />
+          </div>
         </Field>
       </Section>
     </div>