@splyntra/dashboard 0.3.0

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

@@ -0,0 +1,87 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Runtime proxy to the collector.
+//
+// Next.js evaluates next.config.js `rewrites()` at BUILD time, which bakes the
+// collector URL into the image and breaks any deployment where the collector is
+// reached by a service name (Docker Compose, Helm). This route handler instead
+// resolves the collector URL from the environment on every request, so the same
+// image works for self-host and managed cloud.
+
+import { NextRequest, NextResponse } from "next/server";
+import { auth as getSession } from "@/auth";
+import { roleAtLeast } from "@/lib/db";
+import { resolveCollectorAuth } from "@/lib/collector-auth";
+
+export const dynamic = "force-dynamic";
+
+function collectorBase(): string {
+  return (
+    process.env.COLLECTOR_URL ||
+    process.env.NEXT_PUBLIC_API_URL ||
+    "http://localhost:4318"
+  ).replace(/\/$/, "");
+}
+
+// Mutations require at least 'member'; viewers are read-only.
+async function forbidViewerMutation(req: NextRequest): Promise<NextResponse | null> {
+  if (req.method === "GET" || req.method === "HEAD") return null;
+  const session = await getSession();
+  const role = (session?.user as { role?: string })?.role;
+  if (!roleAtLeast(role, "member")) {
+    return NextResponse.json({ error: "insufficient role" }, { status: 403 });
+  }
+  return null;
+}
+
+async function proxy(req: NextRequest, path: string[]): Promise<NextResponse> {
+  const denied = await forbidViewerMutation(req);
+  if (denied) return denied;
+  const target = `${collectorBase()}/v1/${path.join("/")}${req.nextUrl.search}`;
+
+  const headers = new Headers();
+  // Authenticate to the collector on the logged-in user's behalf. The auth seam
+  // attaches the right credentials per edition: the server org key (Community)
+  // or a service token + active-org headers (Cloud, so data is scoped to the
+  // user's org). A logged-in user never pastes an API key to see their data.
+  const session = await getSession();
+  const incoming = (req.headers.get("authorization") || "").replace(/^Bearer\s*/i, "").trim();
+  const auth = await resolveCollectorAuth(session, incoming);
+  for (const [k, v] of Object.entries(auth.headers)) {
+    headers.set(k, v);
+  }
+  headers.set("content-type", req.headers.get("content-type") || "application/json");
+
+  const init: RequestInit = { method: req.method, headers };
+  if (req.method !== "GET" && req.method !== "HEAD") {
+    init.body = await req.text();
+  }
+
+  try {
+    const res = await fetch(target, init);
+    const body = await res.text();
+    return new NextResponse(body, {
+      status: res.status,
+      headers: { "content-type": res.headers.get("content-type") || "application/json" },
+    });
+  } catch (err) {
+    return NextResponse.json(
+      { error: "collector unreachable", detail: String(err) },
+      { status: 502 }
+    );
+  }
+}
+
+type Ctx = { params: { path: string[] } };
+
+export async function GET(req: NextRequest, { params }: Ctx) {
+  return proxy(req, params.path);
+}
+export async function POST(req: NextRequest, { params }: Ctx) {
+  return proxy(req, params.path);
+}
+export async function DELETE(req: NextRequest, { params }: Ctx) {
+  return proxy(req, params.path);
+}
+export async function PUT(req: NextRequest, { params }: Ctx) {
+  return proxy(req, params.path);
+}

package/src/app/auth-actions.ts

