zevairouter 1.0.119 → 1.0.121

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

@@ -57,6 +57,8 @@ export default function APIPageClient({ machineId }) {
   const [newKeyName, setNewKeyName] = useState("");
   const [createdKey, setCreatedKey] = useState(null);
   const [confirmState, setConfirmState] = useState(null);
+  const [keyPending, setKeyPending] = useState(null);
+  const [keyStatus, setKeyStatus] = useState(null);
 
   const [requireApiKey, setRequireApiKey] = useState(false);
   const [requireLogin, setRequireLogin] = useState(true);
@@ -643,9 +645,11 @@ export default function APIPageClient({ machineId }) {
     }
   };
 
-  const handleCreateKey = async () => {
-    if (!newKeyName.trim()) return;
-
+  const handleCreateKey = async (event) => {
+    event.preventDefault();
+    if (!newKeyName.trim() || keyPending) return;
+    setKeyPending("create");
+    setKeyStatus(null);
     try {
       const res = await fetch("/api/keys", {
         method: "POST",
@@ -653,69 +657,85 @@ export default function APIPageClient({ machineId }) {
         body: JSON.stringify({ name: newKeyName }),
       });
       const data = await res.json();
-
-      if (res.ok) {
-        setCreatedKey(data.key);
-        await fetchData();
-        setNewKeyName("");
-        setShowAddModal(false);
-      }
+      if (!res.ok) throw new Error(data.error || `Failed to create key (${res.status})`);
+      setCreatedKey(data.key);
+      await fetchData();
+      setNewKeyName("");
+      setShowAddModal(false);
+      setKeyStatus({ type: "success", message: "API key created" });
     } catch (error) {
-      console.log("Error creating key:", error);
+      setKeyStatus({ type: "error", message: error.message });
+    } finally {
+      setKeyPending(null);
     }
   };
 
-  const handleDeleteKey = async (id) => {
+  const handleDeleteKey = (id) => {
+    if (keyPending) return;
     setConfirmState({
       title: "Delete API Key",
       message: "Delete this API key?",
       onConfirm: async () => {
         setConfirmState(null);
+        setKeyPending(`delete:${id}`);
+        setKeyStatus(null);
         try {
           const res = await fetch(`/api/keys/${id}`, { method: "DELETE" });
-          if (res.ok) {
-            setKeys(keys.filter((k) => k.id !== id));
-            setVisibleKeys(prev => {
-              const next = new Set(prev);
-              next.delete(id);
-              return next;
-            });
-          }
+          if (!res.ok) throw new Error(`Failed to delete key (${res.status})`);
+          setKeys((prev) => prev.filter((key) => key.id !== id));
+          setVisibleKeys((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+          setKeyStatus({ type: "success", message: "API key deleted" });
         } catch (error) {
-          console.log("Error deleting key:", error);
+          setKeyStatus({ type: "error", message: error.message });
+        } finally {
+          setKeyPending(null);
         }
-      }
+      },
     });
   };
 
   const handleToggleKey = async (id, isActive) => {
+    if (keyPending) return;
+    setKeyPending(`toggle:${id}`);
+    setKeyStatus(null);
     try {
       const res = await fetch(`/api/keys/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ isActive }),
       });
-      if (res.ok) {
-        setKeys(prev => prev.map(k => k.id === id ? { ...k, isActive } : k));
-      }
+      if (!res.ok) throw new Error(`Failed to update key (${res.status})`);
+      setKeys((prev) => prev.map((key) => key.id === id ? { ...key, isActive } : key));
+      setKeyStatus({ type: "success", message: "API key updated" });
     } catch (error) {
-      console.log("Error toggling key:", error);
+      setKeyStatus({ type: "error", message: error.message });
+    } finally {
+      setKeyPending(null);
     }
   };
 
   const handleBudgetChange = async (id, field, value) => {
+    if (keyPending) return;
     const num = value === "" ? 0 : Math.max(0, Number(value) || 0);
+    setKeyPending(`budget:${id}`);
+    setKeyStatus(null);
     try {
       const res = await fetch(`/api/keys/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ [field]: num }),
       });
-      if (res.ok) {
-        setKeys(prev => prev.map(k => k.id === id ? { ...k, [field]: num } : k));
-      }
+      if (!res.ok) throw new Error(`Failed to update budget (${res.status})`);
+      setKeys((prev) => prev.map((key) => key.id === id ? { ...key, [field]: num } : key));
+      setKeyStatus({ type: "success", message: "Budget updated" });
     } catch (error) {
-      console.log("Error updating budget:", error);
+      setKeyStatus({ type: "error", message: error.message });
+    } finally {
+      setKeyPending(null);
     }
   };
 
@@ -736,7 +756,7 @@ export default function APIPageClient({ machineId }) {
 
   if (loading) {
     return (
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-6 lg:gap-7">
         <CardSkeleton />
         <CardSkeleton />
       </div>
@@ -746,7 +766,7 @@ export default function APIPageClient({ machineId }) {
   const currentEndpoint = baseUrl;
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6 lg:gap-7">
       {/* Endpoint Card */}
       <Card>
         <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
@@ -771,7 +791,7 @@ export default function APIPageClient({ machineId }) {
             }`}>Tunnel</span>
             {tunnelEnabled && !tunnelLoading && tunnelReachable ? (
               <>
-                <Input value={`${tunnelPublicUrl || tunnelUrl}/v1`} readOnly className="flex-1 font-mono text-sm" />
+                <Input aria-label="Cloudflare Tunnel endpoint URL" value={`${tunnelPublicUrl || tunnelUrl}/v1`} readOnly className="flex-1 font-mono text-sm" />
                 <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"
@@ -863,7 +883,7 @@ export default function APIPageClient({ machineId }) {
             }`}>Tailscale</span>
             {tsEnabled && !tsLoading && tsReachable ? (
               <>
-                <Input value={`${tsUrl}/v1`} readOnly className="flex-1 font-mono text-sm" />
+                <Input aria-label="Tailscale endpoint URL" value={`${tsUrl}/v1`} readOnly className="flex-1 font-mono text-sm" />
                 <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"
@@ -981,6 +1001,7 @@ export default function APIPageClient({ machineId }) {
         {(tunnelEnabled || tsEnabled) && (
           <div className="mt-4 pt-4 border-t border-border flex items-center gap-3">
             <Toggle
+              label="Allow dashboard access via tunnel"
               checked={tunnelDashboardAccess}
               onChange={() => handleTunnelDashboardAccess(!tunnelDashboardAccess)}
             />
@@ -1026,7 +1047,13 @@ export default function APIPageClient({ machineId }) {
           </Button>
         </div>
 
-        <div className="flex items-center justify-between pb-4 mb-4 border-b border-border">
+        {keyStatus && (
+          <p role="status" className={`mb-4 text-sm ${keyStatus.type === "error" ? "text-red-500" : "text-green-500"}`}>
+            {keyStatus.message}
+          </p>
+        )}
+
+        <div className="flex flex-wrap items-center justify-between gap-3 pb-4 mb-4 border-b border-border">
           <div>
             <p className="font-medium">Require API key</p>
             <p className="text-sm text-text-muted">
@@ -1034,6 +1061,7 @@ export default function APIPageClient({ machineId }) {
             </p>
           </div>
           <Toggle
+            label="Require API key"
             checked={requireApiKey}
             onChange={() => handleRequireApiKey(!requireApiKey)}
           />
@@ -1061,7 +1089,7 @@ export default function APIPageClient({ machineId }) {
             {keys.map((key) => (
               <div
                 key={key.id}
-                className={`group flex items-center justify-between py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 ${key.isActive === false ? "opacity-60" : ""}`}
+                className={`group flex flex-wrap items-center justify-between gap-3 py-3 border-b border-black/[0.03] dark:border-white/[0.03] last:border-b-0 ${key.isActive === false ? "opacity-60" : ""}`}
               >
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-medium">{key.name}</p>
@@ -1082,6 +1110,7 @@ export default function APIPageClient({ machineId }) {
                       Daily $
                       <input
                         type="number" min="0" step="0.01"
+                        disabled={keyPending === `budget:${key.id}`}
                         defaultValue={key.budgetDaily || 0}
                         onBlur={(e) => handleBudgetChange(key.id, "budgetDaily", e.target.value)}
                         className="w-16 px-1 py-0.5 text-[11px] bg-transparent border border-border rounded"
@@ -1092,6 +1121,7 @@ export default function APIPageClient({ machineId }) {
                       Monthly $
                       <input
                         type="number" min="0" step="0.01"
+                        disabled={keyPending === `budget:${key.id}`}
                         defaultValue={key.budgetMonthly || 0}
                         onBlur={(e) => handleBudgetChange(key.id, "budgetMonthly", e.target.value)}
                         className="w-16 px-1 py-0.5 text-[11px] bg-transparent border border-border rounded"
@@ -1103,6 +1133,7 @@ export default function APIPageClient({ machineId }) {
                 <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) {
@@ -1121,6 +1152,7 @@ export default function APIPageClient({ machineId }) {
                     title={key.isActive ? "Pause key" : "Resume key"}
                   />
                   <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"
                   >
@@ -1142,7 +1174,7 @@ export default function APIPageClient({ machineId }) {
           setNewKeyName("");
         }}
       >
-        <div className="flex flex-col gap-4">
+        <form className="flex flex-col gap-4" onSubmit={handleCreateKey}>
           <Input
             label="Key Name"
             value={newKeyName}
@@ -1150,10 +1182,11 @@ export default function APIPageClient({ machineId }) {
             placeholder="Production Key"
           />
           <div className="flex gap-2">
-            <Button onClick={handleCreateKey} fullWidth disabled={!newKeyName.trim()}>
-              Create
+            <Button type="submit" fullWidth disabled={!newKeyName.trim() || keyPending === "create"}>
+              {keyPending === "create" ? "Creating..." : "Create"}
             </Button>
             <Button
+              type="button"
               onClick={() => {
                 setShowAddModal(false);
                 setNewKeyName("");
@@ -1164,7 +1197,7 @@ export default function APIPageClient({ machineId }) {
               Cancel
             </Button>
           </div>
-        </div>
+        </form>
       </Modal>
 
       {/* Created Key Modal */}
@@ -1368,7 +1401,7 @@ function EndpointRow({ label, url, copyId, copied, onCopy, badge, actions }) {
       <span className={`text-xs font-mono px-1.5 py-0.5 rounded shrink-0 min-w-[88px] text-center ${
           (badge === "CF" || badge === "TS") ? "bg-primary/10 text-primary" : "bg-surface-2 text-text-muted"
         }`}>{label}</span>
-      <Input value={url} readOnly className="flex-1 font-mono text-sm" />
+      <Input aria-label={`${label} endpoint URL`} value={url} readOnly className="flex-1 font-mono text-sm" />
       <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"

package/src/app/(dashboard)/dashboard/providers/[id]/ConnectionRow.js

@@ -182,6 +182,16 @@ export default function ConnectionRow({ connection, proxyPools, isOAuth, isFirst
               </span>
             )}
             {isCooldown && connection.isActive !== false && <CooldownTimer until={modelLockUntil} />}
+            {isCooldown && connection.modelLockReason && connection.isActive !== false && (
+              <span
+                className="max-w-full truncate text-xs text-amber-600 dark:text-amber-400 sm:max-w-[360px]"
+                title={`${connection.modelLockReason.reason} — resets ${new Date(connection.modelLockReason.resetsAt).toLocaleString()}`}
+              >
+                {connection.modelLockReason.model}
+                {connection.modelLockReason.providerErrorCode ? ` (${connection.modelLockReason.providerErrorCode})` : ""}
+                {` — resets ${new Date(connection.modelLockReason.resetsAt).toLocaleString()}`}
+              </span>
+            )}
             {connection.lastError && connection.isActive !== false && (
               <span className="max-w-full truncate text-xs text-red-500 sm:max-w-[300px]" title={connection.lastError}>
                 {connection.lastError}

package/src/app/(dashboard)/dashboard/terminal/TerminalPageClient.js

@@ -4,11 +4,39 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { useTheme } from "@/shared/hooks/useTheme";
 import "@xterm/xterm/css/xterm.css";
 
 const BRAND = "#E56A4A";
 
+const TERMINAL_THEMES = {
+  light: {
+    background: "#f7f7f6",
+    foreground: "#262626",
+    cursor: BRAND,
+    cursorAccent: "#f7f7f6",
+    selectionBackground: "rgba(229, 106, 74, 0.25)",
+    black: "#262626", red: "#b91c1c", green: "#15803d", yellow: "#a16207",
+    blue: "#1d4ed8", magenta: "#7e22ce", cyan: "#0e7490", white: "#e5e5e5",
+    brightBlack: "#737373", brightRed: "#dc2626", brightGreen: "#16a34a", brightYellow: "#ca8a04",
+    brightBlue: "#2563eb", brightMagenta: "#9333ea", brightCyan: "#0891b2", brightWhite: "#fafafa",
+  },
+  dark: {
+    background: "#0d0d0d",
+    foreground: "#e8e8e8",
+    cursor: BRAND,
+    cursorAccent: "#0d0d0d",
+    selectionBackground: "rgba(229, 106, 74, 0.35)",
+    black: "#1a1a1a", red: "#f87171", green: "#4ade80", yellow: "#fbbf24",
+    blue: "#60a5fa", magenta: "#c084fc", cyan: "#22d3ee", white: "#e5e5e5",
+    brightBlack: "#737373", brightRed: "#fca5a5", brightGreen: "#86efac", brightYellow: "#fde68a",
+    brightBlue: "#93c5fd", brightMagenta: "#d8b4fe", brightCyan: "#67e8f9", brightWhite: "#fafafa",
+  },
+};
+
 export default function TerminalPageClient() {
+  const { isDark } = useTheme();
+  const themeRef = useRef(isDark);
   const hostRef = useRef(null);
   const termRef = useRef(null);
   const fitRef = useRef(null);
@@ -424,29 +452,7 @@ export default function TerminalPageClient() {
       scrollback: 5000,
       allowProposedApi: true,
       disableStdin: false,
-      theme: {
-        background: "#0d0d0d",
-        foreground: "#e8e8e8",
-        cursor: BRAND,
-        cursorAccent: "#0d0d0d",
-        selectionBackground: "rgba(229, 106, 74, 0.35)",
-        black: "#1a1a1a",
-        red: "#f87171",
-        green: "#4ade80",
-        yellow: "#fbbf24",
-        blue: "#60a5fa",
-        magenta: "#c084fc",
-        cyan: "#22d3ee",
-        white: "#e5e5e5",
-        brightBlack: "#737373",
-        brightRed: "#fca5a5",
-        brightGreen: "#86efac",
-        brightYellow: "#fde68a",
-        brightBlue: "#93c5fd",
-        brightMagenta: "#d8b4fe",
-        brightCyan: "#67e8f9",
-        brightWhite: "#fafafa",
-      },
+      theme: TERMINAL_THEMES[themeRef.current ? "dark" : "light"],
     });
 
     const fit = new FitAddon();
@@ -549,6 +555,13 @@ export default function TerminalPageClient() {
     };
   }, [gate, handleTermData, sendResize, startSession, focusTerm]);
 
+  useEffect(() => {
+    themeRef.current = isDark;
+    if (termRef.current) {
+      termRef.current.options.theme = TERMINAL_THEMES[isDark ? "dark" : "light"];
+    }
+  }, [isDark]);
+
   const statusColor =
     status === "ready"
       ? "bg-emerald-500"
@@ -560,7 +573,7 @@ export default function TerminalPageClient() {
 
   if (gate === "checking") {
     return (
-      <div className="flex h-full min-h-0 w-full items-center justify-center bg-[#0d0d0d] text-sm text-white/50">
+      <div className="flex h-full min-h-0 w-full items-center justify-center bg-bg text-sm text-text-muted">
         Checking terminal lock…
       </div>
     );
@@ -569,8 +582,8 @@ export default function TerminalPageClient() {
   if (gate === "setup" || gate === "unlock") {
     const isSetup = gate === "setup";
     return (
-      <div className="flex h-full min-h-0 w-full flex-col items-center justify-center bg-[#0d0d0d] px-4">
-        <div className="w-full max-w-md rounded-2xl border border-white/10 bg-white/[0.03] p-6 shadow-xl">
+      <div className="flex h-full min-h-0 w-full flex-col items-center justify-center bg-bg px-4">
+        <div className="w-full max-w-md rounded-2xl border border-border-subtle bg-surface p-6 shadow-xl">
           <div className="mb-4 flex items-center gap-3">
             <div className="flex size-10 items-center justify-center rounded-xl bg-[color:var(--brand,#E56A4A)]/15 text-[color:var(--brand,#E56A4A)]">
               <span className="material-symbols-outlined text-[22px]">
@@ -578,10 +591,10 @@ export default function TerminalPageClient() {
               </span>
             </div>
             <div>
-              <h1 className="text-base font-semibold text-white/95">
+              <h1 className="text-base font-semibold text-text-main">
                 {isSetup ? "Set terminal password" : "Unlock terminal"}
               </h1>
-              <p className="text-xs text-white/45">
+              <p className="text-xs text-text-muted">
                 {isSetup
                   ? "First time — pick a password different from dashboard login."
                   : "Dashboard login is not enough. Enter your terminal password."}
@@ -593,7 +606,7 @@ export default function TerminalPageClient() {
             {isSetup ? (
               <>
                 <label className="block space-y-1">
-                  <span className="text-[11px] font-medium uppercase tracking-wide text-white/40">
+                  <span className="text-[11px] font-medium uppercase tracking-wide text-text-muted">
                     New terminal password
                   </span>
                   <input
@@ -602,14 +615,14 @@ export default function TerminalPageClient() {
                     autoComplete="new-password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2.5 text-sm text-white outline-none focus:border-[color:var(--brand,#E56A4A)]/60"
+                    className="w-full rounded-lg border border-border-subtle bg-bg-alt px-3 py-2.5 text-sm text-text-main outline-none focus:border-[color:var(--brand,#E56A4A)]/60"
                     placeholder="Min 6 characters"
                     required
                     minLength={6}
                   />
                 </label>
                 <label className="block space-y-1">
-                  <span className="text-[11px] font-medium uppercase tracking-wide text-white/40">
+                  <span className="text-[11px] font-medium uppercase tracking-wide text-text-muted">
                     Confirm
                   </span>
                   <input
@@ -617,20 +630,20 @@ export default function TerminalPageClient() {
                     autoComplete="new-password"
                     value={confirm}
                     onChange={(e) => setConfirm(e.target.value)}
-                    className="w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2.5 text-sm text-white outline-none focus:border-[color:var(--brand,#E56A4A)]/60"
+                    className="w-full rounded-lg border border-border-subtle bg-bg-alt px-3 py-2.5 text-sm text-text-main outline-none focus:border-[color:var(--brand,#E56A4A)]/60"
                     placeholder="Repeat password"
                     required
                     minLength={6}
                   />
                 </label>
-                <p className="text-[11px] leading-relaxed text-white/35">
-                  Must <strong className="text-white/55">not</strong> match the dashboard password.
+                <p className="text-[11px] leading-relaxed text-text-muted">
+                  Must <strong className="text-text-main">not</strong> match the dashboard password.
                   Unlock lasts ~4 hours on this browser.
                 </p>
               </>
             ) : (
               <label className="block space-y-1">
-                <span className="text-[11px] font-medium uppercase tracking-wide text-white/40">
+                <span className="text-[11px] font-medium uppercase tracking-wide text-text-muted">
                   Terminal password
                 </span>
                 <input
@@ -639,7 +652,7 @@ export default function TerminalPageClient() {
                   autoComplete="current-password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2.5 text-sm text-white outline-none focus:border-[color:var(--brand,#E56A4A)]/60"
+                  className="w-full rounded-lg border border-border-subtle bg-bg-alt px-3 py-2.5 text-sm text-text-main outline-none focus:border-[color:var(--brand,#E56A4A)]/60"
                   placeholder="••••••••"
                   required
                 />
@@ -647,7 +660,7 @@ export default function TerminalPageClient() {
             )}
 
             {gateError ? (
-              <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+              <p role="alert" className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-700 dark:text-red-300">
                 {gateError}
               </p>
             ) : null}
@@ -662,14 +675,14 @@ export default function TerminalPageClient() {
           </form>
 
           {gate === "unlock" ? (
-            <p className="mt-3 text-center text-[11px] leading-relaxed text-white/35">
+            <p className="mt-3 text-center text-[11px] leading-relaxed text-text-muted">
               Forgot terminal password? On the host run CLI →{" "}
-              <code className="text-white/55">Settings → Clear Terminal Password</code>
+              <code className="text-text-main">Settings → Clear Terminal Password</code>
               {" "}then set a new one here. Reset is not available in the browser.
             </p>
           ) : null}
 
-          <p className="mt-4 text-center text-[11px] text-white/30">
+          <p className="mt-4 text-center text-[11px] text-text-muted">
             Protected by dashboard login + terminal password
           </p>
         </div>
@@ -678,14 +691,14 @@ export default function TerminalPageClient() {
   }
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col bg-[#0d0d0d]">
-      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-white/10 px-4 py-2.5">
+    <div className="flex h-full min-h-0 w-full flex-col bg-bg">
+      <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border-subtle px-4 py-2.5">
         <div className="flex min-w-0 items-center gap-3">
           <div className="flex items-center gap-2">
             <span className={`inline-block size-2 rounded-full ${statusColor}`} />
-            <span className="text-sm font-semibold text-white/90">Terminal</span>
+            <span className="text-sm font-semibold text-text-main">Terminal</span>
           </div>
-          <span className="truncate text-xs text-white/45">
+          <span role="status" aria-live="polite" className="truncate text-xs text-text-muted">
             {statusText}
             {meta.shell ? ` · ${meta.shell}` : ""}
             {meta.mode ? ` · ${meta.mode}` : ""}
@@ -695,7 +708,7 @@ export default function TerminalPageClient() {
           <button
             type="button"
             onClick={handleLock}
-            className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/70 transition hover:border-white/20 hover:text-white"
+            className="rounded-lg border border-border-subtle bg-surface px-3 py-1.5 text-xs font-medium text-text-muted transition hover:border-border hover:text-text-main"
             title="Lock terminal (require password again)"
           >
             Lock
@@ -703,7 +716,7 @@ export default function TerminalPageClient() {
           <button
             type="button"
             onClick={handleRestart}
-            className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-white/80 transition hover:border-[color:var(--brand,#E56A4A)]/50 hover:bg-white/10 hover:text-white"
+            className="rounded-lg border border-border-subtle bg-surface px-3 py-1.5 text-xs font-medium text-text-main transition hover:border-[color:var(--brand,#E56A4A)]/50 hover:bg-bg-alt"
           >
             New session
           </button>
@@ -714,7 +727,7 @@ export default function TerminalPageClient() {
         <div ref={hostRef} className="absolute inset-0 px-2 py-2 outline-none" />
       </div>
 
-      <div className="shrink-0 border-t border-white/10 px-4 py-1.5 text-[11px] text-white/35">
+      <div className="shrink-0 border-t border-border-subtle px-4 py-1.5 text-[11px] text-text-muted">
         Dashboard login + terminal password · click the black area then type · idle sessions close after 30m
       </div>
     </div>

package/src/app/api/providers/[id]/test/testUtils.js

@@ -721,6 +721,10 @@ async function testApiKeyConnection(connection, effectiveProxy = null) {
             messages: [{ role: "user", content: "hi" }],
           }),
         }, effectiveProxy);
+        const body = await res.clone().json().catch(() => null);
+        if (body?.code === 11102) {
+          return { valid: false, inconclusive: true, error: "Test model is not available for this account" };
+        }
         const valid = res.ok || res.status === 429 || res.status === 400;
         return { valid, error: valid ? null : `Invalid API key (${res.status})` };
       }
@@ -765,11 +769,13 @@ export async function testSingleConnection(id) {
 
   const latencyMs = Date.now() - start;
 
-  const updateData = {
-    testStatus: result.valid ? "active" : "error",
-    lastError: result.valid ? null : result.error,
-    lastErrorAt: result.valid ? null : new Date().toISOString(),
-  };
+  const updateData = result.inconclusive
+    ? {}
+    : {
+        testStatus: result.valid ? "active" : "error",
+        lastError: result.valid ? null : result.error,
+        lastErrorAt: result.valid ? null : new Date().toISOString(),
+      };
 
   if (result.refreshed && result.newTokens) {
     if (result.newTokens.accessToken) updateData.accessToken = result.newTokens.accessToken;

package/src/shared/components/Button.js

@@ -40,16 +40,17 @@ export default function Button({
         className
       )}
       disabled={disabled || loading}
+      aria-busy={loading || undefined}
       {...props}
     >
       {loading ? (
-        <span className="material-symbols-outlined animate-spin text-[18px]">progress_activity</span>
+        <span aria-hidden="true" className="material-symbols-outlined animate-spin text-[18px]">progress_activity</span>
       ) : icon ? (
-        <span className="material-symbols-outlined text-[18px]">{icon}</span>
+        <span aria-hidden="true" className="material-symbols-outlined text-[18px]">{icon}</span>
       ) : null}
       {children}
       {iconRight && !loading && (
-        <span className="material-symbols-outlined text-[18px]">{iconRight}</span>
+        <span aria-hidden="true" className="material-symbols-outlined text-[18px]">{iconRight}</span>
       )}
     </button>
   );

package/src/shared/components/Card.js

@@ -25,9 +25,9 @@ export default function Card({
   return (
     <div
       className={cn(
-        "card-3d border border-border-subtle rounded-[14px]",
+        "card-3d border border-border-subtle rounded-[14px] transition-[border-color,box-shadow,transform] duration-200",
         elev && "card-3d-elev",
-        hover && "hover:border-brand-500/30 cursor-pointer",
+        hover && "hover:-translate-y-0.5 hover:border-brand-500/30 hover:shadow-[var(--shadow-warm)] cursor-pointer",
         paddings[padding],
         className
       )}

package/src/shared/components/Header.js

@@ -261,7 +261,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
   };
 
   return (
-    <header className="shrink-0 flex items-center justify-between gap-3 px-4 lg:px-8 pt-3 pb-2 border-b border-border-subtle bg-surface/60 backdrop-blur-xl lg:bg-transparent lg:backdrop-blur-none z-20">
+    <header className="shrink-0 flex min-h-16 items-center justify-between gap-3 px-4 lg:px-8 py-3 border-b border-border-subtle bg-surface/80 backdrop-blur-xl z-20">
       {/* Mobile menu button */}
       <div className="flex items-center gap-3 lg:hidden shrink-0">
         {showMenuButton && (