@agentprojectcontext/apx 1.36.0 → 1.38.0

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

@@ -5,6 +5,7 @@ import { Section } from "../Section";
 import { Button, Field, Input, Loading, Badge, Switch } from "../ui";
 import { useToast } from "../Toast";
 import { Skills, type InspectTrace } from "../../lib/api/skills";
+import { t } from "../../i18n";
 
 // Skill Inspector — per-turn skill RAG middleware. When ON, the static
 // "available skills" slug-dump is removed from the agent's system prompt and a
@@ -19,15 +20,17 @@ import { Skills, type InspectTrace } from "../../lib/api/skills";
 // Numeric knobs with human labels + sane ranges. We keep them as plain number
 // inputs (same idiom as the embeddings model fields) rather than sliders so the
 // values are explicit and copy-pasteable.
-const KNOBS: { key: keyof NumericKnobs; label: string; hint: string; step: number; min: number; max: number }[] = [
-  { key: "load_threshold", label: "Umbral de carga", hint: "Similitud mínima para inyectar el CUERPO de la skill (alto = más estricto).", step: 0.01, min: 0, max: 1 },
-  { key: "hint_threshold", label: "Umbral de sugerencia", hint: "Similitud mínima para solo SUGERIR la skill (que el agente la cargue si quiere).", step: 0.01, min: 0, max: 1 },
-  { key: "margin", label: "Margen sobre el 2º", hint: "El top debe superar al segundo por este margen para cargar su cuerpo (evita empates flojos).", step: 0.01, min: 0, max: 1 },
-  { key: "max_loaded", label: "Máx. cuerpos cargados", hint: "Cuántas skills se inyectan completas por turno.", step: 1, min: 0, max: 5 },
-  { key: "max_hints", label: "Máx. sugerencias", hint: "Cuántas skills extra se nombran como sugerencia.", step: 1, min: 0, max: 8 },
-  { key: "prompt_floor", label: "Largo mínimo del prompt", hint: "Mensajes más cortos que esto se ignoran (evita 'ok', 'hola').", step: 1, min: 0, max: 40 },
-  { key: "body_char_cap", label: "Tope de chars del cuerpo", hint: "Recorta cuerpos de skill largos para no inflar el contexto.", step: 500, min: 500, max: 20000 },
-];
+function knobs(): { key: keyof NumericKnobs; label: string; hint: string; step: number; min: number; max: number }[] {
+  return [
+    { key: "load_threshold", label: t("settings_ui.knob_load_threshold"), hint: t("settings_ui.knob_load_threshold_hint"), step: 0.01, min: 0, max: 1 },
+    { key: "hint_threshold", label: t("settings_ui.knob_hint_threshold"), hint: t("settings_ui.knob_hint_threshold_hint"), step: 0.01, min: 0, max: 1 },
+    { key: "margin", label: t("settings_ui.knob_margin"), hint: t("settings_ui.knob_margin_hint"), step: 0.01, min: 0, max: 1 },
+    { key: "max_loaded", label: t("settings_ui.knob_max_loaded"), hint: t("settings_ui.knob_max_loaded_hint"), step: 1, min: 0, max: 5 },
+    { key: "max_hints", label: t("settings_ui.knob_max_hints"), hint: t("settings_ui.knob_max_hints_hint"), step: 1, min: 0, max: 8 },
+    { key: "prompt_floor", label: t("settings_ui.knob_prompt_floor"), hint: t("settings_ui.knob_prompt_floor_hint"), step: 1, min: 0, max: 40 },
+    { key: "body_char_cap", label: t("settings_ui.knob_body_char_cap"), hint: t("settings_ui.knob_body_char_cap_hint"), step: 500, min: 500, max: 20000 },
+  ];
+}
 
 type NumericKnobs = {
   load_threshold: number; hint_threshold: number; margin: number;
@@ -52,7 +55,7 @@ export function SkillsInspectorPanel() {
       await Skills.updateInspector(patch);
       await mutate();
     } catch (e) {
-      toast.error(`No se pudo guardar: ${(e as Error).message}`);
+      toast.error(t("settings_ui.could_not_save", { msg: (e as Error).message }));
     } finally {
       setBusy(false);
     }
@@ -63,11 +66,17 @@ export function SkillsInspectorPanel() {
     try {
       const r = await Skills.index({ force });
       toast.success(
-        `Indexado con ${r.embedder} (dim ${r.dim}): +${r.changed.added} ~${r.changed.refreshed} -${r.changed.removed}.`,
+        t("settings_ui.indexed_with", {
+          embedder: r.embedder,
+          dim: r.dim,
+          added: r.changed.added,
+          refreshed: r.changed.refreshed,
+          removed: r.changed.removed,
+        }),
       );
       await mutate();
     } catch (e) {
-      toast.error(`Falló el index: ${(e as Error).message}`);
+      toast.error(t("settings_ui.index_failed", { msg: (e as Error).message }));
     } finally {
       setBusy(false);
     }
@@ -81,7 +90,7 @@ export function SkillsInspectorPanel() {
       const r = await Skills.inspect(probe.trim());
       setProbeResult(r.trace);
     } catch (e) {
-      toast.error(`Falló el dry-run: ${(e as Error).message}`);
+      toast.error(t("settings_ui.dry_run_failed", { msg: (e as Error).message }));
     } finally {
       setBusy(false);
     }
@@ -90,55 +99,55 @@ export function SkillsInspectorPanel() {
   return (
     <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
       <Section
-        title="Skill Inspector (RAG por turno)"
-        description="Función experimental. Cuando está activa, el agente NO recibe la lista completa de skills en su prompt; en cada mensaje un RAG local decide qué skill(s) cargar — el cuerpo completo si hay match fuerte, una sugerencia si hay match medio, nada si no aplica. Se reevalúa cada turno: una skill que dejó de ser relevante desaparece del contexto."
+        title={t("settings_ui.inspector_title")}
+        description={t("settings_ui.inspector_desc")}
       >
         <div className="space-y-4">
           <Field
-            label="Activar inspector"
-            hint="Apagado = comportamiento clásico (lista de slugs + sugerencia pasiva). Encendido = el RAG decide por turno."
+            label={t("settings_ui.enable_inspector")}
+            hint={t("settings_ui.enable_inspector_hint")}
           >
             <Switch
               checked={cfg.enabled}
               disabled={busy}
               onChange={(v) => apply({ enabled: v })}
-              label={cfg.enabled ? "Encendido" : "Apagado"}
+              label={cfg.enabled ? t("settings_ui.on") : t("settings_ui.off")}
             />
           </Field>
 
           <div className="flex flex-wrap items-center gap-2 pt-1">
             <Badge tone={idx.count > 0 ? "success" : "warning"}>
-              Índice: {idx.count} skills
+              {t("settings_ui.index_count", { n: idx.count })}
             </Badge>
-            <Badge tone="muted">{idx.embedder || "sin indexar"}</Badge>
-            {idx.dim ? <Badge tone="muted">dim {idx.dim}</Badge> : null}
+            <Badge tone="muted">{idx.embedder || t("settings_ui.not_indexed")}</Badge>
+            {idx.dim ? <Badge tone="muted">{t("settings_ui.dim", { dim: idx.dim })}</Badge> : null}
             {idx.updated_at ? (
               <span className="text-xs text-muted-foreground">
-                actualizado {new Date(idx.updated_at).toLocaleString()}
+                {t("settings_ui.updated_at", { date: new Date(idx.updated_at).toLocaleString() })}
               </span>
             ) : null}
           </div>
 
           <div className="flex flex-wrap items-center gap-3 pt-1">
             <Button variant="secondary" onClick={() => runIndex(false)} loading={busy}>
-              <RefreshCw size={14} /> Reindexar
+              <RefreshCw size={14} /> {t("settings_ui.reindex")}
             </Button>
             <Button variant="secondary" onClick={() => runIndex(true)} loading={busy}>
-              <RefreshCw size={14} /> Reindexar (forzado)
+              <RefreshCw size={14} /> {t("settings_ui.reindex_forced")}
             </Button>
             <span className="text-xs text-muted-foreground">
-              El embedder sale de Memoria (RAG). Local con Ollama, u offline si no hay proveedor.
+              {t("settings_ui.embedder_source")}
             </span>
           </div>
         </div>
       </Section>
 
       <Section
-        title="Umbrales y límites"
-        description="Ajustá qué tan agresivo es el inspector. Subir los umbrales = menos falsos positivos pero más riesgo de perderse una skill; bajarlos = lo contrario."
+        title={t("settings_ui.thresholds_title")}
+        description={t("settings_ui.thresholds_desc")}
       >
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          {KNOBS.map((k) => (
+          {knobs().map((k) => (
             <Field key={k.key} label={k.label} hint={k.hint}>
               <Input
                 type="number"
@@ -159,21 +168,21 @@ export function SkillsInspectorPanel() {
       </Section>
 
       <Section
-        title="Probar (dry-run)"
-        description="Escribí un mensaje como lo haría un usuario y mirá qué skills cargaría/sugeriría el inspector — sin llamar al modelo. Fuerza el inspector activo aunque esté apagado arriba."
+        title={t("settings_ui.test_title")}
+        description={t("settings_ui.test_desc")}
       >
         <div className="space-y-3">
           <div className="flex flex-wrap items-center gap-2">
             <Input
               value={probe}
-              placeholder="ej: necesito crear un video promocional con voz en off"
+              placeholder={t("settings_ui.test_placeholder")}
               disabled={busy}
               onChange={(ev) => setProbe(ev.target.value)}
               onKeyDown={(ev) => { if (ev.key === "Enter") runProbe(); }}
               className="max-w-xl flex-1"
             />
             <Button variant="primary" onClick={runProbe} loading={busy}>
-              <Wand2 size={14} /> Probar
+              <Wand2 size={14} /> {t("settings_ui.test_btn")}
             </Button>
           </div>
 
@@ -182,7 +191,7 @@ export function SkillsInspectorPanel() {
               <div className="mb-2 flex flex-wrap items-center gap-2">
                 <Sparkles size={14} className="text-muted-foreground" />
                 <span className="text-muted-foreground">{probeResult.embedder || "—"}</span>
-                {probeResult.jit ? <Badge tone="warning">JIT (índice vacío)</Badge> : null}
+                {probeResult.jit ? <Badge tone="warning">{t("settings_ui.jit_empty_index")}</Badge> : null}
                 {probeResult.reason && !probeResult.loaded?.length && !probeResult.hinted?.length ? (
                   <Badge tone="muted">{probeResult.reason}</Badge>
                 ) : null}
@@ -190,7 +199,7 @@ export function SkillsInspectorPanel() {
 
               {probeResult.loaded?.length ? (
                 <div className="mb-1">
-                  <span className="text-muted-foreground">Cargadas: </span>
+                  <span className="text-muted-foreground">{t("settings_ui.loaded_label")} </span>
                   {probeResult.loaded.map((s) => (
                     <Badge key={s} tone="success" className="mr-1">{s}</Badge>
                   ))}
@@ -199,7 +208,7 @@ export function SkillsInspectorPanel() {
 
               {probeResult.hinted?.length ? (
                 <div className="mb-1">
-                  <span className="text-muted-foreground">Sugeridas: </span>
+                  <span className="text-muted-foreground">{t("settings_ui.suggested_label")} </span>
                   {probeResult.hinted.map((s) => (
                     <Badge key={s} tone="info" className="mr-1">{s}</Badge>
                   ))}

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

@@ -53,20 +53,20 @@ export function SuperAgentPanel() {
   };
 
   return (
-    <Section title={t("settings.super_agent.title")} description="Comportamiento del super-agente. El modelo y la cadena de fallback se configuran en el Router de modelos.">
+    <Section title={t("settings.super_agent.title")} description={t("settings.super_agent.behavior_subtitle")}>
       <div className="space-y-4">
         <div className="flex items-center gap-3">
-          <Switch checked={enabled} onChange={setEnabled} label="Super-agente habilitado" />
+          <Switch checked={enabled} onChange={setEnabled} label={t("settings.super_agent.enabled_label")} />
         </div>
 
         {/* Model lives in the Router now — single source of truth. */}
         <div className="flex items-center justify-between rounded-lg border border-border bg-muted/20 p-3">
           <div className="min-w-0">
-            <div className="text-sm font-medium">Modelo activo (router)</div>
+            <div className="text-sm font-medium">{t("settings.super_agent.model_active")}</div>
             <div className="truncate font-mono text-xs text-muted-fg">{superAgent.model || "—"}</div>
           </div>
           <Button size="sm" variant="secondary" onClick={() => navigate("/p/0/models")}>
-            <Cpu size={13} /> Configurar en Modelos
+            <Cpu size={13} /> {t("settings.super_agent.model_configure")}
           </Button>
         </div>
 
@@ -82,7 +82,7 @@ export function SuperAgentPanel() {
             className="font-mono text-xs"
             value={system}
             onChange={(e) => setSystem(e.target.value)}
-            placeholder="(Vacío = se usa el prompt base de core/agent/prompts/super-agent-base.md)"
+            placeholder={t("settings.super_agent.system_ph")}
           />
         </Field>
 

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

@@ -49,7 +49,7 @@ export function TelegramChannelsPanel() {
       <ul className="space-y-2 text-sm">
         {channels.map((c) => {
           const ownerLabel = c.owner_user_id != null
-            ? (nameByUserId.get(String(c.owner_user_id)) || `user_id ${c.owner_user_id}`)
+            ? (nameByUserId.get(String(c.owner_user_id)) || t("telegram_ui.user_id_fallback", { id: c.owner_user_id }))
             : t("telegram_channels.no_owner");
           return (
             <li key={c.name} className="rounded-md border border-border bg-muted/30 px-3 py-2">
@@ -67,8 +67,8 @@ export function TelegramChannelsPanel() {
               <div className="mt-1 grid grid-cols-2 gap-2 text-xs text-muted-fg">
                 <span>chat_id: {c.chat_id || "—"}</span>
                 <span>bot_token: {c.bot_token ? `…${secretSuffix(c.bot_token) ?? ""}` : "—"}</span>
-                <span>route_to_agent: {c.route_to_agent || "default APX"}</span>
-                <span>engine: {c.respond_with_engine ? "sí" : "no"}</span>
+                <span>route_to_agent: {c.route_to_agent || t("telegram_ui.default_apx")}</span>
+                <span>engine: {c.respond_with_engine ? t("telegram_ui.yes") : t("telegram_ui.no")}</span>
                 <span className="col-span-2">{t("telegram_channels.owner_label")} {ownerLabel}</span>
               </div>
             </li>

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

@@ -28,7 +28,7 @@ export function TelegramContactsPanel({ bare = false }: Props) {
   const setRole = async (c: TelegramContact, role: string) => {
     try {
       await Telegram.contacts.patch(c.user_id, { role });
-      toast.success(`${c.name || c.user_id} → ${role}`);
+      toast.success(t("telegram_ui.role_assigned", { name: c.name || c.user_id, role }));
       mutate();
     } catch (e) { toast.error((e as Error).message); }
   };

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

@@ -76,14 +76,14 @@ export function TelegramGlobalPanel() {
           <Field
             label={t("settings.telegram_global.bot_token")}
             hint={channel?.bot_token
-              ? `…${secretSuffix(channel.bot_token) ?? ""} (seteado — escribí para reemplazar)`
-              : "Token del BotFather."}
+              ? `…${secretSuffix(channel.bot_token) ?? ""} ${t("telegram_ui.secret_set_replace")}`
+              : t("telegram_ui.bot_token_hint_short")}
           >
             <Input
               type="password"
               value={botToken}
               onChange={(e) => setBotToken(e.target.value)}
-              placeholder={channel?.bot_token ? `…${secretSuffix(channel.bot_token) ?? ""} (ya seteado)` : ""}
+              placeholder={channel?.bot_token ? `…${secretSuffix(channel.bot_token) ?? ""} ${t("telegram_ui.secret_already_set")}` : ""}
             />
           </Field>
           <Field label={t("settings.telegram_global.chat_id")}>

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

@@ -71,7 +71,7 @@ export function TelegramRolesPanel() {
                     <Button size="sm" variant="destructive" onClick={() => remove(n)}>{t("telegram_roles.delete_btn")}</Button>
                   )}
                 </div>
-                <div className="mt-1 text-xs text-muted-fg">tools: {toolsLabel}</div>
+                <div className="mt-1 text-xs text-muted-fg">{t("telegram_contacts.tools_label")} {toolsLabel}</div>
               </li>
             );
           })}

package/src/interfaces/web/src/components/settings/providers/ProviderCard.tsx

@@ -55,7 +55,7 @@ export function ProviderCard({
               )}
             >
               <span className={cn("size-1.5 rounded-full", active ? "bg-emerald-400" : "bg-muted-fg/40")} />
-              {active ? "Active" : "Off"}
+              {active ? t("providers_card.active") : t("providers_card.off")}
             </button>
           </Tip>
           <Tip content={t("providers_modal.delete")}>
@@ -72,14 +72,14 @@ export function ProviderCard({
 
       {/* Body */}
       <div className="mt-auto space-y-1 text-xs">
-        <Row label="Modelo" value={provider.default_model || "—"} mono />
-        {provider.base_url && <Row label="Base URL" value={provider.base_url} mono truncate />}
-        <Row label="API key" value={hasKey ? (keySuffix ? `…${keySuffix}` : "✓ seteada") : "—"} mono={!!keySuffix} />
+        <Row label={t("providers_card.model")} value={provider.default_model || "—"} mono />
+        {provider.base_url && <Row label={t("providers_card.base_url")} value={provider.base_url} mono truncate />}
+        <Row label={t("providers_card.api_key")} value={hasKey ? (keySuffix ? `…${keySuffix}` : t("providers_card.key_set")) : "—"} mono={!!keySuffix} />
         {provider.default_temperature !== undefined && (
-          <Row label="Temp" value={provider.default_temperature.toFixed(1)} />
+          <Row label={t("providers_card.temp")} value={provider.default_temperature.toFixed(1)} />
         )}
         {provider.pricing?.input_per_million !== undefined && (
-          <Row label="$ in/out (1M)" value={`${provider.pricing.input_per_million ?? 0} / ${provider.pricing.output_per_million ?? 0}`} />
+          <Row label={t("providers_card.price_io")} value={`${provider.pricing.input_per_million ?? 0} / ${provider.pricing.output_per_million ?? 0}`} />
         )}
       </div>
     </div>

package/src/interfaces/web/src/components/settings/providers/ProviderModal.tsx

@@ -144,9 +144,9 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
       });
       if (r.error) { setModelError(r.error); return; }
       setAvailableModels(r.models);
-      if (r.models.length === 0) setModelError("Sin modelos. ¿Key/URL correctas?");
+      if (r.models.length === 0) setModelError(t("providers_modal.err_no_models"));
     } catch (e) {
-      setModelError((e as Error).message || "No se pudo listar modelos.");
+      setModelError((e as Error).message || t("providers_modal.err_list_models"));
     } finally { setLoadingModels(false); }
   };
 
@@ -158,8 +158,8 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
 
   const buildProvider = (): { provider: Provider; modelLimits?: Record<string, number> } | null => {
     const slug = (f.slug || slugify(f.name)).trim();
-    if (!slug) { setError("Slug requerido."); return null; }
-    if (!isEdit && existingSlugs.includes(slug)) { setError(`Ya existe un provider "${slug}".`); return null; }
+    if (!slug) { setError(t("providers_modal.err_slug_required")); return null; }
+    if (!isEdit && existingSlugs.includes(slug)) { setError(t("providers_modal.err_slug_exists", { slug })); return null; }
 
     let modelLimits: Record<string, number> | undefined;
     if (f.model_context_limits_json.trim()) {
@@ -167,7 +167,7 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
         const parsed = JSON.parse(f.model_context_limits_json);
         if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) throw new Error();
         modelLimits = parsed;
-      } catch { setError("Límites de contexto por modelo: JSON inválido."); return null; }
+      } catch { setError(t("providers_modal.err_model_limits_json")); return null; }
     }
 
     const pricingVals = [f.p_input, f.p_output, f.p_cache_read, f.p_cache_write].map((x) => x.trim());
@@ -227,16 +227,16 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
     try {
       if (jsonMode) {
         const slug = (f.slug || slugify(f.name)).trim();
-        if (!slug) { setError("Slug requerido (en el formulario)."); return; }
+        if (!slug) { setError(t("providers_modal.err_slug_required_form")); return; }
         let parsed: unknown;
         try { parsed = JSON.parse(jsonText); }
-        catch { setError("JSON inválido: revisá la sintaxis."); return; }
+        catch { setError(t("providers_modal.err_json_invalid")); return; }
         if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-          setError("El JSON debe ser un objeto con la config del provider."); return;
+          setError(t("providers_modal.err_json_object")); return;
         }
         const raw = parsed as Record<string, unknown>;
         if (!raw.engine || typeof raw.engine !== "string") {
-          setError('Falta "engine" (ej. "anthropic", "ollama").'); return;
+          setError(t("providers_modal.err_engine_missing")); return;
         }
         const provider: Provider = {
           slug,
@@ -256,13 +256,13 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
       await onSave({ provider: built.provider, apiKeyValue: f.api_key_value.trim() || undefined, originalSlug: initial?.slug });
       onClose();
     } catch (e) {
-      setError((e as Error).message || "Error al guardar.");
+      setError((e as Error).message || t("providers_modal.err_save"));
     } finally { setBusy(false); }
   };
 
   const existingKey = isEdit && isSecretMarker(initial?.api_key);
   const keySuffix = secretSuffix(initial?.api_key);
-  const keyPlaceholder = existingKey ? `…${keySuffix ?? ""} (ya seteada)` : "sk-…";
+  const keyPlaceholder = existingKey ? t("providers_modal.api_key_set", { suffix: keySuffix ?? "" }) : "sk-…";
   const isOllama = f.engine === "ollama";
   const apiKeyEnv = ENGINE_PRESETS[f.engine]?.api_key_env;
 
@@ -271,12 +271,12 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
       open={open}
       onClose={onClose}
       title={isEdit ? t("providers_modal.edit_title", { name: initial?.name || initial?.slug || "" }) : t("providers_modal.new_title")}
-      description="Proveedor LLM. El motor (engine) define qué adapter usa (openai, ollama, …)."
+      description={t("providers_modal.description")}
       size="lg"
       footer={
         <>
-          <Button variant="ghost" onClick={onClose} disabled={busy}>Cancelar</Button>
-          <Button variant="primary" onClick={submit} loading={busy}>{isEdit ? "Guardar" : "Crear"}</Button>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>{isEdit ? t("common.save") : t("common.create")}</Button>
         </>
       }
     >
@@ -286,7 +286,7 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
             <div className="flex flex-wrap gap-1.5">
               {PRESET_PILLS.map((eng) => {
                 const Icon = ENGINE_ICONS[eng];
-                const label = eng === "custom" ? "Custom" : (ENGINE_OPTIONS.find((o) => o.value === eng)?.label || eng);
+                const label = eng === "custom" ? t("providers_modal.custom") : (ENGINE_OPTIONS.find((o) => o.value === eng)?.label || eng);
                 const selected = f.engine === eng;
                 return (
                   <button
@@ -312,13 +312,13 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
               jsonMode ? "border-sky-500/50 bg-sky-500/10 text-sky-400" : "border-border text-muted-fg hover:text-foreground"
             }`}
           >
-            <Braces className="size-3.5" /> {jsonMode ? "Volver al formulario" : "JSON"}
+            <Braces className="size-3.5" /> {jsonMode ? t("providers_modal.form_mode") : t("providers_modal.json_mode")}
           </button>
         </div>
 
         {jsonMode ? (
           <div className="space-y-2">
-            <Field label="Config del provider (JSON)" hint={`Se guarda como engines.${(f.slug || slugify(f.name)) || "<slug>"} en config.json`}>
+            <Field label={t("providers_modal.json_label")} hint={t("providers_modal.json_hint", { slug: (f.slug || slugify(f.name)) || "<slug>" })}>
               <Textarea
                 rows={14}
                 className="font-mono text-xs"
@@ -327,15 +327,15 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
                 spellCheck={false}
               />
             </Field>
-            <p className="text-[11px] text-muted-fg">Debe ser un objeto JSON válido con al menos <code>engine</code>. El slug se toma del formulario.</p>
+            <p className="text-[11px] text-muted-fg">{t("providers_modal.json_help")}</p>
           </div>
         ) : (
           <>
             <div className="grid grid-cols-2 gap-3">
-              <Field label="Nombre">
-                <Input value={f.name} onChange={(e) => up({ name: e.target.value, slug: isEdit ? f.slug : slugify(e.target.value) })} placeholder="Mi provider" />
+              <Field label={t("providers_modal.name_label")}>
+                <Input value={f.name} onChange={(e) => up({ name: e.target.value, slug: isEdit ? f.slug : slugify(e.target.value) })} placeholder={t("providers_modal.name_ph")} />
               </Field>
-              <Field label="Motor (engine)">
+              <Field label={t("providers_modal.engine_label")}>
                 <UiSelect
                   value={f.engine}
                   onChange={(v) => changeEngine(v as EngineType)}
@@ -344,17 +344,17 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
               </Field>
             </div>
 
-            <Field label="URL base (base_url)" hint="Se completa sola al elegir un proveedor.">
-              <Input value={f.base_url} onChange={(e) => up({ base_url: e.target.value })} placeholder="https://api.openai.com/v1" />
+            <Field label={t("providers_modal.base_url_label")} hint={t("providers_modal.base_url_hint")}>
+              <Input value={f.base_url} onChange={(e) => up({ base_url: e.target.value })} placeholder={t("providers_modal.base_url_ph")} />
             </Field>
 
             {!isOllama && (
-              <Field label="API key" hint={existingKey ? "Dejá en blanco para mantener la actual." : apiKeyEnv ? `Se guarda como secreto. Env sugerida: ${apiKeyEnv}` : "Se guarda como secreto."}>
+              <Field label={t("providers_modal.api_key_label")} hint={existingKey ? t("providers_modal.api_key_hint_existing") : apiKeyEnv ? t("providers_modal.api_key_hint_env", { env: apiKeyEnv }) : t("providers_modal.api_key_hint")}>
                 <Input type="password" autoComplete="new-password" value={f.api_key_value} onChange={(e) => up({ api_key_value: e.target.value })} placeholder={keyPlaceholder} />
               </Field>
             )}
 
-            <Field label="Modelo por defecto">
+            <Field label={t("providers_modal.model_label")}>
               <div className="space-y-2">
                 <div className="flex items-start gap-2">
                   <ModelCombobox
@@ -365,7 +365,7 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
                   />
                   <Button size="sm" variant="secondary" onClick={loadModels} disabled={loadingModels} title={t("providers_modal.list_models_hint")} aria-label={t("providers_modal.list_models_hint")}>
                     {loadingModels ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
-                    Cargar modelos
+                    {t("providers_modal.load_models")}
                   </Button>
                 </div>
                 {modelError && <p className="text-[11px] text-amber-400">{modelError}</p>}
@@ -373,29 +373,29 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
             </Field>
 
             <div className="grid grid-cols-2 gap-3">
-              <Field label="Máx. tokens (max_tokens)"><Input type="number" min={256} step={256} value={f.default_max_tokens} onChange={(e) => up({ default_max_tokens: parseInt(e.target.value) || 4096 })} /></Field>
-              <Field label={`Temperatura: ${f.default_temperature.toFixed(1)}`}>
+              <Field label={t("providers_modal.max_tokens_label")}><Input type="number" min={256} step={256} value={f.default_max_tokens} onChange={(e) => up({ default_max_tokens: parseInt(e.target.value) || 4096 })} /></Field>
+              <Field label={t("providers_modal.temperature_label", { value: f.default_temperature.toFixed(1) })}>
                 <input type="range" min={0} max={2} step={0.1} value={f.default_temperature} onChange={(e) => up({ default_temperature: parseFloat(e.target.value) })} className="mt-2 w-full accent-foreground" />
               </Field>
             </div>
 
             <details className="rounded-md border border-border bg-muted/20 p-3">
-              <summary className="cursor-pointer text-xs font-medium text-muted-fg">Análisis de tokens / pricing (opcional)</summary>
+              <summary className="cursor-pointer text-xs font-medium text-muted-fg">{t("providers_modal.pricing_summary")}</summary>
               <div className="mt-3 space-y-3">
-                <Field label="Límite de contexto (tokens)"><Input type="number" min={0} step={1024} value={f.context_limit_tokens} onChange={(e) => up({ context_limit_tokens: parseInt(e.target.value) || 0 })} /></Field>
+                <Field label={t("providers_modal.context_limit_label")}><Input type="number" min={0} step={1024} value={f.context_limit_tokens} onChange={(e) => up({ context_limit_tokens: parseInt(e.target.value) || 0 })} /></Field>
                 <div className="grid grid-cols-2 gap-3">
-                  <Field label="$ entrada / 1M"><Input type="number" min={0} step={0.0001} value={f.p_input} onChange={(e) => up({ p_input: e.target.value })} placeholder="0.15" /></Field>
-                  <Field label="$ salida / 1M"><Input type="number" min={0} step={0.0001} value={f.p_output} onChange={(e) => up({ p_output: e.target.value })} placeholder="0.60" /></Field>
-                  <Field label="$ cache read / 1M"><Input type="number" min={0} step={0.0001} value={f.p_cache_read} onChange={(e) => up({ p_cache_read: e.target.value })} placeholder="0.03" /></Field>
-                  <Field label="$ cache write / 1M"><Input type="number" min={0} step={0.0001} value={f.p_cache_write} onChange={(e) => up({ p_cache_write: e.target.value })} placeholder="0.00" /></Field>
+                  <Field label={t("providers_modal.price_input")}><Input type="number" min={0} step={0.0001} value={f.p_input} onChange={(e) => up({ p_input: e.target.value })} placeholder="0.15" /></Field>
+                  <Field label={t("providers_modal.price_output")}><Input type="number" min={0} step={0.0001} value={f.p_output} onChange={(e) => up({ p_output: e.target.value })} placeholder="0.60" /></Field>
+                  <Field label={t("providers_modal.price_cache_read")}><Input type="number" min={0} step={0.0001} value={f.p_cache_read} onChange={(e) => up({ p_cache_read: e.target.value })} placeholder="0.03" /></Field>
+                  <Field label={t("providers_modal.price_cache_write")}><Input type="number" min={0} step={0.0001} value={f.p_cache_write} onChange={(e) => up({ p_cache_write: e.target.value })} placeholder="0.00" /></Field>
                 </div>
-                <Field label="Límites de contexto por modelo (JSON)" hint='{"gpt-4o-mini":128000}'>
+                <Field label={t("providers_modal.model_limits_label")} hint='{"gpt-4o-mini":128000}'>
                   <Textarea rows={3} className="font-mono text-xs" value={f.model_context_limits_json} onChange={(e) => up({ model_context_limits_json: e.target.value })} />
                 </Field>
               </div>
             </details>
 
-            <Switch checked={f.is_active} onChange={(v) => up({ is_active: v })} label="Activo (los agentes pueden usarlo)" />
+            <Switch checked={f.is_active} onChange={(v) => up({ is_active: v })} label={t("providers_modal.active_label")} />
           </>
         )}
 

package/src/interfaces/web/src/components/voice/VoiceProviderList.tsx

@@ -7,6 +7,7 @@ import {
   type TtsEngineInfo,
   type TtsMode,
 } from "../../lib/api/voice";
+import { t } from "../../i18n";
 
 // TTS engine selector. Two modes:
 //   chain  — ordered fallback router; toggles enable/disable engines and the
@@ -63,11 +64,11 @@ export function VoiceProviderList({
       <div className="rounded-lg border border-border p-3">
         <div className="flex flex-wrap items-center justify-between gap-2">
           <div className="min-w-0">
-            <div className="text-sm font-medium">Modo de selección</div>
+            <div className="text-sm font-medium">{t("voice_ui.selection_mode")}</div>
             <div className="text-xs text-muted-fg">
               {isChain
-                ? "Cadena con fallback: usa el primer motor disponible según el orden de abajo."
-                : "Solo el motor por defecto: usa siempre el elegido; los demás quedan configurados para otras cosas."}
+                ? t("voice_ui.mode_chain_desc")
+                : t("voice_ui.mode_single_desc")}
             </div>
           </div>
           <div className="flex shrink-0 overflow-hidden rounded-md border border-border" role="group">
@@ -81,7 +82,7 @@ export function VoiceProviderList({
                 isChain ? "bg-emerald-500/15 text-emerald-300" : "text-muted-fg hover:text-fg",
               )}
             >
-              Cadena (router)
+              {t("voice_ui.mode_chain_btn")}
             </button>
             <button
               type="button"
@@ -93,7 +94,7 @@ export function VoiceProviderList({
                 !isChain ? "bg-emerald-500/15 text-emerald-300" : "text-muted-fg hover:text-fg",
               )}
             >
-              Solo el motor por defecto
+              {t("voice_ui.mode_single_btn")}
             </button>
           </div>
         </div>
@@ -122,7 +123,7 @@ export function VoiceProviderList({
                     type="button"
                     onClick={() => move(id, -1)}
                     disabled={busy || idx === 0}
-                    aria-label="Subir"
+                    aria-label={t("voice_ui.move_up")}
                     data-testid={`voice-provider-${id}-up`}
                     className="text-muted-fg hover:text-fg disabled:opacity-30"
                   >
@@ -132,7 +133,7 @@ export function VoiceProviderList({
                     type="button"
                     onClick={() => move(id, 1)}
                     disabled={busy || idx === ids.length - 1}
-                    aria-label="Bajar"
+                    aria-label={t("voice_ui.move_down")}
                     data-testid={`voice-provider-${id}-down`}
                     className="text-muted-fg hover:text-fg disabled:opacity-30"
                   >
@@ -145,15 +146,15 @@ export function VoiceProviderList({
               <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">local</Badge>}
+                  {meta.local && <Badge tone="info">{t("voice_ui.badge_local")}</Badge>}
                   {e.available ? (
-                    <Badge tone="success">disponible</Badge>
+                    <Badge tone="success">{t("voice_ui.badge_available")}</Badge>
                   ) : e.configured ? (
-                    <Badge tone="warning">configurado, no disponible</Badge>
+                    <Badge tone="warning">{t("voice_ui.badge_unavailable")}</Badge>
                   ) : (
-                    <Badge tone="muted">sin configurar</Badge>
+                    <Badge tone="muted">{t("voice_ui.badge_not_configured")}</Badge>
                   )}
-                  {isDefault && <Badge tone="success">por defecto</Badge>}
+                  {isDefault && <Badge tone="success">{t("voice_ui.badge_default")}</Badge>}
                 </div>
                 <div className="truncate text-xs text-muted-fg">{meta.note}</div>
               </div>
@@ -174,7 +175,7 @@ export function VoiceProviderList({
                       disabled={busy}
                       data-testid={`voice-provider-${id}-default`}
                     >
-                      <Circle className="size-3.5" /> Usar por defecto
+                      <Circle className="size-3.5" /> {t("voice_ui.set_as_default")}
                     </Button>
                   )
                 )}
@@ -185,7 +186,7 @@ export function VoiceProviderList({
                   onClick={() => onConfigure(id)}
                   data-testid={`voice-provider-${id}-config`}
                 >
-                  <Settings2 className="size-3.5" /> Configurar
+                  <Settings2 className="size-3.5" /> {t("voice_ui.configure")}
                 </Button>
               </div>
             </div>