@@ -0,0 +1,103 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use server";
+
+import bcrypt from "bcryptjs";
+import { pool, roleAtLeast } from "@/lib/db";
+import { auth, signIn } from "@/auth";
+
+// The seeded dev organization (migrations/postgres/001_init.sql). First signup
+// joins it as owner; subsequent signups join as members.
+const DEV_ORG = "00000000-0000-0000-0000-000000000001";
+
+export async function signupAction(_prev: unknown, formData: FormData) {
+  const email = String(formData.get("email") || "").toLowerCase().trim();
+  const password = String(formData.get("password") || "");
+  const name = String(formData.get("name") || "").trim();
+  const inviteToken = String(formData.get("invite") || "").trim();
+
+  if (!email || password.length < 8) {
+    return { error: "Email and an 8+ char password are required." };
+  }
+
+  const client = await pool.connect();
+  try {
+    const existing = await client.query("SELECT 1 FROM users WHERE email = $1", [email]);
+    if (existing.rowCount) return { error: "An account with that email already exists." };
+
+    // Resolve org + role from an invite, else default to the dev org.
+    let orgId = DEV_ORG;
+    let role = "member";
+    if (inviteToken) {
+      const inv = await client.query(
+        "SELECT org_id::text, role FROM invitations WHERE token = $1 AND accepted_at IS NULL AND expires_at > NOW()",
+        [inviteToken]
+      );
+      if (!inv.rowCount) return { error: "Invite is invalid or expired." };
+      orgId = inv.rows[0].org_id;
+      role = inv.rows[0].role;
+    } else {
+      // First user in the org becomes owner.
+      const members = await client.query("SELECT count(*)::int AS n FROM memberships WHERE org_id = $1", [orgId]);
+      if (members.rows[0].n === 0) role = "owner";
+    }
+
+    const hash = await bcrypt.hash(password, 10);
+    const u = await client.query(
+      "INSERT INTO users (email, password_hash, name) VALUES ($1,$2,$3) RETURNING id::text",
+      [email, hash, name]
+    );
+    await client.query(
+      "INSERT INTO memberships (user_id, org_id, role) VALUES ($1,$2,$3)",
+      [u.rows[0].id, orgId, role]
+    );
+    if (inviteToken) {
+      await client.query("UPDATE invitations SET accepted_at = NOW() WHERE token = $1", [inviteToken]);
+    }
+  } finally {
+    client.release();
+  }
+
+  await signIn("credentials", { email, password, redirectTo: "/" });
+  return { error: "" };
+}
+
+async function requireAdminOrg(): Promise<string> {
+  const session = await auth();
+  const role = (session?.user as { role?: string })?.role;
+  const orgId = (session?.user as { orgId?: string })?.orgId;
+  if (!orgId || !roleAtLeast(role, "admin")) throw new Error("forbidden");
+  return orgId;
+}
+
+function randomToken(): string {
+  // 32 hex chars; crypto is available in the Node server runtime.
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+export async function inviteMemberAction(_prev: unknown, formData: FormData) {
+  const orgId = await requireAdminOrg();
+  const email = String(formData.get("email") || "").toLowerCase().trim();
+  const role = String(formData.get("role") || "member");
+  if (!email) return { error: "Email required." };
+  const token = randomToken();
+  await pool.query(
+    "INSERT INTO invitations (org_id, email, role, token) VALUES ($1,$2,$3,$4)",
+    [orgId, email, role, token]
+  );
+  return { error: "", token };
+}
+
+export async function updateRoleAction(formData: FormData) {
+  const orgId = await requireAdminOrg();
+  const userId = String(formData.get("user_id") || "");
+  const role = String(formData.get("role") || "member");
+  await pool.query("UPDATE memberships SET role = $1 WHERE user_id = $2 AND org_id = $3", [role, userId, orgId]);
+}
+
+export async function removeMemberAction(formData: FormData) {
+  const orgId = await requireAdminOrg();
+  const userId = String(formData.get("user_id") || "");
+  await pool.query("DELETE FROM memberships WHERE user_id = $1 AND org_id = $2", [userId, orgId]);
+}

package/src/app/costs/layout.tsx

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Costs | Splyntra",
+  description: "Token spend analytics by model, agent, and project",
+};
+
+export default function CostsLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/src/app/costs/page.tsx

