Update next.js

apps/web-evals/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts"
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web-evals/next.config.ts

@@ -1,10 +1,7 @@
 import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
-	webpack: (config) => {
-		config.resolve.extensionAlias = { ".js": [".ts", ".tsx", ".js", ".jsx"] }
-		return config
-	},
+	turbopack: {},
 }
 
 export default nextConfig

apps/web-evals/package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"lint": "next lint --max-warnings 0",
+		"lint": "eslint src --ext=ts,tsx --max-warnings=0",
 		"check-types": "tsc -b",
 		"dev": "scripts/check-services.sh && next dev -p 3446",
 		"format": "prettier --write src",
@@ -27,15 +27,15 @@
 		"@radix-ui/react-tabs": "^1.1.3",
 		"@radix-ui/react-tooltip": "^1.2.8",
 		"@roo-code/evals": "workspace:^",
-		"@roo-code/types": "workspace:^",
+		"@roo-code/types": "^1.108.0",
 		"@tanstack/react-query": "^5.69.0",
 		"archiver": "^7.0.1",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.0",
 		"fuzzysort": "^3.1.0",
 		"lucide-react": "^0.518.0",
-		"next": "~15.2.8",
+		"next": "^16.1.6",
 		"next-themes": "^0.4.6",
 		"p-map": "^7.0.3",
 		"react": "^18.3.1",

apps/web-roo-code/next.config.ts

@@ -1,9 +1,9 @@
+import path from "path"
 import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
