zevairouter 1.0.119 → 1.0.121

package/src/shared/components/Input.js

@@ -1,5 +1,6 @@
 "use client";
 
+import { useId } from "react";
 import { cn } from "@/shared/utils/cn";
 
 export default function Input({
@@ -17,10 +18,16 @@ export default function Input({
   inputClassName,
   ...props
 }) {
+  const generatedId = useId();
+  const inputId = props.id || generatedId;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const describedBy = [props["aria-describedby"], error && errorId, hint && hintId].filter(Boolean).join(" ") || undefined;
+
   return (
     <div className={cn("flex flex-col gap-1.5", className)}>
       {label && (
-        <label className="text-sm font-medium text-text-main">
+        <label htmlFor={inputId} className="text-sm font-medium text-text-main">
           {label}
           {required && <span className="text-red-500 ml-1">*</span>}
         </label>
@@ -32,11 +39,15 @@ export default function Input({
           </div>
         )}
         <input
+          id={inputId}
           type={type}
           placeholder={placeholder}
           value={value}
           onChange={onChange}
           disabled={disabled}
+          required={required}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={describedBy}
           className={cn(
             "w-full py-2.5 px-3 text-sm text-text-main bg-surface-2 rounded-[10px]",
             "border border-transparent placeholder-text-muted/70",
@@ -52,13 +63,13 @@ export default function Input({
         />
       </div>
       {error && (
-        <p className="text-xs text-red-500 flex items-center gap-1">
-          <span className="material-symbols-outlined text-[14px]">error</span>
+        <p id={errorId} role="alert" className="text-xs text-red-500 flex items-center gap-1">
+          <span aria-hidden="true" className="material-symbols-outlined text-[14px]">error</span>
           {error}
         </p>
       )}
       {hint && !error && (
-        <p className="text-xs text-text-muted">{hint}</p>
+        <p id={hintId} className="text-xs text-text-muted">{hint}</p>
       )}
     </div>
   );

package/src/shared/components/Modal.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useId, useRef } from "react";
 import { cn } from "@/shared/utils/cn";
 import Button from "./Button";
 import Tooltip from "./Tooltip";
@@ -16,6 +16,9 @@ export default function Modal({
   showTrafficLights = true,
   className,
 }) {
+  const titleId = useId();
+  const dialogRef = useRef(null);
+  const restoreFocusRef = useRef(null);
   const sizes = {
     sm: "max-w-sm",
     md: "max-w-md",
@@ -25,20 +28,50 @@ export default function Modal({
   };
 
   useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => { document.body.style.overflow = ""; };
-  }, [isOpen]);
+    if (!isOpen) return;
 
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape" && isOpen) onClose();
+    const previousOverflow = document.body.style.overflow;
+    restoreFocusRef.current = document.activeElement;
+    document.body.style.overflow = "hidden";
+
+    const dialog = dialogRef.current;
+    const focusable = dialog?.querySelector(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    (focusable || dialog)?.focus();
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab" || !dialog) return;
+
+      const focusableElements = [...dialog.querySelectorAll(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )];
+      if (!focusableElements.length) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+      const first = focusableElements[0];
+      const last = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", handleKeyDown);
+      restoreFocusRef.current?.focus();
     };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
 
   if (!isOpen) return null;
@@ -53,8 +86,14 @@ export default function Modal({
 
       {/* Modal content */}
       <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        aria-label={!title ? "Dialog" : undefined}
+        tabIndex={-1}
         className={cn(
-          "relative w-full bg-surface",
+          "relative w-full max-h-[calc(100dvh-2rem)] overflow-hidden bg-surface",
           "border border-border-subtle",
           "rounded-[14px] shadow-[var(--shadow-elev)]",
           "fade-in",
@@ -84,7 +123,7 @@ export default function Modal({
                 </div>
               )}
               {title && (
-                <h2 className="text-lg font-semibold text-text-main">{title}</h2>
+                <h2 id={titleId} className="text-lg font-semibold text-text-main">{title}</h2>
               )}
             </div>
             {/* X button — mobile only */}
@@ -93,7 +132,7 @@ export default function Modal({
               aria-label="Close"
               className="md:hidden p-1.5 rounded-[10px] text-text-muted hover:bg-surface-2 hover:text-text-main transition-colors"
             >
-              <span className="material-symbols-outlined text-[20px]">close</span>
+              <span aria-hidden="true" className="material-symbols-outlined text-[20px]">close</span>
             </button>
           </div>
         )}

package/src/shared/components/SegmentedControl.js

@@ -8,6 +8,7 @@ export default function SegmentedControl({
   onChange,
   size = "md",
   className,
+  ...props
 }) {
   const sizes = {
     sm: "h-7 text-xs",
@@ -17,6 +18,8 @@ export default function SegmentedControl({
 
   return (
     <div
+      role="group"
+      {...props}
       className={cn(
         "inline-flex items-center p-1 rounded-[10px] overflow-x-auto",
         "bg-surface-2",
@@ -26,6 +29,8 @@ export default function SegmentedControl({
       {options.map((option) => (
         <button
           key={option.value}
+          type="button"
+          aria-pressed={value === option.value}
           onClick={() => onChange(option.value)}
           className={cn(
             "shrink-0 px-4 rounded-[8px] font-medium transition-all",
@@ -36,7 +41,7 @@ export default function SegmentedControl({
           )}
         >
           {option.icon && (
-            <span className="material-symbols-outlined text-[16px] mr-1.5">
+            <span aria-hidden="true" className="material-symbols-outlined text-[16px] mr-1.5">
               {option.icon}
             </span>
           )}

package/src/shared/components/Sidebar.js

@@ -129,7 +129,7 @@ export default function Sidebar({ onClose }) {
 
   return (
     <>
-      <aside className="flex w-72 flex-col border-r border-border-subtle bg-vibrancy backdrop-blur-xl transition-colors duration-300 min-h-full">
+      <aside className="flex w-72 flex-col border-r border-border-subtle bg-vibrancy backdrop-blur-xl shadow-[8px_0_30px_-28px_rgba(0,0,0,0.45)] transition-colors duration-300 min-h-full">
         {/* Traffic lights */}
         <div className="flex items-center gap-2 px-6 pt-5 pb-2">
           <div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
@@ -140,11 +140,9 @@ export default function Sidebar({ onClose }) {
         {/* Logo */}
         <div className="px-6 py-4 flex flex-col gap-2">
           <Link href="/dashboard" className="flex items-center gap-3">
-            <div className="flex items-center justify-center size-9 rounded-[10px] bg-gradient-to-br from-brand-500 to-brand-700 shadow-[var(--shadow-warm)]">
-              <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-5 h-5">
-                <path d="M9.5 11H22.5L9.5 21H22.5" fill="none" stroke="white" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/>
-                <circle cx="9.5" cy="11" r="2.5" fill="white"/>
-                <circle cx="22.5" cy="21" r="2.5" fill="white"/>
+            <div className="flex items-center justify-center size-9 rounded-[10px] bg-gradient-to-br from-[#FF9A52] via-[#F56A2A] to-[#D94716] shadow-[var(--shadow-warm)] ring-1 ring-white/20">
+              <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6">
+                <path d="M9 10H23L9 22H23" stroke="white" strokeWidth="3.25" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             </div>
             <div className="flex flex-col">
@@ -181,7 +179,7 @@ export default function Sidebar({ onClose }) {
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 px-4 py-2 space-y-0.5 overflow-y-auto custom-scrollbar">
+        <nav aria-label="Main navigation" className="flex-1 px-4 py-2 space-y-0.5 overflow-y-auto custom-scrollbar">
           <p className="px-3 pt-1 pb-1 text-[10px] font-semibold uppercase tracking-wider text-text-muted/55">
             Core
           </p>
@@ -190,6 +188,7 @@ export default function Sidebar({ onClose }) {
               key={item.href}
               href={item.href}
               onClick={onClose}
+              aria-current={isActive(item.href) ? "page" : undefined}
               className={cn(
                 "flex items-center gap-3 px-3 py-1 rounded-lg transition-all group",
                 isActive(item.href)

package/src/shared/components/Toggle.js

@@ -1,5 +1,6 @@
 "use client";
 
+import { useId } from "react";
 import { cn } from "@/shared/utils/cn";
 
 export default function Toggle({
@@ -10,7 +11,11 @@ export default function Toggle({
   disabled = false,
   size = "md",
   className,
+  busy = false,
+  ...props
 }) {
+  const labelId = useId();
+  const descriptionId = useId();
   const sizes = {
     sm: { track: "w-8 h-4", thumb: "size-3", translate: "translate-x-4" },
     md: { track: "w-11 h-6", thumb: "size-5", translate: "translate-x-5" },
@@ -18,7 +23,7 @@ export default function Toggle({
   };
 
   const handleClick = () => {
-    if (!disabled && onChange) onChange(!checked);
+    if (!disabled && !busy && onChange) onChange(!checked);
   };
 
   return (
@@ -33,8 +38,13 @@ export default function Toggle({
         type="button"
         role="switch"
         aria-checked={checked}
-        disabled={disabled}
+        aria-busy={busy || undefined}
+        aria-labelledby={label ? labelId : undefined}
+        aria-describedby={description ? descriptionId : undefined}
+        aria-label={!label ? props["aria-label"] : undefined}
+        disabled={disabled || busy}
         onClick={handleClick}
+        {...props}
         className={cn(
           "relative inline-flex shrink-0 cursor-pointer rounded-full",
           "transition-colors duration-200 ease-in-out",
@@ -57,10 +67,10 @@ export default function Toggle({
       {(label || description) && (
         <div className="flex flex-col">
           {label && (
-            <span className="text-sm font-medium text-text-main">{label}</span>
+            <label id={labelId} onClick={handleClick} className="text-sm font-medium text-text-main cursor-pointer">{label}</label>
           )}
           {description && (
-            <span className="text-xs text-text-muted">{description}</span>
+            <span id={descriptionId} className="text-xs text-text-muted">{description}</span>
           )}
         </div>
       )}

package/src/shared/components/layouts/DashboardLayout.js

@@ -43,6 +43,9 @@ export default function DashboardLayout({ children }) {
 
   return (
     <div className="flex h-screen w-full overflow-hidden bg-bg">
+      <a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-lg focus:bg-surface focus:px-4 focus:py-2 focus:text-text-main focus:shadow-lg">
+        Skip to main content
+      </a>
       <div className="fixed top-4 right-4 z-[80] flex w-[min(92vw,380px)] flex-col gap-2">
         {notifications.map((n) => {
           const style = getToastStyle(n.type);
@@ -95,7 +98,7 @@ export default function DashboardLayout({ children }) {
       </div>
 
       {/* Main content */}
-      <main className="flex flex-col flex-1 h-full min-w-0 relative transition-colors duration-300 isolate">
+      <main id="main-content" tabIndex={-1} className="flex flex-col flex-1 h-full min-w-0 relative transition-colors duration-300 isolate">
         {/* Faint grid background */}
         <div className="landing-grid absolute inset-0 pointer-events-none -z-10" aria-hidden="true" />
         {/* Playground / Terminal are full-bleed chrome — hide page header for a cleaner product feel */}
@@ -109,8 +112,8 @@ export default function DashboardLayout({ children }) {
         ) : (
           <Header key={pathname} onMenuClick={() => setSidebarOpen(true)} />
         )}
-        <div className={`flex-1 overflow-y-auto custom-scrollbar ${isFullBleed ? "" : "p-6 lg:p-10"} ${isFullBleed ? "flex flex-col overflow-hidden" : ""}`}>
-          <div className={`${isFullBleed ? "flex-1 w-full h-full flex flex-col min-h-0" : "max-w-7xl mx-auto"}`}>{children}</div>
+        <div className={`flex-1 overflow-y-auto custom-scrollbar ${isFullBleed ? "" : "px-4 py-5 sm:px-6 sm:py-7 lg:px-10 lg:py-8"} ${isFullBleed ? "flex flex-col overflow-hidden" : ""}`}>
+          <div className={`${isFullBleed ? "flex-1 w-full h-full flex flex-col min-h-0" : "max-w-6xl mx-auto"}`}>{children}</div>
         </div>
       </main>
     </div>

package/src/sse/services/auth.js

@@ -1,6 +1,6 @@
-import { getProviderConnections, validateApiKey, updateProviderConnection, getSettings, getQuotaSnapshot, getProxyPools } from "@/lib/localDb";
+import { getProviderConnections, validateApiKey, updateProviderConnection, getSettings, getQuotaSnapshot, getAllQuotaSnapshots, getProxyPools } from "@/lib/localDb";
 import { resolveConnectionProxyConfig, pickProxyPoolId } from "@/lib/network/connectionProxy";
-import { formatRetryAfter, checkFallbackError, isModelLockActive, buildModelLockUpdate, getEarliestModelLockUntil, isNonAccountError } from "open-sse/services/accountFallback.js";
+import { formatRetryAfter, checkFallbackError, isModelLockActive, buildModelLockUpdate, getEarliestModelLockUntil, isNonAccountError, extractProviderErrorCode, getQuotaResetAt, getQuotaExhaustedUntil } from "open-sse/services/accountFallback.js";
 import { MAX_RATE_LIMIT_COOLDOWN_MS } from "open-sse/config/errorConfig.js";
 import { resolveProviderId, FREE_PROVIDERS } from "@/shared/constants/providers.js";
 import * as log from "../utils/logger.js";
@@ -68,9 +68,19 @@ export async function getProviderCredentials(provider, excludeConnectionIds = nu
       return null;
     }
 
+    const quotaExhausted = new Map();
+    if (providerId === "codebuddy-cn") {
+      const snapshots = await getAllQuotaSnapshots(providerId);
+      for (const snapshot of snapshots) {
+        const until = getQuotaExhaustedUntil(snapshot.usage);
+        if (until) quotaExhausted.set(snapshot.connectionId, until);
+      }
+    }
+
     const baseAvailableConnections = connections.filter(c => {
       if (excludeSet.has(c.id)) return false;
       if (isModelLockActive(c, model)) return false;
+      if (quotaExhausted.has(c.id)) return false;
       return true;
     });
 
@@ -88,8 +98,13 @@ export async function getProviderCredentials(provider, excludeConnectionIds = nu
         log.warn("AUTH", `${provider} | pinned account excluded after failure: ${preferred.id?.slice(0, 8)}`);
         return null;
       }
-      if (isModelLockActive(preferred, model)) {
-        const retryAfter = getEarliestModelLockUntil(preferred);
+      if (isModelLockActive(preferred, model) || quotaExhausted.has(preferred.id)) {
+        const retryAfter = [
+          getEarliestModelLockUntil(preferred),
+          quotaExhausted.has(preferred.id)
+            ? new Date(quotaExhausted.get(preferred.id)).toISOString()
+            : null,
+        ].filter(Boolean).sort()[0];
         return {
           allRateLimited: true,
           retryAfter,
@@ -105,16 +120,20 @@ export async function getProviderCredentials(provider, excludeConnectionIds = nu
     connections.forEach(c => {
       const excluded = excludeSet.has(c.id);
       const locked = isModelLockActive(c, model);
-      if (excluded || locked) {
+      const exhaustedUntil = quotaExhausted.get(c.id);
+      if (excluded || locked || exhaustedUntil) {
         const lockUntil = getEarliestModelLockUntil(c);
-        log.debug("AUTH", `  \u2192 ${c.id?.slice(0, 8)} | ${excluded ? "excluded" : ""} ${locked ? `modelLocked(${model}) until ${lockUntil}` : ""}`);
+        log.debug("AUTH", `  \u2192 ${c.id?.slice(0, 8)} | ${excluded ? "excluded" : ""} ${locked ? `modelLocked(${model}) until ${lockUntil}` : ""} ${exhaustedUntil ? `quotaExhausted until ${new Date(exhaustedUntil).toISOString()}` : ""}`);
       }
     });
 
     if (availableConnections.length === 0) {
       // Find earliest lock expiry across all connections for retry timing
       const lockedConns = connections.filter(c => isModelLockActive(c, model));
-      const expiries = lockedConns.map(c => getEarliestModelLockUntil(c)).filter(Boolean);
+      const expiries = [
+        ...lockedConns.map(c => getEarliestModelLockUntil(c)).filter(Boolean),
+        ...quotaExhausted.values().map(timestamp => new Date(timestamp).toISOString()),
+      ];
       const earliest = expiries.sort()[0] || null;
       if (earliest) {
         const earliestConn = lockedConns[0];
@@ -314,6 +333,18 @@ export async function markAccountUnavailable(connectionId, status, errorText, pr
   const connections = await getProviderConnections({ provider });
   const conn = connections.find(c => c.id === connectionId);
   const backoffLevel = conn?.backoffLevel || 0;
+  const providerErrorCode = extractProviderErrorCode(errorText);
+
+  // CodeBuddy quota/eligibility errors are model-specific. Re-probe after the
+  // real quota-cycle reset instead of retrying every generic 403 cooldown.
+  const isCodeBuddyModelError =
+    provider === "codebuddy-cn" &&
+    (providerErrorCode === 14018 || providerErrorCode === 11140);
+
+  if (isCodeBuddyModelError) {
+    const snapshot = await getQuotaSnapshot(connectionId);
+    resetsAtMs = getQuotaResetAt(snapshot?.usage) || resetsAtMs;
+  }
 
   // Provider-specific precise cooldown (e.g. codex usage_limit_reached resets_at) overrides backoff
   let shouldFallback, cooldownMs, newBackoffLevel;
@@ -334,6 +365,8 @@ export async function markAccountUnavailable(connectionId, status, errorText, pr
     testStatus: "unavailable",
     lastError: reason,
     errorCode: status,
+    providerErrorCode,
+    modelLockReason: model ? { model, providerErrorCode, reason, resetsAt: new Date(Date.now() + cooldownMs).toISOString() } : null,
     lastErrorAt: new Date().toISOString(),
     backoffLevel: newBackoffLevel ?? backoffLevel
   });
@@ -367,7 +400,7 @@ export async function markAccountUnavailable(connectionId, status, errorText, pr
     "insufficient_quota", "quota exceeded", "payment required",
   ];
 
-  if (TERMINAL_AUTH_STATUSES.has(status)) {
+  if (TERMINAL_AUTH_STATUSES.has(status) && !isCodeBuddyModelError) {
     const lowerError = (typeof errorText === "string" ? errorText : "").toLowerCase();
     const isTerminalError = TERMINAL_ERROR_MARKERS.some(marker => lowerError.includes(marker));
 
@@ -439,7 +472,16 @@ export async function clearAccountError(connectionId, currentConnection, model =
 
   // Only reset error state if no active locks remain
   if (remainingActiveLocks.length === 0) {
-    Object.assign(clearObj, { testStatus: "active", lastError: null, lastErrorAt: null, backoffLevel: 0, consecutiveAuthFailures: 0 });
+    Object.assign(clearObj, {
+      testStatus: "active",
+      lastError: null,
+      errorCode: null,
+      providerErrorCode: null,
+      modelLockReason: null,
+      lastErrorAt: null,
+      backoffLevel: 0,
+      consecutiveAuthFailures: 0
+    });
   }
 
   await updateProviderConnection(connectionId, clearObj);