[V0_FILE]css:file="app/globals.css" isEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Terminal-inspired FORGE theme - Dark mode by default with green accents */ :root { --background: oklch(0.1 0 0); --foreground: oklch(0.85 0.15 145); --card: oklch(0.12 0 0); --card-foreground: oklch(0.85 0.15 145); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.85 0.15 145); --primary: oklch(0.7 0.2 145); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.75 0.12 145); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0.05 145); --accent: oklch(0.7 0.2 145); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.55 0.22 27); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0.05 145); --input: oklch(0.18 0 0); --ring: oklch(0.7 0.2 145); --chart-1: oklch(0.7 0.2 145); --chart-2: oklch(0.6 0.15 180); --chart-3: oklch(0.75 0.18 100); --chart-4: oklch(0.5 0.1 145); --chart-5: oklch(0.65 0.12 200); --radius: 0.375rem; --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.85 0.15 145); --sidebar-primary: oklch(0.7 0.2 145); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.15 0.02 145); --sidebar-accent-foreground: oklch(0.85 0.15 145); --sidebar-border: oklch(0.25 0.05 145); --sidebar-ring: oklch(0.7 0.2 145); } .dark { --background: oklch(0.1 0 0); --foreground: oklch(0.85 0.15 145); --card: oklch(0.12 0 0); --card-foreground: oklch(0.85 0.15 145); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.85 0.15 145); --primary: oklch(0.7 0.2 145); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.75 0.12 145); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0.05 145); --accent: oklch(0.7 0.2 145); --accent-foreground: oklch(0.1 0 0); --destructive: oklch(0.55 0.22 27); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.25 0.05 145); --input: oklch(0.18 0 0); --ring: oklch(0.7 0.2 145); --chart-1: oklch(0.7 0.2 145); --chart-2: oklch(0.6 0.15 180); --chart-3: oklch(0.75 0.18 100); --chart-4: oklch(0.5 0.1 145); --chart-5: oklch(0.65 0.12 200); --sidebar: oklch(0.08 0 0); --sidebar-foreground: oklch(0.85 0.15 145); --sidebar-primary: oklch(0.7 0.2 145); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.15 0.02 145); --sidebar-accent-foreground: oklch(0.85 0.15 145); --sidebar-border: oklch(0.25 0.05 145); --sidebar-ring: oklch(0.7 0.2 145); } @theme inline { --font-sans: "JetBrains Mono", "JetBrains Mono Fallback", monospace; --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom terminal cursor blink animation */ @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .cursor-blink { animation: blink 1s infinite; } /* Scanline effect for terminal aesthetic */ .scanlines { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 0, 0.03) 2px, rgba(0, 255, 0, 0.03) 4px ); pointer-events: none; } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import type { Metadata } from "next" import { JetBrains_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FORGE | Developer Dashboard", description: "API Platform for Developers", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { DashboardLayout } from "@/components/dashboard-layout" import { StatsOverview } from "@/components/stats-overview" import { ApiKeysPanel } from "@/components/api-keys-panel" import { ActivityLog } from "@/components/activity-log" import { UsageChart } from "@/components/usage-chart" import { QuickActions } from "@/components/quick-actions" export default function DashboardPage() { return (

) } [V0_FILE]typescriptreact:file="components/dashboard-layout.tsx" "use client" import type React from "react" import { useState } from "react" import { motion } from "motion/react" import { Terminal, Key, Activity, Settings, Book, ChevronLeft, ChevronRight, LayoutDashboard, Webhook, Database, } from "lucide-react" import { cn } from "@/lib/utils" const navItems = [ { icon: LayoutDashboard, label: "Overview", href: "#", active: true }, { icon: Key, label: "API Keys", href: "#" }, { icon: Webhook, label: "Webhooks", href: "#" }, { icon: Database, label: "Data", href: "#" }, { icon: Activity, label: "Logs", href: "#" }, { icon: Book, label: "Docs", href: "#" }, { icon: Settings, label: "Settings", href: "#" }, ] export function DashboardLayout({ children }: { children: React.ReactNode }) { const [collapsed, setCollapsed] = useState(false) return (

{/* Scanline overlay */}

{/* Sidebar */} {/* Logo */}

{!collapsed && ( FORGE )}

{/* Navigation */} {/* Collapse toggle */}

{/* Main content */}

{/* Header */}

$ forge dashboard

● All systems operational

{/* Page content */}

{children}

) } [V0_FILE]typescriptreact:file="components/stats-overview.tsx" "use client" import { motion } from "motion/react" import { ArrowUp, ArrowDown, Zap, Clock, CheckCircle, AlertTriangle } from "lucide-react" import { Card, CardContent } from "@/components/ui/card" const stats = [ { label: "Total Requests", value: "2.4M", change: "+12.5%", trend: "up", icon: Zap, description: "Last 30 days", }, { label: "Avg Latency", value: "42ms", change: "-8.3%", trend: "down", icon: Clock, description: "p99 response time", }, { label: "Success Rate", value: "99.97%", change: "+0.02%", trend: "up", icon: CheckCircle, description: "2XX responses", }, { label: "Errors", value: "847", change: "-23.1%", trend: "down", icon: AlertTriangle, description: "4XX/5XX responses", }, ] export function StatsOverview() { return (

{stats.map((stat, index) => (

{stat.trend === "up" ? : } {stat.change}

{stat.value}

{stat.label}

{stat.description}

))}

) } [V0_FILE]typescriptreact:file="components/api-keys-panel.tsx" "use client" import { useState } from "react" import { motion, AnimatePresence } from "motion/react" import { Key, Copy, Eye, EyeOff, Plus, Trash2, Check } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" const initialKeys = [ { id: 1, name: "Production", key: "frg_prod_sk_xxxxxxxxxxxxx", created: "2024-01-15", lastUsed: "2 mins ago", status: "active", }, { id: 2, name: "Development", key: "frg_dev_sk_xxxxxxxxxxxxx", created: "2024-02-01", lastUsed: "1 hour ago", status: "active", }, { id: 3, name: "Testing", key: "frg_test_sk_xxxxxxxxxxxxx", created: "2024-03-10", lastUsed: "3 days ago", status: "inactive", }, ] export function ApiKeysPanel() { const [keys, setKeys] = useState(initialKeys) const [visibleKeys, setVisibleKeys] = useState([]) const [copiedKey, setCopiedKey] = useState(null) const toggleVisibility = (id: number) => { setVisibleKeys((prev) => (prev.includes(id) ? prev.filter((k) => k !== id) : [...prev, id])) } const copyKey = async (id: number, key: string) => { await navigator.clipboard.writeText(key) setCopiedKey(id) setTimeout(() => setCopiedKey(null), 2000) } const deleteKey = (id: number) => { setKeys((prev) => prev.filter((k) => k.id !== id)) } return ( API Keys {keys.map((apiKey, index) => (

