@splyntra/dashboard 0.3.0

package/src/app/settings/team/page.tsx

@@ -0,0 +1,112 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import { Users } from "lucide-react";
+import { auth } from "@/auth";
+import { pool, roleAtLeast } from "@/lib/db";
+import { updateRoleAction, removeMemberAction } from "@/app/auth-actions";
+import { InviteForm } from "./InviteForm";
+
+export const dynamic = "force-dynamic";
+
+interface Member {
+  user_id: string;
+  email: string;
+  name: string;
+  role: string;
+  created_at: string;
+}
+
+export default async function TeamPage() {
+  const session = await auth();
+  const orgId = (session?.user as { orgId?: string })?.orgId;
+  const myRole = (session?.user as { role?: string })?.role;
+  const canManage = roleAtLeast(myRole, "admin");
+
+  let members: Member[] = [];
+  if (orgId) {
+    const { rows } = await pool.query(
+      `SELECT u.id::text AS user_id, u.email, u.name, m.role, m.created_at
+       FROM memberships m JOIN users u ON u.id = m.user_id
+       WHERE m.org_id = $1 ORDER BY m.created_at ASC`,
+      [orgId]
+    );
+    members = rows;
+  }
+
+  return (
+    <div className="mx-auto max-w-4xl p-6">
+      <div className="mb-6 flex items-start gap-3">
+        <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">
+          <Users className="h-5 w-5" />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">Team</h1>
+          <p className="text-sm text-gray-500">
+            Members of your organization · your role: <span className="font-medium">{myRole || "—"}</span>
+          </p>
+        </div>
+      </div>
+
+      {canManage && (
+        <div className="mb-6">
+          <InviteForm />
+        </div>
+      )}
+
+      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <table className="w-full text-sm">
+          <thead className="border-b border-gray-200 bg-gray-50 text-left dark:border-gray-800 dark:bg-gray-800/50">
+            <tr className="[&>th]:px-4 [&>th]:py-3 [&>th]:font-medium [&>th]:text-gray-500">
+              <th>Member</th>
+              <th>Role</th>
+              <th className="text-right">Joined</th>
+              {canManage && <th />}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+            {members.map((m) => (
+              <tr key={m.user_id} className="hover:bg-gray-50 dark:hover:bg-gray-800/60">
+                <td className="px-4 py-3">
+                  <div className="font-medium">{m.name || m.email}</div>
+                  <div className="text-xs text-gray-500">{m.email}</div>
+                </td>
+                <td className="px-4 py-3">
+                  {canManage ? (
+                    <form action={updateRoleAction} className="inline-flex items-center gap-2">
+                      <input type="hidden" name="user_id" value={m.user_id} />
+                      <select name="role" defaultValue={m.role} className="rounded-md border px-2 py-1 text-xs dark:bg-gray-800">
+                        {["owner", "admin", "member", "viewer"].map((r) => (
+                          <option key={r} value={r}>{r}</option>
+                        ))}
+                      </select>
+                      <button className="text-xs text-splyntra-600 hover:underline">save</button>
+                    </form>
+                  ) : (
+                    <span className="text-gray-600">{m.role}</span>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-right text-xs text-gray-500">
+                  {new Date(m.created_at).toLocaleDateString()}
+                </td>
+                {canManage && (
+                  <td className="px-4 py-3 text-right">
+                    <form action={removeMemberAction}>
+                      <input type="hidden" name="user_id" value={m.user_id} />
+                      <button className="text-xs text-red-600 hover:underline">remove</button>
+                    </form>
+                  </td>
+                )}
+              </tr>
+            ))}
+            {members.length === 0 && (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-gray-500">
+                  No members yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/src/app/signup/page.tsx

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useFormState } from "react-dom";
+import Link from "next/link";
+import { signupAction } from "@/app/auth-actions";
+import { AuthCard, Field } from "@/components/auth/AuthCard";
+
+export default function SignupPage() {
+  const [state, formAction] = useFormState(signupAction, { error: "" });
+  return (
+    <AuthCard title="Create your Splyntra account">
+      <form action={formAction} className="space-y-3">
+        <Field name="name" type="text" label="Name" />
+        <Field name="email" type="email" label="Email" />
+        <Field name="password" type="password" label="Password (8+ chars)" />
+        {state?.error ? <p className="text-sm text-red-600">{state.error}</p> : null}
+        <button
+          type="submit"
+          className="w-full rounded-lg bg-splyntra-600 py-2 text-sm font-medium text-white hover:bg-splyntra-700"
+        >
+          Create account
+        </button>
+      </form>
+      <p className="mt-4 text-center text-sm text-gray-500">
+        Already have an account?{" "}
+        <Link href="/login" className="text-splyntra-600 hover:underline">
+          Sign in
+        </Link>
+      </p>
+    </AuthCard>
+  );
+}

package/src/app/traces/[traceId]/page.tsx

@@ -0,0 +1,132 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useParams } from "next/navigation";
+import { useTrace } from "@/lib/hooks";
+import { TraceViewer } from "@/components/trace/TraceViewer";
+import { Trace, Span, Detection } from "@/types/trace";
+import { TraceDetailResponse, SpanItem, DetectionItem } from "@/lib/api";
+import Link from "next/link";
+import { ArrowLeft, FileSearch } from "lucide-react";
+import { EmptyState } from "@/components/ui/primitives";
+
+// Map API response to the Trace type expected by TraceViewer
+function apiToTrace(traceId: string, data: TraceDetailResponse): Trace {
+  const spans: Span[] = (data.spans || []).map((s: SpanItem) => ({
+    spanId: s.span_id,
+    parentSpanId: s.parent_span_id || undefined,
+    type: (s.type as Span["type"]) || "step",
+    name: s.name,
+    status: (s.status as "ok" | "error") || "ok",
+    latencyMs: s.latency_ms,
+    tokens: s.prompt_tokens
+      ? {
+          promptTokens: s.prompt_tokens,
+          completionTokens: s.completion_tokens,
+          totalTokens: s.prompt_tokens + s.completion_tokens,
+          model: s.model || "unknown",
+          costUsd: s.cost_usd,
+        }
+      : undefined,
+    input: s.input_preview ? { content: s.input_preview } : undefined,
+    output: s.output_preview ? { content: s.output_preview } : undefined,
+    detections: (data.detections || [])
+      .filter((d: DetectionItem) => d.span_id === s.span_id)
+      .map(mapDetection),
+    startedAt: s.started_at,
+  }));
+
+  const detections: Detection[] = (data.detections || []).map(mapDetection);
+
+  const totalLatency = spans.length > 0 ? Math.max(...spans.map((s) => s.latencyMs)) : 0;
+  const totalTokens = spans.reduce(
+    (sum, s) => sum + (s.tokens?.totalTokens || 0),
+    0
+  );
+  const totalCost = spans.reduce((sum, s) => sum + (s.tokens?.costUsd || 0), 0);
+  const maxSeverity = getMaxSeverity(detections);
+  const riskScore = computeRiskScore(detections);
+
+  return {
+    traceId,
+    agentId: spans[0]?.name || "unknown",
+    status: spans.some((s) => s.status === "error") ? "error" : "ok",
+    latencyMs: totalLatency,
+    totalTokens,
+    costUsd: totalCost,
+    riskScore,
+    riskSeverity: maxSeverity,
+    detections,
+    spans,
+    startedAt: spans[0]?.startedAt || new Date().toISOString(),
+    completedAt: new Date().toISOString(),
+    orgId: "",
+    projectId: "",
+    environment: "",
+  };
+}
+
+function mapDetection(d: DetectionItem): Detection {
+  return {
+    detector: d.detector as Detection["detector"],
+    category: d.category,
+    severity: d.severity as Detection["severity"],
+    confidence: d.confidence,
+    description: d.description,
+    beta: d.is_beta === 1,
+    spanId: d.span_id,
+  };
+}
+
+function getMaxSeverity(detections: Detection[]): Trace["riskSeverity"] {
+  const order: Trace["riskSeverity"][] = ["NONE", "LOW", "MEDIUM", "HIGH", "CRITICAL"];
+  let max = 0;
+  for (const d of detections) {
+    const idx = order.indexOf(d.severity);
+    if (idx > max) max = idx;
+  }
+  return order[max];
+}
+
+function computeRiskScore(detections: Detection[]): number {
+  const weights: Record<string, number> = { LOW: 10, MEDIUM: 25, HIGH: 50, CRITICAL: 90 };
+  let score = 0;
+  for (const d of detections) {
+    score += (weights[d.severity] || 0) * d.confidence;
+  }
+  return Math.min(Math.round(score), 100);
+}
+
+export default function TraceDetailPage() {
+  const params = useParams();
+  const traceId = params.traceId as string;
+  const { data, isLoading, error } = useTrace(traceId);
+
+  const hasSpans = !!data && (data.spans?.length || 0) > 0;
+  const trace = hasSpans ? apiToTrace(traceId, data!) : null;
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <div className="mb-4">
+        <Link
+          href="/traces"
+          className="inline-flex items-center gap-1.5 text-sm text-splyntra-600 hover:text-splyntra-700 hover:underline dark:text-splyntra-300"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to traces
+        </Link>
+      </div>
+
+      {isLoading ? (
+        <div className="py-12 text-center text-gray-500">Loading trace…</div>
+      ) : trace ? (
+        <TraceViewer trace={trace} />
+      ) : (
+        <EmptyState icon={FileSearch} title="Trace not found">
+          {error ? "Could not reach the collector." : `No trace with id ${traceId} in this project.`}
+          <code className="mt-2 block text-xs text-gray-400">{traceId}</code>
+        </EmptyState>
+      )}
+    </div>
+  );
+}

package/src/app/traces/layout.tsx

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Traces | Splyntra",
+  description: "View agent execution traces with unified risk scoring",
+};
+
+export default function TracesLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/src/app/traces/page.tsx

@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useTraces } from "@/lib/hooks";
+import { TraceList } from "@/components/trace/TraceList";
+import { TableSkeleton } from "@/components/ui/Skeleton";
+import { PageHeader } from "@/components/ui/primitives";
+import { Activity } from "lucide-react";
+
+export default function TracesPage() {
+  const { data, isLoading, error } = useTraces();
+
+  const traces = data?.traces || [];
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <PageHeader
+        icon={Activity}
+        title="Traces"
+        subtitle="Agent execution traces with unified risk scoring"
+      />
+      {error && !isLoading && (
+        <p className="mb-4 text-xs text-red-500">
+          Could not reach the collector. Check that the stack is running.
+        </p>
+      )}
+
+      {isLoading ? <TableSkeleton rows={5} cols={8} /> : <TraceList traces={traces} />}
+    </div>
+  );
+}

