add Info section for card (#7276)

## Add info section 
We've been asked by people where the source of the benchmark results are
coming from, A info section is added to guide people to the github repo
locatio of the benchmarks

## Others
Add arrow and card shape to the list view for benchmarks to indicate
it's clickable

demo link:
https://torchci-git-addsource-fbopensource.vercel.app/benchmark/benchmark_list

demo:
<img width="1959" height="937" alt="image"
src="https://github.com/user-attachments/assets/d1b9a429-dc58-4fea-934d-3748cc3c1b86"
/>

Author: yangw-dev

torchci/components/benchmark/v3/BenchmarkListPage.tsx

@@ -12,13 +12,15 @@ export const categories: BenchmarkCategoryGroup[] = [
       {
         name: "CacheBench Benchmark",
         route:
-          "/benchmark/llms?repoName=pytorch%2Fpytorch&benchmarkName=TorchCache+Benchmark",
+          "/benchmark/llms?repoName=pytorch%2Fpytorch&benchmarkName=+Benchmark",
+        info: "Powered by [code](https://github.com/search?q=repo%3Apytorch%2Fpytorch%20%20TorchCache&type=code)",
       },
       {
         name: "Compiler Inductor Benchmark",
         route: "/benchmark/compilers_regression",
         description:
           "Use `legacy page` to see comparison view for different branches. It will be deprecated soon",
+        info: "Powered by [code](https://github.com/pytorch/pytorch/tree/main/benchmarks/dynamo#torchcompile-benchmarking)",
         actions: [
           {
             label: "Legacy Page/Playground",
@@ -33,11 +35,13 @@ export const categories: BenchmarkCategoryGroup[] = [
       {
         name: "LLMs Benchmark",
         route: "/benchmark/llms?repoName=pytorch%2Fpytorch",
+        info: "Powered by [code](https://github.com/pytorch/pytorch/tree/main/benchmarks/gpt_fast)",
       },
       {
         name: "Operator Microbenchmark",
         route:
           "/benchmark/llms?repoName=pytorch%2Fpytorch&benchmarkName=PyTorch+operator+microbenchmark",
+        info: "Powered by [code](https://github.com/pytorch/pytorch/tree/main/benchmarks/operator_benchmark)",
       },
       {
         name: "Triton Benchmark",
@@ -58,6 +62,7 @@ export const categories: BenchmarkCategoryGroup[] = [
         name: "TorchAO Micro API Benchmark",
         route:
           "/benchmark/llms?repoName=pytorch%2Fao&benchmarkName=micro-benchmark+api",
+        info: "Powered by [code](https://github.com/pytorch/ao/blob/main/docs/source/benchmarking_api_guide.md)",
       },
     ],
   },
@@ -69,6 +74,8 @@ export const categories: BenchmarkCategoryGroup[] = [
       {
         name: "ExecuTorch Benchmark",
         route: "/benchmark/llms?repoName=pytorch%2Fexecutorch",
+        info: "Powered by [apple-perf](https://github.com/pytorch/executorch/blob/main/.github/workflows/apple-perf.yml) \
+        and [android-perf](https://github.com/pytorch/executorch/blob/main/.github/workflows/android-perf.yml) workflows",
       },
     ],
   },
@@ -80,6 +87,7 @@ export const categories: BenchmarkCategoryGroup[] = [
       {
         name: "VLLM V1 Benchmark",
         route: "/benchmark/llms?repoName=vllm-project%2Fvllm",
+        info: "Powered by [code](https://github.com/pytorch/pytorch-integration-testing/tree/main/vllm-benchmarks/benchmarks)",
       },
     ],
   },
@@ -91,6 +99,7 @@ export const categories: BenchmarkCategoryGroup[] = [
       {
         name: "SGLang Benchmark",
         route: "/benchmark/llms?repoName=sgl-project%2Fsglang",
+        info: "Powered by [code](https://github.com/pytorch/pytorch-integration-testing/tree/main/sglang-benchmarks/benchmarks)",
       },
     ],
   },
@@ -103,6 +112,7 @@ export const categories: BenchmarkCategoryGroup[] = [
         name: "Helion Benchmark",
         route:
           "/benchmark/llms?repoName=pytorch%2Fhelion&benchmarkName=Helion+Benchmark",
+        info: "Powered by [code](https://github.com/pytorch/helion/tree/main/benchmarks)",
       },
     ],
   },

torchci/components/benchmark/v3/components/benchmarkList/BenchmarkCategoryCard.tsx

