diff --git a/app/(dashboard)/traces/page.tsx b/app/(dashboard)/traces/page.tsx
index bae0d6d..cbf9507 100644
--- a/app/(dashboard)/traces/page.tsx
+++ b/app/(dashboard)/traces/page.tsx
@@ -37,9 +37,15 @@ export default function TracesPage() {
const { data: traces } = useTraces();
const [selectedTrace, setSelectedTrace] = useState
(null);
- // Auto-select first trace when data first arrives
+ // Keep the selection in sync with the current trace list: clear it when the
+ // list is empty (e.g. a real project with no spans, or after switching
+ // projects), and pick the first trace when the current one is gone.
useEffect(() => {
- if (traces.length > 0 && !selectedTrace) setSelectedTrace(traces[0]);
+ if (traces.length === 0) {
+ setSelectedTrace(null);
+ } else if (!selectedTrace || !traces.some((t) => t.id === selectedTrace.id)) {
+ setSelectedTrace(traces[0]);
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [traces]);
const [selectedSpan, setSelectedSpan] = useState(null);
diff --git a/app/api/lb/[...path]/route.ts b/app/api/lb/[...path]/route.ts
new file mode 100644
index 0000000..2eab36d
--- /dev/null
+++ b/app/api/lb/[...path]/route.ts
@@ -0,0 +1,62 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+/**
+ * Session-scoped read/write proxy for dashboard telemetry.
+ *
+ * browser (no key) → here (NextAuth session) → backend (internal token + project)
+ *
+ * Enforces that the requested `?project=` belongs to the signed-in user
+ * (via `session.projectIds`), then forwards to the FastAPI backend with the
+ * server-only internal token and an explicit `x-project-id`. The browser never
+ * holds a project API key or the internal token.
+ */
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+ return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+async function proxy(req: Request, ctx: { params: Promise<{ path: string[] }> }) {
+ const session = await auth();
+ const email = session?.user?.email;
+ if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+ const reqUrl = new URL(req.url);
+ const project = reqUrl.searchParams.get("project");
+ if (!project) return NextResponse.json({ error: "missing_project" }, { status: 400 });
+ if (!session.projectIds?.includes(project)) {
+ return NextResponse.json({ error: "forbidden" }, { status: 403 });
+ }
+
+ const { path } = await ctx.params;
+ reqUrl.searchParams.delete("project");
+ const qs = reqUrl.searchParams.toString();
+ const target = `${API_URL}/${path.join("/")}${qs ? `?${qs}` : ""}`;
+
+ const init: RequestInit = {
+ method: req.method,
+ headers: {
+ "x-internal-token": internalToken(),
+ "x-project-id": project,
+ "content-type": "application/json",
+ },
+ cache: "no-store",
+ };
+ if (req.method !== "GET" && req.method !== "HEAD") {
+ const body = await req.text();
+ if (body) init.body = body;
+ }
+
+ const res = await fetch(target, init);
+ const text = await res.text();
+ return new NextResponse(text || null, {
+ status: res.status,
+ headers: { "content-type": res.headers.get("content-type") ?? "application/json" },
+ });
+}
+
+export const GET = proxy;
+export const POST = proxy;
+export const PATCH = proxy;
+export const DELETE = proxy;
diff --git a/app/api/projects/[id]/rotate/route.ts b/app/api/projects/[id]/rotate/route.ts
new file mode 100644
index 0000000..812c602
--- /dev/null
+++ b/app/api/projects/[id]/rotate/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+ return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+export async function POST(
+ _req: Request,
+ ctx: { params: Promise<{ id: string }> }
+) {
+ const session = await auth();
+ const email = session?.user?.email;
+ if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+ const { id } = await ctx.params;
+ const res = await fetch(
+ `${API_URL}/v1/internal/projects/${encodeURIComponent(id)}/rotate`,
+ {
+ method: "POST",
+ headers: { "content-type": "application/json", "x-internal-token": internalToken() },
+ body: JSON.stringify({ email }),
+ cache: "no-store",
+ }
+ );
+ const data = await res.json().catch(() => ({}));
+ return NextResponse.json(data, { status: res.status });
+}
diff --git a/app/api/projects/[id]/route.ts b/app/api/projects/[id]/route.ts
new file mode 100644
index 0000000..5d99df4
--- /dev/null
+++ b/app/api/projects/[id]/route.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+ return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+export async function DELETE(
+ _req: Request,
+ ctx: { params: Promise<{ id: string }> }
+) {
+ const session = await auth();
+ const email = session?.user?.email;
+ if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+ const { id } = await ctx.params;
+ const res = await fetch(
+ `${API_URL}/v1/internal/projects/${encodeURIComponent(id)}?email=${encodeURIComponent(email)}`,
+ { method: "DELETE", headers: { "x-internal-token": internalToken() }, cache: "no-store" }
+ );
+ return new NextResponse(null, { status: res.ok ? 204 : res.status });
+}
diff --git a/app/api/projects/route.ts b/app/api/projects/route.ts
new file mode 100644
index 0000000..6a36a51
--- /dev/null
+++ b/app/api/projects/route.ts
@@ -0,0 +1,44 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+// BFF: dashboard → here (session-authed) → backend internal endpoints (token-authed).
+// The browser never sees the internal token or a project API key.
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+ return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+export async function GET() {
+ const session = await auth();
+ const email = session?.user?.email;
+ if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+ const res = await fetch(
+ `${API_URL}/v1/internal/projects?email=${encodeURIComponent(email)}`,
+ { headers: { "x-internal-token": internalToken() }, cache: "no-store" }
+ );
+ if (!res.ok) return NextResponse.json({ error: "backend_error" }, { status: 502 });
+ return NextResponse.json(await res.json());
+}
+
+export async function POST(req: Request) {
+ const session = await auth();
+ const email = session?.user?.email;
+ if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+ const body = await req.json().catch(() => ({}));
+ const name = String(body?.name ?? "").trim();
+ if (name.length < 2) {
+ return NextResponse.json({ error: "invalid_name" }, { status: 422 });
+ }
+
+ const res = await fetch(`${API_URL}/v1/internal/projects`, {
+ method: "POST",
+ headers: { "content-type": "application/json", "x-internal-token": internalToken() },
+ body: JSON.stringify({ email, name }),
+ cache: "no-store",
+ });
+ const data = await res.json().catch(() => ({}));
+ return NextResponse.json(data, { status: res.status });
+}
diff --git a/app/api/realtime-token/route.ts b/app/api/realtime-token/route.ts
new file mode 100644
index 0000000..805275f
--- /dev/null
+++ b/app/api/realtime-token/route.ts
@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+// Mints a short-lived, project-scoped realtime token for the browser's
+// Socket.io / SSE connections — only after verifying the signed-in user is a
+// member of the requested project. The browser never holds an API key.
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+ return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+export async function GET(req: Request) {
+ const session = await auth();
+ const email = session?.user?.email;
+ if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+ const project = new URL(req.url).searchParams.get("project");
+ if (!project) return NextResponse.json({ error: "missing_project" }, { status: 400 });
+ if (!session.projectIds?.includes(project)) {
+ return NextResponse.json({ error: "forbidden" }, { status: 403 });
+ }
+
+ const res = await fetch(`${API_URL}/v1/internal/realtime-token`, {
+ method: "POST",
+ headers: { "content-type": "application/json", "x-internal-token": internalToken() },
+ body: JSON.stringify({ project_id: project }),
+ cache: "no-store",
+ });
+ const data = await res.json().catch(() => ({}));
+ return NextResponse.json(data, { status: res.status });
+}
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index 6dcec9a..7cf301e 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -2,12 +2,11 @@
import { signIn } from "next-auth/react";
import { useSearchParams } from "next/navigation";
-import { useState } from "react";
+import { Suspense, useState } from "react";
import { LiveboardIcon } from "@/components/logo";
const hasGoogle =
Boolean(process.env.NEXT_PUBLIC_GOOGLE_ENABLED) ||
- // fallback: let the server tell us via the error message
false;
const isDev = process.env.NODE_ENV !== "production";
@@ -20,7 +19,7 @@ const ERROR_MESSAGES: Record = {
Configuration: "Auth is not fully configured yet.",
};
-export default function SignInPage() {
+function SignInForm() {
const searchParams = useSearchParams();
const callbackUrl = searchParams.get("callbackUrl") ?? "/overview";
const error = searchParams.get("error");
@@ -139,6 +138,14 @@ export default function SignInPage() {
);
}
+export default function SignInPage() {
+ return (
+ }>
+
+
+ );
+}
+
function GoogleIcon() {
return (