{apiKey.name} {apiKey.status}

{visibleKeys.includes(apiKey.id) ? apiKey.key : "••••••••••••••••••••••••"}

Created {apiKey.created} Last used {apiKey.lastUsed}

))} ) } [V0_FILE]typescriptreact:file="components/usage-chart.tsx" "use client" import { motion } from "motion/react" import { Area, AreaChart, XAxis, YAxis, ResponsiveContainer, Tooltip } from "recharts" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ChartContainer } from "@/components/ui/chart" const data = [ { time: "00:00", requests: 12400, errors: 23 }, { time: "04:00", requests: 8200, errors: 12 }, { time: "08:00", requests: 34500, errors: 45 }, { time: "12:00", requests: 67800, errors: 89 }, { time: "16:00", requests: 89200, errors: 120 }, { time: "20:00", requests: 54300, errors: 67 }, { time: "Now", requests: 42100, errors: 34 }, ] export function UsageChart() { return (

API Requests

2XX

4XX/5XX

308.5K

requests today

`${(value / 1000).toFixed(0)}k`} /> { if (active && payload && payload.length) { return (

{payload[0].payload.time}

{payload[0].value?.toLocaleString()} requests

{payload[1]?.value} errors

) } return null }} /> ) } [V0_FILE]typescriptreact:file="components/activity-log.tsx" "use client" import { motion } from "motion/react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Activity, ArrowRight } from "lucide-react" const logs = [ { id: 1, method: "POST", endpoint: "/v1/completions", status: 200, latency: "34ms", time: "2 sec ago", ip: "192.168.1.xxx", }, { id: 2, method: "GET", endpoint: "/v1/models", status: 200, latency: "12ms", time: "5 sec ago", ip: "10.0.0.xxx" }, { id: 3, method: "POST", endpoint: "/v1/embeddings", status: 200, latency: "89ms", time: "12 sec ago", ip: "172.16.0.xxx", }, { id: 4, method: "POST", endpoint: "/v1/completions", status: 429, latency: "8ms", time: "15 sec ago", ip: "192.168.1.xxx", }, { id: 5, method: "GET", endpoint: "/v1/usage", status: 200, latency: "23ms", time: "28 sec ago", ip: "10.0.0.xxx" }, { id: 6, method: "POST", endpoint: "/v1/chat", status: 500, latency: "156ms", time: "45 sec ago", ip: "172.16.0.xxx", }, { id: 7, method: "DELETE", endpoint: "/v1/files/abc123", status: 204, latency: "45ms", time: "1 min ago", ip: "192.168.1.xxx", }, ] const getMethodColor = (method: string) => { switch (method) { case "GET": return "text-primary" case "POST": return "text-chart-3" case "PUT": return "text-chart-2" case "DELETE": return "text-destructive" default: return "text-muted-foreground" } } const getStatusColor = (status: number) => { if (status >= 200 && status < 300) return "bg-primary/20 text-primary border-primary/30" if (status >= 400 && status < 500) return "bg-yellow-500/20 text-yellow-500 border-yellow-500/30" if (status >= 500) return "bg-destructive/20 text-destructive border-destructive/30" return "bg-muted text-muted-foreground" } export function ActivityLog() { return ( Recent Activity

{/* Header */}

Method

Endpoint

Status

Latency

Time

{/* Log entries */} {logs.map((log, index) => (

{log.method}

{log.endpoint}

{log.status}

{log.latency}

{log.ip}

{log.time}

))}

) } [V0_FILE]typescriptreact:file="components/quick-actions.tsx" "use client" import { motion } from "motion/react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Terminal, Book, MessageSquare, Rocket, FileCode, Shield } from "lucide-react" const actions = [ { icon: Terminal, label: "API Playground", description: "Test endpoints live" }, { icon: Book, label: "Documentation", description: "Read the docs" }, { icon: FileCode, label: "Code Examples", description: "Copy-paste snippets" }, { icon: Shield, label: "Rate Limits", description: "View your quotas" }, { icon: MessageSquare, label: "Support", description: "Get help" }, { icon: Rocket, label: "Upgrade Plan", description: "Increase limits" }, ] export function QuickActions() { return ( Quick Actions {actions.map((action, index) => ( {action.label} {action.description} ))} ) } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }