zevairouter 1.0.146 → 1.0.148

package/src/app/(dashboard)/dashboard/usage/components/ProviderTopology.js

@@ -11,6 +11,7 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { AI_PROVIDERS } from "@/shared/constants/providers";
+import ProviderIcon from "@/shared/components/ProviderIcon";
 
 // Force-stop FE animation if a provider stays active longer than this
 const FE_ACTIVE_TIMEOUT_MS = 60000;
@@ -105,6 +106,53 @@ RouterNode.propTypes = {
 
 const nodeTypes = { provider: ProviderNode, router: RouterNode };
 
+function MobileProviderRoute({ provider, status }) {
+  const config = getProviderConfig(provider.provider);
+  const label = (config.name !== provider.provider ? config.name : null) || provider.name || provider.provider;
+  const statusConfig = {
+    active: { label: "Live traffic", color: "text-success", dot: "bg-success" },
+    error: { label: "Last request failed", color: "text-error", dot: "bg-error" },
+    last: { label: "Last route", color: "text-warning", dot: "bg-warning" },
+    available: { label: "Available", color: "text-text-muted", dot: "bg-text-subtle" },
+  }[status];
+
+  return (
+    <div className="flex min-h-14 items-center gap-3 rounded-xl border border-border-subtle bg-surface px-3 py-2.5">
+      <div
+        className="flex size-9 shrink-0 items-center justify-center rounded-lg ring-1 ring-black/[0.04] dark:ring-white/[0.06]"
+        style={{ backgroundColor: `${config.color || "#6b7280"}15` }}
+      >
+        <ProviderIcon
+          src={getProviderImageUrl(provider.provider)}
+          alt=""
+          size={26}
+          className="max-h-[26px] max-w-[26px] rounded-md object-contain"
+          fallbackText={config.textIcon || (provider.provider || "?").slice(0, 2).toUpperCase()}
+          fallbackColor={config.color}
+        />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="truncate text-sm font-semibold text-text-main">{label}</p>
+        <p className={`mt-0.5 flex items-center gap-1.5 text-[11px] font-medium ${statusConfig.color}`}>
+          <span className={`size-1.5 shrink-0 rounded-full ${statusConfig.dot} ${status === "active" ? "animate-pulse" : ""}`} />
+          {statusConfig.label}
+        </p>
+      </div>
+      <span aria-hidden="true" className="material-symbols-outlined text-[18px] text-text-subtle">
+        arrow_forward
+      </span>
+    </div>
+  );
+}
+
+MobileProviderRoute.propTypes = {
+  provider: PropTypes.shape({
+    provider: PropTypes.string.isRequired,
+    name: PropTypes.string,
+  }).isRequired,
+  status: PropTypes.oneOf(["active", "error", "last", "available"]).isRequired,
+};
+
 // Place N nodes evenly along an ellipse around the router center.
 function buildLayout(providers, activeSet, lastSet, errorSet) {
   const nodeW = 160;
@@ -213,6 +261,16 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
   // Track firstSeen per active provider; drop provider if running too long (BE stuck)
   const firstSeenRef = useRef({});
   const [tick, setTick] = useState(0);
+  const [isDesktop, setIsDesktop] = useState(false);
+  const [mobileExpanded, setMobileExpanded] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia("(min-width: 640px)");
+    const syncViewport = () => setIsDesktop(media.matches);
+    syncViewport();
+    media.addEventListener("change", syncViewport);
+    return () => media.removeEventListener("change", syncViewport);
+  }, []);
 
   useEffect(() => {
     const seen = firstSeenRef.current;
@@ -250,6 +308,33 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
     [providers, activeSet, lastSet, errorSet]
   );
 
+  const mobileProviderRows = useMemo(() => {
+    const rank = { active: 0, error: 1, last: 2, available: 3 };
+    return providers
+      .map((provider) => {
+        const id = provider.provider?.toLowerCase();
+        const status = activeSet.has(id)
+          ? "active"
+          : errorSet.has(id)
+            ? "error"
+            : lastSet.has(id)
+              ? "last"
+              : "available";
+        return { provider, status };
+      })
+      .sort((a, b) => {
+        const statusDiff = rank[a.status] - rank[b.status];
+        if (statusDiff !== 0) return statusDiff;
+        const nameA = getProviderConfig(a.provider.provider).name || a.provider.name || a.provider.provider;
+        const nameB = getProviderConfig(b.provider.provider).name || b.provider.name || b.provider.provider;
+        return nameA.localeCompare(nameB);
+      });
+  }, [providers, activeSet, errorSet, lastSet]);
+
+  const visibleMobileRows = mobileExpanded
+    ? mobileProviderRows
+    : mobileProviderRows.slice(0, 6);
+
   // Stable key — only remount when provider list changes
   const providersKey = useMemo(
     () => providers.map((p) => p.provider).sort().join(","),
@@ -272,7 +357,7 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
     });
     ro.observe(el);
     return () => ro.disconnect();
