@splyntra/dashboard 0.3.0 → 1.0.0

package/README.md

@@ -0,0 +1,79 @@
+<p align="center">
+  <img src="https://avatars.githubusercontent.com/u/291030557?s=200" alt="Splyntra" width="64" />
+</p>
+
+# @splyntra/dashboard
+
+[![npm](https://img.shields.io/npm/v/@splyntra/dashboard)](https://www.npmjs.com/package/@splyntra/dashboard)
+[![License](https://img.shields.io/badge/license-AGPL--3.0-blue.svg)](../../LICENSE)
+
+The Splyntra open dashboard — a composable Next.js application providing trace visualization, agent metrics, cost analytics, evaluation results, alerts, and team management with RBAC.
+
+Published as **source** (not a prebuilt library). Consumers compose it with their overlays and run `next build`.
+
+## Prerequisites
+
+- Node.js 20+
+- PostgreSQL (metadata store)
+- Running Splyntra Collector (`localhost:4318`)
+- Running Evaluation service (`localhost:8002`) — optional
+
+## Local Development
+
+```bash
+# From the monorepo root
+docker compose up -d   # starts Postgres, ClickHouse, Collector, etc.
+
+# From this directory
+cp .env.local.example .env.local   # configure environment
+npm install
+npm run dev                        # http://localhost:3000
+```
+
+## Environment Variables
+
+| Variable          | Default                          | Description                         |
+|-------------------|----------------------------------|-------------------------------------|
+| `NEXTAUTH_SECRET` | —                                | Secret for NextAuth.js session encryption |
+| `NEXTAUTH_URL`    | `http://localhost:3000`          | Canonical app URL                   |
+| `POSTGRES_DSN`    | —                                | PostgreSQL connection string         |
+| `COLLECTOR_URL`   | `http://localhost:4318`          | Splyntra Collector base URL         |
+| `EVAL_URL`        | `http://localhost:8002`          | Evaluation service base URL         |
+
+## Scripts
+
+| Command          | Description                      |
+|------------------|----------------------------------|
+| `npm run dev`    | Start development server         |
+| `npm run build`  | Production build                 |
+| `npm run start`  | Start production server          |
+| `npm run lint`   | Run ESLint                       |
+| `npm run test`   | Run tests (Vitest)               |
+
+## Tech Stack
+
+- **Framework:** Next.js 14 (App Router)
+- **Auth:** NextAuth.js v5
+- **Styling:** Tailwind CSS
+- **Data fetching:** TanStack Query
+- **Charts:** Recharts
+- **Testing:** Vitest + React Testing Library
+
+## Pages
+
+| Route             | Purpose                                      |
+|-------------------|----------------------------------------------|
+| `/`               | Dashboard overview                           |
+| `/traces`         | Trace list and detail viewer                 |
+| `/agents`         | Agent registry and status                    |
+| `/metrics`        | Time-series observability metrics            |
+| `/costs`          | Token and cost analytics                     |
+| `/evaluations`    | Evaluation runs and regression results       |
+| `/alerts`         | Alert configuration and history              |
+| `/projects`       | Project management                           |
+| `/settings/team`  | Team members, invites, RBAC                  |
+| `/settings/keys`  | API key management                           |
+
+## License
+
+AGPL-3.0 — see [LICENSE](../../LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splyntra/dashboard",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Splyntra open dashboard — the composable source the commercial cloud build overlays. Published as source (not a prebuilt library): consumers compose it with their overlays + `next build`.",
   "license": "AGPL-3.0-only",
   "repository": {

package/public/manifest.json

@@ -5,5 +5,8 @@
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#4c6ef5"
+  "theme_color": "#4c6ef5",
+  "icons": [
+    { "src": "/logo.png", "sizes": "1000x1000", "type": "image/png", "purpose": "any maskable" }
+  ]
 }

package/src/app/agents/page.tsx

@@ -23,7 +23,7 @@ export default function AgentsPage() {
     : 0;
 
   return (
-    <div className="mx-auto max-w-6xl p-6">
+    <div className="mx-auto max-w-7xl p-6 lg:p-8">
       <PageHeader
         icon={Bot}
         title="Agents"
@@ -53,17 +53,17 @@ export default function AgentsPage() {
           </EmptyState>
         ) : (
           <table className="w-full text-sm">
-            <thead className="bg-gray-50 dark:bg-gray-800 border-b">
+            <thead className="border-b border-gray-100 bg-gray-50/80 dark:border-gray-800 dark:bg-gray-900/50">
               <tr>
-                <th className="px-4 py-3 text-left font-medium text-gray-500">Agent</th>
-                <th className="px-4 py-3 text-left font-medium text-gray-500">Status</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">Traces</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">Errors</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">Avg Latency</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">P95 Latency</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">Cost</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">Detections</th>
-                <th className="px-4 py-3 text-right font-medium text-gray-500">Last Seen</th>
+                <th className="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Agent</th>
+                <th className="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Status</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Traces</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Errors</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Avg Latency</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">P95 Latency</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Cost</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Detections</th>
+                <th className="px-4 py-3 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Last Seen</th>
               </tr>
             </thead>
             <tbody className="divide-y">

package/src/app/alerts/page.tsx

@@ -66,7 +66,7 @@ export default function AlertsPage() {
   }
 
   return (
-    <div className="mx-auto max-w-5xl p-6">
+    <div className="mx-auto max-w-6xl p-6 lg:p-8">
       <PageHeader
         icon={Bell}
         title="Alerts"
@@ -76,7 +76,7 @@ export default function AlertsPage() {
       {/* Create form */}
       <form
         onSubmit={onCreate}
-        className="bg-white dark:bg-gray-900 rounded-lg border p-4 mb-6 grid gap-3 md:grid-cols-4"
+        className="mb-6 grid gap-3 rounded-xl border border-gray-200/80 bg-white p-5 shadow-card dark:border-gray-800 dark:bg-gray-900 md:grid-cols-4"
       >
         <label className="flex flex-col text-sm md:col-span-2">
           <span className="text-xs text-gray-500 mb-1">Alert name</span>

package/src/app/api/eval/[...path]/route.ts

@@ -6,6 +6,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { auth as getSession } from "@/auth";
 import { roleAtLeast } from "@/lib/db";
+import "@/lib/collector-auth-providers"; // side-effect: registers the resolver (no-op in OSS, OAuth/org in cloud)
 import { resolveCollectorAuth } from "@/lib/collector-auth";
 
 export const dynamic = "force-dynamic";

package/src/app/api/v1/[...path]/route.ts

@@ -10,6 +10,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { auth as getSession } from "@/auth";
 import { roleAtLeast } from "@/lib/db";
+import "@/lib/collector-auth-providers"; // side-effect: registers the resolver (no-op in OSS, OAuth/org in cloud)
 import { resolveCollectorAuth } from "@/lib/collector-auth";
 
 export const dynamic = "force-dynamic";

package/src/app/costs/page.tsx

@@ -20,7 +20,7 @@ export default function CostsPage() {
   const avgCostPerCall = totalCalls > 0 ? summary.avg_cost_per_call : 0;
 
   return (
-    <div className="mx-auto max-w-6xl p-6">
+    <div className="mx-auto max-w-7xl p-6 lg:p-8">
       <PageHeader icon={DollarSign} title="Costs" subtitle="Token spend by run, model, and project" />
       {!hasRealData && !isLoading && (
         <p className="-mt-2 mb-4 text-xs text-amber-600">
@@ -46,7 +46,7 @@ export default function CostsPage() {
             {byProject.map((p) => (
               <div
                 key={p.project_id}
-                className="bg-white dark:bg-gray-900 rounded-lg border p-4"
+                className="rounded-xl border border-gray-200/80 bg-white p-5 shadow-card dark:border-gray-800 dark:bg-gray-900"
               >
                 <div className="text-xs font-medium font-mono truncate" title={p.project_id}>
                   {p.project_id}

package/src/app/globals.css

@@ -2,41 +2,87 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
 :root {
-  --background: #f8fafc;
-  --foreground: #1c2541;
+  --background: #fafbfc;
+  --foreground: #1e1b4b;
+  --sidebar-bg: #ffffff;
+  --card-bg: #ffffff;
+  --border: #e5e7eb;
+  --accent: #4f46e5;
+  --accent-light: #eef2ff;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0b0f14;
-    --foreground: #e1e8ed;
+    --background: #09090b;
+    --foreground: #f4f4f5;
+    --sidebar-bg: #0f0f12;
+    --card-bg: #18181b;
+    --border: #27272a;
+    --accent: #6366f1;
+    --accent-light: #1e1b4b;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  letter-spacing: -0.011em;
+}
+
+/* Focus states — accessible and consistent */
+*:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
 }
 
 /* Subtle, unobtrusive scrollbars */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
+  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
 }
 *::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 *::-webkit-scrollbar-thumb {
-  background-color: rgba(148, 163, 184, 0.5);
+  background-color: rgba(148, 163, 184, 0.3);
   border-radius: 9999px;
 }
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(148, 163, 184, 0.5);
+}
 *::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* Utility classes */
+@layer utilities {
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-splyntra-600 to-splyntra-400;
+  }
+  .glass-card {
+    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border border-gray-200/60 dark:border-gray-800/60;
+  }
+}
+
+/* Table styling */
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* Smooth transitions for interactive elements */
+a, button, input, select, textarea {
+  transition-property: color, background-color, border-color, box-shadow, opacity;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}

package/src/app/layout.tsx

@@ -5,8 +5,10 @@ import { Providers } from "./providers";
 import { AppShell } from "@/components/layout/AppShell";
 
 export const metadata: Metadata = {
-  title: "Splyntra - Agent Observability & Security",
+  title: "Splyntra — Agent Observability & Security",
   description: "Unified observability and security for AI agents",
+  icons: { icon: "/logo.png", apple: "/logo.png", shortcut: "/logo.png" },
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({
@@ -15,8 +17,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className="min-h-screen bg-gray-50 dark:bg-gray-950">
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen bg-[var(--background)] antialiased">
         <Providers>
           <AppShell>{children}</AppShell>
         </Providers>

package/src/app/login/page.tsx

@@ -29,21 +29,21 @@ export default function LoginPage() {
 
   return (
     <AuthCard title="Sign in to Splyntra">
-      <form onSubmit={onSubmit} className="space-y-3">
+      <form onSubmit={onSubmit} className="space-y-4">
         <Field name="email" type="email" label="Email" />
         <Field name="password" type="password" label="Password" />
         {error && <p className="text-sm text-red-600">{error}</p>}
         <button
           type="submit"
           disabled={busy}
-          className="w-full rounded-lg bg-splyntra-600 py-2 text-sm font-medium text-white hover:bg-splyntra-700 disabled:opacity-50"
+          className="w-full rounded-xl bg-gradient-to-r from-splyntra-600 to-splyntra-500 py-2.5 text-sm font-semibold text-white shadow-md shadow-splyntra-500/20 transition-all hover:from-splyntra-700 hover:to-splyntra-600 hover:shadow-lg hover:shadow-splyntra-500/30 disabled:opacity-50"
         >
           {busy ? "Signing in…" : "Sign in"}
         </button>
       </form>
-      <p className="mt-4 text-center text-sm text-gray-500">
+      <p className="mt-5 text-center text-[13px] text-gray-500">
         No account?{" "}
-        <Link href="/signup" className="text-splyntra-600 hover:underline">
+        <Link href="/signup" className="font-medium text-splyntra-600 hover:text-splyntra-700 hover:underline">
           Create one
         </Link>
       </p>

package/src/app/page.tsx

@@ -8,12 +8,16 @@ import {
   Bell,
   ShieldCheck,
   ArrowRight,
+  LineChart,
+  ClipboardCheck,
   type LucideIcon,
 } from "lucide-react";
 
 const cards: { href: string; title: string; desc: string; icon: LucideIcon }[] = [
   { href: "/traces", title: "Traces", desc: "Full execution traces with unified risk scores", icon: Activity },
   { href: "/agents", title: "Agents", desc: "Monitor registered agents, latency, and errors", icon: Bot },
+  { href: "/metrics", title: "Metrics", desc: "Time-series observability metrics and trends", icon: LineChart },
+  { href: "/evaluations", title: "Evaluation", desc: "Scored evaluations and regression gates", icon: ClipboardCheck },
   { href: "/costs", title: "Costs", desc: "Token spend by run, model, and project", icon: DollarSign },
   { href: "/projects", title: "Projects", desc: "Scope every view to a project", icon: FolderKanban },
   { href: "/alerts", title: "Alerts", desc: "Fire on risk thresholds; view history", icon: Bell },
@@ -21,36 +25,48 @@ const cards: { href: string; title: string; desc: string; icon: LucideIcon }[] =
 
 export default function Home() {
   return (
-    <div className="mx-auto flex min-h-full max-w-4xl flex-col justify-center px-6 py-16">
-      <div className="mb-10 text-center">
-        <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-splyntra-600 text-white shadow-sm">
-          <ShieldCheck className="h-7 w-7" />
+    <div className="mx-auto flex min-h-full max-w-5xl flex-col justify-center px-8 py-16">
+      {/* Hero */}
+      <div className="mb-12 text-center">
+        <div className="mb-5 inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-splyntra-500 to-splyntra-700 text-white shadow-lg shadow-splyntra-500/25">
+          <ShieldCheck className="h-8 w-8" />
         </div>
-        <h1 className="text-3xl font-bold tracking-tight text-splyntra-900 dark:text-white">Splyntra</h1>
-        <p className="mx-auto mt-3 max-w-xl text-base text-gray-600 dark:text-gray-400">
+        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
+          Welcome to <span className="text-gradient">Splyntra</span>
+        </h1>
+        <p className="mx-auto mt-4 max-w-lg text-[15px] leading-relaxed text-gray-500 dark:text-gray-400">
           Unified observability and security for AI agents. See what your agents did and
           whether it was safe — in one view.
         </p>
       </div>
 
+      {/* Navigation cards */}
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {cards.map(({ href, title, desc, icon: Icon }) => (
           <Link
             key={href}
             href={href}
-            className="group rounded-xl border border-gray-200 bg-white p-5 shadow-sm transition-all hover:border-splyntra-400 hover:shadow-md dark:border-gray-800 dark:bg-gray-900"
+            className="group relative rounded-xl border border-gray-200/80 bg-white p-6 shadow-card transition-all duration-200 hover:border-splyntra-300 hover:shadow-card-hover dark:border-gray-800 dark:bg-gray-900 dark:hover:border-splyntra-700"
           >
-            <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-lg bg-splyntra-50 text-splyntra-600 dark:bg-splyntra-900/30 dark:text-splyntra-100">
+            <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-xl bg-splyntra-50 text-splyntra-600 transition-colors group-hover:bg-splyntra-100 dark:bg-splyntra-950/40 dark:text-splyntra-300">
               <Icon className="h-5 w-5" />
             </div>
-            <h2 className="flex items-center gap-1 font-semibold text-gray-900 dark:text-white">
+            <h2 className="flex items-center gap-1.5 text-[15px] font-semibold text-gray-900 dark:text-white">
               {title}
-              <ArrowRight className="h-4 w-4 -translate-x-1 text-gray-300 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" />
+              <ArrowRight className="h-4 w-4 -translate-x-1 text-gray-300 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:text-splyntra-500 group-hover:opacity-100" />
             </h2>
-            <p className="mt-1 text-sm text-gray-500">{desc}</p>
+            <p className="mt-1.5 text-[13px] leading-relaxed text-gray-500 dark:text-gray-400">{desc}</p>
           </Link>
         ))}
       </div>
+
+      {/* Quick status */}
+      <div className="mt-12 text-center">
+        <div className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-4 py-2 text-[13px] text-gray-500 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400">
+          <span className="h-2 w-2 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/50" />
+          Collector connected at localhost:4318
+        </div>
+      </div>
     </div>
   );
 }

package/src/app/traces/page.tsx

@@ -13,7 +13,7 @@ export default function TracesPage() {
   const traces = data?.traces || [];
 
   return (
-    <div className="mx-auto max-w-6xl p-6">
+    <div className="mx-auto max-w-7xl p-6 lg:p-8">
       <PageHeader
         icon={Activity}
         title="Traces"

package/src/components/auth/AuthCard.tsx

@@ -1,17 +1,15 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 "use client";
 
-import { ShieldCheck } from "lucide-react";
+import Image from "next/image";
 
 export function AuthCard({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
-      <div className="w-full max-w-sm rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
-        <div className="mb-5 flex items-center gap-2">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-splyntra-600 text-white">
-            <ShieldCheck className="h-5 w-5" />
-          </div>
-          <h1 className="text-lg font-semibold tracking-tight">{title}</h1>
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 via-white to-splyntra-50/30 px-4 dark:from-gray-950 dark:via-gray-950 dark:to-splyntra-950/20">
+      <div className="w-full max-w-sm animate-slide-up rounded-2xl border border-gray-200/80 bg-white p-8 shadow-lg shadow-gray-200/50 dark:border-gray-800 dark:bg-gray-900 dark:shadow-none">
+        <div className="mb-6 flex flex-col items-center gap-3">
+          <Image src="/logo.png" alt="Splyntra" width={56} height={56} priority className="h-14 w-14 rounded-2xl shadow-lg shadow-splyntra-500/25" />
+          <h1 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{title}</h1>
         </div>
         {children}
       </div>
@@ -32,13 +30,13 @@ export function Field({
 }) {
   return (
     <label className="block text-sm">
-      <span className="mb-1 block text-gray-600 dark:text-gray-300">{label}</span>
+      <span className="mb-1.5 block text-[13px] font-medium text-gray-700 dark:text-gray-300">{label}</span>
       <input
         name={name}
         type={type}
         defaultValue={defaultValue}
         required
-        className="w-full rounded-lg border border-gray-200 px-3 py-2 outline-none focus:border-splyntra-400 focus:ring-2 focus:ring-splyntra-100 dark:border-gray-700 dark:bg-gray-800"
+        className="w-full rounded-xl border border-gray-200 bg-gray-50 px-4 py-2.5 text-[14px] outline-none transition-all placeholder:text-gray-400 focus:border-splyntra-400 focus:bg-white focus:ring-2 focus:ring-splyntra-100 dark:border-gray-700 dark:bg-gray-800 dark:focus:bg-gray-800 dark:focus:ring-splyntra-900"
       />
     </label>
   );

package/src/components/layout/AppShell.tsx

@@ -11,12 +11,16 @@ const AUTH_ROUTES = ["/login", "/signup", "/accept-invite"];
 export function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   if (AUTH_ROUTES.some((p) => pathname.startsWith(p))) {
-    return <div className="min-h-screen">{children}</div>;
+    return <div className="min-h-screen animate-fade-in">{children}</div>;
   }
   return (
-    <div className="flex h-screen">
+    <div className="flex h-screen overflow-hidden">
       <Sidebar />
-      <main className="flex-1 overflow-auto">{children}</main>
+      <main className="flex-1 overflow-auto bg-gray-50/50 dark:bg-gray-950/50">
+        <div className="animate-fade-in">
+          {children}
+        </div>
+      </main>
     </div>
   );
 }

package/src/components/layout/Sidebar.tsx

@@ -2,6 +2,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { useSession, signOut } from "next-auth/react";
 import {
@@ -19,7 +20,6 @@ import {
   KeyRound,
   CreditCard,
   Building2,
-  ShieldCheck,
   ChevronDown,
   LogOut,
   type LucideIcon,
@@ -68,22 +68,20 @@ export function Sidebar() {
   const items = resolveNavItems();
 
   return (
-    <aside className="flex w-60 flex-col border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+    <aside className="flex w-64 flex-col border-r border-gray-100 bg-white shadow-sidebar dark:border-gray-800/50 dark:bg-gray-950">
       {/* Logo */}
-      <div className="flex h-16 items-center border-b border-gray-200 px-4 dark:border-gray-800">
-        <Link href="/" className="flex items-center gap-2.5">
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-splyntra-600 text-white shadow-sm">
-            <ShieldCheck className="h-5 w-5" />
-          </div>
+      <div className="flex h-16 items-center border-b border-gray-100 px-5 dark:border-gray-800/50">
+        <Link href="/" className="flex items-center gap-3">
+          <Image src="/logo.png" alt="Splyntra" width={36} height={36} priority className="h-9 w-9 rounded-xl shadow-md shadow-splyntra-500/20" />
           <div className="leading-tight">
-            <span className="block font-semibold tracking-tight text-splyntra-900 dark:text-white">Splyntra</span>
-            <span className="block text-[10px] uppercase tracking-wider text-gray-400">Observability + Security</span>
+            <span className="block text-[15px] font-semibold tracking-tight text-gray-900 dark:text-white">Splyntra</span>
+            <span className="block text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">Observability · Security</span>
           </div>
         </Link>
       </div>
 
       {/* Sidebar-top widgets (e.g. org switcher in the cloud build) + project selector */}
-      <div className="space-y-3 border-b border-gray-100 px-3 py-3 dark:border-gray-800">
+      <div className="space-y-3 border-b border-gray-100 px-4 py-4 dark:border-gray-800/50">
         {slotWidgets("sidebarTop").map((W, i) => (
           <W key={i} />
         ))}
@@ -91,7 +89,7 @@ export function Sidebar() {
       </div>
 
       {/* Nav */}
-      <nav className="flex-1 space-y-0.5 p-3">
+      <nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
         {items.map((item) => {
           const isActive = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
           const Icon = item.icon;
@@ -99,13 +97,13 @@ export function Sidebar() {
             <Link
               key={item.href}
               href={item.href}
-              className={`group flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+              className={`group flex items-center gap-3 rounded-lg px-3 py-2.5 text-[13px] font-medium transition-all ${
                 isActive
-                  ? "bg-splyntra-50 font-medium text-splyntra-700 dark:bg-splyntra-900/30 dark:text-splyntra-100"
-                  : "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                  ? "bg-splyntra-50 text-splyntra-700 shadow-sm shadow-splyntra-100/50 dark:bg-splyntra-950/40 dark:text-splyntra-200 dark:shadow-none"
+                  : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-gray-200"
               }`}
             >
-              <Icon className={`h-4 w-4 ${isActive ? "text-splyntra-600 dark:text-splyntra-300" : "text-gray-400 group-hover:text-gray-500"}`} />
+              <Icon className={`h-[18px] w-[18px] flex-shrink-0 ${isActive ? "text-splyntra-600 dark:text-splyntra-400" : "text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300"}`} />
               {item.label}
             </Link>
           );
@@ -113,13 +111,15 @@ export function Sidebar() {
       </nav>
 
       {/* Footer */}
-      <div className="border-t border-gray-200 px-3 py-3 dark:border-gray-800">
+      <div className="border-t border-gray-100 px-4 py-3 dark:border-gray-800/50">
         <UserFooter />
-        <div className="mt-2 px-1 text-xs text-gray-400">
+        <div className="mt-2 flex items-center gap-3 px-2 text-[11px] text-gray-400">
           <span className="inline-flex items-center gap-1.5">
-            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" /> dev
+            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-sm shadow-emerald-500/50" />
+            Connected
           </span>
-          <span className="ml-2">v0.1.0</span>
+          <span className="text-gray-300 dark:text-gray-700">·</span>
+          <span>v0.3.0</span>
         </div>
       </div>
     </aside>
@@ -131,15 +131,15 @@ function UserFooter() {
   const user = session?.user as { email?: string; role?: string } | undefined;
   if (!user?.email) return null;
   return (
-    <div className="flex items-center justify-between gap-2 rounded-lg px-2 py-1.5">
+    <div className="flex items-center justify-between gap-2 rounded-lg px-2 py-2 hover:bg-gray-50 dark:hover:bg-gray-900">
       <div className="min-w-0">
-        <div className="truncate text-xs font-medium text-gray-700 dark:text-gray-200">{user.email}</div>
-        {user.role && <div className="text-[10px] uppercase tracking-wide text-gray-400">{user.role}</div>}
+        <div className="truncate text-[13px] font-medium text-gray-700 dark:text-gray-200">{user.email}</div>
+        {user.role && <div className="text-[10px] font-medium uppercase tracking-wide text-gray-400">{user.role}</div>}
       </div>
       <button
         onClick={() => signOut({ callbackUrl: "/login" })}
         title="Sign out"
-        className="rounded-md p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800"
+        className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
       >
         <LogOut className="h-4 w-4" />
       </button>
@@ -156,14 +156,14 @@ function ProjectSelector() {
 
   return (
     <label className="block">
-      <span className="mb-1 block text-[10px] font-medium uppercase tracking-wider text-gray-400">Project</span>
+      <span className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">Project</span>
       <div className="relative">
         <select
           value={projectId}
           onChange={(e) => setProjectId(e.target.value)}
-          className="w-full appearance-none rounded-lg border border-gray-200 bg-white py-1.5 pl-2.5 pr-8 text-sm text-gray-700 outline-none focus:border-splyntra-400 focus:ring-2 focus:ring-splyntra-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+          className="w-full appearance-none rounded-lg border border-gray-200 bg-gray-50 py-2 pl-3 pr-8 text-[13px] font-medium text-gray-700 outline-none transition-colors focus:border-splyntra-400 focus:bg-white focus:ring-2 focus:ring-splyntra-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:focus:bg-gray-800"
         >
-          <option value="">All / default</option>
+          <option value="">All projects</option>
           {projects.map((p) => (
             <option key={p.id} value={p.id}>
               {p.name} ({p.environment})

package/src/components/ui/primitives.tsx

@@ -103,16 +103,16 @@ export function PageHeader({
   action?: ReactNode;
 }) {
   return (
-    <div className="mb-6 flex items-start justify-between gap-4">
+    <div className="mb-8 flex items-start justify-between gap-4">
       <div className="flex items-start gap-3">
         {Icon && (
-          <div className="mt-0.5 flex h-9 w-9 items-center justify-center rounded-lg bg-splyntra-50 text-splyntra-600 dark:bg-splyntra-900/30 dark:text-splyntra-100">
+          <div className="mt-0.5 flex h-10 w-10 items-center justify-center rounded-xl bg-splyntra-50 text-splyntra-600 dark:bg-splyntra-950/40 dark:text-splyntra-300">
             <Icon className="h-5 w-5" />
           </div>
         )}
         <div>
           <h1 className="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">{title}</h1>
-          {subtitle && <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>}
+          {subtitle && <p className="mt-1 text-[13px] text-gray-500 dark:text-gray-400">{subtitle}</p>}
         </div>
       </div>
       {action}
@@ -122,7 +122,7 @@ export function PageHeader({
 
 export function Card({ children, className = "" }: { children: ReactNode; className?: string }) {
   return (
-    <div className={`rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900 ${className}`}>
+    <div className={`rounded-xl border border-gray-200/80 bg-white shadow-card dark:border-gray-800 dark:bg-gray-900 ${className}`}>
       {children}
     </div>
   );
@@ -140,12 +140,12 @@ export function StatCard({
   accent?: string;
 }) {
   return (
-    <Card className="p-4">
+    <Card className="p-5">
       <div className="flex items-center justify-between">
-        <span className="text-xs font-medium uppercase tracking-wide text-gray-500">{label}</span>
-        {Icon && <Icon className="h-4 w-4 text-gray-400" />}
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">{label}</span>
+        {Icon && <Icon className="h-4 w-4 text-gray-300 dark:text-gray-600" />}
       </div>
-      <div className={`mt-2 text-2xl font-semibold tabular-nums ${accent}`}>{value}</div>
+      <div className={`mt-2 text-2xl font-bold tabular-nums tracking-tight ${accent}`}>{value}</div>
     </Card>
   );
 }
@@ -160,12 +160,12 @@ export function EmptyState({
   children?: ReactNode;
 }) {
   return (
-    <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
-      <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800">
-        <Icon className="h-6 w-6" />
+    <div className="flex flex-col items-center justify-center px-6 py-20 text-center">
+      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-100 text-gray-400 dark:bg-gray-800">
+        <Icon className="h-7 w-7" />
       </div>
-      <p className="text-base font-medium text-gray-700 dark:text-gray-200">{title}</p>
-      {children && <div className="mt-1 max-w-md text-sm text-gray-500">{children}</div>}
+      <p className="text-[15px] font-medium text-gray-700 dark:text-gray-200">{title}</p>
+      {children && <div className="mt-2 max-w-md text-[13px] leading-relaxed text-gray-500">{children}</div>}
     </div>
   );
 }

package/src/lib/collector-auth.ts

@@ -4,13 +4,16 @@
 //
 // Open (Community) default: a single implicit org, so the BFF attaches the
 // server-side org key (SPLYNTRA_API_KEY) — or, only outside production, the dev
-// key. The commercial Cloud build registers a resolver (see the no-op
-// collector-auth-providers below, replaced by the cloud overlay) that instead
-// uses a trusted service token + X-Splyntra-Org-Id headers so each request is
-// scoped to the user's ACTIVE org (api_keys store only hashes, so a per-org key
-// can't be replayed). The collector honors that header path only when its
-// COLLECTOR_SERVICE_TOKEN matches.
-import "@/lib/collector-auth-providers"; // side-effect: cloud overlay registers its resolver
+// key. The commercial Cloud build registers a resolver via the overlay module
+// `@/lib/collector-auth-providers`, which the BFF routes import for its side
+// effects (it registers a resolver that uses a trusted service token +
+// X-Splyntra-Org-Id headers so each request is scoped to the user's ACTIVE org;
+// api_keys store only hashes, so a per-org key can't be replayed). The collector
+// honors that header path only when its COLLECTOR_SERVICE_TOKEN matches.
+//
+// NOTE: this module must NOT import the providers module — that would create an
+// import cycle (providers → this module's registry), so the BFF routes do the
+// side-effect import instead.
 
 type SessionLike = { user?: { id?: string; orgId?: string; role?: string } } | null | undefined;
 export interface CollectorAuth {

package/src/middleware.ts

@@ -7,6 +7,8 @@ import { authConfig } from "@/auth.config";
 export const { auth: middleware } = NextAuth(authConfig);
 
 export const config = {
-  // Protect everything except Next internals and static assets.
-  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
+  // Protect everything except Next internals and public static assets (the logo
+  // serves as favicon + PWA icon, fetched directly by the browser, so it must
+  // not be auth-gated).
+  matcher: ["/((?!_next/static|_next/image|favicon.ico|logo.png|manifest.json).*)"],
 };

package/tailwind.config.js

@@ -2,22 +2,51 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  darkMode: "class",
   theme: {
     extend: {
       colors: {
         splyntra: {
-          50: "#f0f4ff",
-          100: "#dbe4ff",
-          500: "#4c6ef5",
-          600: "#3b5bdb",
-          700: "#364fc7",
-          900: "#1c2541",
+          50: "#eef2ff",
+          100: "#e0e7ff",
+          200: "#c7d2fe",
+          300: "#a5b4fc",
+          400: "#818cf8",
+          500: "#6366f1",
+          600: "#4f46e5",
+          700: "#4338ca",
+          800: "#3730a3",
+          900: "#312e81",
+          950: "#1e1b4b",
         },
         risk: {
-          low: "#51cf66",
-          medium: "#fcc419",
-          high: "#ff6b6b",
-          critical: "#c92a2a",
+          low: "#10b981",
+          medium: "#f59e0b",
+          high: "#ef4444",
+          critical: "#dc2626",
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', 'sans-serif'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+      },
+      boxShadow: {
+        'card': '0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04)',
+        'card-hover': '0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05)',
+        'sidebar': '1px 0 3px 0 rgb(0 0 0 / 0.04)',
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(8px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
         },
       },
     },