Upload 79 files

.env.example

@@ -0,0 +1,31 @@
+# Server
+PORT=5000
+NODE_ENV=development
+
+# MongoDB
+MONGODB_URI=mongodb://localhost:27017/directorai
+
+# Redis
+REDIS_URL=redis://localhost:6379
+
+# JWT
+JWT_SECRET=your_jwt_secret_here
+JWT_EXPIRES_IN=7d
+
+# Antigravity CLI
+ANTIGRAVITY_CLI_PATH=antigravity
+
+# Email (Nodemailer)
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your_email@gmail.com
+SMTP_PASS=your_app_password
+
+# Stripe (payments only)
+STRIPE_SECRET_KEY=sk_test_xxx
+STRIPE_WEBHOOK_SECRET=whsec_xxx
+
+# File storage
+UPLOAD_DIR=./uploads
+GENERATED_DIR=./generated
+MAX_UPLOAD_SIZE=104857600

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+data/db/diagnostic.data/metrics.2026-03-04T05-33-55Z-00000 filter=lfs diff=lfs merge=lfs -text
+data/db/journal/WiredTigerLog.0000000001 filter=lfs diff=lfs merge=lfs -text
+data/db/journal/WiredTigerPreplog.0000000001 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,18 @@
+node_modules/
+dist/
+build/
+.env
+*.log
+uploads/
+generated/
+exports/
+.DS_Store
+Thumbs.db
+coverage/
+.vite/
+*.mjs
+vite.config.ts.timestamp-*
+data/
+*.lock
+*.wt
+WiredTiger*

README.md

@@ -0,0 +1,162 @@
+# Director.AI
+
+> **Faceless video creation platform powered by real AI CLI integration.**
+> Built with React, TypeScript, Express, MongoDB, and Socket.IO.
+
+![License](https://img.shields.io/badge/License-MIT-blue)
+![Node](https://img.shields.io/badge/Node-20+-green)
+![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)
+![React](https://img.shields.io/badge/React-18-blue)
+![Express](https://img.shields.io/badge/Express-4.18-lightgrey)
+![MongoDB](https://img.shields.io/badge/MongoDB-8-green)
+
+---
+
+## Quick Setup Tutorial
+
+Follow these steps to get Director.AI running on your local machine.
+
+### 1. Clone the Repository
+```bash
+git clone https://huggingface.co/algorembrant/1st-hackaton
+cd 1st-hackaton
+```
+
+### 2. Install MongoDB and Compass
+- **Download MongoDB Community Server**: Visit the [MongoDB Download Center](https://www.mongodb.com/try/download/community) and download the MSI installer for Windows.
+- **Install**: Run the installer and ensure "Install MongoDB as a Service" is checked.
+- **MongoDB Compass**: During installation, check the box to install MongoDB Compass (the GUI for managing your data).
+- **Verify**: Open MongoDB Compass and connect to `mongodb://localhost:27017`.
+
+### 3. Environment Configuration
+- Create a `.env` file in the root directory by copying the example:
+  ```bash
+  cp .env.example .env
+  ```
+- Open `.env` and fill in the following:
+  - `MONGODB_URI`: `mongodb://localhost:27017/director-ai`
+  - `PORT`: `5000`
+  - `JWT_SECRET`: Any random long string
+  - `REDIS_URL`: `redis://localhost:6379` (If using Redis features)
+
+  or simply just tell you AI agent to configure things for you.
+
+### 4. Install Dependencies
+```bash
+npm install
+```
+
+### 5. Running the Application
+- **Server**: `cd server && npm run dev`
+- **Client**: `cd client && npm run dev`
+- **Both**: From the root, run `npm run dev`.
+
+---
+
+## Overview
+
+Director.AI allows users to input scripts, customize voices, music, visual styles, and assets, then generate optimized faceless videos for social platforms (TikTok, Reels, Shorts, YouTube). 
+
+The application features a novel **real-time AI Terminal** that directly bridges the webapp to the **Google Antigravity CLI**, streaming output via WebSocket—no simulations, no mocks.
+
+### Key Features
+
+- **AI Terminal**: Real-time CLI bridge via WebSocket—type prompts in the webapp, get live output from the Antigravity CLI.
+- **5-Step Video Wizard**: Script, Voice, Music, Style, Assets → Generate.
+- **Multi-Platform Export**: 9:16 (TikTok/Reels/Shorts), 16:9 (YouTube), 1:1 (Instagram).
+- **JWT Authentication**: Secure register/login with bcrypt hashing.
+- **Luxury Dark Theme**: Gold accents, Playfair Display + Montserrat, glassmorphism, Framer Motion animations.
+- **Style Presets**: Save and reuse brand configurations.
+- **File Upload**: Multer with 100MB limit and file type filtering.
+- **Admin Dashboard**: Queue monitoring and stats overview.
+
+---
+
+## System Architecture
+
+```mermaid
+graph TD
+    A["User Browser"] -->|HTTP + WebSocket| B["Express Server :5000"]
+    B -->|Mongoose| C[MongoDB]
+    B -->|Socket.IO| D["WebSocket Layer"]
+    D -->|child_process.spawn| E["Antigravity CLI"]
+    E -->|stdout/stderr stream| D
+    D -->|Real-time output| A
+    B -->|Multer| F["File Storage /uploads"]
+    B -->|"Generated"| G["/generated"]
+    
+    subgraph Frontend [":5173"]
+        H["React + TypeScript"]
+        I["Redux Toolkit"]
+        J["Framer Motion"]
+        K["Tailwind CSS"]
+        L["AI Terminal Component"]
+    end
+    
+    subgraph Backend [":5000"]
+        M["JWT Auth"]
+        N["REST API Routes"]
+        O["CLI Bridge Service"]
+        P["Rate Limiting + Helmet"]
+    end
+    
+    A --> H
+    H --> I
+    H --> L
+    L -->|Socket.IO Client| D
+```
+
+---
+
+## Project Structure
+
+```text
+1st-hackaton/
+├── .env.example
+├── .gitignore
+├── package.json
+├── prompt.md
+├── README.md
+├── server/
+│   ├── src/
+│   │   ├── index.ts        # Main Entry
+│   │   ├── config/         # Database & App Config
+│   │   ├── models/         # Mongoose Schemas
+│   │   ├── routes/         # API Endpoints
+│   │   ├── services/       # Business Logic
+│   │   └── utils/          # Helpers
+│   └── tsconfig.json
+└── client/
+    ├── src/
+    │   ├── components/     # UI Building Blocks
+    │   ├── pages/          # Main Views
+    │   ├── services/       # API Integration
+    │   └── store/          # Redux State Management
+    ├── vite.config.ts
+    └── tailwind.config.js
+```
+
+---
+
+## Hugging Face Deployment
+
+This project is optimized for deployment on Hugging Face.
+
+- **Repository**: [https://huggingface.co/algorembrant/1st-hackaton](https://huggingface.co/algorembrant/1st-hackaton)
+- **Author Profile**: [https://huggingface.co/algorembrant](https://huggingface.co/algorembrant)
+
+> [!IMPORTANT]
+> Large assets or binary files should be handled via **Xet Storage** or **Git LFS** to ensure optimal performance on Hugging Face.
+
+---
+
+## Author
+
+**Rembrant Oyangoren Albeos**
+- Hugging Face: [@algorembrant](https://huggingface.co/algorembrant)
+
+---
+
+## License
+
+MIT License | © 2026 **Rembrant Oyangoren Albeos**

client/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Director.AI -- Turn your scripts into ready-to-post faceless videos. AI-powered video creation platform." />
+    <title>Director.AI -- Faceless Video Creation</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-dark-900 text-light-300 font-body antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "director-ai-client",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@reduxjs/toolkit": "^2.1.0",
+        "axios": "^1.6.5",
+        "framer-motion": "^11.0.3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-redux": "^9.1.0",
+        "react-router-dom": "^6.22.0",
+        "socket.io-client": "^4.7.4"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.17",
+        "postcss": "^8.4.34",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5.3.3",
+        "vite": "^5.1.0"
+    }
+}

client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

client/public/INTEGRATION_GUIDE.md

@@ -0,0 +1,73 @@
+# Director.AI - Integration Guide (Workspace MCP)
+
+## Overview
+This document explains how the **Google Antigravity CLI** (or any autonomous agent script) should connect to the Director.AI webapp environment to control it autonomously. 
+
+Unlike a standard web app where a human clicks buttons, **Director.AI acts as a Host Workspace**. The AI Agent connects as a client and can read state, create projects, and force the human's browser viewport to navigate to specific pages so the human can watch the AI work in real time.
+
+## Connection Details
+
+- **Protocol**: WebSocket (Socket.IO v4)
+- **Host**: `ws://localhost:5000/mcp`
+- **Method**: The agent must connect using a standard Socket.IO client pointing to the `/mcp` namespace.
+
+### Sample Node.js Agent Code
+If you are writing an agent to control this workspace, here is how you connect:
+
+```javascript
+import { io } from 'socket.io-client';
+
+const socket = io('http://localhost:5000/mcp');
+
+socket.on('connect', () => {
+    console.log('Agent connected to Workspace Hub!');
+    
+    // Example: Read current projects
+    socket.emit('mcp:read_state', (response) => {
+        console.log('Current projects:', response.data.projects);
+    });
+});
+```
+
+## Available Tools (Socket.IO Events)
+
+The following tools are exposed by the MCP server for the agent to use:
+
+### 1. `mcp:read_state`
+Reads the current high-level state of the application.
+- **Payload**: None required.
+- **Callback Returns**: `{ status: 'success', data: { projects: Project[] } }`
+
+### 2. `mcp:navigate`
+Forces all connected human browsers to instantly navigate to a specific React Router path. Use this to guide the user's attention.
+- **Payload**: `{ path: string }`
+  - Example: `{ path: '/dashboard' }` or `{ path: '/project/12345/create' }`
+- **Callback Returns**: `{ status: 'success' }`
+
+### 3. `mcp:create_project`
+Autonomously creates a new project in the database. The webapp will automatically refresh its project list, and force navigation to the newly created project's URL.
+- **Payload**: `{ name: string, defaultPlatform: 'TikTok'|'YouTube', defaultFormat: '9:16'|'16:9' }`
+- **Callback Returns**: `{ status: 'success', data: Project }`
+
+### 4. `mcp:update_video_draft`
+Used when the agent is iteratively drafting a video script. It streams updates directly to the human's screen.
+- **Payload**: `{ projectId: string, script?: string, voiceType?: string }`
+- **Callback Returns**: `{ status: 'success' }`
+
+### 5. `mcp:activity_log`
+Sends a log message to the "Agent Activity Log" panel visible on the human's screen. Use this constantly to tell the human what you are doing (e.g. "I am researching competitors to write a better script...").
+- **Payload**: `{ message: string, type: 'info' | 'success' | 'warning' | 'error' }`
+- **Callback Returns**: None
+
+## Example Workflow for the Agent
+
+1. **Connect**: Agent connects to `/mcp`.
+2. **Log**: emit `mcp:activity_log` -> "Agent initialized. Analyzing workspace..."
+3. **Navigate**: emit `mcp:navigate` (`{ path: '/dashboard' }`) -> Forces human browser to dashboard.
+4. **Create**: emit `mcp:create_project` (`{ name: 'Viral Story', defaultPlatform: 'TikTok', defaultFormat: '9:16' }`).
+5. **Log**: emit `mcp:activity_log` -> "Project created. Script drafting initiated."
+6. **Navigate**: emit `mcp:navigate` -> Agent navigates browser to `/project/[id]/create` so human sees the creation wizard.
+7. **Complete**: Agent continues to build the video via tools.
+
+## Development Note for Antigravity Engine
+If you are running the `antigravity` CLI, you will need to map these Socket.IO standard emissions into your internal tool calling schema. The webapp is completely passive and trusts the AI to orchestrate the flow.

client/src/App.tsx

@@ -0,0 +1,50 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { RootState } from './store';
+import { useAgentOrchestrator } from './hooks/useAgentOrchestrator';
+import Navbar from './components/Navbar';
+import Landing from './pages/Landing';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import Dashboard from './pages/Dashboard';
+import ProjectPage from './pages/ProjectPage';
+import VideoCreate from './pages/VideoCreate';
+import Preview from './pages/Preview';
+import Privacy from './pages/Privacy';
+import Terms from './pages/Terms';
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+    const { token } = useSelector((state: RootState) => state.auth);
+    if (!token) return <Navigate to="/login" replace />;
+    return <>{children}</>;
+}
+
+export default function App() {
+    // Listen to operations coming from the AI Agent connecting to our MCP Host
+    useAgentOrchestrator();
+
+    return (
+        <div className="min-h-screen bg-dark-900">
+            <Navbar />
+            <Routes>
+                <Route path="/" element={<Landing />} />
+                <Route path="/login" element={<Login />} />
+                <Route path="/register" element={<Register />} />
+                <Route path="/privacy" element={<Privacy />} />
+                <Route path="/terms" element={<Terms />} />
+                <Route path="/dashboard" element={
+                    <ProtectedRoute><Dashboard /></ProtectedRoute>
+                } />
+                <Route path="/project/:id" element={
+                    <ProtectedRoute><ProjectPage /></ProtectedRoute>
+                } />
+                <Route path="/project/:projectId/create" element={
+                    <ProtectedRoute><VideoCreate /></ProtectedRoute>
+                } />
+                <Route path="/video/:id/preview" element={
+                    <ProtectedRoute><Preview /></ProtectedRoute>
+                } />
+            </Routes>
+        </div>
+    );
+}

client/src/components/AITerminal.tsx

@@ -0,0 +1,108 @@
+import { useState, useRef, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { io, Socket } from 'socket.io-client';
+import { motion } from 'framer-motion';
+import { RootState } from '../store';
+
+interface LogEntry {
+    type: 'info' | 'success' | 'warning' | 'error' | 'system';
+    message: string;
+    timestamp: string;
+}
+
+let socket: Socket | null = null;
+
+export default function AITerminal() {
+    const { token } = useSelector((state: RootState) => state.auth);
+    const [logs, setLogs] = useState<LogEntry[]>([
+        {
+            type: 'system',
+            message: 'Workspace Activity Monitor',
+            timestamp: new Date().toLocaleTimeString(),
+        },
+        {
+            type: 'info',
+            message: 'Waiting for Google Antigravity CLI to connect and perform actions...',
+            timestamp: new Date().toLocaleTimeString(),
+        },
+    ]);
+    const bottomRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!token) return;
+
+        // Connect as a Browser viewport
+        socket = io('http://localhost:5000/browser', {
+            auth: { token },
+        });
+
+        socket.on('connect', () => {
+            addLog('system', 'Browser viewport connected to Workspace Hub');
+        });
+
+        socket.on('disconnect', () => {
+            addLog('error', 'Disconnected from Workspace Hub');
+        });
+
+        socket.on('agent:activity_log', (data: { message: string, type: 'info' | 'success' | 'warning' | 'error', timestamp: string }) => {
+            setLogs(prev => [...prev, {
+                type: data.type,
+                message: data.message,
+                timestamp: new Date(data.timestamp).toLocaleTimeString(),
+            }]);
+        });
+
+        return () => {
+            socket?.disconnect();
+            socket = null;
+        };
+    }, [token]);
+
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [logs]);
+
+    function addLog(type: LogEntry['type'], message: string) {
+        setLogs((prev) => [...prev, {
+            type,
+            message,
+            timestamp: new Date().toLocaleTimeString(),
+        }]);
+    }
+
+    function getTextColor(type: LogEntry['type']) {
+        switch (type) {
+            case 'info': return 'text-light-400';
+            case 'success': return 'text-green-400';
+            case 'warning': return 'text-gold-400';
+            case 'error': return 'text-red-400';
+            case 'system': return 'text-blue-400';
+            default: return 'text-light-400';
+        }
+    }
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="terminal-bg overflow-hidden border border-dark-400/30 rounded-xl"
+        >
+            <div className="flex items-center justify-between px-4 py-2 bg-dark-800 border-b border-dark-400/30">
+                <div className="flex items-center gap-2">
+                    <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+                    <span className="text-xs text-light-500 font-mono tracking-wider">Agent Activity Log</span>
+                </div>
+            </div>
+
+            <div className="h-48 overflow-y-auto px-4 py-3 space-y-1">
+                {logs.map((log, i) => (
+                    <div key={i} className={`font-mono text-xs leading-relaxed ${getTextColor(log.type)}`}>
+                        <span className="text-dark-400 mr-2 select-none">[{log.timestamp}]</span>
+                        <span className="break-words">{log.message}</span>
+                    </div>
+                ))}
+                <div ref={bottomRef} />
+            </div>
+        </motion.div>
+    );
+}

client/src/components/Navbar.tsx

@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { motion, AnimatePresence } from 'framer-motion';
+import { RootState, AppDispatch } from '../store';
+import { logout } from '../store/authSlice';
+
+export default function Navbar() {
+    const { user, token } = useSelector((state: RootState) => state.auth);
+    const dispatch = useDispatch<AppDispatch>();
+    const navigate = useNavigate();
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const handleLogout = () => {
+        dispatch(logout());
+        navigate('/');
+    };
+
+    return (
+        <nav className="fixed top-0 left-0 right-0 z-50 bg-dark-900/80 backdrop-blur-xl border-b border-dark-400/20">
+            <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
+                {/* Logo */}
+                <Link to="/" className="flex items-center gap-2 group">
+                    <div className="w-8 h-8 bg-gold-gradient rounded-lg flex items-center justify-center
+                          group-hover:shadow-gold transition-shadow duration-300">
+                        <span className="text-dark-900 font-display font-bold text-sm">D</span>
+                    </div>
+                    <span className="font-display text-xl font-bold text-light-100">
+                        Director<span className="text-gold-500">.AI</span>
+                    </span>
+                </Link>
+
+                {/* Desktop Navigation */}
+                <div className="hidden md:flex items-center gap-1">
+                    {token ? (
+                        <>
+                            <Link to="/dashboard" className="btn-ghost text-sm">Dashboard</Link>
+                            <div className="w-px h-6 bg-dark-400/30 mx-2" />
+                            <span className="text-sm text-light-500 mr-3">{user?.email}</span>
+                            <button onClick={handleLogout} className="btn-ghost text-sm text-light-500 hover:text-red-400">
+                                Sign Out
+                            </button>
+                        </>
+                    ) : (
+                        <>
+                            <a href="#features" className="btn-ghost text-sm">Features</a>
+                            <a href="#pricing" className="btn-ghost text-sm">Pricing</a>
+                            <a href="#faq" className="btn-ghost text-sm">FAQ</a>
+                            <div className="w-px h-6 bg-dark-400/30 mx-2" />
+                            <Link to="/login" className="btn-ghost text-sm">Sign In</Link>
+                            <Link to="/register" className="btn-primary text-sm ml-2">Get Started</Link>
+                        </>
+                    )}
+                </div>
+
+                {/* Mobile Menu Button */}
+                <button
+                    onClick={() => setMenuOpen(!menuOpen)}
+                    className="md:hidden flex flex-col gap-1.5 p-2"
+                    aria-label="Toggle Menu"
+                    id="mobile-menu-toggle"
+                >
+                    <motion.span
+                        animate={menuOpen ? { rotate: 45, y: 6 } : { rotate: 0, y: 0 }}
+                        className="w-5 h-0.5 bg-light-300 block"
+                    />
+                    <motion.span
+                        animate={menuOpen ? { opacity: 0 } : { opacity: 1 }}
+                        className="w-5 h-0.5 bg-light-300 block"
+                    />
+                    <motion.span
+                        animate={menuOpen ? { rotate: -45, y: -6 } : { rotate: 0, y: 0 }}
+                        className="w-5 h-0.5 bg-light-300 block"
+                    />
+                </button>
+            </div>
+
+            {/* Mobile Menu */}
+            <AnimatePresence>
+                {menuOpen && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.3 }}
+                        className="md:hidden overflow-hidden bg-dark-800/95 backdrop-blur-xl border-b border-dark-400/20"
+                    >
+                        <div className="px-6 py-4 flex flex-col gap-2">
+                            {token ? (
+                                <>
+                                    <Link to="/dashboard" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Dashboard</Link>
+                                    <button onClick={() => { handleLogout(); setMenuOpen(false); }} className="btn-ghost text-sm justify-start text-red-400">Sign Out</button>
+                                </>
+                            ) : (
+                                <>
+                                    <a href="#features" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Features</a>
+                                    <a href="#pricing" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Pricing</a>
+                                    <Link to="/login" onClick={() => setMenuOpen(false)} className="btn-ghost text-sm justify-start">Sign In</Link>
+                                    <Link to="/register" onClick={() => setMenuOpen(false)} className="btn-primary text-sm mt-2">Get Started</Link>
+                                </>
+                            )}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </nav>
+    );
+}

client/src/hooks/useAgentOrchestrator.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
+import { io } from 'socket.io-client';
+import { RootState, AppDispatch } from '../store';
+import { fetchProjects } from '../store/projectsSlice';
+
+export function useAgentOrchestrator() {
+    const navigate = useNavigate();
+    const dispatch = useDispatch<AppDispatch>();
+    const { token } = useSelector((state: RootState) => state.auth);
+
+    useEffect(() => {
+        if (!token) return;
+
+        // The browser connects to the /browser namespace to listen to the agent
+        const socket = io('http://localhost:5000/browser', {
+            auth: { token },
+        });
+
+        // When the CLI agent wants to guide the user's view:
+        socket.on('agent:navigate', (path: string) => {
+            console.log(`[Agent Orchestrator] Navigating to ${path}`);
+            navigate(path);
+        });
+
+        // When the CLI agent creates a project, we should refresh our state so the UI updates
+        socket.on('agent:project_created', () => {
+            console.log(`[Agent Orchestrator] Agent created a project, refreshing list`);
+            dispatch(fetchProjects());
+        });
+
+        // You could add logic here for 'agent:video_draft_updated' 
+        // to fill out the form fields in VideoCreate automatically.
+
+        return () => {
+            socket.disconnect();
+        };
+    }, [token, navigate, dispatch]);
+}

client/src/index.css

@@ -0,0 +1,149 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: #0A0A0A;
+    color: #F5F5F5;
+    font-family: 'Montserrat', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+  }
+
+  ::selection {
+    background-color: rgba(212, 175, 55, 0.3);
+    color: #F5F5F5;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #111111;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #333333;
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #D4AF37;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Playfair Display', serif;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center px-8 py-3 
+           bg-gold-500 text-dark-900 font-body font-semibold 
+           rounded-lg transition-all duration-300 ease-out
+           hover:bg-gold-400 hover:shadow-gold-lg hover:-translate-y-0.5
+           active:translate-y-0 active:shadow-gold
+           disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center px-8 py-3 
+           border border-gold-500/40 text-gold-500 font-body font-medium 
+           rounded-lg transition-all duration-300 ease-out
+           hover:border-gold-500 hover:bg-gold-500/10 hover:shadow-gold
+           active:bg-gold-500/20;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center px-6 py-2 
+           text-light-400 font-body font-medium 
+           rounded-lg transition-all duration-300 ease-out
+           hover:text-gold-500 hover:bg-dark-500/50;
+  }
+
+  .card {
+    @apply bg-card-gradient backdrop-blur-sm border border-dark-400/30 
+           rounded-2xl p-6 transition-all duration-500 ease-out
+           hover:border-gold-500/20 hover:shadow-card-hover hover:-translate-y-1;
+  }
+
+  .card-static {
+    @apply bg-card-gradient backdrop-blur-sm border border-dark-400/30 
+           rounded-2xl p-6;
+  }
+
+  .input-field {
+    @apply w-full px-4 py-3 bg-dark-600 border border-dark-400/50 
+           rounded-lg text-light-300 font-body placeholder-light-500/40
+           transition-all duration-300 ease-out
+           focus:outline-none focus:border-gold-500/60 focus:shadow-gold
+           hover:border-dark-300;
+  }
+
+  .section-heading {
+    @apply font-display text-4xl md:text-5xl font-bold text-light-100 mb-4;
+  }
+
+  .section-subheading {
+    @apply font-body text-lg text-light-500 max-w-2xl mx-auto;
+  }
+
+  .gold-text {
+    @apply text-transparent bg-clip-text bg-gold-gradient;
+  }
+
+  .glass-panel {
+    @apply bg-dark-700/60 backdrop-blur-xl border border-dark-400/20 
+           rounded-2xl shadow-card;
+  }
+
+  .terminal-bg {
+    @apply bg-dark-900 border border-dark-400/30 rounded-xl 
+           font-mono text-sm;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .animate-delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .animate-delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .animate-delay-300 {
+    animation-delay: 300ms;
+  }
+
+  .animate-delay-400 {
+    animation-delay: 400ms;
+  }
+
+  .animate-delay-500 {
+    animation-delay: 500ms;
+  }
+}

