@agentprojectcontext/apx 1.24.0 → 1.27.1

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

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Cpu } from "lucide-react";
+import { Section } from "../Section";
+import { Button, Field, Loading, Textarea, Switch } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { useGlobalConfig, useSuperAgentConfig } from "../../hooks/useGlobalConfig";
+import { useIdentity } from "../../hooks/useIdentity";
+import { PERMISSION_MODES } from "../../constants";
+import { t } from "../../i18n";
+
+export function SuperAgentPanel() {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { superAgent, isLoading, mutate } = useSuperAgentConfig();
+  const { patch } = useGlobalConfig();
+  const { identity, save: saveIdentity } = useIdentity();
+
+  const [enabled, setEnabled] = useState(true);
+  const [system, setSystem] = useState("");
+  const [personality, setPersonality] = useState("");
+  const [perm, setPerm] = useState<string>("permiso");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!superAgent) return;
+    setEnabled(!!superAgent.enabled);
+    setSystem(superAgent.system || "");
+    setPerm(superAgent.permission_mode || "permiso");
+  }, [superAgent]);
+
+  useEffect(() => {
+    setPersonality(identity.personality || "");
+  }, [identity.personality]);
+
+  if (isLoading || !superAgent) return <Loading />;
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      await patch({
+        "super_agent.enabled":          enabled,
+        "super_agent.system":           system,
+        "super_agent.permission_mode":  perm,
+      }, ["super_agent.name"]);
+      await saveIdentity({ personality });
+      toast.success(t("settings.super_agent.saved"));
+      mutate();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Section title={t("settings.super_agent.title")} description="Comportamiento del super-agente. El modelo y la cadena de fallback se configuran en el Router de modelos.">
+      <div className="space-y-4">
+        <div className="flex items-center gap-3">
+          <Switch checked={enabled} onChange={setEnabled} label="Super-agente habilitado" />
+        </div>
+
+        {/* Model lives in the Router now — single source of truth. */}
+        <div className="flex items-center justify-between rounded-lg border border-border bg-muted/20 p-3">
+          <div className="min-w-0">
+            <div className="text-sm font-medium">Modelo activo (router)</div>
+            <div className="truncate font-mono text-xs text-muted-fg">{superAgent.model || "—"}</div>
+          </div>
+          <Button size="sm" variant="secondary" onClick={() => navigate("/p/0/models")}>
+            <Cpu size={13} /> Configurar en Modelos
+          </Button>
+        </div>
+
+        <Field label={t("settings.super_agent.permission_mode")}>
+          <UiSelect value={perm} onChange={setPerm} options={PERMISSION_MODES.map((m) => ({ value: m, label: m }))} />
+        </Field>
+        <Field label={t("settings.super_agent.personality")}>
+          <Textarea rows={2} value={personality} onChange={(e) => setPersonality(e.target.value)} />
+        </Field>
+        <Field label={t("settings.super_agent.system")} hint={t("settings.super_agent.system_hint")}>
+          <Textarea
+            rows={6}
+            className="font-mono text-xs"
+            value={system}
+            onChange={(e) => setSystem(e.target.value)}
+            placeholder="(Vacío = se usa el prompt base de core/agent/prompts/super-agent-base.md)"
+          />
+        </Field>
+
+        <Button variant="primary" loading={busy} onClick={submit}>{t("common.save")}</Button>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,90 @@
+// Lists every Telegram channel with its owner, route_to_agent and pinned
+// project, and lets the user add / edit / delete any of them. Pairs with
+// TelegramGlobalPanel (which edits the *default* channel inline) — this one
+// is the full list manager.
+
+import { useState } from "react";
+import { Plus, Send } from "lucide-react";
+import { Section } from "../Section";
+import { Badge, Button, Empty, Loading } from "../ui";
+import { useToast } from "../Toast";
+import { useTelegramChannels, useTelegramContacts } from "../../hooks/useTelegram";
+import { Telegram } from "../../lib/api";
+import { TelegramChannelDialog } from "../TelegramChannelDialog";
+import { TelegramSendDialog } from "../TelegramSendDialog";
+import { secretSuffix } from "../../lib/secrets";
+import { t } from "../../i18n";
+import type { TelegramChannel } from "../../types/daemon";
+
+export function TelegramChannelsPanel() {
+  const toast = useToast();
+  const { channels, isLoading, mutate } = useTelegramChannels();
+  const { contacts } = useTelegramContacts();
+
+  const [editing, setEditing] = useState<TelegramChannel | null>(null);
+  const [sendTarget, setSendTarget] = useState<TelegramChannel | null>(null);
+
+  // user_id → display name, so we can show "owner: Manu" instead of just the id.
+  const nameByUserId = new Map<string, string>();
+  for (const c of contacts) nameByUserId.set(String(c.user_id), c.name || `@${c.username || c.user_id}`);
+
+  const remove = async (name: string) => {
+    if (!confirm(t("telegram_channels.delete_confirm", { name }))) return;
+    try { await Telegram.channels.remove(name); toast.success(t("telegram_channels.removed")); mutate(); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  return (
+    <Section
+      title={t("telegram_channels.title")}
+      description={t("telegram_channels.desc")}
+      action={
+        <Button size="sm" onClick={() => setEditing({ name: "" })}>
+          <Plus size={14} /> {t("telegram_channels.new_btn")}
+        </Button>
+      }
+    >
+      {isLoading && <Loading />}
+      {!isLoading && channels.length === 0 && <Empty>{t("telegram_channels.empty")}</Empty>}
+      <ul className="space-y-2 text-sm">
+        {channels.map((c) => {
+          const ownerLabel = c.owner_user_id != null
+            ? (nameByUserId.get(String(c.owner_user_id)) || `user_id ${c.owner_user_id}`)
+            : t("telegram_channels.no_owner");
+          return (
+            <li key={c.name} className="rounded-md border border-border bg-muted/30 px-3 py-2">
+              <div className="flex items-center justify-between gap-2">
+                <span className="font-medium">{c.name}</span>
+                <div className="flex items-center gap-2">
+                  {c.project && <Badge tone="success">project = {c.project}</Badge>}
+                  <Button size="sm" variant="ghost" onClick={() => setSendTarget(c)}>
+                    <Send size={13} /> {t("admin.telegram_send_test")}
+                  </Button>
+                  <Button size="sm" variant="secondary" onClick={() => setEditing(c)}>{t("common.edit")}</Button>
+                  <Button size="sm" variant="destructive" onClick={() => remove(c.name)}>{t("common.delete")}</Button>
+                </div>
+              </div>
+              <div className="mt-1 grid grid-cols-2 gap-2 text-xs text-muted-fg">
+                <span>chat_id: {c.chat_id || "—"}</span>
+                <span>bot_token: {c.bot_token ? `…${secretSuffix(c.bot_token) ?? ""}` : "—"}</span>
+                <span>route_to_agent: {c.route_to_agent || "default APX"}</span>
+                <span>engine: {c.respond_with_engine ? "sí" : "no"}</span>
+                <span className="col-span-2">{t("telegram_channels.owner_label")} {ownerLabel}</span>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <TelegramChannelDialog
+        channel={editing}
+        onClose={() => setEditing(null)}
+        onSaved={() => { setEditing(null); mutate(); }}
+      />
+      <TelegramSendDialog
+        channel={sendTarget}
+        onClose={() => setSendTarget(null)}
+      />
+    </Section>
+  );
+}

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

@@ -0,0 +1,101 @@
+// Roster of known Telegram contacts (global, keyed by user_id) with inline
+// role assignment. Used in both Settings → Telegram → Contactos and in the
+// APX admin screen — shared so they can't drift apart.
+
+import { Section } from "../Section";
+import { Badge, Button, Empty, Loading, Select } from "../ui";
+import { useToast } from "../Toast";
+import { useTelegramContacts } from "../../hooks/useTelegram";
+import { Telegram } from "../../lib/api";
+import { t } from "../../i18n";
+import type { TelegramContact, TelegramRole } from "../../types/daemon";
+
+interface Props {
+  /** Render bare (no Section wrapper); useful when the parent already provides one. */
+  bare?: boolean;
+}
+
+export function TelegramContactsPanel({ bare = false }: Props) {
+  const toast = useToast();
+  const { contacts, roles, channelOwners, isLoading, mutate } = useTelegramContacts();
+
+  const ownerIds = new Set(
+    channelOwners.filter((o) => o.owner_user_id != null).map((o) => String(o.owner_user_id)),
+  );
+  // Built-in roles + any custom ones defined in config.
+  const roleNames = Array.from(new Set(["owner", "guest", ...Object.keys(roles)]));
+
+  const setRole = async (c: TelegramContact, role: string) => {
+    try {
+      await Telegram.contacts.patch(c.user_id, { role });
+      toast.success(`${c.name || c.user_id} → ${role}`);
+      mutate();
+    } catch (e) { toast.error((e as Error).message); }
+  };
+  const remove = async (c: TelegramContact) => {
+    if (!confirm(t("telegram_contacts.delete_confirm", { name: c.name || String(c.user_id) }))) return;
+    try { await Telegram.contacts.remove(c.user_id); toast.success(t("telegram_contacts.removed")); mutate(); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  const body = (
+    <>
+      {isLoading && <Loading />}
+      {!isLoading && contacts.length === 0 && (
+        <Empty>{t("telegram_contacts.empty")}</Empty>
+      )}
+      {contacts.length > 0 && (
+        <ul className="space-y-2 text-sm">
+          {contacts.map((c) => {
+            const isOwner = ownerIds.has(String(c.user_id));
+            const effectiveRole = isOwner ? "owner" : (c.role || "guest");
+            return (
+              <li key={String(c.user_id)} className="rounded-md border border-border bg-muted/30 px-3 py-2">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="min-w-0">
+                    <span className="font-medium">{c.name || "—"}</span>
+                    {c.username && <span className="ml-2 text-xs text-muted-fg">@{c.username}</span>}
+                    {isOwner && <Badge tone="success">{t("telegram_contacts.owner_badge")}</Badge>}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Select
+                      value={effectiveRole}
+                      disabled={isOwner}
+                      onChange={(e) => setRole(c, e.target.value)}
+                      title={isOwner ? t("telegram_contacts.owner_hint") : t("telegram_contacts.assign_role")}
+                    >
+                      {roleNames.map((r) => <option key={r} value={r}>{r}</option>)}
+                    </Select>
+                    <Button size="sm" variant="destructive" onClick={() => remove(c)}>{t("common.delete")}</Button>
+                  </div>
+                </div>
+                <div className="mt-1 grid grid-cols-3 gap-2 text-xs text-muted-fg">
+                  <span>user_id: {String(c.user_id)}</span>
+                  <span>{t("telegram_contacts.last_seen")} {c.last_seen ? c.last_seen.slice(0, 10) : "—"}</span>
+                  <span>{roleToolsLabel(roles[effectiveRole])}</span>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </>
+  );
+
+  if (bare) return body;
+  return (
+    <Section
+      title={t("telegram_contacts.title")}
+      description={t("telegram_contacts.desc")}
+    >
+      {body}
+    </Section>
+  );
+}
+
+function roleToolsLabel(role: TelegramRole | undefined): string {
+  if (!role || role.tools === undefined) return "";
+  if (role.tools === "*") return t("telegram_contacts.tools_all");
+  if (Array.isArray(role.tools)) return role.tools.length ? `${t("telegram_contacts.tools_label")} ${role.tools.join(", ")}` : t("telegram_contacts.tools_none");
+  return "";
+}

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

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { Section } from "../Section";
+import { Button, Field, Input, Loading, Switch } from "../ui";
+import { useToast } from "../Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { t } from "../../i18n";
+import { secretSuffix } from "../../lib/secrets";
+
+/**
+ * Edits the "default" Telegram channel — the daemon stores channels as an
+ * array under telegram.channels. We treat the first one named "default" (or
+ * the first item) as the global default that the rest of the UI references.
+ */
+export function TelegramGlobalPanel() {
+  const toast = useToast();
+  const { config, isLoading, patch, mutate } = useGlobalConfig();
+  const channels = config.telegram?.channels || [];
+  const idx = Math.max(0, channels.findIndex((c) => c.name === "default"));
+  const channel = channels[idx];
+
+  const [enabled, setEnabled] = useState(true);
+  const [poll, setPoll] = useState<number>(1500);
+  const [respondWithEngine, setRespondWithEngine] = useState(true);
+  const [botToken, setBotToken] = useState("");
+  const [chatId, setChatId] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    setEnabled(!!config.telegram?.enabled);
+    setPoll(Number(config.telegram?.poll_interval_ms || 1500));
+    setRespondWithEngine(!!config.telegram?.respond_with_engine);
+    setBotToken(""); // empty means "do not change"
+    setChatId(channel?.chat_id || "");
+  }, [config, channel?.chat_id]);
+
+  if (isLoading) return <Loading />;
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      // Build a fresh channels array — only update the default slot.
+      const nextChannels = channels.slice();
+      const defaults = {
+        name: "default",
+        chat_id: chatId,
+        respond_with_engine: respondWithEngine,
+        ...(botToken ? { bot_token: botToken } : {}),
+      };
+      if (channels.length === 0) {
+        nextChannels.push(defaults);
+      } else {
+        nextChannels[idx] = { ...channel, ...defaults };
+      }
+      await patch({
+        "telegram.enabled": enabled,
+        "telegram.poll_interval_ms": poll,
+        "telegram.respond_with_engine": respondWithEngine,
+        "telegram.channels": nextChannels,
+      });
+      toast.success(t("settings.telegram_global.saved"));
+      mutate();
+      setBotToken("");
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Section title={t("settings.telegram_global.title")} description={t("settings.telegram_global.subtitle")}>
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <Switch checked={enabled} onChange={setEnabled} label={t("settings.telegram_global.enabled")} />
+          <Switch checked={respondWithEngine} onChange={setRespondWithEngine} label={t("settings.telegram_global.respond_with_engine")} />
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <Field
+            label={t("settings.telegram_global.bot_token")}
+            hint={channel?.bot_token
+              ? `…${secretSuffix(channel.bot_token) ?? ""} (seteado — escribí para reemplazar)`
+              : "Token del BotFather."}
+          >
+            <Input
+              type="password"
+              value={botToken}
+              onChange={(e) => setBotToken(e.target.value)}
+              placeholder={channel?.bot_token ? `…${secretSuffix(channel.bot_token) ?? ""} (ya seteado)` : ""}
+            />
+          </Field>
+          <Field label={t("settings.telegram_global.chat_id")}>
+            <Input value={chatId} onChange={(e) => setChatId(e.target.value)} placeholder="889721252" />
+          </Field>
+          <Field label={t("settings.telegram_global.poll_interval")}>
+            <Input type="number" value={String(poll)} onChange={(e) => setPoll(Number(e.target.value) || 1500)} />
+          </Field>
+        </div>
+        <Button variant="primary" loading={busy} onClick={submit}>{t("common.save")}</Button>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,108 @@
+// Manage role → {tools} definitions used to gate which super-agent tools a
+// Telegram sender can invoke. owner / guest are built-in; custom roles are
+// defined here and assigned per-contact in the Contactos panel.
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Section } from "../Section";
+import { Badge, Button, Empty, Field, Input, Loading, Switch } from "../ui";
+import { useToast } from "../Toast";
+import { useTelegramContacts } from "../../hooks/useTelegram";
+import { Telegram } from "../../lib/api";
+import { t } from "../../i18n";
+
+const BUILT_IN = new Set(["owner", "guest"]);
+
+export function TelegramRolesPanel() {
+  const toast = useToast();
+  const { roles, mutate, isLoading } = useTelegramContacts();
+  const [name, setName] = useState("");
+  const [toolsRaw, setToolsRaw] = useState("");
+  const [allTools, setAllTools] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const submit = async () => {
+    const n = name.trim();
+    if (!n) { toast.error(t("telegram_roles.name_required")); return; }
+    if (BUILT_IN.has(n)) { toast.error(t("telegram_roles.builtin_error", { name: n })); return; }
+    setBusy(true);
+    try {
+      const tools = allTools ? "*" as const : toolsRaw.split(",").map((s) => s.trim()).filter(Boolean);
+      await Telegram.roles.set(n, tools);
+      toast.success(t("telegram_roles.saved", { name: n }));
+      setName(""); setToolsRaw(""); setAllTools(false);
+      mutate();
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setBusy(false); }
+  };
+
+  const remove = async (n: string) => {
+    if (!confirm(t("telegram_roles.delete_confirm", { name: n }))) return;
+    try { await Telegram.roles.remove(n); toast.success(t("telegram_roles.removed")); mutate(); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  const roleEntries = Object.entries(roles);
+
+  return (
+    <Section
+      title={t("telegram_roles.title")}
+      description={t("telegram_roles.desc")}
+    >
+      {isLoading && <Loading />}
+      {roleEntries.length === 0 && !isLoading && <Empty>{t("telegram_roles.empty")}</Empty>}
+      {roleEntries.length > 0 && (
+        <ul className="space-y-2 text-sm">
+          {roleEntries.map(([n, def]) => {
+            const builtIn = BUILT_IN.has(n);
+            const toolsLabel = def?.tools === "*"
+              ? t("telegram_roles.tools_all")
+              : Array.isArray(def?.tools) && def.tools.length > 0
+                ? def.tools.join(", ")
+                : t("telegram_roles.tools_none");
+            return (
+              <li key={n} className="rounded-md border border-border bg-muted/30 px-3 py-2">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="min-w-0">
+                    <span className="font-medium">{n}</span>
+                    {builtIn && <Badge tone="info">{t("telegram_roles.builtin")}</Badge>}
+                  </div>
+                  {!builtIn && (
+                    <Button size="sm" variant="destructive" onClick={() => remove(n)}>{t("telegram_roles.delete_btn")}</Button>
+                  )}
+                </div>
+                <div className="mt-1 text-xs text-muted-fg">tools: {toolsLabel}</div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      <div className="mt-4 space-y-3 rounded-md border border-dashed border-border p-3">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <Plus size={14} /> {t("telegram_roles.new_title")}
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <Field label={t("telegram_roles.name_label")}>
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("telegram_roles.name_ph")} />
+          </Field>
+          <Field
+            label={t("telegram_roles.tools_label")}
+            hint={t("telegram_roles.tools_hint")}
+          >
+            <Input
+              value={toolsRaw}
+              onChange={(e) => setToolsRaw(e.target.value)}
+              disabled={allTools}
+              placeholder={t("telegram_roles.tools_ph")}
+            />
+          </Field>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <Switch checked={allTools} onChange={setAllTools} label={t("telegram_roles.full_access")} />
+          <Button variant="primary" loading={busy} onClick={submit}>{t("telegram_roles.save_btn")}</Button>
+        </div>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,55 @@
+// Tabbed container for Settings → Telegram. The previous single panel only
+// edited the default channel; this hosts the full Telegram config surface:
+// default channel, the full channel list, contacts roster and roles map.
+
+import { useEffect, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { TelegramGlobalPanel } from "./TelegramGlobalPanel";
+import { TelegramChannelsPanel } from "./TelegramChannelsPanel";
+import { TelegramContactsPanel } from "./TelegramContactsPanel";
+import { TelegramRolesPanel } from "./TelegramRolesPanel";
+import { t } from "../../i18n";
+
+const STORAGE_KEY = "apx.settings.telegramTab";
+type Tab = "default" | "channels" | "contacts" | "roles";
+
+function readTab(): Tab {
+  if (typeof window === "undefined") return "default";
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+  if (raw === "channels" || raw === "contacts" || raw === "roles" || raw === "default") return raw;
+  return "default";
+}
+
+export function TelegramSettingsTabs() {
+  const [tab, setTab] = useState<Tab>("default");
+  useEffect(() => { setTab(readTab()); }, []);
+  const onChange = (v: string) => {
+    const t = (v === "channels" || v === "contacts" || v === "roles" || v === "default" ? v : "default") as Tab;
+    setTab(t);
+    try { window.localStorage.setItem(STORAGE_KEY, t); } catch { /* ignore */ }
+  };
+
+  return (
+    <Tabs value={tab} onValueChange={onChange} className="w-full">
+      <TabsList>
+        <TabsTrigger value="default">{t("settings.telegram_global.title")}</TabsTrigger>
+        <TabsTrigger value="channels">{t("telegram_channels.title")}</TabsTrigger>
+        <TabsTrigger value="contacts">{t("telegram_contacts.title")}</TabsTrigger>
+        <TabsTrigger value="roles">{t("telegram_roles.title")}</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="default" className="mt-4">
+        <TelegramGlobalPanel />
+      </TabsContent>
+      <TabsContent value="channels" className="mt-4">
+        <TelegramChannelsPanel />
+      </TabsContent>
+      <TabsContent value="contacts" className="mt-4">
+        <TelegramContactsPanel />
+      </TabsContent>
+      <TabsContent value="roles" className="mt-4">
+        <TelegramRolesPanel />
+      </TabsContent>
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,95 @@
+import { Trash2 } from "lucide-react";
+import { cn } from "../../../lib/cn";
+import { Tip } from "../../ui/tip";
+import { secretSuffix } from "../../../lib/secrets";
+import { ENGINE_BADGES, ENGINE_GRADIENTS, ENGINE_ICONS, ENGINE_OPTIONS, engineStyle } from "./typeStyles";
+import type { Provider } from "./types";
+
+export function ProviderCard({
+  provider,
+  onEdit,
+  onDelete,
+  onToggle,
+}: {
+  provider: Provider;
+  onEdit: () => void;
+  onDelete: () => void;
+  onToggle: () => void;
+}) {
+  const gradient = engineStyle(ENGINE_GRADIENTS, provider.engine);
+  const badge = engineStyle(ENGINE_BADGES, provider.engine);
+  const Icon = engineStyle(ENGINE_ICONS, provider.engine);
+  const engineLabel = ENGINE_OPTIONS.find((o) => o.value === provider.engine)?.label || provider.engine;
+  const hasKey = typeof provider.api_key === "string" && provider.api_key.length > 0;
+  const keySuffix = secretSuffix(provider.api_key);
+  const active = provider.is_active !== false;
+
+  return (
+    <div
+      className="group flex h-full cursor-pointer flex-col gap-3 rounded-xl border border-border bg-card p-4 transition-colors hover:border-muted-fg/50"
+      onClick={onEdit}
+    >
+      {/* Header: icon avatar · name/slug · actions */}
+      <div className="flex items-start gap-3">
+        <div className={cn("flex size-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br", gradient)}>
+          <Icon className="size-5 text-white" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-sm font-semibold">{provider.name || provider.slug}</h3>
+          <p className="truncate font-mono text-[10px] text-muted-fg">{provider.slug}</p>
+          <span className={cn("mt-1 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium", badge)}>
+            <Icon className="size-3" /> {engineLabel}
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <Tip content={active ? "Activo · click para desactivar" : "Inactivo · click para activar"}>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onToggle(); }}
+              className={cn(
+                "flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
+                active
+                  ? "border-emerald-500/40 text-emerald-400 hover:bg-emerald-500/10"
+                  : "border-border text-muted-fg hover:text-foreground",
+              )}
+            >
+              <span className={cn("size-1.5 rounded-full", active ? "bg-emerald-400" : "bg-muted-fg/40")} />
+              {active ? "Active" : "Off"}
+            </button>
+          </Tip>
+          <Tip content="Borrar">
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onDelete(); }}
+              className="rounded-md p-1 text-muted-fg hover:bg-destructive/10 hover:text-destructive"
+            >
+              <Trash2 className="size-3.5" />
+            </button>
+          </Tip>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="mt-auto space-y-1 text-xs">
+        <Row label="Modelo" value={provider.default_model || "—"} mono />
+        {provider.base_url && <Row label="Base URL" value={provider.base_url} mono truncate />}
+        <Row label="API key" value={hasKey ? (keySuffix ? `…${keySuffix}` : "✓ seteada") : "—"} mono={!!keySuffix} />
+        {provider.default_temperature !== undefined && (
+          <Row label="Temp" value={provider.default_temperature.toFixed(1)} />
+        )}
+        {provider.pricing?.input_per_million !== undefined && (
+          <Row label="$ in/out (1M)" value={`${provider.pricing.input_per_million ?? 0} / ${provider.pricing.output_per_million ?? 0}`} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Row({ label, value, mono, truncate }: { label: string; value: string; mono?: boolean; truncate?: boolean }) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="text-muted-fg">{label}</span>
+      <span className={cn("text-foreground", mono && "font-mono", truncate && "max-w-[180px] truncate")}>{value}</span>
+    </div>
+  );
+}