Build Forge — Client Portal for Dark Factory AI Pipeline

[ibuzzardo]

Overview

Build Forge, a premium client portal for an autonomous AI software development service. Forge lets external clients submit project briefs, track their build in real-time through a 6-stage AI pipeline visualization, and receive the finished pull request — all through a polished dark-themed web interface.

This is a full-stack Next.js 14 app with two main pages: a multi-step Project Brief Submission form and a Build Tracker Dashboard with real-time pipeline visualization and live log streaming.

Design Specification (Stitch-Approved — Client Contract)

The design was generated and approved in Google Stitch. The Coder agent MUST implement these exact specifications. This is a client-approved design and cannot be deviated from.

Color Palette

Token	Hex	Usage
--background	#020617	Page background (slate-950)
--surface	#0F172A	Card backgrounds (slate-900)
--elevated	#1E293B	Elevated surfaces, borders (slate-800)
--foreground	#F8FAFC	Primary text (slate-50)
--muted	#94A3B8	Secondary text (slate-400)
--accent	#3B82F6	Primary accent — buttons, active states (blue-500)
--accent-glow	rgba(59,130,246,0.15)	Glow behind accent elements
--success	#34D399	Completed stages, success badges (emerald-400)
--warning	#FBBF24	Express tier, warning badges (amber-400)
--danger	#F87171	Rush tier, error states (red-400)

Typography

• Font: Inter via Google Fonts CDN (https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap)
• Headings: Inter 700, tracking-tight
• Body: Inter 400, text-slate-300
• Labels: Inter 500 uppercase tracking-wider text-xs text-slate-500

Card Style (Glassmorphism)

All cards MUST use this exact pattern:

.glass-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(30, 41, 59, 0.8);
  border-radius: 0.75rem;
}

Hover state: box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.05)

Component Patterns

• Pill selectors: rounded-full px-4 py-1.5 text-sm — selected: bg-blue-500/20 text-blue-400 border border-blue-500/40 — unselected: bg-slate-800/50 text-slate-400 border border-slate-700/50 hover:border-slate-600
• CTA buttons: bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-8 py-3 font-semibold shadow-lg shadow-blue-500/25 transition-all
• Status badges: rounded-full px-3 py-1 text-xs font-medium border with color per status
• Input fields: bg-slate-800/50 border border-slate-700/50 rounded-lg px-4 py-3 text-slate-200 placeholder-slate-500 focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20

Requirements

Page 1: Project Brief Submission (/)

• Multi-step form wizard with 4 steps: Basic Info → Scope → Resources → Review
• Progress bar at top showing "Brief Completion" percentage (25%, 50%, 75%, 100%)
• Step navigation with clickable step labels and visual progress indicator
• Step 1 — Basic Info: Project title (text input), Core objectives (textarea with 600 char limit and counter)
• Step 2 — Scope: Required Tech Stack (pill selector chips — selectable/deselectable: Next.js, React, Python, Node.js, TypeScript, Tailwind CSS, PyTorch, AWS SageMaker, OpenAI API), Target Autonomy Level (3 cards: Assisted, Semi-Autonomous, Fully Autonomous — each with icon, title, description, radio selection)
• Step 3 — Resources: Priority level (3 tier cards: Standard/3 days, Express/24h, Rush/6h — with color-coded borders: blue, amber, red), Budget range selector, Additional notes textarea
• Step 4 — Review: Summary of all selections, Edit buttons per section, "Submit to Pipeline" CTA button
• Form validation with Zod: title required min 3 chars, objectives required min 10 chars, at least one tech stack selected, autonomy level required, priority required
• On submit: POST to /api/briefs — stores in-memory, returns brief ID, redirects to /build/:id
• "Save Draft" button in top right corner that persists form state to localStorage
• Top nav bar: Forge logo (left), "Dashboard" / "Projects" (active) / "Billing" links, notification bell icon + settings gear icon (right)

Page 2: Build Tracker Dashboard (/build/:id)

• Top section: Project header glassmorphism card showing project title, status badge ("Queued" / "Building..." with pulse animation / "Complete" / "Failed"), elapsed time counter (updates every second), estimated completion time
• Pipeline Visualization: Horizontal 6-stage pipeline — Plan → Design → Code → Review → Test → Ship. Each stage is a card/node connected by lines/chevrons. Completed stages: emerald border + checkmark icon + green glow. Active stage: blue border + spinner icon + pulse animation + expanded to show current sub-task text (e.g., "Generating components..."). Upcoming stages: dim slate-700 border, muted text. Failed stage: red border + X icon
• Live Log Feed: Dark terminal-style card (bg-slate-950 font-mono text-sm), scrolling log entries with timestamps, color-coded by type: green dot for success, blue dot for info, amber dot for warning, red dot for error. "Live" indicator with animated green dot in header. Auto-scroll to bottom with "scroll to bottom" button when user scrolls up. Max 200 visible entries
• Stats Sidebar (right side or bottom row of 4 cards): Cost tracker (running total like "$0.42" with dollar icon), Files generated (count with file icon), Lines of code (count with code icon), "View PR" button (disabled/greyed until status is Complete, then becomes active link)
• Bottom footer: "Powered by Dark Factory v4" with small pipeline stage icons

API Routes

