zevairouter 1.0.142 → 1.0.144

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

@@ -11,32 +11,79 @@ export default function OverviewCards({ stats }) {
   const hitRate = stats.totalPromptTokens > 0
     ? Math.min(100, (cached / stats.totalPromptTokens) * 100)
     : 0;
+
+  const metrics = [
+    {
+      label: "Requests",
+      value: fmt(stats.totalRequests),
+      icon: "send",
+      valueClass: "text-text-main",
+      iconClass: "bg-primary/10 text-primary ring-primary/15",
+      accentClass: "from-primary via-primary/70 to-transparent",
+      detail: "All routed calls",
+    },
+    {
+      label: "Input Tokens",
+      value: fmt(stats.totalPromptTokens),
+      icon: "input",
+      valueClass: "text-primary",
+      iconClass: "bg-primary/10 text-primary ring-primary/15",
+      accentClass: "from-primary via-primary/70 to-transparent",
+      detail: "Prompt and context",
+    },
+    {
+      label: "Cached Tokens",
+      value: fmt(cached),
+      icon: "database",
+      valueClass: "text-info",
+      iconClass: "bg-info/10 text-info ring-info/15",
+      accentClass: "from-info via-info/70 to-transparent",
+      detail: cached > 0 ? `${hitRate.toFixed(1)}% of input · cache rate` : "No cache hits yet",
+    },
+    {
+      label: "Output Tokens",
+      value: fmt(stats.totalCompletionTokens),
+      icon: "output",
+      valueClass: "text-success",
+      iconClass: "bg-success/10 text-success ring-success/15",
+      accentClass: "from-success via-success/70 to-transparent",
+      detail: "Generated responses",
+    },
+    {
+      label: "Est. Cost",
+      value: `~${fmtCost(stats.totalCost)}`,
+      icon: "payments",
+      valueClass: "text-warning",
+      iconClass: "bg-warning/10 text-warning ring-warning/15",
+      accentClass: "from-warning via-warning/70 to-transparent",
+      detail: "Estimated, not billing",
+      className: "col-span-2 sm:col-span-1",
+    },
+  ];
+
   return (
-    <div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5 sm:gap-4">
-      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
-        <span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
-        <span className="truncate text-2xl font-bold">{fmt(stats.totalRequests)}</span>
-      </Card>
-      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
-        <span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
-        <span className="truncate text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
-      </Card>
-      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
-        <span className="text-text-muted text-sm uppercase font-semibold">Cached Tokens</span>
-        <span className="truncate text-2xl font-bold text-info">{fmt(cached)}</span>
-        <span className="text-[10px] text-text-muted">
-          {cached > 0 ? `${hitRate.toFixed(1)}% of input · billed at cache rate` : "No cache hits yet"}
-        </span>
-      </Card>
-      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
-        <span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
-        <span className="truncate text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
-      </Card>
-      <Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
-        <span className="text-text-muted text-sm uppercase font-semibold">Est. Cost</span>
-        <span className="truncate text-2xl font-bold text-warning">~{fmtCost(stats.totalCost)}</span>
-        <span className="text-[10px] text-text-muted">Estimated, not actual billing</span>
-      </Card>
+    <div className="grid min-w-0 grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
+      {metrics.map((metric) => (
+        <Card
+          key={metric.label}
+          padding="none"
+          className={`group relative flex min-h-[118px] min-w-0 flex-col overflow-hidden p-3.5 transition-[border-color,box-shadow,transform] duration-200 hover:border-primary/20 sm:min-h-[130px] sm:p-4 ${metric.className || ""}`}
+        >
+          <span className={`absolute inset-x-0 top-0 h-0.5 bg-linear-to-r ${metric.accentClass}`} aria-hidden="true" />
+          <div className="flex items-start justify-between gap-2">
+            <span className="pt-0.5 text-[11px] font-bold uppercase tracking-[0.09em] text-text-muted">
+              {metric.label}
+            </span>
+            <span className={`material-symbols-outlined flex size-7 shrink-0 items-center justify-center rounded-lg text-[16px] ring-1 transition-transform duration-300 group-hover:scale-105 ${metric.iconClass}`}>
+              {metric.icon}
+            </span>
+          </div>
+          <span className={`mt-1.5 truncate text-[22px] font-bold tracking-[-0.02em] sm:text-2xl xl:text-[25px] ${metric.valueClass}`}>
+            {metric.value}
+          </span>
+          <span className="mt-auto min-h-[30px] text-[11px] leading-[1.35] text-text-muted">{metric.detail}</span>
+        </Card>
+      ))}
     </div>
   );
 }

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

