zevairouter 1.0.143 → 1.0.145

package/src/shared/components/UsageStats.js

@@ -18,26 +18,62 @@ 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="none" style={{ height: 480 }}>
       {/* Header */}
@@ -46,9 +82,12 @@ function RecentRequests({ requests = [] }) {
           <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
+          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>
 
@@ -59,7 +98,9 @@ function RecentRequests({ requests = [] }) {
           <table className="w-full min-w-[300px] border-collapse text-xs">
             <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>
@@ -67,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>
@@ -210,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;
@@ -263,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);
@@ -280,7 +338,10 @@ export default function UsageStats({ period: periodProp, setPeriod: setPeriodPro
       }
     };
 
-    es.onerror = () => setLoading(false);
+    es.onerror = () => {
+      setStreamStatus("reconnecting");
+      setLoading(false);
+    };
 
     return () => es.close();
   }, []);
@@ -449,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-4 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>
       )}