fix(web): support node 22 (risc0#1936)

remove `assert` usage from `risc0/ui` since it doesn't play well with
node v22

also remove maintenance page support via middleware for now, will
refactor to use ENV variables instead, which leads to cleaner logs on
Vercel and also won't crash the whole app if edge config fails.

---------

Co-authored-by: Frank Laub <[email protected]>

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/applications-benchmarks/[slug]/_components/applications-benchmarks-table-columns.tsx

@@ -16,69 +16,69 @@ export const applicationsBenchmarksTableColumns = {
   "release-0.21": [
     columnHelper["release-0.21"].accessor("job_name", {
       header: ({ column }) => <TableColumnHeader column={column} title="Job Name" />,
-      cell: (info) => <div className="font-mono">{info.getValue()}</div>,
+      cell: (info) => <div className="truncate font-mono">{info.getValue()}</div>,
     }),
     columnHelper["release-0.21"].accessor("job_size", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Job Size" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(info.getValue())}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(info.getValue())}</div>,
     }),
     columnHelper["release-0.21"].accessor("exec_duration", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Execution Duration" />,
-      cell: (info) => <div className="text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
     }),
     columnHelper["release-0.21"].accessor("proof_duration", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Proof Duration" />,
-      cell: (info) => <div className="text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
     }),
     columnHelper["release-0.21"].accessor("total_duration", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Total Duration" />,
-      cell: (info) => <div className="text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
     }),
     columnHelper["release-0.21"].accessor("verify_duration", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Verify Duration" />,
-      cell: (info) => <div className="text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
     }),
     columnHelper["release-0.21"].accessor("insn_cycles", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="INSN Cycles" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(info.getValue())}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(info.getValue())}</div>,
     }),
     columnHelper["release-0.21"].accessor("prove_cycles", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Prove Cycles" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(info.getValue())}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(info.getValue())}</div>,
     }),
     columnHelper["release-0.21"].accessor("proof_bytes", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Proof Bytes" />,
-      cell: (info) => <div className="text-right font-mono">{formatBytes(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatBytes(Number(info.getValue()))}</div>,
     }),
   ] as ColumnDef<ApplicationsBenchmarksTableSchema<"release-0.21">, unknown>[],
   main: [
     columnHelper.main.accessor("name", {
       header: ({ column }) => <TableColumnHeader column={column} title="Name" />,
-      cell: (info) => <div className="font-mono">{info.getValue()}</div>,
+      cell: (info) => <div className="truncate font-mono">{info.getValue()}</div>,
     }),
     columnHelper.main.accessor("size", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Size" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(info.getValue())}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(info.getValue())}</div>,
     }),
     columnHelper.main.accessor("speed", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Speed" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(Number(info.getValue()))}</div>,
     }),
     columnHelper.main.accessor("total_duration", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Proof Duration" />,
-      cell: (info) => <div className="text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatDuration(Number(info.getValue()))}</div>,
     }),
     columnHelper.main.accessor("user_cycles", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="User Cycles" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(info.getValue())}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(info.getValue())}</div>,
     }),
     columnHelper.main.accessor("total_cycles", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Total Cycles" />,
-      cell: (info) => <div className="text-right font-mono">{formatNumber(info.getValue())}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatNumber(info.getValue())}</div>,
     }),
     columnHelper.main.accessor("proof_bytes", {
       header: ({ column }) => <TableColumnHeader align="right" column={column} title="Proof Bytes" />,
-      cell: (info) => <div className="text-right font-mono">{formatBytes(Number(info.getValue()))}</div>,
+      cell: (info) => <div className="truncate text-right font-mono">{formatBytes(Number(info.getValue()))}</div>,
     }),
   ] as ColumnDef<ApplicationsBenchmarksTableSchema<"main">, unknown>[],
 };

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/applications-benchmarks/[slug]/_components/applications-benchmarks-table.tsx

