@agentprojectcontext/apx 1.33.0 → 1.34.0

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

@@ -1,6 +1,8 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { AlertTriangle, ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn";
+import { t } from "../i18n";
 
 // Editable combobox: type freely, matching options appear below; click one to
 // pick it, or keep your own text. Behaves like a text input that is also a
@@ -25,21 +27,50 @@ export function ModelCombobox({
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState(value);
   const wrapRef = useRef<HTMLDivElement | null>(null);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  const [menuRect, setMenuRect] = useState<{ top: number; left: number; width: number } | null>(null);
 
   useEffect(() => { setQuery(value); }, [value]);
 
-  // Close on outside click.
+  // Position the portal'd list right under the input, in viewport coords.
+  // Recompute on open, scroll, and resize so it tracks the trigger even
+  // inside a scrolling modal.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const compute = () => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
+    };
+    compute();
+    window.addEventListener("scroll", compute, true);
+    window.addEventListener("resize", compute);
+    return () => {
+      window.removeEventListener("scroll", compute, true);
+      window.removeEventListener("resize", compute);
+    };
+  }, [open]);
+
+  // Close on outside click — must allow clicks inside the portal'd list too.
   useEffect(() => {
     if (!open) return;
     const onDoc = (e: MouseEvent) => {
-      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
+      const t = e.target as Node;
+      if (wrapRef.current?.contains(t)) return;
+      if (listRef.current?.contains(t)) return;
+      setOpen(false);
     };
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
 
+  // If the visible text matches the committed value, the user hasn't typed
+  // anything new yet — show the full list so they can see every option.
+  // Only narrow when they actively start filtering.
   const q = query.trim().toLowerCase();
-  const filtered = q ? options.filter((o) => o.toLowerCase().includes(q)) : options;
+  const isUntouched = query === value;
+  const filtered = q && !isUntouched ? options.filter((o) => o.toLowerCase().includes(q)) : options;
 
   const pick = (o: string) => { onChange(o); setQuery(o); setOpen(false); };
 
@@ -52,7 +83,7 @@ export function ModelCombobox({
         )}
       >
         {invalid && (
-          <span title={invalidHint || "Modelo/proveedor no disponible"}>
+          <span title={invalidHint || t("models_ui.invalid_hint")}>
             <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
           </span>
         )}
@@ -73,8 +104,12 @@ export function ModelCombobox({
         </button>
       </div>
 
-      {open && filtered.length > 0 && (
-        <ul className="absolute z-50 mt-1 max-h-56 w-full overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-md ring-1 ring-foreground/10">
+      {open && filtered.length > 0 && menuRect && createPortal(
+        <ul
+          ref={listRef}
+          style={{ position: "fixed", top: menuRect.top, left: menuRect.left, width: menuRect.width }}
+          className="z-[1000] max-h-56 overflow-y-auto rounded-lg border border-border bg-popover p-1 shadow-md ring-1 ring-foreground/10"
+        >
           {filtered.map((o) => (
             <li key={o}>
               <button
@@ -89,7 +124,8 @@ export function ModelCombobox({
               </button>
             </li>
           ))}
-        </ul>
+        </ul>,
+        document.body,
       )}
     </div>
   );

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

@@ -43,7 +43,7 @@ export function TelegramChannelDialog({ channel, onClose, onSaved }: Props) {
     <Dialog
       open={!!channel}
       onClose={onClose}
-      title={channel?.name ? `Editar canal: ${channel.name}` : "Nuevo canal de Telegram"}
+      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)."
       footer={
         <>

package/src/interfaces/web/src/components/chat/AskAnswersCard.tsx

@@ -0,0 +1,76 @@
+import { MessageCircleQuestion } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+interface QA {
+  question: string;
+  answer: string;
+  skipped: boolean;
+}
+
+// Parse the compiled answer text emitted by InlineAskPanel.compileAnswers.
+// Returns null when the text doesn't match the expected pattern (so callers
+// can fall back to the standard user bubble).
+export function parseAskAnswerText(text: string): QA[] | null {
+  const lines = text.split("\n");
+  const pairs: QA[] = [];
+  let current: QA | null = null;
+  for (const line of lines) {
+    if (line.startsWith("- ")) {
+      if (current) pairs.push(current);
+      current = { question: line.slice(2), answer: "", skipped: false };
+    } else if (line.startsWith("  → ") && current) {
+      const a = line.slice(4);
+      current.answer = a;
+      current.skipped = a === "(omitido)";
+    } else {
+      return null;
+    }
+  }
+  if (current) pairs.push(current);
+  return pairs.length > 0 ? pairs : null;
+}
+
+interface Props {
+  text: string;
+}
+
+// Full-width centered card rendered between the assistant turn that asked the
+// questions and the next assistant turn. Replaces the right-aligned user bubble
+// so the Q&A reads as a single coherent block instead of an opaque user reply.
+export function AskAnswersCard({ text }: Props) {
+  const pairs = parseAskAnswerText(text);
+  if (!pairs) return null;
+  return (
+    <div className="flex w-full justify-center">
+      <div
+        className="w-full max-w-[85%] rounded-2xl border border-border/70 bg-card/40 px-4 py-3 shadow-sm"
+        data-testid="ask-answers-card"
+      >
+        <div className="mb-2 flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+          <MessageCircleQuestion className="size-3.5" />
+          <span>{t("ask_panel.answers_header")}</span>
+        </div>
+        <ul className="space-y-2.5">
+          {pairs.map((p, i) => (
+            <li key={i} className="space-y-0.5">
+              <div className="text-sm font-medium leading-snug text-foreground">
+                {p.question}
+              </div>
+              <div
+                className={cn(
+                  "whitespace-pre-wrap text-[13px] leading-snug",
+                  p.skipped
+                    ? "italic text-muted-foreground/70"
+                    : "text-muted-foreground",
+                )}
+              >
+                {p.answer}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

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

@@ -2,7 +2,9 @@ import { Bot, Copy, User, Info } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { ToolCall } from "./ToolCall";
 import { AskQuestionsCard } from "./AskQuestionsCard";
+import { AskAnswersCard, parseAskAnswerText } from "./AskAnswersCard";
 import { textOf, type ChatMsg } from "../../hooks/useChat";
+import { t } from "../../i18n";
 
 interface Props {
   msg: ChatMsg;
@@ -10,14 +12,24 @@ interface Props {
    *  ask_questions tool call is still waiting for the user vs already answered
    *  (a later user message would push this assistant turn off the bottom). */
   isLast?: boolean;
+  /** True when this user message is the reply to a preceding `ask_questions`
+   *  call. Renders as a full-width centered card instead of the user bubble. */
+  isAskAnswer?: boolean;
   onCopy?: (text: string) => void;
 }
 
-export function MessageBubble({ msg, isLast, onCopy }: Props) {
+export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
   const mine = msg.role === "user";
   const copyText = textOf(msg);
   const hasTools = msg.parts.some((p) => p.kind === "tool");
 
+  if (mine && isAskAnswer) {
+    const text = textOf(msg);
+    if (parseAskAnswerText(text)) {
+      return <AskAnswersCard text={text} />;
+    }
+  }
+
   return (
     <div className={cn("group flex items-start gap-2", mine ? "justify-end" : "justify-start")}>
       {!mine && (
@@ -82,9 +94,10 @@ export function MessageBubble({ msg, isLast, onCopy }: Props) {
               type="button"
               onClick={() => onCopy(copyText)}
               className="inline-flex items-center gap-1 hover:text-foreground"
-              title="Copiar"
+              title={t("chat_ui.copy")}
+              aria-label={t("chat_ui.copy")}
             >
-              <Copy size={10} /> copiar
+              <Copy size={10} /> {t("chat_ui.copy")}
             </button>
           )}
         </div>

package/src/interfaces/web/src/components/chat/MessageList.tsx

@@ -28,9 +28,31 @@ export function MessageList({ msgs, onCopy }: Props) {
   return (
     <div className="space-y-4 px-3 py-4">
       {msgs.map((m, i) => (
-        <MessageBubble key={i} msg={m} isLast={i === lastIdx} onCopy={onCopy} />
+        <MessageBubble
+          key={i}
+          msg={m}
+          isLast={i === lastIdx}
+          isAskAnswer={isAnswerToAsk(msgs, i)}
+          onCopy={onCopy}
+        />
       ))}
       <div ref={bottomRef} />
     </div>
   );
 }
+
+// A user message is an "ask answer" when the preceding assistant turn ended on
+// an ask_questions tool call (its last tool part). The InlineAskPanel compiles
+// the user's picks into a single text reply, which we then render as a centered
+// full-width card instead of the standard right-aligned user bubble.
+function isAnswerToAsk(msgs: ChatMsg[], i: number): boolean {
+  const m = msgs[i];
+  if (!m || m.role !== "user") return false;
+  const prev = msgs[i - 1];
+  if (!prev || prev.role !== "assistant") return false;
+  for (let j = prev.parts.length - 1; j >= 0; j--) {
+    const p = prev.parts[j];
+    if (p.kind === "tool") return p.tool === "ask_questions";
+  }
+  return false;
+}

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { Server, ChevronDown, X, Check } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Engines } from "../../lib/api";
+import { t } from "../../i18n";
 
 // Compact model picker for the chat composer (the panda.project pattern): a
 // small "Server · <model>" button that opens a dropdown to pick a model
@@ -79,7 +80,8 @@ export function ModelPicker({
           "hover:bg-accent/60 hover:text-foreground",
           value && "text-foreground",
         )}
-        title="Elegir modelo (o Auto)"
+        title={t("chat_ui.pick_model")}
+        aria-label={t("chat_ui.pick_model")}
       >
         <Server className="size-3 shrink-0" />
         <span className="truncate font-mono">{label}</span>

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

@@ -137,7 +137,7 @@ function ArtifactRow({
         ) : (
           <span className="min-w-0 flex-1 truncate font-mono">{entry.name}</span>
         )}
-        <Tip content="Renombrar">
+        <Tip content={t("code_module.artifacts_rename")}>
           <button
             type="button"
             onClick={startRename}
@@ -170,7 +170,7 @@ function ArtifactRow({
         <div className="flex flex-wrap items-center gap-1 mt-1">
           {/* Ver button */}
           <Dialog open={viewOpen} onOpenChange={setViewOpen}>
-            <Tip content="Ver contenido">
+            <Tip content={t("code_module.artifacts_view")}>
               <button
                 type="button"
                 onClick={() => setViewOpen(true)}
@@ -198,7 +198,7 @@ function ArtifactRow({
           </Dialog>
 
           {/* Editar — opens as a file tab in the main panel */}
-          <Tip content="Editar contenido">
+          <Tip content={t("code_module.artifacts_edit")}>
             <button
               type="button"
               onClick={() => onEditArtifact?.(entry.name)}
@@ -338,7 +338,7 @@ export function CodeArtifactsTab({ pid, onRunInTerminal, onEditArtifact }: Props
             ? t("code_module.artifacts_count", { n: entries.length })
             : ""}
         </span>
-        <Tip content="Recargar">
+        <Tip content={t("code_module.reload")}>
           <button
             type="button"
             onClick={() => void list.mutate()}

package/src/interfaces/web/src/components/code/CodeChangesTab.tsx

@@ -61,7 +61,7 @@ export function CodeChangesTab({ changes, loading, onRefresh }: Props) {
         <span className="text-[11px] text-muted-foreground">
           {files.length > 0 ? t("code_module.changes_files", { n: files.length }) : ""}
         </span>
-        <Tip content="Recargar">
+        <Tip content={t("code_module.reload")}>
           <button
             type="button"
             onClick={onRefresh}

package/src/interfaces/web/src/components/code/CodeFileTree.tsx

@@ -4,6 +4,7 @@ import { cn } from "../../lib/cn";
 import { Empty, Spinner } from "../ui";
 import { Tip } from "../ui/tip";
 import { http } from "../../lib/http";
+import { t } from "../../i18n";
 
 interface FileNode {
   name: string;
@@ -164,7 +165,7 @@ export function CodeFileTree({
       <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2">
         <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">Archivos</span>
         <div className="flex items-center gap-0.5">
-          <Tip content="Colapsar todo">
+          <Tip content={t("code_module.tree_collapse_all")}>
             <button
               type="button"
               onClick={collapseAll}
@@ -174,7 +175,7 @@ export function CodeFileTree({
               <ChevronsUpDown className="size-3" />
             </button>
           </Tip>
-          <Tip content="Recargar">
+          <Tip content={t("code_module.reload")}>
             <button
               type="button"
               onClick={() => void loadFiles()}

package/src/interfaces/web/src/components/code/CodeFileViewer.tsx

@@ -3,6 +3,7 @@ import { Save, RotateCcw } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Spinner } from "../ui";
 import { Tip } from "../ui/tip";
+import { t } from "../../i18n";
 
 export function CodeFileViewer({
   path,
@@ -47,7 +48,7 @@ export function CodeFileViewer({
         </span>
         {editable && (
           <>
-            <Tip content="Descartar cambios">
+            <Tip content={t("code_module.discard_changes")}>
               <button
                 type="button"
                 onClick={() => setDraft(content)}
@@ -58,7 +59,7 @@ export function CodeFileViewer({
                 Descartar
               </button>
             </Tip>
-            <Tip content="Guardar (Cmd/Ctrl+S)">
+            <Tip content={t("code_module.save_shortcut_hint")}>
               <button
                 type="button"
                 onClick={() => void save()}

package/src/interfaces/web/src/components/code/CodeTerminal.tsx

@@ -3,6 +3,7 @@ import { Terminal as TerminalIcon, Eraser, X } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Tip } from "../ui/tip";
 import { http } from "../../lib/http";
+import { t } from "../../i18n";
 
 interface Line {
   type: "cmd" | "out" | "err";
@@ -83,7 +84,7 @@ export function CodeTerminal({
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1">
         <TerminalIcon className="size-3 text-muted-foreground" />
         <span className="flex-1 text-[11px] text-muted-foreground">Terminal</span>
-        <Tip content="Limpiar">
+        <Tip content={t("code_module.terminal_clear")}>
           <button
             type="button"
             onClick={() => setLines([])}
@@ -92,7 +93,7 @@ export function CodeTerminal({
             <Eraser className="size-3" />
           </button>
         </Tip>
-        <Tip content="Cerrar terminal">
+        <Tip content={t("code_module.terminal_close")}>
           <button
             type="button"
             onClick={() => onClose?.()}

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

@@ -5,6 +5,7 @@ import { useGlobalConfig } from "../../hooks/useGlobalConfig";
 import { flattenObject } from "../../lib/config-values";
 import { isSecretMarker } from "../../lib/secrets";
 import { Loading } from "../ui";
+import { t } from "../../i18n";
 
 export function GlobalConfigEditor() {
   const { config, isLoading, patch, mutate } = useGlobalConfig();
@@ -23,7 +24,7 @@ export function GlobalConfigEditor() {
 
   return (
     <Section
-      title="Config APX"
+      title={t("global_config.title")}
       description="Config general en ~/.apx/config.json. Editable por tabs; JSON queda separado."
     >
       <ConfigTabsEditor

package/src/interfaces/web/src/components/deck/WidgetRow.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Badge, Switch } from "../ui";
 import { cn } from "../../lib/cn";
 import type { DeckWidget } from "../../lib/api/deck";
+import { t } from "../../i18n";
 
 // Status badge tone mapping.
 function statusTone(s: DeckWidget["status"]): "success" | "muted" | "warning" | "info" {
@@ -63,7 +64,7 @@ export function WidgetRow({ widget, onToggle }: WidgetRowProps) {
     >
       {/* Source dot */}
       <span
-        title={widget.source === "apx" ? "Widget nativo APX" : "Widget externo"}
+        title={widget.source === "apx" ? t("deck_screen.widget_native") : t("deck_screen.widget_external")}
         className={cn(
           "size-2 shrink-0 rounded-full",
           widget.source === "apx" ? "bg-emerald-500" : "bg-sky-400"

package/src/interfaces/web/src/components/inputs/KeyValueList.tsx

@@ -0,0 +1,93 @@
+import { Plus, Trash2 } from "lucide-react";
+import { Button, Input } from "../ui";
+import { VarTokenInput } from "./VarTokenInput";
+
+// Editable list of {key,value} pairs. Used for MCP env (stdio) and headers
+// (http). Values are run through VarTokenInput so `${var.X}` references
+// render as inline badges and can be inserted via the picker.
+
+export interface KvRow {
+  key: string;
+  value: string;
+}
+
+export function rowsFromRecord(rec?: Record<string, string> | null): KvRow[] {
+  if (!rec) return [];
+  return Object.entries(rec).map(([key, value]) => ({ key, value: String(value) }));
+}
+
+export function recordFromRows(rows: KvRow[]): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const r of rows) {
+    if (!r.key.trim()) continue;
+    out[r.key.trim()] = r.value;
+  }
+  return out;
+}
+
+interface KeyValueListProps {
+  rows: KvRow[];
+  onChange: (next: KvRow[]) => void;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
+  varNames?: string[];
+  onCreateVar?: () => void;
+  emptyLabel?: string;
+}
+
+export function KeyValueList({
+  rows,
+  onChange,
+  keyPlaceholder = "KEY",
+  valuePlaceholder = "value",
+  varNames,
+  onCreateVar,
+  emptyLabel,
+}: KeyValueListProps) {
+  const update = (i: number, patch: Partial<KvRow>) => {
+    const next = rows.slice();
+    next[i] = { ...next[i], ...patch };
+    onChange(next);
+  };
+  const remove = (i: number) => onChange(rows.filter((_, j) => j !== i));
+  const add = () => onChange([...rows, { key: "", value: "" }]);
+
+  return (
+    <div className="space-y-2">
+      {rows.length === 0 && emptyLabel && (
+        <p className="text-[11px] text-muted-foreground">{emptyLabel}</p>
+      )}
+      {rows.map((row, i) => (
+        <div key={i} className="flex items-start gap-2">
+          <Input
+            value={row.key}
+            onChange={(e) => update(i, { key: e.target.value })}
+            placeholder={keyPlaceholder}
+            className="w-40 font-mono text-xs"
+          />
+          <div className="flex-1">
+            <VarTokenInput
+              value={row.value}
+              onChange={(v) => update(i, { value: v })}
+              placeholder={valuePlaceholder}
+              varNames={varNames}
+              onCreateVar={onCreateVar}
+            />
+          </div>
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            onClick={() => remove(i)}
+            aria-label="quitar fila"
+          >
+            <Trash2 size={13} />
+          </Button>
+        </div>
+      ))}
+      <Button type="button" size="sm" variant="ghost" onClick={add}>
+        <Plus size={12} /> Agregar fila
+      </Button>
+    </div>
+  );
+}