npm - @agentprojectcontext/apx - Versions diffs - 1.37.0 → 1.38.0 - Mend

@agentprojectcontext/apx 1.37.0 → 1.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-DsADpObh.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B6sYFQFa.css">
+    <script type="module" crossorigin src="/assets/index-CQc_5t8F.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-hwxuTPcK.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/src/App.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import { CodeScreen } from "./screens/modules/CodeScreen";
 import { AddProjectDialog } from "./components/AddProjectDialog";
 import { PairingScreen } from "./screens/PairingScreen";
 import { RobyBubble } from "./components/RobyBubble";
+import { Roby, RobyEmpty, type RobyMood } from "./components/Roby";
 import { ToastProvider } from "./components/Toast";
 import { Button } from "./components/ui/button";
 import { TooltipProvider } from "./components/ui/tooltip";
@@ -31,6 +32,7 @@ export function App() {
   if (auth.status === "error") {
     return (
       <Splash
+        mood="sad"
         text={t("daemon.unreachable")}
         sub={`${t("daemon.unreachable_hint")}\n\n${auth.reason}`}
       />
@@ -197,13 +199,11 @@ function projectLabel(key?: string) {
   }
 }
-function Splash({ text, sub }: { text: string; sub?: string }) {
+function Splash({ text, sub, mood = "happy" }: { text: string; sub?: string; mood?: RobyMood }) {
   return (
     <div className="grid h-screen w-screen place-items-center bg-background text-foreground">
-      <div className="text-center">
-        <div className="font-mono text-xs text-muted-fg whitespace-pre leading-none mb-4">
-          {"  ▄███████▄\n █ ██   ██ █\n █  ◔   ◔  █\n █   ╰~╯   █\n  ▀███████▀"}
-        </div>
+      <div className="flex flex-col items-center text-center">
+        <Roby mood={mood} className="mb-4 text-xs" />
         <div className="text-foreground">{text}</div>
         {sub && <pre className="mt-2 max-w-xl whitespace-pre-wrap text-sm text-muted-fg">{sub}</pre>}
       </div>
@@ -213,27 +213,18 @@ function Splash({ text, sub }: { text: string; sub?: string }) {
 function NotFound() {
   const navigate = useNavigate();
-  // Roby, but lost — a confused riff on the Splash mascot (asymmetric eyes,
-  // little "o" mouth, a floating "?"). Tinted with the APX brand green.
-  const robyLost =
-    "      ?\n  ▄███████▄\n █ ██   ██ █\n █  ◑   ◐  █\n █    o    █\n  ▀███████▀";
   return (
-    <div className="grid h-full place-items-center p-8" data-testid="screen-not-found">
-      <div className="flex flex-col items-center text-center">
-        <pre
-          aria-hidden
-          className="mb-6 select-none whitespace-pre font-mono text-xs leading-none text-emerald-500"
-        >
-          {robyLost}
-        </pre>
-        <div className="font-mono text-7xl font-semibold leading-none tracking-tight text-foreground">
-          {t("not_found.title")}
-        </div>
-        <p className="mt-4 max-w-sm text-sm text-muted-fg">{t("not_found.message")}</p>
-        <Button variant="outline" className="mt-6" onClick={() => navigate("/")}>
+    <RobyEmpty
+      testId="screen-not-found"
+      mood="confused"
+      title={t("not_found.title")}
+      titleClassName="text-7xl"
+      message={t("not_found.message")}
+      action={
+        <Button variant="outline" onClick={() => navigate("/")}>
           {t("not_found.home")}
         </Button>
-      </div>
-    </div>
+      }
+    />
   );
 }

package/src/interfaces/web/src/components/ModelCombobox.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ export function ModelCombobox({
   value,
   onChange,
   options,
-  placeholder = "elegí o escribí un modelo…",
+  placeholder = t("shared_ui.model_combobox_ph"),
   invalid,
   invalidHint,
   className,

package/src/interfaces/web/src/components/Roby.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+// Roby — the APX mascot. Web mirror of the CLI version in src/core/mascot.js:
+// a chunky ▄███████▄ head with two screen-eyes and a tiny mouth, drawn as clean
+// emerald line art. Keep the FACES table below in sync with the CLI's MOODS so
+// the same character shows up identically across terminal and web.
+export type RobyMood = "happy" | "wave" | "confused" | "sad" | "excited" | "sleeping";
+// Each mood = a pair of pupils, a mouth glyph, and an optional floating accent.
+// NB: the sad mouth is "◠" (single-cell) rather than the CLI's "︵": that glyph
+// is East-Asian-wide (~1.7 cells) in the browser monospace font and would push
+// the head's right edge out of line. "◠" is the single-width frown inverse of
+// the happy "‿".
+const FACES: Record<RobyMood, { eyes: [string, string]; mouth: string; top?: string }> = {
+  happy:    { eyes: ["◕", "◕"], mouth: "‿" },
+  wave:     { eyes: ["◕", "◕"], mouth: "▽", top: "·" },
+  confused: { eyes: ["◑", "◐"], mouth: "o", top: "?" },
+  sad:      { eyes: ["╥", "╥"], mouth: "◠" },
+  excited:  { eyes: ["★", "★"], mouth: "▽", top: "✦" },
+  sleeping: { eyes: ["−", "−"], mouth: "‿", top: "z z" },
+};
+export function Roby({ mood = "happy", className }: { mood?: RobyMood; className?: string }) {
+  const face = FACES[mood] ?? FACES.happy;
+  const [el, er] = face.eyes;
+  // Recessed eye "screens" + floating accent sit in a dimmer emerald; the bright
+  // frame, pupils and mouth inherit text-emerald-400 from the wrapper.
+  const dim = "text-emerald-700 dark:text-emerald-600/70";
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "select-none whitespace-pre font-mono leading-none text-emerald-400",
+        className
+      )}
+    >
+      {face.top && (
+        <div>
+          <span className={dim}>{`      ${face.top}`}</span>
+        </div>
+      )}
+      <div>{"   ▄███████▄"}</div>
+      <div>
+        {"  █ "}
+        <span className={dim}>{"██"}</span>
+        {"   "}
+        <span className={dim}>{"██"}</span>
+        {" █"}
+      </div>
+      <div>{`  █  ${el}   ${er}  █`}</div>
+      <div>{`  █    ${face.mouth}    █`}</div>
+      <div>{"   ▀███████▀"}</div>
+    </div>
+  );
+}
+// Centered "Roby + message" layout shared by the 404 and the project-not-found
+// screens. `title` is optional and rendered large (e.g. a giant "404").
+export function RobyEmpty({
+  mood = "confused",
+  title,
+  titleClassName,
+  message,
+  action,
+  className,
+  testId,
+}: {
+  mood?: RobyMood;
+  title?: ReactNode;
+  titleClassName?: string;
+  message?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+  testId?: string;
+}) {
+  return (
+    <div className={cn("grid h-full place-items-center p-8", className)} data-testid={testId}>
+      <div className="flex flex-col items-center text-center">
+        <Roby mood={mood} className="mb-6 text-sm" />
+        {title != null && (
+          <div
+            className={cn(
+              "font-mono font-semibold leading-none tracking-tight text-foreground",
+              titleClassName
+            )}
+          >
+            {title}
+          </div>
+        )}
+        {message != null && <p className="mt-4 max-w-sm text-sm text-muted-fg">{message}</p>}
+        {action && <div className="mt-6">{action}</div>}
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/TelegramChannelDialog.tsx CHANGED Viewed

@@ -23,7 +23,7 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
   }, [channel?.name]);
   const submit = async () => {
-    if (!draft.name?.trim()) { toast.error("name requerido"); return; }
+    if (!draft.name?.trim()) { toast.error(t("telegram_channel_dialog.name_required")); return; }
     setBusy(true);
     try {
       const isExisting = channel && channel.name !== "";
@@ -32,7 +32,7 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
       } else {
         await Telegram.channels.upsert(draft);
       }
-      toast.success("Canal guardado.");
+      toast.success(t("telegram_channel_dialog.saved"));
       onSaved();
     } catch (e) {
       toast.error((e as Error).message);
@@ -44,7 +44,7 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
       open={!!channel}
       onClose={onClose}
       title={channel?.name ? t("telegram_channel_dialog.edit_title", { name: channel.name }) : t("telegram_channel_dialog.new_title")}
-      description="POST /telegram/channels (upsert) — PATCH /telegram/channels/:name (parcial)."
+      description={t("telegram_ui.channel_dialog_desc")}
       footer={
         <>
           <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
@@ -53,10 +53,10 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
       }
     >
       <div className="space-y-3">
-        <Field label="name (slug interno)">
+        <Field label={t("telegram_channel_dialog.name_label")}>
           <Input value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} disabled={!!channel?.name} />
         </Field>
-        <Field label="bot_token" hint={channel?.bot_token ? secretHint(channel.bot_token) : "Token del BotFather. Se guarda en ~/.apx/config.json."}>
+        <Field label={t("telegram_channel_dialog.token_label")} hint={channel?.bot_token ? secretHint(channel.bot_token) : t("telegram_ui.bot_token_hint")}>
           <Input
             type="password"
             value={draft.bot_token || ""}
@@ -64,18 +64,18 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
             placeholder={channel?.bot_token ? secretHint(channel.bot_token) : ""}
           />
         </Field>
-        <Field label="chat_id">
+        <Field label={t("telegram_channel_dialog.chat_id")}>
           <Input value={draft.chat_id || ""} onChange={(e) => setDraft({ ...draft, chat_id: e.target.value })} />
         </Field>
-        <Field label="project" hint="Slug o id del proyecto al que pinear este canal (opcional).">
+        <Field label={t("telegram_channel_dialog.project_label")} hint={t("telegram_channel_dialog.project_hint")}>
           <Input value={draft.project || ""} onChange={(e) => setDraft({ ...draft, project: e.target.value })} />
         </Field>
-        <Field label="route_to_agent" hint="Agente que contesta; vacío = super-agent APX.">
+        <Field label={t("telegram_channel_dialog.route_label")} hint={t("telegram_channel_dialog.route_hint")}>
           <Input value={draft.route_to_agent || ""} onChange={(e) => setDraft({ ...draft, route_to_agent: e.target.value })} />
         </Field>
         <Field
-          label="owner_user_id"
-          hint="user_id de Telegram del dueño de este canal. Override del rol global a 'owner' acá. Si lo dejás vacío, el primer mensaje privado lo reclama."
+          label={t("telegram_channel_dialog.owner_label")}
+          hint={t("telegram_channel_dialog.owner_hint")}
         >
           <Input
             value={draft.owner_user_id != null ? String(draft.owner_user_id) : ""}
@@ -89,7 +89,7 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
         <Switch
           checked={!!draft.respond_with_engine}
           onChange={(v) => setDraft({ ...draft, respond_with_engine: v })}
-          label="Responder con engine (no echo)"
+          label={t("telegram_channel_dialog.respond_label")}
         />
       </div>
     </Dialog>

package/src/interfaces/web/src/components/TelegramSendDialog.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ export function TelegramSendDialog({ channel, onClose }: Props) {
     setBusy(true);
     try {
       await Telegram.send({ text, channel: channel.name });
-      toast.success("Mensaje enviado.");
+      toast.success(t("telegram_ui.message_sent"));
       onClose();
     } catch (e) {
       toast.error((e as Error).message);
@@ -31,16 +31,16 @@ export function TelegramSendDialog({ channel, onClose }: Props) {
     <Dialog
       open={!!channel}
       onClose={onClose}
-      title={channel ? `${t("admin.telegram_send_test_title")} ${channel.name}` : ""}
-      description={channel ? `chat_id: ${channel.chat_id || "—"}` : ""}
+      title={channel ? t("telegram_send_dialog.title", { name: channel.name }) : ""}
+      description={channel ? t("telegram_ui.send_chat_id", { id: channel.chat_id || "—" }) : ""}
       footer={
         <>
           <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
-          <Button variant="primary" onClick={submit} loading={busy}>Enviar</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>{t("chat_ui.send")}</Button>
         </>
       }
     >
-      <Field label="Texto">
+      <Field label={t("telegram_ui.message_label")}>
         <Textarea rows={4} value={text} onChange={(e) => setText(e.target.value)} />
       </Field>
     </Dialog>

package/src/interfaces/web/src/components/chat/MessageBubble.tsx CHANGED Viewed

@@ -53,7 +53,7 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
         {!mine && msg.inspector && (msg.inspector.loaded?.length || msg.inspector.hinted?.length) ? (
           <div
             className="flex flex-wrap items-center gap-1 text-[10px] text-sky-400/90"
-            title={`Skill Inspector (${msg.inspector.embedder || "RAG"}) eligió estas skills para este turno`}
+            title={t("shared_ui.skill_inspector_title", { embedder: msg.inspector.embedder || "RAG" })}
           >
             <Sparkles size={10} />
             {msg.inspector.loaded?.map((s) => (
@@ -107,7 +107,7 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
           <span>{formatTs(msg.ts)}</span>
           {!mine && msg.model && <span className="font-mono">· {msg.model}</span>}
           {!mine && hasTools && (
-            <span>· {msg.parts.filter((p) => p.kind === "tool").length} tools</span>
+            <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
           )}
           {onCopy && copyText && (
             <button

package/src/interfaces/web/src/components/chat/ModelPicker.tsx CHANGED Viewed

@@ -64,7 +64,7 @@ export function ModelPicker({
   const q = query.trim().toLowerCase();
   const filtered = q ? options.filter((o) => o.toLowerCase().includes(q)) : options;
-  const label = value || "Auto";
+  const label = value || t("shared_ui.auto");
   const pick = (m: string) => { onChange(m); setOpen(false); setQuery(""); };
@@ -93,7 +93,7 @@ export function ModelPicker({
           <input
             autoFocus
             value={query}
-            placeholder="filtrar o escribir modelo…"
+            placeholder={t("shared_ui.model_filter_ph")}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={(e) => { if (e.key === "Enter" && query.trim()) pick(query.trim()); }}
             className="mb-1 w-full rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-foreground/30"
@@ -108,11 +108,11 @@ export function ModelPicker({
                   !value && "bg-accent/50",
                 )}
               >
-                <span className="flex items-center gap-1.5"><X className="size-3" /> Auto (router decide)</span>
+                <span className="flex items-center gap-1.5"><X className="size-3" /> {t("shared_ui.auto_router")}</span>
                 {!value && <Check className="size-3" />}
               </button>
             </li>
-            {!loaded && <li className="px-2 py-1 text-[11px] text-muted-fg">cargando modelos…</li>}
+            {!loaded && <li className="px-2 py-1 text-[11px] text-muted-fg">{t("shared_ui.loading_models")}</li>}
             {loaded && filtered.length === 0 && query.trim() && (
               <li>
                 <button
@@ -120,7 +120,7 @@ export function ModelPicker({
                   onMouseDown={(e) => { e.preventDefault(); pick(query.trim()); }}
                   className="w-full rounded-md px-2 py-1 text-left font-mono text-xs hover:bg-accent hover:text-accent-fg"
                 >
-                  usar “{query.trim()}”
+                  {t("shared_ui.use_value", { value: query.trim() })}
                 </button>
               </li>
             )}

package/src/interfaces/web/src/components/chat/ToolCall.tsx CHANGED Viewed

@@ -19,28 +19,32 @@ import {
 } from "lucide-react";
 import { cn } from "../../lib/cn";
 import type { ToolPart } from "../../hooks/useChat";
+import { t } from "../../i18n";
 // Map registered tool names (core/agent tools) to an icon + friendly label.
-const TOOL_META: Record<string, { icon: typeof Wrench; label: string }> = {
-  read_file: { icon: FileText, label: "Leer archivo" },
-  write_file: { icon: FilePlus, label: "Escribir archivo" },
-  edit_file: { icon: FilePen, label: "Editar archivo" },
-  list_files: { icon: FolderTree, label: "Listar archivos" },
-  search_files: { icon: Search, label: "Buscar en archivos" },
-  search_messages: { icon: Search, label: "Buscar mensajes" },
-  tail_messages: { icon: Search, label: "Últimos mensajes" },
-  run_shell: { icon: Terminal, label: "Ejecutar shell" },
-  send_telegram: { icon: Send, label: "Enviar Telegram" },
-  call_agent: { icon: Bot, label: "Llamar agente" },
-  call_mcp: { icon: Plug, label: "Llamar MCP" },
-  call_runtime: { icon: Bot, label: "Llamar runtime" },
-  create_task: { icon: ListTodo, label: "Crear tarea" },
-};
+// Built per-call so t() runs against the active locale at render time.
+function toolMeta(): Record<string, { icon: typeof Wrench; label: string }> {
+  return {
+    read_file: { icon: FileText, label: t("shared_ui.tool_read_file") },
+    write_file: { icon: FilePlus, label: t("shared_ui.tool_write_file") },
+    edit_file: { icon: FilePen, label: t("shared_ui.tool_edit_file") },
+    list_files: { icon: FolderTree, label: t("shared_ui.tool_list_files") },
+    search_files: { icon: Search, label: t("shared_ui.tool_search_files") },
+    search_messages: { icon: Search, label: t("shared_ui.tool_search_messages") },
+    tail_messages: { icon: Search, label: t("shared_ui.tool_tail_messages") },
+    run_shell: { icon: Terminal, label: t("shared_ui.tool_run_shell") },
+    send_telegram: { icon: Send, label: t("shared_ui.tool_send_telegram") },
+    call_agent: { icon: Bot, label: t("shared_ui.tool_call_agent") },
+    call_mcp: { icon: Plug, label: t("shared_ui.tool_call_mcp") },
+    call_runtime: { icon: Bot, label: t("shared_ui.tool_call_runtime") },
+    create_task: { icon: ListTodo, label: t("shared_ui.tool_create_task") },
+  };
+}
 const FILE_TOOLS = new Set(["write_file", "edit_file"]);
 function metaFor(tool: string) {
-  return TOOL_META[tool] || { icon: Wrench, label: tool };
+  return toolMeta()[tool] || { icon: Wrench, label: tool };
 }
 // Best-effort one-line argument summary shown next to the tool title.
@@ -104,7 +108,7 @@ export function ToolCall({ part }: { part: ToolPart }) {
         <span className="shrink-0 font-medium">{label}</span>
         {summary && <span className="truncate font-mono text-muted-foreground">{summary}</span>}
         <span className="ml-auto flex items-center gap-1">
-          {part.status === "deduped" && <span className="text-[10px] text-amber-400">dedup</span>}
+          {part.status === "deduped" && <span className="text-[10px] text-amber-400">{t("shared_ui.dedup")}</span>}
           <StatusIcon status={part.status} />
         </span>
       </button>
@@ -113,7 +117,7 @@ export function ToolCall({ part }: { part: ToolPart }) {
         <div className="space-y-2 border-t border-border/60 px-2.5 py-2">
           {part.args && Object.keys(part.args).length > 0 && (
             <div>
-              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">args</div>
+              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">{t("shared_ui.args")}</div>
               <pre className="max-h-48 overflow-auto rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed text-foreground">
                 {pretty(part.args)}
               </pre>
@@ -121,7 +125,7 @@ export function ToolCall({ part }: { part: ToolPart }) {
           )}
           {part.result !== undefined && (
             <div>
-              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">result</div>
+              <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70">{t("shared_ui.result")}</div>
               <pre
                 className={cn(
                   "max-h-64 overflow-auto rounded-md bg-background/60 p-2 font-mono text-[11px] leading-relaxed",

package/src/interfaces/web/src/components/code/CodeArtifactsTab.tsx CHANGED Viewed

@@ -63,7 +63,7 @@ function ArtifactRow({
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
-      toast.info("Copiado.");
+      toast.info(t("modules_ui.code_copied"));
     } catch {
       /* ignore */
     }
@@ -75,8 +75,8 @@ function ArtifactRow({
     try {
       const r = await Artifacts.run(pid, entry.name);
       setRunResult(r);
-      if (r.ok) toast.info(`exit 0 — ${r.durationMs}ms`);
-      else toast.error(`exit ${r.exitCode ?? r.signal ?? "?"}${r.timedOut ? " (timeout)" : ""}`);
+      if (r.ok) toast.info(t("modules_ui.code_artifact_exit_ok", { ms: r.durationMs ?? 0 }));
+      else toast.error(t("modules_ui.code_artifact_exit_fail", { code: r.exitCode ?? r.signal ?? "?", timeout: r.timedOut ? t("modules_ui.code_artifact_timeout_suffix") : "" }));
     } catch (e) {
       toast.error((e as Error).message);
     } finally {
@@ -177,7 +177,7 @@ function ArtifactRow({
                 className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-blue-500/15 text-blue-700 hover:bg-blue-500/25 dark:text-blue-300"
               >
                 <Eye className="size-3" />
-                Ver
+                {t("modules_ui.code_artifact_view_short")}
               </button>
             </Tip>
             <DialogContent className="sm:max-w-lg">
@@ -205,7 +205,7 @@ function ArtifactRow({
               className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-violet-500/15 text-violet-700 hover:bg-violet-500/25 dark:text-violet-300"
             >
               <SquarePen className="size-3" />
-              Editar
+              {t("modules_ui.code_artifact_edit_short")}
             </button>
           </Tip>
@@ -252,7 +252,7 @@ function ArtifactRow({
                     />
                   }
                 >
-                  Cancelar
+                  {t("common.cancel")}
                 </DialogClose>
                 <button
                   type="button"
@@ -266,7 +266,7 @@ function ArtifactRow({
                   )}
                 >
                   {deleting && <Spinner size={10} />}
-                  Eliminar
+                  {t("code_module.delete")}
                 </button>
               </DialogFooter>
             </DialogContent>
@@ -292,16 +292,16 @@ function ArtifactRow({
                     : "bg-rose-500/15 text-rose-700 dark:text-rose-300",
                 )}
               >
-                exit {runResult.exitCode ?? runResult.signal ?? "?"}
+                {t("modules_ui.code_artifact_exit_badge", { code: runResult.exitCode ?? runResult.signal ?? "?" })}
               </span>
               {runResult.timedOut && (
                 <span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-amber-700 dark:text-amber-300">
-                  timeout
+                  {t("modules_ui.code_artifact_timeout")}
                 </span>
               )}
               {runResult.truncated && (
                 <span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-amber-700 dark:text-amber-300">
-                  truncated
+                  {t("modules_ui.code_artifact_truncated")}
                 </span>
               )}
               <span className="font-mono text-muted-foreground">

package/src/interfaces/web/src/components/code/CodeContextTab.tsx CHANGED Viewed

@@ -56,18 +56,18 @@ export function CodeContextTab({ turns, session }: Props) {
   return (
     <div className="space-y-1 p-3" data-testid="code-context-tab">
-      <Row label={t("code_module.ctx_model")} value={m.model || "auto"} />
-      {session?.mode && <Row label="Modo" value={session.mode} />}
-      {session?.agentSlug && <Row label="Agente" value={session.agentSlug} />}
+      <Row label={t("code_module.ctx_model")} value={m.model || t("modules_ui.code_ctx_auto")} />
+      {session?.mode && <Row label={t("modules_ui.code_ctx_mode")} value={session.mode} />}
+      {session?.agentSlug && <Row label={t("modules_ui.code_ctx_agent")} value={session.agentSlug} />}
       <Row
         label={t("code_module.ctx_messages")}
-        value={`${m.userMsgs} usuario · ${m.assistantMsgs} asistente`}
+        value={t("modules_ui.code_ctx_msgs_value", { user: m.userMsgs, assistant: m.assistantMsgs })}
       />
       <Row label={t("code_module.ctx_input")} value={m.input.toLocaleString()} />
       <Row label={t("code_module.ctx_output")} value={m.output.toLocaleString()} />
-      <Row label="Tokens Total" value={(m.input + m.output).toLocaleString()} />
-      {session?.createdAt && <Row label="Creado" value={fmtDate(session.createdAt)} />}
-      {session?.updatedAt && <Row label="Actividad" value={fmtDate(session.updatedAt)} />}
+      <Row label={t("modules_ui.code_ctx_tokens_total")} value={(m.input + m.output).toLocaleString()} />
+      {session?.createdAt && <Row label={t("modules_ui.code_ctx_created")} value={fmtDate(session.createdAt)} />}
+      {session?.updatedAt && <Row label={t("modules_ui.code_ctx_activity")} value={fmtDate(session.updatedAt)} />}
       <hr className="border-border my-2" />

package/src/interfaces/web/src/components/code/CodeProjectPicker.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { FolderGit2 } from "lucide-react";
 import { UiSelect } from "../UiSelect";
+import { t } from "../../i18n";
 import type { ProjectEntry } from "../../types/daemon";
 interface Props {
@@ -16,7 +17,7 @@ interface Props {
 // their path) so the dropdown is human-readable.
 export function CodeProjectPicker({ projects, value, onChange, disabled }: Props) {
   const options = projects.map((p) => {
-    const base = p.path?.split("/").filter(Boolean).pop() || `proyecto ${p.id}`;
+    const base = p.path?.split("/").filter(Boolean).pop() || t("modules_ui.code_project_fallback", { id: p.id });
     return {
       value: String(p.id),
       label: p.name || base,
@@ -31,7 +32,7 @@ export function CodeProjectPicker({ projects, value, onChange, disabled }: Props
         value={value}
         onChange={onChange}
         options={options}
-        placeholder="Elegí un proyecto…"
+        placeholder={t("modules_ui.code_pick_project_ph")}
         disabled={disabled}
       />
     </div>

package/src/interfaces/web/src/components/common/TabNav.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import { useState, useEffect, useCallback, Fragment, type ElementType } from "re
 import { PanelLeft } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Tip } from "../ui/tip";
+import { t } from "../../i18n";
 export interface TabItem {
   key: string;
@@ -46,11 +47,11 @@ export function useNavCollapse(storageKey: string) {
 export function NavToggle({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
   return (
-    <Tip content={collapsed ? "Expandir menú" : "Colapsar menú"} side="bottom">
+    <Tip content={collapsed ? t("settings_ui.expand_menu") : t("settings_ui.collapse_menu")} side="bottom">
       <button
         type="button"
         onClick={onToggle}
-        aria-label={collapsed ? "Expandir menú" : "Colapsar menú"}
+        aria-label={collapsed ? t("settings_ui.expand_menu") : t("settings_ui.collapse_menu")}
         className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
       >
         <PanelLeft className={cn("size-4 transition-transform", collapsed && "rotate-180")} />

package/src/interfaces/web/src/components/config/ConfigTabsEditor.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import { UiSelect } from "../UiSelect";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { getDotted, parseConfigJson } from "../../lib/config-values";
 import { isSecretMarker, secretHint } from "../../lib/secrets";
+import { t } from "../../i18n";
 export type ConfigField = {
   path: string;
@@ -27,7 +28,7 @@ export function ConfigTabsEditor({
   placeholderSource,
   jsonTitle,
   jsonDescription,
-  saveLabel = "Guardar",
+  saveLabel = t("common.save"),
   onSaveFields,
   onSaveJson,
   busy,
@@ -133,7 +134,7 @@ export function ConfigTabsEditor({
             onChange={(event) => setRaw(event.target.value)}
           />
           {jsonError && <p className="text-xs text-destructive">{jsonError}</p>}
-          <Button variant="primary" loading={busy} onClick={saveJson}>Guardar JSON</Button>
+          <Button variant="primary" loading={busy} onClick={saveJson}>{t("settings_ui.save_json")}</Button>
         </div>
       </TabsContent>
     </Tabs>

package/src/interfaces/web/src/components/config/GlobalConfigEditor.tsx CHANGED Viewed

@@ -25,13 +25,13 @@ export function GlobalConfigEditor() {
   return (
     <Section
       title={t("global_config.title")}
-      description="Config general en ~/.apx/config.json. Editable por tabs; JSON queda separado."
+      description={t("settings_ui.global_config_desc")}
     >
       <ConfigTabsEditor
         sections={GLOBAL_CONFIG_SECTIONS}
         source={config as Record<string, unknown>}
         jsonTitle="~/.apx/config.json"
-        jsonDescription="Secretos redacted no se sobrescriben."
+        jsonDescription={t("settings_ui.global_json_desc")}
         onSaveFields={async (set, unset) => {
           await patch(set, unset);
           mutate();