@agentprojectcontext/apx 1.80.2 → 1.89.1

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

@@ -1,202 +1,338 @@
 import { useEffect, useMemo, useState } from "react";
-import { AlertTriangle, ArrowRight, GitBranch, Pencil, Plus, Trash2 } from "lucide-react";
+import { AlertTriangle, ArrowRight, GitBranch, GripVertical, Pencil, Plus, Trash2 } from "lucide-react";
 import { Section } from "../Section";
-import { Badge, Button, Field, Loading } from "../ui";
-import { UiSelect } from "../UiSelect";
+import { Badge, Button, Loading } from "../ui";
+import { Tip } from "../ui/tip";
+import { Combobox, type ComboOption } from "../Combobox";
 import { ModelCombobox } from "../ModelCombobox";
 import { useToast } from "../Toast";
 import { useGlobalConfig, useSuperAgentConfig } from "../../hooks/useGlobalConfig";
-import { ENGINE_ICONS, ENGINE_PRESETS, type EngineType } from "./providers/typeStyles";
+import { useOllamaModels } from "../../hooks/useOllamaModels";
+import { ENGINE_ICONS, ENGINE_PRESETS, engineStyle, type EngineType } from "./providers/typeStyles";
+import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 interface ProviderInfo {
   slug: string;
   engine: EngineType;
+  label: string;
+  base_url?: string;
   default_model?: string;
+  /** is_active in config.engines — the switch on the provider card below. */
+  active: boolean;
+  /** Has what it needs to answer: an api key, or a reachable Ollama server. */
+  connected: boolean;
 }
 
+/** Payload type for a chain-row drag. Its own type (not text/plain) so text
+ *  dropped in from elsewhere is not mistaken for a reorder. */
+const DRAG_TYPE = "application/x-apx-chain-row";
+
+/** Why a row cannot be used, or null when it is fine. */
+type RowProblem = "missing" | "off" | "offline" | null;
+
 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 problemHint(problem: RowProblem, name: string): string {
+  if (problem === "missing") return t("router_panel.provider_not_configured", { name });
+  if (problem === "off") return t("router_panel.provider_off", { name });
+  if (problem === "offline") return t("router_panel.provider_offline", { name });
+  return "";
+}
+
+// Provider combobox + model combobox. Serializes to "provider:model".
+// Both sides accept free text: providers are a fixed list you normally pick
+// from, but a slug that is not configured (yet) must stay typeable.
 function ProviderModelPicker({
   value,
   onChange,
   providers,
+  ollamaModels,
 }: {
   value: string;
   onChange: (ref: string) => void;
   providers: ProviderInfo[];
+  ollamaModels: Record<string, string[]>;
 }) {
   const { provider, model } = splitRef(value);
   const current = providers.find((p) => p.slug === provider);
-  const providerInvalid = !!provider && !current;
+  const problem = rowProblem(provider, providers);
 
+  const providerOptions: ComboOption[] = useMemo(
+    () => providers.map((p) => ({
+      value: p.slug,
+      label: p.label,
+      // engineStyle falls back to the generic icon for an adapter this build
+      // does not know about yet.
+      icon: engineStyle(ENGINE_ICONS, p.engine),
+      // Only connected + active providers are pickable. The rest stay visible
+      // so it is obvious why they are not an option.
+      disabled: !p.active || !p.connected,
+      hint: !p.active ? t("router_panel.hint_off") : !p.connected ? t("router_panel.hint_offline") : undefined,
+    })),
+    [providers],
+  );
+
+  const isOllama = current?.engine === "ollama";
   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]);
+    if (!current) return [];
+    // Ollama's catalog is whatever that machine pulled — always live/cached.
+    if (isOllama) return ollamaModels[current.slug] || [];
+    const known = ENGINE_PRESETS[current.engine]?.known_models || [];
+    return Array.from(new Set([...(current.default_model ? [current.default_model] : []), ...known]));
+  }, [current, isOllama, ollamaModels]);
 