package/src/auth.config.ts

@@ -0,0 +1,60 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import type { NextAuthConfig } from "next-auth";
+
+// Edge-safe config (no DB / bcrypt). Shared by the middleware and the full
+// Node instance. The `authorized` callback gates every app route behind login.
+const PUBLIC = ["/login", "/signup", "/accept-invite"];
+
+export const authConfig: NextAuthConfig = {
+  // Self-hosted (Docker/Helm) serves behind a service name / arbitrary host, so
+  // trust the incoming Host. Read the secret from either env name (Auth.js v5
+  // defaults to AUTH_SECRET; our deploy sets NEXTAUTH_SECRET).
+  trustHost: true,
+  // Auth.js v5 defaults to AUTH_SECRET; our deploy sets NEXTAUTH_SECRET. In
+  // local dev (npm run dev) neither may be set, so fall back to a fixed dev
+  // secret — but in production an unset secret is a hard error.
+  // The insecure dev secret activates ONLY when NODE_ENV is explicitly
+  // "development". In production (or an unset NODE_ENV) it stays undefined, so
+  // next-auth hard-fails at startup rather than silently using a known secret.
+  secret:
+    process.env.AUTH_SECRET ||
+    process.env.NEXTAUTH_SECRET ||
+    (process.env.NODE_ENV === "development" ? "splyntra-dev-insecure-secret" : undefined),
+  pages: { signIn: "/login" },
+  session: { strategy: "jwt" },
+  providers: [], // real providers are added in auth.ts (Node runtime)
+  callbacks: {
+    authorized({ auth, request: { nextUrl } }) {
+      const loggedIn = !!auth?.user;
+      const isPublic =
+        PUBLIC.some((p) => nextUrl.pathname.startsWith(p)) ||
+        nextUrl.pathname.startsWith("/api/auth");
+      if (isPublic) return true;
+      return loggedIn; // redirects to signIn page when false
+    },
+    jwt({ token, user, trigger, session }) {
+      if (user) {
+        token.userId = (user as { id?: string }).id;
+        token.orgId = (user as { orgId?: string }).orgId;
+        token.role = (user as { role?: string }).role;
+      }
+      // Allow a session update() to set the active org/role without re-login —
+      // used by the cloud edition after org creation / org switching. Edge-safe
+      // (no DB): the caller passes the already-resolved values.
+      if (trigger === "update" && session) {
+        const s = session as { orgId?: string; role?: string };
+        if (s.orgId) token.orgId = s.orgId;
+        if (s.role) token.role = s.role;
+      }
+      return token;
+    },
+    session({ session, token }) {
+      if (session.user) {
+        (session.user as { id?: string }).id = token.userId as string;
+        (session.user as { orgId?: string }).orgId = token.orgId as string;
+        (session.user as { role?: string }).role = token.role as string;
+      }
+      return session;
+    },
+  },
+};