@@ -283,35 +283,46 @@ export default function ProviderTopology({ providers = [], activeRequests = [],
   }, [nodes.length]);
 
   return (
-    <div ref={containerRef} className="h-[320px] w-full min-w-0 rounded-lg border border-border bg-bg-subtle/30 sm:h-[480px]">
-      {providers.length === 0 ? (
-        <div className="h-full flex items-center justify-center text-text-muted text-sm">
-          No providers connected
+    <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 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>
         </div>
-      ) : (
-        <ReactFlow
-          key={providersKey}
-          nodes={nodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          fitView
-          fitViewOptions={FIT_OPTS}
-          minZoom={0.1}
-          maxZoom={2}
-          onInit={onInit}
-          proOptions={{ hideAttribution: true }}
-          panOnDrag
-          zoomOnScroll
-          zoomOnPinch
-          zoomOnDoubleClick
-          preventScrolling={false}
-          nodesDraggable={false}
-          nodesConnectable={false}
-          elementsSelectable={false}
-        >
-          <Controls showInteractive={false} className="react-flow-controls-custom" />
-        </ReactFlow>
-      )}
+        <span className="rounded-full bg-primary/[0.08] px-2 py-1 text-[10px] font-semibold text-primary ring-1 ring-primary/15">
+          {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">
+            No providers connected
+          </div>
+        ) : (
+          <ReactFlow
+            key={providersKey}
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={nodeTypes}
+            fitView
+            fitViewOptions={FIT_OPTS}
+            minZoom={0.1}
+            maxZoom={2}
+            onInit={onInit}
+            proOptions={{ hideAttribution: true }}
+            panOnDrag
+            zoomOnScroll
+            zoomOnPinch
+            zoomOnDoubleClick
+            preventScrolling={false}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable={false}
+          >
+            <Controls showInteractive={false} className="react-flow-controls-custom" />
+          </ReactFlow>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -21,6 +21,13 @@ const fmtTokens = (n) => {
 };
 
 const fmtCost = (n) => `$${(n || 0).toFixed(4)}`;
+const PERIOD_LABELS = {
+  today: "Today",
+  "24h": "Last 24 hours",
+  "7d": "Last 7 days",
+  "30d": "Last 30 days",
+  "60d": "Last 60 days",
+};
 
 export default function UsageChart({ period = "7d" }) {
   const [data, setData] = useState([]);
@@ -50,20 +57,26 @@ export default function UsageChart({ period = "7d" }) {
   const hasData = data.some((d) => d.tokens > 0 || d.cost > 0);
 
   return (
-    <Card className="flex min-w-0 flex-col gap-3 p-3 sm:p-4">
-      <div className="grid w-full grid-cols-2 items-center gap-1 rounded-lg border border-border bg-bg-subtle p-1 sm:w-auto sm:self-start">
-        <button
-          onClick={() => setViewMode("tokens")}
-          className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "tokens" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
-        >
-          Tokens
-        </button>
-        <button
-          onClick={() => setViewMode("cost")}
-          className={`px-3 py-1 rounded-md text-sm font-medium transition-colors ${viewMode === "cost" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:text-text hover:bg-bg-hover"}`}
-        >
-          Cost
-        </button>
+    <Card className="flex min-w-0 flex-col gap-5 p-4 sm:p-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm font-semibold text-text-main">Usage trend</p>
+          <p className="mt-0.5 text-[11px] text-text-muted">{PERIOD_LABELS[period] || period} · routed traffic over time</p>
+        </div>
+        <div className="grid w-full grid-cols-2 items-center gap-1 rounded-lg border border-border bg-bg-subtle p-1 sm:w-auto">
+          <button
+            onClick={() => setViewMode("tokens")}
+            className={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${viewMode === "tokens" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:bg-bg-hover hover:text-text"}`}
+          >
+            Tokens
+          </button>
+          <button
+            onClick={() => setViewMode("cost")}
+            className={`rounded-md px-3 py-1 text-sm font-medium transition-colors ${viewMode === "cost" ? "bg-primary text-white shadow-sm" : "text-text-muted hover:bg-bg-hover hover:text-text"}`}
+          >
+            Cost
+          </button>
+        </div>
       </div>
 
       {loading ? (

package/src/app/(dashboard)/dashboard/usage/page.js

@@ -40,7 +40,7 @@ function UsageContent() {
   };
 
   return (
-    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0">
+    <div className="flex min-w-0 flex-col gap-6 px-1 sm:px-0 lg:gap-7">
       {/* Tabs + period selector on same row */}
       <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <SegmentedControl

package/src/app/globals.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url('../../node_modules/material-symbols/material-symbols-outlined.woff2') format('woff2');
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* Hide icon ligature text until font is ready */
@@ -42,8 +50,8 @@
   /* Text */
   --color-text: #0a0a0a;
   --color-text-main: #0a0a0a;
-  --color-text-muted: #6B7280;
-  --color-text-subtle: #9CA3AF;
+  --color-text-muted: #606A78;
+  --color-text-subtle: #7C8694;
 
   /* Status */
   --color-danger: #cf222e;
@@ -97,8 +105,8 @@
 
   --color-text: #ededed;
   --color-text-main: #ededed;
-  --color-text-muted: #9ca3af;
-  --color-text-subtle: #6b7280;
+  --color-text-muted: #a7aeb9;
+  --color-text-subtle: #858e9c;
 
   --color-danger: #ef4444;
   --color-success: #22c55e;
@@ -296,26 +304,30 @@ input, textarea {
 .traffic-light.yellow { background: #FFBD2E; }
 .traffic-light.green { background: #27C93F; }
 
-/* Material Symbols */
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined', sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: 'liga';
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
-.material-symbols-outlined.fill-1 {
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+/* Keep icon defaults below Tailwind utilities in the cascade. */
+@layer base {
+  .material-symbols-outlined {
+    font-family: 'Material Symbols Outlined', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .material-symbols-outlined.fill-1 {
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  }
 }
 
 /* Disable text selection on buttons */
@@ -418,13 +430,16 @@ button {
 /* Landing-style faint grid overlay (use absolute pos inside relative parent) */
 .landing-grid {
   background-image:
+    radial-gradient(circle at 18% 0%, rgba(229, 106, 74, 0.9) 0%, transparent 32%),
     linear-gradient(to right, var(--color-accent) 1px, transparent 1px),
     linear-gradient(to bottom, var(--color-accent) 1px, transparent 1px);
-  background-size: 40px 40px;
-  opacity: 0.08;
+  background-size: auto, 48px 48px, 48px 48px;
+  opacity: 0.055;
+  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 48%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 48%, transparent 100%);
 }
 .dark .landing-grid {
-  opacity: 0.04;
+  opacity: 0.045;
 }
 
 /* React Flow controls: match app theme */
@@ -501,18 +516,17 @@ button {
    ============================================================ */
 .card-3d {
   position: relative;
-  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
-  backdrop-filter: blur(12px) saturate(125%);
-  -webkit-backdrop-filter: blur(12px) saturate(125%);
+  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+  backdrop-filter: blur(14px) saturate(118%);
+  -webkit-backdrop-filter: blur(14px) saturate(118%);
   border-radius: var(--radius-brand-lg);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
-    0 1px 2px rgba(15, 23, 42, 0.05),
-    0 10px 24px -10px rgba(15, 23, 42, 0.18),
-    0 24px 48px -24px rgba(15, 23, 42, 0.22);
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.66),
+    0 1px 2px rgba(15, 23, 42, 0.045),
+    0 14px 34px -26px rgba(15, 23, 42, 0.28);
   transform: translateY(0);
-  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
-              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .card-3d::before {
   content: "";
@@ -525,12 +539,11 @@ button {
 }
 .card-3d > * { position: relative; z-index: 1; }
 .card-3d:hover {
-  transform: translateY(-3px);
+  transform: translateY(0);
   box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
-    0 2px 4px rgba(15, 23, 42, 0.06),
-    0 14px 32px -14px rgba(229, 106, 74, 0.22),
-    0 32px 60px -32px rgba(15, 23, 42, 0.24);
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.72),
+    0 2px 4px rgba(15, 23, 42, 0.05),
+    0 18px 40px -28px rgba(229, 106, 74, 0.3);
 }
 .card-3d-elev {
   box-shadow:
@@ -541,12 +554,11 @@ button {
 }
 
 .dark .card-3d {
-  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
+  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
-    0 1px 2px rgba(0, 0, 0, 0.4),
-    0 12px 28px -10px rgba(0, 0, 0, 0.55),
-    0 28px 56px -24px rgba(0, 0, 0, 0.6);
+    0 1px 2px rgba(0, 0, 0, 0.34),
+    0 16px 36px -26px rgba(0, 0, 0, 0.72);
 }
 .dark .card-3d::before {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%);
@@ -554,9 +566,8 @@ button {
 .dark .card-3d:hover {
   box-shadow:
     inset 0 1px 0 0 rgba(255, 255, 255, 0.09),
-    0 2px 4px rgba(0, 0, 0, 0.5),
-    0 16px 36px -14px rgba(229, 106, 74, 0.3),
-    0 36px 64px -32px rgba(0, 0, 0, 0.7);
+    0 2px 4px rgba(0, 0, 0, 0.42),
+    0 20px 44px -30px rgba(229, 106, 74, 0.38);
 }
 .dark .card-3d-elev {
   box-shadow:

package/src/app/landing/components/HeroSection.js

@@ -1,16 +1,25 @@
 "use client";
 
+import Link from "next/link";
+import { APP_CONFIG } from "@/shared/constants/config";
+
+const PROOF_POINTS = [
+  { icon: "route", label: "One /v1 endpoint", detail: "OpenAI compatible" },
+  { icon: "hub", label: "20+ providers", detail: "One control plane" },
+  { icon: "shield_lock", label: "Local-first", detail: "Your keys stay yours" },
+];
+
 export default function HeroSection() {
   return (
     <section className="relative pt-32 pb-20 px-6 min-h-[90vh] flex flex-col items-center justify-center overflow-hidden">
       {/* Glow effect */}
       <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-[#f97815]/10 rounded-full blur-[120px] pointer-events-none"></div>
       
-      <div className="relative z-10 max-w-4xl w-full text-center flex flex-col items-center gap-8">
+      <div className="relative z-10 max-w-5xl w-full text-center flex flex-col items-center gap-8">
         {/* Version badge */}
         <div className="inline-flex items-center gap-2 rounded-full border border-[#3a2f27] bg-[#23180f]/50 px-3 py-1 text-xs font-medium text-[#f97815]">
           <span className="flex h-2 w-2 rounded-full bg-[#f97815] animate-pulse"></span>
-          v1.0 is now live
+          v{APP_CONFIG.version} is live
         </div>
 
         {/* Main heading */}
@@ -26,22 +35,38 @@ export default function HeroSection() {
 
         {/* CTA Buttons */}
         <div className="flex flex-wrap items-center justify-center gap-4 w-full">
-          <button className="h-12 px-8 rounded-lg bg-[#f97815] hover:bg-[#e0650a] text-[#181411] text-base font-bold transition-all shadow-[0_0_15px_rgba(249,120,21,0.4)] flex items-center gap-2">
+          <Link
+            href="/dashboard"
+            className="h-12 px-8 rounded-lg bg-[#f97815] hover:bg-[#ff8a2f] text-[#181411] text-base font-bold transition-all duration-300 shadow-[0_0_15px_rgba(249,120,21,0.4)] hover:-translate-y-0.5 hover:shadow-[0_14px_32px_-12px_rgba(249,120,21,0.8)] flex items-center gap-2"
+          >
             <span className="material-symbols-outlined">rocket_launch</span>
             Get Started
-          </button>
+          </Link>
           <a 
             href="https://github.com/Verifiedlabs/zevairouter"
             target="_blank" 
             rel="noopener noreferrer"
-            className="h-12 px-8 rounded-lg border border-[#3a2f27] bg-[#23180f] hover:bg-[#3a2f27] text-white text-base font-bold transition-all flex items-center gap-2"
+            className="h-12 px-8 rounded-lg border border-[#3a2f27] bg-[#23180f]/90 hover:bg-[#3a2f27] hover:border-[#6a4a34] text-white text-base font-bold transition-all duration-300 hover:-translate-y-0.5 flex items-center gap-2"
           >
             <span className="material-symbols-outlined">code</span>
             View on GitHub
           </a>
         </div>
+
+        <dl className="hidden md:grid w-full max-w-3xl grid-cols-3 divide-x divide-[#3a2f27] overflow-hidden rounded-2xl border border-[#3a2f27] bg-[#1c1713]/75 p-1 shadow-[0_24px_70px_-45px_rgba(249,120,21,0.75)] backdrop-blur-xl">
+          {PROOF_POINTS.map((point) => (
+            <div key={point.label} className="flex items-center justify-center gap-3 px-5 py-3 text-left">
+              <span className="material-symbols-outlined flex size-9 shrink-0 items-center justify-center rounded-xl bg-[#f97815]/10 text-[19px] text-[#f97815] ring-1 ring-[#f97815]/15">
+                {point.icon}
+              </span>
+              <div>
+                <dt className="text-sm font-bold text-white">{point.label}</dt>
+                <dd className="mt-0.5 text-[11px] text-gray-500">{point.detail}</dd>
+              </div>
+            </div>
+          ))}
+        </dl>
       </div>
     </section>
   );
 }
-

package/src/app/landing/components/Navigation.js

@@ -23,11 +23,11 @@ export default function Navigation() {
         </button>
 
         {/* Desktop menu */}
-        <div className="hidden md:flex items-center gap-8">
-          <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="#features">Features</a>
-          <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="#how-it-works">How it Works</a>
-          <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="https://github.com/Verifiedlabs/zevairouter#readme" target="_blank" rel="noopener noreferrer">Docs</a>
-          <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors flex items-center gap-1" href="https://github.com/Verifiedlabs/zevairouter" target="_blank" rel="noopener noreferrer">
+        <div className="hidden md:flex items-center gap-1 rounded-full border border-[#3a2f27]/80 bg-[#23180f]/55 p-1 shadow-[0_12px_35px_-25px_rgba(249,120,21,0.8)]">
+          <a className="rounded-full px-3 py-1.5 text-gray-300 hover:bg-[#3a2f27]/70 hover:text-white text-sm font-medium transition-colors" href="#features">Features</a>
+          <a className="rounded-full px-3 py-1.5 text-gray-300 hover:bg-[#3a2f27]/70 hover:text-white text-sm font-medium transition-colors" href="#how-it-works">How it Works</a>
+          <a className="rounded-full px-3 py-1.5 text-gray-300 hover:bg-[#3a2f27]/70 hover:text-white text-sm font-medium transition-colors" href="https://github.com/Verifiedlabs/zevairouter#readme" target="_blank" rel="noopener noreferrer">Docs</a>
+          <a className="rounded-full px-3 py-1.5 text-gray-300 hover:bg-[#3a2f27]/70 hover:text-white text-sm font-medium transition-colors flex items-center gap-1" href="https://github.com/Verifiedlabs/zevairouter" target="_blank" rel="noopener noreferrer">
             GitHub <span className="material-symbols-outlined text-[14px]">open_in_new</span>
           </a>
         </div>
@@ -35,14 +35,19 @@ export default function Navigation() {
         {/* CTA + Mobile menu */}
         <div className="flex items-center gap-4">
           <button 
+            type="button"
             onClick={() => router.push("/dashboard")}
-            className="hidden sm:flex h-9 items-center justify-center rounded-lg px-4 bg-[#f97815] hover:bg-[#e0650a] transition-all text-[#181411] text-sm font-bold shadow-[0_0_15px_rgba(249,120,21,0.4)] hover:shadow-[0_0_20px_rgba(249,120,21,0.6)]"
+            className="hidden sm:flex h-10 items-center justify-center rounded-xl px-5 bg-[#f97815] hover:bg-[#ff8a2f] transition-all text-[#181411] text-sm font-bold shadow-[0_8px_24px_-10px_rgba(249,120,21,0.8)] hover:-translate-y-0.5 hover:shadow-[0_12px_30px_-10px_rgba(249,120,21,0.9)]"
           >
             Get Started
           </button>
           <button 
-            className="md:hidden text-white"
+            type="button"
+            className="flex size-10 items-center justify-center rounded-lg text-white transition-colors hover:bg-[#3a2f27] md:hidden"
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
+            aria-expanded={mobileMenuOpen}
+            aria-controls="landing-mobile-navigation"
           >
             <span className="material-symbols-outlined">{mobileMenuOpen ? "close" : "menu"}</span>
           </button>
@@ -51,13 +56,14 @@ export default function Navigation() {
 
       {/* Mobile menu dropdown */}
       {mobileMenuOpen && (
-        <div className="md:hidden border-t border-[#3a2f27] bg-[#181411]/95 backdrop-blur-md">
+        <div id="landing-mobile-navigation" className="md:hidden border-t border-[#3a2f27] bg-[#181411]/95 backdrop-blur-md">
           <div className="flex flex-col gap-4 p-6">
             <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="#features" onClick={() => setMobileMenuOpen(false)}>Features</a>
             <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="#how-it-works" onClick={() => setMobileMenuOpen(false)}>How it Works</a>
             <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="https://github.com/Verifiedlabs/zevairouter#readme" target="_blank" rel="noopener noreferrer">Docs</a>
             <a className="text-gray-300 hover:text-white text-sm font-medium transition-colors" href="https://github.com/Verifiedlabs/zevairouter" target="_blank" rel="noopener noreferrer">GitHub</a>
             <button 
+              type="button"
               onClick={() => router.push("/dashboard")}
               className="h-9 rounded-lg bg-[#f97815] hover:bg-[#e0650a] text-[#181411] text-sm font-bold"
             >
@@ -69,4 +75,3 @@ export default function Navigation() {
     </nav>
   );
 }
-

package/src/app/layout.js

@@ -1,5 +1,4 @@
 import { Inter } from "next/font/google";
-import "material-symbols/outlined.css";
 import "./globals.css";
 import { ThemeProvider } from "@/shared/components/ThemeProvider";
 import "@/lib/network/initOutboundProxy"; // Auto-initialize outbound proxy env

package/src/lib/db/repos/usageRepo.js

@@ -164,6 +164,27 @@ async function calculateCost(provider, model, tokens) {
   }
 }
 
+export function dedupeRecentRequests(entries, limit = 20) {
+  const seen = new Set();
+  return entries
+    .filter((entry) => {
+      if (entry.promptTokens === 0 && entry.completionTokens === 0) return false;
+      // Collapse legacy double-writes only when every persisted field, including
+      // the full timestamp, matches. Distinct requests in the same minute survive.
+      const key = JSON.stringify([
+        entry.timestamp,
+        entry.model,
+        entry.provider,
+        entry.promptTokens,
+        entry.completionTokens,
+      ]);
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    })
+    .slice(0, limit);
+}
+
 export function trackPendingRequest(model, provider, connectionId, started, error = false) {
   const modelKey = provider ? `${model} (${provider})` : model;
   const timerKey = `${connectionId}|${modelKey}`;
@@ -228,8 +249,7 @@ export async function getActiveRequests() {
   }
 
   await ensureRingInitialized();
-  const seen = new Set();
-  const recentRequests = [...recentRing.items]
+  const recentRequests = dedupeRecentRequests([...recentRing.items]
     .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
     .map((e) => {
       const t = e.tokens || {};
@@ -239,16 +259,7 @@ export async function getActiveRequests() {
         completionTokens: t.completion_tokens || t.output_tokens || 0,
         status: e.status || "ok",
       };
-    })
-    .filter((e) => {
-      if (e.promptTokens === 0 && e.completionTokens === 0) return false;
-      const minute = e.timestamp ? e.timestamp.slice(0, 16) : "";
-      const key = `${e.model}|${e.provider}|${e.promptTokens}|${e.completionTokens}|${minute}`;
-      if (seen.has(key)) return false;
-      seen.add(key);
-      return true;
-    })
-    .slice(0, 20);
+    }));
 
   const errorProvider = (Date.now() - lastErrorProvider.ts < 10000) ? lastErrorProvider.provider : "";
   return { activeRequests, recentRequests, errorProvider };
@@ -361,8 +372,7 @@ export async function getUsageStats(period = "all") {
 
   // recentRequests from live history (last 100 entries enough for 20 deduped)
   const recentRows = db.all(`SELECT timestamp, provider, model, tokens, status FROM usageHistory ORDER BY id DESC LIMIT 100`);
-  const seen = new Set();
-  const recentRequests = recentRows
+  const recentRequests = dedupeRecentRequests(recentRows
     .map((r) => {
       const t = parseJson(r.tokens, {}) || {};
       return {
@@ -371,16 +381,7 @@ export async function getUsageStats(period = "all") {
         completionTokens: t.completion_tokens || t.output_tokens || 0,
         status: r.status || "ok",
       };
-    })
-    .filter((e) => {
-      if (e.promptTokens === 0 && e.completionTokens === 0) return false;
-      const minute = e.timestamp ? e.timestamp.slice(0, 16) : "";
-      const key = `${e.model}|${e.provider}|${e.promptTokens}|${e.completionTokens}|${minute}`;
-      if (seen.has(key)) return false;
-      seen.add(key);
-      return true;
-    })
-    .slice(0, 20);
+    }));
 
   const stats = {
     totalRequests: 0,