@splyntra/dashboard 0.3.0

package/next.config.js

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",
+  poweredByHeader: false,
+  reactStrictMode: true,
+
+  // API calls are proxied to the collector at runtime by the route handler at
+  // src/app/api/v1/[...path]/route.ts. (next.config rewrites bake the URL at
+  // build time, which breaks Docker/Helm where the collector is a service name.)
+
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          { key: "X-Content-Type-Options", value: "nosniff" },
+          { key: "X-Frame-Options", value: "DENY" },
+          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+          { key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" },
+          { key: "X-DNS-Prefetch-Control", value: "on" },
+          { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
+          {
+            key: "Content-Security-Policy",
+            value: "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'",
+          },
+        ],
+      },
+    ];
+  },
+};
+
+module.exports = nextConfig;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@splyntra/dashboard",
+  "version": "0.3.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": {
+    "type": "git",
+    "url": "https://github.com/splyntra/splyntra",
+    "directory": "apps/web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "public",
+    "next.config.js",
+    "tailwind.config.js",
+    "postcss.config.js",
+    "tsconfig.json"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.40.0",
+    "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
+    "lucide-react": "^0.390.0",
+    "next": "^14.2.0",
+    "next-auth": "^5.0.0-beta.19",
+    "pg": "^8.21.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^2.3.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/node": "^20.0.0",
+    "@types/pg": "^8.20.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.0",
+    "jsdom": "^24.1.3",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.1"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "name": "Splyntra",
+  "short_name": "Splyntra",
+  "description": "Unified observability and security for AI agents",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4c6ef5"
+}

package/src/app/accept-invite/page.tsx

@@ -0,0 +1,43 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { Suspense } from "react";
+import { useFormState } from "react-dom";
+import { useSearchParams } from "next/navigation";
+import { signupAction } from "@/app/auth-actions";
+import { AuthCard, Field } from "@/components/auth/AuthCard";
+
+function AcceptInviteForm() {
+  const params = useSearchParams();
+  const token = params.get("token") || "";
+  const email = params.get("email") || "";
+  const [state, formAction] = useFormState(signupAction, { error: "" });
+
+  return (
+    <AuthCard title="Accept your invitation">
+      <form action={formAction} className="space-y-3">
+        <input type="hidden" name="invite" value={token} />
+        <Field name="name" type="text" label="Name" />
+        <Field name="email" type="email" label="Email" defaultValue={email} />
+        <Field name="password" type="password" label="Password (8+ chars)" />
+        {state?.error ? <p className="text-sm text-red-600">{state.error}</p> : null}
+        {!token && <p className="text-sm text-amber-600">Missing invite token.</p>}
+        <button
+          type="submit"
+          disabled={!token}
+          className="w-full rounded-lg bg-splyntra-600 py-2 text-sm font-medium text-white hover:bg-splyntra-700 disabled:opacity-50"
+        >
+          Join team
+        </button>
+      </form>
+    </AuthCard>
+  );
+}
+
+export default function AcceptInvitePage() {
+  return (
+    <Suspense fallback={<AuthCard title="Accept your invitation">Loading…</AuthCard>}>
+      <AcceptInviteForm />
+    </Suspense>
+  );
+}

package/src/app/agents/layout.tsx

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Agents | Splyntra",
+  description: "Monitor registered AI agents across environments",
+};
+
+export default function AgentsLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

package/src/app/agents/page.tsx

