zevairouter 1.0.146 → 1.0.148

package/cli/hooks/cloakbrowserRuntime.js

@@ -39,6 +39,91 @@ function hasPackage(name) {
   return fs.existsSync(path.join(getRuntimeNodeModules(), name, "package.json"));
 }
 
+function parseSemver(value) {
+  const match = String(value || "").trim().match(
+    /^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+[0-9A-Za-z.-]+)?$/
+  );
+  if (!match) return null;
+  return {
+    major: Number.parseInt(match[1], 10),
+    minor: Number.parseInt(match[2], 10),
+    patch: Number.parseInt(match[3], 10),
+    prerelease: match[4] ? match[4].split(".") : [],
+  };
+}
+
+function comparePrerelease(left, right) {
+  if (left.length === 0 && right.length === 0) return 0;
+  if (left.length === 0) return 1;
+  if (right.length === 0) return -1;
+
+  const count = Math.max(left.length, right.length);
+  for (let i = 0; i < count; i += 1) {
+    if (left[i] === undefined) return -1;
+    if (right[i] === undefined) return 1;
+    if (left[i] === right[i]) continue;
+
+    const leftNumeric = /^\d+$/.test(left[i]);
+    const rightNumeric = /^\d+$/.test(right[i]);
+    if (leftNumeric && rightNumeric) {
+      return Number.parseInt(left[i], 10) < Number.parseInt(right[i], 10) ? -1 : 1;
+    }
+    if (leftNumeric !== rightNumeric) return leftNumeric ? -1 : 1;
+    return left[i] < right[i] ? -1 : 1;
+  }
+  return 0;
+}
+
+function compareSemver(left, right) {
+  for (const key of ["major", "minor", "patch"]) {
+    if (left[key] !== right[key]) return left[key] < right[key] ? -1 : 1;
+  }
+  return comparePrerelease(left.prerelease, right.prerelease);
+}
+
+function satisfiesCaretRange(version, range) {
+  const installed = parseSemver(version);
+  const rangeMatch = String(range || "").trim().match(/^\^\s*(.+)$/);
+  const minimum = parseSemver(rangeMatch?.[1]);
+  if (!installed || !minimum) return false;
+
+  // Stable runtime requirements must never accept a prerelease implicitly.
+  if (installed.prerelease.length > 0 && minimum.prerelease.length === 0) return false;
+
+  let upper;
+  if (minimum.major > 0) {
+    upper = { major: minimum.major + 1, minor: 0, patch: 0, prerelease: [] };
+  } else if (minimum.minor > 0) {
+    upper = { major: 0, minor: minimum.minor + 1, patch: 0, prerelease: [] };
+  } else {
+    upper = { major: 0, minor: 0, patch: minimum.patch + 1, prerelease: [] };
+  }
+
+  return compareSemver(installed, minimum) >= 0 && compareSemver(installed, upper) < 0;
+}
+
+function getRuntimePackageVersion(name) {
+  try {
+    const packageJson = JSON.parse(
+      fs.readFileSync(path.join(getRuntimeNodeModules(), name, "package.json"), "utf8")
+    );
+    return typeof packageJson.version === "string" ? packageJson.version : null;
+  } catch {
+    return null;
+  }
+}
+
+function isCloakbrowserRuntimeCompatible(mod, installedVersion) {
+  return !!mod?.launch && satisfiesCaretRange(installedVersion, CLOAKBROWSER_VERSION);
+}
+
+function clearRuntimePackageCache(name) {
+  const packageRoot = `${path.join(getRuntimeNodeModules(), name)}${path.sep}`;
+  for (const modulePath of Object.keys(require.cache)) {
+    if (modulePath.startsWith(packageRoot)) delete require.cache[modulePath];
+  }
+}
+
 function tryRequireCloakbrowser() {
   try {
     const rreq = getRuntimeRequire();
@@ -83,7 +168,13 @@ function loadCloakbrowserModule() {
  * playwright-core is the drive peer (no stock Chromium binary download).
  */
 function ensureCloakbrowserRuntime({ silent = false } = {}) {
-  if (cachedReady?.ok && cachedReady.module && tryRequireMmdb() && hasPackage(PLAYWRIGHT_CORE_PACKAGE)) {
+  let installedCloakVersion = getRuntimePackageVersion(CLOAKBROWSER_PACKAGE);
+  if (
+    cachedReady?.ok
+    && isCloakbrowserRuntimeCompatible(cachedReady.module, installedCloakVersion)
+    && tryRequireMmdb()
+    && hasPackage(PLAYWRIGHT_CORE_PACKAGE)
+  ) {
     return cachedReady;
   }
 
@@ -94,7 +185,6 @@ function ensureCloakbrowserRuntime({ silent = false } = {}) {
       process.env.NODE_PATH = env.NODE_PATH;
       // Re-init module paths for already-running process
       try {
-        // eslint-disable-next-line no-underscore-dangle
         require("module").Module._initPaths();
       } catch {
         /* ignore */
@@ -105,7 +195,7 @@ function ensureCloakbrowserRuntime({ silent = false } = {}) {
   }
 
   let mod = tryRequireCloakbrowser();
-  const needCloak = !mod?.launch;
+  const needCloak = !isCloakbrowserRuntimeCompatible(mod, installedCloakVersion);
   const needMmdb = !tryRequireMmdb() && !hasPackage(MMDB_PACKAGE);
   const needPwCore = !hasPackage(PLAYWRIGHT_CORE_PACKAGE);
 
@@ -133,9 +223,12 @@ function ensureCloakbrowserRuntime({ silent = false } = {}) {
       err.code = "CLOAKBROWSER_INSTALL_FAILED";
       return { ok: false, error: err };
     }
+
+    if (needCloak) clearRuntimePackageCache(CLOAKBROWSER_PACKAGE);
   }
 
   mod = tryRequireCloakbrowser();
+  installedCloakVersion = getRuntimePackageVersion(CLOAKBROWSER_PACKAGE);
   if (!mod?.launch) {
     const err = new Error(
       `cloakbrowser installed but launch() is missing. Reinstall: cd "${getRuntimeDir()}" && npm install ${CLOAKBROWSER_PACKAGE}@${CLOAKBROWSER_VERSION} ${MMDB_PACKAGE}@${MMDB_VERSION} ${PLAYWRIGHT_CORE_PACKAGE}@${PLAYWRIGHT_CORE_VERSION}`
@@ -144,6 +237,14 @@ function ensureCloakbrowserRuntime({ silent = false } = {}) {
     return { ok: false, error: err };
   }
 
+  if (!satisfiesCaretRange(installedCloakVersion, CLOAKBROWSER_VERSION)) {
+    const err = new Error(
+      `cloakbrowser version mismatch: installed ${installedCloakVersion || "unknown"}, required ${CLOAKBROWSER_VERSION}. Reinstall: cd "${getRuntimeDir()}" && npm install ${CLOAKBROWSER_PACKAGE}@${CLOAKBROWSER_VERSION}`
+    );
+    err.code = "CLOAKBROWSER_VERSION_MISMATCH";
+    return { ok: false, error: err };
+  }
+
   if (!tryRequireMmdb() && !hasPackage(MMDB_PACKAGE)) {
     const err = new Error(
       `mmdb-lib is required for geoip: true. Install: cd "${getRuntimeDir()}" && npm install ${MMDB_PACKAGE}@${MMDB_VERSION}`
@@ -152,7 +253,7 @@ function ensureCloakbrowserRuntime({ silent = false } = {}) {
     return { ok: false, error: err };
   }
 
-  cachedReady = { ok: true, module: mod };
+  cachedReady = { ok: true, module: mod, version: installedCloakVersion };
   return cachedReady;
 }
 
@@ -165,4 +266,10 @@ module.exports = {
   MMDB_VERSION,
   PLAYWRIGHT_CORE_PACKAGE,
   PLAYWRIGHT_CORE_VERSION,
+  __test__: {
+    parseSemver,
+    compareSemver,
+    satisfiesCaretRange,
+    isCloakbrowserRuntimeCompatible,
+  },
 };

package/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zevairouter-cli",
-  "version": "1.0.146",
+  "version": "1.0.148",
   "description": "ZevaiRouter CLI - Start and manage ZevaiRouter server",
   "bin": {
     "zevai": "./cli.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zevairouter",
-  "version": "1.0.146",
+  "version": "1.0.148",
   "description": "Self-hosted AI router: many providers, one OpenAI-compatible /v1 endpoint and dashboard",
   "bin": {
     "zevai": "./cli/cli.js"

package/src/app/(dashboard)/dashboard/basic-chat/BasicChatPageClient.js

@@ -32,6 +32,51 @@ const SUGGESTIONS = [
   "Summarize the key trade-offs",
 ];
 
+// Mirrors the providers backed by /api/providers/[id]/models. Other providers
+// already use the static catalog and should not trigger known-failing requests.
+const LIVE_MODEL_PROVIDER_IDS = new Set([
+  "alicode",
+  "alicode-intl",
+  "anthropic",
+  "antigravity",
+  "assemblyai",
+  "byteplus",
+  "cerebras",
+  "chutes",
+  "claude",
+  "cline",
+  "clinepass",
+  "codex",
+  "cohere",
+  "deepseek",
+  "fireworks",
+  "gemini",
+  "gemini-cli",
+  "github",
+  "grok-cli",
+  "groq",
+  "hyperbolic",
+  "kimchi",
+  "kiro",
+  "mistral",
+  "nanobanana",
+  "nebius",
+  "nvidia",
+  "ollama",
+  "ollama-local",
+  "openai",
+  "openrouter",
+  "perplexity",
+  "perplexity-agent",
+  "qoder",
+  "qwen",
+  "siliconflow",
+  "together",
+  "vercel-ai-gateway",
+  "volcengine-ark",
+  "xai",
+]);
+
 marked.setOptions({
   gfm: true,
   breaks: true,
@@ -214,6 +259,17 @@ function finalizeProviderGroups(providerMap) {
     .sort((a, b) => a.providerName.localeCompare(b.providerName));
 }
 
+function supportsLiveModelDiscovery(connection) {
+  const providerId = connection?.provider;
+  if (!providerId) return false;
+  if (LIVE_MODEL_PROVIDER_IDS.has(providerId)) return true;
+
+  const hasBaseUrl = Boolean(connection?.providerSpecificData?.baseUrl);
+  return hasBaseUrl && (
+    isOpenAICompatibleProvider(providerId) || isAnthropicCompatibleProvider(providerId)
+  );
+}
+
 /** Fetch with hard timeout so one slow provider never blocks the UI forever. */
 async function fetchWithTimeout(url, options = {}, timeoutMs = 8000) {
   const controller = new AbortController();
@@ -245,29 +301,11 @@ export default function BasicChatPageClient() {
   const [providerGroups, setProviderGroups] = useState([]);
   const [loadingData, setLoadingData] = useState(true);
   const [loadError, setLoadError] = useState("");
-  const [sessions, setSessions] = useState(() => {
-    if (typeof window === "undefined") return [];
-    try {
-      const saved = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
-      return Array.isArray(saved) ? saved.map((session) => ({
-        ...session,
-        messages: Array.isArray(session.messages) ? session.messages : [],
-      })) : [];
-    } catch { return []; }
-  });
-  const [activeSessionId, setActiveSessionId] = useState(() => {
-    if (typeof window === "undefined") return "";
-    return globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "";
-  });
-  const [activeProviderId, setActiveProviderId] = useState(() => {
-    if (typeof window === "undefined") return "";
-    return globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "";
-  });
+  const [sessions, setSessions] = useState([]);
+  const [activeSessionId, setActiveSessionId] = useState("");
+  const [activeProviderId, setActiveProviderId] = useState("");
   const [activeModelId, setActiveModelId] = useState("");
-  const [draft, setDraft] = useState(() => {
-    if (typeof window === "undefined") return "";
-    return globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "";
-  });
+  const [draft, setDraft] = useState("");
   const [attachments, setAttachments] = useState([]);
   const [isSending, setIsSending] = useState(false);
   const [streamingMessageId, setStreamingMessageId] = useState("");
@@ -278,16 +316,8 @@ export default function BasicChatPageClient() {
   const [historyOpen, setHistoryOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [copiedId, setCopiedId] = useState("");
-  const [temperature, setTemperature] = useState(() => {
-    if (typeof window === "undefined") return 0.7;
-    const raw = globalThis.localStorage.getItem(STORAGE_KEYS.temperature);
-    const n = Number(raw);
-    return Number.isFinite(n) ? Math.min(2, Math.max(0, n)) : 0.7;
-  });
-  const [systemPrompt, setSystemPrompt] = useState(() => {
-    if (typeof window === "undefined") return "";
-    return globalThis.localStorage.getItem(STORAGE_KEYS.systemPrompt) || "";
-  });
+  const [temperature, setTemperature] = useState(0.7);
+  const [systemPrompt, setSystemPrompt] = useState("");
   const fileInputRef = useRef(null);
   const abortRef = useRef(null);
   const initializedRef = useRef(false);
@@ -298,8 +328,27 @@ export default function BasicChatPageClient() {
   const messagesEndRef = useRef(null);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- hydration gate: flags client mount so lazy localStorage reads (in useState initializers) only persist after hydration
-    setIsHydrated(true);
+    try {
+      const saved = safeParse(globalThis.localStorage.getItem(STORAGE_KEYS.sessions), []);
+      const savedSessions = Array.isArray(saved) ? saved.map((session) => ({
+        ...session,
+        messages: Array.isArray(session.messages) ? session.messages : [],
+      })) : [];
+      const storedTemperature = globalThis.localStorage.getItem(STORAGE_KEYS.temperature);
+      const rawTemperature = storedTemperature === null ? Number.NaN : Number(storedTemperature);
+
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- restore client-only persisted state after deterministic SSR hydration
+      setSessions(savedSessions);
+      setActiveSessionId(globalThis.localStorage.getItem(STORAGE_KEYS.activeSessionId) || "");
+      setActiveProviderId(globalThis.localStorage.getItem(STORAGE_KEYS.activeProviderId) || "");
+      setDraft(globalThis.localStorage.getItem(STORAGE_KEYS.draft) || "");
+      setTemperature(Number.isFinite(rawTemperature) ? Math.min(2, Math.max(0, rawTemperature)) : 0.7);
+      setSystemPrompt(globalThis.localStorage.getItem(STORAGE_KEYS.systemPrompt) || "");
+    } catch {
+      // Storage may be unavailable in privacy-restricted browser contexts.
+    } finally {
+      setIsHydrated(true);
+    }
   }, []);
 
   useEffect(() => {
@@ -353,8 +402,10 @@ export default function BasicChatPageClient() {
               .filter(Boolean);
             providerMap.get(providerId).models.push(...staticModels);
 
-            // Live list once per provider — first active connection is enough
-            liveFetchTargets.push(connection);
+            // Live list once per provider — first active connection is enough.
+            if (staticModels.length === 0 && supportsLiveModelDiscovery(connection)) {
+              liveFetchTargets.push(connection);
+            }
           }
 
           const group = providerMap.get(providerId);
@@ -457,16 +508,18 @@ export default function BasicChatPageClient() {
   }, []);
 
   useEffect(() => {
+    if (!isHydrated) return;
     try {
       globalThis.localStorage.setItem(STORAGE_KEYS.temperature, String(temperature));
     } catch { /* ignore */ }
-  }, [temperature]);
+  }, [isHydrated, temperature]);
 
   useEffect(() => {
+    if (!isHydrated) return;
     try {
       globalThis.localStorage.setItem(STORAGE_KEYS.systemPrompt, systemPrompt);
     } catch { /* ignore */ }
-  }, [systemPrompt]);
+  }, [isHydrated, systemPrompt]);
 
   const modelIndex = useMemo(() => {
     const map = new Map();

package/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.js

@@ -866,13 +866,13 @@ export default function APIPageClient({ machineId }) {
                 <Input aria-label="Cloudflare Tunnel endpoint URL" value={`${tunnelPublicUrl || tunnelUrl}/v1`} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
                 <button
                   onClick={() => copy(`${tunnelPublicUrl || tunnelUrl}/v1`, "tunnel_url")}
-                  className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
                 >
                   <span className="material-symbols-outlined text-[18px]">{copied === "tunnel_url" ? "check" : "content_copy"}</span>
                 </button>
                 <button
                   onClick={() => setShowDisableTunnelModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tunnel"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -886,7 +886,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setShowDisableTunnelModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tunnel"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -900,7 +900,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => { setTunnelLoading(false); setTunnelProgress(""); }}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -912,7 +912,7 @@ export default function APIPageClient({ machineId }) {
                   <span className="material-symbols-outlined text-sm">error</span>
                   {tunnelStatus.message}
                 </div>
-                <Button size="sm" icon="cloud_upload" onClick={() => setShowEnableTunnelModal(true)}>Enable</Button>
+                <Button size="sm" icon="cloud_upload" className="min-h-11 sm:min-h-8" onClick={() => setShowEnableTunnelModal(true)}>Enable</Button>
               </>
             ) : tunnelChecking ? (
               <>
@@ -922,7 +922,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setTunnelChecking(false)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -932,6 +932,7 @@ export default function APIPageClient({ machineId }) {
               <Button
                 size="sm"
                 icon="cloud_upload"
+                className="min-h-11 sm:min-h-8"
                 onClick={() => {
                   if (isLoginUnsafe) {
                     setTunnelStatus({ type: "error", message: `Security required: ${unsafeReason}` });
@@ -958,13 +959,13 @@ export default function APIPageClient({ machineId }) {
                 <Input aria-label="Tailscale endpoint URL" value={`${tsUrl}/v1`} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
                 <button
                   onClick={() => copy(`${tsUrl}/v1`, "ts_url")}
-                  className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
                 >
                   <span className="material-symbols-outlined text-[18px]">{copied === "ts_url" ? "check" : "content_copy"}</span>
                 </button>
                 <button
                   onClick={() => setShowDisableTsModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tailscale"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -978,7 +979,7 @@ export default function APIPageClient({ machineId }) {
                 </div>
                 <button
                   onClick={() => setShowDisableTsModal(true)}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Disable Tailscale"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -1001,7 +1002,7 @@ export default function APIPageClient({ machineId }) {
                 )}
                 <button
                   onClick={() => { setTsLoading(false); setTsConnecting(false); setTsProgress(""); clearUserAuth(); }}
-                  className="p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0"
+                  className="flex size-11 shrink-0 items-center justify-center rounded-xl text-red-500 transition-colors hover:bg-red-500/10 sm:size-9 sm:rounded-lg"
                   title="Stop"
                 >
                   <span className="material-symbols-outlined text-[18px]">power_settings_new</span>
@@ -1013,7 +1014,7 @@ export default function APIPageClient({ machineId }) {
                   <span className="material-symbols-outlined text-sm">error</span>
                   {tsStatus.message}
                 </div>
-                <Button size="sm" icon="vpn_lock" onClick={handleOpenTsModal}>Enable</Button>
+                <Button size="sm" icon="vpn_lock" className="min-h-11 sm:min-h-8" onClick={handleOpenTsModal}>Enable</Button>
               </>
             ) : (
               <Button
@@ -1026,7 +1027,7 @@ export default function APIPageClient({ machineId }) {
                   }
                   handleOpenTsModal();
                 }}
-                className="bg-linear-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white!"
+                className="min-h-11 sm:min-h-8"
               >
                 Enable
               </Button>
@@ -1073,6 +1074,7 @@ export default function APIPageClient({ machineId }) {
         {(tunnelEnabled || tsEnabled) && (
           <div className="mt-4 pt-4 border-t border-border flex items-center gap-3">
             <Toggle
+              touchTarget
               label="Allow dashboard access via tunnel"
               checked={tunnelDashboardAccess}
               onChange={() => handleTunnelDashboardAccess(!tunnelDashboardAccess)}
@@ -1099,7 +1101,7 @@ export default function APIPageClient({ machineId }) {
           </div>
           <Link
             href="/dashboard/token-saver"
-            className="inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-primary/25 bg-surface/80 px-3.5 py-2 text-sm font-semibold text-text-main shadow-sm transition-[border-color,color,transform] hover:translate-x-0.5 hover:border-primary/50 hover:text-primary sm:w-auto"
+            className="inline-flex min-h-11 w-full shrink-0 items-center justify-center gap-1.5 rounded-xl border border-primary/25 bg-surface/80 px-3.5 py-2 text-sm font-semibold text-text-main shadow-sm transition-[border-color,color,transform] hover:translate-x-0.5 hover:border-primary/50 hover:text-primary sm:min-h-0 sm:w-auto sm:rounded-lg"
           >
             Open workspace
             <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
@@ -1149,6 +1151,7 @@ export default function APIPageClient({ machineId }) {
           </div>
           <div className="shrink-0 self-end sm:self-auto">
             <Toggle
+              touchTarget
               label="Require API key"
               checked={requireApiKey}
               onChange={() => handleRequireApiKey(!requireApiKey)}
@@ -1189,7 +1192,7 @@ export default function APIPageClient({ machineId }) {
                     <button
                       type="button"
                       onClick={() => toggleKeyVisibility(key.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0"
+                      className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted opacity-100 transition-all hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-7 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
                       title={visibleKeys.has(key.id) ? "Hide key" : "Show key"}
                       aria-label={visibleKeys.has(key.id) ? "Hide API key" : "Show API key"}
                     >
@@ -1200,7 +1203,7 @@ export default function APIPageClient({ machineId }) {
                     <button
                       type="button"
                       onClick={() => handleCopyKey(key.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all shrink-0"
+                      className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted opacity-100 transition-all hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-7 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
                       title="Copy key"
                       aria-label="Copy API key"
                     >
@@ -1242,30 +1245,34 @@ export default function APIPageClient({ machineId }) {
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Toggle
-                    size="sm"
-                    disabled={keyPending === `toggle:${key.id}`}
-                    checked={key.isActive ?? true}
-                    onChange={(checked) => {
-                      if (key.isActive && !checked) {
-                        setConfirmState({
-                          title: "Pause API Key",
-                          message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
-                          onConfirm: async () => {
-                            setConfirmState(null);
-                            handleToggleKey(key.id, checked);
-                          }
-                        });
-                      } else {
-                        handleToggleKey(key.id, checked);
-                      }
-                    }}
-                    title={key.isActive ? "Pause key" : "Resume key"}
-                  />
+                  <div className="flex size-11 items-center justify-center sm:size-auto">
+                    <Toggle
+                      size="sm"
+                      touchTarget
+                      disabled={keyPending === `toggle:${key.id}`}
+                      checked={key.isActive ?? true}
+                      onChange={(checked) => {
+                        if (key.isActive && !checked) {
+                          setConfirmState({
+                            title: "Pause API Key",
+                            message: `Pause API key "${key.name}"?\n\nThis key will stop working immediately but can be resumed later.`,
+                            onConfirm: async () => {
+                              setConfirmState(null);
+                              handleToggleKey(key.id, checked);
+                            }
+                          });
+                        } else {
+                          handleToggleKey(key.id, checked);
+                        }
+                      }}
+                      title={key.isActive ? "Pause key" : "Resume key"}
+                    />
+                  </div>
                   <button
                     disabled={keyPending === `delete:${key.id}`}
                     onClick={() => handleDeleteKey(key.id)}
-                    className="p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all"
+                    className="flex size-11 items-center justify-center rounded-xl text-red-500 opacity-100 transition-all hover:bg-red-500/10 sm:size-9 sm:rounded-lg sm:opacity-0 sm:group-hover:opacity-100"
+                    aria-label={`Delete ${key.name}`}
                   >
                     <span className="material-symbols-outlined text-[18px]">delete</span>
                   </button>
@@ -1515,7 +1522,7 @@ function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
       <Input aria-label={`${label} endpoint URL`} value={url} readOnly className="w-full min-w-0 font-mono text-sm sm:flex-1" />
       <button
         onClick={() => onCopy(url, copyId)}
-        className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0"
+        className="flex size-11 shrink-0 items-center justify-center rounded-xl text-text-muted transition-colors hover:bg-black/5 hover:text-primary dark:hover:bg-white/5 sm:size-9 sm:rounded-lg"
         aria-label={`Copy ${label} endpoint URL`}
       >
         <span className="material-symbols-outlined text-[18px]">{copied === copyId ? "check" : "content_copy"}</span>
@@ -1569,7 +1576,7 @@ function SecurityWarning({ message, action }) {
       {action && (
         <a
           href={action.href}
-          className="text-xs font-medium underline shrink-0 hover:opacity-80"
+          className="inline-flex min-h-11 shrink-0 items-center text-xs font-medium underline hover:opacity-80 sm:min-h-0"
           onClick={action.href.startsWith("#") ? (e) => {
             e.preventDefault();
             document.getElementById(action.href.slice(1))?.scrollIntoView({ behavior: "smooth" });