console: clean up connect modal MCP instructions CNS-63

console/src/access/AppPasswordsPage.tsx

@@ -28,7 +28,12 @@ import {
   Radio,
   RadioGroup,
   Stack,
+  Tab,
   Table,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
   Tbody,
   Td,
   Text,
@@ -495,34 +500,33 @@ const SecretBox = ({
     >
       <VStack alignItems="flex-start" width="100%">
         <AlertDescription width="100%" px={2}>
-          <VStack alignItems="start" spacing="3">
-            <VStack alignItems="start" spacing="1" width="100%">
-              <Text fontSize="md" fontWeight="500">
-                New password {`"${name}"`}:
-              </Text>
-              <SecretCopyableBox
-                label="clientId"
-                contents={password}
-                obfuscatedContent={obfuscatedContent}
-              />
-            </VStack>
-            <VStack alignItems="start" spacing="1" width="100%">
-              <Text fontSize="md" fontWeight="500">
-                MCP Token
-              </Text>
-              <SecretCopyableBox
-                label="mcpToken"
-                contents={base64Token}
-                obfuscatedContent={obfuscatedBase64Token}
-                overflow="hidden"
-                minWidth={0}
-              />
-              <Text fontSize="xs" color={colors.foreground.secondary}>
-                Base64-encoded <code>{userEmail}:&lt;password&gt;</code> for MCP
-                configuration.
-              </Text>
-            </VStack>
-          </VStack>
+          <Text fontSize="md" fontWeight="500" mb="1">
+            New password {`"${name}"`}
+          </Text>
+          <Tabs variant="line" size="sm">
+            <TabList>
+              <Tab>App password</Tab>
+              <Tab>MCP token</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel px="0" pt="3" pb="0">
+                <SecretCopyableBox
+                  label="clientId"
+                  contents={password}
+                  obfuscatedContent={obfuscatedContent}
+                />
+              </TabPanel>
+              <TabPanel px="0" pt="3" pb="0">
+                <SecretCopyableBox
+                  label="mcpToken"
+                  contents={base64Token}
+                  obfuscatedContent={obfuscatedBase64Token}
+                  overflow="hidden"
+                  minWidth={0}
+                />
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
           <Text pt={2} textStyle="text-base" color={colors.foreground.primary}>
             Write this down; you will not be able to see your credentials again
             after you reload!

console/src/components/ConnectInstructions.tsx

@@ -35,12 +35,18 @@ export interface ConnectInstructionsProps extends BoxProps {
   mcpBase64Token?: string;
   /** Called when the active tab changes. */
   onTabChange?: (title: string) => void;
+  /** Callback to generate a new MCP token (creates an app password). */
+  onGenerateToken?: () => void;
+  /** Whether token generation is in progress. */
+  isGeneratingToken?: boolean;
 }
 
 const ConnectInstructions = ({
   user,
   onTabChange,
   mcpBase64Token,
+  onGenerateToken,
+  isGeneratingToken,
   ...props
 }: ConnectInstructionsProps): JSX.Element => {
   const [currentEnvironment] = useAtom(currentEnvironmentState);
@@ -129,6 +135,8 @@ const ConnectInstructions = ({
             <McpConnectInstructions
               userStr={userStr}
               mcpBase64Token={mcpBase64Token}
+              onGenerateToken={onGenerateToken}
+              isGeneratingToken={isGeneratingToken}
             />
           ),
           icon: <ConnectionIcon w="4" h="4" />,

console/src/components/ConnectModal.tsx

@@ -31,7 +31,7 @@ import docUrls from "~/mz-doc-urls.json";
 import { useCreateApiToken } from "~/queries/frontegg";
 import { useListApiTokens } from "~/queries/frontegg";
 import { MaterializeTheme } from "~/theme";
-import { obfuscateSecret, toBase64 } from "~/utils/format";
+import { toBase64 } from "~/utils/format";
 
 import { SecretCopyableBox } from "./copyableComponents";
 import SupportLink from "./SupportLink";
@@ -69,6 +69,8 @@ const ConnectModal = ({
     ? toBase64(`${mcpUser}:${newPassword.password}`)
     : undefined;
 
+  const isMcpTab = activeTab === "MCP Server";
+
   return (
     <Modal size="3xl" isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
@@ -97,17 +99,22 @@ const ConnectModal = ({
             userStr={forAppPassword?.user}
             mcpBase64Token={mcpBase64Token}
             onTabChange={setActiveTab}
+            onGenerateToken={() =>
+              createAppPassword({
+                type: "personal",
+                description: "MCP token",
+              })
+            }
+            isGeneratingToken={createInProgress}
             mt="4"
           />
-          {showCreateAppPassword && (
+          {showCreateAppPassword && !isMcpTab && (
             <Box mt="6">
               <CreateAppPassword
                 user={user}
                 createAppPassword={createAppPassword}
                 createInProgress={createInProgress}
                 newPassword={newPassword}
-                mcpBase64Token={mcpBase64Token}
-                showMcpToken={activeTab === "MCP Server"}
               />
             </Box>
           )}
@@ -122,8 +129,6 @@ interface CreateAppPasswordProps {
   createAppPassword: ReturnType<typeof useCreateApiToken>["mutate"];
   createInProgress: boolean;
   newPassword: ReturnType<typeof useCreateApiToken>["data"];
-  mcpBase64Token?: string;
-  showMcpToken: boolean;
 }
 
 const CreateAppPassword = (props: CreateAppPasswordProps) => {
@@ -147,8 +152,6 @@ const CreateAppPasswordInner = ({
   createAppPassword,
   createInProgress,
   newPassword,
-  mcpBase64Token,
-  showMcpToken,
 }: CreateAppPasswordProps) => {
   const { data: appPasswords } = useListApiTokens({ user });
   const { colors } = useTheme<MaterializeTheme>();
@@ -165,26 +168,6 @@ const CreateAppPasswordInner = ({
   if (newPassword?.password) {
     return (
       <>
-        {showMcpToken && mcpBase64Token && (
-          <VStack alignItems="stretch" mb="3">
-            <Text
-              as="span"
-              fontSize="sm"
-              lineHeight="16px"
-              fontWeight={500}
-              color={colors.foreground.primary}
-            >
-              MCP token
-            </Text>
-            <SecretCopyableBox
-              label="mcpToken"
-              contents={mcpBase64Token}
-              obfuscatedContent={obfuscateSecret(mcpBase64Token)}
-              overflow="hidden"
-              minWidth={0}
-            />
-          </VStack>
-        )}
         <VStack alignItems="stretch">
           <Text
             as="span"
@@ -223,7 +206,7 @@ const CreateAppPasswordInner = ({
             Create an app password
           </Text>
           <Text fontSize="sm" color={colors.foreground.secondary}>
-            Create a new app password if you don’t have one accessible.
+            Create a new app password if you don&apos;t have one accessible.
           </Text>
         </Box>
         <Button