package/src/auth.ts

@@ -0,0 +1,54 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import NextAuth from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import bcrypt from "bcryptjs";
+import { authConfig } from "@/auth.config";
+import { pool } from "@/lib/db";
+// Side-effect import: a no-op in the open edition; the cloud build's overlay
+// replaces this module to register OAuth providers + the org-onboarding hook.
+import "@/lib/auth-providers";
+import { registeredAuthProviders, registeredSignInHooks } from "@/lib/auth-extensions";
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  ...authConfig,
+  events: {
+    async signIn({ user, account }) {
+      for (const hook of registeredSignInHooks()) {
+        await hook(user as { id?: string; email?: string | null }, account);
+      }
+    },
+  },
+  providers: [
+    Credentials({
+      credentials: { email: {}, password: {} },
+      async authorize(creds) {
+        const email = String(creds?.email || "").toLowerCase().trim();
+        const password = String(creds?.password || "");
+        if (!email || !password) return null;
+
+        const { rows } = await pool.query(
+          `SELECT u.id::text, u.email, u.name, u.password_hash,
+                  m.org_id::text AS org_id, m.role
+           FROM users u
+           LEFT JOIN memberships m ON m.user_id = u.id
+           WHERE u.email = $1
+           ORDER BY m.created_at ASC
+           LIMIT 1`,
+          [email]
+        );
+        const row = rows[0];
+        if (!row || !(await bcrypt.compare(password, row.password_hash))) return null;
+
+        return {
+          id: row.id,
+          email: row.email,
+          name: row.name,
+          orgId: row.org_id,
+          role: row.role || "member",
+        };
+      },
+    }),
+    // Extension providers (OAuth in the cloud build; none in the open edition).
+    ...registeredAuthProviders(),
+  ],
+});

