@agentprojectcontext/apx 1.80.2 → 1.89.1

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

@@ -1,10 +1,13 @@
 import { useState } from "react";
 import useSWR from "swr";
-import { Sparkles, RefreshCw, Wand2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Sparkles, RefreshCw, Wand2, ArrowUpRight, ChevronDown, ChevronUp } from "lucide-react";
 import { Section } from "../Section";
 import { Button, Field, Input, Loading, Badge, Switch } from "../ui";
+import { cn } from "../../lib/cn";
 import { useToast } from "../Toast";
 import { Skills, type InspectTrace } from "../../lib/api/skills";
+import { Embeddings } from "../../lib/api/embeddings";
 import { t } from "../../i18n";
 
 // Skill Inspector — per-turn skill RAG middleware. When ON, the static
@@ -39,10 +42,14 @@ type NumericKnobs = {
 
 export function SkillsInspectorPanel() {
   const toast = useToast();
+  const navigate = useNavigate();
   const { data, mutate, isLoading } = useSWR("/api/skills/inspector", () => Skills.inspector());
+  const { data: providers } = useSWR("/api/embeddings/providers", () => Embeddings.providers());
   const [busy, setBusy] = useState(false);
   const [probe, setProbe] = useState("");
   const [probeResult, setProbeResult] = useState<InspectTrace | null>(null);
+  // Advanced (thresholds) starts collapsed — most turns never touch these.
+  const [advOpen, setAdvOpen] = useState(false);
 
   if (isLoading || !data) return <Loading />;
 
@@ -98,25 +105,22 @@ export function SkillsInspectorPanel() {
 
   return (
     <div className="space-y-6">
-      <div className="grid gap-6 lg:grid-cols-2 lg:items-start">
+      {/* 1 — Inspector: the ON switch sits top-right opposite the title; below it
+          the status and, folded in, the shared-embedder block + reindex. */}
       <Section
         title={t("settings_ui.inspector_title")}
         description={t("settings_ui.inspector_desc")}
+        action={
+          <Switch
+            checked={cfg.enabled}
+            disabled={busy}
+            onChange={(v) => apply({ enabled: v })}
+            label={cfg.enabled ? t("settings_ui.on") : t("settings_ui.off")}
+          />
+        }
       >
         <div className="space-y-4">
-          <Field
-            label={t("settings_ui.enable_inspector")}
-            hint={t("settings_ui.enable_inspector_hint")}
-          >
-            <Switch
-              checked={cfg.enabled}
-              disabled={busy}
-              onChange={(v) => apply({ enabled: v })}
-              label={cfg.enabled ? t("settings_ui.on") : t("settings_ui.off")}
-            />
-          </Field>
-
-          <div className="flex flex-wrap items-center gap-2 pt-1">
+          <div className="flex flex-wrap items-center gap-2">
             <Badge tone={idx.count > 0 ? "success" : "warning"}>
               {t("settings_ui.index_count", { n: idx.count })}
             </Badge>
@@ -129,35 +133,71 @@ export function SkillsInspectorPanel() {
             ) : null}
           </div>
 
-          <div className="flex flex-wrap items-center gap-3 pt-1">
+          <div className="flex flex-wrap items-center gap-3">
             <Button variant="secondary" onClick={() => runIndex(false)} loading={busy}>
               <RefreshCw size={14} /> {t("settings_ui.reindex")}
             </Button>
             <Button variant="secondary" onClick={() => runIndex(true)} loading={busy}>
               <RefreshCw size={14} /> {t("settings_ui.reindex_forced")}
             </Button>
-            <span className="text-xs text-muted-foreground">
-              {t("settings_ui.embedder_source")}
-            </span>
           </div>
+
+          {/* The embedder is shared with Memory (RAG) — one engine for the whole
+              daemon. Surface which one is live now and where to change it, and
+              flag when the index was built with a different one (needs reindex). */}
+          {(() => {
+            // The embedder a real call lands on now (probed server-side) — the
+            // honest "active", so a rate-limited gemini that actually falls to
+            // ollama shows ollama, not gemini.
+            const active = providers?.active_embedder || "";
+            const indexTag = idx.embedder || "";
+            const stale = !!indexTag && !!active && indexTag !== active;
+            return (
+              <div className="space-y-1.5 rounded-md border border-border/60 bg-muted/20 p-3 text-xs">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="font-medium text-foreground">
+                    {t("settings_ui.embedder_shared_title")}
+                  </span>
+                  {active ? (
+                    <Badge tone={active === "tf" ? "warning" : "success"}>{active}</Badge>
+                  ) : null}
+                  <button
+                    type="button"
+                    onClick={() => navigate("/settings/memory")}
+                    className="inline-flex items-center gap-1 font-medium text-sky-700 hover:underline dark:text-sky-400"
+                  >
+                    {t("settings_ui.embedder_configure")} <ArrowUpRight size={12} />
+                  </button>
+                </div>
+                <p className="text-muted-foreground">{t("settings_ui.embedder_shared_desc")}</p>
+                {stale ? (
+                  <p className="text-amber-600 dark:text-amber-400">
+                    {t("settings_ui.embedder_stale", { index: indexTag, active })}
+                  </p>
+                ) : null}
+              </div>
+            );
+          })()}
         </div>
       </Section>
 
+      {/* 2 — Test (dry-run): dimmed + inert when the inspector is off, like the
+          Advanced limits below. */}
       <Section
         title={t("settings_ui.test_title")}
         description={t("settings_ui.test_desc")}
       >
-        <div className="space-y-3">
+        <div className={cn("space-y-3", !cfg.enabled && "pointer-events-none opacity-50")}>
           <div className="flex flex-wrap items-center gap-2">
             <Input
               value={probe}
               placeholder={t("settings_ui.test_placeholder")}
-              disabled={busy}
+              disabled={busy || !cfg.enabled}
               onChange={(ev) => setProbe(ev.target.value)}
               onKeyDown={(ev) => { if (ev.key === "Enter") runProbe(); }}
               className="max-w-xl flex-1"
             />
-            <Button variant="primary" onClick={runProbe} loading={busy}>
+            <Button variant="primary" onClick={runProbe} loading={busy} disabled={busy || !cfg.enabled}>
               <Wand2 size={14} /> {t("settings_ui.test_btn")}
             </Button>
           </div>
@@ -202,31 +242,50 @@ export function SkillsInspectorPanel() {
           )}
         </div>
       </Section>
-      </div>
 
+      {/* 3 — Advanced: the thresholds, collapsed by default so they don't tire the
+          eye, and dimmed + inert when the inspector is off. */}
       <Section
-        title={t("settings_ui.thresholds_title")}
+        title={t("settings_ui.advanced_title")}
         description={t("settings_ui.thresholds_desc")}
+        action={
+          <button
+            type="button"
+            onClick={() => setAdvOpen((o) => !o)}
+            aria-expanded={advOpen}
+            className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+          >
+            {advOpen ? t("settings_ui.hide") : t("settings_ui.show")}
+            {advOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+          </button>
+        }
       >
-        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-4">
-          {knobs().map((k) => (
-            <Field key={k.key} label={k.label} hint={k.hint}>
-              <Input
-                type="number"
-                step={k.step}
-                min={k.min}
-                max={k.max}
-                defaultValue={String(cfg[k.key])}
-                disabled={busy}
-                onBlur={(ev) => {
-                  const n = Number(ev.target.value);
-                  if (Number.isFinite(n) && n !== cfg[k.key]) apply({ [k.key]: n });
-                }}
-                className="max-w-[12rem]"
-              />
-            </Field>
-          ))}
-        </div>
+        {advOpen ? (
+          <div
+            className={cn(
+              "grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-4",
+              !cfg.enabled && "pointer-events-none opacity-50",
+            )}
+          >
+            {knobs().map((k) => (
+              <Field key={k.key} label={k.label} hint={k.hint}>
+                <Input
+                  type="number"
+                  step={k.step}
+                  min={k.min}
+                  max={k.max}
+                  defaultValue={String(cfg[k.key])}
+                  disabled={busy || !cfg.enabled}
+                  onBlur={(ev) => {
+                    const n = Number(ev.target.value);
+                    if (Number.isFinite(n) && n !== cfg[k.key]) apply({ [k.key]: n });
+                  }}
+                  className="max-w-[12rem]"
+                />
+              </Field>
+            ))}
+          </div>
+        ) : null}
       </Section>
     </div>
   );

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

@@ -1,8 +1,8 @@
-import { useMemo, useRef, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import useSWR from "swr";
 import {
   ChevronDown, Code2, FileText, GitBranch, Lock, PencilLine,
-  Plus, RotateCcw, Trash2, Upload,
+  Plus, Trash2, Upload,
 } from "lucide-react";
 import { Button, Field, Input, Textarea, Switch, Badge, Loading, Tip, Dialog } from "../ui";
 import { UiSelect } from "../UiSelect";
@@ -10,6 +10,7 @@ import {
   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
 } from "../ui/dropdown-menu";
 import { useToast } from "../Toast";
+import { ConfirmDialog } from "../common/ConfirmDialog";
 import { Skills, type SkillEntry } from "../../lib/api/skills";
 import { Projects } from "../../lib/api/projects";
 import { t } from "../../i18n";
@@ -29,12 +30,31 @@ function basename(p: string): string {
   return parts[parts.length - 1] || p;
 }
 
-function sourceBadge(source: string): { label: string; tone: "info" | "success" | "muted" } {
-  if (source === "builtin") return { label: t("skills_page.source_builtin"), tone: "info" };
-  if (source === "project") return { label: t("skills_page.source_project"), tone: "success" };
+function sourceBadge(source: string, origin?: string | null): { label: string; tone: "info" | "success" | "muted" } {
+  const host = origin || source;
+  if (source === "builtin" || host === "apx" || host === "builtin") {
+    return { label: t("skills_page.source_builtin"), tone: "info" };
+  }
+  if (source === "project" || host === "project") {
+    return { label: t("skills_page.source_project"), tone: "success" };
+  }
+  if (host === "claude") return { label: t("skills_page.origin_claude"), tone: "muted" };
+  if (host === "cursor") return { label: t("skills_page.origin_cursor"), tone: "muted" };
+  if (host === "codex") return { label: t("skills_page.origin_codex"), tone: "muted" };
+  if (host === "agents") return { label: t("skills_page.origin_agents"), tone: "muted" };
   return { label: t("skills_page.source_global"), tone: "muted" };
 }
 
+function addedByLabel(detail: { private?: boolean; origin?: string | null }): string {
+  if (detail.private || detail.origin === "apx") return t("skills_page.by_apx");
+  if (detail.origin === "claude") return t("skills_page.origin_claude");
+  if (detail.origin === "cursor") return t("skills_page.origin_cursor");
+  if (detail.origin === "codex") return t("skills_page.origin_codex");
+  if (detail.origin === "agents") return t("skills_page.origin_agents");
+  if (detail.origin === "project") return t("skills_page.source_project");
+  return t("skills_page.by_you");
+}
+
 // ---------------------------------------------------------------------------
 // Minimal Markdown renderer (no dependency) — headings, lists, code, bold.
 // ---------------------------------------------------------------------------
@@ -115,17 +135,30 @@ function fileToBase64(file: File): Promise<string> {
 // Main
 // ---------------------------------------------------------------------------
 
-export function SkillsManager({ scope: fixedScope, selectable = false }: { scope?: string; selectable?: boolean }) {
+export function SkillsManager({
+  scope: fixedScope,
+  selectable = false,
+  initialSlug,
+}: {
+  scope?: string;
+  selectable?: boolean;
+  /** Open on this skill instead of the first one — how a chat badge's
+   *  "open skill" lands on the row it named. */
+  initialSlug?: string;
+}) {
   const toast = useToast();
   const [scopeState, setScopeState] = useState<string>(fixedScope ?? SUPER);
   const scope = fixedScope ?? scopeState;
   const projectPath = scope === SUPER ? undefined : scope;
 
   const [busy, setBusy] = useState(false);
-  const [picked, setPicked] = useState<string | null>(null);
+  const [picked, setPicked] = useState<string | null>(initialSlug ?? null);
+  // A second arrival (another badge, same screen already mounted) re-picks.
+  useEffect(() => { if (initialSlug) setPicked(initialSlug); }, [initialSlug]);
   const [view, setView] = useState<"preview" | "source">("preview");
   const [createOpen, setCreateOpen] = useState(false);
   const [repoOpen, setRepoOpen] = useState(false);
+  const [confirm, setConfirm] = useState<{ slug: string } | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
   const { data: projects } = useSWR(selectable ? "/api/projects" : null, () => Projects.list());
@@ -152,8 +185,9 @@ export function SkillsManager({ scope: fixedScope, selectable = false }: { scope
     finally { setBusy(false); }
   };
 
-  const remove = async (slug: string) => {
-    if (!window.confirm(t("skills_page.delete_confirm", { slug }))) return;
+  const doRemove = async () => {
+    if (!confirm) return;
+    const { slug } = confirm;
     setBusy(true);
     try {
       await Skills.remove(slug, projectPath);
@@ -190,9 +224,13 @@ export function SkillsManager({ scope: fixedScope, selectable = false }: { scope
   };
 
   return (
-    <div className="space-y-4">
+    // TabLayout gives the routed content a definite height, so the screen can
+    // fill it: header fixed, list and viewer sharing what is left and scrolling
+    // inside themselves. The 62vh this used to hardcode left dead space below
+    // the panes on a tall window and squashed them on a short one.
+    <div className="flex h-full min-h-[34rem] flex-col gap-4">
       {/* Header: scope + count + Add */}
-      <div className="flex flex-wrap items-center justify-between gap-3">
+      <div className="flex shrink-0 flex-wrap items-center justify-between gap-3">
         <div className="flex flex-wrap items-center gap-3">
           {selectable ? (
             <div className="w-64">
@@ -233,10 +271,10 @@ export function SkillsManager({ scope: fixedScope, selectable = false }: { scope
       {isLoading || !data ? (
         <Loading />
       ) : (
-        <div className="grid min-h-[62vh] gap-4 lg:grid-cols-[20rem_1fr]">
+        <div className="grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] gap-4 lg:grid-cols-[20rem_1fr] lg:grid-rows-1">
           {/* List */}
-          <div className="overflow-hidden rounded-xl border border-border bg-card">
-            <ul className="max-h-[62vh] divide-y divide-border overflow-y-auto">
+          <div className="flex min-h-0 flex-col overflow-hidden rounded-xl border border-border bg-card">
+            <ul className="max-h-72 flex-1 divide-y divide-border overflow-y-auto lg:max-h-none">
               {skills.length === 0 ? (
                 <li className="px-3 py-4 text-sm text-muted-fg">{t("skills_page.empty")}</li>
               ) : skills.map((s) => (
@@ -248,21 +286,21 @@ export function SkillsManager({ scope: fixedScope, selectable = false }: { scope
           </div>
 
           {/* Viewer */}
-          <div className="min-w-0 overflow-hidden rounded-xl border border-border bg-card">
+          <div className="flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-card">
             {!selected ? (
-              <div className="grid h-full place-items-center p-8 text-sm text-muted-fg">
+              <div className="grid min-h-0 flex-1 place-items-center p-8 text-sm text-muted-fg">
                 {t("skills_page.select_a_skill")}
               </div>
             ) : !detail ? (
               <div className="p-6"><Loading /></div>
             ) : (
-              <div className="flex h-full max-h-[62vh] flex-col">
+              <div className="flex min-h-0 flex-1 flex-col">
                 {/* Viewer header */}
                 <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-4">
                   <div className="min-w-0">
                     <div className="flex flex-wrap items-center gap-2">
                       <code className="text-sm font-semibold">{detail.slug}</code>
-                      {(() => { const b = sourceBadge(detail.source); return <Badge tone={b.tone}>{b.label}</Badge>; })()}
+                      {(() => { const b = sourceBadge(detail.source, detail.origin); return <Badge tone={b.tone}>{b.label}</Badge>; })()}
                       {detail.private && (
                         <span className="inline-flex items-center gap-1 text-xs text-muted-fg">
                           <Lock size={11} /> {t("skills_page.private_badge")}
@@ -274,16 +312,24 @@ export function SkillsManager({ scope: fixedScope, selectable = false }: { scope
                     )}
                     <div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-fg">
                       <span>{t("skills_page.added_by")}: <span className="text-foreground">
-                        {detail.private ? t("skills_page.by_apx") : t("skills_page.by_you")}</span></span>
+                        {addedByLabel(detail)}</span></span>
                       <span>{t("skills_page.activator")}: <span className="text-foreground">
                         {t("skills_page.activator_value")}</span></span>
                     </div>
+                    {(detail.origin_path || detail.file) && (
+                      <p className="mt-1.5 font-mono text-[11px] leading-snug text-muted-fg break-all">
+                        {t("skills_page.path_label")}: {detail.origin_path || detail.file}
+                        {detail.file_path && detail.origin_path && detail.file_path !== detail.origin_path
+                          ? ` · ${t("skills_page.path_apx_link")}: ${detail.file_path}`
+                          : null}
+                      </p>
+                    )}
                   </div>
                   <div className="flex shrink-0 items-center gap-2">
                     {(detail.source === "global" || detail.source === "project") && (
                       <Tip content={t("skills_page.delete_btn")}>
                         <Button variant="ghost" size="sm" disabled={busy}
-                          onClick={() => remove(detail.slug)} aria-label={t("skills_page.delete_btn")}>
+                          onClick={() => setConfirm({ slug: detail.slug })} aria-label={t("skills_page.delete_btn")}>
                           <Trash2 size={14} />
                         </Button>
                       </Tip>
@@ -324,6 +370,15 @@ export function SkillsManager({ scope: fixedScope, selectable = false }: { scope
         onCreate={createSkill} />
       <RepoDialog open={repoOpen} onClose={() => setRepoOpen(false)}
         onImport={importRepo} />
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doRemove}
+        title={t("skills_page.delete_confirm", { slug: confirm?.slug ?? "" })}
+        confirmLabel={t("common.delete")}
+        testId="skill-delete-confirm"
+      />
     </div>
   );
 }
@@ -357,7 +412,7 @@ function SkillRow({ skill, active, busy, onSelect, onToggle }: {
   skill: SkillEntry; active: boolean; busy: boolean;
   onSelect: () => void; onToggle: (v: boolean) => void;
 }) {
-  const b = sourceBadge(skill.source);
+  const b = sourceBadge(skill.source, skill.origin);
   const enabled = skill.private ? true : skill.enabled !== false;
   return (
     <li>

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

@@ -19,16 +19,23 @@ export function SkillsSettings() {
     setParams(next, { replace: true });
   };
 
+  // The manager fills the height it is given (list + viewer scroll inside it);
+  // the RAG panel is an ordinary settings form and keeps its natural height.
+  const fill = tab === "manager";
   return (
-    <div className="space-y-5">
-      <div className="flex items-center gap-1 border-b border-border">
+    <div className={`flex flex-col gap-5 ${fill ? "h-full" : ""}`}>
+      <div className="flex shrink-0 items-center gap-1 border-b border-border">
         <SubTab active={tab === "manager"} onClick={() => setTab("manager")}
           icon={Sparkles} label={t("skills_page.manager_tab")} />
         <SubTab active={tab === "rag"} onClick={() => setTab("rag")}
           icon={SlidersHorizontal} label={t("skills_page.rag_tab")} />
       </div>
 
-      {tab === "manager" ? <SkillsManager selectable /> : <SkillsInspectorPanel />}
+      {fill ? (
+        <div className="min-h-0 flex-1"><SkillsManager selectable /></div>
+      ) : (
+        <SkillsInspectorPanel />
+      )}
     </div>
   );
 }

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

@@ -9,6 +9,8 @@ import { useGlobalConfig, useSuperAgentConfig } from "../../hooks/useGlobalConfi
 import { useIdentity } from "../../hooks/useIdentity";
 import { PERMISSION_MODES } from "../../constants";
 import { t } from "../../i18n";
+import { AgentIconPicker } from "../agents/AgentFormFields";
+import { SUPER_AGENT_ICON } from "../agents/AgentAvatar";
 
 export function SuperAgentPanel() {
   const toast = useToast();
@@ -20,6 +22,7 @@ export function SuperAgentPanel() {
   const [enabled, setEnabled] = useState(true);
   const [system, setSystem] = useState("");
   const [personality, setPersonality] = useState("");
+  const [icon, setIcon] = useState(SUPER_AGENT_ICON);
   const [perm, setPerm] = useState<string>("permiso");
   const [busy, setBusy] = useState(false);
 
@@ -28,6 +31,7 @@ export function SuperAgentPanel() {
     setEnabled(!!superAgent.enabled);
     setSystem(superAgent.system || "");
     setPerm(superAgent.permission_mode || "permiso");
+    setIcon(superAgent.icon || SUPER_AGENT_ICON);
   }, [superAgent]);
 
   useEffect(() => {
@@ -43,6 +47,7 @@ export function SuperAgentPanel() {
         "super_agent.enabled":          enabled,
         "super_agent.system":           system,
         "super_agent.permission_mode":  perm,
+        "super_agent.icon":             icon,
       }, ["super_agent.name"]);
       await saveIdentity({ personality });
       toast.success(t("settings.super_agent.saved"));
@@ -73,6 +78,9 @@ export function SuperAgentPanel() {
         <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.avatar")} hint={t("settings.super_agent.avatar_hint")}>
+          <AgentIconPicker icon={icon} onIcon={(next) => setIcon(next || SUPER_AGENT_ICON)} />
+        </Field>
         <Field label={t("settings.super_agent.personality")}>
           <Textarea rows={2} value={personality} onChange={(e) => setPersonality(e.target.value)} />
         </Field>

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

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { Plus, Send } from "lucide-react";
 import { Section } from "../Section";
 import { Badge, Button, Empty, Loading } from "../ui";
+import { ConfirmDialog } from "../common/ConfirmDialog";
 import { useToast } from "../Toast";
 import { useTelegramChannels, useTelegramContacts } from "../../hooks/useTelegram";
 import { Telegram } from "../../lib/api";
@@ -23,13 +24,13 @@ export function TelegramChannelsPanel() {
 
   const [editing, setEditing] = useState<TelegramChannel | null>(null);
   const [sendTarget, setSendTarget] = useState<TelegramChannel | null>(null);
+  const [confirm, setConfirm] = useState<{ name: string } | 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); }
   };
@@ -61,7 +62,7 @@ export function TelegramChannelsPanel() {
                     <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>
+                  <Button size="sm" variant="destructive" onClick={() => setConfirm({ name: c.name })}>{t("common.delete")}</Button>
                 </div>
               </div>
               <div className="mt-1 grid grid-cols-2 gap-2 text-xs text-muted-fg">
@@ -85,6 +86,14 @@ export function TelegramChannelsPanel() {
         channel={sendTarget}
         onClose={() => setSendTarget(null)}
       />
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) return remove(confirm.name); }}
+        title={t("telegram_channels.delete_confirm", { name: confirm?.name ?? "" })}
+        confirmLabel={t("common.delete")}
+        testId="telegram-channel-delete-confirm"
+      />
     </Section>
   );
 }

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

@@ -2,8 +2,11 @@
 // role assignment. Used in both Settings → Telegram → Contactos and in the
 // APX admin screen — shared so they can't drift apart.
 
+import { useState } from "react";
 import { Section } from "../Section";
-import { Badge, Button, Empty, Loading, Select } from "../ui";
+import { Badge, Button, Empty, Loading } from "../ui";
+import { ConfirmDialog } from "../common/ConfirmDialog";
+import { UiSelect } from "../UiSelect";
 import { Tip } from "../ui/tip";
 import { useToast } from "../Toast";
 import { useTelegramContacts } from "../../hooks/useTelegram";
@@ -19,6 +22,7 @@ interface Props {
 export function TelegramContactsPanel({ bare = false }: Props) {
   const toast = useToast();
   const { contacts, roles, channelOwners, isLoading, mutate } = useTelegramContacts();
+  const [confirm, setConfirm] = useState<TelegramContact | null>(null);
 
   const ownerIds = new Set(
     channelOwners.filter((o) => o.owner_user_id != null).map((o) => String(o.owner_user_id)),
@@ -34,7 +38,6 @@ export function TelegramContactsPanel({ bare = false }: Props) {
     } 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); }
   };
@@ -60,15 +63,15 @@ export function TelegramContactsPanel({ bare = false }: Props) {
                   </div>
                   <div className="flex items-center gap-2">
                     <Tip content={isOwner ? t("telegram_contacts.owner_hint") : t("telegram_contacts.assign_role")}>
-                      <Select
+                      <UiSelect
                         value={effectiveRole}
                         disabled={isOwner}
-                        onChange={(e) => setRole(c, e.target.value)}
-                      >
-                        {roleNames.map((r) => <option key={r} value={r}>{r}</option>)}
-                      </Select>
+                        onChange={(v) => setRole(c, v)}
+                        options={roleNames.map((r) => ({ value: r, label: r }))}
+                        className="w-36"
+                      />
                     </Tip>
-                    <Button size="sm" variant="destructive" onClick={() => remove(c)}>{t("common.delete")}</Button>
+                    <Button size="sm" variant="destructive" onClick={() => setConfirm(c)}>{t("common.delete")}</Button>
                   </div>
                 </div>
                 <div className="mt-1 grid grid-cols-3 gap-2 text-xs text-muted-fg">
@@ -81,6 +84,14 @@ export function TelegramContactsPanel({ bare = false }: Props) {
           })}
         </ul>
       )}
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) return remove(confirm); }}
+        title={t("telegram_contacts.delete_confirm", { name: confirm?.name || String(confirm?.user_id ?? "") })}
+        confirmLabel={t("common.delete")}
+        testId="telegram-contact-delete-confirm"
+      />
     </>
   );
 

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

@@ -6,6 +6,7 @@ import { useState } from "react";
 import { Plus } from "lucide-react";
 import { Section } from "../Section";
 import { Badge, Button, Empty, Field, Input, Loading, Switch } from "../ui";
+import { ConfirmDialog } from "../common/ConfirmDialog";
 import { useToast } from "../Toast";
 import { useTelegramContacts } from "../../hooks/useTelegram";
 import { Telegram } from "../../lib/api";
@@ -20,6 +21,7 @@ export function TelegramRolesPanel() {
   const [toolsRaw, setToolsRaw] = useState("");
   const [allTools, setAllTools] = useState(false);
   const [busy, setBusy] = useState(false);
+  const [confirm, setConfirm] = useState<{ name: string } | null>(null);
 
   const submit = async () => {
     const n = name.trim();
@@ -37,7 +39,6 @@ export function TelegramRolesPanel() {
   };
 
   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); }
   };
@@ -68,7 +69,7 @@ export function TelegramRolesPanel() {
                     {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>
+                    <Button size="sm" variant="destructive" onClick={() => setConfirm({ name: n })}>{t("telegram_roles.delete_btn")}</Button>
                   )}
                 </div>
                 <div className="mt-1 text-xs text-muted-fg">{t("telegram_contacts.tools_label")} {toolsLabel}</div>
@@ -103,6 +104,15 @@ export function TelegramRolesPanel() {
           <Button variant="primary" loading={busy} onClick={submit}>{t("telegram_roles.save_btn")}</Button>
         </div>
       </div>
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) return remove(confirm.name); }}
+        title={t("telegram_roles.delete_confirm", { name: confirm?.name ?? "" })}
+        confirmLabel={t("common.delete")}
+        testId="telegram-role-delete-confirm"
+      />
     </Section>
   );
 }