-  }, []);
+  }, [isDesktop]);
 
   // Re-fit when node count/layout changes
   useEffect(() => {
@@ -283,7 +368,7 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
   }, [nodes.length]);
 
   return (
-    <div ref={containerRef} className="flex h-[340px] w-full min-w-0 flex-col overflow-hidden rounded-[14px] border border-border-subtle bg-surface/94 shadow-[0_14px_34px_-26px_rgba(15,23,42,0.28)] sm:h-[440px]">
+    <div ref={isDesktop ? containerRef : undefined} className="flex w-full min-w-0 flex-col overflow-hidden rounded-[14px] border border-border-subtle bg-surface/94 shadow-[0_14px_34px_-26px_rgba(15,23,42,0.28)] sm:h-[440px]">
       <div className="flex shrink-0 items-center justify-between border-b border-border-subtle bg-surface/75 px-4 py-3.5">
         <div className="flex items-center gap-2">
           <span className="material-symbols-outlined text-[17px] text-primary">route</span>
@@ -295,9 +380,49 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
       </div>
       <div className="min-h-0 flex-1 bg-bg/35">
         {providers.length === 0 ? (
-          <div className="flex h-full items-center justify-center text-sm text-text-muted">
+          <div className="flex min-h-56 items-center justify-center text-sm text-text-muted sm:h-full sm:min-h-0">
             No providers connected
           </div>
+        ) : !isDesktop ? (
+          <div className="p-3">
+            <div className="mb-3 flex items-center gap-3 rounded-xl border border-primary/20 bg-primary/[0.06] px-3 py-3">
+              <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 ring-1 ring-primary/15">
+                <img src="/favicon.svg" alt="" className="size-6" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-semibold text-primary">ZevaiRouter</p>
+                <p className="mt-0.5 text-[11px] text-text-muted">Routes requests to healthy providers</p>
+              </div>
+              {activeSet.size > 0 && (
+                <span className="rounded-full bg-success/10 px-2 py-1 text-[10px] font-semibold text-success">
+                  {activeSet.size} live
+                </span>
+              )}
+            </div>
+            <div className="ml-7 h-3 w-px bg-border" aria-hidden="true" />
+            <div className="space-y-2">
+              {visibleMobileRows.map(({ provider, status }) => (
+                <MobileProviderRoute
+                  key={provider.provider}
+                  provider={provider}
+                  status={status}
+                />
+              ))}
+            </div>
+            {mobileProviderRows.length > 6 && (
+              <button
+                type="button"
+                onClick={() => setMobileExpanded((current) => !current)}
+                className="mt-3 flex h-11 w-full items-center justify-center gap-1.5 rounded-xl border border-border bg-surface text-xs font-medium text-text-main transition-colors hover:border-primary/30 hover:text-primary"
+                aria-expanded={mobileExpanded}
+              >
+                {mobileExpanded ? "Show fewer providers" : `Show ${mobileProviderRows.length - 6} more providers`}
+                <span className="material-symbols-outlined text-[18px]">
+                  {mobileExpanded ? "expand_less" : "expand_more"}
+                </span>
+              </button>
+            )}
+          </div>
         ) : (
           <ReactFlow
             key={providersKey}

package/src/lib/oauth/services/bulkImportBrowserEngine.js

@@ -94,6 +94,42 @@ export function buildAccountFingerprint(seed) {
   };
 }
 
+/**
+ * Keep stealth dimensions internally consistent while bounding renderer cost on
+ * memory-constrained VPS hosts. Large DPR + 1440p fingerprints can consume most
+ * of a 2GB server before the login SPA finishes booting.
+ */
+export function compactAccountFingerprint(
+  fingerprint,
+  { maxWidth = 1280, maxHeight = 800, maxDeviceScaleFactor = 1.25 } = {},
+) {
+  if (!fingerprint || typeof fingerprint !== "object") return fingerprint;
+
+  const viewport = fingerprint.viewport || {};
+  const screen = fingerprint.screen || {};
+  const width = Math.min(Number(viewport.width) || maxWidth, maxWidth);
+  const height = Math.min(Number(viewport.height) || maxHeight, maxHeight);
+  const originalScreenHeight = Number(screen.height) || height;
+  const originalAvailHeight = Number(screen.availHeight) || originalScreenHeight;
+  const taskbarHeight = Math.max(0, originalScreenHeight - originalAvailHeight);
+
+  return {
+    ...fingerprint,
+    viewport: { width, height },
+    deviceScaleFactor: Math.min(
+      Number(fingerprint.deviceScaleFactor) || 1,
+      maxDeviceScaleFactor,
+    ),
+    screen: {
+      ...screen,
+      width,
+      height,
+      availWidth: width,
+      availHeight: Math.max(0, height - Math.min(taskbarHeight, 48)),
+    },
+  };
+}
+
 /**
  * Light init script for per-account HW/screen noise.
  * Avoids webdriver/WebGL patches that conflict with CloakBrowser binary stealth.