client/src/main.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import { store } from './store';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <Provider store={store}>
+            <BrowserRouter>
+                <App />
+            </BrowserRouter>
+        </Provider>
+    </React.StrictMode>
+);

client/src/pages/Dashboard.tsx

@@ -0,0 +1,250 @@
+import { useEffect, useState, FormEvent } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AppDispatch, RootState } from '../store';
+import { fetchProjects, createProject } from '../store/projectsSlice';
+import AITerminal from '../components/AITerminal';
+
+export default function Dashboard() {
+    const dispatch = useDispatch<AppDispatch>();
+    const { user } = useSelector((state: RootState) => state.auth);
+    const { items: projects, loading } = useSelector((state: RootState) => state.projects);
+    const [showCreateModal, setShowCreateModal] = useState(false);
+    const [showTerminal, setShowTerminal] = useState(false);
+
+    useEffect(() => {
+        dispatch(fetchProjects());
+    }, [dispatch]);
+
+    return (
+        <div className="min-h-screen pt-20 pb-12 px-6">
+            <div className="max-w-6xl mx-auto">
+                {/* Welcome Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="mb-10"
+                >
+                    <h1 className="font-display text-3xl md:text-4xl font-bold text-light-100 mb-2">
+                        Welcome back{user?.email ? `, ${user.email.split('@')[0]}` : ''}
+                    </h1>
+                    <p className="font-body text-light-500">
+                        Manage your projects and create new videos
+                    </p>
+                </motion.div>
+
+                {/* Quick Actions */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1 }}
+                    className="flex flex-wrap gap-4 mb-10"
+                >
+                    <button
+                        onClick={() => setShowCreateModal(true)}
+                        className="btn-primary"
+                        id="create-project-btn"
+                    >
+                        <span className="mr-2 text-xl leading-none">+</span>
+                        Create New Project
+                    </button>
+                    <button
+                        onClick={() => setShowTerminal(!showTerminal)}
+                        className="btn-secondary"
+                        id="toggle-terminal-btn"
+                    >
+                        <span className="mr-2 font-mono text-sm">&gt;_</span>
+                        {showTerminal ? 'Hide' : 'Open'} AI Terminal
+                    </button>
+                </motion.div>
+
+                {/* AI Terminal */}
+                <AnimatePresence>
+                    {showTerminal && (
+                        <motion.div
+                            initial={{ opacity: 0, height: 0 }}
+                            animate={{ opacity: 1, height: 'auto' }}
+                            exit={{ opacity: 0, height: 0 }}
+                            transition={{ duration: 0.3 }}
+                            className="mb-10 overflow-hidden"
+                        >
+                            <AITerminal />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+
+                {/* Stats Bar */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.2 }}
+                    className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10"
+                >
+                    {[
+                        { label: 'Projects', value: projects.length },
+                        { label: 'Videos Generated', value: user?.videosGenerated || 0 },
+                        { label: 'Subscription', value: user?.subscription || 'Free' },
+                        { label: 'This Month', value: '0 / 5' },
+                    ].map((stat) => (
+                        <div key={stat.label} className="card-static text-center">
+                            <p className="font-display text-2xl font-bold text-light-100">{stat.value}</p>
+                            <p className="text-sm text-light-500 mt-1">{stat.label}</p>
+                        </div>
+                    ))}
+                </motion.div>
+
+                {/* Projects Grid */}
+                <div className="mb-6">
+                    <h2 className="font-display text-2xl font-semibold text-light-100">Your Projects</h2>
+                </div>
+
+                {loading ? (
+                    <div className="flex items-center justify-center py-20">
+                        <div className="w-8 h-8 border-2 border-gold-500 border-t-transparent rounded-full animate-spin" />
+                    </div>
+                ) : projects.length === 0 ? (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="card-static text-center py-16"
+                    >
+                        <div className="w-16 h-16 bg-gold-500/10 border border-gold-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                            <span className="text-gold-500 text-3xl font-light">+</span>
+                        </div>
+                        <h3 className="font-display text-xl text-light-100 mb-2">No projects yet</h3>
+                        <p className="text-light-500 mb-6">Create your first project to start generating videos</p>
+                        <button onClick={() => setShowCreateModal(true)} className="btn-primary">
+                            Create Your First Project
+                        </button>
+                    </motion.div>
+                ) : (
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {projects.map((project, i) => (
+                            <motion.div
+                                key={project._id}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: i * 0.05 }}
+                            >
+                                <Link to={`/project/${project._id}`} className="card block group">
+                                    <div className="flex items-start justify-between mb-4">
+                                        <div className="w-10 h-10 bg-gold-500/10 border border-gold-500/20 rounded-xl flex items-center justify-center group-hover:bg-gold-500/20 transition-colors">
+                                            <div className="w-3 h-3 bg-gold-500 rounded" />
+                                        </div>
+                                        <span className="text-xs text-light-500 bg-dark-600 px-2 py-1 rounded">
+                                            {project.defaultPlatform}
+                                        </span>
+                                    </div>
+                                    <h3 className="font-display text-lg font-semibold text-light-100 mb-1 group-hover:text-gold-400 transition-colors">
+                                        {project.name}
+                                    </h3>
+                                    <p className="text-sm text-light-500">
+                                        {project.videos?.length || 0} video{project.videos?.length !== 1 ? 's' : ''} -- {project.defaultFormat}
+                                    </p>
+                                </Link>
+                            </motion.div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Create Project Modal */}
+            <AnimatePresence>
+                {showCreateModal && (
+                    <CreateProjectModal onClose={() => setShowCreateModal(false)} />
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+function CreateProjectModal({ onClose }: { onClose: () => void }) {
+    const dispatch = useDispatch<AppDispatch>();
+    const [name, setName] = useState('');
+    const [platform, setPlatform] = useState('TikTok');
+    const [format, setFormat] = useState('9:16');
+    const [submitting, setSubmitting] = useState(false);
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        if (!name.trim()) return;
+        setSubmitting(true);
+        await dispatch(createProject({ name, defaultPlatform: platform, defaultFormat: format }));
+        setSubmitting(false);
+        onClose();
+    };
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-dark-900/80 backdrop-blur-sm px-6"
+            onClick={onClose}
+        >
+            <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 20 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 20 }}
+                transition={{ duration: 0.3 }}
+                className="glass-panel p-8 w-full max-w-lg"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <h2 className="font-display text-2xl font-bold text-light-100 mb-6">Create New Project</h2>
+
+                <form onSubmit={handleSubmit} className="space-y-5">
+                    <div>
+                        <label htmlFor="project-name" className="block text-sm font-body text-light-400 mb-2">Project Name</label>
+                        <input
+                            id="project-name"
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            className="input-field"
+                            placeholder="My Awesome Video Series"
+                            required
+                            autoFocus
+                        />
+                    </div>
+
+                    <div>
+                        <label htmlFor="project-platform" className="block text-sm font-body text-light-400 mb-2">Default Platform</label>
+                        <select
+                            id="project-platform"
+                            value={platform}
+                            onChange={(e) => setPlatform(e.target.value)}
+                            className="input-field"
+                        >
+                            <option value="TikTok">TikTok</option>
+                            <option value="Reels">Instagram Reels</option>
+                            <option value="Shorts">YouTube Shorts</option>
+                            <option value="YouTube">YouTube</option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <label htmlFor="project-format" className="block text-sm font-body text-light-400 mb-2">Default Format</label>
+                        <select
+                            id="project-format"
+                            value={format}
+                            onChange={(e) => setFormat(e.target.value)}
+                            className="input-field"
+                        >
+                            <option value="9:16">9:16 (Vertical)</option>
+                            <option value="16:9">16:9 (Landscape)</option>
+                            <option value="1:1">1:1 (Square)</option>
+                        </select>
+                    </div>
+
+                    <div className="flex gap-3 pt-2">
+                        <button type="button" onClick={onClose} className="btn-ghost flex-1">Cancel</button>
+                        <button type="submit" disabled={submitting} className="btn-primary flex-1">
+                            {submitting ? 'Creating...' : 'Create Project'}
+                        </button>
+                    </div>
+                </form>
+            </motion.div>
+        </motion.div>
+    );
+}

client/src/pages/Landing.tsx

@@ -0,0 +1,524 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+
+const fadeInUp = {
+    hidden: { opacity: 0, y: 30 },
+    visible: (i: number) => ({
+        opacity: 1, y: 0,
+        transition: { delay: i * 0.15, duration: 0.6, ease: 'easeOut' },
+    }),
+};
+
+const stagger = {
+    visible: { transition: { staggerChildren: 0.1 } },
+};
+
+export default function Landing() {
+    return (
+        <div className="overflow-hidden">
+            <HeroSection />
+            <HowItWorksSection />
+            <FeaturesSection />
+            <ForWhoSection />
+            <PricingSection />
+            <FAQSection />
+            <CTASection />
+            <Footer />
+        </div>
+    );
+}
+
+/* ─── Hero ─── */
+function HeroSection() {
+    return (
+        <section className="relative min-h-screen flex items-center justify-center pt-16 overflow-hidden">
+            {/* Background Effects */}
+            <div className="absolute inset-0 bg-hero-gradient" />
+            <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gold-500/5 rounded-full blur-3xl animate-float" />
+            <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-gold-500/3 rounded-full blur-3xl animate-float" style={{ animationDelay: '3s' }} />
+
+            {/* Grid pattern overlay */}
+            <div className="absolute inset-0 opacity-[0.03]"
+                style={{
+                    backgroundImage: 'linear-gradient(rgba(212,175,55,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.3) 1px, transparent 1px)',
+                    backgroundSize: '60px 60px',
+                }}
+            />
+
+            <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
+                <motion.div
+                    initial="hidden"
+                    animate="visible"
+                    variants={stagger}
+                >
+                    <motion.div variants={fadeInUp} custom={0} className="mb-6">
+                        <span className="inline-block px-4 py-1.5 bg-gold-500/10 border border-gold-500/20 rounded-full text-gold-500 text-xs font-body font-medium tracking-widest uppercase">
+                            AI-Powered Video Creation
+                        </span>
+                    </motion.div>
+
+                    <motion.h1 variants={fadeInUp} custom={1} className="font-display text-5xl md:text-7xl lg:text-8xl font-bold text-light-100 leading-tight mb-6 text-balance">
+                        Turn your scripts into{' '}
+                        <span className="text-transparent bg-clip-text bg-gold-gradient">
+                            ready-to-post
+                        </span>{' '}
+                        faceless videos
+                    </motion.h1>
+
+                    <motion.p variants={fadeInUp} custom={2} className="font-body text-lg md:text-xl text-light-500 max-w-2xl mx-auto mb-10 leading-relaxed">
+                        Stop wasting hours editing. Paste your script, choose a style, and let AI create
+                        scroll-stopping videos optimized for TikTok, Reels, and Shorts -- in minutes, not days.
+                    </motion.p>
+
+                    <motion.div variants={fadeInUp} custom={3} className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                        <Link to="/register" className="btn-primary text-lg px-10 py-4 shadow-gold-lg">
+                            Start now
+                        </Link>
+                        <button className="btn-secondary text-lg px-10 py-4">
+                            Watch a 30-second demo
+                        </button>
+                    </motion.div>
+
+                    <motion.p variants={fadeInUp} custom={4} className="mt-6 text-sm text-light-500/60">
+                        Try 5 videos free -- No credit card required
+                    </motion.p>
+                </motion.div>
+            </div>
+
+            {/* Bottom gradient fade */}
+            <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-dark-900 to-transparent" />
+        </section>
+    );
+}
+
+/* ─── How It Works ─── */
+function HowItWorksSection() {
+    const steps = [
+        {
+            num: '01',
+            title: 'Paste Your Script',
+            desc: 'Write or paste your script. Upload a text file or type directly into the editor. AI helps refine your message for maximum impact.',
+        },
+        {
+            num: '02',
+            title: 'Customize Everything',
+            desc: 'Choose your voice, music, visual style, fonts, and transitions. Save presets to maintain brand consistency across all your videos.',
+        },
+        {
+            num: '03',
+            title: 'Generate and Export',
+            desc: 'Hit generate and watch AI assemble your video in real-time through the built-in terminal. Export in any format, any ratio, any quality.',
+        },
+    ];
+
+    return (
+        <section className="py-32 relative">
+            <div className="max-w-6xl mx-auto px-6">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: '-100px' }}
+                    variants={stagger}
+                    className="text-center mb-20"
+                >
+                    <motion.h2 variants={fadeInUp} custom={0} className="section-heading">
+                        How It <span className="gold-text">Works</span>
+                    </motion.h2>
+                    <motion.p variants={fadeInUp} custom={1} className="section-subheading">
+                        Three simple steps from script to screen
+                    </motion.p>
+                </motion.div>
+
+                <div className="grid md:grid-cols-3 gap-8">
+                    {steps.map((step, i) => (
+                        <motion.div
+                            key={step.num}
+                            initial="hidden"
+                            whileInView="visible"
+                            viewport={{ once: true, margin: '-50px' }}
+                            variants={fadeInUp}
+                            custom={i}
+                            className="card group relative overflow-hidden"
+                        >
+                            {/* Step number */}
+                            <span className="absolute top-4 right-4 font-display text-6xl font-bold text-gold-500/10 group-hover:text-gold-500/20 transition-colors duration-500">
+                                {step.num}
+                            </span>
+
+                            {/* Gold accent line */}
+                            <div className="w-12 h-1 bg-gold-gradient rounded-full mb-6" />
+
+                            <h3 className="font-display text-2xl font-semibold text-light-100 mb-3">
+                                {step.title}
+                            </h3>
+                            <p className="font-body text-light-500 leading-relaxed">
+                                {step.desc}
+                            </p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+/* ─── Features ─── */
+function FeaturesSection() {
+    const features = [
+        { title: 'AI Voice Generation', desc: 'Natural-sounding voiceovers in multiple languages, tones, and speeds.' },
+        { title: 'Smart Subtitles', desc: 'Auto-synced captions with customizable fonts, colors, and animations.' },
+        { title: 'Multi-Platform Export', desc: 'One-click export for TikTok (9:16), YouTube (16:9), and Instagram (1:1).' },
+        { title: 'Style Presets', desc: 'Save and reuse your brand settings: fonts, colors, transitions, and more.' },
+        { title: 'Real-Time AI Terminal', desc: 'Watch AI build your video live through the integrated command terminal.' },
+        { title: 'Asset Library', desc: 'Upload your own clips, images, logos, and music -- or use the built-in library.' },
+        { title: 'Batch Processing', desc: 'Queue multiple videos and let the system handle them autonomously.' },
+        { title: 'No Subscription Lock-In', desc: 'Generous free tier. Pay only for what you use beyond the free limits.' },
+    ];
+
+    return (
+        <section id="features" className="py-32 relative">
+            <div className="absolute inset-0 bg-dark-gradient opacity-50" />
+            <div className="relative max-w-6xl mx-auto px-6">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: '-100px' }}
+                    variants={stagger}
+                    className="text-center mb-20"
+                >
+                    <motion.h2 variants={fadeInUp} custom={0} className="section-heading">
+                        Powerful <span className="gold-text">Features</span>
+                    </motion.h2>
+                    <motion.p variants={fadeInUp} custom={1} className="section-subheading">
+                        Everything you need to create professional faceless content
+                    </motion.p>
+                </motion.div>
+
+                <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {features.map((f, i) => (
+                        <motion.div
+                            key={f.title}
+                            initial="hidden"
+                            whileInView="visible"
+                            viewport={{ once: true, margin: '-30px' }}
+                            variants={fadeInUp}
+                            custom={i % 4}
+                            className="card text-center"
+                        >
+                            <div className="w-10 h-10 bg-gold-500/10 border border-gold-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                                <div className="w-3 h-3 bg-gold-500 rounded-full" />
+                            </div>
+                            <h3 className="font-display text-lg font-semibold text-light-100 mb-2">{f.title}</h3>
+                            <p className="font-body text-sm text-light-500">{f.desc}</p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+/* ─── For Who ─── */
+function ForWhoSection() {
+    const audiences = [
+        { title: 'Content Creators', desc: 'Scale your faceless channel output from 2 videos a week to 2 a day. Focus on strategy, let AI handle production.' },
+        { title: 'Digital Marketers', desc: 'Create ad variations, explainer videos, and social content at a fraction of the cost and time of traditional production.' },
+        { title: 'Educators and Coaches', desc: 'Transform your lessons, courses, and tips into engaging video content without ever showing your face on camera.' },
+        { title: 'Agencies', desc: 'White-label video production for clients. Maintain brand consistency with presets. Scale without hiring more editors.' },
+    ];
+
+    return (
+        <section className="py-32 relative">
+            <div className="max-w-6xl mx-auto px-6">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: '-100px' }}
+                    variants={stagger}
+                    className="text-center mb-20"
+                >
+                    <motion.h2 variants={fadeInUp} custom={0} className="section-heading">
+                        Built <span className="gold-text">For You</span>
+                    </motion.h2>
+                </motion.div>
+
+                <div className="grid md:grid-cols-2 gap-8">
+                    {audiences.map((a, i) => (
+                        <motion.div
+                            key={a.title}
+                            initial="hidden"
+                            whileInView="visible"
+                            viewport={{ once: true, margin: '-50px' }}
+                            variants={fadeInUp}
+                            custom={i}
+                            className="card flex gap-5"
+                        >
+                            <div className="flex-shrink-0 w-12 h-12 bg-gold-500/10 border border-gold-500/20 rounded-xl flex items-center justify-center">
+                                <div className="w-4 h-4 bg-gold-gradient rounded" />
+                            </div>
+                            <div>
+                                <h3 className="font-display text-xl font-semibold text-light-100 mb-2">{a.title}</h3>
+                                <p className="font-body text-light-500 leading-relaxed">{a.desc}</p>
+                            </div>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+/* ─── Pricing ─── */
+function PricingSection() {
+    const tiers = [
+        {
+            name: 'Free',
+            price: '$0',
+            period: 'forever',
+            features: ['5 videos per month', 'Basic voices', '720p export', 'Watermarked'],
+            cta: 'Start Free',
+            highlighted: false,
+        },
+        {
+            name: 'Starter',
+            price: '$19',
+            period: '/month',
+            features: ['25 videos per month', 'All voices and languages', '1080p export', 'No watermark', '3 presets'],
+            cta: 'Get Starter',
+            highlighted: false,
+        },
+        {
+            name: 'Creator',
+            price: '$49',
+            period: '/month',
+            features: ['100 videos per month', 'Priority processing', '4K export', 'Unlimited presets', 'Batch processing', 'Custom branding'],
+            cta: 'Get Creator',
+            highlighted: true,
+        },
+        {
+            name: 'Studio',
+            price: '$149',
+            period: '/month',
+            features: ['Unlimited videos', 'Dedicated processing', '4K export', 'API access', 'White-label', 'Priority support', 'Team accounts'],
+            cta: 'Get Studio',
+            highlighted: false,
+        },
+    ];
+
+    return (
+        <section id="pricing" className="py-32 relative">
+            <div className="absolute inset-0 bg-dark-gradient opacity-50" />
+            <div className="relative max-w-7xl mx-auto px-6">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: '-100px' }}
+                    variants={stagger}
+                    className="text-center mb-20"
+                >
+                    <motion.h2 variants={fadeInUp} custom={0} className="section-heading">
+                        Simple <span className="gold-text">Pricing</span>
+                    </motion.h2>
+                    <motion.p variants={fadeInUp} custom={1} className="section-subheading">
+                        Start free. Scale as you grow. No hidden fees.
+                    </motion.p>
+                </motion.div>
+
+                <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                    {tiers.map((tier, i) => (
+                        <motion.div
+                            key={tier.name}
+                            initial="hidden"
+                            whileInView="visible"
+                            viewport={{ once: true, margin: '-30px' }}
+                            variants={fadeInUp}
+                            custom={i}
+                            className={`card-static relative flex flex-col ${tier.highlighted
+                                    ? 'border-gold-500/40 shadow-gold-lg scale-[1.02]'
+                                    : ''
+                                }`}
+                        >
+                            {tier.highlighted && (
+                                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                                    <span className="px-4 py-1 bg-gold-gradient text-dark-900 text-xs font-body font-bold rounded-full uppercase tracking-wider">
+                                        Most Popular
+                                    </span>
+                                </div>
+                            )}
+
+                            <div className="mb-6">
+                                <h3 className="font-display text-xl font-semibold text-light-100 mb-2">{tier.name}</h3>
+                                <div className="flex items-baseline gap-1">
+                                    <span className="font-display text-4xl font-bold text-light-100">{tier.price}</span>
+                                    <span className="text-light-500 text-sm">{tier.period}</span>
+                                </div>
+                            </div>
+
+                            <ul className="flex-1 space-y-3 mb-8">
+                                {tier.features.map((f) => (
+                                    <li key={f} className="flex items-start gap-2 text-sm text-light-400">
+                                        <span className="mt-1 w-1.5 h-1.5 bg-gold-500 rounded-full flex-shrink-0" />
+                                        {f}
+                                    </li>
+                                ))}
+                            </ul>
+
+                            <Link
+                                to="/register"
+                                className={tier.highlighted ? 'btn-primary w-full' : 'btn-secondary w-full'}
+                            >
+                                {tier.cta}
+                            </Link>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+/* ─── FAQ ─── */
+function FAQSection() {
+    const faqs = [
+        {
+            q: 'What is a faceless video?',
+            a: 'A faceless video is content that does not show the creator on camera. It uses voiceovers, stock footage, text overlays, and animations to deliver the message. This format is hugely popular on TikTok, YouTube Shorts, and Instagram Reels.',
+        },
+        {
+            q: 'Do I need video editing experience?',
+            a: 'Not at all. Director.AI handles the entire editing process. You provide the script, choose your preferences, and the AI assembles everything automatically. The built-in terminal lets you watch the process in real time.',
+        },
+        {
+            q: 'How does the AI Terminal work?',
+            a: 'The AI Terminal is a live bridge to our AI engine. When you generate a video, commands are sent to the AI which processes voiceovers, subtitles, and video assembly. You can see every step happening in real time and even send custom prompts.',
+        },
+        {
+            q: 'Can I use my own assets?',
+            a: 'Yes. Upload your own clips, images, logos, and music. You can also use the built-in asset library. All uploads are limited to 100MB per file for security.',
+        },
+        {
+            q: 'What platforms are supported for export?',
+            a: 'Export in 9:16 (TikTok, Reels, Shorts), 16:9 (YouTube, Facebook), and 1:1 (Instagram feed). Multiple quality options from 720p to 4K depending on your plan.',
+        },
+        {
+            q: 'Is there a free tier?',
+            a: 'Yes. The free tier gives you 5 videos per month at 720p with a small watermark. No credit card required to start.',
+        },
+    ];
+
+    return (
+        <section id="faq" className="py-32 relative">
+            <div className="max-w-3xl mx-auto px-6">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: '-100px' }}
+                    variants={stagger}
+                    className="text-center mb-16"
+                >
+                    <motion.h2 variants={fadeInUp} custom={0} className="section-heading">
+                        Common <span className="gold-text">Questions</span>
+                    </motion.h2>
+                </motion.div>
+
+                <div className="space-y-4">
+                    {faqs.map((faq, i) => (
+                        <FAQItem key={i} question={faq.q} answer={faq.a} index={i} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+function FAQItem({ question, answer, index }: { question: string; answer: string; index: number }) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={fadeInUp}
+            custom={index}
+            className="card-static cursor-pointer"
+            onClick={() => setOpen(!open)}
+        >
+            <div className="flex items-center justify-between">
+                <h3 className="font-display text-lg font-medium text-light-100 pr-4">{question}</h3>
+                <motion.span
+                    animate={{ rotate: open ? 45 : 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="text-gold-500 text-2xl flex-shrink-0 font-light"
+                >
+                    +
+                </motion.span>
+            </div>
+            <motion.div
+                initial={false}
+                animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
+                transition={{ duration: 0.3 }}
+                className="overflow-hidden"
+            >
+                <p className="font-body text-light-500 mt-4 leading-relaxed">{answer}</p>
+            </motion.div>
+        </motion.div>
+    );
+}
+
+/* ─── CTA ─── */
+function CTASection() {
+    return (
+        <section className="py-32 relative">
+            <div className="absolute inset-0 bg-hero-gradient" />
+            <div className="relative max-w-3xl mx-auto px-6 text-center">
+                <motion.div
+                    initial="hidden"
+                    whileInView="visible"
+                    viewport={{ once: true, margin: '-100px' }}
+                    variants={stagger}
+                >
+                    <motion.h2 variants={fadeInUp} custom={0} className="font-display text-4xl md:text-6xl font-bold text-light-100 mb-6 text-balance">
+                        Ready to stop wasting time editing?
+                    </motion.h2>
+                    <motion.p variants={fadeInUp} custom={1} className="font-body text-lg text-light-500 mb-10">
+                        Join creators who are already producing professional faceless videos in minutes.
+                    </motion.p>
+                    <motion.div variants={fadeInUp} custom={2}>
+                        <Link to="/register" className="btn-primary text-lg px-12 py-4 shadow-gold-lg">
+                            Generate my first video
+                        </Link>
+                    </motion.div>
+                </motion.div>
+            </div>
+        </section>
+    );
+}
+
+/* ─── Footer ─── */
+function Footer() {
+    return (
+        <footer className="border-t border-dark-400/20 py-12">
+            <div className="max-w-6xl mx-auto px-6">
+                <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+                    <div className="flex items-center gap-2">
+                        <div className="w-6 h-6 bg-gold-gradient rounded flex items-center justify-center">
+                            <span className="text-dark-900 font-display font-bold text-xs">D</span>
+                        </div>
+                        <span className="font-display text-lg font-bold text-light-300">
+                            Director<span className="text-gold-500">.AI</span>
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-6 text-sm text-light-500">
+                        <Link to="/privacy" className="hover:text-gold-500 transition-colors">Privacy Policy</Link>
+                        <Link to="/terms" className="hover:text-gold-500 transition-colors">Terms of Use</Link>
+                    </div>
+                    <p className="text-sm text-light-500/60">
+                        2026 Director.AI. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+}

client/src/pages/Login.tsx

@@ -0,0 +1,90 @@
+import { useState, FormEvent } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { AppDispatch, RootState } from '../store';
+import { loginUser, clearError } from '../store/authSlice';
+
+export default function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const dispatch = useDispatch<AppDispatch>();
+    const navigate = useNavigate();
+    const { loading, error } = useSelector((state: RootState) => state.auth);
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        const result = await dispatch(loginUser({ email, password }));
+        if (loginUser.fulfilled.match(result)) {
+            navigate('/dashboard');
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex items-center justify-center pt-16 px-6">
+            <div className="absolute inset-0 bg-hero-gradient opacity-50" />
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="relative w-full max-w-md"
+            >
+                <div className="glass-panel p-8">
+                    <div className="text-center mb-8">
+                        <h1 className="font-display text-3xl font-bold text-light-100 mb-2">Welcome Back</h1>
+                        <p className="font-body text-light-500">Sign in to your Director.AI account</p>
+                    </div>
+
+                    {error && (
+                        <div className="mb-6 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm text-center">
+                            {error}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-5">
+                        <div>
+                            <label htmlFor="login-email" className="block text-sm font-body text-light-400 mb-2">Email</label>
+                            <input
+                                id="login-email"
+                                type="email"
+                                value={email}
+                                onChange={(e) => { setEmail(e.target.value); dispatch(clearError()); }}
+                                className="input-field"
+                                placeholder="you@example.com"
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <label htmlFor="login-password" className="block text-sm font-body text-light-400 mb-2">Password</label>
+                            <input
+                                id="login-password"
+                                type="password"
+                                value={password}
+                                onChange={(e) => { setPassword(e.target.value); dispatch(clearError()); }}
+                                className="input-field"
+                                placeholder="Enter your password"
+                                required
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="btn-primary w-full py-3.5"
+                        >
+                            {loading ? 'Signing in...' : 'Sign In'}
+                        </button>
+                    </form>
+
+                    <p className="mt-6 text-center text-sm text-light-500">
+                        Don't have an account?{' '}
+                        <Link to="/register" className="text-gold-500 hover:text-gold-400 font-medium transition-colors">
+                            Create one
+                        </Link>
+                    </p>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

client/src/pages/Preview.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { motion } from 'framer-motion';
+import { AppDispatch, RootState } from '../store';
+import { fetchVideo, generateVideo, pollVideoStatus } from '../store/videosSlice';
+import AITerminal from '../components/AITerminal';
+
+export default function Preview() {
+    const { id } = useParams<{ id: string }>();
+    const dispatch = useDispatch<AppDispatch>();
+    const { current: video } = useSelector((state: RootState) => state.videos);
+    const [showTerminal, setShowTerminal] = useState(true);
+    const [exportFormats, setExportFormats] = useState({
+        '9:16': true,
+        '16:9': false,
+        '1:1': false,
+    });
+
+    useEffect(() => {
+        if (id) dispatch(fetchVideo(id));
+    }, [id, dispatch]);
+
+    // Poll status while generating
+    useEffect(() => {
+        if (!video || video.status !== 'generating' || !id) return;
+        const interval = setInterval(() => {
+            dispatch(pollVideoStatus(id));
+        }, 10000);
+        return () => clearInterval(interval);
+    }, [video?.status, id, dispatch]);
+
+    const handleGenerate = () => {
+        if (id) dispatch(generateVideo(id));
+    };
+
+    if (!video) {
+        return (
+            <div className="min-h-screen pt-20 flex items-center justify-center">
+                <div className="w-8 h-8 border-2 border-gold-500 border-t-transparent rounded-full animate-spin" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen pt-20 pb-12 px-6">
+            <div className="max-w-6xl mx-auto">
+                {/* Breadcrumb */}
+                <div className="flex items-center gap-2 text-sm text-light-500 mb-6">
+                    <Link to="/dashboard" className="hover:text-gold-500 transition-colors">Dashboard</Link>
+                    <span>/</span>
+                    <span className="text-light-300">Video Preview</span>
+                </div>
+
+                <div className="grid lg:grid-cols-3 gap-8">
+                    {/* Video Player Area */}
+                    <div className="lg:col-span-2">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            className="glass-panel overflow-hidden"
+                        >
+                            {/* Player */}
+                            <div className="aspect-video bg-dark-900 flex items-center justify-center relative">
+                                {video.previewUrl ? (
+                                    <video
+                                        src={video.previewUrl}
+                                        controls
+                                        className="w-full h-full object-contain"
+                                        id="video-player"
+                                    />
+                                ) : (
+                                    <div className="text-center p-8">
+                                        <div className="w-16 h-16 bg-gold-500/10 border border-gold-500/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                                            <svg className="w-8 h-8 text-gold-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                            </svg>
+                                        </div>
+                                        <p className="text-light-400 mb-1">No preview available yet</p>
+                                        <p className="text-sm text-light-500">Generate a preview using the AI Terminal below</p>
+                                    </div>
+                                )}
+
+                                {/* Status Badge */}
+                                <div className="absolute top-4 right-4">
+                                    <span className={`text-xs px-3 py-1 rounded-full font-medium ${video.status === 'exported' ? 'bg-green-500/20 text-green-400' :
+                                            video.status === 'generating' ? 'bg-gold-500/20 text-gold-500 animate-pulse' :
+                                                video.status === 'preview' ? 'bg-blue-500/20 text-blue-400' :
+                                                    video.status === 'failed' ? 'bg-red-500/20 text-red-400' :
+                                                        'bg-dark-500 text-light-500'
+                                        }`}>
+                                        {video.status}
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/* Action Bar */}
+                            <div className="p-4 flex flex-wrap gap-3 border-t border-dark-400/30">
+                                <button
+                                    onClick={handleGenerate}
+                                    disabled={video.status === 'generating'}
+                                    className="btn-primary text-sm"
+                                    id="regenerate-btn"
+                                >
+                                    {video.status === 'generating' ? 'Generating...' : 'Generate / Regenerate'}
+                                </button>
+                                <button onClick={() => setShowTerminal(!showTerminal)} className="btn-secondary text-sm">
+                                    <span className="mr-1 font-mono">&gt;_</span> Terminal
+                                </button>
+                            </div>
+                        </motion.div>
+
+                        {/* Terminal */}
+                        {showTerminal && (
+                            <motion.div
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                className="mt-6"
+                            >
+                                <AITerminal videoId={id} />
+                            </motion.div>
+                        )}
+                    </div>
+
+                    {/* Sidebar */}
+                    <div className="space-y-6">
+                        {/* Script */}
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.1 }}
+                            className="card-static"
+                        >
+                            <h3 className="font-display text-lg font-semibold text-light-100 mb-3">Script</h3>
+                            <p className="text-sm text-light-400 whitespace-pre-wrap max-h-40 overflow-y-auto">
+                                {video.script || 'No script provided'}
+                            </p>
+                        </motion.div>
+
+                        {/* Voice Settings */}
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.15 }}
+                            className="card-static"
+                        >
+                            <h3 className="font-display text-lg font-semibold text-light-100 mb-3">Voice</h3>
+                            <div className="space-y-2 text-sm">
+                                <div className="flex justify-between">
+                                    <span className="text-light-500">Type</span>
+                                    <span className="text-light-300">{video.voice?.type || 'neutral'}</span>
+                                </div>
+                                <div className="flex justify-between">
+                                    <span className="text-light-500">Language</span>
+                                    <span className="text-light-300">{video.voice?.language || 'en'}</span>
+                                </div>
+                                <div className="flex justify-between">
+                                    <span className="text-light-500">Tone</span>
+                                    <span className="text-light-300">{video.voice?.tone || 'professional'}</span>
+                                </div>
+                                <div className="flex justify-between">
+                                    <span className="text-light-500">Speed</span>
+                                    <span className="text-light-300">{video.voice?.speed || 1.0}x</span>
+                                </div>
+                            </div>
+                        </motion.div>
+
+                        {/* Export */}
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: 0.2 }}
+                            className="card-static"
+                        >
+                            <h3 className="font-display text-lg font-semibold text-light-100 mb-3">Export Options</h3>
+                            <div className="space-y-3 mb-4">
+                                {(['9:16', '16:9', '1:1'] as const).map((fmt) => (
+                                    <label key={fmt} className="flex items-center gap-3 text-sm cursor-pointer">
+                                        <input
+                                            type="checkbox"
+                                            checked={exportFormats[fmt]}
+                                            onChange={(e) => setExportFormats({ ...exportFormats, [fmt]: e.target.checked })}
+                                            className="accent-gold-500"
+                                        />
+                                        <span className="text-light-300">{fmt} {fmt === '9:16' ? '(Vertical)' : fmt === '16:9' ? '(Landscape)' : '(Square)'}</span>
+                                    </label>
+                                ))}
+                            </div>
+                            <button
+                                className="btn-primary w-full text-sm"
+                                disabled={video.status !== 'preview'}
+                                id="export-btn"
+                            >
+                                Export Selected Formats
+                            </button>
+                        </motion.div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

client/src/pages/Privacy.tsx

@@ -0,0 +1,42 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+export default function Privacy() {
+    return (
+        <div className="min-h-screen pt-24 pb-16 px-6">
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="max-w-3xl mx-auto"
+            >
+                <Link to="/" className="text-sm text-light-500 hover:text-gold-500 transition-colors mb-6 inline-block">
+                    Back to Home
+                </Link>
+
+                <h1 className="font-display text-4xl font-bold text-light-100 mb-8">Privacy Policy</h1>
+
+                <div className="prose prose-invert max-w-none space-y-6 text-light-400 font-body leading-relaxed">
+                    <p><strong className="text-light-200">Last updated:</strong> March 2026</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">1. Information We Collect</h2>
+                    <p>We collect information you provide directly: email address, password (encrypted), project data, uploaded assets, and video generation preferences. We also collect usage data including session duration, feature usage patterns, and error logs for improving our service.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">2. How We Use Your Information</h2>
+                    <p>Your information is used to provide and improve the Director.AI service, process video generation requests, authenticate your account, send essential service notifications, and maintain security. We do not sell your personal data to third parties.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">3. Data Storage and Security</h2>
+                    <p>All data is stored on secure servers with encryption at rest and in transit. Passwords are hashed using bcrypt with a cost factor of 12. Uploaded assets and generated videos are stored in isolated user-specific directories.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">4. Data Retention</h2>
+                    <p>Account data is retained as long as your account is active. You may request deletion of your account and all associated data at any time by contacting support. Generated videos and uploaded assets are retained for 90 days after account deletion.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">5. Third-Party Services</h2>
+                    <p>Director.AI may integrate with payment processors (Stripe) for subscription management. These services have their own privacy policies. No personal data is shared with AI model providers beyond what is necessary for video generation.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">6. Contact</h2>
+                    <p>For privacy-related inquiries, contact the development team through the project repository.</p>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

client/src/pages/ProjectPage.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { motion } from 'framer-motion';
+import { AppDispatch, RootState } from '../store';
+import { fetchProject } from '../store/projectsSlice';
+import AITerminal from '../components/AITerminal';
+
+export default function ProjectPage() {
+    const { id } = useParams<{ id: string }>();
+    const dispatch = useDispatch<AppDispatch>();
+    const { current: project } = useSelector((state: RootState) => state.projects);
+    const [showTerminal, setShowTerminal] = useState(false);
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (id) dispatch(fetchProject(id));
+    }, [id, dispatch]);
+
+    if (!project) {
+        return (
+            <div className="min-h-screen pt-20 flex items-center justify-center">
+                <div className="w-8 h-8 border-2 border-gold-500 border-t-transparent rounded-full animate-spin" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen pt-20 pb-12 px-6">
+            <div className="max-w-6xl mx-auto">
+                {/* Breadcrumb */}
+                <div className="flex items-center gap-2 text-sm text-light-500 mb-6">
+                    <Link to="/dashboard" className="hover:text-gold-500 transition-colors">Dashboard</Link>
+                    <span>/</span>
+                    <span className="text-light-300">{project.name}</span>
+                </div>
+
+                {/* Header */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8"
+                >
+                    <div>
+                        <h1 className="font-display text-3xl font-bold text-light-100 mb-1">{project.name}</h1>
+                        <p className="text-light-500">
+                            {project.defaultPlatform} -- {project.defaultFormat} -- {project.videos?.length || 0} videos
+                        </p>
+                    </div>
+                    <div className="flex gap-3">
+                        <button onClick={() => setShowTerminal(!showTerminal)} className="btn-ghost text-sm">
+                            <span className="mr-1 font-mono">&gt;_</span> Terminal
+                        </button>
+                        <button
+                            onClick={() => navigate(`/project/${id}/create`)}
+                            className="btn-primary"
+                            id="create-video-btn"
+                        >
+                            Create Video
+                        </button>
+                    </div>
+                </motion.div>
+
+                {/* Terminal */}
+                {showTerminal && (
+                    <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        className="mb-8 overflow-hidden"
+                    >
+                        <AITerminal />
+                    </motion.div>
+                )}
+
+                {/* Videos */}
+                {(!project.videos || project.videos.length === 0) ? (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="card-static text-center py-16"
+                    >
+                        <h3 className="font-display text-xl text-light-100 mb-2">No videos yet</h3>
+                        <p className="text-light-500 mb-6">Create your first video in this project</p>
+                        <button onClick={() => navigate(`/project/${id}/create`)} className="btn-primary">
+                            Create First Video
+                        </button>
+                    </motion.div>
+                ) : (
+                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                        {project.videos.map((video: any, i: number) => (
+                            <motion.div
+                                key={video._id || i}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                transition={{ delay: i * 0.05 }}
+                            >
+                                <Link to={`/video/${video._id}/preview`} className="card block group">
+                                    <div className="flex items-center justify-between mb-3">
+                                        <span className={`text-xs px-2 py-1 rounded font-medium ${video.status === 'exported' ? 'bg-green-500/10 text-green-400' :
+                                                video.status === 'generating' ? 'bg-gold-500/10 text-gold-500' :
+                                                    video.status === 'failed' ? 'bg-red-500/10 text-red-400' :
+                                                        'bg-dark-500 text-light-500'
+                                            }`}>
+                                            {video.status || 'pending'}
+                                        </span>
+                                    </div>
+                                    <p className="text-sm text-light-400 line-clamp-3">
+                                        {video.script?.slice(0, 120) || 'No script yet'}...
+                                    </p>
+                                </Link>
+                            </motion.div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

client/src/pages/Register.tsx

@@ -0,0 +1,125 @@
+import { useState, FormEvent } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { AppDispatch, RootState } from '../store';
+import { registerUser, clearError } from '../store/authSlice';
+
+export default function Register() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [localError, setLocalError] = useState('');
+    const dispatch = useDispatch<AppDispatch>();
+    const navigate = useNavigate();
+    const { loading, error } = useSelector((state: RootState) => state.auth);
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setLocalError('');
+
+        if (password !== confirmPassword) {
+            setLocalError('Passwords do not match.');
+            return;
+        }
+        if (password.length < 8) {
+            setLocalError('Password must be at least 8 characters.');
+            return;
+        }
+
+        const result = await dispatch(registerUser({ email, password }));
+        if (registerUser.fulfilled.match(result)) {
+            navigate('/dashboard');
+        }
+    };
+
+    const displayError = localError || error;
+
+    return (
+        <div className="min-h-screen flex items-center justify-center pt-16 px-6">
+            <div className="absolute inset-0 bg-hero-gradient opacity-50" />
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                className="relative w-full max-w-md"
+            >
+                <div className="glass-panel p-8">
+                    <div className="text-center mb-8">
+                        <h1 className="font-display text-3xl font-bold text-light-100 mb-2">Create Account</h1>
+                        <p className="font-body text-light-500">Start creating faceless videos today</p>
+                    </div>
+
+                    {displayError && (
+                        <div className="mb-6 p-3 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm text-center">
+                            {displayError}
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-5">
+                        <div>
+                            <label htmlFor="register-email" className="block text-sm font-body text-light-400 mb-2">Email</label>
+                            <input
+                                id="register-email"
+                                type="email"
+                                value={email}
+                                onChange={(e) => { setEmail(e.target.value); dispatch(clearError()); setLocalError(''); }}
+                                className="input-field"
+                                placeholder="you@example.com"
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <label htmlFor="register-password" className="block text-sm font-body text-light-400 mb-2">Password</label>
+                            <input
+                                id="register-password"
+                                type="password"
+                                value={password}
+                                onChange={(e) => { setPassword(e.target.value); setLocalError(''); }}
+                                className="input-field"
+                                placeholder="Minimum 8 characters"
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <label htmlFor="register-confirm" className="block text-sm font-body text-light-400 mb-2">Confirm Password</label>
+                            <input
+                                id="register-confirm"
+                                type="password"
+                                value={confirmPassword}
+                                onChange={(e) => { setConfirmPassword(e.target.value); setLocalError(''); }}
+                                className="input-field"
+                                placeholder="Re-enter your password"
+                                required
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="btn-primary w-full py-3.5"
+                        >
+                            {loading ? 'Creating account...' : 'Create Account'}
+                        </button>
+                    </form>
+
+                    <p className="mt-6 text-center text-sm text-light-500">
+                        Already have an account?{' '}
+                        <Link to="/login" className="text-gold-500 hover:text-gold-400 font-medium transition-colors">
+                            Sign in
+                        </Link>
+                    </p>
+
+                    <p className="mt-4 text-center text-xs text-light-500/50">
+                        By creating an account, you agree to our{' '}
+                        <Link to="/terms" className="text-light-500/70 hover:text-gold-500 transition-colors">Terms</Link>
+                        {' '}and{' '}
+                        <Link to="/privacy" className="text-light-500/70 hover:text-gold-500 transition-colors">Privacy Policy</Link>.
+                    </p>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

client/src/pages/Terms.tsx

@@ -0,0 +1,48 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+export default function Terms() {
+    return (
+        <div className="min-h-screen pt-24 pb-16 px-6">
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="max-w-3xl mx-auto"
+            >
+                <Link to="/" className="text-sm text-light-500 hover:text-gold-500 transition-colors mb-6 inline-block">
+                    Back to Home
+                </Link>
+
+                <h1 className="font-display text-4xl font-bold text-light-100 mb-8">Terms of Use</h1>
+
+                <div className="prose prose-invert max-w-none space-y-6 text-light-400 font-body leading-relaxed">
+                    <p><strong className="text-light-200">Last updated:</strong> March 2026</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">1. Acceptance of Terms</h2>
+                    <p>By accessing or using Director.AI, you agree to be bound by these Terms of Use. If you do not agree to all terms, do not use the service.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">2. Description of Service</h2>
+                    <p>Director.AI is a web-based platform for creating faceless videos using AI-powered tools. The service includes script-to-video conversion, AI voice generation, subtitle creation, and multi-format video export.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">3. User Accounts</h2>
+                    <p>You must provide a valid email address and maintain the security of your account credentials. You are responsible for all activity under your account. Sharing account access is not permitted without prior authorization.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">4. Content and Ownership</h2>
+                    <p>You retain ownership of scripts, assets, and other content you provide. Videos generated through the platform are owned by you. Director.AI does not claim any rights to user-generated content. You are responsible for ensuring your content does not infringe on third-party rights.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">5. Acceptable Use</h2>
+                    <p>You agree not to use Director.AI for generating content that is illegal, harmful, defamatory, or infringes on the rights of others. Abuse of the AI generation system, including attempts to circumvent rate limits or usage quotas, may result in account suspension.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">6. Subscription and Payments</h2>
+                    <p>Free tier users receive a limited number of video generations per month. Paid subscriptions unlock additional features and higher usage limits. All payments are processed through Stripe. Subscriptions can be cancelled at any time.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">7. Limitation of Liability</h2>
+                    <p>Director.AI is provided "as is" without warranties of any kind. We are not liable for any damages arising from the use or inability to use the service, including lost profits or data loss.</p>
+
+                    <h2 className="font-display text-2xl font-semibold text-light-100 mt-10">8. Changes to Terms</h2>
+                    <p>We reserve the right to modify these terms at any time. Continued use of the service after changes constitutes acceptance of the updated terms.</p>
+                </div>
+            </motion.div>
+        </div>
+    );
+}

client/src/pages/VideoCreate.tsx

@@ -0,0 +1,353 @@
+import { useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { motion, AnimatePresence } from 'framer-motion';
+import { AppDispatch } from '../store';
+import { createVideo } from '../store/videosSlice';
+import AITerminal from '../components/AITerminal';
+
+const STEPS = [
+    { num: 1, title: 'Script', desc: 'Paste or write your video script' },
+    { num: 2, title: 'Voice', desc: 'Choose voice settings' },
+    { num: 3, title: 'Music', desc: 'Select background music' },
+    { num: 4, title: 'Style', desc: 'Set visual preferences' },
+    { num: 5, title: 'Assets', desc: 'Upload media files' },
+];
+
+export default function VideoCreate() {
+    const { projectId } = useParams<{ projectId: string }>();
+    const dispatch = useDispatch<AppDispatch>();
+    const navigate = useNavigate();
+    const [step, setStep] = useState(1);
+    const [showTerminal, setShowTerminal] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+
+    // Form state
+    const [script, setScript] = useState('');
+    const [voice, setVoice] = useState({
+        type: 'neutral',
+        language: 'en',
+        tone: 'professional',
+        speed: 1.0,
+    });
+    const [music, setMusic] = useState('');
+    const [style, setStyle] = useState({
+        fonts: { primary: 'Playfair Display', secondary: 'Montserrat' },
+        colors: { primary: '#1A1A1A', secondary: '#F5F5F5', accent: '#D4AF37' },
+        transitions: 'fade',
+        videoStyle: 'minimal',
+    });
+    const [files, setFiles] = useState<File[]>([]);
+
+    const next = () => setStep((s) => Math.min(s + 1, 5));
+    const prev = () => setStep((s) => Math.max(s - 1, 1));
+
+    const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            setFiles(Array.from(e.target.files));
+        }
+    }, []);
+
+    const handleGenerate = async () => {
+        if (!projectId || !script.trim()) return;
+        setSubmitting(true);
+
+        const videoData = {
+            script,
+            voice,
+            music: { filePath: music },
+            assets: files.map((f) => ({ type: 'clip' as const, path: f.name })),
+        };
+
+        const result = await dispatch(createVideo({ projectId, data: videoData }));
+        setSubmitting(false);
+
+        if (createVideo.fulfilled.match(result)) {
+            navigate(`/video/${result.payload._id}/preview`);
+        }
+    };
+
+    return (
+        <div className="min-h-screen pt-20 pb-12 px-6">
+            <div className="max-w-4xl mx-auto">
+                {/* Stepper */}
+                <div className="flex items-center justify-between mb-12 relative">
+                    <div className="absolute top-5 left-0 right-0 h-px bg-dark-400/30" />
+                    {STEPS.map((s) => (
+                        <div
+                            key={s.num}
+                            className="relative flex flex-col items-center cursor-pointer z-10"
+                            onClick={() => setStep(s.num)}
+                        >
+                            <div className={`w-10 h-10 rounded-full flex items-center justify-center font-body font-semibold text-sm transition-all duration-300 ${step === s.num
+                                    ? 'bg-gold-500 text-dark-900 shadow-gold'
+                                    : step > s.num
+                                        ? 'bg-gold-500/20 text-gold-500 border border-gold-500/40'
+                                        : 'bg-dark-600 text-light-500 border border-dark-400/30'
+                                }`}>
+                                {step > s.num ? (
+                                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                ) : s.num}
+                            </div>
+                            <span className={`mt-2 text-xs font-body transition-colors ${step === s.num ? 'text-gold-500' : 'text-light-500'
+                                }`}>
+                                {s.title}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Step Content */}
+                <AnimatePresence mode="wait">
+                    <motion.div
+                        key={step}
+                        initial={{ opacity: 0, x: 20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: -20 }}
+                        transition={{ duration: 0.3 }}
+                        className="glass-panel p-8 mb-8"
+                    >
+                        {step === 1 && (
+                            <div>
+                                <h2 className="font-display text-2xl font-bold text-light-100 mb-2">Your Script</h2>
+                                <p className="text-light-500 mb-6">Paste your video script or write it directly. This will be used for voiceover and subtitles.</p>
+                                <textarea
+                                    value={script}
+                                    onChange={(e) => setScript(e.target.value)}
+                                    className="input-field h-48 resize-none"
+                                    placeholder="Paste your video script here...&#10;&#10;Example: Did you know that 90% of successful content creators use faceless videos? Here is why this strategy works and how you can start today..."
+                                    id="script-input"
+                                />
+                                <p className="mt-2 text-xs text-light-500/60">{script.length} characters</p>
+                            </div>
+                        )}
+
+                        {step === 2 && (
+                            <div>
+                                <h2 className="font-display text-2xl font-bold text-light-100 mb-2">Voice Settings</h2>
+                                <p className="text-light-500 mb-6">Configure the AI voiceover for your video.</p>
+                                <div className="grid sm:grid-cols-2 gap-5">
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Voice Type</label>
+                                        <select value={voice.type} onChange={(e) => setVoice({ ...voice, type: e.target.value })} className="input-field" id="voice-type">
+                                            <option value="neutral">Neutral</option>
+                                            <option value="male">Male</option>
+                                            <option value="female">Female</option>
+                                            <option value="deep">Deep</option>
+                                            <option value="energetic">Energetic</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Language</label>
+                                        <select value={voice.language} onChange={(e) => setVoice({ ...voice, language: e.target.value })} className="input-field" id="voice-language">
+                                            <option value="en">English</option>
+                                            <option value="es">Spanish</option>
+                                            <option value="fr">French</option>
+                                            <option value="de">German</option>
+                                            <option value="pt">Portuguese</option>
+                                            <option value="ja">Japanese</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Tone</label>
+                                        <select value={voice.tone} onChange={(e) => setVoice({ ...voice, tone: e.target.value })} className="input-field" id="voice-tone">
+                                            <option value="professional">Professional</option>
+                                            <option value="casual">Casual</option>
+                                            <option value="dramatic">Dramatic</option>
+                                            <option value="upbeat">Upbeat</option>
+                                            <option value="calm">Calm</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Speed: {voice.speed}x</label>
+                                        <input
+                                            type="range"
+                                            min="0.5"
+                                            max="2.0"
+                                            step="0.1"
+                                            value={voice.speed}
+                                            onChange={(e) => setVoice({ ...voice, speed: parseFloat(e.target.value) })}
+                                            className="w-full accent-gold-500"
+                                            id="voice-speed"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {step === 3 && (
+                            <div>
+                                <h2 className="font-display text-2xl font-bold text-light-100 mb-2">Background Music</h2>
+                                <p className="text-light-500 mb-6">Choose music for your video or upload your own track.</p>
+                                <div className="space-y-3">
+                                    {['None', 'Ambient Calm', 'Upbeat Energy', 'Corporate', 'Cinematic', 'Lo-Fi Chill'].map((track) => (
+                                        <label
+                                            key={track}
+                                            className={`card-static flex items-center gap-4 cursor-pointer transition-all ${music === track ? 'border-gold-500/40 shadow-gold' : ''
+                                                }`}
+                                        >
+                                            <input
+                                                type="radio"
+                                                name="music"
+                                                value={track}
+                                                checked={music === track}
+                                                onChange={(e) => setMusic(e.target.value)}
+                                                className="accent-gold-500"
+                                            />
+                                            <span className="text-light-300">{track}</span>
+                                        </label>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {step === 4 && (
+                            <div>
+                                <h2 className="font-display text-2xl font-bold text-light-100 mb-2">Visual Style</h2>
+                                <p className="text-light-500 mb-6">Customize the look and feel of your video.</p>
+                                <div className="grid sm:grid-cols-2 gap-5">
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Video Style</label>
+                                        <select
+                                            value={style.videoStyle}
+                                            onChange={(e) => setStyle({ ...style, videoStyle: e.target.value })}
+                                            className="input-field"
+                                            id="video-style"
+                                        >
+                                            <option value="minimal">Minimal</option>
+                                            <option value="dynamic">Dynamic</option>
+                                            <option value="cinematic">Cinematic</option>
+                                            <option value="bold">Bold</option>
+                                            <option value="elegant">Elegant</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Transitions</label>
+                                        <select
+                                            value={style.transitions}
+                                            onChange={(e) => setStyle({ ...style, transitions: e.target.value })}
+                                            className="input-field"
+                                            id="transitions"
+                                        >
+                                            <option value="fade">Fade</option>
+                                            <option value="slide">Slide</option>
+                                            <option value="zoom">Zoom</option>
+                                            <option value="dissolve">Dissolve</option>
+                                            <option value="none">None</option>
+                                        </select>
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Accent Color</label>
+                                        <div className="flex items-center gap-3">
+                                            <input
+                                                type="color"
+                                                value={style.colors.accent}
+                                                onChange={(e) => setStyle({ ...style, colors: { ...style.colors, accent: e.target.value } })}
+                                                className="w-10 h-10 rounded border border-dark-400/30 cursor-pointer"
+                                            />
+                                            <span className="text-sm text-light-500 font-mono">{style.colors.accent}</span>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm text-light-400 mb-2">Headline Font</label>
+                                        <select
+                                            value={style.fonts.primary}
+                                            onChange={(e) => setStyle({ ...style, fonts: { ...style.fonts, primary: e.target.value } })}
+                                            className="input-field"
+                                        >
+                                            <option value="Playfair Display">Playfair Display</option>
+                                            <option value="Montserrat">Montserrat</option>
+                                            <option value="Inter">Inter</option>
+                                            <option value="Roboto">Roboto</option>
+                                            <option value="Lora">Lora</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {step === 5 && (
+                            <div>
+                                <h2 className="font-display text-2xl font-bold text-light-100 mb-2">Upload Assets</h2>
+                                <p className="text-light-500 mb-6">Add clips, images, or logos to include in your video.</p>
+                                <div className="border-2 border-dashed border-dark-400/50 rounded-xl p-8 text-center hover:border-gold-500/40 transition-colors">
+                                    <input
+                                        type="file"
+                                        multiple
+                                        onChange={handleFileChange}
+                                        className="hidden"
+                                        id="asset-upload"
+                                        accept="image/*,video/*,audio/*"
+                                    />
+                                    <label htmlFor="asset-upload" className="cursor-pointer">
+                                        <div className="w-12 h-12 bg-gold-500/10 border border-gold-500/20 rounded-xl flex items-center justify-center mx-auto mb-4">
+                                            <span className="text-gold-500 text-2xl">+</span>
+                                        </div>
+                                        <p className="text-light-300 font-medium mb-1">Drag and drop or click to upload</p>
+                                        <p className="text-sm text-light-500">Images, videos, logos, and audio (max 100MB each)</p>
+                                    </label>
+                                </div>
+                                {files.length > 0 && (
+                                    <div className="mt-4 space-y-2">
+                                        {files.map((file, i) => (
+                                            <div key={i} className="flex items-center justify-between card-static py-3">
+                                                <span className="text-sm text-light-300">{file.name}</span>
+                                                <span className="text-xs text-light-500">{(file.size / 1024 / 1024).toFixed(1)} MB</span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </motion.div>
+                </AnimatePresence>
+
+                {/* Navigation + Terminal Toggle */}
+                <div className="flex items-center justify-between">
+                    <button
+                        onClick={prev}
+                        disabled={step === 1}
+                        className="btn-ghost disabled:opacity-30"
+                    >
+                        Previous
+                    </button>
+
+                    <button
+                        onClick={() => setShowTerminal(!showTerminal)}
+                        className="btn-ghost text-sm"
+                    >
+                        <span className="mr-1 font-mono">&gt;_</span> Terminal
+                    </button>
+
+                    {step < 5 ? (
+                        <button onClick={next} className="btn-primary">
+                            Next Step
+                        </button>
+                    ) : (
+                        <button
+                            onClick={handleGenerate}
+                            disabled={submitting || !script.trim()}
+                            className="btn-primary px-10"
+                            id="generate-btn"
+                        >
+                            {submitting ? 'Generating...' : 'Generate Preview'}
+                        </button>
+                    )}
+                </div>
+
+                {/* Terminal Panel */}
+                {showTerminal && (
+                    <motion.div
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        className="mt-8 overflow-hidden"
+                    >
+                        <AITerminal />
+                    </motion.div>
+                )}
+            </div>
+        </div>
+    );
+}

client/src/services/api.ts

@@ -0,0 +1,79 @@
+import axios from 'axios';
+
+const API_BASE = '/api';
+
+const api = axios.create({
+    baseURL: API_BASE,
+    headers: { 'Content-Type': 'application/json' },
+});
+
+// Attach JWT token to every request
+api.interceptors.request.use((config) => {
+    const token = localStorage.getItem('director_token');
+    if (token && config.headers) {
+        config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+});
+
+// Handle 401 responses globally
+api.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        if (error.response?.status === 401) {
+            localStorage.removeItem('director_token');
+            localStorage.removeItem('director_user');
+            window.location.href = '/login';
+        }
+        return Promise.reject(error);
+    }
+);
+
+// Auth
+export const authAPI = {
+    register: (email: string, password: string) =>
+        api.post('/auth/register', { email, password }),
+    login: (email: string, password: string) =>
+        api.post('/auth/login', { email, password }),
+};
+
+// Projects
+export const projectsAPI = {
+    list: () => api.get('/projects'),
+    get: (id: string) => api.get(`/projects/${id}`),
+    create: (data: { name: string; defaultPlatform: string; defaultFormat: string }) =>
+        api.post('/projects', data),
+    delete: (id: string) => api.delete(`/projects/${id}`),
+};
+
+// Videos
+export const videosAPI = {
+    create: (projectId: string, data: any) =>
+        api.post(`/videos/${projectId}`, data),
+    get: (id: string) => api.get(`/videos/${id}`),
+    generate: (id: string) => api.post(`/videos/${id}/generate`),
+    status: (id: string) => api.get(`/videos/${id}/status`),
+    export: (id: string, data: { formats: string[]; quality: string }) =>
+        api.post(`/videos/${id}/export`, data),
+};
+
+// Presets
+export const presetsAPI = {
+    list: () => api.get('/presets'),
+    create: (data: any) => api.post('/presets', data),
+    update: (id: string, data: any) => api.put(`/presets/${id}`, data),
+    delete: (id: string) => api.delete(`/presets/${id}`),
+};
+
+// Assets
+export const assetsAPI = {
+    upload: (files: FileList | File[]) => {
+        const formData = new FormData();
+        Array.from(files).forEach((file) => formData.append('files', file));
+        return api.post('/assets/upload', formData, {
+            headers: { 'Content-Type': 'multipart/form-data' },
+        });
+    },
+};
+
+export default api;

client/src/store/authSlice.ts

@@ -0,0 +1,104 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import { authAPI } from '../services/api';
+
+interface User {
+    id: string;
+    email: string;
+    subscription: string;
+    role: string;
+    videosGenerated?: number;
+}
+
+interface AuthState {
+    user: User | null;
+    token: string | null;
+    loading: boolean;
+    error: string | null;
+}
+
+const savedToken = localStorage.getItem('director_token');
+const savedUser = localStorage.getItem('director_user');
+
+const initialState: AuthState = {
+    user: savedUser ? JSON.parse(savedUser) : null,
+    token: savedToken || null,
+    loading: false,
+    error: null,
+};
+
+export const registerUser = createAsyncThunk(
+    'auth/register',
+    async ({ email, password }: { email: string; password: string }, { rejectWithValue }) => {
+        try {
+            const response = await authAPI.register(email, password);
+            return response.data;
+        } catch (error: any) {
+            return rejectWithValue(error.response?.data?.error || 'Registration failed.');
+        }
+    }
+);
+
+export const loginUser = createAsyncThunk(
+    'auth/login',
+    async ({ email, password }: { email: string; password: string }, { rejectWithValue }) => {
+        try {
+            const response = await authAPI.login(email, password);
+            return response.data;
+        } catch (error: any) {
+            return rejectWithValue(error.response?.data?.error || 'Login failed.');
+        }
+    }
+);
+
+const authSlice = createSlice({
+    name: 'auth',
+    initialState,
+    reducers: {
+        logout(state) {
+            state.user = null;
+            state.token = null;
+            state.error = null;
+            localStorage.removeItem('director_token');
+            localStorage.removeItem('director_user');
+        },
+        clearError(state) {
+            state.error = null;
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(registerUser.pending, (state) => {
+                state.loading = true;
+                state.error = null;
+            })
+            .addCase(registerUser.fulfilled, (state, action: PayloadAction<any>) => {
+                state.loading = false;
+                state.user = action.payload.user;
+                state.token = action.payload.token;
+                localStorage.setItem('director_token', action.payload.token);
+                localStorage.setItem('director_user', JSON.stringify(action.payload.user));
+            })
+            .addCase(registerUser.rejected, (state, action) => {
+                state.loading = false;
+                state.error = action.payload as string;
+            })
+            .addCase(loginUser.pending, (state) => {
+                state.loading = true;
+                state.error = null;
+            })
+            .addCase(loginUser.fulfilled, (state, action: PayloadAction<any>) => {
+                state.loading = false;
+                state.user = action.payload.user;
+                state.token = action.payload.token;
+                localStorage.setItem('director_token', action.payload.token);
+                localStorage.setItem('director_user', JSON.stringify(action.payload.user));
+            })
+            .addCase(loginUser.rejected, (state, action) => {
+                state.loading = false;
+                state.error = action.payload as string;
+            });
+    },
+});
+
+export const { logout, clearError } = authSlice.actions;
+export default authSlice.reducer;

client/src/store/index.ts

@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+import authReducer from './authSlice';
+import projectsReducer from './projectsSlice';
+import videosReducer from './videosSlice';
+
+export const store = configureStore({
+    reducer: {
+        auth: authReducer,
+        projects: projectsReducer,
+        videos: videosReducer,
+    },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

client/src/store/projectsSlice.ts

@@ -0,0 +1,86 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import { projectsAPI } from '../services/api';
+
+interface Project {
+    _id: string;
+    name: string;
+    defaultPlatform: string;
+    defaultFormat: string;
+    videos: any[];
+    createdAt: string;
+}
+
+interface ProjectsState {
+    items: Project[];
+    current: Project | null;
+    loading: boolean;
+    error: string | null;
+}
+
+const initialState: ProjectsState = {
+    items: [],
+    current: null,
+    loading: false,
+    error: null,
+};
+
+export const fetchProjects = createAsyncThunk('projects/fetchAll', async (_, { rejectWithValue }) => {
+    try {
+        const response = await projectsAPI.list();
+        return response.data;
+    } catch (error: any) {
+        return rejectWithValue(error.response?.data?.error || 'Failed to fetch projects.');
+    }
+});
+
+export const fetchProject = createAsyncThunk('projects/fetchOne', async (id: string, { rejectWithValue }) => {
+    try {
+        const response = await projectsAPI.get(id);
+        return response.data;
+    } catch (error: any) {
+        return rejectWithValue(error.response?.data?.error || 'Failed to fetch project.');
+    }
+});
+
+export const createProject = createAsyncThunk(
+    'projects/create',
+    async (data: { name: string; defaultPlatform: string; defaultFormat: string }, { rejectWithValue }) => {
+        try {
+            const response = await projectsAPI.create(data);
+            return response.data;
+        } catch (error: any) {
+            return rejectWithValue(error.response?.data?.error || 'Failed to create project.');
+        }
+    }
+);
+
+const projectsSlice = createSlice({
+    name: 'projects',
+    initialState,
+    reducers: {
+        clearCurrent(state) {
+            state.current = null;
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchProjects.pending, (state) => { state.loading = true; state.error = null; })
+            .addCase(fetchProjects.fulfilled, (state, action: PayloadAction<Project[]>) => {
+                state.loading = false;
+                state.items = action.payload;
+            })
+            .addCase(fetchProjects.rejected, (state, action) => {
+                state.loading = false;
+                state.error = action.payload as string;
+            })
+            .addCase(fetchProject.fulfilled, (state, action: PayloadAction<Project>) => {
+                state.current = action.payload;
+            })
+            .addCase(createProject.fulfilled, (state, action: PayloadAction<Project>) => {
+                state.items.unshift(action.payload);
+            });
+    },
+});
+
+export const { clearCurrent } = projectsSlice.actions;
+export default projectsSlice.reducer;

client/src/store/videosSlice.ts

@@ -0,0 +1,105 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import { videosAPI } from '../services/api';
+
+interface Video {
+    _id: string;
+    projectId: string;
+    script: string;
+    voice: any;
+    music: any;
+    status: string;
+    previewUrl: string;
+    exportUrls: any[];
+    cliLog: string[];
+    createdAt: string;
+}
+
+interface VideosState {
+    items: Video[];
+    current: Video | null;
+    loading: boolean;
+    error: string | null;
+}
+
+const initialState: VideosState = {
+    items: [],
+    current: null,
+    loading: false,
+    error: null,
+};
+
+export const fetchVideo = createAsyncThunk('videos/fetchOne', async (id: string, { rejectWithValue }) => {
+    try {
+        const response = await videosAPI.get(id);
+        return response.data;
+    } catch (error: any) {
+        return rejectWithValue(error.response?.data?.error || 'Failed to fetch video.');
+    }
+});
+
+export const createVideo = createAsyncThunk(
+    'videos/create',
+    async ({ projectId, data }: { projectId: string; data: any }, { rejectWithValue }) => {
+        try {
+            const response = await videosAPI.create(projectId, data);
+            return response.data;
+        } catch (error: any) {
+            return rejectWithValue(error.response?.data?.error || 'Failed to create video.');
+        }
+    }
+);
+
+export const generateVideo = createAsyncThunk('videos/generate', async (id: string, { rejectWithValue }) => {
+    try {
+        const response = await videosAPI.generate(id);
+        return response.data;
+    } catch (error: any) {
+        return rejectWithValue(error.response?.data?.error || 'Failed to generate video.');
+    }
+});
+
+export const pollVideoStatus = createAsyncThunk('videos/pollStatus', async (id: string, { rejectWithValue }) => {
+    try {
+        const response = await videosAPI.status(id);
+        return response.data;
+    } catch (error: any) {
+        return rejectWithValue(error.response?.data?.error || 'Failed to poll status.');
+    }
+});
+
+const videosSlice = createSlice({
+    name: 'videos',
+    initialState,
+    reducers: {
+        clearCurrentVideo(state) {
+            state.current = null;
+        },
+        updateVideoFromSocket(state, action: PayloadAction<Partial<Video> & { _id: string }>) {
+            const idx = state.items.findIndex((v) => v._id === action.payload._id);
+            if (idx !== -1) {
+                state.items[idx] = { ...state.items[idx], ...action.payload };
+            }
+            if (state.current?._id === action.payload._id) {
+                state.current = { ...state.current, ...action.payload };
+            }
+        },
+    },
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchVideo.fulfilled, (state, action: PayloadAction<Video>) => {
+                state.current = action.payload;
+            })
+            .addCase(createVideo.fulfilled, (state, action: PayloadAction<Video>) => {
+                state.items.unshift(action.payload);
+                state.current = action.payload;
+            })
+            .addCase(pollVideoStatus.fulfilled, (state, action: PayloadAction<any>) => {
+                if (state.current) {
+                    state.current = { ...state.current, ...action.payload };
+                }
+            });
+    },
+});
+
+export const { clearCurrentVideo, updateVideoFromSocket } = videosSlice.actions;
+export default videosSlice.reducer;

client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

client/tailwind.config.js

@@ -0,0 +1,102 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                dark: {
+                    900: '#0A0A0A',
+                    800: '#111111',
+                    700: '#1A1A1A',
+                    600: '#222222',
+                    500: '#2A2A2A',
+                    400: '#333333',
+                    300: '#444444',
+                },
+                gold: {
+                    100: '#FFF8E1',
+                    200: '#FFECB3',
+                    300: '#FFD54F',
+                    400: '#E8C547',
+                    500: '#D4AF37',
+                    600: '#C49B30',
+                    700: '#A67C29',
+                    800: '#8B6914',
+                    900: '#6B4F10',
+                },
+                light: {
+                    100: '#FFFFFF',
+                    200: '#FAFAFA',
+                    300: '#F5F5F5',
+                    400: '#E0E0E0',
+                    500: '#BDBDBD',
+                },
+            },
+            fontFamily: {
+                display: ['Playfair Display', 'Georgia', 'serif'],
+                body: ['Montserrat', 'Helvetica', 'Arial', 'sans-serif'],
+            },
+            backgroundImage: {
+                'gold-gradient': 'linear-gradient(135deg, #D4AF37 0%, #F5E290 50%, #D4AF37 100%)',
+                'dark-gradient': 'linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%)',
+                'hero-gradient': 'linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(10,10,10,0.95) 50%, rgba(212,175,55,0.05) 100%)',
+                'card-gradient': 'linear-gradient(145deg, rgba(42,42,42,0.6) 0%, rgba(17,17,17,0.8) 100%)',
+            },
+            boxShadow: {
+                'gold': '0 0 20px rgba(212, 175, 55, 0.15)',
+                'gold-lg': '0 0 40px rgba(212, 175, 55, 0.2)',
+                'gold-glow': '0 0 60px rgba(212, 175, 55, 0.3)',
+                'card': '0 8px 32px rgba(0, 0, 0, 0.4)',
+                'card-hover': '0 16px 48px rgba(0, 0, 0, 0.6)',
+            },
+            animation: {
+                'fade-in': 'fadeIn 0.6s ease-out forwards',
+                'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
+                'fade-in-down': 'fadeInDown 0.8s ease-out forwards',
+                'slide-in-left': 'slideInLeft 0.8s ease-out forwards',
+                'slide-in-right': 'slideInRight 0.8s ease-out forwards',
+                'gold-shimmer': 'goldShimmer 3s ease-in-out infinite',
+                'pulse-gold': 'pulseGold 2s ease-in-out infinite',
+                'float': 'float 6s ease-in-out infinite',
+            },
+            keyframes: {
+                fadeIn: {
+                    '0%': { opacity: '0' },
+                    '100%': { opacity: '1' },
+                },
+                fadeInUp: {
+                    '0%': { opacity: '0', transform: 'translateY(30px)' },
+                    '100%': { opacity: '1', transform: 'translateY(0)' },
+                },
+                fadeInDown: {
+                    '0%': { opacity: '0', transform: 'translateY(-30px)' },
+                    '100%': { opacity: '1', transform: 'translateY(0)' },
+                },
+                slideInLeft: {
+                    '0%': { opacity: '0', transform: 'translateX(-50px)' },
+                    '100%': { opacity: '1', transform: 'translateX(0)' },
+                },
+                slideInRight: {
+                    '0%': { opacity: '0', transform: 'translateX(50px)' },
+                    '100%': { opacity: '1', transform: 'translateX(0)' },
+                },
+                goldShimmer: {
+                    '0%, 100%': { backgroundPosition: '200% center' },
+                    '50%': { backgroundPosition: '-200% center' },
+                },
+                pulseGold: {
+                    '0%, 100%': { boxShadow: '0 0 20px rgba(212, 175, 55, 0.15)' },
+                    '50%': { boxShadow: '0 0 40px rgba(212, 175, 55, 0.35)' },
+                },
+                float: {
+                    '0%, 100%': { transform: 'translateY(0)' },
+                    '50%': { transform: 'translateY(-10px)' },
+                },
+            },
+        },
+    },
+    plugins: [],
+};

client/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": true,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noFallthroughCasesInSwitch": true,
+        "forceConsistentCasingInFileNames": true,
+        "baseUrl": "./src",
+        "paths": {
+            "@/*": [
+                "./*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}

client/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:5000',
+                changeOrigin: true,
+            },
+        },
+    },
+});

client/vite.config.ts.timestamp-1772602542886-63bad0f79f7d48.mjs

@@ -0,0 +1,19 @@
+// vite.config.ts
+import { defineConfig } from "file:///C:/Users/User/Desktop/debugrem/1st-hackaton/node_modules/vite/dist/node/index.js";
+import react from "file:///C:/Users/User/Desktop/debugrem/1st-hackaton/node_modules/@vitejs/plugin-react/dist/index.js";
+var vite_config_default = defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": {
+        target: "http://localhost:5000",
+        changeOrigin: true
+      }
+    }
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxVc2VyXFxcXERlc2t0b3BcXFxcZGVidWdyZW1cXFxcMXN0LWhhY2thdG9uXFxcXGNsaWVudFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiQzpcXFxcVXNlcnNcXFxcVXNlclxcXFxEZXNrdG9wXFxcXGRlYnVncmVtXFxcXDFzdC1oYWNrYXRvblxcXFxjbGllbnRcXFxcdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL0M6L1VzZXJzL1VzZXIvRGVza3RvcC9kZWJ1Z3JlbS8xc3QtaGFja2F0b24vY2xpZW50L3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSc7XHJcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCc7XHJcblxyXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xyXG4gICAgcGx1Z2luczogW3JlYWN0KCldLFxyXG4gICAgc2VydmVyOiB7XHJcbiAgICAgICAgcG9ydDogNTE3MyxcclxuICAgICAgICBwcm94eToge1xyXG4gICAgICAgICAgICAnL2FwaSc6IHtcclxuICAgICAgICAgICAgICAgIHRhcmdldDogJ2h0dHA6Ly9sb2NhbGhvc3Q6NTAwMCcsXHJcbiAgICAgICAgICAgICAgICBjaGFuZ2VPcmlnaW46IHRydWUsXHJcbiAgICAgICAgICAgIH0sXHJcbiAgICAgICAgfSxcclxuICAgIH0sXHJcbn0pO1xyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXNWLFNBQVMsb0JBQW9CO0FBQ25YLE9BQU8sV0FBVztBQUVsQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUN4QixTQUFTLENBQUMsTUFBTSxDQUFDO0FBQUEsRUFDakIsUUFBUTtBQUFBLElBQ0osTUFBTTtBQUFBLElBQ04sT0FBTztBQUFBLE1BQ0gsUUFBUTtBQUFBLFFBQ0osUUFBUTtBQUFBLFFBQ1IsY0FBYztBQUFBLE1BQ2xCO0FBQUEsSUFDSjtBQUFBLEVBQ0o7QUFDSixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=

data/db/WiredTiger

@@ -0,0 +1,2 @@
+WiredTiger
+WiredTiger 12.0.0: (November 15, 2024)

data/db/diagnostic.data/metrics.2026-03-04T05-33-55Z-00000

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce2f313bfbb0af1eec51305c50aac2c050c884b128342c8efe85febf8a466d2c
+size 606393

data/db/journal/WiredTigerLog.0000000001

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c59ea56b3830deb36e006e5f651f6283cd34d7727f139a48e09f8b23b1e44f70
+size 104857600

data/db/journal/WiredTigerPreplog.0000000001

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:48747572eb4a79fdc2ff6fe7add9ce4a4382a3935bc26d5f24b5ae358e13755f
+size 104857600

data/db/mongod.lock

@@ -0,0 +1 @@
+10952

our_logging/1_implementation_plan.md.resolved

@@ -0,0 +1,107 @@
+# Director.AI - Faceless Video Creation Platform
+
+Full-stack web app: users input scripts, customize styles/voices/music/assets, and generate videos for social platforms. Luxury dark-mode aesthetic with gold accents.
+
+## Novel CLI Bridge Approach (No Mocks, No Simulations)
+
+> [!IMPORTANT]
+> **Real CLI Bridge**: The webapp includes a built-in chatbox/CLI terminal that acts as a **live bridge** to the actual Google Antigravity CLI running on the host machine. When a user types a prompt in the webapp, it is sent to the backend, which spawns a real Antigravity CLI process, pipes the prompt in, captures the output, and streams it back to the frontend in real-time via WebSocket. This is NOT a simulation -- it is the real CLI doing real work.
+
+**How it works:**
+1. User types a prompt in the webapp's AI Terminal panel (e.g., "Generate a voiceover for this script in a warm male voice")
+2. Frontend sends the prompt to the backend via WebSocket
+3. Backend spawns `antigravity-cli` (or pipes to a persistent session) using `child_process`
+4. CLI output is streamed back line-by-line to the frontend via WebSocket
+5. Backend parses output for generated file paths, status updates, errors
+6. Generated assets (audio, video, subtitles) are saved to the project's asset folder and linked to the Video record in MongoDB
+
+**Benefits:**
+- Zero mocking -- every AI task uses the real Antigravity CLI
+- The webapp becomes an orchestration layer on top of the CLI
+- Users can also issue freeform prompts for custom tasks the predefined workflows don't cover
+
+## User Review Required
+
+> [!WARNING]
+> **No `npm install` auto-run**: Per your rules, I will NOT run `npm install`. I'll prepare all files and provide commands for you to run manually.
+
+> [!IMPORTANT]
+> **MongoDB + Redis required**: You'll need these running locally or via free cloud tiers (Atlas free, Redis Cloud free). Connection strings go in `.env`.
+
+---
+
+## Proposed Changes
+
+### Phase 1: Project Scaffolding
+
+#### [NEW] Root files
+- `package.json` (workspace), `.gitignore`, `.env.example`
+
+#### [NEW] `server/` - Express + TypeScript backend
+- `server/package.json`, `server/tsconfig.json`
+- `server/src/index.ts` - Express server (port 5000) + WebSocket server (Socket.IO)
+- `server/src/config/` - Env config, DB connection, Redis connection
+- `server/src/middleware/` - Auth (JWT), rate limiting, error handling
+- `server/src/models/` - Mongoose: User, Project, Video, Preset
+- `server/src/routes/` - REST: auth, projects, videos, presets, assets, admin
+- `server/src/services/cliBridge.ts` - **Core**: spawns real Antigravity CLI, streams I/O via WebSocket
+- `server/src/services/queueService.ts` - Bull.js job queue calling the CLI bridge
+- `server/src/services/tokenTracker.ts` - Redis counter for CLI token usage
+- `server/src/utils/logger.ts` - Winston logging
+- `server/src/seed.ts` - Sample data seeder
+
+#### [NEW] `client/` - Vite + React + TypeScript frontend
+- Tailwind CSS: `#1A1A1A` bg, `#F5F5F5` text, `#D4AF37` gold
+- Fonts: Playfair Display (headlines), Montserrat (body)
+- Framer Motion animations
+- Pages: Landing, Auth, Dashboard, Project, VideoCreation (5-step wizard), Preview, Export
+- **AI Terminal component**: Real-time chatbox connected to backend CLI bridge via WebSocket
+- Redux Toolkit store, Axios API client
+
+---
+
+### Phase 2: Backend Core
+
+**Models**: User (email, bcrypt password, subscription, role), Project (userId, platform, format), Video (script, voice, music, style, assets, status), Preset (fonts, colors, transitions)
+
+**Routes**: `/api/auth/*`, `/api/projects/*`, `/api/videos/*`, `/api/presets/*`, `/api/assets/upload`, `/api/admin/queue`
+
+**CLI Bridge Service** (`cliBridge.ts`):
+- `spawnCLI(command, args)` -- spawns `child_process` with the real CLI
+- Streams stdout/stderr to the WebSocket room for the requesting user
+- Parses output for file paths and status codes
+- Handles errors gracefully (token limits, crashes) with user notification
+
+**Queue Service**: Bull.js jobs call `cliBridge` for: `generateVoice`, `generateSubtitles`, `assembleVideo`, `exportVideo`
+
+---
+
+### Phase 3: Frontend
+
+**Landing**: Hero, How It Works, Features, Pricing tiers, FAQ accordion, CTA
+**Dashboard**: Project cards, create project modal
+**Video Wizard**: Script input > Voice config > Music selection > Style preset > Asset upload > Generate
+**AI Terminal**: Full-width chatbox panel, real-time streaming output, command history
+**Preview**: HTML5 player, regenerate/export controls
+**Export**: Format/quality selectors, download links
+
+---
+
+### Phase 4: Polish
+
+- Legal pages (Privacy Policy, Terms)
+- Seed script
+- README.md
+
+---
+
+## Verification Plan
+
+### Manual Verification
+1. `cd server && npm run dev` -- backend starts on :5000
+2. `cd client && npm run dev` -- frontend starts on :5173
+3. Landing page: luxury dark design, gold accents, animations
+4. Register/login flow returns JWT
+5. AI Terminal: type a prompt, verify it reaches backend and WebSocket streams output
+6. Video wizard: navigate all 5 steps
+7. API endpoints respond correctly via dev tools

our_logging/1_prompt.md

@@ -0,0 +1,97 @@
+You are an expert full-stack developer and AI system architect tasked with creating a complete, end-to-end web application for faceless video creation called Director.AI. This application allows users to input scripts, customize styles, voices, music, and assets, and generate optimized videos for social platforms without showing faces. The design must evoke luxury through elegant typography, subtle gradients, high-contrast dark modes with gold accents, spacious layouts, and premium animations like smooth fades and parallax effects. Use no emojis in any part of the implementation or documentation.
+
+Follow these specifications precisely to build the system. The application must be self-contained, with no reliance on external paid APIs or subscriptions for core functionality. Instead, integrate the Google Antigravity system CLI (a command-line interface providing access to strong AI models with no subscription costs, a decent weekly token limit, and capabilities for text-to-speech, video editing simulation, subtitle generation, and asset integration). All AI-driven tasks (voiceover generation, subtitle timing, video assembly, and style application) will be executed via shell commands to this CLI from the backend. Assume the CLI is installed on the server and accessible via Node.js child_process or equivalent. Handle token limits by queuing jobs and notifying users of delays if limits are approached.
+
+### 1. Overall Architecture
+- **Frontend**: Use React.js with TypeScript for the user interface. Implement routing with React Router. Style with Tailwind CSS, customized for a luxurious theme: base colors #1A1A1A (dark background), #F5F5F5 (light text), #D4AF37 (gold accents for buttons and highlights). Use Framer Motion for animations. Ensure responsive design for desktop and mobile.
+- **Backend**: Use Node.js with Express.js for the server. Handle authentication with JWT. Use MongoDB as the database for storing user data, projects, presets, and job queues. Implement a job queue system with Bull.js (Redis-based) to manage CLI calls asynchronously, respecting token limits.
+- **Deployment**: Design for easy deployment on Vercel (frontend) and a Node.js host like Render or Heroku (backend). Use environment variables for secrets like database URI and CLI paths.
+- **Security**: Implement HTTPS, input sanitization, rate limiting with express-rate-limit, and secure file uploads with Multer (limit to 100MB per upload).
+- **Scalability**: Use the job queue to handle concurrent generations. Monitor CLI token usage with a simple counter in Redis, resetting weekly.
+- **No External Dependencies**: All stock assets (music, voices, footage) must be locally stored or generated via CLI. For initial setup, include a seed script to populate sample assets.
+
+### 2. Database Schema (MongoDB)
+Define models with Mongoose:
+- **User**: { _id, email: String (unique), password: String (hashed with bcrypt), subscription: String ('free', 'starter', 'creator', 'studio', 'custom'), videosGenerated: Number, presets: Array of Preset IDs, role: String ('user', 'admin'), createdAt: Date }
+- **Project**: { _id, userId: User ID, name: String, defaultPlatform: String ('TikTok', 'Reels', 'Shorts', 'YouTube'), defaultFormat: String ('9:16', '16:9', '1:1'), videos: Array of Video IDs }
+- **Video**: { _id, projectId: Project ID, script: String, voice: { type: String, language: String, tone: String, speed: Number }, music: { filePath: String or CLI-generated ID }, stylePreset: Preset ID, assets: Array of { type: String ('clip', 'image', 'logo'), path: String }, status: String ('pending', 'generating', 'preview', 'exported'), previewUrl: String, exportUrls: Array of { format: String, quality: String, url: String }, createdAt: Date }
+- **Preset**: { _id, userId: User ID, name: String, voice: Object (as above), music: String, fonts: { primary: String, secondary: String }, colors: { primary: String, secondary: String, accent: String }, transitions: String ('fade', 'slide', etc.), videoStyle: String ('minimal', 'dynamic', etc.) }
+- **JobQueue**: Managed by Bull.js, each job: { videoId: Video ID, type: String ('generateVoice', 'generateSubtitles', 'assembleVideo', 'export') }
+
+### 3. Backend Implementation
+- **Server Setup**: Express app listening on port 5000. Routes prefixed with /api.
+- **Authentication Routes**:
+  - POST /auth/register: Create user, send verification email (use Nodemailer with Gmail SMTP, free tier).
+  - POST /auth/login: Validate credentials, return JWT.
+  - Middleware: authMiddleware to protect routes.
+- **Project Routes**:
+  - POST /projects: Create new project (auth required).
+  - GET /projects: List user's projects.
+  - GET /projects/:id: Get project details.
+- **Video Routes**:
+  - POST /videos/:projectId: Create video with script, voice, etc.
+  - POST /videos/:id/generate: Add to queue for generation.
+  - GET /videos/:id/status: Poll job status.
+  - POST /videos/:id/export: Trigger export job.
+- **Preset Routes**:
+  - POST /presets: Create or update preset.
+  - GET /presets: List user's presets.
+- **Asset Upload**: POST /assets/upload: Handle file uploads to /uploads folder, return path.
+- **Job Processing**:
+  - Use Bull.js queue. Each job executes CLI commands via child_process.spawn.
+  - CLI Integration Examples:
+    - Voiceover: `antigravity-cli generate-voice --script "${script}" --voice "${voice.type}" --language "${voice.language}" --tone "${voice.tone}" --speed ${voice.speed} --output voice.mp3`
+    - Subtitles: `antigravity-cli generate-subtitles --script "${script}" --voice-file voice.mp3 --fonts "${preset.fonts}" --colors "${preset.colors}" --output subtitles.srt`
+    - Video Assembly: `antigravity-cli assemble-video --subtitles subtitles.srt --music "${music.path}" --assets "${assets.paths.join(',')}" --style "${preset.videoStyle}" --transitions "${preset.transitions}" --format "${defaultFormat}" --output preview.mp4`
+    - Export: `antigravity-cli export-video --input preview.mp4 --formats "9:16,16:9,1:1" --quality "1080p" --output exports/`
+  - Handle CLI output: Parse stdout for success/failure, store generated files in /generated folder, upload to S3-compatible storage (use local filesystem for start, later MinIO).
+  - Error Handling: If CLI fails (e.g., token limit), retry after delay or notify user via email.
+- **Subscription Logic**: On video generation, check user's subscription limits. Use Stripe webhooks for payments (integrate Stripe.js, but since no external APIs for core, Stripe is for payments only).
+- **Queue Monitoring**: Endpoint GET /admin/queue: For admins to view pending jobs.
+
+### 4. Frontend Implementation
+- **App Structure**: Pages for Landing, Dashboard, Project, Video Creation, Preview, Export. Use protected routes.
+- **Luxurious Design Guidelines**:
+  - Typography: Use Google Fonts 'Playfair Display' for headlines (elegant serif), 'Montserrat' for body (sans-serif).
+  - Layout: Full-width hero with subtle gold gradient overlays. Cards with rounded corners, shadows, and hover scales.
+  - Animations: Fade-in on load, smooth transitions on button clicks.
+  - Dark Mode: Default, with toggle if needed.
+- **Landing Page** (Public):
+  - Hero: Headline "Turn your scripts into ready-to-post faceless videos." Subheadline as provided. Buttons: "Start now" (to register), "Watch a 30-second demo" (embed local video).
+  - How It Works: 3-step section with numbered cards.
+  - Features: Bullet list in grid layout.
+  - For Who: Section with targeted paragraphs.
+  - Pricing: Tier cards with details, "Try 5 videos for free" button.
+  - FAQ: Accordion component.
+  - CTA: "Ready to stop wasting time editing?" with "Generate my first video" button.
+- **Onboarding Flow** (Authenticated Dashboard):
+  - Welcome Screen: "Create new project" button, quick tip.
+  - Create Project: Form for name, default platform/format.
+  - Create Video: Multi-step wizard (use React Stepper):
+    - Step 1: Textarea for script paste or file upload (drag-drop).
+    - Step 2: Dropdowns for voice (fetch from CLI-supported list via backend API).
+    - Step 3: Music selector (library or upload).
+    - Step 4: Preset selector or form to create new (fonts, colors, etc.).
+    - Step 5: Asset uploader (multiple files).
+    - Final: "Generate preview" button (POST to /videos/:id/generate).
+  - Preview Page: Video player (HTML5), buttons for regenerate (specific parts), change ratio, approve/export.
+  - Export Page: Checkboxes for formats/quality, "Export all" button (POST to export), then download links or ZIP.
+- **State Management**: Use Redux for user, projects, videos. Handle loading states with spinners.
+- **API Calls**: Use Axios with interceptors for JWT. Poll status every 10s during generation.
+
+### 5. Integration and Testing
+- **CLI Setup**: Assume CLI is pre-installed. In code, use absolute path from env var ANTIGRAVITY_CLI_PATH.
+- **Seeding**: Script to create sample users, presets, and assets.
+- **Testing**: Unit tests with Jest for backend routes, frontend components. End-to-end with Cypress: Test full video creation flow.
+- **Logging**: Use Winston for server logs, track CLI calls.
+
+### 6. Launch Preparations
+- **Content**: Implement as static pages or dynamic from DB.
+  - Short Pitch: For social bios.
+  - DM Script: Template in docs.
+  - Early Offer: Special pricing route for admins.
+- **Legal**: Static pages for Privacy Policy, Terms of Use.
+- **Checklist**: Ensure all elements from provided idea are implemented.
+- **Domain and Payments**: Configure in env vars.
+
+Build this system step-by-step: Start with backend setup, then database, routes, queue, CLI integration, frontend pages, and finally testing. Output progress logs in console. Upon completion, provide a README.md with setup instructions.