feat(dashboard): "My Renders" page for users

- /dashboard/renders: user's own render jobs (live status + progress bar + cancel)
  and finished exports (thumbnail + size/duration + download); bilingual fa/en
- server lib my-renders.ts (user-scoped /v1/renders + /v1/exports via session JWT)
- user action routes: POST /api/renders/[id]/cancel, GET /api/exports/[id]/download
  (presigned URL)
- dashboard sidebar: "رندرهای من / My Renders" nav item

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

messages/en.json

@@ -663,7 +663,8 @@
       "templates": "Templates",
       "upgrade": "Upgrade",
       "settings": "Settings",
-      "navLabel": "Dashboard"
+      "navLabel": "Dashboard",
+      "myRenders": "My Renders"
     },
     "componentsDashboardDashboardTopBar": {
       "searchPlaceholder": "Search projects..."
@@ -1226,6 +1227,19 @@
       "savedAsBlog": "Saved as blog post",
       "saveError": "Could not save post",
       "mustConfigure": "Configure and enable OpenAI above before generating."
+    },
+    "componentsDashboardMyRenders": {
+      "title": "My Renders",
+      "subtitle": "Status of your renders and ready-to-download videos.",
+      "processing": "Processing",
+      "ready": "Ready to download",
+      "empty": "No renders yet.",
+      "emptyReady": "No ready videos.",
+      "cancel": "Cancel",
+      "download": "Download",
+      "confirm": "Cancel this render?",
+      "failed": "Failed",
+      "refresh": "Refresh"
     }
   }
 }

messages/fa.json

@@ -663,7 +663,8 @@
       "templates": "قالب‌ها",
       "upgrade": "ارتقا",
       "settings": "تنظیمات",
-      "navLabel": "داشبورد"
+      "navLabel": "داشبورد",
+      "myRenders": "رندرهای من"
     },
     "componentsDashboardDashboardTopBar": {
       "searchPlaceholder": "جستجوی پروژه‌ها..."
@@ -1226,6 +1227,19 @@
       "savedAsBlog": "به‌عنوان پست بلاگ ذخیره شد",
       "saveError": "ذخیره پست ناموفق بود",
       "mustConfigure": "پیش از تولید، OpenAI را در بالا پیکربندی و فعال کنید."
+    },
+    "componentsDashboardMyRenders": {
+      "title": "رندرهای من",
+      "subtitle": "وضعیت رندرها و ویدیوهای آمادهٔ شما.",
+      "processing": "در حال پردازش",
+      "ready": "آمادهٔ دانلود",
+      "empty": "هنوز رندری ندارید.",
+      "emptyReady": "ویدیوی آماده‌ای نیست.",
+      "cancel": "لغو",
+      "download": "دانلود",
+      "confirm": "این رندر لغو شود؟",
+      "failed": "ناموفق",
+      "refresh": "بروزرسانی"
     }
   }
 }

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

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+import { MyRenders } from "@/components/dashboard/MyRenders";
+import { ACTIVE_STEPS, listMyExports, listMyRenders } from "@/lib/api/my-renders";
+import { createPageMetadata } from "@/lib/metadata";
+
+export const metadata: Metadata = createPageMetadata({
+  title: "My Renders",
+  description: "Your render jobs and finished videos.",
+  path: "/dashboard/renders",
+});
+
+export const dynamic = "force-dynamic";
+
+export default async function MyRendersPage() {
+  const [allJobs, exports] = await Promise.all([listMyRenders(), listMyExports()]);
+  // Show active/failed jobs in the "processing" section; Done ones live as exports.
+  const jobs = allJobs.filter((j) => ACTIVE_STEPS.has(j.step) || j.step === "Failed");
+  return <MyRenders jobs={jobs} exports={exports} />;
+}

src/app/api/exports/[exportId]/download/route.ts

