@splyntra/dashboard 0.3.0

package/src/app/metrics/page.tsx

@@ -0,0 +1,148 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useState } from "react";
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from "recharts";
+import { LineChart as LineChartIcon, Clock, Activity, AlertTriangle, Coins } from "lucide-react";
+import { useMetrics } from "@/lib/hooks";
+import { MetricPoint } from "@/lib/api";
+import { PageHeader, Card, StatCard } from "@/components/ui/primitives";
+
+const WINDOWS: { label: string; window: number; interval: number }[] = [
+  { label: "1h", window: 3600, interval: 60 },
+  { label: "24h", window: 86400, interval: 300 },
+  { label: "7d", window: 604800, interval: 3600 },
+];
+
+export default function MetricsPage() {
+  const [w, setW] = useState(WINDOWS[1]);
+  const { data, isLoading, error } = useMetrics(w.window, w.interval);
+
+  const points: MetricPoint[] = data?.points || [];
+  const rows = points.map((p) => ({
+    t: new Date(p.bucket).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+    avg: Math.round(p.avg_latency_ms),
+    p95: Math.round(p.p95_latency_ms),
+    throughput: p.trace_count,
+    errorRate: p.trace_count > 0 ? +((p.error_count / p.trace_count) * 100).toFixed(1) : 0,
+    tokens: p.total_tokens,
+    cost: +p.total_cost.toFixed(4),
+  }));
+
+  const totals = points.reduce(
+    (a, p) => ({
+      traces: a.traces + p.trace_count,
+      errors: a.errors + p.error_count,
+      tokens: a.tokens + p.total_tokens,
+      cost: a.cost + p.total_cost,
+    }),
+    { traces: 0, errors: 0, tokens: 0, cost: 0 }
+  );
+  const errorRate = totals.traces > 0 ? ((totals.errors / totals.traces) * 100).toFixed(1) : "0.0";
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <PageHeader
+        icon={LineChartIcon}
+        title="Metrics"
+        subtitle="Latency, throughput, error rate, and spend over time"
+        action={
+          <div className="flex gap-1 rounded-lg border border-gray-200 p-0.5 dark:border-gray-700">
+            {WINDOWS.map((opt) => (
+              <button
+                key={opt.label}
+                onClick={() => setW(opt)}
+                className={`rounded-md px-2.5 py-1 text-xs font-medium ${
+                  w.label === opt.label
+                    ? "bg-splyntra-600 text-white"
+                    : "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        }
+      />
+
+      {error && !isLoading && (
+        <p className="-mt-2 mb-4 text-xs text-red-500">Could not reach the collector.</p>
+      )}
+
+      <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <StatCard label="Total Runs" value={totals.traces.toLocaleString()} icon={Activity} />
+        <StatCard label="Error Rate" value={`${errorRate}%`} icon={AlertTriangle} accent={totals.errors > 0 ? "text-red-600" : undefined} />
+        <StatCard label="Tokens" value={totals.tokens.toLocaleString()} icon={Coins} />
+        <StatCard label="Spend" value={`$${totals.cost.toFixed(2)}`} icon={Clock} />
+      </div>
+
+      {isLoading ? (
+        <div className="py-16 text-center text-gray-500">Loading metrics…</div>
+      ) : rows.length === 0 ? (
+        <Card className="p-10 text-center text-gray-500">No metrics in this window yet — send some traces.</Card>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <ChartCard title="Latency (ms)">
+            <LineChart data={rows}>
+              {grid()}
+              <Line type="monotone" dataKey="avg" name="avg" stroke="#4c6ef5" dot={false} strokeWidth={2} />
+              <Line type="monotone" dataKey="p95" name="p95" stroke="#f59f00" dot={false} strokeWidth={2} />
+            </LineChart>
+          </ChartCard>
+          <ChartCard title="Throughput (runs)">
+            <BarChart data={rows}>
+              {grid()}
+              <Bar dataKey="throughput" name="runs" fill="#4c6ef5" radius={[2, 2, 0, 0]} />
+            </BarChart>
+          </ChartCard>
+          <ChartCard title="Error rate (%)">
+            <AreaChart data={rows}>
+              {grid()}
+              <Area type="monotone" dataKey="errorRate" name="error %" stroke="#fa5252" fill="#ffc9c9" />
+            </AreaChart>
+          </ChartCard>
+          <ChartCard title="Spend ($)">
+            <AreaChart data={rows}>
+              {grid()}
+              <Area type="monotone" dataKey="cost" name="cost" stroke="#37b24d" fill="#b2f2bb" />
+            </AreaChart>
+          </ChartCard>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function grid() {
+  return (
+    <>
+      <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+      <XAxis dataKey="t" tick={{ fontSize: 11 }} stroke="#9ca3af" />
+      <YAxis tick={{ fontSize: 11 }} stroke="#9ca3af" width={40} />
+      <Tooltip contentStyle={{ fontSize: 12, borderRadius: 8 }} />
+    </>
+  );
+}
+
+function ChartCard({ title, children }: { title: string; children: React.ReactElement }) {
+  return (
+    <Card className="p-4">
+      <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">{title}</h3>
+      <div style={{ width: "100%", height: 220 }}>
+        <ResponsiveContainer>{children}</ResponsiveContainer>
+      </div>
+    </Card>
+  );
+}

package/src/app/not-found.tsx

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import Link from "next/link";
+import { Compass, ArrowLeft } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center p-8 text-center">
+      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800">
+        <Compass className="h-7 w-7" />
+      </div>
+      <div className="text-5xl font-bold tracking-tight text-gray-200 dark:text-gray-700">404</div>
+      <h2 className="mt-2 text-xl font-semibold text-gray-900 dark:text-white">Page not found</h2>
+      <p className="mb-6 mt-1 text-gray-500">The page you&apos;re looking for doesn&apos;t exist.</p>
+      <Link
+        href="/"
+        className="inline-flex items-center gap-1.5 rounded-lg bg-splyntra-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-splyntra-700"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to dashboard
+      </Link>
+    </div>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,56 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import Link from "next/link";
+import {
+  Activity,
+  Bot,
+  DollarSign,
+  FolderKanban,
+  Bell,
+  ShieldCheck,
+  ArrowRight,
+  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: "/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 },
+];
+
+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>
+        <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">
+          Unified observability and security for AI agents. See what your agents did and
+          whether it was safe — in one view.
+        </p>
+      </div>
+
+      <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"
+          >
+            <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">
+              <Icon className="h-5 w-5" />
+            </div>
+            <h2 className="flex items-center gap-1 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" />
+            </h2>
+            <p className="mt-1 text-sm text-gray-500">{desc}</p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/projects/page.tsx

@@ -0,0 +1,130 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useProjects } from "@/lib/hooks";
+import { useProject } from "@/lib/project-context";
+import { ProjectItem, createProject } from "@/lib/api";
+import { FolderKanban } from "lucide-react";
+import { PageHeader, Card, EmptyState } from "@/components/ui/primitives";
+
+export default function ProjectsPage() {
+  const { data, isLoading, error } = useProjects();
+  const { projectId, setProjectId } = useProject();
+  const queryClient = useQueryClient();
+
+  const [name, setName] = useState("");
+  const [environment, setEnvironment] = useState("development");
+  const [submitting, setSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
+
+  const projects: ProjectItem[] = data?.projects || [];
+
+  async function onCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitting(true);
+    setErrMsg("");
+    try {
+      await createProject({ name, environment });
+      setName("");
+      queryClient.invalidateQueries({ queryKey: ["projects"] });
+    } catch {
+      setErrMsg("Could not create project — an admin-scoped session/key is required.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl p-6">
+      <PageHeader
+        icon={FolderKanban}
+        title="Projects"
+        subtitle="Create and select projects to scope traces, agents, costs, and alerts"
+      />
+      {error && !isLoading && (
+        <p className="-mt-2 mb-4 text-xs text-amber-600">
+          Could not load projects — is the collector reachable?
+        </p>
+      )}
+
+      <Card className="mb-6 p-4">
+        <form onSubmit={onCreate} className="flex flex-wrap items-end gap-3">
+          <label className="flex-1 min-w-[200px]">
+            <span className="mb-1 block text-xs font-medium text-gray-500">New project name</span>
+            <input value={name} onChange={(e) => setName(e.target.value)} required placeholder="Checkout Agent"
+              className="w-full rounded-lg border px-3 py-2 text-sm dark:bg-gray-800" />
+          </label>
+          <label className="min-w-[150px]">
+            <span className="mb-1 block text-xs font-medium text-gray-500">Environment</span>
+            <select value={environment} onChange={(e) => setEnvironment(e.target.value)}
+              className="w-full rounded-lg border px-3 py-2 text-sm dark:bg-gray-800">
+              <option value="development">development</option>
+              <option value="staging">staging</option>
+              <option value="production">production</option>
+            </select>
+          </label>
+          <button disabled={submitting || !name} className="rounded-lg bg-splyntra-600 px-4 py-2 text-sm font-medium text-white hover:bg-splyntra-700 disabled:opacity-50">
+            {submitting ? "Creating…" : "Create project"}
+          </button>
+        </form>
+        {errMsg && <p className="mt-2 text-xs text-amber-600">{errMsg}</p>}
+      </Card>
+
+      <Card className="overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading projects…</div>
+        ) : projects.length === 0 ? (
+          <EmptyState icon={FolderKanban} title="No projects found">
+            Projects are provisioned in the metadata store (see migrations/postgres)
+            and created when API keys are issued.
+          </EmptyState>
+        ) : (
+          <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">Name</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Slug</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Environment</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Created</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Active</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {projects.map((p) => {
+                const isActive = projectId === p.id;
+                return (
+                  <tr key={p.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-4 py-3 font-medium">{p.name}</td>
+                    <td className="px-4 py-3 font-mono text-xs text-gray-600">{p.slug}</td>
+                    <td className="px-4 py-3">
+                      <span className="px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">
+                        {p.environment}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-xs text-gray-500">
+                      {new Date(p.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <button
+                        onClick={() => setProjectId(isActive ? "" : p.id)}
+                        className={`px-3 py-1 rounded text-xs font-medium ${
+                          isActive
+                            ? "bg-splyntra-500 text-white"
+                            : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                        }`}
+                      >
+                        {isActive ? "Selected" : "Select"}
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </Card>
+    </div>
+  );
+}

package/src/app/providers.tsx

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { SessionProvider } from "next-auth/react";
+import { ErrorBoundary } from "@/components/ui/ErrorBoundary";
+import { ProjectProvider } from "@/lib/project-context";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 5_000,
+            refetchInterval: 10_000,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return (
+    <ErrorBoundary>
+      <SessionProvider>
+        <QueryClientProvider client={queryClient}>
+          <ProjectProvider>{children}</ProjectProvider>
+        </QueryClientProvider>
+      </SessionProvider>
+    </ErrorBoundary>
+  );
+}

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

@@ -0,0 +1,174 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useKeys, useProjects } from "@/lib/hooks";
+import { createKey, revokeKey, rotateKey, ApiKeyItem } from "@/lib/api";
+import { KeyRound, Copy, Check } from "lucide-react";
+import { PageHeader, Card, EmptyState } from "@/components/ui/primitives";
+
+export default function KeysPage() {
+  const { data, isLoading, error } = useKeys();
+  const { data: projectsData } = useProjects();
+  const queryClient = useQueryClient();
+
+  const [name, setName] = useState("");
+  const [projectId, setProjectId] = useState("");
+  const [scopeIngest, setScopeIngest] = useState(true);
+  const [scopeRead, setScopeRead] = useState(true);
+  const [scopeAdmin, setScopeAdmin] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
+  const [plaintext, setPlaintext] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const keys: ApiKeyItem[] = data?.keys || [];
+  const projects = projectsData?.projects || [];
+  const refresh = () => queryClient.invalidateQueries({ queryKey: ["keys"] });
+
+  async function onCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setSubmitting(true);
+    setErrMsg("");
+    try {
+      const scopes = [
+        ...(scopeIngest ? ["ingest"] : []),
+        ...(scopeRead ? ["read"] : []),
+        ...(scopeAdmin ? ["admin"] : []),
+      ];
+      const res = await createKey({ name: name || "API Key", project_id: projectId || undefined, scopes });
+      setPlaintext(res.key);
+      setName("");
+      refresh();
+    } catch {
+      setErrMsg("Could not create key — you need an admin-scoped session/key.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function onRotate(id: string) {
+    setErrMsg("");
+    try {
+      const res = await rotateKey(id);
+      setPlaintext(res.key);
+      refresh();
+    } catch {
+      setErrMsg("Rotate failed.");
+    }
+  }
+
+  async function onRevoke(id: string) {
+    setErrMsg("");
+    try {
+      await revokeKey(id);
+      refresh();
+    } catch {
+      setErrMsg("Revoke failed.");
+    }
+  }
+
+  function copy() {
+    if (plaintext) {
+      navigator.clipboard.writeText(plaintext);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl p-6">
+      <PageHeader icon={KeyRound} title="API Keys" subtitle="Issue, rotate, and revoke ingestion keys for this organization" />
+
+      {plaintext && (
+        <Card className="mb-4 border-emerald-300 bg-emerald-50 p-4 dark:bg-emerald-900/20">
+          <p className="mb-2 text-sm font-medium text-emerald-800 dark:text-emerald-200">
+            Copy your new key now — it is shown only once.
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 truncate rounded bg-white px-3 py-2 font-mono text-xs dark:bg-gray-900">{plaintext}</code>
+            <button onClick={copy} className="inline-flex items-center gap-1 rounded-md border px-2 py-2 text-xs hover:bg-white dark:hover:bg-gray-800">
+              {copied ? <Check className="h-4 w-4 text-emerald-600" /> : <Copy className="h-4 w-4" />}
+              {copied ? "Copied" : "Copy"}
+            </button>
+            <button onClick={() => setPlaintext(null)} className="rounded-md px-2 py-2 text-xs text-gray-500 hover:bg-white dark:hover:bg-gray-800">Dismiss</button>
+          </div>
+        </Card>
+      )}
+
+      <Card className="mb-6 p-4">
+        <form onSubmit={onCreate} className="flex flex-wrap items-end gap-3">
+          <label className="flex-1 min-w-[180px]">
+            <span className="mb-1 block text-xs font-medium text-gray-500">Name</span>
+            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Production ingest"
+              className="w-full rounded-lg border px-3 py-2 text-sm dark:bg-gray-800" />
+          </label>
+          <label className="min-w-[160px]">
+            <span className="mb-1 block text-xs font-medium text-gray-500">Project</span>
+            <select value={projectId} onChange={(e) => setProjectId(e.target.value)}
+              className="w-full rounded-lg border px-3 py-2 text-sm dark:bg-gray-800">
+              <option value="">Org-wide</option>
+              {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          </label>
+          <div className="flex items-center gap-3 text-xs">
+            <label className="flex items-center gap-1"><input type="checkbox" checked={scopeIngest} onChange={(e) => setScopeIngest(e.target.checked)} /> ingest</label>
+            <label className="flex items-center gap-1"><input type="checkbox" checked={scopeRead} onChange={(e) => setScopeRead(e.target.checked)} /> read</label>
+            <label className="flex items-center gap-1"><input type="checkbox" checked={scopeAdmin} onChange={(e) => setScopeAdmin(e.target.checked)} /> admin</label>
+          </div>
+          <button disabled={submitting} className="rounded-lg bg-splyntra-600 px-4 py-2 text-sm font-medium text-white hover:bg-splyntra-700 disabled:opacity-50">
+            {submitting ? "Creating…" : "Create key"}
+          </button>
+        </form>
+        {errMsg && <p className="mt-2 text-xs text-amber-600">{errMsg}</p>}
+      </Card>
+
+      <Card className="overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading keys…</div>
+        ) : error ? (
+          <EmptyState icon={KeyRound} title="Keys unavailable">
+            Listing keys requires an admin-scoped session/key.
+          </EmptyState>
+        ) : keys.length === 0 ? (
+          <EmptyState icon={KeyRound} title="No API keys yet">Create one above to start ingesting.</EmptyState>
+        ) : (
+          <table className="w-full text-sm">
+            <thead className="border-b bg-gray-50 dark:bg-gray-800">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Name</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Prefix</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Scopes</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">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {keys.map((k) => (
+                <tr key={k.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="px-4 py-3 font-medium">{k.name}</td>
+                  <td className="px-4 py-3 font-mono text-xs text-gray-600">{k.key_prefix}…</td>
+                  <td className="px-4 py-3 text-xs text-gray-600">{(k.scopes || []).join(", ")}</td>
+                  <td className="px-4 py-3">
+                    <span className={`rounded px-2 py-0.5 text-xs font-medium ${k.is_active ? "bg-emerald-100 text-emerald-700" : "bg-gray-200 text-gray-500"}`}>
+                      {k.is_active ? "active" : "revoked"}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    {k.is_active && (
+                      <>
+                        <button onClick={() => onRotate(k.id)} className="mr-3 text-xs text-splyntra-600 hover:underline">Rotate</button>
+                        <button onClick={() => onRevoke(k.id)} className="text-xs text-red-600 hover:underline">Revoke</button>
+                      </>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useFormState } from "react-dom";
+import { useState } from "react";
+import { inviteMemberAction } from "@/app/auth-actions";
+
+export function InviteForm() {
+  const [state, action] = useFormState(inviteMemberAction, { error: "", token: "" });
+  const [origin, setOrigin] = useState("");
+  if (typeof window !== "undefined" && !origin) setOrigin(window.location.origin);
+
+  return (
+    <div className="rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
+      <h2 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Invite a teammate</h2>
+      <form action={action} className="flex flex-wrap items-end gap-3">
+        <label className="flex flex-col text-sm">
+          <span className="mb-1 text-xs text-gray-500">Email</span>
+          <input name="email" type="email" required className="rounded-md border px-2 py-1.5 dark:bg-gray-800" />
+        </label>
+        <label className="flex flex-col text-sm">
+          <span className="mb-1 text-xs text-gray-500">Role</span>
+          <select name="role" className="rounded-md border px-2 py-1.5 dark:bg-gray-800">
+            <option value="viewer">viewer</option>
+            <option value="member">member</option>
+            <option value="admin">admin</option>
+          </select>
+        </label>
+        <button className="rounded-lg bg-splyntra-600 px-4 py-2 text-sm font-medium text-white hover:bg-splyntra-700">
+          Create invite
+        </button>
+      </form>
+      {state?.error ? <p className="mt-2 text-sm text-red-600">{state.error}</p> : null}
+      {state?.token ? (
+        <div className="mt-3 rounded-lg bg-gray-50 p-2 text-xs dark:bg-gray-800">
+          Share this invite link:
+          <code className="ml-1 break-all text-splyntra-600">
+            {origin}/accept-invite?token={state.token}
+          </code>
+        </div>
+      ) : null}
+    </div>
+  );
+}