+  // Pre-fill the model when a provider is picked: its own default, else the
+  // engine's. Never the engine default for Ollama — that machine only has what
+  // it pulled, so the first live model is the only honest guess.
   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 || "";
+    const m = p?.default_model
+      || (p?.engine === "ollama"
+        ? (ollamaModels[slug] || [])[0] || ""
+        : 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
+      <Combobox
         value={provider}
-        onChange={setProvider}
-        placeholder={providerInvalid ? t("router_panel.provider_not_found", { name: provider }) : t("router_panel.provider_ph")}
-        options={providers.map((p) => ({ value: p.slug, label: p.slug, icon: ENGINE_ICONS[p.engine] }))}
+        onChange={(slug) => onChange(`${slug}:${model}`)}
+        onPick={setProvider}
+        options={providerOptions}
+        placeholder={t("router_panel.provider_ph")}
+        invalid={!!provider && !!problem}
+        invalidHint={problemHint(problem, provider)}
+        emptyHint={t("router_panel.no_providers")}
       />
       <ModelCombobox
         value={model}
-        onChange={setModel}
+        onChange={(m) => onChange(`${provider}:${m}`)}
         options={modelOptions}
-        invalid={providerInvalid}
-        invalidHint={t("router_panel.provider_not_configured", { name: provider })}
+        emptyHint={isOllama ? t("router_panel.ollama_empty") : undefined}
       />
     </div>
   );
 }
 
-// General model router (no per-task cases): primary model + ordered fallback
-// chain. Backed by super_agent.model + super_agent.model_fallback.models.
+function rowProblem(providerSlug: string, providers: ProviderInfo[]): RowProblem {
+  if (!providerSlug) return null;
+  const p = providers.find((x) => x.slug === providerSlug);
+  if (!p) return "missing";
+  if (!p.active) return "off";
+  if (!p.connected) return "offline";
+  return null;
+}
+
+// General model router (no per-task cases): one ordered chain where #1 is the
+// default model and the rest are tried in order when it fails. Backed by
+// super_agent.model (= #1) + super_agent.model_fallback.models (= the rest).
 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 [chain, setChain] = useState<string[]>([]);
+  const [newEntry, setNewEntry] = useState("");
   const [editIdx, setEditIdx] = useState<number | null>(null);
+  // Reordering: `armed` gates draggable so only the handle starts a drag —
+  // otherwise a row in edit mode would drag when you select text in its inputs.
+  const [dragArmed, setDragArmed] = useState(false);
+  const [dragFrom, setDragFrom] = useState<number | null>(null);
+  const [dragOver, setDragOver] = 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: [] });
+  const [saved, setSaved] = useState<string[]>([]);
 
   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 });
+    const f = superAgent.model_fallback?.models;
+    const rest = Array.isArray(f) ? f : [];
+    const next = superAgent.model ? [superAgent.model, ...rest] : rest;
+    setChain(next);
+    setSaved(next);
   }, [superAgent]);
 
+  const engines = useMemo(
+    () => (config.engines || {}) as Record<string, { engine?: string; name?: string; default_model?: string; base_url?: string; api_key?: string; is_active?: boolean }>,
+    [config.engines],
+  );
+
+  const ollamaTargets = useMemo(
+    () => Object.entries(engines)
+      .filter(([slug, v]) => ((v?.engine as EngineType) || (slug as EngineType)) === "ollama")
+      .map(([slug, v]) => ({ slug, base_url: v?.base_url })),
+    [engines],
+  );
+  const { models: ollamaModels, online: ollamaOnline } = useOllamaModels(ollamaTargets);
+
   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);
