fix(portal): fix downloading device agent on safari (#1791)

Marfuen · web-flow · commit 699073f94581 · 2025-11-20T11:55:43.000-05:00
diff --git a/apps/portal/src/app/(app)/(home)/[orgId]/components/tasks/DeviceAgentAccordionItem.tsx b/apps/portal/src/app/(app)/(home)/[orgId]/components/tasks/DeviceAgentAccordionItem.tsx
@@ -1,5 +1,10 @@
 'use client';
 
+import {
+  MAC_APPLE_SILICON_FILENAME,
+  MAC_INTEL_FILENAME,
+  WINDOWS_FILENAME,
+} from '@/app/api/download-agent/constants';
 import { detectOSFromUserAgent, SupportedOS } from '@/utils/os';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@comp/ui/accordion';
 import { Button } from '@comp/ui/button';
@@ -51,6 +56,11 @@ export function DeviceAgentAccordionItem({
   const isCompleted = hasInstalledAgent && failedPoliciesCount === 0;
 
   const handleDownload = async () => {
+    if (!detectedOS) {
+      toast.error('Could not detect your OS. Please refresh and try again.');
+      return;
+    }
+
     setIsDownloading(true);
 
     try {
@@ -61,6 +71,7 @@ export function DeviceAgentAccordionItem({
         body: JSON.stringify({
           orgId: member.organizationId,
           employeeId: member.id,
+          os: detectedOS,
         }),
       });
 
@@ -73,20 +84,17 @@ 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)}&os=${detectedOS}`;
+      const downloadUrl = `/api/download-agent?token=${encodeURIComponent(token)}`;
 
       // Method 1: Using a temporary link (most reliable)
       const a = document.createElement('a');
       a.href = downloadUrl;
 
       // 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';
+        a.download = detectedOS === 'macos' ? MAC_APPLE_SILICON_FILENAME : MAC_INTEL_FILENAME;
       } else {
-        a.download = 'Comp AI Agent 1.0.0.exe';
+        a.download = WINDOWS_FILENAME;
       }
 
       document.body.appendChild(a);
diff --git a/apps/portal/src/app/api/download-agent/constants.ts b/apps/portal/src/app/api/download-agent/constants.ts
@@ -0,0 +1,4 @@
+export const MAC_APPLE_SILICON_FILENAME = 'Comp AI Agent-1.0.0-arm64.dmg';
+export const MAC_INTEL_FILENAME = 'Comp AI Agent-1.0.0-intel.dmg';
+export const WINDOWS_FILENAME = 'Comp AI Agent 1.0.0.exe';
+
diff --git a/apps/portal/src/app/api/download-agent/route.ts b/apps/portal/src/app/api/download-agent/route.ts
@@ -1,114 +1,149 @@
 import { logger } from '@/utils/logger';
 import { s3Client } from '@/utils/s3';
-import { GetObjectCommand } from '@aws-sdk/client-s3';
+import { GetObjectCommand, HeadObjectCommand } from '@aws-sdk/client-s3';
 import { client as kv } from '@comp/kv';
 import { type NextRequest, NextResponse } from 'next/server';
 import { Readable } from 'stream';
 
+import { MAC_APPLE_SILICON_FILENAME, MAC_INTEL_FILENAME, WINDOWS_FILENAME } from './constants';
+import type { SupportedOS } from './types';
+
 export const runtime = 'nodejs';
 export const dynamic = 'force-dynamic';
 export const maxDuration = 60;
 
-// GET handler for direct browser downloads using token
-export async function GET(req: NextRequest) {
-  const searchParams = req.nextUrl.searchParams;
-  const token = searchParams.get('token');
-  const os = searchParams.get('os');
+interface DownloadTokenInfo {
+  orgId: string;
+  employeeId: string;
+  userId: string;
+  os: SupportedOS;
+  createdAt: number;
+}
+
+interface DownloadTarget {
+  key: string;
+  filename: string;
+  contentType: string;
+}
+
+const getDownloadTarget = (os: SupportedOS): DownloadTarget => {
+  if (os === 'windows') {
+    return {
+      key: `windows/${WINDOWS_FILENAME}`,
+      filename: WINDOWS_FILENAME,
+      contentType: 'application/octet-stream',
+    };
+  }
 
-  if (!os) {
-    return new NextResponse('Missing OS', { status: 400 });
+  const isAppleSilicon = os === 'macos';
+  const filename = isAppleSilicon ? MAC_APPLE_SILICON_FILENAME : MAC_INTEL_FILENAME;
+
+  return {
+    key: `macos/${filename}`,
+    filename,
+    contentType: 'application/x-apple-diskimage',
+  };
+};
+
+const buildResponseHeaders = (
+  target: DownloadTarget,
+  contentLength?: number | null,
+): Record<string, string> => {
+  const headers: Record<string, string> = {
+    'Content-Type': target.contentType,
+    'Content-Disposition': `attachment; filename="${target.filename}"`,
+    'Cache-Control': 'no-cache, no-store, must-revalidate',
+    'X-Accel-Buffering': 'no',
+  };
+
+  if (typeof contentLength === 'number' && Number.isFinite(contentLength)) {
+    headers['Content-Length'] = contentLength.toString();
   }
 
+  return headers;
+};
+
+const getDownloadToken = async (token: string): Promise<DownloadTokenInfo | null> => {
+  const info = await kv.get<DownloadTokenInfo>(`download:${token}`);
+  return info ?? null;
+};
+
+const ensureBucket = (): string | null => {
+  const bucket = process.env.FLEET_AGENT_BUCKET_NAME;
+  return bucket ?? null;
+};
+
+const handleDownload = async (req: NextRequest, isHead: boolean) => {
+  const token = req.nextUrl.searchParams.get('token');
+
   if (!token) {
     return new NextResponse('Missing download token', { status: 400 });
   }
 
-  // Retrieve download info from KV store
-  const downloadInfo = await kv.get(`download:${token}`);
+  const downloadInfo = await getDownloadToken(token);
 
   if (!downloadInfo) {
     return new NextResponse('Invalid or expired download token', { status: 403 });
   }
 
-  // Delete token after retrieval (one-time use)
-  await kv.del(`download:${token}`);
-
-  // Hardcoded device marker paths used by the setup scripts
-  const fleetBucketName = process.env.FLEET_AGENT_BUCKET_NAME;
+  const fleetBucketName = ensureBucket();
 
   if (!fleetBucketName) {
+    logger('Device agent download misconfigured: missing bucket');
     return new NextResponse('Server configuration error', { status: 500 });
   }
 
-  // For macOS, serve the DMG directly. For Windows, create a zip with script and installer.
-  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 packageKey = `macos/${macosPackageFilename}`;
+  const target = getDownloadTarget(downloadInfo.os);
 
-      const getObjectCommand = new GetObjectCommand({
+  try {
+    if (isHead) {
+      const headCommand = new HeadObjectCommand({
         Bucket: fleetBucketName,
-        Key: packageKey,
+        Key: target.key,
       });
 
-      const s3Response = await s3Client.send(getObjectCommand);
+      const headResult = await s3Client.send(headCommand);
 
-      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',
-        },
+      return new NextResponse(null, {
+        headers: buildResponseHeaders(target, headResult.ContentLength ?? null),
       });
-    } 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;
-  try {
-    const windowsPackageFilename = 'Comp AI Agent 1.0.0.exe';
-    const packageKey = `windows/${windowsPackageFilename}`;
 
     const getObjectCommand = new GetObjectCommand({
       Bucket: fleetBucketName,
-      Key: packageKey,
+      Key: target.key,
     });
 
     const s3Response = await s3Client.send(getObjectCommand);
 
     if (!s3Response.Body) {
-      return new NextResponse('Executable file not found', { status: 404 });
+      return new NextResponse('Installer file not found', { status: 404 });
     }
 
-    // Convert S3 stream to Web Stream for NextResponse
+    await kv.del(`download:${token}`);
+
     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/octet-stream',
-        'Content-Disposition': `attachment; filename="${windowsPackageFilename}"`,
-        'Cache-Control': 'no-cache, no-store, must-revalidate',
-        'X-Accel-Buffering': 'no',
-      },
+      headers: buildResponseHeaders(target, s3Response.ContentLength ?? null),
     });
   } catch (error) {
-    logger('Error creating agent download', { error });
-    return new NextResponse('Failed to create download', { status: 500 });
+    logger('Error serving device agent download', {
+      error,
+      token,
+      os: downloadInfo.os,
+      method: isHead ? 'HEAD' : 'GET',
+    });
+
+    return new NextResponse('Failed to download agent', { status: 500 });
   }
+};
+
+export async function GET(req: NextRequest) {
+  return handleDownload(req, false);
+}
+
+export async function HEAD(req: NextRequest) {
+  return handleDownload(req, true);
 }
diff --git a/apps/portal/src/app/api/download-agent/token/route.ts b/apps/portal/src/app/api/download-agent/token/route.ts
@@ -7,6 +7,11 @@ import { createFleetLabel } from '../fleet-label';
 import type { DownloadAgentRequest, SupportedOS } from '../types';
 import { detectOSFromUserAgent, validateMemberAndOrg } from '../utils';
 
+const SUPPORTED_OSES: SupportedOS[] = ['macos', 'macos-intel', 'windows'];
+
+const isSupportedOS = (value: unknown): value is SupportedOS =>
+  typeof value === 'string' && SUPPORTED_OSES.includes(value as SupportedOS);
+
 export async function POST(req: NextRequest) {
   // Authentication
   const session = await auth.api.getSession({
@@ -18,7 +23,7 @@ export async function POST(req: NextRequest) {
   }
 
   // Validate request body
-  const { orgId, employeeId }: DownloadAgentRequest = await req.json();
+  const { orgId, employeeId, os }: DownloadAgentRequest = await req.json();
 
   if (!orgId || !employeeId) {
     return new NextResponse('Missing orgId or employeeId', { status: 400 });
@@ -30,13 +35,13 @@ export async function POST(req: NextRequest) {
     return new NextResponse('Member not found or organization invalid', { status: 404 });
   }
 
-  // Auto-detect OS from User-Agent
+  // Auto-detect OS from User-Agent, but allow explicit overrides from the client
   const userAgent = req.headers.get('user-agent');
-  const detectedOS = detectOSFromUserAgent(userAgent);
+  const detectedOS = isSupportedOS(os) ? os : detectOSFromUserAgent(userAgent);
 
   if (!detectedOS) {
     return new NextResponse(
-      'Could not detect OS from User-Agent. Please use a standard browser on macOS or Windows.',
+      'Could not determine operating system. Please select an OS and try again.',
       { status: 400 },
     );
   }
@@ -58,7 +63,7 @@ export async function POST(req: NextRequest) {
     await createFleetLabel({
       employeeId,
       memberId: member.id,
-      os: detectedOS as SupportedOS,
+      os: detectedOS,
       fleetDevicePathMac,
       fleetDevicePathWindows,
     });
diff --git a/apps/portal/src/app/api/download-agent/types.ts b/apps/portal/src/app/api/download-agent/types.ts
@@ -23,6 +23,7 @@ export interface CreateFleetLabelParams {
 export interface DownloadAgentRequest {
   orgId: string;
   employeeId: string;
+  os?: SupportedOS;
 }
 
 export interface FleetDevicePaths {
diff --git a/apps/portal/src/app/api/download-agent/utils.ts b/apps/portal/src/app/api/download-agent/utils.ts
@@ -15,27 +15,34 @@ import type { SupportedOS } from './types';
  * - macOS (Intel): "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36"
  * - macOS (Apple Silicon): "Mozilla/5.0 (Macintosh; ARM Mac OS X 11_2_3) AppleWebKit/537.36"
  */
+const isSafariUA = (ua: string) =>
+  ua.includes('safari') &&
+  !ua.includes('chrome') &&
+  !ua.includes('crios') &&
+  !ua.includes('fxios') &&
+  !ua.includes('edgios');
+
+const hasArmIndicators = (ua: string) =>
+  ua.includes('arm') || ua.includes('arm64') || ua.includes('aarch64') || ua.includes('apple');
+
 export function detectOSFromUserAgent(userAgent: string | null): SupportedOS | null {
   if (!userAgent) return null;
 
   const ua = userAgent.toLowerCase();
 
-  // Check for Windows (must check before Android since Android UA contains "linux")
   if (ua.includes('windows') || ua.includes('win32') || ua.includes('win64')) {
     return 'windows';
   }
 
-  // Check for macOS (and further distinguish Apple Silicon vs Intel)
   if (ua.includes('macintosh') || (ua.includes('mac os') && !ua.includes('like mac'))) {
-    // User-Agent containing 'arm' or 'apple' usually means Apple Silicon
-    if (ua.includes('arm') || ua.includes('apple')) {
+    if (hasArmIndicators(ua)) {
       return 'macos';
     }
-    // 'intel' in UA indicates Intel-based mac
-    if (ua.includes('intel')) {
+
+    if (!isSafariUA(ua) && ua.includes('intel')) {
       return 'macos-intel';
     }
-    // Fallback for when arch info is missing, treat as Apple Silicon (modern default)
+
     return 'macos';
   }
 
diff --git a/apps/portal/src/utils/os.ts b/apps/portal/src/utils/os.ts

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ export interface CreateFleetLabelParams {`
`23`	`23`	`export interface DownloadAgentRequest {`
`24`	`24`	`orgId: string;`
`25`	`25`	`employeeId: string;`
	`26`	`+ os?: SupportedOS;`
`26`	`27`	`}`
`27`	`28`
`28`	`29`	`export interface FleetDevicePaths {`