@@ -0,0 +1,149 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useAgents } from "@/lib/hooks";
+import { AgentItem } from "@/lib/api";
+import { Bot, CheckCircle2, AlertCircle, ShieldAlert } from "lucide-react";
+import { PageHeader, StatCard, Card, EmptyState } from "@/components/ui/primitives";
+
+export default function AgentsPage() {
+  const { data, isLoading, error } = useAgents();
+
+  const agents: AgentItem[] = data?.agents || [];
+  const hasRealData = !error && agents.length > 0;
+
+  const totalAgents = agents.length;
+  const activeAgents = agents.filter((a) => {
+    const lastSeen = new Date(a.last_seen_at);
+    return Date.now() - lastSeen.getTime() < 5 * 60 * 1000;
+  }).length;
+  const errorAgents = agents.filter((a) => a.error_count > 0).length;
+  const avgRisk = totalAgents > 0
+    ? Math.round(agents.reduce((sum, a) => sum + (a.detection_count > 0 ? 50 : 0), 0) / totalAgents)
+    : 0;
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <PageHeader
+        icon={Bot}
+        title="Agents"
+        subtitle="Monitor registered agents across environments"
+      />
+      {!hasRealData && !isLoading && (
+        <p className="-mt-2 mb-4 text-xs text-amber-600">
+          No agent data yet — send traces with agent names to populate.
+        </p>
+      )}
+
+      {/* Summary cards */}
+      <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <StatCard label="Total Agents" value={totalAgents} icon={Bot} />
+        <StatCard label="Active" value={activeAgents} icon={CheckCircle2} accent="text-emerald-600" />
+        <StatCard label="With Errors" value={errorAgents} icon={AlertCircle} accent="text-red-600" />
+        <StatCard label="Avg Risk" value={avgRisk} icon={ShieldAlert} accent="text-orange-600" />
+      </div>
+
+      {/* Agent table */}
+      <Card className="overflow-hidden">
+        {isLoading ? (
+          <div className="p-8 text-center text-gray-500">Loading agents…</div>
+        ) : agents.length === 0 ? (
+          <EmptyState icon={Bot} title="No agents found">
+            Send traces to your collector to see agents here.
+          </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">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>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {agents.map((agent) => {
+                const errorRate = agent.trace_count > 0
+                  ? ((agent.error_count / agent.trace_count) * 100).toFixed(1)
+                  : "0.0";
+                const isActive = Date.now() - new Date(agent.last_seen_at).getTime() < 5 * 60 * 1000;
+                const hasErrors = agent.error_count > 0;
+
+                return (
+                  <tr key={agent.agent_id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-4 py-3 font-medium">
+                      {agent.name || agent.agent_id}
+                      {agent.framework && (
+                        <span className="ml-2 px-1.5 py-0.5 rounded text-[10px] font-medium bg-splyntra-50 text-splyntra-700">
+                          {agent.framework}
+                        </span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3">
+                      <StatusBadge status={hasErrors ? "error" : isActive ? "active" : "idle"} />
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-600">
+                      {agent.trace_count.toLocaleString()}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <span className={agent.error_count > 0 ? "text-red-600 font-medium" : "text-gray-600"}>
+                        {agent.error_count} ({errorRate}%)
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-600">
+                      {Math.round(agent.avg_latency_ms)}ms
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-600">
+                      {Math.round(agent.p95_latency_ms)}ms
+                    </td>
+                    <td className="px-4 py-3 text-right text-gray-600">
+                      ${agent.total_cost.toFixed(4)}
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      {agent.detection_count > 0 ? (
+                        <span className="px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700">
+                          {agent.detection_count}
+                        </span>
+                      ) : (
+                        <span className="text-gray-400">0</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-right text-xs text-gray-500">
+                      {formatRelativeTime(agent.last_seen_at)}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: "active" | "idle" | "error" }) {
+  const styles = {
+    active: "bg-green-100 text-green-700",
+    idle: "bg-gray-100 text-gray-600",
+    error: "bg-red-100 text-red-700",
+  };
+  return (
+    <span className={`px-2 py-0.5 rounded text-xs font-medium ${styles[status]}`}>
+      {status}
+    </span>
+  );
+}
+
+function formatRelativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  if (diff < 60_000) return "just now";
+  if (diff < 3600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86400_000) return `${Math.floor(diff / 3600_000)}h ago`;
+  return `${Math.floor(diff / 86400_000)}d ago`;
+}

package/src/app/alerts/page.tsx

@@ -0,0 +1,227 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+"use client";
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAlerts } from "@/lib/hooks";
+import { useProject } from "@/lib/project-context";
+import { createAlert, deleteAlert, AlertItem, AlertEventItem } from "@/lib/api";
+import { Bell } from "lucide-react";
+import { PageHeader } from "@/components/ui/primitives";
+
+const CHANNELS = ["email", "webhook", "slack"];
+
+export default function AlertsPage() {
+  const { data, isLoading } = useAlerts();
+  const { projectId } = useProject();
+  const queryClient = useQueryClient();
+
+  const [name, setName] = useState("");
+  const [type, setType] = useState<"risk_threshold" | "cost_threshold">("risk_threshold");
+  const [threshold, setThreshold] = useState(70);
+  const [channels, setChannels] = useState<string[]>(["email"]);
+  const [submitting, setSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
+
+  const alerts: AlertItem[] = data?.alerts || [];
+  const events: AlertEventItem[] = data?.events || [];
+
+  const refresh = () => queryClient.invalidateQueries({ queryKey: ["alerts"] });
+
+  async function onCreate(e: React.FormEvent) {
+    e.preventDefault();
+    setErrMsg("");
+    if (!name.trim()) {
+      setErrMsg("Name is required");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await createAlert({
+        name: name.trim(),
+        type,
+        project_id: projectId || undefined,
+        config: type === "cost_threshold" ? { threshold, window_sec: 86400 } : { threshold },
+        channels,
+      });
+      setName("");
+      setType("risk_threshold");
+      setThreshold(70);
+      setChannels(["email"]);
+      refresh();
+    } catch (err: any) {
+      setErrMsg(err?.message || "Failed to create alert");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function onDelete(id: string) {
+    await deleteAlert(id);
+    refresh();
+  }
+
+  function toggleChannel(ch: string) {
+    setChannels((prev) => (prev.includes(ch) ? prev.filter((c) => c !== ch) : [...prev, ch]));
+  }
+
+  return (
+    <div className="mx-auto max-w-5xl p-6">
+      <PageHeader
+        icon={Bell}
+        title="Alerts"
+        subtitle="Fire a notification when a trace's risk score crosses a threshold"
+      />
+
+      {/* 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"
+      >
+        <label className="flex flex-col text-sm md:col-span-2">
+          <span className="text-xs text-gray-500 mb-1">Alert name</span>
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="High-risk traces"
+            className="rounded-md border px-2 py-1.5 bg-white dark:bg-gray-800"
+          />
+        </label>
+        <label className="flex flex-col text-sm">
+          <span className="text-xs text-gray-500 mb-1">Type</span>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value as "risk_threshold" | "cost_threshold")}
+            className="rounded-md border px-2 py-1.5 bg-white dark:bg-gray-800"
+          >
+            <option value="risk_threshold">Risk threshold</option>
+            <option value="cost_threshold">Cost threshold (24h $)</option>
+          </select>
+        </label>
+        <label className="flex flex-col text-sm">
+          <span className="text-xs text-gray-500 mb-1">
+            {type === "cost_threshold" ? "Spend limit (USD / 24h)" : "Risk threshold (0–100)"}
+          </span>
+          <input
+            type="number"
+            min={1}
+            value={threshold}
+            onChange={(e) => setThreshold(Number(e.target.value))}
+            className="rounded-md border px-2 py-1.5 bg-white dark:bg-gray-800"
+          />
+        </label>
+        <div className="flex flex-col text-sm">
+          <span className="text-xs text-gray-500 mb-1">Channels</span>
+          <div className="flex gap-2 flex-wrap items-center h-full">
+            {CHANNELS.map((ch) => (
+              <label key={ch} className="flex items-center gap-1 text-xs">
+                <input
+                  type="checkbox"
+                  checked={channels.includes(ch)}
+                  onChange={() => toggleChannel(ch)}
+                />
+                {ch}
+              </label>
+            ))}
+          </div>
+        </div>
+        <div className="md:col-span-4 flex items-center gap-3">
+          <button
+            type="submit"
+            disabled={submitting}
+            className="px-4 py-2 rounded-md bg-splyntra-500 text-white text-sm font-medium disabled:opacity-50"
+          >
+            {submitting ? "Creating…" : "Create alert"}
+          </button>
+          {errMsg && <span className="text-xs text-red-600">{errMsg}</span>}
+        </div>
+      </form>
+
+      {/* Configured alerts */}
+      <h2 className="text-sm font-semibold mb-3 text-gray-700 dark:text-gray-300">
+        Configured alerts
+      </h2>
+      <div className="bg-white dark:bg-gray-900 rounded-lg border overflow-hidden mb-8">
+        {isLoading ? (
+          <div className="p-6 text-center text-gray-500">Loading…</div>
+        ) : alerts.length === 0 ? (
+          <div className="p-6 text-center text-gray-500">No alerts configured yet.</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">Name</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Type</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Threshold</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Channels</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500"></th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {alerts.map((a) => (
+                <tr key={a.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="px-4 py-3 font-medium">{a.name}</td>
+                  <td className="px-4 py-3 text-gray-600 font-mono text-xs">{a.type}</td>
+                  <td className="px-4 py-3 text-right text-gray-600">
+                    {String((a.config as { threshold?: number })?.threshold ?? "—")}
+                  </td>
+                  <td className="px-4 py-3 text-gray-600 text-xs">{a.channels.join(", ")}</td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => onDelete(a.id)}
+                      className="text-xs text-red-600 hover:underline"
+                    >
+                      Delete
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Fired history */}
+      <h2 className="text-sm font-semibold mb-3 text-gray-700 dark:text-gray-300">
+        Triggered alerts
+      </h2>
+      <div className="bg-white dark:bg-gray-900 rounded-lg border overflow-hidden">
+        {events.length === 0 ? (
+          <div className="p-6 text-center text-gray-500">No alerts have fired yet.</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">Alert</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Trace</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Risk</th>
+                <th className="px-4 py-3 text-left font-medium text-gray-500">Severity</th>
+                <th className="px-4 py-3 text-right font-medium text-gray-500">Fired</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {events.map((ev) => (
+                <tr key={ev.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="px-4 py-3 font-medium">{ev.alert_name}</td>
+                  <td className="px-4 py-3">
+                    <a
+                      href={`/traces/${ev.trace_id}`}
+                      className="font-mono text-xs text-splyntra-600 hover:underline"
+                    >
+                      {ev.trace_id}
+                    </a>
+                  </td>
+                  <td className="px-4 py-3 text-right font-medium">{ev.risk_score}</td>
+                  <td className="px-4 py-3 text-xs">{ev.severity}</td>
+                  <td className="px-4 py-3 text-right text-xs text-gray-500">
+                    {new Date(ev.fired_at).toLocaleString()}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,4 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;

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

@@ -0,0 +1,61 @@
+// SPDX-License-Identifier: AGPL-3.0-only
+// Runtime proxy to the evaluation service (same pattern as the collector
+// proxy). Resolves the service URL from the environment per request so one
+// 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 evalBase(): string {
+  return (process.env.EVAL_URL || "http://localhost:8002").replace(/\/$/, "");
+}
+
+async function proxy(req: NextRequest, path: string[]): Promise<NextResponse> {
+  if (req.method !== "GET" && req.method !== "HEAD") {
+    const session = await getSession();
+    const role = (session?.user as { role?: string })?.role;
+    if (!roleAtLeast(role, "member")) {
+      return NextResponse.json({ error: "insufficient role" }, { status: 403 });
+    }
+  }
+  const target = `${evalBase()}/${path.join("/")}${req.nextUrl.search}`;
+
+  const headers = new Headers();
+  // Authenticate on the logged-in user's behalf (see api/v1 proxy for rationale).
+  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: "evaluation service 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);
+}