feat: Implement text-to-video and fix hydration UI issues

src/components/project/render-progress.tsx

@@ -16,12 +16,41 @@ const STAGE_DETAILS: Record<string, { label: string; icon: string; color: string
 
 interface RenderProgressProps {
   renderState: RenderProgressState;
+  projectStatus?: string;
 }
 
-export function RenderProgress({ renderState }: RenderProgressProps) {
+export function RenderProgress({ renderState, projectStatus }: RenderProgressProps) {
   const { progress, stage, stageLabel, currentScene, totalScenes, eta, status, isConnected } = renderState;
 
-  if (status === 'idle') return null;
+  if (status === 'idle') {
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="card-surface p-5 md:p-6"
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2.5">
+            <Loader2 size={18} className="animate-spin text-amber-400" />
+            <h3 className="text-sm font-semibold text-[var(--color-text-primary)]">
+              {projectStatus === 'GENERATING_SCRIPT' ? 'AI Senaryo Üretiyor...' : 'İşlem kuyrukta veya başlatılıyor...'}
+            </h3>
+          </div>
+          <div className="flex items-center gap-1.5">
+            {isConnected ? (
+              <Wifi size={13} className="text-emerald-400" />
+            ) : (
+              <WifiOff size={13} className="text-red-400" />
+            )}
+            <span className="text-[10px] text-[var(--color-text-ghost)]">
+              {isConnected ? 'Canlı' : 'Bağlantı koptu'}
+            </span>
+          </div>
+        </div>
+      </motion.div>
+    );
+  }
+
 
   return (
     <motion.div