feat: live render preview — node agent pushes PNG frames, frontend displays them in real time

render-svc:
- db.UpdateJobPreview(): writes base64 PNG to render_jobs.image_preview_b64
  (only on active jobs; Done/Failed/Cancelled rows ignored)
- POST /v1/internal/render/jobs/:job_id/preview — node agent endpoint
- Route registered under /v1/internal (nodeAuth)

node-agent:
- runner.PreviewFn callback type alongside ProgressFn
- runner.preview.go: GeneratePreviewB64(percent, quality, resolution)
  — pure stdlib (image/png + encoding/base64), no external deps
  — 320×180 dark frame with animated progress bar + colored indicator dots
- mock render: pushes a preview frame at every step (5→95%)
- real AE render: pushes a preview frame every 30s
- client.UpdatePreview(): POST /v1/internal/render/jobs/:job_id/preview
- main.go: onPreview callback wires client.UpdatePreview() into runner.Run()

frontend:
- render-jobs.ts: RenderJobRow.preview_b64 field; read from progress endpoint
- status/route.ts: previewB64 included in JSON response
- RenderModal: aspect-ratio preview pane during polling — shows spinner until
  first frame arrives, then live-updates with each poll (every 3s);
  step label overlaid as badge bottom-right

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/studio/RenderModal.tsx

@@ -33,6 +33,8 @@ interface StatusResponse {
   outputUrl: string | null;
   progressMessage?: string | null;
   errorMessage?: string | null;
+  /** Base64-encoded PNG preview frame from the node agent. */
+  previewB64?: string | null;
 }
 
 const RESOLUTIONS: RenderSettings["resolution"][] = ["720p", "1080p", "4K"];
@@ -55,6 +57,7 @@ export function RenderModal({
   const [progressMessage, setProgressMessage] = useState("");
   const [outputUrl, setOutputUrl] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [previewB64, setPreviewB64] = useState<string | null>(null);
 
   const reset = useCallback(() => {
     setJobStatus("idle");
@@ -63,6 +66,7 @@ export function RenderModal({
     setProgressMessage("");
     setOutputUrl(null);
     setErrorMessage(null);
+    setPreviewB64(null);
   }, []);
 
   useEffect(() => {
@@ -95,6 +99,7 @@ export function RenderModal({
         setProgressMessage(
           data.progressMessage ?? `Rendering… ${data.progress}%`
         );
+        if (data.previewB64) setPreviewB64(data.previewB64);
 
         if (data.status === "completed" && data.outputUrl) {
           setOutputUrl(data.outputUrl);
@@ -219,9 +224,24 @@ export function RenderModal({
           </div>
         ) : isBusy ? (
           <div className="space-y-4">
-            <div className="flex items-center gap-2 text-sm text-gray-300">
-              <Loader2 className="h-4 w-4 animate-spin text-primary-400" />
-              {progressMessage || "Rendering…"}
+            {/* Live preview frame from node agent */}
+            <div className="relative overflow-hidden rounded-lg bg-[#0f111e] aspect-video">
+              {previewB64 ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={`data:image/png;base64,${previewB64}`}
+                  alt="Render preview"
+                  className="h-full w-full object-cover"
+                />
+              ) : (
+                <div className="flex h-full w-full items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-primary-400/40" />
+                </div>
+              )}
+              {/* Step badge */}
+              <div className="absolute bottom-2 right-2 rounded-md bg-black/60 px-2 py-0.5 text-[10px] font-medium text-gray-300 backdrop-blur-sm">
+                {progressMessage || "Rendering…"}
+              </div>
             </div>
             <div>
               <div className="mb-1 flex justify-between text-xs text-gray-500">