@@ -67,7 +67,7 @@ export function ApplicationsBenchmarksTable<TData, TValue>({
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h2 className="subtitle">{title}</h2>
+        <h2 className="text-xl">{title}</h2>
         <TableToolbar globalFilter={globalFilter} setGlobalFilter={setGlobalFilter} table={table} />
       </div>
 

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/applications-benchmarks/layout.tsx

@@ -19,7 +19,7 @@ export default function ApplicationsBenchmarksLayout({
   return (
     <div className="container max-w-screen-3xl">
       <div className="flex items-center justify-between gap-8">
-        <h1 className="title-sm">Applications Benchmarks</h1>
+        <h1 className="text-3xl">Applications Benchmarks</h1>
 
         <Suspense fallback={<SuspenseLoader />}>
           <ApplicationsBenchmarksCommitHashButton version={params.version} />

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/datasheet/_components/datasheet-table.tsx

@@ -60,7 +60,7 @@ export function DatasheetTable<TData, TValue>({
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h2 className="subtitle truncate">{title}</h2>
+        <h2 className="truncate text-xl">{title}</h2>
         <TableToolbar table={table} />
       </div>
 

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/datasheet/layout.tsx

@@ -19,7 +19,7 @@ export default function DatasheetLayout({
   return (
     <div className="container max-w-screen-3xl">
       <div className="flex items-center justify-between gap-8">
-        <h1 className="title-sm">Datasheet</h1>
+        <h1 className="text-3xl">Datasheet</h1>
 
         <Suspense fallback={<SuspenseLoader />}>
           <DatasheetCommitHashButton version={params.version} />

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/[version]/page.tsx

@@ -25,9 +25,9 @@ export default function ReportsPage({
     <div className="container grid max-w-screen-3xl grid-cols-1 gap-10 pt-4 lg:grid-cols-2">
       {REPORTS.map(({ label, href, description, showVersionSelect }, index) => (
         <ProgressBarLink key={href} href={`${showVersionSelect ? `/${params.version}` : ""}${href}`} className="group">
-          <Card className="group-hover:-translate-y-1 flex h-full min-h-44 w-full flex-col items-center justify-between gap-1 border-2 border-border px-8 py-4 shadow-sm transition-transform md:flex-row md:gap-12 hover:border-primary dark:bg-neutral-900">
-            <div>
-              <CardTitle className="text-xl">{label}</CardTitle>
+          <Card className="group-hover:-translate-y-1 flex h-full min-h-44 w-full flex-col items-center justify-between gap-1 border-2 border-border px-8 py-4 shadow-sm transition-transform md:flex-row md:gap-12 hover:border-primary">
+            <div className="space-y-1">
+              <CardTitle className="font-normal text-3xl">{label}</CardTitle>
               <CardDescription className="text-sm">{description}</CardDescription>
             </div>
 

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/benchmarks/_components/benchmarks-header.tsx

@@ -6,7 +6,7 @@ export function BenchmarksHeader({ lastUpdate }: { lastUpdate: string }) {
   return (
     <div className="flex items-center justify-between">
       <div>
-        <h1 className="title-sm">Benchmarks</h1>
+        <h1 className="text-3xl">Benchmarks</h1>
         <div className="text-muted-foreground text-xs">
           <span>Last Update: {lastUpdate || <Skeleton className="inline-block h-2 w-28" />}</span>
         </div>

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/benchmarks/_components/benchmarks-list.tsx

@@ -16,7 +16,6 @@ export function BenchmarksList({
       <CommandList className="max-h-[calc(100dvh-19.5rem)] overscroll-contain">
         <CommandEmpty>No Results</CommandEmpty>
         {charts.flatMap((chart) =>
-          // biome-ignore lint/correctness/useJsxKeyInIterable: ignore jsx key
           chart.name === selectedPlatform
             ? [
                 <CommandGroup key={chart.name}>

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/crates-validation/_components/crates-io-validation-summary-header.tsx

@@ -11,14 +11,14 @@ export function CratesIoValidationSummaryHeader({ data }: { data: CratesIoValida
   const neutralPercentage = (neutralCount / data.length) * 100;
 
   return (
-    <div className="flex items-center gap-6">
-      <h2 className="subtitle">Crates Build Status Summary</h2>
+    <div className="flex flex-wrap items-center justify-between gap-1 sm:justify-start sm:gap-6">
+      <h2 className="text-xl">Crates Build Status Summary</h2>
       <h3 className="flex flex-row items-center gap-6 text-muted-foreground text-sm">
         <Tooltip delayDuration={0}>
           <TooltipTrigger asChild>
             <div className="flex cursor-help flex-row items-center">
               <CheckCircle2Icon className="mr-1 size-3 text-green-600 dark:text-green-400" />
-              <div>
+              <div className="truncate">
                 <span className="text-green-600 dark:text-green-400">{successCount}</span>{" "}
                 <span className="ml-1 text-xs">({Math.floor(successPercentage)}%)</span>
               </div>
@@ -34,7 +34,7 @@ export function CratesIoValidationSummaryHeader({ data }: { data: CratesIoValida
           <TooltipTrigger asChild>
             <div className="flex cursor-help flex-row items-center">
               <CircleAlertIcon className="mr-1 size-3 text-red-600 dark:text-red-400" />
-              <div>
+              <div className="truncate">
                 <span className="text-red-600 dark:text-red-400">{buildFailCount}</span>{" "}
                 <span className="ml-1 text-xs">({Math.floor(buildFailPercentage)}%)</span>
               </div>
@@ -50,7 +50,7 @@ export function CratesIoValidationSummaryHeader({ data }: { data: CratesIoValida
           <TooltipTrigger asChild>
             <div className="flex cursor-help flex-row items-center">
               <CircleDotIcon className="mr-1 size-3 text-neutral-600 dark:text-neutral-400" />
-              <div>
+              <div className="truncate">
                 <span className="text-neutral-600 dark:text-neutral-400">{neutralCount}</span>{" "}
                 <span className="ml-1 text-xs">({Math.floor(neutralPercentage)}%)</span>
               </div>

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/crates-validation/_components/crates-io-validation-table.tsx

@@ -65,7 +65,7 @@ export function CratesIoValidationTable<TData, TValue>({ columns, data }: Crates
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h2 className="subtitle">
+        <h2 className="text-xl">
           Crates{" "}
           <span className="ml-2 font-normal text-muted-foreground text-sm">
             {formatNumber(table.getRowCount())} results

web/apps/benchmarks-and-reports/src/app/(benchmarks-and-reports)/crates-validation/layout.tsx

@@ -10,7 +10,7 @@ export default function CratesIoValidationLayout({ children }) {
     <div className="container max-w-screen-3xl">
       <div className="flex items-center justify-between gap-8">
         <div>
-          <h1 className="title-sm">Crates.io Validation</h1>
+          <h1 className="text-3xl">Crates.io Validation</h1>
           <p className="text-muted-foreground text-sm">
             Each night, we test compatibility between each of the{" "}
             <Link

web/apps/benchmarks-and-reports/src/app/maintenance/page.tsx

@@ -8,7 +8,7 @@ export default function MaintenancePage() {
   return (
     <div className="container grid min-h-screen items-center">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="title-sm">Benchmarks & Reports Is Currently in Maintenance</h1>
+        <h1 className="text-3xl">Benchmarks & Reports Is Currently in Maintenance</h1>
         <p className="text-balance text-muted-foreground text-sm">Come again soon 👋</p>
       </div>
     </div>

web/package.json

@@ -3,17 +3,18 @@
   "workspaces": ["apps/*", "packages/*"],
   "scripts": {
     "build": "turbo build",
-    "check": "cd .. && bunx @biomejs/biome check --apply-unsafe web",
+    "check": "cd .. && bunx @biomejs/biome check --write --unsafe web",
     "ci": "cd .. && bunx @biomejs/biome ci web",
     "dev": "turbo dev",
     "test": "turbo test",
     "typecheck": "turbo typecheck"
   },
   "dependencies": {
+    "@biomejs/biome": "1.8.0",
     "@joshdavenport/tailwindcss-filter-order": "0.2.0",
     "@next/bundle-analyzer": "14.2.3",
     "@poppinss/intl-formatter": "3.0.2",
-    "@risc0/ui": "0.0.86",
+    "@risc0/ui": "0.0.89",
     "@t3-oss/env-nextjs": "0.10.1",
     "@tanstack/match-sorter-utils": "8.15.1",
     "@tanstack/react-table": "8.17.3",
@@ -23,7 +24,6 @@
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@vercel/analytics": "1.3.1",
-    "@vercel/edge-config": "1.1.1",
     "@vercel/speed-insights": "1.0.11",
     "chart.js": "2.9.4",
     "deepmerge": "4.3.1",