@@ -1,3 +1,4 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import {
   Card,
   CardContent,
@@ -8,12 +9,14 @@ import {
   ListItem,
   ListItemButton,
   ListItemText,
+  Paper,
   Stack,
   Tooltip,
   Typography,
 } from "@mui/material";
 import { Box } from "@mui/system";
 import Link from "next/link";
+import ReactMarkdown from "react-markdown";
 
 // ============================
 // Styles (centralized)
@@ -38,6 +41,7 @@ export interface BenchmarkLinkItem {
   name: string;
   route: string;
   description?: string;
+  info?: string;
   keys?: string[];
   actions?: {
     label: string;
@@ -81,15 +85,31 @@ function BenchmarkCardItem({
       };
 
   return (
-    <ListItem key={it.route} disablePadding>
-      <Box sx={{ width: "100%" }}>
+    <ListItem key={it.route} disablePadding sx={{ mb: 1 }}>
+      <Paper
+        variant="outlined"
+        sx={{
+          p: 1,
+          width: "100%",
+          borderRadius: 2,
+          overflow: "hidden",
+          borderColor: "divider",
+          "&:hover": {
+            boxShadow: 3,
+            borderColor: "primary.main",
+          },
+        }}
+      >
         <Tooltip title="Go to Main Page" arrow>
           <ListItemButton {...buttonProps}>
             <ListItemText
               primary={
-                <Typography variant="subtitle1">
-                  {highlight(it.name, query)}
-                </Typography>
+                <Stack direction="row" alignItems="center" spacing={1}>
+                  <Typography variant="h6" color="primary">
+                    {highlight(it.name, query)}
+                  </Typography>
+                  <ChevronRightIcon fontSize="small" />
+                </Stack>
               }
               secondary={
                 it.description?.length ? (
@@ -100,50 +120,77 @@ function BenchmarkCardItem({
           </ListItemButton>
         </Tooltip>
 
-        {/* Actions */}
+        {it.info ? (
+          <Stack
+            spacing={1}
+            sx={{ px: 2, pb: 1, pt: 0.5 }}
+            direction="row"
+            alignItems="center"
+          >
+            <Typography variant="subtitle1">Details:</Typography>
+            <Typography
+              variant="subtitle1"
+              color="text.secondary"
+              sx={{
+                "& p": { margin: 0, lineHeight: 1.2 },
+                "& ul, & ol": { margin: 0, paddingLeft: "1.2rem" },
+                "& li": { margin: 0, lineHeight: 1.2 },
+              }}
+            >
+              <MarkdownText text={it.info} />
+            </Typography>
+          </Stack>
+        ) : null}
+
         {it.actions && (
-          <Stack direction="row" spacing={1} sx={{ px: 2, pb: 1, pt: 0.5 }}>
-            {it.actions.map((a, idx) => {
-              if (!a.href) {
-                // non-link action (local click)
+          <Box sx={{ px: 2, pb: 1, pt: 0.5 }}>
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Typography variant="subtitle1">Pages:</Typography>
+              {it.actions.map((a, idx) => {
+                if (!a.href) {
+                  return (
+                    <Chip
+                      key={idx}
+                      clickable
+                      size="small"
+                      color="secondary"
+                      label={a.label}
+                      onClick={a.onClick}
+                    />
+                  );
+                }
+                const linkProps = isExternal(a.href)
+                  ? {
+                      component: "a" as const,
+                      href: a.href,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                    }
+                  : {
+                      component: Link as any,
+                      href: a.href,
+                      prefetch: false,
+                    };
                 return (
                   <Chip
+                    {...linkProps}
                     key={idx}
                     clickable
                     size="small"
-                    color="secondary"
-                    label={a.label}
-                    onClick={a.onClick}
+                    color="primary"
+                    label={
+                      <Stack direction="row" alignItems="center" spacing={0.5}>
+                        <span>{a.label}</span>
+                        <ChevronRightIcon fontSize="small" />
+                      </Stack>
+                    }
                   />
                 );
-              }
-              const linkProps = isExternal(a.href)
-                ? {
-                    component: "a" as const,
-                    href: a.href,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                  }
-                : {
-                    component: Link as any,
-                    href: a.href,
-                    // optional Next.js tweaks:
-                    prefetch: false,
-                  };
-              return (
-                <Chip
-                  {...linkProps}
-                  key={idx}
-                  clickable
-                  size="small"
-                  color="primary"
-                  label={a.label}
-                />
-              );
-            })}
-          </Stack>
+              })}
+            </Stack>
+          </Box>
         )}
-      </Box>
+      </Paper>
     </ListItem>
   );
 }
@@ -185,16 +232,11 @@ export function BenchmarkCategoryCard({
                 ...(it.actions ?? []), // keep existing actions if any
               ];
               return (
-                <>
-                  <BenchmarkCardItem
-                    key={it.route}
-                    it={{ ...it, actions }}
-                    query={query}
-                  />
-                  {index < cat.items.length - 1 && (
-                    <Divider key={`divider-${index}`} />
-                  )}
-                </>
+                <BenchmarkCardItem
+                  key={it.route}
+                  it={{ ...it, actions }}
+                  query={query}
+                />
               );
             })}
           </List>
@@ -236,3 +278,7 @@ function highlight(text: string, q: string) {
 }
 
 const isExternal = (url: string) => /^https?:\/\//i.test(url);
+
+export function MarkdownText({ text }: { text: string }) {
+  return <ReactMarkdown>{text}</ReactMarkdown>;
+}