@@ -0,0 +1,19 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { gatewayUrl } from "@/lib/api/gateway";
+import { getAccessToken } from "@/lib/auth/session";
+
+export const runtime = "nodejs";
+interface Ctx { params: { exportId: string } }
+
+/** Return a short-lived presigned download URL for the caller's own export. */
+export async function GET(_req: NextRequest, { params }: Ctx) {
+  const token = await getAccessToken();
+  if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const res = await fetch(gatewayUrl(`/v1/exports/${params.exportId}/download-url`), {
+    cache: "no-store",
+    headers: { Authorization: `Bearer ${token}`, Accept: "application/json" },
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) return NextResponse.json({ error: data?.message ?? "Download failed" }, { status: res.status });
+  return NextResponse.json(data ?? {});
+}

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

@@ -0,0 +1,20 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { gatewayUrl } from "@/lib/api/gateway";
+import { getAccessToken } from "@/lib/auth/session";
+
+export const runtime = "nodejs";
+interface Ctx { params: { jobId: string } }
+
+/** Cancel the caller's own render job (user-scoped). */
+export async function POST(_req: NextRequest, { params }: Ctx) {
+  const token = await getAccessToken();
+  if (!token) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const res = await fetch(gatewayUrl(`/v1/renders/${params.jobId}/cancel`), {
+    method: "POST",
+    cache: "no-store",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) return NextResponse.json({ error: data?.message ?? "Cancel failed" }, { status: res.status });
+  return NextResponse.json(data ?? { ok: true });
+}

src/components/dashboard/DashboardSidebarNav.tsx

@@ -7,6 +7,7 @@ import {
   FolderOpen,
   LayoutTemplate,
   Settings,
+  Video,
   Zap,
 } from "lucide-react";
 
@@ -14,6 +15,7 @@ import { cn } from "@/lib/utils";
 
 const navItems = [
   { labelKey: "myProjects", href: "/dashboard", icon: FolderOpen },
+  { labelKey: "myRenders", href: "/dashboard/renders", icon: Video },
   { labelKey: "templates", href: "/templates", icon: LayoutTemplate },
   { labelKey: "upgrade", href: "/#pricing", icon: Zap },
   { labelKey: "settings", href: "/dashboard/settings", icon: Settings },

src/components/dashboard/MyRenders.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Download, Loader2, X } from "lucide-react";
+
+import { apiFetch } from "@/lib/api/fetch";
+import type { MyExport, MyRenderJob } from "@/lib/api/my-renders";
+
+function humanSize(n?: number | null): string {
+  if (!n) return "—";
+  const u = ["B", "KB", "MB", "GB"]; let i = 0, v = n;
+  while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
+  return `${v.toFixed(v < 10 && i > 0 ? 1 : 0)} ${u[i]}`;
+}
+
+export function MyRenders({ jobs, exports }: { jobs: MyRenderJob[]; exports: MyExport[] }) {
+  const t = useTranslations("auto.componentsDashboardMyRenders");
+  const router = useRouter();
+  const [busy, setBusy] = useState<string | null>(null);
+
+  const cancel = async (id: string) => {
+    if (!confirm(t("confirm"))) return;
+    setBusy(id);
+    try { await apiFetch(`/api/renders/${id}/cancel`, { method: "POST" }); router.refresh(); }
+    finally { setBusy(null); }
+  };
+
+  const download = async (id: string) => {
+    setBusy(id);
+    try {
+      const r = await apiFetch(`/api/exports/${id}/download`).then((x) => x.json()).catch(() => null);
+      if (r?.url) window.open(r.url, "_blank");
+    } finally { setBusy(null); }
+  };
+
+  const card = "rounded-xl border border-gray-100 bg-white shadow-sm";
+
+  return (
+    <div className="mx-auto w-full max-w-5xl space-y-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="font-heading text-2xl font-bold text-neutral-900">{t("title")}</h1>
+          <p className="mt-1 text-sm text-neutral-600">{t("subtitle")}</p>
+        </div>
+        <button onClick={() => router.refresh()} className="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-neutral-600 hover:bg-neutral-50">
+          {t("refresh")}
+        </button>
+      </div>
+
+      {/* Processing */}
+      <section>
+        <h2 className="mb-3 text-sm font-semibold text-neutral-700">{t("processing")}</h2>
+        {jobs.length === 0 ? (
+          <p className={`${card} px-4 py-8 text-center text-sm text-neutral-400`}>{t("empty")}</p>
+        ) : (
+          <div className="space-y-3">
+            {jobs.map((j) => {
+              const failed = j.step === "Failed";
+              const pct = Math.round(j.render_progress ?? 0);
+              return (
+                <div key={j.id} className={`${card} flex items-center gap-4 p-4`}>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-neutral-900">{j.title || j.project_name || j.name || j.id.slice(0, 8)}</p>
+                    <p className="mt-0.5 text-xs text-neutral-500">{j.quality} · {j.resolution} · {failed ? t("failed") : j.step}</p>
+                    {!failed && (
+                      <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-neutral-100">
+                        <div className="h-full rounded-full bg-primary-600 transition-all" style={{ width: `${pct}%` }} />
+                      </div>
+                    )}
+                    {failed && j.failed_message && <p className="mt-1 text-xs text-red-600">{j.failed_message}</p>}
+                  </div>
+                  <span className="text-xs tabular-nums text-neutral-500">{failed ? "" : `${pct}%`}</span>
+                  <button
+                    onClick={() => cancel(j.id)}
+                    disabled={busy === j.id}
+                    className="flex items-center gap-1 rounded-lg border border-red-200 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 disabled:opacity-50"
+                  >
+                    {busy === j.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <X className="h-3.5 w-3.5" />}
+                    {t("cancel")}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </section>
+
+      {/* Ready exports */}
+      <section>
+        <h2 className="mb-3 text-sm font-semibold text-neutral-700">{t("ready")}</h2>
+        {exports.length === 0 ? (
+          <p className={`${card} px-4 py-8 text-center text-sm text-neutral-400`}>{t("emptyReady")}</p>
+        ) : (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {exports.map((e) => (
+              <div key={e.id} className={`${card} overflow-hidden`}>
+                <div className="flex aspect-video items-center justify-center bg-neutral-100">
+                  {e.image ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img src={e.image} alt="" className="h-full w-full object-cover" />
+                  ) : (
+                    <span className="text-xs uppercase text-neutral-400">{e.file_extension ?? "video"}</span>
+                  )}
+                </div>
+                <div className="p-3">
+                  <p className="text-xs text-neutral-500">
+                    {e.render_quality} · {e.width && e.height ? `${e.width}×${e.height}` : "—"} · {humanSize(e.size_bytes)}
+                    {e.duration_sec ? ` · ${Math.round(e.duration_sec)}s` : ""}
+                  </p>
+                  <button
+                    onClick={() => download(e.id)}
+                    disabled={busy === e.id}
+                    className="mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50"
+                  >
+                    {busy === e.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
+                    {t("download")}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

src/lib/api/my-renders.ts

@@ -0,0 +1,66 @@
+/**
+ * Server-side client for the current user's render jobs + finished exports.
+ * Calls the gateway with the caller's Identity access JWT (fr_access cookie).
+ */
+import { gatewayUrl } from "@/lib/api/gateway";
+import { getAccessToken } from "@/lib/auth/session";
+
+export interface MyRenderJob {
+  id: string;
+  step: string;
+  render_progress?: number | null;
+  title?: string | null;
+  name?: string | null;
+  project_name?: string | null;
+  quality?: string | null;
+  resolution?: string | null;
+  image_preview_b64?: string | null;
+  export_id?: string | null;
+  failed_message?: string | null;
+  created_at: string;
+}
+
+export interface MyExport {
+  id: string;
+  image?: string | null;
+  file_type?: string | null;
+  file_extension?: string | null;
+  render_quality?: string | null;
+  size_bytes?: number | null;
+  duration_sec?: number | null;
+  width?: number | null;
+  height?: number | null;
+  produce_date?: string | null;
+  auto_delete_date?: string | null;
+}
+
+async function getJSON(path: string): Promise<{ data?: unknown[] } | null> {
+  const token = await getAccessToken();
+  if (!token) return null;
+  try {
+    const res = await fetch(gatewayUrl(path), {
+      headers: { Authorization: `Bearer ${token}`, Accept: "application/json" },
+      cache: "no-store",
+    });
+    if (!res.ok) return null;
+    return (await res.json()) as { data?: unknown[] };
+  } catch {
+    return null;
+  }
+}
+
+export async function listMyRenders(): Promise<MyRenderJob[]> {
+  const d = await getJSON("/v1/renders?page=1&page_size=50");
+  return (d?.data as MyRenderJob[]) ?? [];
+}
+
+export async function listMyExports(): Promise<MyExport[]> {
+  const d = await getJSON("/v1/exports?page=1&page_size=50");
+  return (d?.data as MyExport[]) ?? [];
+}
+
+/** Steps that mean the job is still running. */
+export const ACTIVE_STEPS = new Set([
+  "Queued", "Preparing", "TemplateCache", "JsxGen", "Music", "Rendering",
+  "Validating", "Repairing", "Optimisation", "Video", "Mixing", "Final", "Uploading",
+]);