package/src/components/auth/AuthCard.tsx

@@ -0,0 +1,45 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { ShieldCheck } from "lucide-react";
+
+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>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function Field({
+  name,
+  type,
+  label,
+  defaultValue,
+}: {
+  name: string;
+  type: string;
+  label: string;
+  defaultValue?: string;
+}) {
+  return (
+    <label className="block text-sm">
+      <span className="mb-1 block text-gray-600 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"
+      />
+    </label>
+  );
+}

package/src/components/layout/AppShell.tsx

@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Sidebar } from "./Sidebar";
+
+const AUTH_ROUTES = ["/login", "/signup", "/accept-invite"];
+
+/** Renders the full app chrome (sidebar) except on auth routes, which are
+ * standalone centered pages. */
+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="flex h-screen">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">{children}</main>
+    </div>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -0,0 +1,177 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useSession, signOut } from "next-auth/react";
+import {
+  LayoutDashboard,
+  Activity,
+  Bot,
+  DollarSign,
+  LineChart,
+  ClipboardCheck,
+  FolderKanban,
+  Bell,
+  Users,
+  ScrollText,
+  Scale,
+  KeyRound,
+  CreditCard,
+  Building2,
+  ShieldCheck,
+  ChevronDown,
+  LogOut,
+  type LucideIcon,
+} from "lucide-react";
+import { useProjects } from "@/lib/hooks";
+import { useProject } from "@/lib/project-context";
+import { features } from "@/lib/features";
+import { navSlotItems, slotWidgets } from "@/lib/slots";
+
+// Icons available to slot-contributed nav items (referenced by name so the
+// slots module stays free of React/icon imports).
+const ICONS: Record<string, LucideIcon> = {
+  ScrollText,
+  Scale,
+  KeyRound,
+  CreditCard,
+  Building2,
+  Users,
+};
+
+// Core (open-source) navigation. Commercial sections (governance: ledger,
+// policies, delegation) are contributed by extension slots in the cloud build.
+const navItems: { href: string; label: string; icon: LucideIcon }[] = [
+  { href: "/", label: "Home", icon: LayoutDashboard },
+  { href: "/traces", label: "Traces", icon: Activity },
+  { href: "/agents", label: "Agents", icon: Bot },
+  { href: "/metrics", label: "Metrics", icon: LineChart },
+  { href: "/evaluations", label: "Evaluation", icon: ClipboardCheck },
+  { href: "/costs", label: "Costs", icon: DollarSign },
+  { href: "/projects", label: "Projects", icon: FolderKanban },
+  { href: "/alerts", label: "Alerts", icon: Bell },
+  { href: "/settings/keys", label: "API Keys", icon: KeyRound },
+  { href: "/settings/team", label: "Team", icon: Users },
+];
+
+// Merge core nav with slot-contributed items whose feature flag is enabled.
+function resolveNavItems(): { href: string; label: string; icon: LucideIcon }[] {
+  const slotted = navSlotItems()
+    .filter((i) => !i.feature || features[i.feature as keyof typeof features])
+    .map((i) => ({ href: i.href, label: i.label, icon: ICONS[i.icon] ?? LayoutDashboard }));
+  return [...navItems, ...slotted];
+}
+
+export function Sidebar() {
+  const pathname = usePathname();
+  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">
+      {/* 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="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>
+          </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">
+        {slotWidgets("sidebarTop").map((W, i) => (
+          <W key={i} />
+        ))}
+        <ProjectSelector />
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 space-y-0.5 p-3">
+        {items.map((item) => {
+          const isActive = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`group flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+                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"
+              }`}
+            >
+              <Icon className={`h-4 w-4 ${isActive ? "text-splyntra-600 dark:text-splyntra-300" : "text-gray-400 group-hover:text-gray-500"}`} />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t border-gray-200 px-3 py-3 dark:border-gray-800">
+        <UserFooter />
+        <div className="mt-2 px-1 text-xs 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>
+          <span className="ml-2">v0.1.0</span>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function UserFooter() {
+  const { data: session } = useSession();
+  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="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>
+      <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"
+      >
+        <LogOut className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}
+
+function ProjectSelector() {
+  const { data } = useProjects();
+  const { projectId, setProjectId } = useProject();
+  const projects = data?.projects || [];
+
+  if (projects.length === 0) return null;
+
+  return (
+    <label className="block">
+      <span className="mb-1 block text-[10px] font-medium uppercase tracking-wider text-gray-400">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"
+        >
+          <option value="">All / default</option>
+          {projects.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name} ({p.environment})
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+      </div>
+    </label>
+  );
+}