-	webpack: (config) => {
-		config.resolve.extensionAlias = { ".js": [".ts", ".tsx", ".js", ".jsx"] }
-		return config
+	turbopack: {
+		root: path.join(__dirname, "../.."),
 	},
 	async redirects() {
 		return [

apps/web-roo-code/package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"lint": "next lint --max-warnings 0",
+		"lint": "eslint src --ext=ts,tsx --max-warnings=0",
 		"check-types": "tsc --noEmit",
 		"dev": "next dev",
 		"build": "next build",
@@ -12,22 +12,22 @@
 		"clean": "rimraf .next .turbo"
 	},
 	"dependencies": {
-		"@radix-ui/react-dialog": "^1.1.14",
-		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-slot": "^1.2.4",
 		"@roo-code/evals": "workspace:^",
-		"@roo-code/types": "workspace:^",
-		"@tanstack/react-query": "^5.79.0",
-		"@vercel/og": "^0.6.2",
+		"@roo-code/types": "^1.108.0",
+		"@tanstack/react-query": "^5.90.20",
+		"@vercel/og": "^0.8.6",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"embla-carousel-auto-scroll": "^8.6.0",
 		"embla-carousel-autoplay": "^8.6.0",
 		"embla-carousel-react": "^8.6.0",
-		"framer-motion": "12.15.0",
-		"lucide-react": "^0.518.0",
-		"next": "~15.2.8",
+		"framer-motion": "^12.29.2",
+		"lucide-react": "^0.563.0",
+		"next": "^16.1.6",
 		"next-themes": "^0.4.6",
-		"posthog-js": "^1.248.1",
+		"posthog-js": "^1.336.4",
 		"react": "^18.3.1",
 		"react-cookie-consent": "^9.0.0",
 		"react-dom": "^18.3.1",
@@ -36,21 +36,21 @@
 		"recharts": "^2.15.3",
 		"rehype-raw": "^7.0.0",
 		"remark-gfm": "^4.0.1",
-		"tailwind-merge": "^3.3.0",
+		"tailwind-merge": "^3.4.0",
 		"tailwindcss-animate": "^1.0.7",
 		"tldts": "^6.1.86",
 		"zod": "^3.25.61"
 	},
 	"devDependencies": {
 		"@roo-code/config-eslint": "workspace:^",
 		"@roo-code/config-typescript": "workspace:^",
-		"@tailwindcss/typography": "^0.5.16",
+		"@tailwindcss/typography": "^0.5.19",
 		"@types/node": "20.x",
 		"@types/react": "^18.3.23",
 		"@types/react-dom": "^18.3.7",
-		"autoprefixer": "^10.4.21",
+		"autoprefixer": "^10.4.23",
 		"next-sitemap": "^4.2.3",
-		"postcss": "^8.5.4",
+		"postcss": "^8.5.6",
 		"tailwindcss": "^3.4.17"
 	}
 }

apps/web-roo-code/src/app/cloud/page.tsx

@@ -22,7 +22,7 @@ import { SEO } from "@/lib/seo"
 import { ogImageUrl } from "@/lib/og"
 import { EXTERNAL_LINKS } from "@/lib/constants"
 // Workaround for next/image choking on these for some reason
-import screenshotDark from "/public/heroes/cloud-screen.png"
+import screenshotDark from "../../../public/heroes/cloud-screen.png"
 
 const TITLE = "Roo Code Cloud"
 const DESCRIPTION =

apps/web-roo-code/src/app/pr-fixer/content-a.tsx

@@ -2,7 +2,7 @@ import { type AgentPageContent } from "@/app/shared/agent-page-content"
 import Link from "next/link"
 
 // Workaround for next/image choking on these for some reason
-import hero from "/public/heroes/agent-pr-fixer.png"
+import hero from "../../../public/heroes/agent-pr-fixer.png"
 
 // Re-export for convenience
 export type { AgentPageContent }

apps/web-roo-code/src/app/provider/page.tsx

@@ -252,7 +252,7 @@ export default function ProviderPage() {
 						{faqs.map((faq, index) => (
 							<div key={index} className="rounded-2xl border border-border bg-card p-6">
 								<h3 className="font-semibold">{faq.question}</h3>
-								<p className="mt-2 text-sm text-muted-foreground">{faq.answer}</p>
+								<div className="mt-2 text-sm text-muted-foreground">{faq.answer}</div>
 							</div>
 						))}
 					</div>

apps/web-roo-code/src/app/reviewer/content-b.ts

@@ -1,7 +1,7 @@
 import { type AgentPageContent } from "@/app/shared/agent-page-content"
 
 // Workaround for next/image choking on these for some reason
-import hero from "/public/heroes/agent-reviewer.png"
+import hero from "../../../public/heroes/agent-reviewer.png"
 
 // Re-export for convenience
 export type { AgentPageContent }

apps/web-roo-code/src/app/reviewer/content.ts

@@ -1,7 +1,7 @@
 import { type AgentPageContent } from "@/app/shared/agent-page-content"
 
 // Workaround for next/image choking on these for some reason
-import hero from "/public/heroes/agent-reviewer.png"
+import hero from "../../../public/heroes/agent-reviewer.png"
 
 // Re-export for convenience
 export type { AgentPageContent }

apps/web-roo-code/src/components/chromes/nav-bar.tsx

@@ -30,6 +30,7 @@ interface NavBarProps {
 
 export function NavBar({ stars, downloads }: NavBarProps) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false)
+	const [openDropdown, setOpenDropdown] = useState<string | null>(null)
 	const logoSrc = useLogoSrc()
 
 	return (
@@ -44,70 +45,84 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 				{/* Desktop Navigation */}
 				<nav className="grow ml-6 hidden text-sm md:flex md:items-center">
 					{/* Product Dropdown */}
-					<div className="relative group">
+					<div
+						className="relative"
+						onMouseEnter={() => setOpenDropdown("product")}
+						onMouseLeave={() => setOpenDropdown(null)}>
 						<button className="flex items-center px-4 py-6 gap-1 transition-transform duration-200 hover:scale-105 hover:text-foreground">
 							Product
 							<ChevronDown className="size-3 ml-1 mt-0.5" />
 						</button>
-						<div className="absolute left-0 top-12 mt-2 w-[260px] rounded-md border border-border bg-background py-1 shadow-lg opacity-0 -translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-200">
+						<div
+							className={`absolute left-0 top-12 mt-2 w-[260px] rounded-md border border-border bg-background py-1 shadow-lg transition-all duration-200 ${openDropdown === "product" ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-2 pointer-events-none"}`}>
 							<Link
 								href="/extension"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								<Puzzle className="size-3 inline mr-2 -mt-0.5" />
 								Roo Code VS Code Extension
 							</Link>
 							<Link
 								href="/cloud"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								<Cloud className="size-3 inline mr-2 -mt-0.5" />
 								Roo Code Cloud
 							</Link>
 							<Link
 								href="/slack"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								<Slack className="size-3 inline mr-2 -mt-0.5" />
 								Roo Code for Slack
 							</Link>
 							<Link
 								href="/linear"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								<LinearIcon className="size-3 inline mr-2 -mt-0.5" />
 								Roo Code for Linear
 							</Link>
 							<Link
 								href="/provider"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								<Brain className="size-3 inline mr-2 -mt-0.5" />
 								Roo Code Router
 							</Link>
 						</div>
 					</div>
 					{/* Resources Dropdown */}
-					<div className="relative group">
+					<div
+						className="relative"
+						onMouseEnter={() => setOpenDropdown("resources")}
+						onMouseLeave={() => setOpenDropdown(null)}>
 						<button className="flex items-center px-4 py-6 gap-1 transition-transform duration-200 hover:scale-105 hover:text-foreground">
 							Resources
 							<ChevronDown className="size-3 ml-1 mt-0.5" />
 						</button>
-						{/* Dropdown Menu */}
-						<div className="absolute left-0 top-12 mt-2 w-40 rounded-md border border-border bg-background py-1 shadow-lg opacity-0 -translate-y-2 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto transition-all duration-200">
+						<div
+							className={`absolute left-0 top-12 mt-2 w-40 rounded-md border border-border bg-background py-1 shadow-lg transition-all duration-200 ${openDropdown === "resources" ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 -translate-y-2 pointer-events-none"}`}>
 							<Link
 								href="/evals"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								Evals
 							</Link>
 							<a
 								href={EXTERNAL_LINKS.DISCORD}
 								target="_blank"
 								rel="noopener noreferrer"
-								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground">
+								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
+								onClick={() => setOpenDropdown(null)}>
 								Discord
 							</a>
 							<a
 								href={EXTERNAL_LINKS.SECURITY}
 								target="_blank"
 								rel="noopener noreferrer"
 								className="block px-4 py-2 text-sm transition-colors hover:bg-accent hover:text-foreground"
-								onClick={() => setIsMenuOpen(false)}>
+								onClick={() => setOpenDropdown(null)}>
 								Trust Center
 							</a>
 						</div>

apps/web-roo-code/src/components/homepage/features.tsx

@@ -92,7 +92,7 @@ export function Features() {
 			opacity: 1,
 			transition: {
 				duration: 1.2,
-				ease: "easeOut",
+				ease: "easeOut" as const,
 			},
 		},
 	}

apps/web-roo-code/src/components/homepage/install-section.tsx

@@ -17,7 +17,7 @@ export function InstallSection({ downloads }: InstallSectionProps) {
 			opacity: 1,
 			transition: {
 				duration: 1.2,
-				ease: "easeOut",
+				ease: "easeOut" as const,
 			},
 		},
 	}

apps/web-roo-code/src/components/homepage/testimonials.tsx

@@ -179,7 +179,7 @@ export function Testimonials() {
 			opacity: 1,
 			transition: {
 				duration: 0.6,
-				ease: [0.21, 0.45, 0.27, 0.9],
+				ease: [0.21, 0.45, 0.27, 0.9] as const,
 			},
 		},
 	}

