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>

src/app/[locale]/admin/layout.tsx

@@ -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>
+  );
+}

src/app/[locale]/admin/nodes/page.tsx

@@ -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>
+  );
+}

src/app/[locale]/admin/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AdminRootPage() {
+  redirect("/admin/nodes");
+}

src/app/[locale]/admin/renders/page.tsx

@@ -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>
+  );
+}

src/app/api/admin/_adminProxy.ts

@@ -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 });
+}

src/app/api/admin/nodes/[nodeId]/drain/route.ts

@@ -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 });
+}

src/app/api/admin/nodes/[nodeId]/release/route.ts

@@ -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`);
+}

src/app/api/admin/renders/[jobId]/cancel/route.ts

@@ -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`);
+}

src/app/api/admin/renders/[jobId]/retry/route.ts

@@ -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`);
+}

src/components/admin/NodesTable.tsx

@@ -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>
+  );
+}

src/components/admin/RenderQueueTable.tsx

@@ -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>
+  );
+}

src/components/studio/RenderModal.tsx

@@ -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,

src/lib/api/admin-gateway.ts

@@ -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>;
+}

src/lib/api/fetch.ts

@@ -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 });
+}

src/lib/render-schemas.ts

@@ -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,
 });
 

src/middleware.ts

@@ -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).
+// Routes that require an authenticated Identity session.
-const PROTECTED = /^\/(?:en\/)?(?:dashboard|studio)(?:\/|$)/;
+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 (
+  if (i18nResponse.status !== 200 || i18nResponse.headers.has("location")) {
-    i18nResponse.status !== 200 ||
-    i18nResponse.headers.has("location")
-  ) {
     return i18nResponse;
   }
 
-  // 2. Auth guard for protected sections
   const { pathname } = request.nextUrl;
-  if (PROTECTED.test(pathname)) {
+  if (!PROTECTED.test(pathname)) return i18nResponse;
-    const token = request.cookies.get(ACCESS_TOKEN_COOKIE)?.value;
+
-    if (!token || isJwtExpired(decodeJwt(token))) {
+  // 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.pathname = pathname.startsWith("/en") ? "/en/dashboard" : "/dashboard";
-      url.searchParams.set("next", pathname);
       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)$).*)",
   ],