feat: add prototype framework

Author: jeanduplessis

apps/prototypes/.gitignore

@@ -0,0 +1,2 @@
+.vercel
+.env*.local

apps/prototypes/AGENTS.md

@@ -0,0 +1,35 @@
+# AGENTS.md
+
+## Purpose
+
+`apps/prototypes` is an opt-in workspace app for Kilo Code full-page and product-flow UI prototypes. Keep experiments out of the production web router while reusing production web theme tokens and UI primitives.
+
+## Commands
+
+Run prototype checks explicitly:
+
+```bash
+pnpm --filter @kilocode/prototypes dev
+pnpm --filter @kilocode/prototypes build
+pnpm --filter @kilocode/prototypes typecheck
+```
+
+Do not wire this app into root `build`, root `validate`, or default CI unless a future task explicitly changes that policy.
+
+## Import boundaries
+
+- `@/*` resolves to `apps/prototypes/src/*` for prototype-local code.
+- `@web/*` resolves to `apps/web/src/*` for production web theme, primitives, and product UI.
+
+Prefer prototype-local code for catalog/discovery and review-shell utilities. Keep domain-specific prototype data and preview components colocated with the route that owns them.
+
+## Folder conventions
+
+- Add prototype routes as `src/app/<prototype-slug>/page.tsx`.
+- Add optional route metadata beside the page when catalog copy/tags are needed.
+- Keep fixtures, client wrappers, and preview components inside the route folder unless another prototype proves the abstraction reusable.
+- Shared prototype-kit primitives belong in `src/` outside app route folders.
+
+## Storybook boundary
+
+Storybook is for individual component states. This app is for full-page prototypes, page-flow reviews, and product-context explorations.

apps/prototypes/README.md

@@ -0,0 +1,33 @@
+# Kilo Code Prototypes
+
+`apps/prototypes` is an opt-in Next.js app for full-page and product-flow UI explorations. It lets design-review prototypes live outside the production web router while reusing the production web theme and UI primitives.
+
+Storybook remains the home for individual component states. Use this app when a prototype needs page chrome, multiple sections, route-level behavior, navigation experiments, or a product-flow review surface.
+
+## Commands
+
+Run commands explicitly; the root `build`, `validate`, and default CI flows do not include this app.
+
+```bash
+pnpm --filter @kilocode/prototypes dev
+pnpm --filter @kilocode/prototypes build
+pnpm --filter @kilocode/prototypes typecheck
+```
+
+## Import aliases
+
+- `@/*` points to prototype-local source in `apps/prototypes/src/*`.
+- `@web/*` points to production web source in `apps/web/src/*`.
+
+Use `@/*` for prototype host code, discovery, catalog, and shared prototype-kit utilities. Use `@web/*` only when importing production web theme, primitives, or existing product UI needed to keep a prototype faithful.
+
+## Folder conventions
+
+- Prototype routes live under `src/app/<prototype-slug>/`.
+- Keep prototype-specific fixtures, role logic, preview components, and metadata colocated with that route.
+- Shared prototype-host utilities live under `src/` outside route folders.
+- Do not introduce a central manifest until multiple durable prototypes prove the need.
+
+## Storybook boundary
+
+Use Storybook for isolated component variants and visual states. Use `apps/prototypes` for app-like flows, full pages, route sequences, and design reviews that need surrounding product context.

apps/prototypes/next.config.mjs

@@ -0,0 +1,15 @@
+import { resolve } from 'path';
+
+const monorepoRoot = resolve(import.meta.dirname, '../..');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  poweredByHeader: false,
+  outputFileTracingRoot: monorepoRoot,
+  turbopack: {
+    root: monorepoRoot,
+  },
+};
+
+export default nextConfig;

apps/prototypes/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@kilocode/prototypes",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "typecheck": "tsgo --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": ">=24 <25",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.552.0",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "catalog:"
+  },
+  "devDependencies": {
+    "@typescript/native-preview": "catalog:"
+  }
+}

apps/prototypes/public/kilocrab.svg

@@ -34,29 +34,29 @@ import {
   Users,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@web/components/ui/button';
+import { Badge } from '@web/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@web/components/ui/card';
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table';
-import { Banner } from '@/components/shared/Banner';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Switch } from '@/components/ui/switch';
+} from '@web/components/ui/table';
+import { Banner } from '@web/components/shared/Banner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@web/components/ui/tabs';
+import { Switch } from '@web/components/ui/switch';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog';
-import KiloCrabIcon from '@/components/KiloCrabIcon';
+} from '@web/components/ui/dialog';
+import KiloCrabIcon from '@web/components/KiloCrabIcon';
 import {
   type AdminBillingStatus,
   type AssociatedUser,