apps/web-roo-code/src/components/homepage/use-examples-section.tsx

@@ -41,6 +41,7 @@ interface PositionedUseCase extends UseCase {
 	scale: number
 	zIndex: number
 	avatar: string
+	width: number
 }
 
 const SOURCES = {
@@ -243,7 +244,7 @@ const LAYER_SCALES = {
 }
 
 function distributeItems(items: UseCase[]): PositionedUseCase[] {
-	const rng = seededRandom(Math.random() * 12345)
+	const rng = seededRandom(42)
 	const zones = { rows: 7, cols: 4 }
 	const zoneWidth = 100 / zones.cols
 	const zoneHeight = 100 / zones.rows
@@ -284,6 +285,7 @@ function distributeItems(items: UseCase[]): PositionedUseCase[] {
 			},
 			scale: LAYER_SCALES[layer],
 			zIndex: layer,
+			width: Math.round(300 + rng() * 100),
 		}
 	})
 }
@@ -345,7 +347,7 @@ function DesktopUseCaseCard({ item }: { item: PositionedUseCase }) {
 				left: `${item.position.x}%`,
 				top: `${item.position.y}%`,
 				zIndex: item.zIndex,
-				width: Math.round(300 + Math.random() * 100),
+				width: item.width,
 			}}
 			initial={{ opacity: 0, scale: 0 }}
 			whileInView={{

packages/evals/src/cli/__tests__/messageLogDeduper.test.ts

@@ -1,4 +1,4 @@
-import { MessageLogDeduper } from "../messageLogDeduper.js"
+import { MessageLogDeduper } from "../messageLogDeduper"
 
 describe("MessageLogDeduper", () => {
 	it("dedupes identical messages for same action+ts", () => {

packages/evals/src/cli/index.ts

@@ -2,11 +2,11 @@ import * as fs from "fs"
 
 import { run, command, option, flag, number, boolean } from "cmd-ts"
 
-import { EVALS_REPO_PATH } from "../exercises/index.js"
+import { EVALS_REPO_PATH } from "../exercises/index"
 
-import { runCi } from "./runCi.js"
-import { runEvals } from "./runEvals.js"
-import { processTask } from "./processTask.js"
+import { runCi } from "./runCi"
+import { runEvals } from "./runEvals"
+import { processTask } from "./processTask"
 
 const main = async () => {
 	await run(

packages/evals/src/cli/processTask.ts

@@ -2,13 +2,13 @@ import { execa } from "execa"
 
 import { type TaskEvent, RooCodeEventName } from "@roo-code/types"
 
-import { findRun, findTask, updateTask } from "../db/index.js"
+import { findRun, findTask, updateTask } from "../db/index"
 
-import { Logger, getTag, isDockerContainer } from "./utils.js"
-import { redisClient, getPubSubKey, registerRunner, deregisterRunner } from "./redis.js"
-import { runUnitTest } from "./runUnitTest.js"
-import { runTaskWithCli } from "./runTaskInCli.js"
-import { runTaskInVscode } from "./runTaskInVscode.js"
+import { Logger, getTag, isDockerContainer } from "./utils"
+import { redisClient, getPubSubKey, registerRunner, deregisterRunner } from "./redis"
+import { runUnitTest } from "./runUnitTest"
+import { runTaskWithCli } from "./runTaskInCli"
+import { runTaskInVscode } from "./runTaskInVscode"
 
 export const processTask = async ({
 	taskId,

packages/evals/src/cli/runCi.ts

@@ -1,9 +1,9 @@
 import pMap from "p-map"
 
-import { EVALS_REPO_PATH, exerciseLanguages, getExercisesForLanguage } from "../exercises/index.js"
-import { createRun, createTask } from "../db/index.js"
+import { EVALS_REPO_PATH, exerciseLanguages, getExercisesForLanguage } from "../exercises/index"
+import { createRun, createTask } from "../db/index"
 
-import { runEvals } from "./runEvals.js"
+import { runEvals } from "./runEvals"
 
 export const runCi = async ({
 	concurrency = 1,