@agentprojectcontext/apx 1.24.0 → 1.27.1

package/src/interfaces/web/src/components/layout/ProjectAvatar.tsx

@@ -0,0 +1,116 @@
+// Discord-style rail avatar with smart initials.
+//
+//   Single-word ("iacrmar")           → big "I" + a "iacrm…" label below
+//   Multi-word  ("panda project")     → big "PP" (first letter of each)
+//   Single short ("apx", "ai")        → big initial + label fits without ellipsis
+//
+// Each project gets a deterministic colour pulled from PROJECT_TONES so the
+// rail is visually scannable even when names are similar.
+import { PROJECT_TONES, type ProjectTone } from "../../constants";
+import { cn } from "../../lib/cn";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+interface Props {
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+  isAdd?: boolean;
+  isSettings?: boolean;
+  isDefault?: boolean;
+  icon?: React.ReactNode;
+  title?: string;
+  testId?: string;
+}
+
+export function ProjectAvatar({ label, active, onClick, isAdd, isSettings, isDefault, icon, title, testId }: Props) {
+  const text = label.trim() || "·";
+  const { initials, subLabel } = computeInitialsAndSub(text);
+  const tone: ProjectTone =
+    isAdd || isSettings ? "indigo" : pickTone(text);
+  const showSub = subLabel && !isAdd && !isSettings && !isDefault;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={onClick}
+            data-testid={testId}
+            className="group relative flex w-full cursor-pointer flex-col items-center gap-1"
+          >
+            <span
+              className={cn(
+                "flex size-10 items-center justify-center rounded-xl text-sm font-bold transition-all",
+                active && "ring-2 ring-foreground ring-offset-2 ring-offset-card",
+                isAdd && "border border-dashed border-muted-fg/50 bg-transparent text-muted-fg hover:bg-accent/60 hover:text-foreground",
+                isSettings && "bg-muted text-muted-fg hover:bg-accent hover:text-foreground",
+                isDefault && "overflow-hidden bg-muted",
+                !isAdd && !isSettings && !isDefault && active && toneActive(tone),
+                !isAdd && !isSettings && !isDefault && !active && toneIdle(tone),
+              )}
+            >
+              {icon ?? initials}
+            </span>
+            {showSub && (
+              <span className="block max-w-[3.6rem] truncate text-[9px] leading-tight text-muted-fg group-hover:text-foreground">
+                {subLabel}
+              </span>
+            )}
+          </button>
+        }
+      />
+      <TooltipContent side="right">{title || label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/** Public so list views can reuse the same rule (consistency). */
+export function computeInitialsAndSub(name: string): { initials: string; subLabel: string | null } {
+  const cleaned = name.trim().replace(/[_\-.]+/g, " ").replace(/\s+/g, " ");
+  if (!cleaned) return { initials: "·", subLabel: null };
+  const words = cleaned.split(" ");
+  if (words.length >= 2) {
+    const ini = (words[0][0] + words[1][0]).toUpperCase();
+    return { initials: ini, subLabel: shortLabel(cleaned) };
+  }
+  const single = words[0];
+  if (single.length <= 4) {
+    // "apx", "iacr" — fits without ellipsis
+    return { initials: single[0].toUpperCase(), subLabel: single };
+  }
+  return { initials: single[0].toUpperCase(), subLabel: single.slice(0, 4) + "…" };
+}
+
+function shortLabel(s: string): string {
+  return s.length > 6 ? s.slice(0, 5) + "…" : s;
+}
+
+/** Hash a string into a stable tone from PROJECT_TONES. */
+function pickTone(s: string): ProjectTone {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
+  return PROJECT_TONES[Math.abs(h) % PROJECT_TONES.length];
+}
+
+const TONE_IDLE: Record<ProjectTone, string> = {
+  sky:     "bg-sky-500/15 text-sky-300 hover:bg-sky-500/25",
+  violet:  "bg-violet-500/15 text-violet-300 hover:bg-violet-500/25",
+  emerald: "bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25",
+  amber:   "bg-amber-500/15 text-amber-300 hover:bg-amber-500/25",
+  rose:    "bg-rose-500/15 text-rose-300 hover:bg-rose-500/25",
+  indigo:  "bg-indigo-500/15 text-indigo-300 hover:bg-indigo-500/25",
+  teal:    "bg-teal-500/15 text-teal-300 hover:bg-teal-500/25",
+  fuchsia: "bg-fuchsia-500/15 text-fuchsia-300 hover:bg-fuchsia-500/25",
+};
+const TONE_ACTIVE: Record<ProjectTone, string> = {
+  sky:     "bg-sky-500/30 text-sky-100",
+  violet:  "bg-violet-500/30 text-violet-100",
+  emerald: "bg-emerald-500/30 text-emerald-100",
+  amber:   "bg-amber-500/30 text-amber-100",
+  rose:    "bg-rose-500/30 text-rose-100",
+  indigo:  "bg-indigo-500/30 text-indigo-100",
+  teal:    "bg-teal-500/30 text-teal-100",
+  fuchsia: "bg-fuchsia-500/30 text-fuchsia-100",
+};
+function toneIdle(t: ProjectTone)   { return TONE_IDLE[t]; }
+function toneActive(t: ProjectTone) { return TONE_ACTIVE[t]; }

package/src/interfaces/web/src/components/layout/ProjectSidebar.tsx

@@ -0,0 +1,151 @@
+// Discord-style left rail. Logo on top (APX admin), then Base, then the
+// rail-level MODULES (Voice/Deck/Code) that sit alongside Base, then the
+// projects column, finally add + settings. The default workspace (id=0) is
+// pinned first.
+import { useLocation } from "react-router-dom";
+import { Plus, Settings, Mic, Monitor, LayoutGrid, Terminal, Bot, type LucideIcon } from "lucide-react";
+import { Logo } from "./Logo";
+import { ProjectAvatar } from "./ProjectAvatar";
+import { Tip } from "../ui/tip";
+import { useProjects } from "../../hooks/useProjects";
+import { t } from "../../i18n";
+
+interface Props {
+  onSelect: (href: string) => void;
+  onOpenRoby: () => void;
+}
+
+interface ModuleItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: LucideIcon;
+}
+
+// Rail-level modules: large surfaces (many views/menus) that deserve a
+// top-level entry next to Base rather than living inside Settings.
+function buildModules(): ModuleItem[] {
+  return [
+    { id: "voice",   label: t("nav.modules.voice"),   href: "/m/voice",   icon: Mic },
+    { id: "desktop", label: t("nav.modules.desktop"), href: "/m/desktop", icon: Monitor },
+    { id: "deck",  label: t("nav.modules.deck"),  href: "/m/deck",  icon: LayoutGrid },
+    { id: "code",  label: t("nav.modules.code"),  href: "/m/code",  icon: Terminal },
+  ];
+}
+
+export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
+  const { projects, isLoading } = useProjects();
+  const location = useLocation();
+  const MODULES = buildModules();
+
+  const isActive = (href: string) =>
+    location.pathname === href || location.pathname.startsWith(`${href}/`);
+  const base = projects.find((p) => String(p.id) === "0");
+  const rest = projects.filter((p) => String(p.id) !== "0");
+
+  return (
+    <aside className="flex h-full w-20 flex-col items-center gap-3 overflow-y-auto bg-transparent py-3">
+      <Tip content={t("nav.apx_admin")} side="right">
+        <button
+          type="button"
+          onClick={() => onSelect("/")}
+          data-testid="nav-home"
+          className="mb-2 cursor-pointer"
+        >
+          <Logo size={36} />
+        </button>
+      </Tip>
+
+      {isLoading && <div className="size-10 animate-pulse rounded-xl bg-muted" />}
+
+      {base && (
+        <ProjectAvatar
+          label={t("base.title")}
+          testId="project-avatar-0"
+          title={t("base.subtitle")}
+          active={isActive("/p/0")}
+          isDefault
+          icon={<img src="/modules/superagent.png" alt={t("base.title")} className="size-7 object-contain" draggable={false} />}
+          onClick={() => onSelect("/p/0")}
+        />
+      )}
+
+      {/* Modules — rail-level surfaces alongside Base. */}
+      <div className="my-0.5 h-px w-8 rounded-full bg-border" />
+      {MODULES.map((m) => (
+        <ProjectAvatar
+          key={m.id}
+          label={m.label}
+          testId={`module-avatar-${m.id}`}
+          title={m.label}
+          active={isActive(m.href)}
+          icon={<m.icon size={18} />}
+          onClick={() => onSelect(m.href)}
+        />
+      ))}
+
+      {rest.length > 0 && <div className="my-0.5 h-px w-8 rounded-full bg-border" />}
+      {rest.map((p) => {
+        const label = p.name || p.path.split("/").pop() || String(p.id);
+        const href = `/p/${p.id}`;
+        return (
+          <ProjectAvatar
+            key={p.id}
+            label={label}
+            testId={`project-avatar-${p.id}`}
+            title={`${label} — ${p.path}`}
+            active={isActive(href)}
+            onClick={() => onSelect(href)}
+          />
+        );
+      })}
+
+      <ProjectAvatar
+        label="Add"
+        isAdd
+        testId="nav-add-project"
+        icon={<Plus size={18} />}
+        active={false}
+        onClick={() => onSelect("/?action=add-project")}
+        title={t("nav.add_project")}
+      />
+
+      <div className="flex-1" />
+      <ProjectAvatar
+        label="Settings"
+        isSettings
+        testId="nav-settings"
+        icon={<Settings size={16} />}
+        active={location.pathname === "/settings" || location.pathname.startsWith("/settings/")}
+        onClick={() => onSelect("/settings")}
+        title={t("nav.settings")}
+      />
+      {/* Roby launcher — subtle (not a loud floating bubble), pinned under the
+          gear so it doesn't overlap the chat composer. */}
+      <Tip content={t("roby.talk")} side="right">
+        <button
+          type="button"
+          onClick={onOpenRoby}
+          data-testid="nav-roby"
+          aria-label={t("roby.talk")}
+          className="mt-1 flex size-10 items-center justify-center rounded-xl border border-border/60 bg-muted/30 text-muted-fg transition-colors hover:bg-accent hover:text-foreground"
+        >
+          <Bot size={18} />
+        </button>
+      </Tip>
+    </aside>
+  );
+}
+
+// Re-export for screens that still import projectKindLabel here.
+export function projectKindLabel(kind?: string): string {
+  switch (kind) {
+    case "personal": return "Personal";
+    case "company":  return "Company";
+    case "app":      return "App";
+    case "software": return "Software";
+    case "default":  return "Default";
+    case "other":    return "Other";
+    default:         return t("nav.project");
+  }
+}

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

