@agentprojectcontext/apx 1.25.0 → 1.27.1

package/src/interfaces/web/src/screens/ApxAdminScreen.tsx

@@ -0,0 +1,174 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Plus, Send } from "lucide-react";
+import { Section, StatusDot } from "../components/Section";
+import { Badge, Button, Empty, Loading, Switch } from "../components/ui";
+import { Admin, Projects, Telegram } from "../lib/api";
+import { useToast } from "../components/Toast";
+import { useDaemonStatus } from "../hooks/useDaemonStatus";
+import { useEngines } from "../hooks/useEngines";
+import { useProjects } from "../hooks/useProjects";
+import { useTelegramStatus, useTelegramChannels } from "../hooks/useTelegram";
+import { TelegramChannelDialog } from "../components/TelegramChannelDialog";
+import { TelegramSendDialog } from "../components/TelegramSendDialog";
+import { TelegramContactsPanel } from "../components/settings/TelegramContactsPanel";
+import { t } from "../i18n";
+import type { TelegramChannel } from "../types/daemon";
+
+export function ApxAdminScreen() {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const { health, isUp } = useDaemonStatus();
+  const { projects, isLoading: projLoading, mutate: mutateProjects } = useProjects();
+  const { engines, isLoading: enginesLoading } = useEngines();
+  const { status: tgStatus, mutate: mutateTgStatus } = useTelegramStatus();
+  const { channels, isLoading: chanLoading, mutate: mutateChannels } = useTelegramChannels();
+
+  const [editing, setEditing] = useState<TelegramChannel | null>(null);
+  const [sendTarget, setSendTarget] = useState<TelegramChannel | null>(null);
+
+  const reload = async () => {
+    try { await Admin.reload(); toast.success(t("admin.reload_success")); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+  const toggleTelegram = async () => {
+    try {
+      if (tgStatus?.enabled) { await Telegram.stop(); toast.info(t("admin.telegram_polling_stopped")); }
+      else { await Telegram.start(); toast.success(t("admin.telegram_polling_started")); }
+      mutateTgStatus();
+    } catch (e) { toast.error((e as Error).message); }
+  };
+  const removeChannel = async (name: string) => {
+    if (!confirm(t("telegram_channels.delete_confirm", { name }))) return;
+    try { await Telegram.channels.remove(name); toast.success(t("admin.telegram_channel_removed")); mutateChannels(); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+  const removeProject = async (id: string, label: string) => {
+    if (!confirm(t("admin.unregister_confirm", { label }))) return;
+    try { await Projects.remove(id); toast.success(t("project.unregistered")); mutateProjects(); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-6 p-6" data-testid="screen-admin">
+      <header className="flex items-end justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">{t("admin.title")}</h1>
+          <p className="text-sm text-muted-fg">{t("admin.subtitle")}</p>
+        </div>
+        <div className="flex gap-2">
+          <Button size="sm" onClick={reload} title={t("daemon.reload_hint")}>{t("common.reload")} config</Button>
+          <Button size="sm" variant="primary" onClick={() => navigate("/?action=add-project")}>
+            <Plus size={14} /> {t("nav.project")}
+          </Button>
+        </div>
+      </header>
+
+      <Section title={t("daemon.version")}>
+        <div className="grid grid-cols-3 gap-3 text-sm">
+          <Stat label={t("daemon.version")} value={health?.version || "—"} />
+          <Stat label={t("daemon.uptime")}  value={health ? `${health.uptime_s}s` : "—"} />
+          <Stat label={t("daemon.status")}  value={isUp ? t("daemon.running") : t("daemon.down")} ok={isUp} />
+        </div>
+      </Section>
+
+      <Section title={t("admin.engines_title")} description={t("admin.engines_subtitle")}>
+        {enginesLoading && <Loading />}
+        <div className="flex flex-wrap gap-1.5">
+          {engines.map((id) => <Badge key={id} tone="info">{id}</Badge>)}
+        </div>
+      </Section>
+
+      <Section
+        title={t("admin.telegram_title")}
+        description={t("admin.telegram_subtitle")}
+        action={
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={!!tgStatus?.enabled}
+              onChange={toggleTelegram}
+              label={tgStatus?.enabled ? t("admin.telegram_polling_on") : t("admin.telegram_polling_off")}
+            />
+            <Button size="sm" onClick={() => setEditing({ name: "" })}>
+              <Plus size={14} /> {t("admin.telegram_add_channel")}
+            </Button>
+          </div>
+        }
+      >
+        {chanLoading && <Loading />}
+        {channels.length === 0 && <Empty>{t("common.none_yet")}</Empty>}
+        <ul className="space-y-2 text-sm">
+          {channels.map((c) => (
+            <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={() => removeChannel(c.name)}>{t("common.delete")}</Button>
+                </div>
+              </div>
+              <div className="mt-1 grid grid-cols-3 gap-2 text-xs text-muted-fg">
+                <span>chat_id: {c.chat_id || "—"}</span>
+                <span>route_to_agent: {c.route_to_agent || "default APX"}</span>
+                <span>engine: {c.respond_with_engine ? t("admin.engine_badge") : t("admin.engine_badge_no")}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Section>
+
+      <TelegramContactsPanel />
+
+      <Section title={t("admin.projects_title")} description={t("admin.projects_subtitle")}>
+        {projLoading && <Loading />}
+        <ul className="divide-y divide-border">
+          {projects.map((p) => (
+            <li key={p.id} className="flex items-center gap-3 py-2">
+              <span className="w-10 font-mono text-xs text-muted-fg">#{p.id}</span>
+              <button
+                type="button"
+                className="flex-1 text-left hover:underline"
+              onClick={() => navigate(`/p/${p.id}`)}
+              >
+                <span className="font-medium">{p.name || p.path.split("/").pop()}</span>
+                <span className="ml-2 text-xs text-muted-fg">{p.path}</span>
+              </button>
+              <Badge>{(p.agents ?? 0)} {t("admin.agents_badge")}</Badge>
+              {Number(p.id) !== 0 && (
+                <Button size="sm" variant="destructive" onClick={() => removeProject(String(p.id), p.name || p.path)}>
+                  {t("admin.unregister")}
+                </Button>
+              )}
+            </li>
+          ))}
+        </ul>
+      </Section>
+
+      <TelegramChannelDialog
+        channel={editing}
+        onClose={() => setEditing(null)}
+        onSaved={() => { setEditing(null); mutateChannels(); }}
+      />
+      <TelegramSendDialog
+        channel={sendTarget}
+        onClose={() => setSendTarget(null)}
+      />
+    </div>
+  );
+}
+
+function Stat({ 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/screens/PairingScreen.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { KeyRound } from "lucide-react";
+import { Button, Input, Field } from "../components/ui";
+import { Pair, setToken, HttpError } from "../lib/api";
+import { STORAGE } from "../constants";
+import { t } from "../i18n";
+
+// Shown when the panel is reachable but has no valid token — i.e. opened over
+// the LAN or a tunnel where /admin/web-token (loopback-only) can't help. The
+// browser plays the same role APX Deck does: the operator runs `apx pair` on
+// the host and pastes the pairing code here to mint a per-client token.
+export function PairingScreen({ onPaired }: { onPaired: () => void }) {
+  const [code, setCode] = useState("");
+  const [label, setLabel] = useState(defaultLabel());
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  async function submit() {
+    const pairing_id = code.trim();
+    if (!pairing_id) { setErr(t("pairing.err_required")); return; }
+    setBusy(true);
+    setErr(null);
+    try {
+      const res = await Pair.confirm({ pairing_id, label: label.trim() || undefined });
+      setToken(res.token);
+      try { localStorage.setItem(STORAGE.token, res.token); } catch { /* quota */ }
+      onPaired();
+    } catch (e) {
+      setErr(messageFor(e));
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[100dvh] w-full items-center justify-center overflow-y-auto bg-background p-4 text-foreground">
+      <div className="my-auto w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-sm">
+        <div className="mb-4 flex items-center gap-3">
+          <div className="grid size-10 place-items-center rounded-lg bg-primary/10 text-primary">
+            <KeyRound size={20} />
+          </div>
+          <div>
+            <h1 className="text-base font-semibold">{t("pairing.title")}</h1>
+            <p className="text-xs text-muted-fg">{t("pairing.subtitle")}</p>
+          </div>
+        </div>
+
+        <ol className="mb-5 space-y-1.5 rounded-lg bg-muted/50 p-3 text-xs text-muted-fg">
+          <li className="font-medium text-foreground">{t("pairing.steps_title")}</li>
+          <li>1. {t("pairing.step_1")}</li>
+          <li>2. {t("pairing.step_2")}</li>
+          <li>3. {t("pairing.step_3")}</li>
+        </ol>
+
+        <form
+          className="space-y-3"
+          onSubmit={(e) => { e.preventDefault(); void submit(); }}
+        >
+          <Field label={t("pairing.code_label")}>
+            <Input
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder={t("pairing.code_ph")}
+              spellCheck={false}
+              autoComplete="off"
+            />
+          </Field>
+          <Field label={t("pairing.label_label")} hint={t("pairing.revoke_hint")}>
+            <Input
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder={t("pairing.label_ph")}
+            />
+          </Field>
+
+          {err && (
+            <p className="rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive">{err}</p>
+          )}
+
+          <Button type="submit" variant="primary" size="md" loading={busy} className="w-full justify-center">
+            {busy ? t("pairing.linking") : t("pairing.submit")}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function defaultLabel(): string {
+  const ua = navigator.userAgent;
+  if (/iPhone|iPad/.test(ua)) return "iPhone";
+  if (/Android/.test(ua)) return "Android";
+  if (/Mac/.test(ua)) return "Mac";
+  if (/Windows/.test(ua)) return "Windows PC";
+  if (/Linux/.test(ua)) return "Linux";
+  return "browser";
+}
+
+function messageFor(e: unknown): string {
+  if (e instanceof HttpError) {
+    if (e.status === 410) return t("pairing.err_expired");
+    if (e.status === 404) return t("pairing.err_unknown");
+    if (e.status === 409) return t("pairing.err_unknown");
+  }
+  return t("pairing.err_generic");
+}

package/src/interfaces/web/src/screens/ProjectScreen.tsx

@@ -0,0 +1,178 @@
+import { useMemo } from "react";
+import { useNavigate, useParams, Routes, Route, useLocation } from "react-router-dom";
+import {
+  Bot, Heart, Zap, Puzzle, FolderKanban, Settings,
+  RefreshCw, MessagesSquare, Send,
+  LayoutDashboard, Boxes, Cpu, ScrollText, History, Brain,
+} from "lucide-react";
+import { Projects } from "../lib/api";
+import { Button } from "../components/ui";
+import { useToast } from "../components/Toast";
+import { useNavCollapse, type TabSection } from "../components/common/TabNav";
+import { TabLayout } from "../components/common/TabLayout";
+import { useProject } from "../hooks/useProjects";
+import { STORAGE } from "../constants";
+import { t } from "../i18n";
+import { Overview } from "./project/Overview";
+import { WorkspacesTab } from "./base/WorkspacesTab";
+import { LogsTab } from "./base/LogsTab";
+import { ModelsTab } from "./base/ModelsTab";
+import { AgentDefaultsTab } from "./base/AgentDefaultsTab";
+import { SessionsTab } from "./base/SessionsTab";
+import { GlobalTasksTab } from "./base/GlobalTasksTab";
+import { ConfigTab } from "./project/ConfigTab";
+import { AgentsTab } from "./project/AgentsTab";
+import { RoutinesTab } from "./project/RoutinesTab";
+import { TasksTab } from "./project/TasksTab";
+import { McpsTab } from "./project/McpsTab";
+import { ThreadsTab } from "./project/ThreadsTab";
+import { ChatTab } from "./project/ChatTab";
+import { TelegramTab } from "./project/TelegramTab";
+import { MemoriesTab } from "./project/MemoriesTab";
+import { AgentDetailScreen } from "./project/AgentDetailScreen";
+
+type NavKey =
+  | "" | "chat" | "config" | "telegram"
+  | "agents" | "routines" | "tasks" | "mcps" | "threads" | "logs" | "memories";
+
+export function ProjectScreen() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const toast = useToast();
+  const { pid = "" } = useParams();
+  const { project, mutate } = useProject(pid);
+  const { collapsed, toggle } = useNavCollapse(STORAGE.sidebarCollapsed + ".project");
+
+  const isBase = String(pid) === "0";
+  const sections: TabSection[] = useMemo(() => {
+    if (isBase) {
+      // Base = menú global / admin del daemon (distinto al de un proyecto).
+      return [
+        {
+          title: t("base.nav_general"),
+          items: [
+            { key: "",               label: "Dashboard",                    icon: LayoutDashboard },
+            { key: "workspaces",     label: t("base.workspaces_title"),     icon: Boxes },
+            { key: "models",         label: t("settings.tabs.engines"),     icon: Cpu },
+            { key: "agent-defaults", label: t("base.defaults_title"),       icon: Bot },
+          ],
+        },
+        {
+          title: t("base.nav_activity"),
+          items: [
+            { key: "chat",     label: t("project.nav.chat"),     icon: MessagesSquare },
+            { key: "sessions", label: t("base.sessions_title"),  icon: History },
+            { key: "tasks",    label: t("project.nav.tasks"),    icon: Zap },
+            { key: "logs",     label: t("project.nav.logs"),     icon: ScrollText },
+          ],
+        },
+        {
+          title: t("base.nav_system"),
+          items: [
+            { key: "agents",   label: t("project.nav.agents"),   icon: Bot },
+            { key: "memories", label: t("project.nav.memories"), icon: Brain },
+            { key: "routines", label: t("project.nav.routines"), icon: Heart },
+            { key: "mcps",     label: t("project.nav.mcps"),     icon: Puzzle },
+            { key: "config",   label: t("project.nav.config"),   icon: Settings },
+          ],
+        },
+      ];
+    }
+    return [
+      {
+        title: t("project.sections.workspace"),
+        items: [
+          { key: "",         label: t("project.nav.overview"),  icon: FolderKanban },
+          { key: "telegram", label: t("project.nav.telegram"),  icon: Send },
+          { key: "chat",     label: t("project.nav.chat"),      icon: MessagesSquare },
+          { key: "threads",  label: t("project.nav.threads"),   icon: MessagesSquare },
+          { key: "agents",   label: t("project.nav.agents"),    icon: Bot },
+          { key: "memories", label: t("project.nav.memories"),  icon: Brain },
+        ],
+      },
+      {
+        title: t("project.sections.automation"),
+        items: [
+          { key: "routines", label: t("project.nav.routines"),  icon: Heart },
+          { key: "tasks",    label: t("project.nav.tasks"),     icon: Zap },
+          { key: "mcps",     label: t("project.nav.mcps"),      icon: Puzzle },
+          { key: "logs",     label: t("project.nav.logs"),      icon: ScrollText },
+        ],
+      },
+      {
+        title: t("project.sections.config"),
+        items: [
+          { key: "config",   label: t("project.nav.config"),    icon: Settings },
+        ],
+      },
+    ];
+  }, [isBase]);
+
+  // First path segment after /p/:pid — so deep routes like agents/:slug still
+  // highlight the "agents" nav item.
+  const active = (location.pathname.replace(`/p/${pid}`, "").replace(/^\//, "").split("/")[0]) as NavKey;
+
+  if (!project) {
+    return <div className="p-8 text-muted-fg">{t("project.not_found", { pid })}</div>;
+  }
+
+  const rebuild = async () => {
+    try { await Projects.rebuild(pid); toast.success(t("project.rebuild_done")); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+  const unregister = async () => {
+    const label = project.name || project.path;
+    if (!confirm(t("project.unregister_confirm", { label }))) return;
+    try { await Projects.remove(pid); toast.success(t("project.unregistered")); mutate(); navigate("/"); }
+    catch (e) { toast.error((e as Error).message); }
+  };
+
+  const onTabChange = (key: string) => {
+    const url = key ? `/p/${pid}/${key}` : `/p/${pid}`;
+    navigate(url);
+  };
+
+  const actions = Number(pid) !== 0 ? (
+    <>
+      <Button size="sm" variant="secondary" onClick={rebuild}>
+        <RefreshCw size={13} /> {t("project.rebuild")}
+      </Button>
+      <Button size="sm" variant="destructive" onClick={unregister}>
+        {t("admin.unregister")}
+      </Button>
+    </>
+  ) : undefined;
+
+  return (
+    <TabLayout
+      sections={sections}
+      active={active}
+      onChange={onTabChange}
+      collapsed={collapsed}
+      onToggleCollapse={toggle}
+      actions={actions}
+      contentClassName="w-full space-y-6 p-6 pt-3"
+      testId={`project-tab-${active || "overview"}`}
+    >
+      <Routes>
+        <Route index               element={<Overview pid={pid} />} />
+        <Route path="workspaces"   element={<WorkspacesTab />} />
+        <Route path="models"       element={<ModelsTab />} />
+        <Route path="agent-defaults" element={<AgentDefaultsTab />} />
+        <Route path="sessions"     element={<SessionsTab />} />
+        <Route path="logs"         element={<LogsTab pid={pid} />} />
+        <Route path="config"       element={<ConfigTab pid={pid} />} />
+        <Route path="telegram"     element={<TelegramTab pid={pid} />} />
+        <Route path="agents"       element={<AgentsTab pid={pid} />} />
+        <Route path="agents/:slug" element={<AgentDetailScreen pid={pid} />} />
+        <Route path="memories"     element={<MemoriesTab pid={pid} />} />
+        <Route path="routines"     element={<RoutinesTab pid={pid} />} />
+        <Route path="tasks"        element={isBase ? <GlobalTasksTab /> : <TasksTab pid={pid} />} />
+        <Route path="mcps"         element={<McpsTab pid={pid} />} />
+        <Route path="threads"      element={<ThreadsTab pid={pid} />} />
+        <Route path="chat"         element={<ChatTab pid={pid} />} />
+        <Route path="*"            element={<Overview pid={pid} />} />
+      </Routes>
+    </TabLayout>
+  );
+}

package/src/interfaces/web/src/screens/SettingsScreen.tsx

@@ -0,0 +1,111 @@
+import { type ReactElement } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  Bot, Cpu, Database, KeyRound, MessageCircle, Palette, ScrollText, Send, Smartphone, User,
+} from "lucide-react";
+import { useNavCollapse, type TabSection } from "../components/common/TabNav";
+import { TabLayout } from "../components/common/TabLayout";
+import { IdentityPanel } from "../components/settings/IdentityPanel";
+import { SuperAgentPanel } from "../components/settings/SuperAgentPanel";
+import { MemoryPanel } from "../components/settings/MemoryPanel";
+import { ModelsTab } from "./base/ModelsTab";
+import { TelegramSettingsTabs } from "../components/settings/TelegramSettingsTabs";
+import { DevicesPanel } from "../components/settings/DevicesPanel";
+import { AdvancedPanel } from "../components/settings/AdvancedPanel";
+import { AppearancePanel } from "../components/settings/AppearancePanel";
+import { STORAGE } from "../constants";
+import { t } from "../i18n";
+
+type TabKey =
+  | "identity" | "super_agent" | "engines" | "memory" | "telegram" | "devices" | "appearance" | "advanced";
+
+const SECTIONS: TabSection[] = [
+  {
+    title: t("settings.account_section"),
+    items: [
+      { key: "identity",    label: t("settings.tabs.identity"),    icon: User },
+      { key: "appearance",  label: t("settings.appearance"),       icon: Palette },
+    ],
+  },
+  {
+    title: t("settings.agents_section"),
+    items: [
+      { key: "super_agent", label: t("settings.tabs.super_agent"), icon: Bot },
+      { key: "engines",     label: t("settings.tabs.engines"),     icon: Cpu },
+      { key: "memory",      label: "Memoria (RAG)",                icon: Database },
+    ],
+  },
+  {
+    title: t("settings.channels_section"),
+    items: [
+      { key: "telegram",    label: t("settings.tabs.telegram"),    icon: Send },
+      { key: "devices",     label: t("settings.tabs.devices"),     icon: Smartphone },
+    ],
+  },
+  {
+    title: t("settings.advanced_section"),
+    items: [
+      { key: "advanced",    label: t("settings.tabs.advanced"),    icon: ScrollText },
+    ],
+  },
+];
+
+// Tabs whose content (model router + provider grid, telegram tabs) benefits
+// from a wider container; the rest keep the cosier 3xl reading width.
+const WIDE_TABS = new Set<TabKey>(["engines", "telegram"]);
+
+const PANELS: Record<TabKey, () => ReactElement> = {
+  identity:    () => <IdentityPanel />,
+  super_agent: () => <SuperAgentPanel />,
+  engines:     () => <ModelsTab />,
+  memory:      () => <MemoryPanel />,
+  telegram:    () => <TelegramSettingsTabs />,
+  devices:     () => <DevicesPanel />,
+  appearance:  () => <AppearancePanel />,
+  advanced:    () => <AdvancedPanel />,
+};
+
+export function SettingsScreen() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const active = tabFromPath(location.pathname);
+  const Panel = PANELS[active];
+  const { collapsed, toggle } = useNavCollapse(STORAGE.sidebarCollapsed + ".settings");
+  // Silence lint warnings about unused icons import.
+  void KeyRound; void MessageCircle;
+
+  return (
+    <TabLayout
+      sections={SECTIONS}
+      active={active}
+      onChange={(k) => navigate(k === "identity" ? "/settings" : `/settings/${pathFromTab(k as TabKey)}`)}
+      collapsed={collapsed}
+      onToggleCollapse={toggle}
+      contentClassName={`mx-auto w-full ${WIDE_TABS.has(active) ? "max-w-6xl" : "max-w-3xl"} space-y-6 p-6 pt-3`}
+      testId={`settings-tab-${active}`}
+    >
+      <Panel />
+    </TabLayout>
+  );
+}
+
+function tabFromPath(pathname: string): TabKey {
+  const raw = pathname.split("/").filter(Boolean)[1] || "identity";
+  switch (raw) {
+    case "super-agent": return "super_agent";
+    case "engines": return "engines";
+    case "memory": return "memory";
+    case "telegram": return "telegram";
+    case "devices": return "devices";
+    case "appearance": return "appearance";
+    case "config":
+    case "advanced": return "advanced";
+    default: return "identity";
+  }
+}
+
+function pathFromTab(tab: TabKey): string {
+  if (tab === "super_agent") return "super-agent";
+  if (tab === "advanced") return "config";
+  return tab;
+}