zevairouter 1.0.141 → 1.0.143

package/src/shared/components/Sidebar.js

@@ -18,7 +18,7 @@ const COMBINED_WEB_ITEM = { id: "web", label: "Web Fetch & Search", icon: "trave
 
 // Core forever — everyday router surface
 const coreItems = [
-  { href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },
+  { href: "/dashboard/endpoint", label: "Endpoint", icon: "terminal" },
   { href: "/dashboard/providers", label: "Providers", icon: "dns" },
   { href: "/dashboard/playground", label: "Playground", icon: "forum" },
   { href: "/dashboard/usage", label: "Usage", icon: "bar_chart" },
@@ -49,6 +49,20 @@ function isPathInItems(pathname, items) {
   return items.some((item) => pathname === item.href || pathname.startsWith(`${item.href}/`));
 }
 
+const NAV_ITEM_CLASS = "group relative flex min-h-11 items-center gap-3 rounded-xl border border-transparent px-3 py-2 transition-all duration-200 lg:min-h-9 lg:py-1";
+const NAV_ITEM_ACTIVE = "border-primary/15 bg-linear-to-r from-primary/15 to-primary/5 text-primary shadow-[0_12px_26px_-22px_rgba(229,106,74,0.9)]";
+const NAV_ITEM_IDLE = "text-text-muted hover:border-border-subtle hover:bg-surface-2 hover:text-text-main";
+const NAV_ICON_CLASS = "material-symbols-outlined flex size-7 shrink-0 items-center justify-center rounded-lg text-[18px] transition-all duration-200";
+
+function getNavIconClass(active) {
+  return cn(
+    NAV_ICON_CLASS,
+    active
+      ? "fill-1 bg-primary text-white shadow-[0_7px_16px_-8px_rgba(229,106,74,0.9)]"
+      : "group-hover:bg-primary/10 group-hover:text-primary"
+  );
+}
+
 export default function Sidebar({ onClose }) {
   const pathname = usePathname();
   const advancedActive = isPathInItems(pathname, advancedItems);
@@ -129,7 +143,7 @@ export default function Sidebar({ onClose }) {
 
   return (
     <>
-      <aside className="flex w-[min(18rem,86vw)] 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 lg:w-72">
+      <aside className="relative flex min-h-full w-[min(18rem,86vw)] flex-col overflow-hidden border-r border-border-subtle bg-vibrancy shadow-[8px_0_30px_-28px_rgba(0,0,0,0.45)] backdrop-blur-xl transition-colors duration-300 after:pointer-events-none after:absolute after:inset-y-0 after:right-0 after:w-px after:bg-linear-to-b after:from-transparent after:via-primary/25 after:to-transparent lg:w-72">
         {/* 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]" />
@@ -138,7 +152,7 @@ export default function Sidebar({ onClose }) {
         </div>
 
         {/* Logo */}
-        <div className="px-6 py-4 flex flex-col gap-2">
+        <div className="flex flex-col gap-2 border-b border-border-subtle/70 px-6 py-4">
           <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-[#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">
@@ -180,7 +194,7 @@ export default function Sidebar({ onClose }) {
 
         {/* Navigation */}
         <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">
+          <p className="px-3 pt-1 pb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted/55">
             Core
           </p>
           {coreItems.map((item) => (
@@ -190,18 +204,11 @@ export default function Sidebar({ onClose }) {
               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)
-                  ? "bg-primary/10 text-primary"
-                  : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                NAV_ITEM_CLASS,
+                isActive(item.href) ? NAV_ITEM_ACTIVE : NAV_ITEM_IDLE
               )}
             >
-              <span
-                className={cn(
-                  "material-symbols-outlined text-[18px]",
-                  isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
-                )}
-              >
+              <span className={getNavIconClass(isActive(item.href))}>
                 {item.icon}
               </span>
               <span className="text-[13px] font-medium">{item.label}</span>
@@ -213,14 +220,14 @@ export default function Sidebar({ onClose }) {
               type="button"
               onClick={() => setAdvancedOpen((v) => !v)}
               className={cn(
-                "w-full flex items-center gap-2 px-3 py-1 rounded-lg transition-all group",
+                "group flex min-h-11 w-full items-center gap-2 rounded-xl px-3 py-2 transition-all lg:min-h-9 lg:py-1",
                 advancedActive
                   ? "text-primary"
                   : "text-text-muted hover:bg-surface-2 hover:text-text-main"
               )}
               aria-expanded={advancedOpen}
             >
-              <p className="flex-1 text-left text-[10px] font-semibold uppercase tracking-wider text-text-muted/55">
+              <p className="flex-1 text-left text-[10px] font-semibold uppercase tracking-[0.14em] text-text-muted/55">
                 Advanced
               </p>
               <span className="text-[10px] font-medium text-text-subtle tabular-nums">
@@ -242,18 +249,11 @@ export default function Sidebar({ onClose }) {
                   href={item.href}
                   onClick={onClose}
                   className={cn(
-                    "flex items-center gap-3 px-3 py-1 rounded-lg transition-all group",
-                    isActive(item.href)
-                      ? "bg-primary/10 text-primary"
-                      : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                    NAV_ITEM_CLASS,
+                    isActive(item.href) ? NAV_ITEM_ACTIVE : NAV_ITEM_IDLE
                   )}
                 >
-                  <span
-                    className={cn(
-                      "material-symbols-outlined text-[18px]",
-                      isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
-                    )}
-                  >
+                  <span className={getNavIconClass(isActive(item.href))}>
                     {item.icon}
                   </span>
                   <span className="text-[13px] font-medium">{item.label}</span>
@@ -263,21 +263,23 @@ export default function Sidebar({ onClose }) {
 
           {/* System section */}
           <div className="pt-3 mt-2 space-y-0.5">
-            <p className="px-3 text-[10px] font-semibold text-text-muted/55 uppercase tracking-wider mb-1">
+            <p className="px-3 text-[10px] font-semibold text-text-muted/55 uppercase tracking-[0.14em] mb-1">
               System
             </p>
 
             {/* Media Providers accordion */}
             <button
+              type="button"
               onClick={() => setMediaOpen((v) => !v)}
               className={cn(
-                "w-full flex items-center gap-3 px-3 py-1 rounded-lg transition-all group",
+                NAV_ITEM_CLASS,
+                "w-full",
                 pathname.startsWith("/dashboard/media-providers")
-                  ? "bg-primary/10 text-primary"
-                  : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                  ? NAV_ITEM_ACTIVE
+                  : NAV_ITEM_IDLE
               )}
             >
-              <span className="material-symbols-outlined text-[18px]">perm_media</span>
+              <span className={getNavIconClass(pathname.startsWith("/dashboard/media-providers"))}>perm_media</span>
               <span className="text-[13px] font-medium flex-1 text-left">Media Providers</span>
               <span className={cn("material-symbols-outlined text-[14px] transition-transform", mediaOpen && "rotate-180")}>
                 expand_more
@@ -291,13 +293,14 @@ export default function Sidebar({ onClose }) {
                     href={`/dashboard/media-providers/${kind.id}`}
                     onClick={onClose}
                     className={cn(
-                      "flex items-center gap-3 px-4 py-1 rounded-lg transition-all group",
+                      NAV_ITEM_CLASS,
+                      "px-4",
                       pathname.startsWith(`/dashboard/media-providers/${kind.id}`)
-                        ? "bg-primary/10 text-primary"
-                        : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                        ? NAV_ITEM_ACTIVE
+                        : NAV_ITEM_IDLE
                     )}
                   >
-                    <span className="material-symbols-outlined text-[16px]">{kind.icon}</span>
+                    <span className={cn(getNavIconClass(pathname.startsWith(`/dashboard/media-providers/${kind.id}`)), "text-[16px]")}>{kind.icon}</span>
                     <span className="text-sm">{kind.label}</span>
                   </Link>
                 ))}
@@ -306,13 +309,14 @@ export default function Sidebar({ onClose }) {
                   href={COMBINED_WEB_ITEM.href}
                   onClick={onClose}
                   className={cn(
-                    "flex items-center gap-3 px-4 py-1 rounded-lg transition-all group",
+                    NAV_ITEM_CLASS,
+                    "px-4",
                     pathname.startsWith(COMBINED_WEB_ITEM.href)
-                      ? "bg-primary/10 text-primary"
-                      : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                      ? NAV_ITEM_ACTIVE
+                      : NAV_ITEM_IDLE
                   )}
                 >
-                  <span className="material-symbols-outlined text-[16px]">{COMBINED_WEB_ITEM.icon}</span>
+                  <span className={cn(getNavIconClass(pathname.startsWith(COMBINED_WEB_ITEM.href)), "text-[16px]")}>{COMBINED_WEB_ITEM.icon}</span>
                   <span className="text-sm">{COMBINED_WEB_ITEM.label}</span>
                 </Link>
               </div>
@@ -324,18 +328,11 @@ export default function Sidebar({ onClose }) {
                 href={item.href}
                 onClick={onClose}
                 className={cn(
-                  "flex items-center gap-3 px-3 py-1 rounded-lg transition-all group",
-                  isActive(item.href)
-                    ? "bg-primary/10 text-primary"
-                    : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                  NAV_ITEM_CLASS,
+                  isActive(item.href) ? NAV_ITEM_ACTIVE : NAV_ITEM_IDLE
                 )}
               >
-                <span
-                  className={cn(
-                    "material-symbols-outlined text-[18px]",
-                    isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
-                  )}
-                >
+                <span className={getNavIconClass(isActive(item.href))}>
                   {item.icon}
                 </span>
                 <span className="text-[13px] font-medium">{item.label}</span>
@@ -351,18 +348,11 @@ export default function Sidebar({ onClose }) {
                   href={item.href}
                   onClick={onClose}
                   className={cn(
-                    "flex items-center gap-3 px-3 py-1 rounded-lg transition-all group",
-                    isActive(item.href)
-                      ? "bg-primary/10 text-primary"
-                      : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                    NAV_ITEM_CLASS,
+                    isActive(item.href) ? NAV_ITEM_ACTIVE : NAV_ITEM_IDLE
                   )}
                 >
-                  <span
-                    className={cn(
-                      "material-symbols-outlined text-[18px]",
-                      isActive(item.href) ? "fill-1" : "group-hover:text-primary transition-colors"
-                    )}
-                  >
+                  <span className={getNavIconClass(isActive(item.href))}>
                     {item.icon}
                   </span>
                   <span className="text-[13px] font-medium">{item.label}</span>
@@ -375,18 +365,11 @@ export default function Sidebar({ onClose }) {
               href="/dashboard/profile"
               onClick={onClose}
               className={cn(
-                "flex items-center gap-3 px-3 py-1 rounded-lg transition-all group",
-                isActive("/dashboard/profile")
-                  ? "bg-primary/10 text-primary"
-                  : "text-text-muted hover:bg-surface-2 hover:text-text-main"
+                NAV_ITEM_CLASS,
+                isActive("/dashboard/profile") ? NAV_ITEM_ACTIVE : NAV_ITEM_IDLE
               )}
             >
-              <span
-                className={cn(
-                  "material-symbols-outlined text-[18px]",
-                  isActive("/dashboard/profile") ? "fill-1" : "group-hover:text-primary transition-colors"
-                )}
-              >
+              <span className={getNavIconClass(isActive("/dashboard/profile"))}>
                 settings
               </span>
               <span className="text-[13px] font-medium">Settings</span>

package/src/shared/components/UsageStats.js

@@ -39,18 +39,25 @@ function TimeAgo({ timestamp }) {
 
 function RecentRequests({ requests = [] }) {
   return (
-    <Card className="flex min-w-0 flex-col overflow-hidden" padding="sm" style={{ height: 480 }}>
+    <Card className="flex min-w-0 flex-col overflow-hidden" padding="none" style={{ height: 480 }}>
       {/* Header */}
-      <div className="px-1 py-2 border-b border-border shrink-0">
-        <span className="text-xs font-semibold text-text-muted uppercase tracking-wide">Recent Requests</span>
+      <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>
+        </div>
+        <span className="inline-flex items-center gap-1.5 rounded-full bg-success/10 px-2 py-1 text-[10px] font-semibold text-success">
+          <span className="size-1.5 rounded-full bg-success animate-pulse" />
+          Live
+        </span>
       </div>
 
       {!requests.length ? (
         <div className="flex-1 flex items-center justify-center text-text-muted text-sm">No requests yet.</div>
       ) : (
-        <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto px-4 pb-3">
           <table className="w-full min-w-[300px] border-collapse text-xs">
-            <thead className="sticky top-0 bg-bg z-10">
+            <thead className="sticky top-0 z-10 bg-surface/95 backdrop-blur-sm">
               <tr className="border-b border-border">
                 <th className="py-1.5 text-left font-semibold text-text-muted w-2"></th>
                 <th className="py-1.5 text-left font-semibold text-text-muted">Model</th>
@@ -415,7 +422,7 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
   );
 
   return (
-    <div className="flex min-w-0 flex-col gap-6">
+    <div className="flex min-w-0 flex-col gap-6 lg:gap-7">
       {/* Period selector (hidden when controlled by parent) */}
       {!hidePeriodSelector && (
         <div className="flex w-full items-center gap-2 sm:w-auto sm:self-end">
@@ -442,7 +449,7 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
 
       {/* Provider topology + Recent Requests */}
       {loading ? spinner : (
-        <div className="grid min-w-0 grid-cols-1 items-stretch gap-2 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]">
+        <div className="grid min-w-0 grid-cols-1 items-stretch gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]">
           <ProviderTopology
             providers={providers}
             activeRequests={stats.activeRequests || []}

package/cli/app/.next-cli-build/server/chunks/4491.js

@@ -1 +0,0 @@
-exports.id=4491,exports.ids=[4491],exports.modules={300:(a,b,c)=>{"use strict";c.d(b,{Zr:()=>e});let d=a=>b=>{try{let c=a(b);if(c instanceof Promise)return c;return{then:a=>d(a)(c),catch(a){return this}}}catch(a){return{then(a){return this},catch:b=>d(b)(a)}}},e=(a,b)=>(c,e,f)=>{let g,h={storage:function(a){let b;try{b=a()}catch(a){return}return{getItem:a=>{var c;let d=a=>null===a?null:JSON.parse(a,void 0),e=null!=(c=b.getItem(a))?c:null;return e instanceof Promise?e.then(d):d(e)},setItem:(a,c)=>b.setItem(a,JSON.stringify(c,void 0)),removeItem:a=>b.removeItem(a)}}(()=>window.localStorage),partialize:a=>a,version:0,merge:(a,b)=>({...b,...a}),...b},i=!1,j=0,k=new Set,l=new Set,m=h.storage;if(!m)return a((...a)=>{console.warn(`[zustand persist middleware] Unable to update item '${h.name}', the given storage is currently unavailable.`),c(...a)},e,f);let n=()=>{let a=h.partialize({...e()});return m.setItem(h.name,{state:a,version:h.version})},o=f.setState;f.setState=(a,b)=>(o(a,b),n());let p=a((...a)=>(c(...a),n()),e,f);f.getInitialState=()=>p;let q=()=>{var a,b;if(!m)return;let f=++j;i=!1,k.forEach(a=>{var b;return a(null!=(b=e())?b:p)});let o=(null==(b=h.onRehydrateStorage)?void 0:b.call(h,null!=(a=e())?a:p))||void 0;return d(m.getItem.bind(m))(h.name).then(a=>{if(a)if("number"!=typeof a.version||a.version===h.version)return[!1,a.state];else{if(h.migrate){let b=h.migrate(a.state,a.version);return b instanceof Promise?b.then(a=>[!0,a]):[!0,b]}console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}return[!1,void 0]}).then(a=>{var b;if(f!==j)return;let[d,i]=a;if(c(g=h.merge(i,null!=(b=e())?b:p),!0),d)return n()}).then(()=>{f===j&&(null==o||o(e(),void 0),g=e(),i=!0,l.forEach(a=>a(g)))}).catch(a=>{f===j&&(null==o||o(void 0,a))})};return f.persist={setOptions:a=>{h={...h,...a},a.storage&&(m=a.storage)},clearStorage:()=>{null==m||m.removeItem(h.name)},getOptions:()=>h,rehydrate:()=>q(),hasHydrated:()=>i,onHydrate:a=>(k.add(a),()=>{k.delete(a)}),onFinishHydration:a=>(l.add(a),()=>{l.delete(a)})},h.skipHydration||q(),g||p}},14953:(a,b,c)=>{"use strict";var d=c(68662);function e(){}function f(){}f.resetWarningCache=e,a.exports=function(){function a(a,b,c,e,f,g){if(g!==d){var h=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw h.name="Invariant Violation",h}}function b(){return a}a.isRequired=a;var c={array:a,bigint:a,bool:a,func:a,number:a,object:a,string:a,symbol:a,any:a,arrayOf:b,element:a,elementType:a,instanceOf:b,node:a,objectOf:b,oneOf:b,oneOfType:b,shape:b,exact:b,checkPropTypes:f,resetWarningCache:e};return c.PropTypes=c,c}},19099:(a,b,c)=>{"use strict";var d=c(54839);c.o(d,"notFound")&&c.d(b,{notFound:function(){return d.notFound}}),c.o(d,"useParams")&&c.d(b,{useParams:function(){return d.useParams}}),c.o(d,"usePathname")&&c.d(b,{usePathname:function(){return d.usePathname}}),c.o(d,"useRouter")&&c.d(b,{useRouter:function(){return d.useRouter}}),c.o(d,"useSearchParams")&&c.d(b,{useSearchParams:function(){return d.useSearchParams}})},31417:(a,b,c)=>{"use strict";c.d(b,{v:()=>g});var d=c(67484);let e=a=>{let b,c=new Set,d=(a,d)=>{let e="function"==typeof a?a(b):a;if(!Object.is(e,b)){let a=b;b=(null!=d?d:"object"!=typeof e||null===e)?e:Object.assign({},b,e),c.forEach(c=>c(b,a))}},e=()=>b,f={setState:d,getState:e,getInitialState:()=>g,subscribe:a=>(c.add(a),()=>c.delete(a))},g=b=a(d,e,f);return f},f=a=>{let b=a?e(a):e,c=a=>(function(a,b=a=>a){let c=d.useSyncExternalStore(a.subscribe,d.useCallback(()=>b(a.getState()),[a,b]),d.useCallback(()=>b(a.getInitialState()),[a,b]));return d.useDebugValue(c),c})(b,a);return Object.assign(c,b),c},g=a=>a?f(a):f},36497:()=>{},49885:(a,b,c)=>{a.exports=c(14953)()},55091:(a,b,c)=>{"use strict";Object.defineProperty(b,"__esModule",{value:!0}),Object.defineProperty(b,"default",{enumerable:!0,get:function(){return f}});let d=c(5735),e=c(22675);function f(){return(0,d.jsx)(e.HTTPAccessErrorFallback,{status:404,message:"This page could not be found."})}("function"==typeof b.default||"object"==typeof b.default&&null!==b.default)&&void 0===b.default.__esModule&&(Object.defineProperty(b.default,"__esModule",{value:!0}),Object.assign(b.default,b),a.exports=b.default)},68662:a=>{"use strict";a.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},75329:a=>{a.exports={style:{fontFamily:"'Inter', 'Inter Fallback'",fontStyle:"normal"},className:"__className_f367f3",variable:"__variable_f367f3"}}};