[CRCR] Align downstream repo page UI with main HUD style (#8330)

## Summary

- Aligns the CRCR downstream repo page (`/crcr/{org}/{repo}`) visually
with the main HUD page
- Adds rotated (tilted) column headers to accommodate more job columns
without horizontal scrolling
- Adds SHA column (7-char truncated, linked) matching the main HUD
layout
- Fixes "U" character for in-progress jobs — now shows "?" (pending)
like the main HUD
- Replaces relative time ("10h ago") with absolute time format (e.g.,
"12:27 PM") matching the main HUD
- Truncates long PR titles with ellipsis ("...") and shows full title on
hover
- Groups jobs with common numeric suffixes (e.g., test-matrix-1 through
test-matrix-16) into collapsed columns showing worst-case status
- Replaces MUI Table components with compact HTML table matching the
main HUD's dense styling

## Motivation

The CRCR downstream repo page looked significantly different from the
main HUD — MUI table with wide spacing, relative timestamps, no SHA
column, "U" for in-progress, and no job grouping. This made it harder
for users to switch between pages.

This change makes the CRCR page visually consistent with the main HUD so
users get the same dense, information-rich view they are familiar with.

## Test plan

- [ ] Verify rotated job column headers render correctly and are
readable
- [ ] Verify SHA column links to correct commit on GitHub
- [ ] Verify in-progress jobs show "?" instead of "U"
- [ ] Verify time shows "h:mm a" format without "ago" suffix
- [ ] Verify long PR titles truncate with "..." and full title on
tooltip hover
- [ ] Verify grouped jobs (e.g., test-matrix-*) collapse into single
column
- [ ] Verify grouped cell tooltip shows individual job statuses
- [ ] Verify pagination still works

Author: subinz1

torchci/pages/api/crcr/commit-info.ts

@@ -1,6 +1,8 @@
 import { getOctokit } from "lib/github";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+const ALLOWED_UPSTREAM_REPOS = new Set(["pytorch/pytorch"]);
+
 interface CommitInfo {
   sha: string;
   title: string;
@@ -19,6 +21,11 @@ export default async function handler(
   }
 
   const repoStr = Array.isArray(repo) ? repo[0] : repo;
+
+  if (!ALLOWED_UPSTREAM_REPOS.has(repoStr)) {
+    return res.status(403).json({ error: "Repository not allowed" });
+  }
+
   const shaList = (Array.isArray(shas) ? shas[0] : shas)
     .split(",")
     .filter(Boolean)
@@ -29,42 +36,44 @@ export default async function handler(
   }
 
   const [owner, name] = repoStr.split("/");
-  if (!owner || !name) {
-    return res.status(400).json({ error: "repo must be owner/name format" });
-  }
 
   try {
     const octokit = await getOctokit(owner, name);
-    const results: CommitInfo[] = [];
 
-    // Fetch commits in parallel (bounded to 50 max)
-    const promises = shaList.map(async (sha) => {
-      try {
-        const { data } = await octokit.rest.repos.getCommit({
-          owner,
-          repo: name,
-          ref: sha,
-        });
-        const message = data.commit.message.split("\n")[0];
-        return {
-          sha,
-          title: message,
-          author: data.author?.login ?? data.commit.author?.name ?? "unknown",
-        };
-      } catch {
-        return { sha, title: "", author: "" };
+    // Single GraphQL query instead of N REST calls
+    const commitFragments = shaList.map(
+      (sha, i) => `c${i}: object(oid: "${sha}") {
+        ... on Commit {
+          oid
+          messageHeadline
+          author { user { login } name }
+        }
+      }`
+    );
+    const query = `query {
+      repository(owner: "${owner}", name: "${name}") {
+        ${commitFragments.join("\n")}
       }
-    });
+    }`;
 
-    const settled = await Promise.all(promises);
-    results.push(...settled);
+    const gqlResult: any = await octokit.graphql(query);
+    const repoData = gqlResult?.repository ?? {};
+
+    const results: CommitInfo[] = shaList.map((sha, i) => {
+      const commit = repoData[`c${i}`];
+      return {
+        sha,
+        title: commit?.messageHeadline ?? "",
+        author: commit?.author?.user?.login ?? commit?.author?.name ?? "",
+      };
+    });
 
-    // Commits are immutable — cache aggressively
     res
       .setHeader("Cache-Control", "s-maxage=86400, stale-while-revalidate=3600")
       .status(200)
       .json(results);
-  } catch (error: any) {
-    res.status(500).json({ error: error.message });
+  } catch (error: unknown) {
+    console.error("commit-info error:", error);
+    res.status(500).json({ error: "Failed to fetch commit info" });
   }
 }

torchci/pages/api/crcr/pr-info.ts

@@ -0,0 +1,78 @@
+import { getOctokit } from "lib/github";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const ALLOWED_UPSTREAM_REPOS = new Set(["pytorch/pytorch"]);
+
+interface PrInfo {
+  prNumber: number;
+  title: string;
+  author: string;
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { repo, prs } = req.query;
+  if (!repo || !prs) {
+    return res
+      .status(400)
+      .json({ error: "Missing required params: repo, prs" });
+  }
+
+  const repoStr = Array.isArray(repo) ? repo[0] : repo;
+
+  if (!ALLOWED_UPSTREAM_REPOS.has(repoStr)) {
+    return res.status(403).json({ error: "Repository not allowed" });
+  }
+
+  const prList = (Array.isArray(prs) ? prs[0] : prs)
+    .split(",")
+    .map(Number)
+    .filter((n) => n > 0)
+    .slice(0, 50);
+
+  if (prList.length === 0) {
+    return res.status(200).json([]);
+  }
+
+  const [owner, name] = repoStr.split("/");
+
+  try {
+    const octokit = await getOctokit(owner, name);
+
+    // Single GraphQL query instead of N REST calls
+    const prFragments = prList.map(
+      (pr, i) => `pr${i}: pullRequest(number: ${pr}) {
+        number
+        title
+        author { login }
+      }`
+    );
+    const query = `query {
+      repository(owner: "${owner}", name: "${name}") {
+        ${prFragments.join("\n")}
+      }
+    }`;
+
+    const gqlResult: any = await octokit.graphql(query);
+    const repoData = gqlResult?.repository ?? {};
+
+    const results: PrInfo[] = prList.map((prNumber, i) => {
+      const pr = repoData[`pr${i}`];
+      return {
+        prNumber,
+        title: pr?.title ?? "",
+        author: pr?.author?.login ?? "",
+      };
+    });
+
+    res
+      .setHeader("Cache-Control", "s-maxage=300, stale-while-revalidate=600")
+      .status(200)
+      .json(results);
+  } catch (error: unknown) {
+    console.error("pr-info error:", error);
+    res.status(500).json({ error: "Failed to fetch PR info" });
+  }
+}