add to top menu + auth check and form for not logged in users (#6832)

wdvr · web-flow · commit 4d667b7504ea · 2025-06-26T13:14:09.000+02:00
- adds TorchAgent to the top menu
- Adds auth check when opening the /torchagent page
- adds a google form to request access to torchagent if you don't have a
github account / don't have PyTorch write permissions
diff --git a/clickhouse_db_schema/misc.torchagent_feedback/schema.sql b/clickhouse_db_schema/misc.torchagent_feedback/schema.sql
@@ -2,11 +2,11 @@ CREATE TABLE
     misc.torchagent_feedback (
         `user` String,
         `session_id` String,
-        `torchagent_feedback` String,
+        `history_key` String,
         `feedback` Int8,
         `time_inserted` DateTime64 (0, 'UTC')
     ) ENGINE = SharedMergeTree ('/clickhouse/tables/{uuid}/{shard}', '{replica}')
 PARTITION BY
     toYYYYMM (time_inserted)
 ORDER BY
-    (user, session_id, time_inserted) SETTINGS index_granularity = 8192
+    (user, session_id, history_key, time_inserted) SETTINGS index_granularity = 8192
diff --git a/torchci/components/NavBar.tsx b/torchci/components/NavBar.tsx
@@ -14,14 +14,21 @@ const NavBarDropdown = ({
 }): JSX.Element => {
   const [dropdown, setDropdown] = useState(false);
   const dropdownStyle = dropdown ? { display: "block" } : {};
+  const firstItemHref = items.length > 0 ? items[0].href : "#";
 
   return (
     <li
       onMouseEnter={() => setDropdown(true)}
       onMouseLeave={() => setDropdown(false)}
       style={{ padding: 0 }}
     >
-      <div className={styles.dropdowntitle}>{title} ▾</div>
+      <Link
+        href={firstItemHref}
+        prefetch={false}
+        className={styles.dropdowntitle}
+      >
+        {title} ▾
+      </Link>
       <ul className={styles.dropdown} style={dropdownStyle}>
         {items.map((item: any) => (
           <li key={item.href}>
@@ -131,6 +138,36 @@ function NavBar() {
     },
   ];
 
+  const metricsDropdown = [
+    {
+      name: "Metrics",
+      href: "/metrics",
+    },
+    {
+      name: (
+        <span style={{ position: "relative" }}>
+          TorchAgent
+          <span
+            style={{
+              marginLeft: "4px",
+              padding: "2px 6px",
+              fontSize: "10px",
+              fontWeight: "bold",
+              backgroundColor: "#FF6B35",
+              color: "white",
+              borderRadius: "8px",
+              textTransform: "uppercase",
+              lineHeight: "1",
+            }}
+          >
+            BETA
+          </span>
+        </span>
+      ),
+      href: "/torchagent",
+    },
+  ];
+
   return (
     <div className={styles.navbar}>
       <div>
@@ -145,6 +182,11 @@ function NavBar() {
               MiniHUD
             </Link>
           </li>
+          <li>
+            <Link prefetch={false} href="/hud/pytorch/pytorch/main">
+              PyTorch
+            </Link>
+          </li>
           <li>
             <Link prefetch={false} href="/hud/pytorch/executorch/main">
               ExecuTorch
@@ -181,11 +223,7 @@ function NavBar() {
               Requests
             </Link>
           </li>
-          <li>
-            <Link prefetch={false} href="/metrics">
-              Metrics
-            </Link>
-          </li>
+          <NavBarDropdown title="Metrics" items={metricsDropdown} />
           <li>
             <Link prefetch={false} href="/kpis">
               KPIs
diff --git a/torchci/components/TorchAgentPage.tsx b/torchci/components/TorchAgentPage.tsx
@@ -8,7 +8,7 @@ import {
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { useSession } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import AISpinner from "./AISpinner";
 import { ChatHistorySidebar } from "./TorchAgentPage/ChatHistorySidebar";
@@ -75,7 +75,7 @@ export const TorchAgentPage = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down("lg")); // Below 1200px
 
   // Constants
-  const typingSpeed = 30;
+  const typingSpeed = 3; // ms per character
   const sidebarWidth = 300;
 
   const featureRequestUrl =
@@ -106,6 +106,9 @@ export const TorchAgentPage = () => {
   const [error, setError] = useState("");
   const [debugVisible, setDebugVisible] = useState(false);
   const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
+  const [permissionState, setPermissionState] = useState<
+    "unchecked" | "checking" | "sufficient" | "insufficient"
+  >("unchecked");
 
   const [chatHistory, setChatHistory] = useState<ChatSession[]>([]);
   const [selectedSession, setSelectedSession] = useState<string | null>(null);
@@ -202,6 +205,38 @@ export const TorchAgentPage = () => {
     }
   }, [session.data?.user]);
 
+  const checkUserPermissions = useCallback(async () => {
+    if (
+      !session.data?.user ||
+      hasAuthCookie() ||
+      permissionState !== "unchecked"
+    )
+      return;
+
+    setPermissionState("checking");
+    try {
+      // Make a simple API call to check permissions
+      const response = await fetch("/api/torchagent-check-permissions", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (response.status === 403) {
+        setPermissionState("insufficient");
+      } else if (!response.ok) {
+        // For 500 errors or other issues, also show insufficient permissions
+        setPermissionState("insufficient");
+      } else {
+        setPermissionState("sufficient");
+      }
+    } catch (error) {
+      console.error("Error checking permissions:", error);
+      setPermissionState("insufficient");
+    }
+  }, [session.data?.user, permissionState]);
+
   const loadChatSession = async (sessionId: string) => {
     // Cancel any active stream first
     if (fetchControllerRef.current && isLoading) {
@@ -326,8 +361,17 @@ export const TorchAgentPage = () => {
   useEffect(() => {
     if (session.data?.user) {
       fetchChatHistory();
+      // Only check permissions if we haven't checked yet
+      if (permissionState === "unchecked") {
+        checkUserPermissions();
+      }
     }
-  }, [session.data?.user, fetchChatHistory]);
+  }, [
+    session.data?.user,
+    fetchChatHistory,
+    permissionState,
+    checkUserPermissions,
+  ]);
 
   useEffect(() => {
     if (!session.data?.user) return;
@@ -610,6 +654,8 @@ export const TorchAgentPage = () => {
             "Authentication required. Please sign in to continue."
           );
         } else if (response.status === 403) {
+          // Set the insufficient permissions flag for authenticated users
+          setPermissionState("insufficient");
           throw new Error(
             "Access denied. You need write permissions to pytorch/pytorch repository to use this tool."
           );
@@ -671,13 +717,15 @@ export const TorchAgentPage = () => {
 
   const hasCookieAuth = hasAuthCookie();
 
-  if (session.status === "loading") {
+  if (session.status === "loading" || permissionState === "checking") {
     return (
       <TorchAgentPageContainer>
         <QuerySection sx={{ padding: "20px", textAlign: "center" }}>
           <AISpinner />
           <Typography variant="h6" sx={{ mt: 2 }}>
-            Checking authentication...
+            {session.status === "loading"
+              ? "Checking authentication..."
+              : "Checking permissions..."}
           </Typography>
         </QuerySection>
       </TorchAgentPageContainer>
@@ -700,9 +748,98 @@ export const TorchAgentPage = () => {
             You must be logged in with write permissions to pytorch/pytorch to
             access this tool.
           </Typography>
-          <Typography variant="body2" color="text.secondary">
-            Please sign in to continue.
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            Please sign in with GitHub to continue.
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 2,
+            }}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              size="large"
+              onClick={() => signIn()}
+              sx={{ minWidth: "200px" }}
+            >
+              Sign In
+            </Button>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              component="a"
+              href="https://forms.gle/SoLgaCucjJqc6F647"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                textDecoration: "underline",
+                "&:hover": {
+                  textDecoration: "none",
+                },
+              }}
+            >
+              no GitHub account? request access here
+            </Typography>
+          </Box>
+        </QuerySection>
+      </TorchAgentPageContainer>
+    );
+  }
+
+  // Check if user is authenticated but has insufficient permissions
+  if (
+    session.data?.user &&
+    !hasAuthCookie() &&
+    permissionState === "insufficient"
+  ) {
+    return (
+      <TorchAgentPageContainer>
+        <QuerySection sx={{ padding: "20px", textAlign: "center" }}>
+          <Typography variant="h4" gutterBottom>
+            Insufficient Permissions
+          </Typography>
+          <Typography variant="body1" sx={{ mb: 2 }}>
+            You are signed in as{" "}
+            <strong>{session.data.user.name || session.data.user.email}</strong>
+            , but you need write permissions to pytorch/pytorch to access this
+            tool.
           </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            Please request access to continue using TorchAgent.
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              gap: 2,
+              justifyContent: "center",
+              flexWrap: "wrap",
+            }}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              component="a"
+              href="https://forms.gle/SoLgaCucjJqc6F647"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Request Access
+            </Button>
+            <Button
+              variant="outlined"
+              color="secondary"
+              onClick={() => {
+                setPermissionState("unchecked");
+                checkUserPermissions();
+              }}
+            >
+              Try Again
+            </Button>
+          </Box>
         </QuerySection>
       </TorchAgentPageContainer>
     );
diff --git a/torchci/pages/api/torchagent-check-permissions.ts b/torchci/pages/api/torchagent-check-permissions.ts
@@ -0,0 +1,25 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { getAuthorizedUsername } from "../../lib/getAuthorizedUsername";
+import { authOptions } from "./auth/[...nextauth]";
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // Only allow GET method
+  if (req.method !== "GET") {
+    return res.status(405).json({ error: "Method not allowed" });
+  }
+
+  const username = await getAuthorizedUsername(req, res, authOptions);
+  if (!username) {
+    // getAuthorizedUsername already sent the appropriate error response
+    return;
+  }
+
+  // If we get here, the user has sufficient permissions
+  res.status(200).json({
+    authorized: true,
+    username: username === "grafana-bypass-user" ? "system" : username,
+  });
+}
