@agentprojectcontext/apx 1.24.0 → 1.27.1

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

@@ -0,0 +1,211 @@
+// Shared UI primitives. These are thin adapters over the shadcn/base-ui
+// components in ./ui/* — they keep a small, stable API (variant/tone/size,
+// Dialog open/onClose, Field label/hint) so call sites don't churn, while the
+// actual rendering comes from base-ui (proper focus, portaling, a11y).
+import type { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from "react";
+import { cn } from "../lib/cn";
+import { Button as SButton } from "./ui/button";
+import { Input as SInput } from "./ui/input";
+import { Textarea as STextarea } from "./ui/textarea";
+import { Badge as SBadge } from "./ui/badge";
+import { Switch as SSwitch } from "./ui/switch";
+import { Spinner as SSpinner } from "./ui/spinner";
+import { Dialog as DialogRoot, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog";
+
+// ── Button ──────────────────────────────────────────────────────────────────
+type Variant = "primary" | "secondary" | "ghost" | "destructive";
+type Size = "sm" | "md";
+
+const V_MAP = { primary: "default", secondary: "outline", ghost: "ghost", destructive: "destructive" } as const;
+const S_MAP = { sm: "sm", md: "default" } as const;
+
+export function Button({
+  variant = "secondary",
+  size = "md",
+  loading,
+  className,
+  children,
+  disabled,
+  type = "button",
+  ...rest
+}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant; size?: Size; loading?: boolean }) {
+  return (
+    <SButton
+      type={type}
+      variant={V_MAP[variant]}
+      size={S_MAP[size]}
+      disabled={disabled || loading}
+      className={className}
+      {...rest}
+    >
+      {loading ? <Spinner size={14} /> : null}
+      {children}
+    </SButton>
+  );
+}
+
+// ── Inputs ──────────────────────────────────────────────────────────────────
+
+export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
+  return <SInput {...props} />;
+}
+
+export function Textarea(props: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <STextarea {...props} />;
+}
+
+// Native select kept for legacy call sites; new code uses UiSelect (base-ui).
+export function Select(props: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...props}
+      className={cn(
+        "h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        props.className,
+      )}
+    />
+  );
+}
+
+// ── Field wrapper ───────────────────────────────────────────────────────────
+
+export function Field({
+  label,
+  hint,
+  badge,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  badge?: string;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block space-y-1">
+      <span className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+        {label}
+        {badge && (
+          <span className="rounded bg-muted px-1 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-muted-foreground">{badge}</span>
+        )}
+      </span>
+      {children}
+      {hint && <span className="block text-[11px] text-muted-foreground/70">{hint}</span>}
+    </label>
+  );
+}
+
+// ── Switch ────────────────────────────────────────────────────────────────────
+
+export function Switch({
+  checked,
+  onChange,
+  label,
+  disabled,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+}) {
+  return (
+    <label className={cn("inline-flex items-center gap-2", disabled && "opacity-50")}>
+      <SSwitch checked={checked} onCheckedChange={onChange} disabled={disabled} />
+      {label && <span className="text-sm">{label}</span>}
+    </label>
+  );
+}
+
+// ── Badge ───────────────────────────────────────────────────────────────────
+
+type Tone = "muted" | "success" | "warning" | "danger" | "info";
+
+export function Badge({
+  children,
+  tone = "muted",
+  className,
+}: {
+  children: ReactNode;
+  tone?: Tone;
+  className?: string;
+}) {
+  // muted/danger use built-in variants; the colored tones use outline + color.
+  const variant = tone === "danger" ? "destructive" : tone === "muted" ? "secondary" : "outline";
+  const toneClass: Record<Tone, string> = {
+    muted: "",
+    danger: "",
+    success: "text-emerald-400 border-emerald-500/30",
+    warning: "text-amber-400 border-amber-500/30",
+    info: "text-sky-400 border-sky-500/30",
+  };
+  return (
+    <SBadge variant={variant} className={cn("rounded-md", toneClass[tone], className)}>
+      {children}
+    </SBadge>
+  );
+}
+
+// ── Dialog (base-ui) ──────────────────────────────────────────────────────────
+// Uses the base-ui dialog → proper focus trap + portaling (nested Select/Combobox
+// popups render correctly). Fixed header/footer, scrollable content.
+
+export function Dialog({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+}: {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl";
+}) {
+  const sizes = { sm: "sm:max-w-md", md: "sm:max-w-lg", lg: "sm:max-w-2xl", xl: "sm:max-w-4xl" };
+  return (
+    <DialogRoot open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent
+        className={cn("flex max-h-[88vh] w-full flex-col gap-0 p-0", sizes[size])}
+      >
+        {(title || description) && (
+          <DialogHeader className="shrink-0 border-b border-border px-5 py-4 pr-12">
+            {title && <DialogTitle>{title}</DialogTitle>}
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+        )}
+        <div className="min-h-0 flex-1 overflow-auto px-5 py-4">{children}</div>
+        {footer && (
+          <div className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-5 py-4">{footer}</div>
+        )}
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+// ── Spinner ─────────────────────────────────────────────────────────────────
+
+export function Spinner({ size = 14 }: { size?: number }) {
+  return <SSpinner style={{ width: size, height: size }} />;
+}
+
+// ── Empty / Loading helpers ─────────────────────────────────────────────────
+
+export function Empty({ children }: { children: ReactNode }) {
+  return (
+    <div className="rounded-lg border border-dashed border-border bg-muted/20 px-4 py-6 text-center text-sm text-muted-foreground">
+      {children}
+    </div>
+  );
+}
+
+export function Loading({ label = "Cargando…" }: { label?: string }) {
+  return (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <Spinner /> {label}
+    </div>
+  );
+}

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

@@ -0,0 +1,197 @@
+import { CheckCircle2, ChevronDown, ChevronUp, Circle, Settings2 } from "lucide-react";
+import { Badge, Button, Switch } from "../ui";
+import { StatusDot } from "../Section";
+import { cn } from "../../lib/cn";
+import {
+  TTS_PROVIDER_META,
+  type TtsEngineInfo,
+  type TtsMode,
+} from "../../lib/api/voice";
+
+// TTS engine selector. Two modes:
+//   chain  — ordered fallback router; toggles enable/disable engines and the
+//            arrows reorder the chain.
+//   single — use exactly one default engine (radio); the rest stay configured
+//            for explicit overrides (e.g. the tester).
+// Availability/configured/enabled all come from the daemon (/tts/providers).
+
+interface Props {
+  engines: TtsEngineInfo[];
+  order: string[];            // effective chain order from the daemon
+  mode: TtsMode;
+  configuredProvider: string; // single-mode default engine id ("auto" = none)
+  onSetMode: (mode: TtsMode) => void;
+  onSetDefault: (id: string) => void;
+  onToggleEnabled: (id: string, enabled: boolean) => void;
+  onReorder: (nextOrder: string[]) => void;
+  onConfigure: (id: string) => void;
+  busy?: boolean;
+}
+
+export function VoiceProviderList({
+  engines,
+  order,
+  mode,
+  configuredProvider,
+  onSetMode,
+  onSetDefault,
+  onToggleEnabled,
+  onReorder,
+  onConfigure,
+  busy,
+}: Props) {
+  const byId = new Map(engines.map((e) => [e.id, e]));
+  // Render in the daemon's effective order, then any extras it didn't list.
+  const ids = [
+    ...order.filter((id) => byId.has(id)),
+    ...engines.map((e) => e.id).filter((id) => !order.includes(id)),
+  ];
+  const isChain = mode === "chain";
+
+  const move = (id: string, dir: -1 | 1) => {
+    const idx = ids.indexOf(id);
+    const next = idx + dir;
+    if (idx < 0 || next < 0 || next >= ids.length) return;
+    const reordered = [...ids];
+    [reordered[idx], reordered[next]] = [reordered[next], reordered[idx]];
+    onReorder(reordered);
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* Mode switch: router chain vs single default. */}
+      <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-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."}
+            </div>
+          </div>
+          <div className="flex shrink-0 overflow-hidden rounded-md border border-border" role="group">
+            <button
+              type="button"
+              onClick={() => onSetMode("chain")}
+              disabled={busy}
+              data-testid="voice-mode-chain"
+              className={cn(
+                "px-3 py-1.5 text-xs font-medium transition-colors",
+                isChain ? "bg-emerald-500/15 text-emerald-300" : "text-muted-fg hover:text-fg",
+              )}
+            >
+              Cadena (router)
+            </button>
+            <button
+              type="button"
+              onClick={() => onSetMode("single")}
+              disabled={busy}
+              data-testid="voice-mode-single"
+              className={cn(
+                "border-l border-border px-3 py-1.5 text-xs font-medium transition-colors",
+                !isChain ? "bg-emerald-500/15 text-emerald-300" : "text-muted-fg hover:text-fg",
+              )}
+            >
+              Solo el motor por defecto
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {ids.map((id, idx) => {
+          const e = byId.get(id)!;
+          const meta = TTS_PROVIDER_META[id] || { name: id, note: "" };
+          const isDefault = !isChain && configuredProvider === id;
+          // mock is the guaranteed fallback — always on, can't be turned off.
+          const lockedOn = id === "mock";
+          return (
+            <div
+              key={id}
+              data-testid={`voice-provider-${id}`}
+              className={cn(
+                "flex items-center gap-3 rounded-lg border px-3 py-2.5",
+                isDefault ? "border-emerald-500/50 bg-emerald-500/10" : "border-border",
+                isChain && !lockedOn && !e.enabled && "opacity-60",
+              )}
+            >
+              {isChain && (
+                <div className="flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() => move(id, -1)}
+                    disabled={busy || idx === 0}
+                    aria-label="Subir"
+                    data-testid={`voice-provider-${id}-up`}
+                    className="text-muted-fg hover:text-fg disabled:opacity-30"
+                  >
+                    <ChevronUp className="size-3.5" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => move(id, 1)}
+                    disabled={busy || idx === ids.length - 1}
+                    aria-label="Bajar"
+                    data-testid={`voice-provider-${id}-down`}
+                    className="text-muted-fg hover:text-fg disabled:opacity-30"
+                  >
+                    <ChevronDown className="size-3.5" />
+                  </button>
+                </div>
+              )}
+
+              <StatusDot ok={e.available ? true : e.configured ? false : null} />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{meta.name}</span>
+                  {meta.local && <Badge tone="info">local</Badge>}
+                  {e.available ? (
+                    <Badge tone="success">disponible</Badge>
+                  ) : e.configured ? (
+                    <Badge tone="warning">configurado, no disponible</Badge>
+                  ) : (
+                    <Badge tone="muted">sin configurar</Badge>
+                  )}
+                  {isDefault && <Badge tone="success">por defecto</Badge>}
+                </div>
+                <div className="truncate text-xs text-muted-fg">{meta.note}</div>
+              </div>
+
+              <div className="flex shrink-0 items-center gap-2">
+                {isChain ? (
+                  <Switch
+                    checked={lockedOn ? true : e.enabled}
+                    onChange={(v) => onToggleEnabled(id, v)}
+                    disabled={busy || lockedOn}
+                  />
+                ) : (
+                  !isDefault && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => onSetDefault(id)}
+                      disabled={busy}
+                      data-testid={`voice-provider-${id}-default`}
+                    >
+                      <Circle className="size-3.5" /> Usar por defecto
+                    </Button>
+                  )
+                )}
+                {isDefault && <CheckCircle2 className="size-4 text-emerald-400" />}
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={() => onConfigure(id)}
+                  data-testid={`voice-provider-${id}-config`}
+                >
+                  <Settings2 className="size-3.5" /> Configurar
+                </Button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+import { useEffect, useState } from "react";
+import { Button, Dialog, Field, Input, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { isSecretMarker, secretSuffix } from "../../lib/secrets";
+import {
+  ELEVENLABS_MODELS,
+  GEMINI_TTS_VOICES,
+  OPENAI_TTS_MODELS,
+  OPENAI_TTS_VOICES,
+  TTS_PROVIDER_META,
+  type ElevenLabsConfig,
+  type GeminiTtsConfig,
+  type OpenAiTtsConfig,
+  type PiperConfig,
+} from "../../lib/api/voice";
+
+// Per-provider settings. Saved as dotted-key patches under voice.tts.<id>.
+// Secrets (api_key) follow the EnginesPanel convention: a blank field keeps
+// the stored secret; the daemon ignores "*** set ***" markers on PATCH.
+
+export interface VoiceProviderSave {
+  /** dotted keys to set, e.g. { "voice.tts.openai.model": "tts-1-hd" } */
+  set: Record<string, unknown>;
+  /** dotted keys to clear */
+  unset: string[];
+}
+
+interface Props {
+  open: boolean;
+  providerId: string | null; // piper | elevenlabs | openai | gemini | mock
+  /** Current voice.tts.<id> block (may carry redacted secret markers). */
+  config: Record<string, unknown>;
+  onClose: () => void;
+  onSave: (r: VoiceProviderSave) => Promise<void>;
+}
+
+function str(v: unknown): string {
+  return typeof v === "string" ? v : v == null ? "" : String(v);
+}
+
+export function VoiceProviderModal({ open, providerId, config, onClose, onSave }: Props) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Field state (the api_key field is always blank on open — typing replaces).
+  const [apiKey, setApiKey] = useState("");
+  const [f, setF] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    if (!open || !providerId) return;
+    setError(null);
+    setApiKey("");
+    const c = config || {};
+    if (providerId === "piper") {
+      const p = c as PiperConfig;
+      setF({ bin: str(p.bin), model: str(p.model), speaker: str(p.speaker) });
+    } else if (providerId === "elevenlabs") {
+      const p = c as ElevenLabsConfig;
+      setF({ model: str(p.model), voice_id: str(p.voice_id), output_format: str(p.output_format) });
+    } else if (providerId === "openai") {
+      const p = c as OpenAiTtsConfig;
+      setF({ model: str(p.model) || "tts-1", voice: str(p.voice) || "alloy", format: str(p.format) || "mp3" });
+    } else if (providerId === "gemini") {
+      const p = c as GeminiTtsConfig;
+      setF({ model: str(p.model), voice: str(p.voice) || "Kore", style: str(p.style) });
+    } else {
+      setF({});
+    }
+  }, [open, providerId, config]);
+
+  if (!providerId) return null;
+
+  const meta = TTS_PROVIDER_META[providerId];
+  const base = `voice.tts.${providerId}`;
+  const up = (patch: Record<string, string>) => setF((s) => ({ ...s, ...patch }));
+
+  const hasSecret = providerId !== "piper" && providerId !== "mock";
+  const existingKey = hasSecret && isSecretMarker((config as { api_key?: unknown })?.api_key);
+  const keyPlaceholder = existingKey ? `…${secretSuffix((config as { api_key?: unknown })?.api_key) ?? ""} (ya seteada)` : "API key";
+
+  const submit = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const set: Record<string, unknown> = {};
+      const unset: string[] = [];
+      const opt = (key: string, val: string) => {
+        if (val.trim()) set[`${base}.${key}`] = val.trim();
+        else unset.push(`${base}.${key}`);
+      };
+
+      if (providerId === "piper") {
+        opt("bin", f.bin);
+        opt("model", f.model);
+        if (f.speaker.trim()) set[`${base}.speaker`] = f.speaker.trim();
+        else unset.push(`${base}.speaker`);
+      } else if (providerId === "elevenlabs") {
+        opt("model", f.model);
+        opt("voice_id", f.voice_id);
+        opt("output_format", f.output_format);
+      } else if (providerId === "openai") {
+        opt("model", f.model);
+        opt("voice", f.voice);
+        opt("format", f.format);
+      } else if (providerId === "gemini") {
+        opt("model", f.model);
+        opt("voice", f.voice);
+        opt("style", f.style);
+      }
+
+      // Only push a key the user actually typed (blank keeps the stored one).
+      if (hasSecret && apiKey.trim()) set[`${base}.api_key`] = apiKey.trim();
+
+      await onSave({ set, unset });
+      onClose();
+    } catch (e) {
+      setError((e as Error).message || "Error al guardar.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={`Configurar ${meta?.name || providerId}`}
+      description={meta?.note}
+      size="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>Cancelar</Button>
+          <Button variant="primary" onClick={submit} loading={busy} data-testid="voice-provider-save">Guardar</Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        {providerId === "piper" && (
+          <>
+            <Field label="Binario (bin)" hint="Ruta o nombre del CLI piper (PATH).">
+              <Input value={f.bin} onChange={(e) => up({ bin: e.target.value })} placeholder="piper" />
+            </Field>
+            <Field label="Modelo (.onnx)" hint="Ruta absoluta al modelo de voz piper.">
+              <Input value={f.model} onChange={(e) => up({ model: e.target.value })} placeholder="/abs/path/voz.onnx" />
+            </Field>
+            <Field label="Speaker (opcional)" hint="Id de hablante para modelos multi-voz.">
+              <Input value={f.speaker} onChange={(e) => up({ speaker: e.target.value })} placeholder="0" />
+            </Field>
+          </>
+        )}
+
+        {providerId === "elevenlabs" && (
+          <>
+            <Field label="API key" hint={existingKey ? "Dejá en blanco para mantener la actual." : "Se guarda como secreto. Env: ELEVENLABS_API_KEY"}>
+              <Input type="password" autoComplete="new-password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder={keyPlaceholder} />
+            </Field>
+            <Field label="Modelo">
+              <UiSelect value={f.model || ""} onChange={(v) => up({ model: v })} options={ELEVENLABS_MODELS.map((m) => ({ value: m, label: m }))} placeholder="eleven_multilingual_v2" />
+            </Field>
+            <Field label="Voice ID" hint="Id de la voz de ElevenLabs (vacío = default).">
+              <Input value={f.voice_id} onChange={(e) => up({ voice_id: e.target.value })} placeholder="EXAVITQu4vr4xnSDxMaL" />
+            </Field>
+            <Field label="Formato de salida">
+              <Input value={f.output_format} onChange={(e) => up({ output_format: e.target.value })} placeholder="mp3_44100_128" />
+            </Field>
+          </>
+        )}
+
+        {providerId === "openai" && (
+          <>
+            <Field label="API key" hint={existingKey ? "Dejá en blanco para mantener la actual." : "Se reusa engines.openai.api_key si la dejás en blanco. Env: OPENAI_API_KEY"}>
+              <Input type="password" autoComplete="new-password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder={keyPlaceholder} />
+            </Field>
+            <Field label="Modelo">
+              <UiSelect value={f.model || "tts-1"} onChange={(v) => up({ model: v })} options={OPENAI_TTS_MODELS.map((m) => ({ value: m, label: m }))} />
+            </Field>
+            <Field label="Voz">
+              <UiSelect value={f.voice || "alloy"} onChange={(v) => up({ voice: v })} options={OPENAI_TTS_VOICES.map((m) => ({ value: m, label: m }))} />
+            </Field>
+            <Field label="Formato">
+              <UiSelect value={f.format || "mp3"} onChange={(v) => up({ format: v })} options={["mp3", "opus", "aac", "flac", "wav"].map((m) => ({ value: m, label: m }))} />
+            </Field>
+          </>
+        )}
+
+        {providerId === "gemini" && (
+          <>
+            <Field label="API key" hint={existingKey ? "Dejá en blanco para mantener la actual." : "Se reusa engines.gemini.api_key si la dejás en blanco. Env: GEMINI_API_KEY"}>
+              <Input type="password" autoComplete="new-password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder={keyPlaceholder} />
+            </Field>
+            <Field label="Modelo" hint="TTS de Gemini sigue en preview.">
+              <Input value={f.model} onChange={(e) => up({ model: e.target.value })} placeholder="gemini-2.5-flash-preview-tts" />
+            </Field>
+            <Field label="Voz">
+              <UiSelect value={f.voice || "Kore"} onChange={(v) => up({ voice: v })} options={GEMINI_TTS_VOICES.map((m) => ({ value: m, label: m }))} />
+            </Field>
+            <Field label="Estilo (cómo querés que hable)" hint="Instrucción en lenguaje natural. Vacío = sin estilo. Ej: 'hablá en tono alegre y pausado'.">
+              <Textarea rows={2} value={f.style || ""} onChange={(e) => up({ style: e.target.value })} placeholder="hablá en tono alegre y enérgico" />
+            </Field>
+          </>
+        )}
+
+        {providerId === "mock" && (
+          <p className="text-sm text-muted-fg">
+            El motor <strong>mock</strong> genera un WAV silencioso de prueba. No tiene parámetros: sirve como fallback garantizado cuando no hay otro motor configurado.
+          </p>
+        )}
+
+        {error && <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">{error}</div>}
+      </div>
+    </Dialog>
+  );
+}