zevairouter 1.0.145 → 1.0.147

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

@@ -11,11 +11,12 @@ 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;
 const FE_ACTIVE_TICK_MS = 1000;
-const FIT_OPTS = { padding: 0.2, duration: 200 };
+const FIT_OPTS = { padding: 0.14, duration: 200 };
 
 function getProviderConfig(providerId) {
   return AI_PROVIDERS[providerId] || { color: "#6b7280", name: providerId };
@@ -32,11 +33,11 @@ function ProviderNode({ data }) {
   const [imgError, setImgError] = useState(false);
   return (
     <div
-      className="flex items-center gap-2.5 px-4 py-2.5 rounded-lg border-2 transition-all duration-300 bg-bg"
+      className="flex items-center gap-2 rounded-lg border bg-surface px-3 py-2 transition-all duration-300"
       style={{
         borderColor: active ? color : "var(--color-border)",
-        boxShadow: active ? `0 0 16px ${color}40` : "none",
-        minWidth: "150px",
+        boxShadow: active ? `0 0 12px ${color}30` : "none",
+        minWidth: "140px",
       }}
     >
       <Handle type="target" position={Position.Top} id="top" className="!bg-transparent !border-0 !w-0 !h-0" />
@@ -46,19 +47,19 @@ function ProviderNode({ data }) {
 
       {/* Provider icon */}
       <div
-        className="w-8 h-8 rounded-md flex items-center justify-center shrink-0"
+        className="flex size-7 shrink-0 items-center justify-center rounded-md"
         style={{ backgroundColor: `${color}15` }}
       >
         {!imgError ? (
-          <img src={imageUrl} alt={label} className="w-6 h-6 rounded-sm object-contain" onError={() => setImgError(true)} />
+          <img src={imageUrl} alt={label} className="size-5 rounded-sm object-contain" onError={() => setImgError(true)} />
         ) : (
-          <span className="text-sm font-bold" style={{ color }}>{textIcon}</span>
+          <span className="text-xs font-bold" style={{ color }}>{textIcon}</span>
         )}
       </div>
 
       {/* Provider name */}
       <span
-        className="text-base font-medium truncate"
+        className="truncate text-sm font-medium"
         style={{ color: active ? color : "var(--color-text)" }}
       >
         {label}
@@ -82,16 +83,16 @@ ProviderNode.propTypes = {
 // Center ZevaiRouter node
 function RouterNode({ data }) {
   return (
-    <div className="flex items-center justify-center px-5 py-3 rounded-xl border-2 border-primary bg-primary/5 shadow-md min-w-[130px]">
+    <div className="flex min-w-[118px] items-center justify-center rounded-lg border border-primary bg-primary/[0.06] px-4 py-2.5 shadow-sm">
       <Handle type="source" position={Position.Top} id="top" className="!bg-transparent !border-0 !w-0 !h-0" />
       <Handle type="source" position={Position.Bottom} id="bottom" className="!bg-transparent !border-0 !w-0 !h-0" />
       <Handle type="source" position={Position.Left} id="left" className="!bg-transparent !border-0 !w-0 !h-0" />
       <Handle type="source" position={Position.Right} id="right" className="!bg-transparent !border-0 !w-0 !h-0" />
 
-      <img src="/favicon.svg" alt="ZevaiRouter" className="w-6 h-6 mr-2" />
-      <span className="text-sm font-bold text-primary">ZevaiRouter</span>
+      <img src="/favicon.svg" alt="ZevaiRouter" className="mr-2 size-5" />
+      <span className="text-xs font-semibold text-primary">ZevaiRouter</span>
       {data.activeCount > 0 && (
-        <span className="ml-2 px-1.5 py-0.5 rounded-full bg-primary text-white text-xs font-bold">
+        <span className="ml-2 rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-white">
           {data.activeCount}
         </span>
       )}
@@ -105,20 +106,67 @@ 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 = 180;
-  const nodeH = 30;
-  const routerW = 120;
-  const routerH = 44;
-  const nodeGap = 24;
+  const nodeW = 160;
+  const nodeH = 44;
+  const routerW = 118;
+  const routerH = 40;
+  const nodeGap = 20;
 
   const count = providers.length;
 
   // Compute rx so arc spacing between nodes >= nodeW + nodeGap
   const minRx = ((nodeW + nodeGap) * count) / (2 * Math.PI);
-  const rx = Math.max(320, minRx);
-  const ry = Math.max(200, rx * 0.55); // ellipse ratio ~0.55
+  const rx = Math.max(270, minRx);
+  const ry = Math.max(150, rx * 0.52);
   if (count === 0) {
     return {
       nodes: [{ id: "router", type: "router", position: { x: 0, y: 0 }, data: { activeCount: 0 }, draggable: false }],
@@ -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,21 +368,61 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
   }, [nodes.length]);
 
   return (
-    <div ref={containerRef} className="flex h-[360px] 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-[480px]">
+    <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>
-          <span className="text-xs font-bold uppercase tracking-[0.08em] text-text-muted">Routing Map</span>
+          <span className="text-xs font-semibold text-text-main">Routing map</span>
         </div>
-        <span className="rounded-full bg-primary/[0.08] px-2 py-1 text-[10px] font-semibold text-primary ring-1 ring-primary/15">
+        <span className="text-[11px] font-medium text-text-muted">
           {providers.length} {providers.length === 1 ? "provider" : "providers"}
         </span>
       </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/shared/components/Header.js

@@ -268,7 +268,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
           <button
             type="button"
             onClick={onMenuClick}
-            className="flex size-10 items-center justify-center rounded-lg text-text-main hover:bg-surface-2 hover:text-primary transition-colors"
+            className="flex size-11 items-center justify-center rounded-xl text-text-main hover:bg-surface-2 hover:text-primary transition-colors sm:size-10 sm:rounded-lg"
             aria-label="Open dashboard navigation"
           >
             <span className="material-symbols-outlined">menu</span>
@@ -350,7 +350,7 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
             </span>
           </div>
         )}
-        <ThemeToggle className="size-9 sm:size-10" />
+        <ThemeToggle className="size-11 sm:size-10" />
         <HeaderLanguage />
         <HeaderMenu onLogout={handleLogout} />
       </div>
@@ -377,13 +377,13 @@ function HeaderSearch() {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder={placeholder}
-        className="h-9 w-full rounded-xl border border-border bg-surface/80 pl-8 pr-7 text-sm shadow-sm transition-colors focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/10"
+        className="h-11 w-full rounded-xl border border-border bg-surface/80 pl-9 pr-11 text-sm shadow-sm transition-colors focus:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/10 sm:h-9 sm:pl-8 sm:pr-8"
       />
       {query && (
         <button
           type="button"
           onClick={() => setQuery("")}
-          className="absolute right-1 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-main p-0.5 rounded"
+          className="absolute right-0 top-1/2 flex size-11 -translate-y-1/2 items-center justify-center rounded-xl text-text-muted hover:text-text-main sm:right-0.5 sm:size-8 sm:rounded-lg"
           aria-label="Clear search"
         >
           <span className="material-symbols-outlined text-[16px]">close</span>

package/src/shared/components/HeaderLanguage.js

@@ -27,8 +27,9 @@ export default function HeaderLanguage() {
     <>
       <button
         onClick={() => setOpen(true)}
-        className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-all"
+        className="flex size-11 items-center justify-center rounded-xl text-text-muted transition-all hover:bg-black/5 hover:text-text-main dark:hover:bg-white/5 sm:size-10 sm:rounded-lg"
         title="Language"
+        aria-label="Change language"
         data-i18n-skip="true"
       >
         <span className="text-lg leading-none">{LOCALE_FLAGS[locale] || "🌐"}</span>

package/src/shared/components/HeaderMenu.js

@@ -71,8 +71,9 @@ export default function HeaderMenu({ onLogout }) {
       <div className="relative" ref={menuRef}>
         <button
           onClick={() => setIsOpen((v) => !v)}
-          className="flex items-center justify-center p-2 rounded-lg text-text-muted hover:text-text-main hover:bg-black/5 dark:hover:bg-white/5 transition-all"
+          className="flex size-11 items-center justify-center rounded-xl text-text-muted transition-all hover:bg-black/5 hover:text-text-main dark:hover:bg-white/5 sm:size-10 sm:rounded-lg"
           title="Menu"
+          aria-label="Open dashboard menu"
         >
           <span className="material-symbols-outlined">grid_view</span>
         </button>

package/src/shared/components/Toggle.js

@@ -12,6 +12,7 @@ export default function Toggle({
   size = "md",
   className,
   busy = false,
+  touchTarget = false,
   ...props
 }) {
   const labelId = useId();
@@ -26,6 +27,18 @@ export default function Toggle({
     if (!disabled && !busy && onChange) onChange(!checked);
   };
 
+  const thumb = (
+    <span
+      className={cn(
+        "pointer-events-none inline-block rounded-full bg-white shadow-sm",
+        "transform transition duration-200 ease-in-out",
+        checked ? sizes[size].translate : "translate-x-0.5",
+        sizes[size].thumb,
+        "mt-0.5"
+      )}
+    />
+  );
+
   return (
     <div
       className={cn(
@@ -46,23 +59,26 @@ export default function Toggle({
         onClick={handleClick}
         {...props}
         className={cn(
-          "relative inline-flex shrink-0 cursor-pointer rounded-full",
+          "relative inline-flex shrink-0 cursor-pointer",
           "transition-colors duration-200 ease-in-out",
           "focus:outline-none focus:ring-2 focus:ring-brand-500/30",
-          checked ? "bg-brand-500" : "bg-surface-3",
-          sizes[size].track,
+          touchTarget
+            ? "size-11 items-center justify-center rounded-xl sm:size-8 sm:rounded-lg"
+            : "rounded-full",
+          !touchTarget && (checked ? "bg-brand-500" : "bg-surface-3"),
+          !touchTarget && sizes[size].track,
           disabled && "cursor-not-allowed"
         )}
       >
-        <span
-          className={cn(
-            "pointer-events-none inline-block rounded-full bg-white shadow-sm",
-            "transform transition duration-200 ease-in-out",
-            checked ? sizes[size].translate : "translate-x-0.5",
-            sizes[size].thumb,
-            "mt-0.5"
-          )}
-        />
+        {touchTarget ? (
+          <span className={cn(
+            "relative inline-flex shrink-0 rounded-full",
+            checked ? "bg-brand-500" : "bg-surface-3",
+            sizes[size].track,
+          )}>
+            {thumb}
+          </span>
+        ) : thumb}
       </button>
       {(label || description) && (
         <div className="flex flex-col">

package/src/shared/components/UsageStats.js

@@ -75,12 +75,12 @@ function RecentRequests({ requests = [], streamStatus = "connecting" }) {
   const stream = STREAM_STATUS[streamStatus] || STREAM_STATUS.connecting;
 
   return (
-    <Card className="flex min-w-0 flex-col overflow-hidden" padding="none" style={{ height: 480 }}>
+    <Card className="flex h-[420px] min-w-0 flex-col overflow-hidden sm:h-[440px]" padding="none">
       {/* Header */}
       <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">monitor_heart</span>
-          <span className="text-xs font-bold uppercase tracking-[0.08em] text-text-muted">Recent Requests</span>
+          <span className="text-xs font-semibold text-text-main">Recent requests</span>
         </div>
         <span
           className={`inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-[10px] font-semibold ${stream.className}`}
@@ -125,7 +125,7 @@ function RecentRequests({ requests = [], streamStatus = "connecting" }) {
                     </td>
                     <td className="min-w-0 py-1.5 pr-2">
                       <div className="max-w-[132px] truncate font-mono" title={r.model}>{r.model}</div>
-                      <div className="mt-0.5 max-w-[132px] truncate text-[9px] font-semibold uppercase tracking-[0.08em] text-text-subtle" title={providerName}>
+                      <div className="mt-0.5 max-w-[132px] truncate text-[10px] font-medium text-text-subtle" title={providerName}>
                         {providerName}
                       </div>
                     </td>

package/cli/app/.next-cli-build/static/chunks/523-078802482e95c757.js

@@ -1,3 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[523],{80523:(e,t,s)=>{Promise.resolve().then(s.bind(s,95907))},95907:(e,t,s)=>{"use strict";s.d(t,{default:()=>p});var a=s(95155),r=s(12115),l=s(14051),n=s.n(l),i=s(98500),o=s.n(i),c=s(35497),d=s(11059);let m=[{icon:"public",title:"Access Anywhere",desc:"Use your API from any network"},{icon:"group",title:"Share Endpoint",desc:"Share URL with team members"},{icon:"code",title:"Use in Cursor/Cline",desc:"Connect AI tools remotely"},{icon:"lock",title:"Encrypted",desc:"End-to-end TLS via Cloudflare"}];async function u(e){if(!e)return!1;try{return(await fetch(`${e}/api/health`,{mode:"cors",cache:"no-store",signal:AbortSignal.timeout(5e3)})).ok}catch{return!1}}async function x(...e){let t=e.filter(Boolean).map(u);return!!t.length&&new Promise(e=>{let s=t.length;t.forEach(t=>t.then(t=>{t?e(!0):0==--s&&e(!1)}))})}function p({machineId:e}){let[t,s]=(0,r.useState)([]),[l,n]=(0,r.useState)(!0),[i,f]=(0,r.useState)(!1),[j,w]=(0,r.useState)(""),[k,v]=(0,r.useState)(null),[N,C]=(0,r.useState)(null),[S,T]=(0,r.useState)(null),[_,P]=(0,r.useState)(null),[$,E]=(0,r.useState)(()=>new Set),[A,I]=(0,r.useState)(()=>({})),[U,D]=(0,r.useState)(!1),[F,O]=(0,r.useState)(!0),[R,L]=(0,r.useState)(!0),[q,W]=(0,r.useState)(!1),[K,z]=(0,r.useState)(!0),[M,J]=(0,r.useState)(!1),[B,H]=(0,r.useState)(!1),[Z,V]=(0,r.useState)(""),[Q,X]=(0,r.useState)(""),[G,Y]=(0,r.useState)(!1),[ee,et]=(0,r.useState)(""),[es,ea]=(0,r.useState)(null),[er,el]=(0,r.useState)(!1),[en,ei]=(0,r.useState)(!1),[eo,ec]=(0,r.useState)(!1),[ed,em]=(0,r.useState)(!1),[eu,ex]=(0,r.useState)(""),[ep,eh]=(0,r.useState)(!1),[eg,eb]=(0,r.useState)(""),[ey,ef]=(0,r.useState)(null),[ej,ew]=(0,r.useState)(""),[ek,ev]=(0,r.useState)(""),[eN,eC]=(0,r.useState)(null),[eS,eT]=(0,r.useState)(!1),[e_,eP]=(0,r.useState)([]),[e$,eE]=(0,r.useState)(""),[eA,eI]=(0,r.useState)(!1),[eU,eD]=(0,r.useState)(!1),[eF,eO]=(0,r.useState)(!1),eR=(0,r.useRef)(null),eL=(0,r.useRef)(0),eq=(0,r.useRef)(0),eW=(0,r.useRef)(!1),eK=(0,r.useRef)(!1),ez=(0,r.useRef)(!1),eM=(0,r.useRef)(!1),[eJ,eB]=(0,r.useState)(!1),[eH,eZ]=(0,r.useState)(!1),[eV,eQ]=(0,r.useState)(!1);(0,r.useEffect)(()=>{eQ(!["localhost","127.0.0.1","::1"].includes(window.location.hostname))},[]);let{copied:eX,copy:eG}=(0,d.C)(),eY=!F||!R,e0=F?"Change the default dashboard password before activating the tunnel.":'Enable "Require login" and set a custom password before activating the tunnel.';(0,r.useEffect)(()=>{eR.current&&(eR.current.scrollTop=eR.current.scrollHeight)},[e_]),(0,r.useEffect)(()=>{e8(),e2()},[]),(0,r.useEffect)(()=>{if(!(M||eo))return;let e=!M||B,t=!eo||ed,s=()=>{document.hidden||e5()};if(document.addEventListener("visibilitychange",s),e&&t)return()=>document.removeEventListener("visibilitychange",s);let a=setInterval(()=>{document.hidden||e5()},5e3);return()=>{clearInterval(a),document.removeEventListener("visibilitychange",s)}},[M,eo,B,ed]),(0,r.useEffect)(()=>{let e=async()=>{if(!document.hidden){if(M&&(Z||Q)){let e=await x(Q,Z);eW.current=e,e?(eL.current=0,H(!0),ez.current||(ez.current=!0,eB(!0))):(eL.current+=1,eL.current>=5&&H(!1))}else eW.current=!1;if(eo&&eu){let e=await u(eu);eK.current=e,e?(eq.current=0,em(!0),eM.current||(eM.current=!0,eZ(!0))):(eq.current+=1,eq.current>=5&&em(!1))}else eK.current=!1}};if(!(M&&(Z||Q)||eo&&eu))return;e();let t=!eo||ed;if((!M||B)&&t)return;let s=setInterval(e,1e4);return()=>clearInterval(s)},[M,Z,Q,eo,eu,B,ed]);let e1=(0,r.useCallback)((e,t,s,a,r,l)=>{t.current?(s.current=0,a(!0),r.current||(r.current=!0,l(!0))):(s.current+=1,s.current>=5&&a(!1))},[]),e5=async()=>{try{let e=await fetch("/api/tunnel/status",{cache:"no-store"});if(!e.ok)return;let t=await e.json(),s=t.tunnel?.settingsEnabled??t.tunnel?.enabled??!1,a=t.tunnel?.tunnelUrl||"";V(a),X(t.tunnel?.publicUrl||""),J(s),e1(null,eW,eL,H,ez,eB);let r=t.tailscale?.settingsEnabled??t.tailscale?.enabled??!1,l=t.tailscale?.tunnelUrl||"";ex(l),ec(r),e1(null,eK,eq,em,eM,eZ)}catch{}},e2=async()=>{z(!0);try{let[e,t]=await Promise.all([fetch("/api/settings"),fetch("/api/tunnel/status",{cache:"no-store"})]);if(e.ok){let t=await e.json();D(t.requireApiKey||!1),O(!1!==t.requireLogin),L(t.hasPassword||!1),W(t.tunnelDashboardAccess||!1)}if(t.ok){let e=await t.json(),s=e.tunnel?.settingsEnabled??e.tunnel?.enabled??!1,a=e.tunnel?.tunnelUrl||"";V(a),X(e.tunnel?.publicUrl||""),J(s),e1(null,eW,eL,H,ez,eB);let r=e.tailscale?.settingsEnabled??e.tailscale?.enabled??!1,l=e.tailscale?.tunnelUrl||"";ex(l),ec(r),e1(null,eK,eq,em,eM,eZ)}}catch(e){console.log("Error loading settings:",e)}finally{z(!1)}},e3=async e=>{try{(await fetch("/api/settings",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({tunnelDashboardAccess:e})})).ok&&W(e)}catch(e){console.log("Error updating tunnelDashboardAccess:",e)}},e4=async e=>{try{(await fetch("/api/settings",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({requireApiKey:e})})).ok&&D(e)}catch(e){console.log("Error updating requireApiKey:",e)}},e8=async()=>{try{let e=await fetch("/api/keys"),t=await e.json();e.ok&&s(t.keys||[])}catch(e){console.log("Error fetching data:",e)}finally{n(!1)}},e6=async(...e)=>{Y(!0),et("Waiting for tunnel ready...");let t=e.filter(Boolean).map(e=>`${e}/api/health`),s=Date.now();for(;Date.now()-s<3e5;){if(await new Promise(e=>setTimeout(e,2e3)),await Promise.any(t.map(async e=>{if((await fetch(e,{mode:"cors",cache:"no-store"})).ok)return!0;throw Error("not ready")})).catch(()=>!1))return J(!0),Y(!1),et(""),!0;if((Date.now()-s)%1e4<2e3)try{let e=await fetch("/api/tunnel/status");if(e.ok){let t=await e.json();if(!t.tunnel?.enabled)return ea({type:"error",message:"Tunnel process stopped unexpectedly."}),Y(!1),et(""),!1}}catch{}}return ea({type:"error",message:"Tunnel created but not reachable. Please try again."}),Y(!1),et(""),!1},e9=async()=>{el(!1),Y(!0),ea(null),et("Creating tunnel...");let e=!0;(async()=>{for(;e;){try{let t=await fetch("/api/tunnel/status");if(t.ok){let s=await t.json();s.download?.downloading?et(`Downloading cloudflared... ${s.download.progress}%`):e&&et("Creating tunnel...")}}catch{}await new Promise(e=>setTimeout(e,1e3))}})();try{let t=await fetch("/api/tunnel/enable",{method:"POST"});e=!1;let s=await t.json();if(!t.ok)return void ea({type:"error",message:s.error||"Failed to enable tunnel"});let a=s.tunnelUrl;if(!a)return void ea({type:"error",message:"No tunnel URL returned"});V(a),X(s.publicUrl||""),await e6(s.publicUrl,a)}catch(e){ea({type:"error",message:e.message})}finally{e=!1,Y(!1),et("")}},e7=async()=>{Y(!0),ea(null);try{let e=await fetch("/api/tunnel/disable",{method:"POST"}),t=await e.json();e.ok?(J(!1),V(""),ei(!1),ea({type:"success",message:"Tunnel disabled"})):ea({type:"error",message:t.error||"Failed to disable tunnel"})}catch(e){ea({type:"error",message:e.message})}finally{Y(!1)}},te=async()=>{eC(null);try{let e=await fetch("/api/tunnel/tailscale-check");if(e.ok){let t=await e.json();return eC(t.installed),t}}catch{}return eC(!1),{installed:!1}},tt=async()=>{eT(!0),ef(null),eP([]);try{let e=await fetch("/api/tunnel/tailscale-install",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({sudoPassword:e$})});eE("");let t=e.body.getReader(),s=new TextDecoder,a="";for(;;){let{done:e,value:r}=await t.read();if(e)break;let l=(a+=s.decode(r,{stream:!0})).split("\n\n");for(let e of(a=l.pop()||"",l)){let t=e.split("\n"),s="progress",a=null;for(let e of t)if(e.startsWith("event: ")&&(s=e.slice(7).trim()),e.startsWith("data: "))try{a=JSON.parse(e.slice(6))}catch{}if(a)if("progress"===s)eP(e=>[...e.slice(-50),a.message]);else if("done"===s){eC(!0),eT(!1),eD(!1),tl();return}else"error"===s&&ef({type:"error",message:a.error||"Install failed"})}}}catch(e){ef({type:"error",message:e.message})}finally{eT(!1)}},ts=async e=>{eb("Waiting for Tailscale ready...");let t=`${e}/api/health`,s=Date.now();for(;Date.now()-s<3e5;){await new Promise(e=>setTimeout(e,2e3));try{let e=await fetch(t,{mode:"no-cors",cache:"no-store"});if(e.ok||"opaque"===e.type)return!0}catch{}}return!1},ta=(e,t)=>{ew(e),ev(t)},tr=()=>{ew(""),ev("")},tl=async()=>{eD(!1),eI(!0),eh(!0),ef(null),eb("Connecting..."),tr();try{let e=await fetch("/api/tunnel/tailscale-enable",{method:"POST"}),t=await e.json();if(e.ok&&t.success){ex(t.tunnelUrl||"");let e=await ts(t.tunnelUrl);ec(!0),ef(e?null:{type:"warning",message:"Connected but not reachable yet."});return}if(t.needsLogin&&t.authUrl){ta(t.authUrl,"Open Login Page"),eb('Login required — click "Open Login Page" to continue');for(let e=0;e<40;e++){await new Promise(e=>setTimeout(e,3e3));try{let e=await fetch("/api/tunnel/tailscale-check");if(e.ok&&(await e.json()).loggedIn){tr(),eb("Starting funnel...");let e=await fetch("/api/tunnel/tailscale-enable",{method:"POST"}),t=await e.json();if(e.ok&&t.success){ex(t.tunnelUrl||"");let e=await ts(t.tunnelUrl);ec(!0),ef(e?null:{type:"warning",message:"Connected but not reachable yet."})}else t.funnelNotEnabled&&t.enableUrl?await tn(t.enableUrl):ef({type:"error",message:t.error||"Failed to start funnel"});return}}catch{}}tr(),ef({type:"error",message:"Login timed out. Please try again."});return}if(t.funnelNotEnabled&&t.enableUrl)return void await tn(t.enableUrl);ef({type:"error",message:t.error||"Failed to connect"})}catch(e){ef({type:"error",message:e.message})}finally{eh(!1),eI(!1),eb(""),tr()}},tn=async e=>{ta(e,"Open Funnel Settings"),eb('Click "Open Funnel Settings" to enable Funnel...');for(let e=0;e<40;e++){await new Promise(e=>setTimeout(e,3e3));try{let e=await fetch("/api/tunnel/tailscale-enable",{method:"POST"}),t=await e.json();if(e.ok&&t.success){tr(),ex(t.tunnelUrl||"");let e=await ts(t.tunnelUrl);ec(!0),ef(e?null:{type:"warning",message:"Connected but not reachable yet."});return}if(t.funnelNotEnabled)continue;if(t.error){tr(),ef({type:"error",message:t.error});return}}catch{}}tr(),ef({type:"error",message:"Timed out waiting for Funnel to be enabled."})},ti=async()=>{eh(!0),ef(null);try{let e=await fetch("/api/tunnel/tailscale-disable",{method:"POST"}),t=await e.json();e.ok?(ec(!1),ex(""),eO(!1),ef({type:"success",message:"Tailscale disabled"})):ef({type:"error",message:t.error||"Failed to disable Tailscale"})}catch(e){ef({type:"error",message:e.message})}finally{eh(!1)}},to=async()=>{ef(null),eP([]);let e=await te();e?.installed&&e?.hasCachedPassword?tl():eD(!0)},tc=async e=>{if(e.preventDefault(),j.trim()&&!S){T("create"),P(null);try{let e=await fetch("/api/keys",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:j})}),t=await e.json();if(!e.ok)throw Error(t.error||`Failed to create key (${e.status})`);v(t.key),t.id&&t.key&&I(e=>({...e,[t.id]:t.key})),await e8(),w(""),f(!1),P({type:"success",message:"API key created"})}catch(e){P({type:"error",message:e.message})}finally{T(null)}}},td=async(e,t)=>{if(!S){T(`toggle:${e}`),P(null);try{let a=await fetch(`/api/keys/${e}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({isActive:t})});if(!a.ok)throw Error(`Failed to update key (${a.status})`);s(s=>s.map(s=>s.id===e?{...s,isActive:t}:s)),P({type:"success",message:"API key updated"})}catch(e){P({type:"error",message:e.message})}finally{T(null)}}},tm=async(e,t,a)=>{if(S)return;let r=""===a?0:Math.max(0,Number(a)||0);T(`budget:${e}`),P(null);try{let a=await fetch(`/api/keys/${e}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({[t]:r})});if(!a.ok)throw Error(`Failed to update budget (${a.status})`);s(s=>s.map(s=>s.id===e?{...s,[t]:r}:s)),P({type:"success",message:"Budget updated"})}catch(e){P({type:"error",message:e.message})}finally{T(null)}},tu=async e=>{if(A[e])return A[e];let t=await fetch(`/api/keys/${e}?reveal=1`,{cache:"no-store"}),s=await t.json().catch(()=>({}));if(!t.ok)throw Error(s.error||`Failed to reveal key (${t.status})`);let a=s.key?.key||s.key;if("string"!=typeof a||!a)throw Error("Key secret is not available");return I(t=>({...t,[e]:a})),a},tx=async e=>{if($.has(e))return void E(t=>{let s=new Set(t);return s.delete(e),s});try{await tu(e),E(t=>{let s=new Set(t);return s.add(e),s}),P(null)}catch(e){P({type:"error",message:e.message})}},tp=async e=>{try{let t=await tu(e);eG(t,e),P(null)}catch(e){P({type:"error",message:e.message})}},[th,tg]=(0,r.useState)("/v1");return((0,r.useEffect)(()=>{tg(`${window.location.origin}/v1`)},[]),l)?(0,a.jsxs)("div",{className:"flex flex-col gap-6 lg:gap-7",children:[(0,a.jsx)(c.Qv,{}),(0,a.jsx)(c.Qv,{})]}):(0,a.jsxs)("div",{className:"flex flex-col gap-6 lg:gap-7",children:[(0,a.jsxs)(c.Zp,{padding:"none",children:[(0,a.jsxs)("div",{className:"flex items-center gap-3 rounded-t-[13px] border-b border-border-subtle bg-linear-to-r from-primary/[0.07] via-primary/[0.025] to-transparent px-4 py-4 sm:px-5",children:[(0,a.jsx)("span",{className:"material-symbols-outlined flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/12 text-[22px] text-primary ring-1 ring-primary/15",children:"terminal"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("h2",{className:"text-lg font-semibold leading-tight",children:"API Endpoint"}),(0,a.jsx)("p",{className:"mt-0.5 text-xs text-text-muted",children:"Choose how local and remote clients connect to Zevai Router."})]})]}),(0,a.jsxs)("div",{className:"p-4 sm:p-5",children:[(0,a.jsxs)("div",{className:"flex flex-col gap-3",children:[(0,a.jsx)(h,{label:"Local",url:th,copyId:"local_url",copied:eX,onCopy:eG}),(0,a.jsxs)("div",{className:"grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2.5 rounded-xl border border-border-subtle bg-bg/55 p-3 transition-colors hover:border-primary/20 sm:flex",children:[(0,a.jsx)("span",{className:`col-span-full inline-flex min-h-8 w-full shrink-0 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] sm:w-[96px] ${M?"bg-primary/10 text-primary":"bg-surface-2 text-text-muted"}`,children:"Tunnel"}),M&&!G&&B?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(c.pd,{"aria-label":"Cloudflare Tunnel endpoint URL",value:`${Q||Z}/v1`,readOnly:!0,className:"w-full min-w-0 font-mono text-sm sm:flex-1"}),(0,a.jsx)("button",{onClick:()=>eG(`${Q||Z}/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",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"tunnel_url"===eX?"check":"content_copy"})}),(0,a.jsx)("button",{onClick:()=>ei(!0),className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Disable Tunnel",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]}):!M||G||B?G?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-border bg-input text-sm text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),ee||"Creating tunnel..."]}),(0,a.jsx)("button",{onClick:()=>{Y(!1),et("")},className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Stop",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]}):es?.type==="error"?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-red-300 dark:border-red-800 bg-red-500/5 text-sm text-red-600 dark:text-red-400",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-sm",children:"error"}),es.message]}),(0,a.jsx)(c.$n,{size:"sm",icon:"cloud_upload",onClick:()=>el(!0),children:"Enable"})]}):K?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-border bg-input text-sm text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),"Checking..."]}),(0,a.jsx)("button",{onClick:()=>z(!1),className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Stop",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]}):(0,a.jsx)(c.$n,{size:"sm",icon:"cloud_upload",onClick:()=>{eY?ea({type:"error",message:`Security required: ${e0}`}):U?el(!0):ea({type:"error",message:'Security required: Enable "Require API key" before activating the tunnel.'})},children:"Enable"}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-amber-300 dark:border-amber-800 bg-amber-500/5 text-sm text-amber-600 dark:text-amber-400",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),eJ?"Tunnel reconnecting...":"Tunnel checking..."]}),(0,a.jsx)("button",{onClick:()=>ei(!0),className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Disable Tunnel",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]})]}),(0,a.jsxs)("div",{className:"grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2.5 rounded-xl border border-border-subtle bg-bg/55 p-3 transition-colors hover:border-primary/20 sm:flex",children:[(0,a.jsx)("span",{className:`col-span-full inline-flex min-h-8 w-full shrink-0 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] sm:w-[96px] ${eo?"bg-primary/10 text-primary":"bg-surface-2 text-text-muted"}`,children:"Tailscale"}),eo&&!ep&&ed?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(c.pd,{"aria-label":"Tailscale endpoint URL",value:`${eu}/v1`,readOnly:!0,className:"w-full min-w-0 font-mono text-sm sm:flex-1"}),(0,a.jsx)("button",{onClick:()=>eG(`${eu}/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",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"ts_url"===eX?"check":"content_copy"})}),(0,a.jsx)("button",{onClick:()=>eO(!0),className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Disable Tailscale",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]}):!eo||ep||ed?ep||eA?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-border bg-input text-sm text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),eg||"Connecting..."]}),ej&&(0,a.jsx)(c.$n,{size:"sm",icon:"open_in_new",onClick:()=>window.open(ej,"tailscale_auth","width=600,height=700,noopener,noreferrer"),children:ek||"Open"}),(0,a.jsx)("button",{onClick:()=>{eh(!1),eI(!1),eb(""),tr()},className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Stop",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]}):ey?.type==="error"?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-red-300 dark:border-red-800 bg-red-500/5 text-sm text-red-600 dark:text-red-400",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-sm",children:"error"}),ey.message]}),(0,a.jsx)(c.$n,{size:"sm",icon:"vpn_lock",onClick:to,children:"Enable"})]}):(0,a.jsx)(c.$n,{size:"sm",icon:"vpn_lock",onClick:()=>{eY?ef({type:"error",message:`Security required: ${e0}`}):to()},className:"bg-linear-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white!",children:"Enable"}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex-1 flex items-center gap-2 px-3 py-1.5 rounded border border-amber-300 dark:border-amber-800 bg-amber-500/5 text-sm text-amber-600 dark:text-amber-400",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),eH?"Tailscale reconnecting...":"Tailscale checking..."]}),(0,a.jsx)("button",{onClick:()=>eO(!0),className:"p-2 hover:bg-red-500/10 rounded text-red-500 transition-colors shrink-0",title:"Disable Tailscale",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"power_settings_new"})})]})]})]}),eY&&!M&&!eo&&(0,a.jsx)("div",{className:"mt-4",children:(0,a.jsx)(y,{message:e0,action:{label:"Open settings",href:"/dashboard/profile"}})}),(M||eo)&&(0,a.jsxs)("div",{className:"mt-4 flex flex-col gap-2",children:[!U&&(0,a.jsx)(y,{message:"Require API key is disabled — your endpoint is publicly accessible without authentication.",action:{label:"Enable",href:"#require-api-key"}}),(!F||!R)&&(0,a.jsx)(y,{message:F?"Dashboard uses the default password — change it in Profile settings.":"Require login is disabled — anyone can access your dashboard via tunnel.",action:{label:F?"Change password":"Enable",href:"/dashboard/profile"}})]}),(M||eo)&&(0,a.jsxs)("div",{className:"mt-4 pt-4 border-t border-border flex items-center gap-3",children:[(0,a.jsx)(c.lM,{label:"Allow dashboard access via tunnel",checked:q,onChange:()=>e3(!q)}),(0,a.jsx)(b,{text:"When enabled, the dashboard can be accessed through your tunnel or Tailscale URL (login still required). When disabled, dashboard access via tunnel/Tailscale is completely blocked."})]})]})]}),(0,a.jsx)(c.Zp,{id:"rtk",padding:"none",className:"relative overflow-hidden border-primary/20 bg-linear-to-br from-primary/[0.08] via-surface to-surface",children:(0,a.jsxs)("div",{className:"relative flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-3.5",children:[(0,a.jsx)("span",{className:"material-symbols-outlined flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary text-[22px] text-white shadow-[0_10px_24px_-14px_rgba(229,106,74,0.9)]",children:"bolt"}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsx)("h2",{className:"text-lg font-semibold leading-tight",children:"Token Saver"}),(0,a.jsx)("p",{className:"mt-1 text-sm text-text-muted",children:"Tune RTK, Caveman, Ponytail, Headroom, and PXPIPE in one workspace."})]})]}),(0,a.jsxs)(o(),{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",children:["Open workspace",(0,a.jsx)("span",{className:"material-symbols-outlined text-[16px]",children:"arrow_forward"})]})]})}),(0,a.jsxs)(c.Zp,{id:"require-api-key",children:[(0,a.jsxs)("div",{className:"mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-[21px] text-primary ring-1 ring-primary/15",children:"vpn_key"}),(0,a.jsxs)("div",{className:"min-w-0",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,a.jsx)("h2",{className:"text-lg font-semibold leading-tight",children:"API Keys"}),(0,a.jsxs)("span",{className:"rounded-full bg-surface-2 px-2 py-0.5 text-[10px] font-semibold text-text-muted ring-1 ring-border-subtle",children:[t.length," ",1===t.length?"key":"keys"]})]}),(0,a.jsx)("p",{className:"mt-0.5 text-xs text-text-muted",children:"Control authentication and spending per client."})]})]}),(0,a.jsx)(c.$n,{icon:"add",onClick:()=>f(!0),className:"w-full sm:w-auto",children:"Create Key"})]}),_&&(0,a.jsx)("p",{role:"status",className:`mb-4 text-sm ${"error"===_.type?"text-red-500":"text-green-500"}`,children:_.message}),(0,a.jsxs)("div",{className:"mb-4 flex flex-col gap-3 rounded-xl border border-primary/15 bg-primary/[0.045] p-4 sm:flex-row sm:items-center sm:justify-between",children:[(0,a.jsxs)("div",{className:"flex items-start gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-surface text-[17px] text-primary ring-1 ring-border-subtle",children:"shield_lock"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{className:"font-medium",children:"Require API key"}),(0,a.jsx)("p",{className:"mt-0.5 text-sm text-text-muted",children:"Reject requests that do not include a valid client key."})]})]}),(0,a.jsx)("div",{className:"shrink-0 self-end sm:self-auto",children:(0,a.jsx)(c.lM,{label:"Require API key",checked:U,onChange:()=>e4(!U)})})]}),eV&&!U&&(0,a.jsx)("div",{className:"mb-4 -mt-2",children:(0,a.jsx)(y,{message:"Endpoint is exposed without an API key."})}),0===t.length?(0,a.jsxs)("div",{className:"rounded-xl border border-dashed border-border bg-surface-2/25 py-12 text-center",children:[(0,a.jsx)("div",{className:"inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[32px]",children:"vpn_key"})}),(0,a.jsx)("p",{className:"text-text-main font-medium mb-1",children:"No API keys yet"}),(0,a.jsx)("p",{className:"text-sm text-text-muted mb-4",children:"Create your first API key to get started"}),(0,a.jsx)(c.$n,{icon:"add",onClick:()=>f(!0),children:"Create Key"})]}):(0,a.jsx)("div",{className:"grid grid-cols-1 gap-3 lg:grid-cols-2",children:t.map(e=>{var t,r;return(0,a.jsxs)("div",{className:`group flex min-w-0 flex-wrap items-center justify-between gap-3 rounded-xl border border-border-subtle bg-surface-2/25 p-4 transition-[border-color,box-shadow,opacity] hover:border-primary/20 hover:shadow-[0_14px_28px_-26px_rgba(15,23,42,0.65)] ${!1===e.isActive?"opacity-60":""}`,children:[(0,a.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,a.jsx)("p",{className:"text-sm font-medium",children:e.name}),(0,a.jsxs)("div",{className:"flex items-center gap-2 mt-1 min-w-0",children:[(0,a.jsx)("code",{className:"text-xs text-text-muted font-mono truncate max-w-[min(100%,28rem)]",children:(t=e,$.has(t.id)&&A[t.id]?A[t.id]:t.maskedKey||((r=t.key)?r.length>8?r.slice(0,8)+"...":r:"")||"••••••••")}),(0,a.jsx)("button",{type:"button",onClick:()=>tx(e.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",title:$.has(e.id)?"Hide key":"Show key","aria-label":$.has(e.id)?"Hide API key":"Show API key",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[14px]",children:$.has(e.id)?"visibility_off":"visibility"})}),(0,a.jsx)("button",{type:"button",onClick:()=>tp(e.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",title:"Copy key","aria-label":"Copy API key",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[14px]",children:eX===e.id?"check":"content_copy"})})]}),(0,a.jsxs)("p",{className:"text-xs text-text-muted mt-1",children:["Created ",new Date(e.createdAt).toLocaleDateString()]}),!1===e.isActive&&(0,a.jsx)("p",{className:"text-xs text-orange-500 mt-1",children:"Paused"}),(0,a.jsxs)("div",{className:"mt-3 flex flex-wrap items-center gap-3",children:[(0,a.jsxs)("label",{className:"flex items-center gap-1 text-[11px] text-text-muted",children:["Daily $",(0,a.jsx)("input",{type:"number",min:"0",step:"0.01",disabled:S===`budget:${e.id}`,defaultValue:e.budgetDaily||0,onBlur:t=>tm(e.id,"budgetDaily",t.target.value),className:"w-16 rounded border border-border bg-surface px-1 py-0.5 text-[11px]",title:"Daily budget cap in USD (0 = unlimited)"})]}),(0,a.jsxs)("label",{className:"flex items-center gap-1 text-[11px] text-text-muted",children:["Monthly $",(0,a.jsx)("input",{type:"number",min:"0",step:"0.01",disabled:S===`budget:${e.id}`,defaultValue:e.budgetMonthly||0,onBlur:t=>tm(e.id,"budgetMonthly",t.target.value),className:"w-16 rounded border border-border bg-surface px-1 py-0.5 text-[11px]",title:"Monthly budget cap in USD (0 = unlimited)"})]})]})]}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)(c.lM,{size:"sm",disabled:S===`toggle:${e.id}`,checked:e.isActive??!0,onChange:t=>{e.isActive&&!t?C({title:"Pause API Key",message:`Pause API key "${e.name}"?
-
-This key will stop working immediately but can be resumed later.`,onConfirm:async()=>{C(null),td(e.id,t)}}):td(e.id,t)},title:e.isActive?"Pause key":"Resume key"}),(0,a.jsx)("button",{disabled:S===`delete:${e.id}`,onClick:()=>{var t;return t=e.id,void(!S&&C({title:"Delete API Key",message:"Delete this API key?",onConfirm:async()=>{C(null),T(`delete:${t}`),P(null);try{let e=await fetch(`/api/keys/${t}`,{method:"DELETE"});if(!e.ok)throw Error(`Failed to delete key (${e.status})`);s(e=>e.filter(e=>e.id!==t)),E(e=>{let s=new Set(e);return s.delete(t),s}),I(e=>{if(!(t in e))return e;let s={...e};return delete s[t],s}),P({type:"success",message:"API key deleted"})}catch(e){P({type:"error",message:e.message})}finally{T(null)}}}))},className:"p-2 hover:bg-red-500/10 rounded text-red-500 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all",children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:"delete"})})]})]},e.id)})})]}),(0,a.jsx)(c.aF,{isOpen:i,title:"Create API Key",onClose:()=>{f(!1),w("")},children:(0,a.jsxs)("form",{className:"flex flex-col gap-4",onSubmit:tc,children:[(0,a.jsx)(c.pd,{label:"Key Name",value:j,onChange:e=>w(e.target.value),placeholder:"Production Key"}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.$n,{type:"submit",fullWidth:!0,disabled:!j.trim()||"create"===S,children:"create"===S?"Creating...":"Create"}),(0,a.jsx)(c.$n,{type:"button",onClick:()=>{f(!1),w("")},variant:"ghost",fullWidth:!0,children:"Cancel"})]})]})}),(0,a.jsx)(c.aF,{isOpen:!!k,title:"API Key Created",onClose:()=>v(null),children:(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,a.jsxs)("div",{className:"bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4",children:[(0,a.jsx)("p",{className:"text-sm text-yellow-800 dark:text-yellow-200 mb-2 font-medium",children:"Save this key now!"}),(0,a.jsx)("p",{className:"text-sm text-yellow-700 dark:text-yellow-300",children:"This is the only time you will see this key. Store it securely."})]}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.pd,{value:k||"",readOnly:!0,className:"flex-1 font-mono text-sm"}),(0,a.jsx)(c.$n,{variant:"secondary",icon:"created_key"===eX?"check":"content_copy",onClick:()=>eG(k,"created_key"),children:"created_key"===eX?"Copied!":"Copy"})]}),(0,a.jsx)(c.$n,{onClick:()=>v(null),fullWidth:!0,children:"Done"})]})}),(0,a.jsx)(c.aF,{isOpen:er,title:"Enable Tunnel",onClose:()=>el(!1),children:(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,a.jsx)("div",{className:"bg-surface-2 border border-border-subtle rounded-lg p-4",children:(0,a.jsxs)("div",{className:"flex items-start gap-3",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-primary",children:"cloud_upload"}),(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{className:"text-sm text-text-main font-medium mb-1",children:"Cloudflare Tunnel"}),(0,a.jsx)("p",{className:"text-sm text-text-muted",children:"Expose your local ZevaiRouter to the internet. No port forwarding, no static IP needed. Share endpoint URL with your team or use it in Cursor, Cline, and other AI tools from anywhere."})]})]})}),(0,a.jsx)("div",{className:"grid grid-cols-2 gap-3",children:m.map(e=>(0,a.jsxs)("div",{className:"flex flex-col items-center text-center p-3 rounded-lg bg-sidebar/50",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-xl text-primary mb-1",children:e.icon}),(0,a.jsx)("p",{className:"text-xs font-semibold",children:e.title}),(0,a.jsx)("p",{className:"text-xs text-text-muted",children:e.desc})]},e.title))}),(0,a.jsx)("p",{className:"text-xs text-text-muted",children:"Requires outbound port 7844 (TCP/UDP). Connection may take 10-30s."}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.$n,{onClick:e9,fullWidth:!0,children:"Start Tunnel"}),(0,a.jsx)(c.$n,{onClick:()=>el(!1),variant:"ghost",fullWidth:!0,children:"Cancel"})]})]})}),(0,a.jsx)(c.aF,{isOpen:en,title:"Disable Tunnel",onClose:()=>!G&&ei(!1),children:(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,a.jsx)("p",{className:"text-sm text-text-muted",children:"The Cloudflare tunnel will be disconnected. Remote access via tunnel URL will stop working."}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.$n,{onClick:e7,fullWidth:!0,disabled:G,variant:"danger",children:G?"Disabling...":"Disable"}),(0,a.jsx)(c.$n,{onClick:()=>ei(!1),variant:"ghost",fullWidth:!0,disabled:G,children:"Cancel"})]})]})}),(0,a.jsx)(c.aF,{isOpen:eU,title:"Tailscale Funnel",onClose:()=>{eS||(eD(!1),eE(""),ef(null))},children:(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[null===eN&&(0,a.jsxs)("p",{className:"text-sm text-text-muted flex items-center gap-2",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),"Checking..."]}),!1===eN&&!eS&&(0,a.jsxs)("div",{className:"flex flex-col gap-3",children:[(0,a.jsx)("p",{className:"text-sm text-text-muted",children:"Tailscale is not installed. Install it to enable Funnel."}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.$n,{onClick:tt,fullWidth:!0,children:"Install Tailscale"}),(0,a.jsx)(c.$n,{onClick:()=>eD(!1),variant:"ghost",fullWidth:!0,children:"Cancel"})]})]}),eS&&(0,a.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 text-sm text-text-muted",children:[(0,a.jsx)("span",{className:"material-symbols-outlined animate-spin text-sm",children:"progress_activity"}),"Installing Tailscale..."]}),e_.length>0&&(0,a.jsx)("div",{ref:eR,className:"bg-black/5 dark:bg-white/5 rounded p-2 max-h-40 overflow-y-auto font-mono text-xs text-text-muted",children:e_.map((e,t)=>(0,a.jsx)("div",{children:e},t))})]}),!0===eN&&!eS&&(0,a.jsxs)("div",{className:"flex flex-col gap-3",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 text-sm text-green-600 dark:text-green-400",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[16px]",children:"check_circle"}),"Tailscale installed"]}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.$n,{onClick:()=>tl(),fullWidth:!0,children:"Connect"}),(0,a.jsx)(c.$n,{onClick:()=>eD(!1),variant:"ghost",fullWidth:!0,children:"Cancel"})]})]}),ey&&(0,a.jsx)(g,{status:ey})]})}),(0,a.jsx)(c.aF,{isOpen:eF,title:"Disable Tailscale",onClose:()=>!ep&&eO(!1),children:(0,a.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,a.jsx)("p",{className:"text-sm text-text-muted",children:"Tailscale Funnel will be stopped. Remote access via Tailscale URL will stop working."}),(0,a.jsxs)("div",{className:"flex gap-2",children:[(0,a.jsx)(c.$n,{onClick:ti,fullWidth:!0,disabled:ep,variant:"danger",children:ep?"Disabling...":"Disable"}),(0,a.jsx)(c.$n,{onClick:()=>eO(!1),variant:"ghost",fullWidth:!0,disabled:ep,children:"Cancel"})]})]})}),(0,a.jsx)(c.uo,{isOpen:!!N,onClose:()=>C(null),onConfirm:N?.onConfirm,title:N?.title||"Confirm",message:N?.message,variant:"danger"})]})}function h({label:e,url:t,copyId:s,copied:r,onCopy:l,badge:n,actions:i}){return(0,a.jsxs)("div",{className:"grid min-w-0 grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2.5 rounded-xl border border-border-subtle bg-bg/55 p-3 transition-colors hover:border-primary/20 sm:flex",children:[(0,a.jsx)("span",{className:`col-span-full inline-flex min-h-8 w-full shrink-0 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] sm:w-[96px] ${"CF"===n||"TS"===n?"bg-primary/10 text-primary":"bg-surface-2 text-text-muted"}`,children:e}),(0,a.jsx)(c.pd,{"aria-label":`${e} endpoint URL`,value:t,readOnly:!0,className:"w-full min-w-0 font-mono text-sm sm:flex-1"}),(0,a.jsx)("button",{onClick:()=>l(t,s),className:"p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors shrink-0","aria-label":`Copy ${e} endpoint URL`,children:(0,a.jsx)("span",{className:"material-symbols-outlined text-[18px]",children:r===s?"check":"content_copy"})}),i]})}function g({status:e,className:t=""}){return(0,a.jsx)("div",{className:`p-2 rounded text-sm ${t} ${"success"===e.type?"bg-green-500/10 text-green-600 dark:text-green-400":"warning"===e.type?"bg-yellow-500/10 text-yellow-600 dark:text-yellow-400":"info"===e.type?"bg-blue-500/10 text-blue-600 dark:text-blue-400":"bg-red-500/10 text-red-600 dark:text-red-400"}`,children:e.message.split(/(https?:\/\/[^\s]+)/g).map((e,t)=>/^https?:\/\//.test(e)?(0,a.jsx)("a",{href:e,target:"_blank",rel:"noreferrer",className:"underline font-medium",children:e},t):e)})}function b({text:e}){return(0,a.jsxs)("span",{className:"relative group inline-flex items-center",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[14px] text-text-muted cursor-help",children:"help"}),(0,a.jsx)("span",{className:"pointer-events-none absolute right-0 top-full z-50 mt-2 w-[min(16rem,calc(100vw-2rem))] rounded bg-gray-900 px-2.5 py-1.5 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:bg-gray-800",children:e})]})}function y({message:e,action:t}){return(0,a.jsxs)("div",{className:"flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-amber-700 dark:text-amber-400",children:[(0,a.jsx)("span",{className:"material-symbols-outlined text-[16px] shrink-0 mt-0.5",children:"warning"}),(0,a.jsx)("p",{className:"text-xs flex-1",children:e}),t&&(0,a.jsx)("a",{href:t.href,className:"text-xs font-medium underline shrink-0 hover:opacity-80",onClick:t.href.startsWith("#")?e=>{e.preventDefault(),document.getElementById(t.href.slice(1))?.scrollIntoView({behavior:"smooth"})}:void 0,children:t.label})]})}p.propTypes={machineId:n().string.isRequired}}}]);