@agentprojectcontext/apx 1.24.0 → 1.27.1

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

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Section } from "../Section";
+import { Button, Empty, Loading } from "../ui";
+import { useToast } from "../Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { ENGINE_OPTIONS } from "./providers/typeStyles";
+import { ProviderCard } from "./providers/ProviderCard";
+import { ProviderModal, type ProviderSaveResult } from "./providers/ProviderModal";
+import type { Provider } from "./providers/types";
+import { t } from "../../i18n";
+
+const KNOWN_ENGINES = new Set(ENGINE_OPTIONS.map((o) => o.value));
+
+function toProvider(slug: string, v: Record<string, unknown>): Provider {
+  const engine = (typeof v.engine === "string" && v.engine) || (KNOWN_ENGINES.has(slug as any) ? slug : "custom");
+  return {
+    slug,
+    name: typeof v.name === "string" ? v.name : undefined,
+    engine,
+    base_url: typeof v.base_url === "string" ? v.base_url : undefined,
+    api_key: typeof v.api_key === "string" ? v.api_key : undefined,
+    default_model: typeof v.default_model === "string" ? v.default_model : undefined,
+    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,
+    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,
+  };
+}
+
+export function EnginesPanel() {
+  const toast = useToast();
+  const { config, isLoading, patch, mutate } = useGlobalConfig();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState<Provider | null>(null);
+
+  if (isLoading) return <Loading />;
+
+  const engines = (config.engines || {}) as unknown as Record<string, Record<string, unknown>>;
+  const providers = Object.entries(engines).map(([slug, v]) => toProvider(slug, v || {}));
+  const slugs = providers.map((p) => p.slug);
+
+  const openCreate = () => { setEditing(null); setModalOpen(true); };
+  const openEdit = (p: Provider) => { setEditing(p); setModalOpen(true); };
+
+  const save = async ({ provider, apiKeyValue, raw }: ProviderSaveResult) => {
+    // JSON mode: replace the whole engines.<slug> block with the parsed object.
+    if (raw) {
+      await patch({ [`engines.${provider.slug}`]: raw });
+      toast.success("Provider guardado (JSON).");
+      mutate();
+      return;
+    }
+    const base = `engines.${provider.slug}`;
+    const set: Record<string, unknown> = {
+      [`${base}.name`]: provider.name,
+      [`${base}.engine`]: provider.engine,
+      [`${base}.is_active`]: provider.is_active !== false,
+      [`${base}.default_temperature`]: provider.default_temperature,
+      [`${base}.default_max_tokens`]: provider.default_max_tokens,
+    };
+    const unset: string[] = [];
+    const opt = (key: string, val: unknown) => { if (val === undefined || val === "" ) unset.push(`${base}.${key}`); else set[`${base}.${key}`] = val; };
+    opt("base_url", provider.base_url);
+    opt("default_model", provider.default_model);
+    opt("context_limit_tokens", provider.context_limit_tokens);
+    opt("pricing", provider.pricing);
+    opt("model_context_limits", provider.model_context_limits);
+    if (apiKeyValue) set[`${base}.api_key`] = apiKeyValue;
+
+    await patch(set, unset);
+    toast.success("Provider guardado.");
+    mutate();
+  };
+
+  const toggle = async (p: Provider) => {
+    try {
+      await patch({ [`engines.${p.slug}.is_active`]: !(p.is_active !== false) });
+      mutate();
+    } catch (e) { toast.error((e as Error).message); }
+  };
+
+  const remove = async (p: Provider) => {
+    if (!confirm(`Borrar provider ${p.name || p.slug}?`)) return;
+    try {
+      await patch(undefined, [`engines.${p.slug}`]);
+      toast.success("Provider borrado.");
+      mutate();
+    } catch (e) { toast.error((e as Error).message); }
+  };
+
+  return (
+    <Section
+      title="Proveedores"
+      description="Proveedores LLM (API). Cada provider usa un engine/adapter (openai, ollama, …) con su key y URL."
+      action={<Button size="sm" variant="primary" onClick={openCreate}><Plus size={14} /> Nuevo provider</Button>}
+    >
+      {providers.length === 0 ? (
+        <Empty>Sin providers. Agregá uno con el botón de arriba.</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)} />
+          ))}
+          <button
+            type="button"
+            onClick={openCreate}
+            className="flex min-h-[120px] flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border text-muted-fg transition-colors hover:border-muted-fg/60 hover:text-foreground"
+          >
+            <Plus size={20} />
+            <span className="text-sm font-medium">Agregar provider</span>
+          </button>
+        </div>
+      )}
+
+      <ProviderModal
+        open={modalOpen}
+        initial={editing}
+        existingSlugs={slugs}
+        onClose={() => { setModalOpen(false); setEditing(null); }}
+        onSave={save}
+      />
+    </Section>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { Section } from "../Section";
+import { Button, Empty, Field, Input, Loading, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { useIdentity } from "../../hooks/useIdentity";
+import { t } from "../../i18n";
+import type { Identity } from "../../types/daemon";
+
+const LANGS = ["es", "en", "pt", "fr", "it", "de"] as const;
+
+export function IdentityPanel() {
+  const toast = useToast();
+  const { identity, isLoading, save } = useIdentity();
+  const [draft, setDraft] = useState<Identity>({});
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => { setDraft(identity); }, [identity]);
+
+  if (isLoading) return <Loading />;
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      await save({
+        owner_name:    draft.owner_name,
+        owner_context: draft.owner_context,
+        language:      draft.language,
+        timezone:      draft.timezone,
+      });
+      toast.success(t("settings.identity.saved"));
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Section title={t("settings.identity.title")} description={t("settings.identity.subtitle")}>
+      {!identity ? <Empty>{t("common.none_yet")}</Empty> : null}
+      <div className="grid grid-cols-2 gap-3">
+        <Field label={t("settings.identity.owner_name")}>
+          <Input value={draft.owner_name || ""} onChange={(e) => setDraft({ ...draft, owner_name: e.target.value })} />
+        </Field>
+        <Field label={t("settings.identity.language")}>
+          <UiSelect
+            value={draft.language || "es"}
+            onChange={(v) => setDraft({ ...draft, language: v })}
+            options={LANGS.map((l) => ({ value: l, label: l }))}
+          />
+        </Field>
+        <Field label={t("settings.identity.timezone")} hint="ej. America/Argentina/Buenos_Aires">
+          <Input value={draft.timezone || ""} onChange={(e) => setDraft({ ...draft, timezone: e.target.value })} />
+        </Field>
+      </div>
+      <div className="mt-3">
+        <Field label={t("settings.identity.owner_context")} hint="Quién sos, en qué trabajás, qué le interesa al agente saber de vos.">
+          <Textarea
+            rows={3}
+            value={draft.owner_context || ""}
+            onChange={(e) => setDraft({ ...draft, owner_context: e.target.value })}
+          />
+        </Field>
+      </div>
+      <div className="mt-4">
+        <Button variant="primary" loading={busy} onClick={submit}>{t("common.save")}</Button>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,226 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Database, Sparkles } from "lucide-react";
+import { Section } from "../Section";
+import { Button, Field, Input, Loading, Badge } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { Embeddings, type EmbedMode } from "../../lib/api/embeddings";
+
+// Memory / RAG embeddings configuration. Mirrors the Voice (TTS/STT) panel:
+// pick the provider + model for the cross-channel memory retriever. Persists
+// under config.memory.embeddings.* via the admin config PATCH. Switching
+// provider/model changes the embedder space, so a "Reindexar" action rebuilds
+// the vector store under the new embedder.
+
+const PROVIDER_OPTIONS = [
+  { value: "auto", label: "Automático (cadena: Ollama → Gemini → OpenAI → offline)" },
+  { value: "ollama", label: "Ollama — local, sin API key (nomic-embed-text)" },
+  { value: "gemini", label: "Gemini — free tier con key (text-embedding-004)" },
+  { value: "openai", label: "OpenAI — text-embedding-3-small (cloud)" },
+  { value: "tf", label: "Offline (term-frequency, sin modelo — degradado)" },
+];
+
+const MODE_OPTIONS = [
+  { value: "chain", label: "Cadena (fallback automático)" },
+  { value: "single", label: "Único (usa solo el elegido)" },
+];
+
+interface MemoryCfg {
+  embeddings?: {
+    provider?: string;
+    mode?: EmbedMode;
+    ollama?: { model?: string; base_url?: string };
+    openai?: { api_key?: string; model?: string; base_url?: string };
+    gemini?: { api_key?: string; model?: string };
+  };
+}
+
+const isMarker = (v: string) => v.startsWith("***");
+
+export function MemoryPanel() {
+  const toast = useToast();
+  const { config, isLoading, patch } = useGlobalConfig();
+  const { data: providers, mutate: mutateProviders } = useSWR(
+    "/embeddings/providers",
+    () => Embeddings.providers()
+  );
+  const [busy, setBusy] = useState(false);
+  const [testResult, setTestResult] = useState<string | null>(null);
+
+  if (isLoading) return <Loading />;
+
+  const mem = (config as unknown as { memory?: MemoryCfg }).memory || {};
+  const emb = mem.embeddings || {};
+  const provider = providers?.configured_provider || emb.provider || "auto";
+  const mode: EmbedMode = providers?.mode || emb.mode || "chain";
+  const engines = providers?.engines || [];
+
+  const apply = async (set: Record<string, unknown>) => {
+    setBusy(true);
+    try {
+      await patch(set);
+      await mutateProviders();
+    } catch (e) {
+      toast.error(`No se pudo guardar: ${(e as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const runTest = async () => {
+    setBusy(true);
+    setTestResult(null);
+    try {
+      const r = await Embeddings.test({});
+      setTestResult(`${r.embedder} · dim ${r.dim} · ${r.ms}ms`);
+      toast.success(`Embedding OK con ${r.embedder}`);
+    } catch (e) {
+      toast.error(`Falló el test: ${(e as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const runReindex = async () => {
+    setBusy(true);
+    try {
+      const r = await Embeddings.reindex();
+      toast.success(`Reindexado: ${r.indexed} chunks (limpiados ${r.cleared}).`);
+    } catch (e) {
+      toast.error(`Falló el reindex: ${(e as Error).message}`);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Section
+        title="Embeddings (RAG)"
+        description="Modelo que vectoriza el historial de todos los canales para la memoria relevante. Igual que TTS/STT: elegí proveedor y modelo. 'Automático' prueba local primero y cae al offline si no hay nada."
+      >
+        <div className="space-y-3">
+          <Field label="Proveedor" hint="Ollama es local y gratis. Gemini/OpenAI usan la API key de su sección en Modelos (o la de acá abajo).">
+            <UiSelect
+              value={provider}
+              onChange={(v) => apply({ "memory.embeddings.provider": v })}
+              options={PROVIDER_OPTIONS}
+              disabled={busy}
+              className="max-w-xl"
+            />
+          </Field>
+
+          <Field label="Modo de selección" hint="Cadena cae al siguiente si uno falla; Único usa exactamente el proveedor elegido.">
+            <UiSelect
+              value={mode}
+              onChange={(v) => apply({ "memory.embeddings.mode": v })}
+              options={MODE_OPTIONS}
+              disabled={busy}
+              className="max-w-md"
+            />
+          </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 ? "disponible" : "no disp."}
+              </Badge>
+            ))}
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 pt-1">
+            <Button variant="secondary" onClick={runTest} loading={busy}>
+              <Sparkles size={14} /> Probar embedding
+            </Button>
+            <Button variant="secondary" onClick={runReindex} loading={busy}>
+              <Database size={14} /> Reindexar memoria
+            </Button>
+            {testResult && <span className="text-sm text-muted-foreground">{testResult}</span>}
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Ollama (local)" description="Sin API key. Corre nomic-embed-text en tu Ollama local o cloud.">
+        <Field label="Modelo">
+          <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="Base URL" hint='Vacío usa engines.ollama.base_url (por defecto http://localhost:11434).'>
+          <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="OpenAI" description="text-embedding-3-small (1536 dims) u otro modelo compatible.">
+        <Field label="Modelo">
+          <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="API key" hint="Vacío reusa engines.openai.api_key. Dejalo en blanco para no tocar la guardada.">
+          <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="Gemini" description="text-embedding-004 (768 dims). Free tier con API key de Google.">
+        <Field label="Modelo">
+          <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="API key" hint="Vacío reusa engines.gemini.api_key.">
+          <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>
+    </div>
+  );
+}

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

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Copy } from "lucide-react";
+import { Dialog, Button, Spinner } from "../ui";
+import { Qr } from "../common/Qr";
+import { useToast } from "../Toast";
+import { Pair, HttpError } from "../../lib/api";
+import type { PairInit } from "../../types/daemon";
+import { t } from "../../i18n";
+
+function pickLanUrl(urls: string[]): string {
+  return urls.find((u) => !u.includes("127.0.0.1") && !u.includes("localhost"))
+    || urls[0]
+    || window.location.origin;
+}
+
+export function PairDeviceDialog({
+  open,
+  onClose,
+  onPaired,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onPaired: () => void;
+}) {
+  const toast = useToast();
+  const [init, setInit] = useState<PairInit | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [secsLeft, setSecsLeft] = useState(0);
+  const [done, setDone] = useState(false);
+  const pollRef = useRef<number | null>(null);
+
+  const start = useCallback(async () => {
+    setInit(null); setError(null); setDone(false);
+    try {
+      const res = await Pair.init();
+      setInit(res);
+      setSecsLeft(Math.round((res.ttl_ms || 90_000) / 1000));
+    } catch (e) {
+      if (e instanceof HttpError && e.status === 403) setError(t("settings.devices_pair_localhost_only"));
+      else setError((e as Error).message);
+    }
+  }, []);
+
+  // (Re)start when the dialog opens; tear down on close.
+  useEffect(() => {
+    if (open) void start();
+    else { setInit(null); setError(null); setDone(false); }
+  }, [open, start]);
+
+  // Countdown.
+  useEffect(() => {
+    if (!init || done) return;
+    if (secsLeft <= 0) return;
+    const id = window.setTimeout(() => setSecsLeft((s) => s - 1), 1000);
+    return () => window.clearTimeout(id);
+  }, [init, secsLeft, done]);
+
+  // Poll for confirmation.
+  useEffect(() => {
+    if (!open || !init || done) return;
+    let alive = true;
+    const tick = async () => {
+      try {
+        const s = await Pair.status(init.pairing_id);
+        if (!alive) return;
+        if (s.status === "confirmed") {
+          setDone(true);
+          toast.success(t("settings.devices_pair_done"));
+          onPaired();
+          window.setTimeout(() => { if (alive) onClose(); }, 900);
+          return;
+        }
+        if (s.status === "expired" || s.status === "unknown") { setSecsLeft(0); return; }
+      } catch { /* transient */ }
+      pollRef.current = window.setTimeout(tick, 1500);
+    };
+    pollRef.current = window.setTimeout(tick, 1500);
+    return () => { alive = false; if (pollRef.current) window.clearTimeout(pollRef.current); };
+  }, [open, init, done, onClose, onPaired, toast]);
+
+  const expired = !!init && !done && secsLeft <= 0;
+  const lanUrl = init ? pickLanUrl(init.lan_urls) : "";
+  const scanUrl = init ? `${lanUrl}/#pair=${init.pairing_id}` : "";
+
+  const copy = async (text: string, msg: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(msg);
+    } catch {
+      toast.error(text);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("settings.devices_pair_title")}
+      description={t("settings.devices_pair_desc")}
+      footer={<Button variant="secondary" onClick={onClose}>{t("common.close")}</Button>}
+    >
+      {error && (
+        <p className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">{error}</p>
+      )}
+
+      {!error && !init && (
+        <div className="flex items-center gap-2 py-8 text-sm text-muted-fg">
+          <Spinner /> {t("common.loading")}
+        </div>
+      )}
+
+      {!error && init && (
+        <div className="flex flex-col items-center gap-4">
+          <div className={expired ? "opacity-40" : ""}>
+            <Qr value={scanUrl} size={196} />
+          </div>
+
+          {done ? (
+            <p className="text-sm font-medium text-emerald-500">{t("settings.devices_pair_done")}</p>
+          ) : expired ? (
+            <div className="flex flex-col items-center gap-2">
+              <p className="text-sm text-muted-fg">{t("settings.devices_pair_expired")}</p>
+              <Button variant="primary" onClick={() => void start()}>{t("settings.devices_pair_regen")}</Button>
+            </div>
+          ) : (
+            <>
+              <p className="text-center text-xs text-muted-fg">{t("settings.devices_pair_scan")}</p>
+              <div className="flex items-center gap-2 text-xs text-muted-fg">
+                <Spinner size={12} />
+                <span>{t("settings.devices_pair_waiting")}</span>
+                <span className="tabular-nums">· {t("settings.devices_pair_expires", { s: secsLeft })}</span>
+              </div>
+
+              <div className="w-full space-y-3 border-t border-border pt-3">
+                <div className="space-y-1">
+                  <p className="text-xs text-muted-fg">{t("settings.devices_pair_link")}</p>
+                  <div className="flex items-stretch gap-2">
+                    <code className="min-w-0 flex-1 break-all rounded-md bg-muted px-3 py-2 text-xs">
+                      {scanUrl}
+                    </code>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => copy(scanUrl, t("settings.devices_pair_copied"))}
+                      title={t("settings.devices_pair_copy")}
+                    >
+                      <Copy size={14} />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-1">
+                  <p className="text-xs text-muted-fg">{t("settings.devices_pair_code")}</p>
+                  <div className="flex items-stretch gap-2">
+                    <code className="min-w-0 flex-1 break-all rounded-md bg-muted px-3 py-2 text-center text-sm">
+                      {init.pairing_id}
+                    </code>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => copy(init.pairing_id, t("settings.devices_pair_copied_code"))}
+                      title={t("settings.devices_pair_copy")}
+                    >
+                      <Copy size={14} />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </Dialog>
+  );
+}