feat: enhance DeviceAgentAccordionItem for macOS support and update download handling

- Added OS detection to customize download file names and instructions for macOS users.
- Updated the download route to serve a DMG file directly for macOS, while maintaining zip file generation for Windows.
- Improved user guidance in the UI for installation steps based on the operating system.

Author: Marfuen

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

@@ -24,6 +24,9 @@ export function DeviceAgentAccordionItem({
 }: DeviceAgentAccordionItemProps) {
   const [isDownloading, setIsDownloading] = useState(false);
 
+  // Detect OS from user agent
+  const isMacOS = typeof window !== 'undefined' && navigator.userAgent.includes('Mac');
+
   const hasInstalledAgent = host !== null;
   const allPoliciesPass =
     fleetPolicies.length === 0 || fleetPolicies.every((policy) => policy.response === 'pass');
@@ -57,7 +60,7 @@ export function DeviceAgentAccordionItem({
       // Method 1: Using a temporary link (most reliable)
       const a = document.createElement('a');
       a.href = downloadUrl;
-      a.download = 'compai-device-agent.zip';
+      a.download = isMacOS ? 'Comp AI Agent-1.0.0-arm64.dmg' : 'compai-device-agent.zip';
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -136,33 +139,43 @@ export function DeviceAgentAccordionItem({
                     {getButtonContent()}
                   </Button>
                 </li>
+                {!isMacOS && (
+                  <li>
+                    <strong>Run the "Install Me First" file</strong>
+                    <p className="mt-1">
+                      After extracting the downloaded zip file, locate and run the "Install Me
+                      First" file to prepare your system.
+                    </p>
+                  </li>
+                )}
                 <li>
-                  <strong>Run the "Install Me First" file</strong>
-                  <p className="mt-1">
-                    After extracting the downloaded zip file, locate and run the "Install Me First"
-                    file to prepare your system.
-                  </p>
-                </li>
-                <li>
-                  <strong>Run the Comp AI Device Agent installer</strong>
+                  <strong>
+                    {isMacOS
+                      ? 'Install the Comp AI Device Agent'
+                      : 'Run the Comp AI Device Agent installer'}
+                  </strong>
                   <p className="mt-1">
-                    Follow the installation wizard steps. When you reach the introduction screen (as
-                    shown below), click "Continue" to proceed through the installation.
+                    {isMacOS
+                      ? 'Double-click the downloaded DMG file and follow the installation instructions.'
+                      : 'Follow the installation wizard steps. When you reach the introduction screen (as shown below), click "Continue" to proceed through the installation.'}
                   </p>
-                  <Image
-                    src="/osquery-agent.jpeg"
-                    alt="Fleet osquery installer introduction screen"
-                    width={600}
-                    height={400}
-                    className="mt-2 rounded-xs border"
-                  />
+                  {!isMacOS && (
+                    <Image
+                      src="/osquery-agent.jpeg"
+                      alt="Fleet osquery installer introduction screen"
+                      width={600}
+                      height={400}
+                      className="mt-2 rounded-xs border"
+                    />
+                  )}
                 </li>
                 <li>
                   <strong>Enable MDM</strong>
                   <div className="space-y-2">
                     <p>
-                      On Mac, on the top of your screen, find the Fleet Desktop app which looks like
-                      an F made of dots. Click on it and click My Device.
+                      {isMacOS
+                        ? 'On the top of your screen, find the Fleet Desktop app which looks like an F made of dots. Click on it and click My Device.'
+                        : 'Find the Fleet Desktop app in your system tray (bottom right corner). Click on it and click My Device.'}
                     </p>
                     <p>
                       You should see a banner that asks you to enable MDM. Click the button and

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

@@ -6,7 +6,6 @@ import archiver from 'archiver';
 import { type NextRequest, NextResponse } from 'next/server';
 import { PassThrough, Readable } from 'stream';
 import {
-  generateMacScript,
   generateWindowsScript,
   getPackageFilename,
   getReadmeContent,
@@ -52,12 +51,46 @@ export async function GET(req: NextRequest) {
     return new NextResponse('Server configuration error', { status: 500 });
   }
 
-  // Generate OS-specific script
-  const fleetDevicePath = os === 'macos' ? fleetDevicePathMac : fleetDevicePathWindows;
-  const script =
-    os === 'macos'
-      ? generateMacScript({ orgId, employeeId, fleetDevicePath })
-      : generateWindowsScript({ orgId, employeeId, fleetDevicePath });
+  // For macOS, serve the DMG directly. For Windows, create a zip with script and installer.
+  if (os === 'macos') {
+    try {
+      // Direct DMG download for macOS
+      const macosPackageFilename = 'Comp AI Agent-1.0.0-arm64.dmg';
+      const packageKey = `macos/${macosPackageFilename}`;
+
+      const getObjectCommand = new GetObjectCommand({
+        Bucket: fleetBucketName,
+        Key: packageKey,
+      });
+
+      const s3Response = await s3Client.send(getObjectCommand);
+
+      if (!s3Response.Body) {
+        return new NextResponse('DMG file not found', { status: 404 });
+      }
+
+      // Convert S3 stream to Web Stream for NextResponse
+      const s3Stream = s3Response.Body as Readable;
+      const webStream = Readable.toWeb(s3Stream) as unknown as ReadableStream;
+
+      // Return streaming response with headers that trigger browser download
+      return new NextResponse(webStream, {
+        headers: {
+          'Content-Type': 'application/x-apple-diskimage',
+          'Content-Disposition': `attachment; filename="${macosPackageFilename}"`,
+          'Cache-Control': 'no-cache, no-store, must-revalidate',
+          'X-Accel-Buffering': 'no',
+        },
+      });
+    } catch (error) {
+      logger('Error downloading macOS DMG', { error });
+      return new NextResponse('Failed to download macOS agent', { status: 500 });
+    }
+  }
+
+  // Windows flow: Generate script and create zip
+  const fleetDevicePath = fleetDevicePathWindows;
+  const script = generateWindowsScript({ orgId, employeeId, fleetDevicePath });
 
   try {
     // Create a passthrough stream for the response
@@ -92,9 +125,8 @@ export async function GET(req: NextRequest) {
 
     // Get package from S3 and stream it
     const packageFilename = getPackageFilename(os);
-    const macosPackageFilename = 'Comp AI Agent-1.0.0-arm64.dmg';
     const windowsPackageFilename = 'fleet-osquery.msi';
-    const packageKey = `${os}/${os === 'macos' ? macosPackageFilename : windowsPackageFilename}`;
+    const packageKey = `windows/${windowsPackageFilename}`;
 
     const getObjectCommand = new GetObjectCommand({
       Bucket: fleetBucketName,