• POST /api/briefs — Create a new project brief. Validates with Zod, stores in-memory Map, returns { id, status: "queued", createdAt }. Returns 400 on validation failure with field-level errors
• GET /api/briefs/:id — Get brief by ID. Returns full brief data + current build status. 404 if not found
• GET /api/briefs/:id/status — Get build status only. Returns { status, currentStage, stages: [{name, status, startedAt, completedAt}], elapsed, cost, filesGenerated, linesOfCode }
• GET /api/briefs/:id/logs — SSE endpoint streaming build log entries as data: {timestamp, type, message}\n\n. Simulates pipeline progression with realistic timing (Plan: 15s, Design: 10s, Code: 30s, Review: 15s, Test: 10s, Ship: 5s)
• GET /api/health — Returns { status: "ok", uptime }

Pipeline Simulation

Since this is a standalone demo portal, the build process is SIMULATED (not connected to the real Dark Factory pipeline). When a brief is submitted:

1. Status changes to "Building..." after 2 seconds
2. Each pipeline stage activates in sequence with realistic timing
3. Log entries are generated that look like real pipeline output (e.g., "[Planner] Analyzing project requirements...", "[Coder] Generating src/components/Header.tsx...", "[Reviewer] Checking code quality... Approved ✓")
4. Stats (cost, files, LOC) increment as stages complete
5. After ~85 seconds total, status changes to "Complete" and "View PR" becomes active (links to a placeholder GitHub URL)
6. SSE connection delivers all log events in real-time

File Structure

app/
├── layout.tsx              # Root layout — Inter font, dark bg, nav bar
├── page.tsx                # Project Brief Submission form (multi-step wizard)
├── build/
│   └── [id]/
│       └── page.tsx        # Build Tracker Dashboard
├── globals.css             # CSS variables, glassmorphism utilities, animations
├── api/
│   ├── briefs/
│   │   └── route.ts        # POST handler — create brief
│   ├── briefs/
│   │   └── [id]/
│   │       ├── route.ts    # GET handler — get brief
│   │       ├── status/
│   │       │   └── route.ts # GET handler — build status
│   │       └── logs/
│   │           └── route.ts # GET handler — SSE log stream
│   └── health/
│       └── route.ts        # GET handler — health check
components/
├── BriefWizard.tsx         # Multi-step form wizard container
├── StepBasicInfo.tsx       # Step 1 form fields
├── StepScope.tsx           # Step 2 — tech stack pills + autonomy cards
├── StepResources.tsx       # Step 3 — priority tiers + budget
├── StepReview.tsx          # Step 4 — summary + submit
├── PipelineVisualizer.tsx  # 6-stage horizontal pipeline with animations
├── LiveLogFeed.tsx         # Terminal-style log viewer with SSE
├── StatCard.tsx            # Reusable stat card (cost, files, LOC)
├── StatusBadge.tsx         # Status pill component
├── PillSelector.tsx        # Multi-select pill chips
├── TierCard.tsx            # Selectable tier card (autonomy/priority)
└── Navbar.tsx              # Top navigation bar
lib/
├── store.ts                # In-memory brief storage (Map)
├── simulator.ts            # Pipeline simulation engine
├── schemas.ts              # Zod validation schemas
└── types.ts                # TypeScript interfaces
public/
└── favicon.ico
package.json
tsconfig.json
tailwind.config.ts          # Custom colors matching design spec
postcss.config.js
next.config.js
README.md

Dependencies

• next@14 — Full-stack React framework
• react@18 — UI library
• react-dom@18 — React DOM rendering
• typescript@5 — Type safety
• tailwindcss@3 — Utility-first CSS
• postcss@8 — CSS processing
• autoprefixer@10 — CSS vendor prefixes
• zod@3 — Input validation
• lucide-react@0.263 — Icon library (consistent icon set)
• uuid@9 — Generate unique brief IDs

Acceptance Criteria

• npm install && npm run dev starts without errors on port 3000
• npm run build completes with zero TypeScript errors
• Landing page (/) shows the multi-step project brief form with Forge branding
• Form wizard navigates between 4 steps with working progress bar
• Tech stack pills are selectable/deselectable with visual feedback
• Autonomy level and priority tier cards highlight on selection
• Form validates all required fields and shows inline errors on submit attempt
• Submitting a valid brief redirects to /build/:id
• Build tracker shows pipeline visualization with 6 stages
• Pipeline stages animate through the sequence (completed → active → upcoming)
• Live log feed displays color-coded entries via SSE with auto-scroll
• Stats cards (cost, files, LOC) update as simulation progresses
• "View PR" button activates when build completes
• All pages use the dark navy (#020617) theme with glassmorphism cards
• GET /api/health returns { status: "ok" }
• POST /api/briefs with missing required fields returns 400 with field errors
• GET /api/briefs/:invalid-id returns 404

Edge Cases

• Empty form submission → show validation errors per field, do not submit
• Non-existent brief ID in URL → show "Project not found" page with back link
• SSE connection drops → auto-reconnect with EventSource, show "Reconnecting..." indicator
• Browser back button during wizard → return to previous step (not leave form)
• Very long project title (>200 chars) → truncate in header, show full on hover
• Multiple rapid form submissions → disable submit button after first click
• Mobile viewport → stack pipeline stages vertically, collapse sidebar stats