feat: token auto-refresh, studio→render wiring, admin panel (nodes + render queue)
Token auto-refresh (middleware): - Proactively refresh fr_access when < 120s remain — no more silent 15-min kick - Inlines /v1/auth/refresh call in middleware, stamps new cookies on response - /admin/* protected: is_admin JWT claim required, else redirect /dashboard - apiFetch() (src/lib/api/fetch.ts): client-side 401 → auto-refresh → retry; de-duplicates concurrent refresh calls; redirects to /auth on failure Studio → Render V2 wiring: - scenes[] no longer sent to POST /api/render (V2 render-svc fetches project from Studio service via saved_project_id directly) - renderRequestSchema.scenes is now optional - RenderModal uses apiFetch for auto-refresh on 401 during polling Admin panel (/admin/*): - Admin layout: server-side is_admin guard + top nav (Nodes, Render Queue) - /admin/nodes: lists all nodes from GET /v1/nodes with status badges, heartbeat age, slot usage, tags; Drain (PATCH status=Draining) + Release actions - /admin/renders: render job table with step filter tabs; progress bars, error messages, Retry + Cancel per-row actions; polls GET /v1/renders - API proxy routes: /api/admin/nodes/:id/drain|release, /api/admin/renders/:id/retry|cancel — all validate is_admin in JWT before proxying Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -0,0 +1,44 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
import { getCurrentUser } from "@/lib/auth/session";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const user = await getCurrentUser();
|
||||
if (!user || !user.is_admin) {
|
||||
redirect("/dashboard");
|
||||
}
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0c0e1a] text-gray-200">
|
||||
<nav className="border-b border-[#1e2235] bg-[#0f1120] px-6 py-3">
|
||||
<div className="mx-auto flex max-w-7xl items-center gap-6">
|
||||
<span className="text-sm font-semibold text-white">FlatRender Admin</span>
|
||||
<a
|
||||
href="/admin/nodes"
|
||||
className="text-sm text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
Nodes
|
||||
</a>
|
||||
<a
|
||||
href="/admin/renders"
|
||||
className="text-sm text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
Render Queue
|
||||
</a>
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="ml-auto text-xs text-gray-500 hover:text-gray-300 transition-colors"
|
||||
>
|
||||
← Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main className="mx-auto max-w-7xl px-6 py-8">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { adminGet } from "@/lib/api/admin-gateway";
|
||||
import { NodesTable } from "@/components/admin/NodesTable";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const revalidate = 0;
|
||||
|
||||
interface V2Node {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "Online" | "Busy" | "Offline" | "Draining";
|
||||
last_heartbeat: string;
|
||||
active_job_id: string | null;
|
||||
slots_total: number;
|
||||
slots_used: number;
|
||||
version: string | null;
|
||||
tags: string[] | null;
|
||||
}
|
||||
|
||||
interface V2NodeList {
|
||||
items: V2Node[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export default async function AdminNodesPage() {
|
||||
const data = await adminGet<V2NodeList>("/v1/nodes?pageSize=100");
|
||||
const nodes = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-white">Render Nodes</h1>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
{nodes.length} node{nodes.length !== 1 ? "s" : ""} registered
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<NodesTable nodes={nodes} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function AdminRootPage() {
|
||||
redirect("/admin/nodes");
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { adminGet } from "@/lib/api/admin-gateway";
|
||||
import { RenderQueueTable } from "@/components/admin/RenderQueueTable";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const revalidate = 0;
|
||||
|
||||
export type V2RenderJob = {
|
||||
id: string;
|
||||
saved_project_id: string;
|
||||
user_id: string;
|
||||
status: string;
|
||||
step: string;
|
||||
progress: number;
|
||||
quality: string;
|
||||
resolution: string;
|
||||
frame_rate: number;
|
||||
node_id: string | null;
|
||||
error_message: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
interface V2RenderList {
|
||||
items: V2RenderJob[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export default async function AdminRendersPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: { step?: string };
|
||||
}) {
|
||||
const step = searchParams.step ?? "";
|
||||
const qs = step ? `?step=${step}&pageSize=50` : "?pageSize=50";
|
||||
const data = await adminGet<V2RenderList>(`/v1/renders${qs}`);
|
||||
const jobs = data?.items ?? [];
|
||||
const total = data?.total ?? 0;
|
||||
|
||||
const steps = ["Queued", "Preparing", "Rendering", "Uploading", "Done", "Failed", "Cancelled"];
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold text-white">Render Queue</h1>
|
||||
<p className="mt-1 text-sm text-gray-500">{total} total jobs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step filter tabs */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<a
|
||||
href="/admin/renders"
|
||||
className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
|
||||
!step
|
||||
? "border-primary-500 bg-primary-600/20 text-white"
|
||||
: "border-[#1e2235] text-gray-400 hover:text-white hover:border-[#2a3050]"
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</a>
|
||||
{steps.map((s) => (
|
||||
<a
|
||||
key={s}
|
||||
href={`/admin/renders?step=${s}`}
|
||||
className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${
|
||||
step === s
|
||||
? "border-primary-500 bg-primary-600/20 text-white"
|
||||
: "border-[#1e2235] text-gray-400 hover:text-white hover:border-[#2a3050]"
|
||||
}`}
|
||||
>
|
||||
{s}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<RenderQueueTable jobs={jobs} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* Shared helper for admin action proxy routes.
|
||||
* Validates the caller is an admin (checks is_admin in the JWT), then
|
||||
* proxies the action to the V2 gateway.
|
||||
*/
|
||||
import { type NextRequest, NextResponse } from "next/server";
|
||||
import { gatewayUrl } from "@/lib/api/gateway";
|
||||
import { getAccessToken } from "@/lib/auth/session";
|
||||
import { decodeJwt } from "@/lib/auth/jwt";
|
||||
|
||||
export async function adminProxy(
|
||||
_req: NextRequest,
|
||||
gatewayPath: string,
|
||||
method: string = "POST"
|
||||
): Promise<NextResponse> {
|
||||
const token = await getAccessToken();
|
||||
if (!token) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
// Quick admin check on the server side before forwarding
|
||||
const claims = decodeJwt(token);
|
||||
const isAdmin =
|
||||
String(claims?.is_admin) === "true" ||
|
||||
claims?.is_admin === true ||
|
||||
String(claims?.is_tenant_admin) === "true";
|
||||
|
||||
if (!isAdmin) {
|
||||
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
|
||||
}
|
||||
|
||||
const res = await fetch(gatewayUrl(gatewayPath), {
|
||||
method,
|
||||
cache: "no-store",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null) as { message?: string } | null;
|
||||
return NextResponse.json(
|
||||
{ error: err?.message ?? "Gateway error" },
|
||||
{ status: res.status }
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// "Drain" sets node status to Draining via PATCH so it finishes its current
|
||||
// job but won't accept new ones.
|
||||
import { type NextRequest, NextResponse } from "next/server";
|
||||
import { gatewayUrl } from "@/lib/api/gateway";
|
||||
import { getAccessToken } from "@/lib/auth/session";
|
||||
import { decodeJwt } from "@/lib/auth/jwt";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
interface Ctx { params: { nodeId: string } }
|
||||
|
||||
export async function POST(_req: NextRequest, { params }: Ctx) {
|
||||
const token = await getAccessToken();
|
||||
if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
const claims = decodeJwt(token);
|
||||
const isAdmin = String(claims?.is_admin) === "true" || claims?.is_admin === true;
|
||||
if (!isAdmin) return NextResponse.json({ error: "Forbidden" }, { status: 403 });
|
||||
|
||||
const res = await fetch(gatewayUrl(`/v1/nodes/${params.nodeId}`), {
|
||||
method: "PATCH",
|
||||
cache: "no-store",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ status: "Draining" }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => null) as { message?: string } | null;
|
||||
return NextResponse.json({ error: err?.message ?? "Gateway error" }, { status: res.status });
|
||||
}
|
||||
return NextResponse.json({ ok: true });
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { type NextRequest } from "next/server";
|
||||
import { adminProxy } from "@/app/api/admin/_adminProxy";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
interface Ctx { params: { nodeId: string } }
|
||||
|
||||
export async function POST(req: NextRequest, { params }: Ctx) {
|
||||
return adminProxy(req, `/v1/nodes/${params.nodeId}/release`);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { type NextRequest } from "next/server";
|
||||
import { adminProxy } from "@/app/api/admin/_adminProxy";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
interface Ctx { params: { jobId: string } }
|
||||
|
||||
export async function POST(req: NextRequest, { params }: Ctx) {
|
||||
return adminProxy(req, `/v1/renders/${params.jobId}/cancel`);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { type NextRequest } from "next/server";
|
||||
import { adminProxy } from "@/app/api/admin/_adminProxy";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
interface Ctx { params: { jobId: string } }
|
||||
|
||||
export async function POST(req: NextRequest, { params }: Ctx) {
|
||||
return adminProxy(req, `/v1/renders/${params.jobId}/retry`);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { apiFetch } from "@/lib/api/fetch";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
interface V2Node {
|
||||
id: string;
|
||||
name: string;
|
||||
status: "Online" | "Busy" | "Offline" | "Draining";
|
||||
last_heartbeat: string;
|
||||
active_job_id: string | null;
|
||||
slots_total: number;
|
||||
slots_used: number;
|
||||
version: string | null;
|
||||
tags: string[] | null;
|
||||
}
|
||||
|
||||
const STATUS_COLORS: Record<V2Node["status"], string> = {
|
||||
Online: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
|
||||
Busy: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
Offline: "bg-gray-500/20 text-gray-400 border-gray-500/30",
|
||||
Draining: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
|
||||
};
|
||||
|
||||
function heartbeatAge(iso: string): string {
|
||||
const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
|
||||
if (diff < 60) return `${diff}s ago`;
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
return `${Math.floor(diff / 3600)}h ago`;
|
||||
}
|
||||
|
||||
export function NodesTable({ nodes }: { nodes: V2Node[] }) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState<Record<string, boolean>>({});
|
||||
|
||||
const action = async (nodeId: string, endpoint: string) => {
|
||||
setLoading((p) => ({ ...p, [nodeId]: true }));
|
||||
try {
|
||||
await apiFetch(`/api/admin/nodes/${nodeId}/${endpoint}`, { method: "POST" });
|
||||
router.refresh();
|
||||
} finally {
|
||||
setLoading((p) => ({ ...p, [nodeId]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
if (nodes.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
|
||||
No nodes registered. Start the node agent on a render machine to see it here.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-[#1e2235]">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
<th className="px-4 py-3">Node</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<th className="px-4 py-3">Slots</th>
|
||||
<th className="px-4 py-3">Heartbeat</th>
|
||||
<th className="px-4 py-3">Active Job</th>
|
||||
<th className="px-4 py-3">Tags</th>
|
||||
<th className="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
|
||||
{nodes.map((node) => (
|
||||
<tr key={node.id} className="hover:bg-[#0f1120]/60 transition-colors">
|
||||
<td className="px-4 py-3">
|
||||
<div className="font-medium text-white">{node.name}</div>
|
||||
<div className="text-[11px] text-gray-600 font-mono mt-0.5">{node.id.slice(0, 8)}…</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${STATUS_COLORS[node.status]}`}>
|
||||
{node.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 tabular-nums text-gray-300">
|
||||
{node.slots_used} / {node.slots_total}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-400">
|
||||
{heartbeatAge(node.last_heartbeat)}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-500">
|
||||
{node.active_job_id ? node.active_job_id.slice(0, 12) + "…" : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(node.tags ?? []).map((t) => (
|
||||
<span key={t} className="rounded bg-[#1e2235] px-1.5 py-0.5 text-[10px] text-gray-400">
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => action(node.id, "drain")}
|
||||
disabled={loading[node.id] || node.status === "Offline"}
|
||||
className="rounded px-2.5 py-1 text-xs text-yellow-300 border border-yellow-500/30 hover:bg-yellow-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Drain
|
||||
</button>
|
||||
<button
|
||||
onClick={() => action(node.id, "release")}
|
||||
disabled={loading[node.id]}
|
||||
className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Release
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { apiFetch } from "@/lib/api/fetch";
|
||||
import type { V2RenderJob } from "@/app/[locale]/admin/renders/page";
|
||||
|
||||
const STEP_COLORS: Record<string, string> = {
|
||||
Queued: "bg-gray-500/20 text-gray-400 border-gray-500/30",
|
||||
Preparing: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
TemplateCache:"bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
JsxGen: "bg-blue-500/20 text-blue-300 border-blue-500/30",
|
||||
Music: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
Rendering: "bg-indigo-500/20 text-indigo-300 border-indigo-500/30",
|
||||
Validating: "bg-cyan-500/20 text-cyan-300 border-cyan-500/30",
|
||||
Repairing: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
|
||||
Optimisation: "bg-teal-500/20 text-teal-300 border-teal-500/30",
|
||||
Video: "bg-indigo-500/20 text-indigo-300 border-indigo-500/30",
|
||||
Mixing: "bg-purple-500/20 text-purple-300 border-purple-500/30",
|
||||
Final: "bg-teal-500/20 text-teal-300 border-teal-500/30",
|
||||
Uploading: "bg-sky-500/20 text-sky-300 border-sky-500/30",
|
||||
Done: "bg-emerald-500/20 text-emerald-300 border-emerald-500/30",
|
||||
Failed: "bg-red-500/20 text-red-300 border-red-500/30",
|
||||
Cancelled: "bg-gray-500/20 text-gray-500 border-gray-500/20",
|
||||
};
|
||||
|
||||
function relativeTime(iso: string): string {
|
||||
const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
|
||||
if (diff < 60) return `${diff}s ago`;
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
return `${Math.floor(diff / 86400)}d ago`;
|
||||
}
|
||||
|
||||
export function RenderQueueTable({ jobs }: { jobs: V2RenderJob[] }) {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState<Record<string, boolean>>({});
|
||||
|
||||
const retryJob = async (jobId: string) => {
|
||||
setLoading((p) => ({ ...p, [jobId]: true }));
|
||||
try {
|
||||
await apiFetch(`/api/admin/renders/${jobId}/retry`, { method: "POST" });
|
||||
router.refresh();
|
||||
} finally {
|
||||
setLoading((p) => ({ ...p, [jobId]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
const cancelJob = async (jobId: string) => {
|
||||
setLoading((p) => ({ ...p, [jobId]: true }));
|
||||
try {
|
||||
await apiFetch(`/api/admin/renders/${jobId}/cancel`, { method: "POST" });
|
||||
router.refresh();
|
||||
} finally {
|
||||
setLoading((p) => ({ ...p, [jobId]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
if (jobs.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-[#1e2235] bg-[#0f1120] px-6 py-16 text-center text-sm text-gray-500">
|
||||
No render jobs found for the selected filter.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-[#1e2235]">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-[#1e2235] bg-[#0f1120] text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
<th className="px-4 py-3">Job ID</th>
|
||||
<th className="px-4 py-3">Project</th>
|
||||
<th className="px-4 py-3">Step</th>
|
||||
<th className="px-4 py-3">Progress</th>
|
||||
<th className="px-4 py-3">Quality</th>
|
||||
<th className="px-4 py-3">Node</th>
|
||||
<th className="px-4 py-3">Created</th>
|
||||
<th className="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#1e2235] bg-[#0c0e1a]">
|
||||
{jobs.map((job) => {
|
||||
const stepColor = STEP_COLORS[job.step] ?? STEP_COLORS.Queued;
|
||||
const canRetry = job.step === "Failed" || job.step === "Cancelled";
|
||||
const canCancel = !["Done", "Failed", "Cancelled"].includes(job.step);
|
||||
|
||||
return (
|
||||
<tr key={job.id} className="hover:bg-[#0f1120]/60 transition-colors">
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-400">
|
||||
{job.id.slice(0, 12)}…
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-500">
|
||||
{job.saved_project_id.slice(0, 12)}…
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${stepColor}`}>
|
||||
{job.step}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-1.5 w-20 overflow-hidden rounded-full bg-[#1e2235]">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary-600"
|
||||
style={{ width: `${job.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="tabular-nums text-[11px] text-gray-500">
|
||||
{job.progress}%
|
||||
</span>
|
||||
</div>
|
||||
{job.error_message && (
|
||||
<p className="mt-0.5 text-[10px] text-red-400 max-w-[200px] truncate" title={job.error_message}>
|
||||
{job.error_message}
|
||||
</p>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-400 text-xs">
|
||||
{job.quality} / {job.resolution}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-mono text-[11px] text-gray-500">
|
||||
{job.node_id ? job.node_id.slice(0, 8) + "…" : "—"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-gray-500 text-xs">
|
||||
{relativeTime(job.created_at)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex gap-2">
|
||||
{canRetry && (
|
||||
<button
|
||||
onClick={() => retryJob(job.id)}
|
||||
disabled={loading[job.id]}
|
||||
className="rounded px-2.5 py-1 text-xs text-emerald-300 border border-emerald-500/30 hover:bg-emerald-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
)}
|
||||
{canCancel && (
|
||||
<button
|
||||
onClick={() => cancelJob(job.id)}
|
||||
disabled={loading[job.id]}
|
||||
className="rounded px-2.5 py-1 text-xs text-red-300 border border-red-500/30 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Download, Link2, Loader2, RefreshCw } from "lucide-react";
|
||||
|
||||
import { apiFetch } from "@/lib/api/fetch";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@@ -86,7 +88,7 @@ export function RenderModal({
|
||||
|
||||
const poll = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/render/${jobId}/status`);
|
||||
const response = await apiFetch(`/api/render/${jobId}/status`);
|
||||
const data = (await response.json()) as StatusResponse;
|
||||
|
||||
if (!response.ok) {
|
||||
@@ -128,12 +130,11 @@ export function RenderModal({
|
||||
setErrorMessage(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/render", {
|
||||
const response = await apiFetch("/api/render", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
projectId,
|
||||
scenes,
|
||||
settings: {
|
||||
resolution,
|
||||
format: "mp4" as const,
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* Server-side helpers for admin API calls that go through the V2 gateway.
|
||||
* These use the current user's access token (is_admin check is done in layout).
|
||||
*/
|
||||
import { getAccessToken } from "@/lib/auth/session";
|
||||
import { gatewayUrl } from "@/lib/api/gateway";
|
||||
|
||||
export async function adminFetch(path: string, init?: RequestInit): Promise<Response> {
|
||||
const token = await getAccessToken();
|
||||
return fetch(gatewayUrl(path), {
|
||||
...init,
|
||||
cache: "no-store",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function adminGet<T>(path: string): Promise<T | null> {
|
||||
const res = await adminFetch(path);
|
||||
if (!res.ok) return null;
|
||||
return res.json().catch(() => null) as Promise<T | null>;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Client-side fetch wrapper that transparently handles 401 responses by
|
||||
* attempting one token refresh, then retrying the original request.
|
||||
*
|
||||
* Usage: replace `fetch(...)` with `apiFetch(...)` everywhere in client
|
||||
* components that call internal Next.js API routes (/api/*).
|
||||
*
|
||||
* If the refresh also fails the user is redirected to /auth.
|
||||
*/
|
||||
|
||||
let refreshing: Promise<boolean> | null = null;
|
||||
|
||||
async function doRefresh(): Promise<boolean> {
|
||||
try {
|
||||
const res = await fetch("/api/auth/refresh", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
});
|
||||
return res.ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/** Deduplicated refresh — at most one in-flight at a time. */
|
||||
async function refreshOnce(): Promise<boolean> {
|
||||
if (!refreshing) {
|
||||
refreshing = doRefresh().finally(() => {
|
||||
refreshing = null;
|
||||
});
|
||||
}
|
||||
return refreshing;
|
||||
}
|
||||
|
||||
export async function apiFetch(
|
||||
input: RequestInfo | URL,
|
||||
init?: RequestInit
|
||||
): Promise<Response> {
|
||||
const res = await fetch(input, { credentials: "same-origin", ...init });
|
||||
|
||||
if (res.status !== 401) return res;
|
||||
|
||||
// Try refreshing the token once
|
||||
const refreshed = await refreshOnce();
|
||||
if (!refreshed) {
|
||||
// Session is truly dead — redirect to login
|
||||
const next = encodeURIComponent(window.location.pathname + window.location.search);
|
||||
window.location.href = `/auth?next=${next}`;
|
||||
// Return the original 401 so callers don't hang
|
||||
return res;
|
||||
}
|
||||
|
||||
// Retry the original request with the new cookie
|
||||
return fetch(input, { credentials: "same-origin", ...init });
|
||||
}
|
||||
@@ -29,7 +29,9 @@ export const renderSettingsSchema = z.object({
|
||||
|
||||
export const renderRequestSchema = z.object({
|
||||
projectId: z.string().min(1),
|
||||
scenes: z.array(sceneSchema).min(1),
|
||||
// scenes is no longer sent to the server — V2 render service fetches the
|
||||
// project directly from the Studio service via saved_project_id.
|
||||
scenes: z.array(sceneSchema).optional(),
|
||||
settings: renderSettingsSchema,
|
||||
});
|
||||
|
||||
|
||||
+108
-14
@@ -2,41 +2,135 @@ import { type NextRequest, NextResponse } from "next/server";
|
||||
import createIntlMiddleware from "next-intl/middleware";
|
||||
|
||||
import { routing } from "@/i18n/routing";
|
||||
import { ACCESS_TOKEN_COOKIE } from "@/lib/auth/constants";
|
||||
import {
|
||||
ACCESS_TOKEN_COOKIE,
|
||||
REFRESH_TOKEN_COOKIE,
|
||||
} from "@/lib/auth/constants";
|
||||
import { decodeJwt, isJwtExpired } from "@/lib/auth/jwt";
|
||||
|
||||
const handleI18n = createIntlMiddleware(routing);
|
||||
|
||||
// Routes that require an authenticated Identity session (optionally /en/-prefixed).
|
||||
const PROTECTED = /^\/(?:en\/)?(?:dashboard|studio)(?:\/|$)/;
|
||||
// Routes that require an authenticated Identity session.
|
||||
const PROTECTED = /^\/(?:en\/)?(?:dashboard|studio|admin)(?:\/|$)/;
|
||||
// Admin-only routes.
|
||||
const ADMIN_ONLY = /^\/(?:en\/)?admin(?:\/|$)/;
|
||||
|
||||
// Proactively refresh the access token when fewer than 120 s remain.
|
||||
const REFRESH_BEFORE_EXPIRY_S = 120;
|
||||
|
||||
async function tryRefreshToken(
|
||||
request: NextRequest
|
||||
): Promise<{ accessToken: string; refreshToken: string; expiresIn: number } | null> {
|
||||
const refreshToken = request.cookies.get(REFRESH_TOKEN_COOKIE)?.value;
|
||||
if (!refreshToken) return null;
|
||||
|
||||
const gatewayUrl = (
|
||||
process.env.API_GATEWAY_URL ?? "http://localhost:8088"
|
||||
).replace(/\/$/, "");
|
||||
|
||||
try {
|
||||
const res = await fetch(`${gatewayUrl}/v1/auth/refresh`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ refresh_token: refreshToken }),
|
||||
// Never cache refresh calls.
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return null;
|
||||
const data = await res.json().catch(() => null);
|
||||
if (!data?.access_token || !data?.refresh_token) return null;
|
||||
return {
|
||||
accessToken: data.access_token as string,
|
||||
refreshToken: data.refresh_token as string,
|
||||
expiresIn: (data.expires_in as number) ?? 900,
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function applyNewTokens(
|
||||
response: NextResponse,
|
||||
accessToken: string,
|
||||
refreshToken: string,
|
||||
expiresIn: number
|
||||
): NextResponse {
|
||||
const secure = process.env.NODE_ENV === "production";
|
||||
const base = { httpOnly: true, sameSite: "lax" as const, secure, path: "/" };
|
||||
response.cookies.set(ACCESS_TOKEN_COOKIE, accessToken, {
|
||||
...base,
|
||||
maxAge: expiresIn,
|
||||
});
|
||||
response.cookies.set(REFRESH_TOKEN_COOKIE, refreshToken, {
|
||||
...base,
|
||||
maxAge: 60 * 60 * 24 * 30,
|
||||
});
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function middleware(request: NextRequest) {
|
||||
// 1. Locale detection / redirect (next-intl)
|
||||
const i18nResponse = handleI18n(request);
|
||||
if (
|
||||
i18nResponse.status !== 200 ||
|
||||
i18nResponse.headers.has("location")
|
||||
) {
|
||||
if (i18nResponse.status !== 200 || i18nResponse.headers.has("location")) {
|
||||
return i18nResponse;
|
||||
}
|
||||
|
||||
// 2. Auth guard for protected sections
|
||||
const { pathname } = request.nextUrl;
|
||||
if (PROTECTED.test(pathname)) {
|
||||
const token = request.cookies.get(ACCESS_TOKEN_COOKIE)?.value;
|
||||
if (!token || isJwtExpired(decodeJwt(token))) {
|
||||
if (!PROTECTED.test(pathname)) return i18nResponse;
|
||||
|
||||
// 2. Read the current access token
|
||||
let accessToken = request.cookies.get(ACCESS_TOKEN_COOKIE)?.value ?? null;
|
||||
let claims = decodeJwt(accessToken ?? "");
|
||||
let newTokens: Awaited<ReturnType<typeof tryRefreshToken>> = null;
|
||||
|
||||
// 3. Proactively refresh when token is about to expire (< 120 s left)
|
||||
if (
|
||||
accessToken &&
|
||||
claims?.exp &&
|
||||
claims.exp - Date.now() / 1000 < REFRESH_BEFORE_EXPIRY_S
|
||||
) {
|
||||
newTokens = await tryRefreshToken(request);
|
||||
if (newTokens) {
|
||||
accessToken = newTokens.accessToken;
|
||||
claims = decodeJwt(accessToken);
|
||||
}
|
||||
}
|
||||
|
||||
// 4. If token is missing or expired (and refresh failed), redirect to login
|
||||
if (!accessToken || isJwtExpired(claims)) {
|
||||
const url = request.nextUrl.clone();
|
||||
url.pathname = pathname.startsWith("/en") ? "/en/auth" : "/auth";
|
||||
url.searchParams.set("next", pathname);
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
// 5. Admin guard — is_admin must be truthy
|
||||
if (ADMIN_ONLY.test(pathname)) {
|
||||
const isAdmin =
|
||||
String(claims?.is_admin) === "true" ||
|
||||
claims?.is_admin === true ||
|
||||
String(claims?.is_tenant_admin) === "true";
|
||||
if (!isAdmin) {
|
||||
const url = request.nextUrl.clone();
|
||||
url.pathname = pathname.startsWith("/en") ? "/en/auth" : "/auth";
|
||||
url.searchParams.set("next", pathname);
|
||||
url.pathname = pathname.startsWith("/en") ? "/en/dashboard" : "/dashboard";
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
}
|
||||
|
||||
// 6. Stamp fresh cookies onto the response if we refreshed
|
||||
if (newTokens) {
|
||||
return applyNewTokens(
|
||||
i18nResponse,
|
||||
newTokens.accessToken,
|
||||
newTokens.refreshToken,
|
||||
newTokens.expiresIn
|
||||
);
|
||||
}
|
||||
|
||||
return i18nResponse;
|
||||
}
|
||||
|
||||
export const config = {
|
||||
// Match all routes except api, _next, static assets
|
||||
matcher: [
|
||||
"/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user