ENG-36 Support Intel build for mac, not just Apple Silicon (#1714)

* fix(portal): download relevant device agent per macOS chip on portal

* fix(portal): fix portal build issue

* fix(portal): add log for testing

* fix(portal): add log for testing

* fix(portal): put a dropdown to allow users to select macOS chip type for downloading agent

* style(portal): fix prettier lint errors

---------

Co-authored-by: chasprowebdev <chasgarciaprowebdev@gmail.com>
Co-authored-by: Mariano Fuentes <marfuen98@gmail.com>

Author: 3 people

apps/portal/src/app/(app)/(home)/[orgId]/components/tasks/DeviceAgentAccordionItem.tsx

@@ -1,13 +1,15 @@
 'use client';
 
+import { detectOSFromUserAgent, SupportedOS } from '@/utils/os';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@comp/ui/accordion';
 import { Button } from '@comp/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@comp/ui/card';
 import { cn } from '@comp/ui/cn';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@comp/ui/select';
 import type { Member } from '@db';
 import { CheckCircle2, Circle, Download, Loader2, XCircle } from 'lucide-react';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import type { FleetPolicy, Host } from '../../types';
 
@@ -23,9 +25,12 @@ export function DeviceAgentAccordionItem({
   fleetPolicies = [],
 }: DeviceAgentAccordionItemProps) {
   const [isDownloading, setIsDownloading] = useState(false);
+  const [detectedOS, setDetectedOS] = useState<SupportedOS | null>(null);
 
-  // Detect OS from user agent
-  const isMacOS = typeof window !== 'undefined' && navigator.userAgent.includes('Mac');
+  const isMacOS = useMemo(
+    () => detectedOS === 'macos' || detectedOS === 'macos-intel',
+    [detectedOS],
+  );
 
   const hasInstalledAgent = host !== null;
   const allPoliciesPass =
@@ -55,12 +60,22 @@ export function DeviceAgentAccordionItem({
 
       // Now trigger the actual download using the browser's native download mechanism
       // This will show in the browser's download UI immediately
-      const downloadUrl = `/api/download-agent?token=${encodeURIComponent(token)}`;
+      const downloadUrl = `/api/download-agent?token=${encodeURIComponent(token)}&os=${detectedOS}`;
 
       // Method 1: Using a temporary link (most reliable)
       const a = document.createElement('a');
       a.href = downloadUrl;
-      a.download = isMacOS ? 'Comp AI Agent-1.0.0-arm64.dmg' : 'compai-device-agent.zip';
+
+      // Set filename based on OS and architecture
+      if (isMacOS) {
+        a.download =
+          detectedOS === 'macos'
+            ? 'Comp AI Agent-1.0.0-arm64.dmg'
+            : 'Comp AI Agent-1.0.0-intel.dmg';
+      } else {
+        a.download = 'compai-device-agent.zip';
+      }
+
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -95,6 +110,14 @@ export function DeviceAgentAccordionItem({
     }
   };
 
+  useEffect(() => {
+    const detectOS = async () => {
+      const os = await detectOSFromUserAgent();
+      setDetectedOS(os);
+    };
+    detectOS();
+  }, []);
+
   return (
     <AccordionItem value="device-agent" className="border rounded-xs">
       <AccordionTrigger className="px-4 hover:no-underline [&[data-state=open]]:pb-2">
@@ -129,15 +152,31 @@ export function DeviceAgentAccordionItem({
                   <p className="mt-1">
                     Click the download button below to get the Device Agent installer.
                   </p>
-                  <Button
-                    size="sm"
-                    variant="default"
-                    onClick={handleDownload}
-                    disabled={isDownloading || hasInstalledAgent}
-                    className="gap-2 mt-2"
-                  >
-                    {getButtonContent()}
-                  </Button>
+                  <div className="flex items-center gap-2 mt-2">
+                    {isMacOS && !hasInstalledAgent && (
+                      <Select
+                        value={detectedOS || 'macos'}
+                        onValueChange={(value: 'macos' | 'macos-intel') => setDetectedOS(value)}
+                      >
+                        <SelectTrigger className="w-[136px]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="macos">Apple Silicon</SelectItem>
+                          <SelectItem value="macos-intel">Intel</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+                    <Button
+                      size="sm"
+                      variant="default"
+                      onClick={handleDownload}
+                      disabled={isDownloading || hasInstalledAgent}
+                      className="gap-2"
+                    >
+                      {getButtonContent()}
+                    </Button>
+                  </div>
                 </li>
                 {!isMacOS && (
                   <li>

apps/portal/src/app/api/download-agent/route.ts

@@ -21,6 +21,11 @@ export const maxDuration = 60;
 export async function GET(req: NextRequest) {
   const searchParams = req.nextUrl.searchParams;
   const token = searchParams.get('token');
+  const os = searchParams.get('os');
+
+  if (!os) {
+    return new NextResponse('Missing OS', { status: 400 });
+  }
 
   if (!token) {
     return new NextResponse('Missing download token', { status: 400 });
@@ -36,14 +41,12 @@ export async function GET(req: NextRequest) {
   // Delete token after retrieval (one-time use)
   await kv.del(`download:${token}`);
 
-  const { orgId, employeeId, os } = downloadInfo as {
+  const { orgId, employeeId } = downloadInfo as {
     orgId: string;
     employeeId: string;
     userId: string;
-    os: SupportedOS;
   };
-  console.log(os);
-  
+
   // Hardcoded device marker paths used by the setup scripts
   const fleetDevicePathMac = '/Users/Shared/.fleet';
   const fleetDevicePathWindows = 'C:\\ProgramData\\CompAI\\Fleet';
@@ -57,7 +60,8 @@ export async function GET(req: NextRequest) {
   if (os === 'macos' || os === 'macos-intel') {
     try {
       // Direct DMG download for macOS
-      const macosPackageFilename = os === 'macos' ? 'Comp AI Agent-1.0.0-arm64.dmg' : 'Comp AI Agent-1.0.0.dmg';
+      const macosPackageFilename =
+        os === 'macos' ? 'Comp AI Agent-1.0.0-arm64.dmg' : 'Comp AI Agent-1.0.0.dmg';
       const packageKey = `macos/${macosPackageFilename}`;
 
       const getObjectCommand = new GetObjectCommand({
@@ -118,15 +122,15 @@ export async function GET(req: NextRequest) {
     });
 
     // Add script file
-    const scriptFilename = getScriptFilename(os);
+    const scriptFilename = getScriptFilename(os as SupportedOS);
     archive.append(script, { name: scriptFilename, mode: 0o755 });
 
     // Add README
-    const readmeContent = getReadmeContent(os);
+    const readmeContent = getReadmeContent(os as SupportedOS);
     archive.append(readmeContent, { name: 'README.txt' });
 
     // Get package from S3 and stream it
-    const packageFilename = getPackageFilename(os);
+    const packageFilename = getPackageFilename(os as SupportedOS);
     const windowsPackageFilename = 'fleet-osquery.msi';
     const packageKey = `windows/${windowsPackageFilename}`;
 

apps/portal/src/app/api/download-agent/scripts/common.ts

@@ -1,15 +1,17 @@
 import type { SupportedOS } from '../types';
 
 export function getScriptFilename(os: SupportedOS): string {
-  return os === 'macos' ? 'run_me_first.command' : 'run_me_first.bat';
+  return os === 'macos' || os === 'macos-intel' ? 'run_me_first.command' : 'run_me_first.bat';
 }
 
 export function getPackageFilename(os: SupportedOS): string {
-  return os === 'macos' ? 'compai-device-agent.pkg' : 'compai-device-agent.msi';
+  return os === 'macos' || os === 'macos-intel'
+    ? 'compai-device-agent.pkg'
+    : 'compai-device-agent.msi';
 }
 
 export function getReadmeContent(os: SupportedOS): string {
-  if (os === 'macos') {
+  if (os === 'macos' || os === 'macos-intel') {
     return `Installation Instructions for macOS:
 
 1. First, run the setup script by double-clicking "run_me_first.command"

apps/portal/src/utils/os.ts

@@ -0,0 +1,39 @@
+export type SupportedOS = 'macos' | 'windows' | 'macos-intel';
+
+export async function detectOSFromUserAgent(): Promise<SupportedOS | null> {
+  try {
+    const ua = navigator.userAgent.toLowerCase();
+
+    // Detect Windows
+    if (ua.includes('win')) {
+      return 'windows';
+    }
+
+    // Detect macOS
+    if (ua.includes('mac')) {
+      // Try modern userAgentData API first (Chrome, Edge)
+      if ('userAgentData' in navigator && navigator.userAgentData) {
+        const data: { architecture?: string } = await (
+          navigator.userAgentData as {
+            getHighEntropyValues: (hints: string[]) => Promise<{ architecture?: string }>;
+          }
+        ).getHighEntropyValues(['architecture']);
+
+        if (data.architecture === 'arm') return 'macos';
+        if (data.architecture === 'x86') return 'macos-intel';
+      }
+
+      // Fallback to userAgent string parsing
+      if (ua.includes('arm64')) return 'macos';
+      if (ua.includes('intel')) return 'macos-intel';
+
+      // Default to macos if we can't determine architecture
+      return 'macos';
+    }
+
+    return null;
+  } catch (error) {
+    console.error('Error detecting OS:', error);
+    return null;
+  }
+}