@@ -0,0 +1,155 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useCosts } from "@/lib/hooks";
+import { CostModelItem, ProjectCostItem } from "@/lib/api";
+import { DollarSign, Coins, Hash, Calculator } from "lucide-react";
+import { PageHeader, StatCard } from "@/components/ui/primitives";
+
+export default function CostsPage() {
+  const { data, isLoading, error } = useCosts();
+
+  const models: CostModelItem[] = data?.models || [];
+  const byProject: ProjectCostItem[] = data?.by_project || [];
+  const summary = data?.summary || { total_cost: 0, total_calls: 0, total_tokens: 0, avg_cost_per_call: 0 };
+  const hasRealData = !error && models.length > 0;
+
+  const totalCost = summary.total_cost;
+  const totalCalls = summary.total_calls;
+  const totalTokens = summary.total_tokens;
+  const avgCostPerCall = totalCalls > 0 ? summary.avg_cost_per_call : 0;
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <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">
+          No cost data yet — send LLM traces with model info to see cost breakdown.
+        </p>
+      )}
+
+      {/* Summary cards */}
+      <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <StatCard label="Total Spend" value={`$${totalCost.toFixed(2)}`} icon={DollarSign} />
+        <StatCard label="Total Tokens" value={totalTokens.toLocaleString()} icon={Coins} />
+        <StatCard label="LLM Calls" value={totalCalls.toLocaleString()} icon={Hash} />
+        <StatCard label="Avg Cost/Call" value={`$${avgCostPerCall.toFixed(4)}`} icon={Calculator} />
+      </div>
+
+      {/* Per-project breakdown */}
+      {byProject.length > 0 && (
+        <div className="mb-6">
+          <h2 className="text-sm font-semibold mb-3 text-gray-700 dark:text-gray-300">
+            Cost by Project
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            {byProject.map((p) => (
+              <div
+                key={p.project_id}
+                className="bg-white dark:bg-gray-900 rounded-lg border p-4"
+              >
+                <div className="text-xs font-medium font-mono truncate" title={p.project_id}>
+                  {p.project_id}
+                </div>
+                <div className="text-xl font-bold mt-1">${p.total_cost.toFixed(4)}</div>
+                <div className="text-xs text-gray-500 mt-1">
+                  {p.call_count.toLocaleString()} calls · {p.total_tokens.toLocaleString()} tokens
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Model breakdown */}
+      {models.length > 0 && (
+        <div className="mb-6">
+          <h2 className="text-sm font-semibold mb-3 text-gray-700 dark:text-gray-300">
+            Cost by Model
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+            {models.map((m) => (
+              <div
+                key={m.model}
+                className="bg-white dark:bg-gray-900 rounded-lg border p-4"
+              >
+                <div className="text-sm font-medium font-mono">{m.model}</div>
+                <div className="text-xl font-bold mt-1">${m.total_cost.toFixed(4)}</div>
+                <div className="text-xs text-gray-500 mt-1">
+                  {m.call_count.toLocaleString()} calls ·{" "}
+                  {(m.total_prompt_tokens + m.total_completion_tokens).toLocaleString()} tokens
+                </div>
+                <div className="mt-2 h-2 bg-gray-100 dark:bg-gray-800 rounded">
+                  <div
+                    className="h-full bg-splyntra-500 rounded"
+                    style={{ width: `${totalCost > 0 ? (m.total_cost / totalCost) * 100 : 0}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Detailed table */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg border overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading costs...</div>
+        ) : models.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">
+            No LLM usage data yet. Send traces with model information to see cost analytics.
+          </div>
+        ) : (
+          <table className="w-full text-sm">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Model</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Calls</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Prompt Tokens</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Completion Tokens</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Total Cost</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Avg/Call</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {models.map((m) => (
+                <tr key={m.model} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="px-4 py-3 font-medium font-mono text-xs">{m.model}</td>
+                  <td className="px-4 py-3 text-right text-gray-600">
+                    {m.call_count.toLocaleString()}
+                  </td>
+                  <td className="px-4 py-3 text-right text-gray-600">
+                    {m.total_prompt_tokens.toLocaleString()}
+                  </td>
+                  <td className="px-4 py-3 text-right text-gray-600">
+                    {m.total_completion_tokens.toLocaleString()}
+                  </td>
+                  <td className="px-4 py-3 text-right font-medium">
+                    ${m.total_cost.toFixed(4)}
+                  </td>
+                  <td className="px-4 py-3 text-right text-gray-600">
+                    ${m.avg_cost_per_call.toFixed(4)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot className="bg-gray-50 dark:bg-gray-800 border-t font-medium">
+              <tr>
+                <td className="px-4 py-3">Total</td>
+                <td className="px-4 py-3 text-right">{totalCalls.toLocaleString()}</td>
+                <td className="px-4 py-3 text-right">
+                  {models.reduce((s, m) => s + m.total_prompt_tokens, 0).toLocaleString()}
+                </td>
+                <td className="px-4 py-3 text-right">
+                  {models.reduce((s, m) => s + m.total_completion_tokens, 0).toLocaleString()}
+                </td>
+                <td className="px-4 py-3 text-right">${totalCost.toFixed(4)}</td>
+                <td className="px-4 py-3 text-right">${avgCostPerCall.toFixed(4)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/evaluations/page.tsx

@@ -0,0 +1,135 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ReferenceLine } from "recharts";
+import { ClipboardCheck, Database, CheckCircle2, AlertTriangle } from "lucide-react";
+import { useDatasets, useEvalRuns } from "@/lib/hooks";
+import { EvalDataset, EvalRun } from "@/lib/api";
+import { PageHeader, Card, StatCard, EmptyState } from "@/components/ui/primitives";
+
+export default function EvaluationsPage() {
+  const { data: dsData, isLoading: dsLoading } = useDatasets();
+  const { data: runData } = useEvalRuns();
+
+  const datasets: EvalDataset[] = dsData?.datasets || [];
+  const runs: EvalRun[] = runData?.runs || [];
+
+  const latest = runs[0];
+  const regressions = runs.filter((r) => r.regression).length;
+  const trend = [...runs]
+    .reverse()
+    .map((r) => ({ t: new Date(r.created_at).toLocaleDateString(), score: +(r.score * 100).toFixed(1) }));
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <PageHeader icon={ClipboardCheck} title="Evaluation" subtitle="Datasets, benchmark runs, and regression gates" />
+
+      <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <StatCard label="Datasets" value={datasets.length} icon={Database} />
+        <StatCard label="Runs" value={runs.length} icon={ClipboardCheck} />
+        <StatCard
+          label="Latest score"
+          value={latest ? `${(latest.score * 100).toFixed(1)}%` : "—"}
+          icon={CheckCircle2}
+          accent={latest && latest.passed ? "text-emerald-600" : "text-red-600"}
+        />
+        <StatCard label="Regressions" value={regressions} icon={AlertTriangle} accent={regressions > 0 ? "text-red-600" : undefined} />
+      </div>
+
+      {trend.length > 1 && (
+        <Card className="mb-6 p-4">
+          <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Score over time (%)</h3>
+          <div style={{ width: "100%", height: 220 }}>
+            <ResponsiveContainer>
+              <LineChart data={trend}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+                <XAxis dataKey="t" tick={{ fontSize: 11 }} stroke="#9ca3af" />
+                <YAxis domain={[0, 100]} tick={{ fontSize: 11 }} stroke="#9ca3af" width={40} />
+                <Tooltip contentStyle={{ fontSize: 12, borderRadius: 8 }} />
+                <ReferenceLine y={latest ? +(latest.score * 100).toFixed(1) : 0} stroke="#adb5bd" strokeDasharray="4 4" />
+                <Line type="monotone" dataKey="score" stroke="#4c6ef5" strokeWidth={2} dot={{ r: 2 }} />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </Card>
+      )}
+
+      <h2 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Datasets</h2>
+      <Card className="mb-6 overflow-hidden">
+        {dsLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading…</div>
+        ) : datasets.length === 0 ? (
+          <EmptyState icon={Database} title="No datasets yet">
+            Create one with the SDK: <code className="text-xs">splyntra eval push --name ...</code> or
+            <code className="text-xs"> POST /v1/datasets</code>.
+          </EmptyState>
+        ) : (
+          <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>Name</th>
+                <th>Slug</th>
+                <th className="text-right">Version</th>
+                <th className="text-right">Items</th>
+                <th className="text-right">Created</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {datasets.map((d) => (
+                <tr key={d.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/60">
+                  <td className="px-4 py-3 font-medium">{d.name}</td>
+                  <td className="px-4 py-3 font-mono text-xs text-gray-500">{d.slug}</td>
+                  <td className="px-4 py-3 text-right tabular-nums">v{d.latest_version}</td>
+                  <td className="px-4 py-3 text-right tabular-nums">{d.item_count}</td>
+                  <td className="px-4 py-3 text-right text-xs text-gray-500">{new Date(d.created_at).toLocaleDateString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </Card>
+
+      <h2 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Recent runs</h2>
+      <Card className="overflow-hidden">
+        {runs.length === 0 ? (
+          <EmptyState icon={ClipboardCheck} title="No runs yet">
+            Run <code className="text-xs">splyntra eval run --gate</code> in CI to score against a dataset.
+          </EmptyState>
+        ) : (
+          <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>Run</th>
+                <th className="text-right">Score</th>
+                <th className="text-right">Items</th>
+                <th>Gate</th>
+                <th className="text-right">When</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {runs.map((r) => (
+                <tr key={r.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/60">
+                  <td className="px-4 py-3 font-mono text-xs text-gray-500">{r.id.slice(0, 8)}</td>
+                  <td className="px-4 py-3 text-right font-medium tabular-nums">{(r.score * 100).toFixed(1)}%</td>
+                  <td className="px-4 py-3 text-right tabular-nums text-gray-500">{r.item_count}</td>
+                  <td className="px-4 py-3">
+                    {r.regression ? (
+                      <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium bg-red-50 text-red-700 ring-1 ring-inset ring-red-200">
+                        <AlertTriangle className="h-3 w-3" /> regression
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200">
+                        <CheckCircle2 className="h-3 w-3" /> {r.passed ? "passed" : "ok"}
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-right text-xs text-gray-500">{new Date(r.created_at).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </Card>
+    </div>
+  );
+}

package/src/app/globals.css

@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #f8fafc;
+  --foreground: #1c2541;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0b0f14;
+    --foreground: #e1e8ed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: 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;
+}
+
+/* Subtle, unobtrusive scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(148, 163, 184, 0.5);
+  border-radius: 9999px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}

package/src/app/layout.tsx

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import type { Metadata } from "next";
+import "./globals.css";
+import { Providers } from "./providers";
+import { AppShell } from "@/components/layout/AppShell";
+
+export const metadata: Metadata = {
+  title: "Splyntra - Agent Observability & Security",
+  description: "Unified observability and security for AI agents",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-gray-50 dark:bg-gray-950">
+        <Providers>
+          <AppShell>{children}</AppShell>
+        </Providers>
+      </body>
+    </html>
+  );
+}

package/src/app/login/page.tsx

@@ -0,0 +1,52 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { AuthCard, Field } from "@/components/auth/AuthCard";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError("");
+    setBusy(true);
+    const form = new FormData(e.currentTarget);
+    const res = await signIn("credentials", {
+      email: form.get("email"),
+      password: form.get("password"),
+      redirect: false,
+    });
+    setBusy(false);
+    if (res?.error) setError("Invalid email or password.");
+    else router.push("/");
+  }
+
+  return (
+    <AuthCard title="Sign in to Splyntra">
+      <form onSubmit={onSubmit} className="space-y-3">
+        <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"
+        >
+          {busy ? "Signing in…" : "Sign in"}
+        </button>
+      </form>
+      <p className="mt-4 text-center text-sm text-gray-500">
+        No account?{" "}
+        <Link href="/signup" className="text-splyntra-600 hover:underline">
+          Create one
+        </Link>
+      </p>
+    </AuthCard>
+  );
+}