# SystemForge AI — Frontend

Premium Next.js frontend for the SystemForge AI multi-agent architecture engine.

## Tech Stack

| Tool | Purpose |
|------|---------|
| **Next.js 14** | App Router, SSR/SSG |
| **TypeScript** | Full type safety |
| **Ant Design 5** | UI component system |
| **Framer Motion** | Animations & transitions |
| **React Three Fiber** | 3D particle explosion background |
| **Three.js** | 3D rendering engine |

## Getting Started

```bash
cd frontend
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000)

## Folder Structure

```
frontend/
├── app/
│   ├── layout.tsx          # Root layout with Ant Design theme
│   └── page.tsx            # Main page orchestrator
├── components/
│   ├── agents/
│   │   ├── AgentCard.tsx   # Individual agent output card
│   │   └── AgentPipeline.tsx # 3-agent pipeline layout
│   ├── animations/
│   │   └── ParticleBackground.tsx  # 3D exploding Three.js scene
│   ├── layout/
│   │   └── Header.tsx      # Fixed top navigation
│   └── ui/
│       └── HeroSection.tsx # Hero + project input
├── lib/
│   ├── api.ts              # Backend API + mock mode
│   └── types.ts            # Shared TypeScript types
├── styles/
│   └── globals.css         # CSS variables, fonts, base styles
├── .env.local              # Environment config
└── package.json
```

## Environment Variables

```env
NEXT_PUBLIC_BACKEND_URL=http://localhost:8000   # FastAPI backend
NEXT_PUBLIC_MOCK_MODE=true                       # Enable mock responses
```

## Mock Mode

The frontend works fully without AMD credits using mock mode.
Realistic agent outputs are streamed with proper timing simulation.

Set `NEXT_PUBLIC_MOCK_MODE=false` and ensure `NEXT_PUBLIC_BACKEND_URL` points to a live backend once AMD credits are activated.

## Design System

- **Primary**: AMD Red `#E30913`
- **Accent**: Cyan `#00D4FF`, Gold `#FFB800`, Green `#00FF9C`
- **Font Display**: Orbitron
- **Font Body**: Rajdhani
- **Font Mono**: JetBrains Mono
- **Theme**: Dark — void black backgrounds with glowing accents