our_logging/1_implementation_plan.md.resolved

# 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