-  };
+    return Object.entries(engines).map(([slug, v]) => {
+      const engine = ((v?.engine as EngineType) || (slug as EngineType));
+      const name = v?.name || slug;
+      const hasKey = typeof v?.api_key === "string" && v.api_key.length > 0;
+      // Ollama/mock/custom need no key; for Ollama we know whether the server
+      // actually answered. `undefined` = still probing → assume reachable so
+      // the list does not flicker to "offline" on first paint.
+      const connected =
+        engine === "ollama" ? ollamaOnline[slug] !== false
+        : engine === "mock" ? true
+        : engine === "custom" ? hasKey || !!v?.base_url
+        : hasKey;
+      return {
+        slug,
+        engine,
+        label: name === engine ? name : `${name} (${engine})`,
+        base_url: v?.base_url,
+        default_model: v?.default_model,
+        active: v?.is_active !== false,
+        connected,
+      };
+    });
+  }, [engines, ollamaOnline]);
 
   if (isLoading || !superAgent) return <Loading />;
 
-  const dirty = model !== saved.model || JSON.stringify(fallback) !== JSON.stringify(saved.fallback);
+  const dirty = JSON.stringify(chain) !== JSON.stringify(saved);
 
   const submit = async () => {
     setBusy(true);
     try {
+      const [head, ...rest] = chain;
       await patch({
-        "super_agent.model": model,
-        "super_agent.model_fallback.enabled": fallback.length > 0,
-        "super_agent.model_fallback.models": fallback,
+        "super_agent.model": head || "",
+        "super_agent.model_fallback.enabled": rest.length > 0,
+        "super_agent.model_fallback.models": rest,
       });
       toast.success(t("router_panel.saved_toast"));
-      setSaved({ model, fallback });
+      setSaved(chain);
       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 addEntry = () => {
+    const v = newEntry.trim().replace(/:$/, "");
+    if (!v || !v.includes(":") || chain.includes(v)) return;
+    setChain([...chain, v]);
+    setNewEntry("");
   };
   const updateAt = (i: number, v: string) => {
-    const next = [...fallback];
+    const next = [...chain];
     next[i] = v;
-    setFallback(next);
+    setChain(next);
   };
-  const removeFallback = (i: number) => {
-    setFallback(fallback.filter((_, idx) => idx !== i));
+  const removeAt = (i: number) => {
+    setChain(chain.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);
+  const moveTo = (from: number, to: number) => {
+    if (from === to || to < 0 || to >= chain.length) return;
+    const next = [...chain];
+    const [row] = next.splice(from, 1);
+    next.splice(to, 0, row);
+    setChain(next);
+    // Keep an open editor pointed at the entry it was opened on.
+    if (editIdx === from) setEditIdx(to);
+    else if (editIdx !== null) setEditIdx(null);
   };
+  const endDrag = () => { setDragFrom(null); setDragOver(null); setDragArmed(false); };
 
   return (
     <Section
       title={t("router_panel.title")}
       description={t("router_panel.description")}
+      action={
+        <Button variant="primary" loading={busy} disabled={!dirty} onClick={submit}>
+          {dirty ? t("router_panel.save") : t("router_panel.saved")}
+        </Button>
+      }
     >
       <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} /> {t("router_panel.badge_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">{t("router_panel.no_providers")}</p>
-        ) : (
-          <Field label={t("router_panel.active_model_label")} hint={t("router_panel.active_model_hint")}>
-            <ProviderModelPicker value={model} onChange={setModel} providers={providers} />
-          </Field>
-        )}
+        {providers.length === 0 && <p className="text-xs text-muted-fg">{t("router_panel.no_providers")}</p>}
 
         <div className="rounded-lg border border-border bg-muted/20 p-3">
           <div className="mb-2">
-            <div className="text-sm font-medium">{t("router_panel.fallback_title")}</div>
-            <div className="text-xs text-muted-fg">{t("router_panel.fallback_desc")}</div>
+            <div className="text-sm font-medium">{t("router_panel.chain_title")}</div>
+            <div className="text-xs text-muted-fg">{t("router_panel.chain_desc")}</div>
           </div>
           <ul className="mb-3 space-y-1">
-            {fallback.map((m, i) => {
-              const invalid = !providerExists(m);
+            {chain.map((ref, i) => {
+              const { provider } = splitRef(ref);
+              const problem = rowProblem(provider, providers);
               const editing = editIdx === i;
               return (
-                <li key={`${i}-${m}`} className="rounded-md bg-card px-2 py-1.5 text-xs">
+                <li
+                  key={`${i}-${ref}`}
+                  draggable={dragArmed}
+                  onDragStart={(e) => { setDragFrom(i); e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData(DRAG_TYPE, String(i)); }}
+                  onDragOver={(e) => {
+                    if (!e.dataTransfer.types.includes(DRAG_TYPE)) return;
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = "move";
+                    setDragOver(i);
+                  }}
+                  onDragLeave={() => setDragOver((d) => (d === i ? null : d))}
+                  onDrop={(e) => {
+                    e.preventDefault();
+                    // The source index rides on the drag itself, so the drop
+                    // does not depend on React having committed dragFrom.
+                    const raw = e.dataTransfer.getData(DRAG_TYPE);
+                    const parsed = raw === "" ? NaN : Number(raw);
+                    const from = Number.isInteger(parsed) ? parsed : dragFrom;
+                    if (from !== null) moveTo(from, i);
+                    endDrag();
+                  }}
+                  onDragEnd={endDrag}
+                  className={cn(
+                    "rounded-md bg-card px-2 py-1.5 text-xs",
+                    // Armed = the pointer went down on a handle. Killing text
+                    // selection here keeps a drag from painting a blue streak
+                    // across every row it passes.
+                    dragArmed && "select-none",
+                    dragFrom === i && "opacity-50",
+                    dragOver === i && dragFrom !== i && "ring-1 ring-ring",
+                  )}
+                >
                   <div className="flex items-center gap-2">
-                    <span className="w-6 text-muted-fg">#{i + 1}</span>
+                    {/* Grab here to reorder; arrow keys do the same from the keyboard. */}
+                    <button
+                      type="button"
+                      aria-label={t("router_panel.reorder")}
+                      title={t("router_panel.reorder")}
+                      onMouseDown={() => setDragArmed(true)}
+                      onMouseUp={() => setDragArmed(false)}
+                      onKeyDown={(e) => {
+                        if (e.key === "ArrowUp") { e.preventDefault(); moveTo(i, i - 1); }
+                        if (e.key === "ArrowDown") { e.preventDefault(); moveTo(i, i + 1); }
+                      }}
+                      className="shrink-0 cursor-grab text-muted-fg hover:text-foreground active:cursor-grabbing"
+                    >
+                      <GripVertical size={13} />
+                    </button>
+                    <span className="w-6 shrink-0 text-muted-fg">#{i + 1}</span>
+                    {i === 0 && (
+                      <Badge tone="success" className="shrink-0"><GitBranch size={10} /> {t("router_panel.badge_default")}</Badge>
+                    )}
                     {editing ? (
                       <div className="flex-1">
-                        <ProviderModelPicker value={m} onChange={(v) => updateAt(i, v)} providers={providers} />
+                        <ProviderModelPicker value={ref} onChange={(v) => updateAt(i, v)} providers={providers} ollamaModels={ollamaModels} />
                       </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>
+                        <span className={`font-mono ${problem ? toneText.amber : ""}`}>{ref}</span>
+                        {problem && (
+                          <Tip content={problemHint(problem, provider)}>
+                            <span><AlertTriangle size={12} className={toneText.amber} /></span>
+                          </Tip>
+                        )}
                       </button>
                     )}
                     {editing ? (
@@ -204,29 +340,38 @@ export function DefaultRouterCard() {
                     ) : (
                       <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>
+                    <Button size="sm" variant="destructive" onClick={() => removeAt(i)}><Trash2 size={12} /></Button>
                   </div>
                 </li>
               );
             })}
-            {fallback.length === 0 && <li className="text-xs text-muted-fg">{t("router_panel.fallback_empty")}</li>}
+            {chain.length === 0 && <li className="text-xs text-muted-fg">{t("router_panel.chain_empty")}</li>}
           </ul>
           {providers.length > 0 && (
             <div className="space-y-2">
               <div className="text-xs text-muted-fg">{t("router_panel.add_to_chain")}</div>
-              <ProviderModelPicker value={newFallback} onChange={setNewFallback} providers={providers} />
-              <Button size="sm" variant="secondary" onClick={addFallback} disabled={!newFallback.includes(":") || newFallback.endsWith(":")}>
+              <ProviderModelPicker value={newEntry} onChange={setNewEntry} providers={providers} ollamaModels={ollamaModels} />
+              <Button size="sm" variant="secondary" onClick={addEntry} disabled={!newEntry.includes(":") || newEntry.endsWith(":")}>
                 <Plus size={13} /> {t("router_panel.add_to_chain")}
               </Button>
             </div>
           )}
         </div>
 
-        <Button variant="primary" loading={busy} disabled={!dirty} onClick={submit}>
-          {dirty ? t("router_panel.save") : t("router_panel.saved")}
-        </Button>
+        {/* Resolution preview: what the router will actually walk, in order. */}
+        <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} /> {t("router_panel.badge_default")}</Badge>
+          {chain.length === 0 && <span className="font-mono text-xs text-muted-fg">—</span>}
+          {chain.map((ref, i) => {
+            const problem = rowProblem(splitRef(ref).provider, providers);
+            return (
+              <span key={`${i}-${ref}`} className="flex items-center gap-2 text-muted-fg">
+                {i > 0 && <ArrowRight size={12} />}
+                <span className={`font-mono text-xs ${problem ? toneText.amber : ""}`}>{ref}</span>
+              </span>
+            );
+          })}
+        </div>
       </div>
     </Section>
   );

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

@@ -4,6 +4,8 @@ import useSWR from "swr";
 import { Section } from "../Section";
 import { Button, Field, Switch, Loading } from "../ui";
 import { UiSelect } from "../UiSelect";
+import { AgentModelSelect } from "../agents/AgentModelSelect";
+import { INHERIT_MODEL, isInheritedModel } from "../agents/modelCatalog";
 import { ShortcutInput } from "../ShortcutInput";
 import { DesktopStatusCard } from "../desktop/DesktopStatusCard";
 import { useToast } from "../Toast";
@@ -38,15 +40,16 @@ export function DesktopSettingsPanel() {
       shortcut?: string; enabled?: boolean;
       theme?: "light" | "dark" | "system";
       position?: "left" | "center" | "right";
+      model?: string;
     };
-    overlay?: { shortcut?: string }; // legacy fallback
   };
-  const savedShortcut = cfgView.desktop?.shortcut || cfgView.overlay?.shortcut || DEFAULT_SHORTCUT;
+  const savedShortcut = cfgView.desktop?.shortcut || DEFAULT_SHORTCUT;
   const enabled  = cfgView.desktop?.enabled !== false;
   // Default to "system" so the window follows the OS appearance until the
   // user explicitly pins light/dark.
   const theme    = cfgView.desktop?.theme    || "system";
   const position = cfgView.desktop?.position || "right";
+  const model    = cfgView.desktop?.model    || INHERIT_MODEL;
 
   const { data: autostart, mutate: mutateAutostart } = useSWR(
     "/api/desktop/autostart",
@@ -138,6 +141,37 @@ export function DesktopSettingsPanel() {
         )}
       </Section>
 
+      {/* Voice turns are answered by the super-agent, but they are answered out
+          loud and while someone waits — so this surface is allowed its own,
+          faster model without changing what Telegram or the routines use. */}
+      <Section
+        title={t("desktop_screen.model_title")}
+        description={t("modules_ui.desktop_model_desc")}
+      >
+        {cfgLoading ? <Loading /> : (
+          <Field
+            label={t("modules_ui.desktop_model")}
+            hint={t("modules_ui.desktop_model_hint")}
+          >
+            <AgentModelSelect
+              value={model}
+              onChange={(v) =>
+                patchKey(
+                  "desktop.model",
+                  // Empty, not the marker: the daemon reads `cfg.model || null`,
+                  // so an empty value is what "use the super-agent's" looks like
+                  // on its side.
+                  isInheritedModel(v) ? "" : v,
+                  t("modules_ui.desktop_model_set", {
+                    value: isInheritedModel(v) ? t("modules_ui.desktop_model_inherit") : v,
+                  })
+                )
+              }
+            />
+          </Field>
+        )}
+      </Section>
+
       <Section title={t("desktop_screen.appearance_title")} description={t("modules_ui.desktop_appearance_desc")}>
         {cfgLoading ? <Loading /> : (
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { QrCode } from "lucide-react";
+import { MonitorSmartphone, QrCode } from "lucide-react";
 import { Section } from "../Section";
 import { Badge, Button, Empty, Field, Input, Loading } from "../ui";
 import { useToast } from "../Toast";
@@ -7,6 +7,8 @@ import { useDevices } from "../../hooks/useDevices";
 import { Pair, getToken, setToken } from "../../lib/api";
 import { STORAGE } from "../../constants";
 import { PairDeviceDialog } from "./PairDeviceDialog";
+import { AccessPanel } from "./AccessPanel";
+import { ConfirmDialog } from "../common/ConfirmDialog";
 import { t } from "../../i18n";
 
 export function DevicesPanel() {
@@ -14,11 +16,12 @@ export function DevicesPanel() {
   const { clients, isLoading, mutate } = useDevices();
   const [pairOpen, setPairOpen] = useState(false);
   const [draftToken, setDraftToken] = useState("");
+  const [confirm, setConfirm] = useState<{ id: string } | null>(null);
 
-  const revoke = async (id: string) => {
-    if (!confirm(t("settings.devices_revoke_confirm", { id }))) return;
+  const doRevoke = async () => {
+    if (!confirm) return;
     try {
-      await Pair.revoke(id);
+      await Pair.revoke(confirm.id);
       toast.success(t("settings.devices_revoke_success"));
       mutate();
     } catch (e) {
@@ -37,6 +40,7 @@ export function DevicesPanel() {
 
   return (
     <div className="space-y-6">
+      <AccessPanel />
       <Section
         title={t("settings.devices")}
         description={t("settings.devices_sub")}
@@ -48,7 +52,7 @@ export function DevicesPanel() {
       >
         {isLoading && <Loading />}
         {!isLoading && clients.length === 0 && (
-          <Empty>{t("settings.devices_empty")}</Empty>
+          <Empty icon={MonitorSmartphone}>{t("settings.devices_empty")}</Empty>
         )}
         {clients.length > 0 && (
           <ul className="space-y-2 text-sm">
@@ -60,7 +64,7 @@ export function DevicesPanel() {
                 <span className="ml-auto text-xs text-muted-fg">
                   {t("settings.devices_last_seen")} {c.last_seen ? new Date(c.last_seen).toLocaleString() : t("settings.devices_never")}
                 </span>
-                <Button size="sm" variant="destructive" onClick={() => revoke(c.id)}>{t("settings.devices_revoke")}</Button>
+                <Button size="sm" variant="destructive" onClick={() => setConfirm({ id: c.id })}>{t("settings.devices_revoke")}</Button>
               </li>
             ))}
           </ul>
@@ -86,6 +90,15 @@ export function DevicesPanel() {
           <Button variant="primary" onClick={saveToken}>{t("common.save")}</Button>
         </div>
       </Section>
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doRevoke}
+        title={t("settings.devices_revoke_confirm", { id: confirm?.id ?? "" })}
+        confirmLabel={t("settings.devices_revoke")}
+        testId="device-revoke-confirm"
+      />
     </div>
   );
 }