RenderPipeline2

app/(dashboard)/projects/[id]/shots/[shotId]/page.tsx

@@ -89,7 +89,7 @@ export default function ShotDetailPage() {
   const [isDuplicating, setIsDuplicating] = useState(false);
   const [isActioning, setIsActioning] = useState(false);
   const [highResDialogOpen, setHighResDialogOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState<"tasks" | "reviews" | "footage" | "settings">("tasks");
+  const [activeTab, setActiveTab] = useState<"tasks" | "reviews" | "footage" | "settings" | "exports">("tasks");
   const [editingVersion, setEditingVersion] = useState(false);
   const [versionInput, setVersionInput] = useState("");
   const [savingVersion, setSavingVersion] = useState(false);
@@ -531,6 +531,18 @@ export default function ShotDetailPage() {
             <MessageSquare className="h-4 w-4" />
             Reviews
           </button>
+          <button
+            onClick={() => setActiveTab("exports")}
+            className={cn(
+              "flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px",
+              activeTab === "exports"
+                ? "border-amber-500 text-amber-400"
+                : "border-transparent text-zinc-500 hover:text-zinc-300"
+            )}
+          >
+            <ListTodo className="h-4 w-4" />
+            Exports
+          </button>
           <button
             onClick={() => setActiveTab("footage")}
             className={cn(
@@ -658,6 +670,16 @@ export default function ShotDetailPage() {
           />
         )}
 
+        {activeTab === "exports" && (
+          <div className="rounded-lg border border-border p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium">Export history</h3>
+              <span className="text-xs text-muted-foreground">Queue API-backed entries</span>
+            </div>
+            <p className="text-sm text-muted-foreground">Exports submitted for this shot will appear here once they are queued through the new pipeline API.</p>
+          </div>
+        )}
+
         {activeTab === "settings" && canManage && (
           <ShotSettingsTab shot={shot} artists={artists} onSaved={fetchShot} />
         )}

app/(dashboard)/render-queue/page.tsx

@@ -0,0 +1,53 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { listExportsForQueue } from "@/lib/render-pipeline/exports";
+
+export const metadata = { title: "Render Queue — VFX Review" };
+
+export default async function RenderQueuePage() {
+  const session = await auth();
+  if (!session?.user) redirect("/login");
+
+  const exports = await listExportsForQueue();
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">Render Queue</h1>
+          <p className="text-sm text-muted-foreground">Queued and active exports from the pipeline.</p>
+        </div>
+      </div>
+
+      <div className="rounded-lg border border-border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-zinc-900/80 text-muted-foreground">
+            <tr>
+              <th className="px-4 py-3 text-left">Shot</th>
+              <th className="px-4 py-3 text-left">Version</th>
+              <th className="px-4 py-3 text-left">Status</th>
+              <th className="px-4 py-3 text-left">Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {exports.map((item) => (
+              <tr key={item.id} className="border-t border-border/60">
+                <td className="px-4 py-3 font-mono">{item.shot?.shotCode ?? item.shotId}</td>
+                <td className="px-4 py-3">{item.versionString}</td>
+                <td className="px-4 py-3">{item.status}</td>
+                <td className="px-4 py-3">{new Date(item.createdAt).toLocaleString()}</td>
+              </tr>
+            ))}
+            {exports.length === 0 && (
+              <tr>
+                <td colSpan={4} className="px-4 py-8 text-center text-muted-foreground">
+                  No exports queued yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/api/ext/exports/latest/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getLatestExportForShot } from "@/lib/render-pipeline/exports";
+
+function isAuthorized(req: NextRequest): boolean {
+  const apiKey = process.env.API_SECRET_KEY;
+  if (!apiKey) return false;
+  const authHeader = req.headers.get("authorization") ?? "";
+  if (authHeader.startsWith("Bearer ")) return authHeader.slice(7) === apiKey;
+  return (req.headers.get("x-api-key") ?? "") === apiKey;
+}
+
+export async function GET(req: NextRequest) {
+  if (!isAuthorized(req)) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const { searchParams } = new URL(req.url);
+  const shotId = searchParams.get("shotId");
+  if (!shotId) {
+    return NextResponse.json({ error: "shotId query param is required" }, { status: 400 });
+  }
+
+  const exportRecord = await getLatestExportForShot(shotId);
+  return NextResponse.json({ export: exportRecord });
+}

app/api/ext/exports/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { createRenderExport, listExportsForQueue } from "@/lib/render-pipeline/exports";
+
+function isAuthorized(req: NextRequest): boolean {
+  const apiKey = process.env.API_SECRET_KEY;
+  if (!apiKey) return false;
+  const authHeader = req.headers.get("authorization") ?? "";
+  if (authHeader.startsWith("Bearer ")) return authHeader.slice(7) === apiKey;
+  return (req.headers.get("x-api-key") ?? "") === apiKey;
+}
+
+const createExportSchema = z.object({
+  shotId: z.string().min(1),
+  projectId: z.string().min(1),
+  manifest: z.unknown(),
+  submittedById: z.string().optional().nullable(),
+  submittedByName: z.string().optional().nullable(),
+  taskId: z.string().optional().nullable(),
+});
+
+export async function GET(req: NextRequest) {
+  if (!isAuthorized(req)) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const exports = await listExportsForQueue();
+  return NextResponse.json({ exports });
+}
+
+export async function POST(req: NextRequest) {
+  if (!isAuthorized(req)) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    const body = await req.json();
+    const parsed = createExportSchema.parse(body);
+    const result = await createRenderExport(parsed);
+    return NextResponse.json(result, { status: 201 });
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: "Validation error", details: error.errors }, { status: 422 });
+    }
+
+    return NextResponse.json({ error: error instanceof Error ? error.message : "Failed to queue export" }, { status: 400 });
+  }
+}

app/api/render/queue/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { listExportsForQueue } from "@/lib/render-pipeline/exports";
+
+export async function GET() {
+  const session = await auth();
+  if (!session?.user) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const exports = await listExportsForQueue();
+  return NextResponse.json({ exports });
+}