@@ -0,0 +1,45 @@
+import { Section, StatusDot } from "../Section";
+import { Button } from "../ui";
+import { useToast } from "../Toast";
+import { useDaemonStatus } from "../../hooks/useDaemonStatus";
+import { Admin } from "../../lib/api";
+import { t } from "../../i18n";
+import { GlobalConfigEditor } from "../config/GlobalConfigEditor";
+
+export function AdvancedPanel() {
+  const toast = useToast();
+  const { health, isUp } = useDaemonStatus();
+
+  const reload = async () => {
+    try { await Admin.reload(); toast.success("Config recargada."); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  return (
+    <div className="space-y-6">
+      <Section
+        title={t("daemon.version")}
+        action={<Button size="sm" onClick={reload}>{t("common.reload")}</Button>}
+      >
+        <div className="grid grid-cols-3 gap-3 text-sm">
+          <Info label={t("daemon.version")} value={health?.version || "—"} />
+          <Info label={t("daemon.uptime")} value={health ? `${health.uptime_s}s` : "—"} />
+          <Info label={t("daemon.status")} value={isUp ? t("daemon.running") : t("daemon.down")} ok={isUp} />
+        </div>
+      </Section>
+      <GlobalConfigEditor />
+    </div>
+  );
+}
+
+function Info({ label, value, ok }: { label: string; value: string; ok?: boolean }) {
+  return (
+    <div className="rounded-md border border-border bg-muted/30 p-3">
+      <div className="text-xs uppercase tracking-wide text-muted-fg">{label}</div>
+      <div className="mt-1 flex items-center gap-2 text-base font-medium">
+        {ok !== undefined && <StatusDot ok={ok} />}
+        <span>{value}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Section } from "../Section";
+import { Button, Field, Input } from "../ui";
+import { useTheme } from "../../hooks/useTheme";
+import { useToast } from "../Toast";
+import { getToken, setToken } from "../../lib/api";
+import { STORAGE } from "../../constants";
+import { t, setLocale, getLocale, LOCALES, type Locale } from "../../i18n";
+
+export function AppearancePanel() {
+  const toast = useToast();
+  const { theme, set } = useTheme();
+  const [draftToken, setDraftToken] = useState("");
+  const [locale, setLocaleState] = useState<Locale>(getLocale());
+
+  const save = () => {
+    const v = draftToken.trim();
+    if (!v) return;
+    setToken(v);
+    try { localStorage.setItem(STORAGE.token, v); } catch { /* quota */ }
+    setDraftToken("");
+    toast.success(t("settings.token_saved"));
+  };
+
+  const changeLocale = (l: Locale) => {
+    setLocale(l);
+    setLocaleState(l);
+    // Reload so all rendered strings pick up the new locale.
+    window.location.reload();
+  };
+
+  return (
+    <div className="space-y-6">
+      <Section title={t("settings.appearance")}>
+        <div className="flex items-center gap-2">
+          <Button variant={theme === "light" ? "primary" : "secondary"} onClick={() => set("light")}>{t("settings.light_mode")}</Button>
+          <Button variant={theme === "dark"  ? "primary" : "secondary"} onClick={() => set("dark")}>{t("settings.dark_mode")}</Button>
+        </div>
+      </Section>
+
+      <Section title={t("settings.language")}>
+        <div className="flex items-center gap-2">
+          {LOCALES.map((lo) => (
+            <Button
+              key={lo.value}
+              variant={locale === lo.value ? "primary" : "secondary"}
+              onClick={() => changeLocale(lo.value)}
+            >
+              {lo.label}
+            </Button>
+          ))}
+        </div>
+      </Section>
+
+      <Section title={t("settings.token")} description={t("settings.token_sub")}>
+        <Field label="Bearer">
+          <Input
+            type="password"
+            placeholder={getToken() ? t("settings.token_active") : t("settings.token_paste")}
+            value={draftToken}
+            onChange={(e) => setDraftToken(e.target.value)}
+            className="font-mono"
+            onKeyDown={(e) => { if (e.key === "Enter") save(); }}
+          />
+        </Field>
+        <div className="mt-2">
+          <Button variant="primary" onClick={save}>{t("common.save")}</Button>
+        </div>
+      </Section>
+    </div>
+  );
+}

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

@@ -0,0 +1,232 @@
+import { useEffect, useMemo, useState } from "react";
+import { AlertTriangle, ArrowRight, GitBranch, Pencil, Plus, Trash2 } from "lucide-react";
+import { Section } from "../Section";
+import { Badge, Button, Field, Loading } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { ModelCombobox } from "../ModelCombobox";
+import { useToast } from "../Toast";
+import { useGlobalConfig, useSuperAgentConfig } from "../../hooks/useGlobalConfig";
+import { ENGINE_ICONS, ENGINE_PRESETS, type EngineType } from "./providers/typeStyles";
+
+interface ProviderInfo {
+  slug: string;
+  engine: EngineType;
+  default_model?: string;
+}
+
+function splitRef(ref: string): { provider: string; model: string } {
+  const i = ref.indexOf(":");
+  if (i < 0) return { provider: ref, model: "" };
+  return { provider: ref.slice(0, i), model: ref.slice(i + 1) };
+}
+
+// Provider dropdown + editable model combobox. Serializes to "provider:model".
+function ProviderModelPicker({
+  value,
+  onChange,
+  providers,
+}: {
+  value: string;
+  onChange: (ref: string) => void;
+  providers: ProviderInfo[];
+}) {
+  const { provider, model } = splitRef(value);
+  const current = providers.find((p) => p.slug === provider);
+  const providerInvalid = !!provider && !current;
+
+  const modelOptions = useMemo(() => {
+    const known = current ? ENGINE_PRESETS[current.engine]?.known_models || [] : [];
+    return Array.from(new Set([
+      ...(current?.default_model ? [current.default_model] : []),
+      ...known,
+    ]));
+  }, [current]);
+
+  const setProvider = (slug: string) => {
+    const p = providers.find((x) => x.slug === slug);
+    const m = p?.default_model || ENGINE_PRESETS[p?.engine as EngineType]?.default_model || "";
+    onChange(m ? `${slug}:${m}` : `${slug}:`);
+  };
+  const setModel = (m: string) => onChange(`${provider}:${m}`);
+
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      <UiSelect
+        value={provider}
+        onChange={setProvider}
+        placeholder={providerInvalid ? `⚠ ${provider} (no existe)` : "— proveedor —"}
+        options={providers.map((p) => ({ value: p.slug, label: p.slug, icon: ENGINE_ICONS[p.engine] }))}
+      />
+      <ModelCombobox
+        value={model}
+        onChange={setModel}
+        options={modelOptions}
+        invalid={providerInvalid}
+        invalidHint={`El proveedor "${provider}" no está configurado.`}
+      />
+    </div>
+  );
+}
+
+// General model router (no per-task cases): primary model + ordered fallback
+// chain. Backed by super_agent.model + super_agent.model_fallback.models.
+export function DefaultRouterCard() {
+  const toast = useToast();
+  const { superAgent, isLoading, mutate } = useSuperAgentConfig();
+  const { config, patch } = useGlobalConfig();
+
+  const [model, setModel] = useState("");
+  const [fallback, setFallback] = useState<string[]>([]);
+  const [newFallback, setNewFallback] = useState("");
+  const [editIdx, setEditIdx] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+  // Snapshot of the saved state, for dirty tracking.
+  const [saved, setSaved] = useState<{ model: string; fallback: string[] }>({ model: "", fallback: [] });
+
+  useEffect(() => {
+    if (!superAgent) return;
+    const f = superAgent.model_fallback?.models || [];
+    const arr = Array.isArray(f) ? f : [];
+    setModel(superAgent.model || "");
+    setFallback(arr);
+    setSaved({ model: superAgent.model || "", fallback: arr });
+  }, [superAgent]);
+
+  const providers: ProviderInfo[] = useMemo(() => {
+    const engines = (config.engines || {}) as Record<string, { engine?: string; default_model?: string }>;
+    return Object.entries(engines).map(([slug, v]) => ({
+      slug,
+      engine: ((v?.engine as EngineType) || (slug as EngineType)),
+      default_model: v?.default_model || ENGINE_PRESETS[(v?.engine as EngineType) || (slug as EngineType)]?.default_model,
+    }));
+  }, [config.engines]);
+
+  const providerExists = (ref: string) => {
+    const { provider } = splitRef(ref);
+    return providers.some((p) => p.slug === provider);
+  };
+
+  if (isLoading || !superAgent) return <Loading />;
+
+  const dirty = model !== saved.model || JSON.stringify(fallback) !== JSON.stringify(saved.fallback);
+
+  const submit = async () => {
+    setBusy(true);
+    try {
+      await patch({
+        "super_agent.model": model,
+        "super_agent.model_fallback.enabled": fallback.length > 0,
+        "super_agent.model_fallback.models": fallback,
+      });
+      toast.success("Router guardado.");
+      setSaved({ model, fallback });
+      mutate();
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  const addFallback = () => {
+    const v = newFallback.trim().replace(/:$/, "");
+    if (!v || !v.includes(":") || fallback.includes(v)) return;
+    setFallback([...fallback, v]);
+    setNewFallback("");
+  };
+  const updateAt = (i: number, v: string) => {
+    const next = [...fallback];
+    next[i] = v;
+    setFallback(next);
+  };
+  const removeFallback = (i: number) => {
+    setFallback(fallback.filter((_, idx) => idx !== i));
+    if (editIdx === i) setEditIdx(null);
+  };
+  const moveFallback = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= fallback.length) return;
+    const next = [...fallback];
+    [next[i], next[j]] = [next[j], next[i]];
+    setFallback(next);
+  };
+
+  return (
+    <Section
+      title="Router de modelos"
+      description="Un solo router general (sin casos por tarea). Elegí proveedor y modelo; si el activo falla, prueba la cadena de fallback en orden."
+    >
+      <div className="space-y-4">
+        {/* Resolution preview */}
+        <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-muted/20 p-3">
+          <Badge tone="success"><GitBranch size={11} /> default</Badge>
+          <span className={`font-mono text-xs ${!providerExists(model) && model ? "text-amber-400" : ""}`}>{model || "—"}</span>
+          {fallback.map((m) => (
+            <span key={m} className="flex items-center gap-2 text-muted-fg">
+              <ArrowRight size={12} />
+              <span className={`font-mono text-xs ${!providerExists(m) ? "text-amber-400" : ""}`}>{m}</span>
+            </span>
+          ))}
+        </div>
+
+        {providers.length === 0 ? (
+          <p className="text-xs text-muted-fg">Agregá un proveedor abajo para poder elegir modelos.</p>
+        ) : (
+          <Field label="Modelo activo (default)" hint="Proveedor + modelo. Se guarda como provider:model.">
+            <ProviderModelPicker value={model} onChange={setModel} providers={providers} />
+          </Field>
+        )}
+
+        <div className="rounded-lg border border-border bg-muted/20 p-3">
+          <div className="mb-2">
+            <div className="text-sm font-medium">Cadena de fallback</div>
+            <div className="text-xs text-muted-fg">Si el modelo activo falla, prueba estos en orden. Click en uno para editarlo.</div>
+          </div>
+          <ul className="mb-3 space-y-1">
+            {fallback.map((m, i) => {
+              const invalid = !providerExists(m);
+              const editing = editIdx === i;
+              return (
+                <li key={`${i}-${m}`} className="rounded-md bg-card px-2 py-1.5 text-xs">
+                  <div className="flex items-center gap-2">
+                    <span className="w-6 text-muted-fg">#{i + 1}</span>
+                    {editing ? (
+                      <div className="flex-1">
+                        <ProviderModelPicker value={m} onChange={(v) => updateAt(i, v)} providers={providers} />
+                      </div>
+                    ) : (
+                      <button type="button" onClick={() => setEditIdx(i)} className="flex flex-1 items-center gap-1.5 text-left">
+                        {invalid && <AlertTriangle size={12} className="text-amber-400" />}
+                        <span className={`font-mono ${invalid ? "text-amber-400" : ""}`}>{m}</span>
+                      </button>
+                    )}
+                    {editing ? (
+                      <Button size="sm" variant="secondary" onClick={() => setEditIdx(null)}>listo</Button>
+                    ) : (
+                      <Button size="sm" variant="ghost" onClick={() => setEditIdx(i)}><Pencil size={12} /></Button>
+                    )}
+                    <Button size="sm" variant="ghost" onClick={() => moveFallback(i, -1)} disabled={i === 0}>↑</Button>
+                    <Button size="sm" variant="ghost" onClick={() => moveFallback(i, +1)} disabled={i === fallback.length - 1}>↓</Button>
+                    <Button size="sm" variant="destructive" onClick={() => removeFallback(i)}><Trash2 size={12} /></Button>
+                  </div>
+                </li>
+              );
+            })}
+            {fallback.length === 0 && <li className="text-xs text-muted-fg">Sin fallback configurado.</li>}
+          </ul>
+          {providers.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-xs text-muted-fg">Agregar a la cadena</div>
+              <ProviderModelPicker value={newFallback} onChange={setNewFallback} providers={providers} />
+              <Button size="sm" variant="secondary" onClick={addFallback} disabled={!newFallback.includes(":") || newFallback.endsWith(":")}>
+                <Plus size={13} /> Agregar a la cadena
+              </Button>
+            </div>
+          )}
+        </div>
+
+        <Button variant="primary" loading={busy} disabled={!dirty} onClick={submit}>
+          {dirty ? "Guardar router" : "Guardado"}
+        </Button>
+      </div>
+    </Section>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import { QrCode } from "lucide-react";
+import { Section } from "../Section";
+import { Badge, Button, Empty, Loading } from "../ui";
+import { useToast } from "../Toast";
+import { useDevices } from "../../hooks/useDevices";
+import { Pair } from "../../lib/api";
+import { PairDeviceDialog } from "./PairDeviceDialog";
+import { t } from "../../i18n";
+
+export function DevicesPanel() {
+  const toast = useToast();
+  const { clients, isLoading, mutate } = useDevices();
+  const [pairOpen, setPairOpen] = useState(false);
+
+  const revoke = async (id: string) => {
+    if (!confirm(t("settings.devices_revoke_confirm", { id }))) return;
+    try {
+      await Pair.revoke(id);
+      toast.success("Cliente revocado.");
+      mutate();
+    } catch (e) {
+      toast.error((e as Error).message);
+    }
+  };
+
+  return (
+    <Section
+      title={t("settings.devices")}
+      description={t("settings.devices_sub")}
+      action={
+        <Button size="sm" variant="primary" onClick={() => setPairOpen(true)}>
+          <QrCode size={14} /> {t("settings.devices_pair_btn")}
+        </Button>
+      }
+    >
+      {isLoading && <Loading />}
+      {!isLoading && clients.length === 0 && (
+        <Empty>{t("settings.devices_empty")}</Empty>
+      )}
+      {clients.length > 0 && (
+        <ul className="space-y-2 text-sm">
+          {clients.map((c) => (
+            <li key={c.id} className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+              <span className="font-medium">{c.label || c.id}</span>
+              <Badge tone={c.kind === "web" ? "info" : c.kind === "deck" ? "success" : "muted"}>{c.kind}</Badge>
+              <span className="font-mono text-xs text-muted-fg">…{c.token_suffix}</span>
+              <span className="ml-auto text-xs text-muted-fg">
+                visto: {c.last_seen ? new Date(c.last_seen).toLocaleString() : "nunca"}
+              </span>
+              <Button size="sm" variant="destructive" onClick={() => revoke(c.id)}>Revocar</Button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <PairDeviceDialog open={pairOpen} onClose={() => setPairOpen(false)} onPaired={() => mutate()} />
+    </Section>
+  );
+}