zevairouter 1.0.142 → 1.0.144

package/src/shared/components/Button.js

@@ -12,9 +12,9 @@ const variants = {
 };
 
 const sizes = {
-  sm: "h-7 px-3 text-xs rounded-[8px]",
-  md: "h-9 px-4 text-sm rounded-[10px]",
-  lg: "h-11 px-6 text-sm rounded-[10px]",
+  sm: "h-10 px-3 text-xs rounded-[8px] sm:h-7",
+  md: "h-11 px-4 text-sm rounded-[10px] sm:h-9",
+  lg: "h-12 px-6 text-sm rounded-[10px] sm:h-11",
 };
 
 export default function Button({

package/src/shared/components/Header.js

@@ -171,7 +171,7 @@ const getPageInfo = (pathname) => {
     return {
       title: "Endpoint",
       description: "API endpoint configuration",
-      icon: "api",
+      icon: "terminal",
       breadcrumbs: [],
     };
   if (pathname.includes("/profile"))
@@ -206,7 +206,7 @@ const getPageInfo = (pathname) => {
     return {
       title: "Endpoint",
       description: "API endpoint configuration",
-      icon: "api",
+      icon: "terminal",
       breadcrumbs: [],
     };
   return { title: "", description: "", breadcrumbs: [] };
@@ -261,13 +261,15 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
   };
 
   return (
-    <header className="shrink-0 flex min-h-16 flex-wrap items-center justify-between gap-2 px-3 py-2.5 sm:gap-3 sm:px-4 sm:py-3 lg:px-8 border-b border-border-subtle bg-surface/80 backdrop-blur-xl z-20">
+    <header className="relative z-20 shrink-0 flex min-h-16 flex-wrap items-center justify-between gap-2 border-b border-border-subtle bg-surface/90 px-3 py-2.5 shadow-[0_12px_35px_-34px_rgba(15,23,42,0.8)] backdrop-blur-xl sm:gap-3 sm:px-4 sm:py-3 lg:min-h-[76px] lg:px-8">
       {/* Mobile menu button */}
       <div className="flex items-center gap-2 lg:hidden shrink-0">
         {showMenuButton && (
           <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"
+            aria-label="Open dashboard navigation"
           >
             <span className="material-symbols-outlined">menu</span>
           </button>
@@ -315,28 +317,30 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
             ))}
           </div>
         ) : title ? (
-          <div>
-            <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
+            <div className="flex min-w-0 flex-1 items-center gap-3">
               {icon && (
-                <span className="material-symbols-outlined text-primary text-xl lg:text-2xl">
-                  {icon}
+                <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-primary/10 text-primary ring-1 ring-primary/15 lg:size-10 lg:rounded-xl">
+                  <span className="material-symbols-outlined text-lg lg:text-[22px]">{icon}</span>
                 </span>
               )}
-              <h1 className="text-base lg:text-2xl font-semibold tracking-tight truncate">
-                {translate(title)}
-              </h1>
+              <div className="min-w-0">
+                <h1 className="truncate text-base font-semibold tracking-tight lg:text-[22px]">
+                  {translate(title)}
+                </h1>
+                {description && (
+                  <p className="hidden truncate text-sm text-text-muted lg:block">
+                    {translate(description)}
+                  </p>
+                )}
+              </div>
             </div>
-            {description && (
-              <p className="hidden lg:block text-sm text-text-muted truncate">
-                {translate(description)}
-              </p>
-            )}
           </div>
         ) : null}
       </div>
 
       {/* Right actions */}
-      <div className="order-2 flex items-center gap-0.5 shrink-0 sm:order-none sm:gap-1">
+      <div className="order-2 flex shrink-0 items-center gap-0.5 sm:order-none sm:gap-1 lg:rounded-xl lg:border lg:border-border-subtle lg:bg-surface-2/60 lg:p-1">
         {displayName && loginMethod === "OIDC" && (
           <div className="hidden sm:flex items-center max-w-[220px] px-3 py-1.5 rounded-full border border-border bg-surface/70 text-xs text-text-muted truncate">
             <span className="material-symbols-outlined text-[14px] mr-1.5 text-primary">person</span>
@@ -373,7 +377,7 @@ function HeaderSearch() {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         placeholder={placeholder}
-        className="w-full h-8 pl-7 pr-7 rounded-lg border border-border bg-surface/60 text-sm focus:outline-none focus:border-primary/50 transition-colors"
+        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"
       />
       {query && (
         <button

package/src/shared/components/SegmentedControl.js

@@ -11,8 +11,8 @@ export default function SegmentedControl({
   ...props
 }) {
   const sizes = {
-    sm: "h-7 text-xs",
-    md: "h-9 text-sm",
+    sm: "h-9 text-xs sm:h-7",
+    md: "h-10 text-sm sm:h-9",
     lg: "h-11 text-base",
   };
 

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

@@ -18,41 +18,89 @@ import ProviderTopology from "@/app/(dashboard)/dashboard/usage/components/Provi
 import UsageChart from "@/app/(dashboard)/dashboard/usage/components/UsageChart";
 
 function timeAgo(timestamp) {
-  const diff = Math.floor((Date.now() - new Date(timestamp)) / 1000);
+  const diff = Math.max(0, Math.floor((Date.now() - new Date(timestamp)) / 1000));
   if (diff < 60) return `${diff}s ago`;
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
   return `${Math.floor(diff / 86400)}d ago`;
 }
 
+function isSuccessfulStatus(status) {
+  if (!status) return true;
+  const normalized = String(status).trim().toLowerCase();
+  return normalized === "ok"
+    || normalized === "success"
+    || normalized === "succeeded"
+    || /^2\d\d(?:\s|$)/.test(normalized);
+}
+
 // Auto-update time display every second without re-rendering parent
 function TimeAgo({ timestamp }) {
   const [, setTick] = useState(0);
-  
+
   useEffect(() => {
     const timer = setInterval(() => setTick(t => t + 1), 1000);
     return () => clearInterval(timer);
   }, []);
-  
-  return <>{timeAgo(timestamp)}</>;
+
+  return (
+    <time dateTime={timestamp} title={new Date(timestamp).toLocaleString()}>
+      {timeAgo(timestamp)}
+    </time>
+  );
 }
 
-function RecentRequests({ requests = [] }) {
+const STREAM_STATUS = {
+  live: {
+    label: "Live",
+    title: "Usage stream connected",
+    className: "bg-success/10 text-success",
+    dotClassName: "bg-success animate-pulse",
+  },
+  reconnecting: {
+    label: "Reconnecting",
+    title: "Usage stream disconnected; reconnecting automatically",
+    className: "bg-warning/10 text-warning",
+    dotClassName: "bg-warning animate-pulse",
+  },
+  connecting: {
+    label: "Connecting",
+    title: "Connecting to the live usage stream",
+    className: "bg-primary/10 text-primary",
+    dotClassName: "bg-primary animate-pulse",
+  },
+};
+
+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="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 px-2 py-1 text-[10px] font-semibold ${stream.className}`}
+          title={stream.title}
+        >
+          <span aria-hidden="true" className={`size-1.5 rounded-full ${stream.dotClassName}`} />
+          {stream.label}
+        </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="w-2 py-1.5 text-left font-semibold text-text-muted">
+                  <span className="sr-only">Status</span>
+                </th>
                 <th className="py-1.5 text-left font-semibold text-text-muted">Model</th>
                 <th className="py-1.5 text-right font-semibold text-text-muted whitespace-nowrap">In / Out</th>
                 <th className="py-1.5 text-right font-semibold text-text-muted">When</th>
@@ -60,14 +108,28 @@ function RecentRequests({ requests = [] }) {
             </thead>
             <tbody className="divide-y divide-border/50">
               {requests.map((r, i) => {
-                const ok = !r.status || r.status === "ok" || r.status === "success";
+                const ok = isSuccessfulStatus(r.status);
+                const statusLabel = ok ? "Succeeded" : "Failed";
+                const providerName = AI_PROVIDERS[r.provider]?.name || FREE_PROVIDERS[r.provider]?.name || r.provider || "Unknown provider";
                 return (
-                  <tr key={i} className="hover:bg-bg-subtle transition-colors">
-                    <td className="py-1.5">
-                      <span className={`block w-1.5 h-1.5 rounded-full ${ok ? "bg-success" : "bg-error"}`} />
+                  <tr
+                    key={`${r.timestamp}-${r.model}-${r.provider}-${r.promptTokens}-${r.completionTokens}-${i}`}
+                    className="transition-colors hover:bg-bg-subtle"
+                  >
+                    <td className="py-1.5" title={statusLabel}>
+                      <span
+                        role="img"
+                        aria-label={statusLabel}
+                        className={`block size-1.5 rounded-full ${ok ? "bg-success" : "bg-error"}`}
+                      />
+                    </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}>
+                        {providerName}
+                      </div>
                     </td>
-                    <td className="py-1.5 font-mono truncate max-w-[120px]" title={r.model}>{r.model}</td>
-                    <td className="py-1.5 text-right whitespace-nowrap">
+                    <td className="py-1.5 text-right font-mono tabular-nums whitespace-nowrap">
                       <span className="text-primary">{fmt(r.promptTokens)}↑</span>
                       {" "}
                       <span className="text-success">{fmt(r.completionTokens)}↓</span>
@@ -203,6 +265,7 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
   const [tableView, setTableView] = useState("model");
   const [viewMode, setViewMode] = useState("costs");
   const [providers, setProviders] = useState([]);
+  const [streamStatus, setStreamStatus] = useState("connecting");
   const [periodLocal, setPeriodLocal] = useState("today");
   const isInitialLoad = useRef(true);
   const period = periodProp ?? periodLocal;
@@ -256,6 +319,8 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
   useEffect(() => {
     const es = new EventSource("/api/usage/stream");
 
+    es.onopen = () => setStreamStatus("live");
+
     es.onmessage = (e) => {
       try {
         const data = JSON.parse(e.data);
@@ -273,7 +338,10 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
       }
     };
 
-    es.onerror = () => setLoading(false);
+    es.onerror = () => {
+      setStreamStatus("reconnecting");
+      setLoading(false);
+    };
 
     return () => es.close();
   }, []);
@@ -415,7 +483,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,14 +510,14 @@ 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,3fr)_minmax(340px,2fr)]">
           <ProviderTopology
             providers={providers}
             activeRequests={stats.activeRequests || []}
             lastProvider={stats.recentRequests?.[0]?.provider || ""}
             errorProvider={stats.errorProvider || ""}
           />
-          <RecentRequests requests={stats.recentRequests || []} />
+          <RecentRequests requests={stats.recentRequests || []} streamStatus={streamStatus} />
         </div>
       )}
 

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"}}};