[BE] Set up new HUD strucutre with nextjs app structure (#6881)

Inital setup for new pytorch HUD UI strucutre using nextjs app route.

Currently this co-exists with the old pages/ approach, all navigation to
/v2/* will route to the new app structure, meanwhile the existing routes
still exist.

Official Guidance from vercel: https://nextjs.org/docs/app

## Migration Plan
We will gradually migrate all pages into v2 HUD, eventually we will
depreacte v1
[Migration
Plan](https://docs.google.com/document/d/1gO9xbzcvTCdHrGQd2gNg4jw4NEDMDw4ccnra8u69x_k/edit?tab=t.0)

## Benefits
for page specific component, now we can:

- Nested & Shared Layout Rendering
- put under the route to have more clear structures, this also give us a
chance to reformat our hud code
- have main nav bar + subnav bar, this also able to override the main
nav bar if it's necessary too
- Able to render multiple pages in parallel, and can persist nav bars,
sidebars, or headers across page changes.These layouts don't unmount —
only the nested route content updates.

## Details
- create a simple navigation bar rendered with pytorch orange and black
- create a benchmark v3 dashboard sub page 



# preview
https://torchci-git-benchmark-explore1-fbopensource.vercel.app/v2

![image](https://github.com/user-attachments/assets/dedc7619-9401-4d22-87a6-e034203f69b8)

---------

Signed-off-by: Yang Wang <[email protected]>

Author: yangw-dev

torchci/app/v2/README.md

@@ -0,0 +1,38 @@
+# V2 HUD
+
+Used for HUD V2 UI. This approach offers several benefits, including improved performance, scalability, and developer experience. For more details on the advantages of the Next.js app approach, please refer to the [Next.js documentation](https://nextjs.org/docs/app).
+
+# Migration Plan
+
+We plan migrate exisiting page-based routes to the new V2 structure using Next.js app structure in H2 2025.
+
+## July
+
+- Setup: Establish the V2 app structure, including the navbar, GitHub signup functionality.
+- Guidance: Provide comprehensive guidance to developers on the new structure, including tests, structure, and etc
+- Implementation: Post-July, all new features should be implemented in the V2 structure.
+
+## August - September
+
+- Transition the majority of routes from the pages/ directory to the new V2 HUD structure.
+- Applies Dark/Light mode to the v2 structure
+
+## October
+
+- Deprecation: Officially deprecate the legacy HUD (v1) system.
+
+# Affected Areas
+
+## Affected Folders
+
+- app/v2/: This folder will house the new app structure.
+- pages/: This folder contains all file-based navigation elements.
+- dark/light settings
+
+## Affected Users
+
+- Developers within the Dev Infra Team.
+
+# Changes Tracking
+
+- `2025-07-02`: Initial setup of the V2 app structure.

torchci/app/v2/benchmark/v3/layout.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import { ReactNode } from "react";
+
+const drawerWidth = 200;
+
+export default function BenchmarkV3Layout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <Box sx={{ display: "flex" }}>
+      {/* Main content */}
+      <Box component="main" sx={{ flexGrow: 1, p: 3, ml: `${drawerWidth}px` }}>
+        {children}
+      </Box>
+    </Box>
+  );
+}

torchci/app/v2/benchmark/v3/page.tsx

@@ -0,0 +1,28 @@
+import { Card, CardContent, Grid2, Typography } from "@mui/material";
+
+export default function Page() {
+  const list = ["torhchAo", "vllm", "torch compiler"];
+  return (
+    <div style={{ padding: 20 }}>
+      <Typography variant="h4" gutterBottom>
+        Benchmarks
+      </Typography>
+      <Grid2 container spacing={2}>
+        {list.map((item, index) => (
+          <Grid2 key={index}>
+            <Card variant="outlined">
+              <CardContent>
+                <Typography variant="h6" component="div">
+                  {item}
+                </Typography>
+                <Typography color="text.secondary">
+                  Benchmark description for {item}
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid2>
+        ))}
+      </Grid2>
+    </div>
+  );
+}

torchci/app/v2/benchmark/v3/regression/layout.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import { ReactNode } from "react";
+
+const drawerWidth = 200;
+
+export default function BenchmarkV3Layout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <Box sx={{ display: "flex" }}>
+      {/* Main content */}
+      <Box component="main" sx={{ flexGrow: 1, p: 3, ml: `${drawerWidth}px` }}>
+        {children}
+      </Box>
+    </Box>
+  );
+}

torchci/app/v2/benchmark/v3/regression/page.tsx

@@ -0,0 +1,21 @@
+import { Card, CardContent, Grid2, Typography } from "@mui/material";
+
+export default function Page() {
+  return (
+    <div style={{ padding: 20 }}>
+      <Card>
+        <CardContent>
+          <Grid2 container spacing={2}>
+            <Grid2>
+              <Typography variant="h4" gutterBottom>
+                Benchmark Regression Page Rendering Custommized Component
+                Dynamically
+              </Typography>
+            </Grid2>
+          </Grid2>
+        </CardContent>
+      </Card>
+      <br />
+    </div>
+  );
+}

torchci/app/v2/components/rootUxComponents/hudNavToolBar.tsx

@@ -0,0 +1,44 @@
+import { Link as MuiLink, Toolbar, Typography } from "@mui/material";
+import Link from "next/link";
+
+const pytorchHudAppBarTitleStyles = {
+  flexGrow: 1,
+  color: "#EE4C2C", // PyTorch orange
+  fontWeight: "bold",
+};
+
+export default function HudNavToolBar() {
+  return (
+    <Toolbar>
+      <Typography variant="h6" sx={pytorchHudAppBarTitleStyles}>
+        Pytorch CI Hud
+      </Typography>
+      {HudNavToolBarElement("Home(legacy)", "/", "home_nav_link")}
+      {HudNavToolBarElement("Home", "/v2", "home_nav_link")}
+      {HudNavToolBarElement(
+        "Benchmarks",
+        "/v2/benchmark/v3",
+        "benchmark_v3_nav_link"
+      )}
+    </Toolbar>
+  );
+}
+
+export function HudNavToolBarElement(
+  displayname: string,
+  navRoute: string,
+  id: string = ""
+) {
+  return (
+    <MuiLink
+      component={Link}
+      href={navRoute}
+      color="inherit"
+      underline="none"
+      sx={{ mr: 2 }}
+      id={id}
+    >
+      {displayname}
+    </MuiLink>
+  );
+}

torchci/app/v2/layout.tsx

@@ -0,0 +1,27 @@
+import { AppBar, CssBaseline } from "@mui/material";
+import HudNavToolBar from "./components/rootUxComponents/hudNavToolBar";
+
+const appBarStyles = {
+  backgroundColor: "#202124", // Similar dark tone as PyTorch navbar
+  boxShadow: "none",
+  borderBottom: "1px solid #333", // Subtle border like PyTorch's
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <CssBaseline />
+        <AppBar position="fixed" sx={appBarStyles}>
+          <HudNavToolBar />
+        </AppBar>
+        {/* Offset AppBar height */}
+        <div style={{ marginTop: "64px" }}>{children}</div>
+      </body>
+    </html>
+  );
+}

torchci/app/v2/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1> Hud Page 2.0</h1>;
+}

torchci/components/uiModules/UMComparisonTable.tsx

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.