Merge pull request #1394 from trycompai/main

[comp] Production Deploy

Author: Marfuen

apps/app/src/app/(app)/[orgId]/people/[employeeId]/layout.tsx

@@ -1,50 +1,11 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@comp/ui/breadcrumb';
-import { db } from '@db';
-
-export default async function Layout({
-  children,
-  params,
-}: {
+interface LayoutProps {
   children: React.ReactNode;
-  params: Promise<{ employeeId: string; orgId: string }>;
-}) {
-  const { employeeId, orgId } = await params;
-  const member = await db.member.findUnique({
-    where: {
-      id: employeeId,
-    },
-    select: {
-      user: {
-        select: {
-          name: true,
-        },
-      },
-    },
-  });
+}
 
+export default async function Layout({ children }: LayoutProps) {
   return (
-    <div className="m-auto flex max-w-[1200px] flex-col gap-4">
-      {member?.user?.name && (
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href={`/${orgId}/people`}>{'People'}</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{member.user.name}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      )}
-      {children}
+    <div className="m-auto flex max-w-[1200px] flex-col">
+      <div>{children}</div>
     </div>
   );
 }

apps/app/src/app/(app)/[orgId]/people/[employeeId]/page.tsx

@@ -1,5 +1,6 @@
 import { auth } from '@/utils/auth';
 
+import PageWithBreadcrumb from '@/components/pages/PageWithBreadcrumb';
 import {
   type TrainingVideo,
   trainingVideos as trainingVideosData,
@@ -15,9 +16,9 @@ import { Employee } from './components/Employee';
 export default async function EmployeeDetailsPage({
   params,
 }: {
-  params: Promise<{ employeeId: string }>;
+  params: Promise<{ employeeId: string; orgId: string }>;
 }) {
-  const { employeeId } = await params;
+  const { employeeId, orgId } = await params;
 
   const session = await auth.api.getSession({
     headers: await headers(),
@@ -50,14 +51,21 @@ export default async function EmployeeDetailsPage({
   const { fleetPolicies, device } = await getFleetPolicies(employee);
 
   return (
-    <Employee
-      employee={employee}
-      policies={policies}
-      trainingVideos={employeeTrainingVideos}
-      fleetPolicies={fleetPolicies}
-      host={device}
-      canEdit={canEditMembers}
-    />
+    <PageWithBreadcrumb
+      breadcrumbs={[
+        { label: 'People', href: `/${orgId}/people/all` },
+        { label: employee.user.name, current: true },
+      ]}
+    >
+      <Employee
+        employee={employee}
+        policies={policies}
+        trainingVideos={employeeTrainingVideos}
+        fleetPolicies={fleetPolicies}
+        host={device}
+        canEdit={canEditMembers}
+      />
+    </PageWithBreadcrumb>
   );
 }
 

apps/app/src/app/(app)/[orgId]/people/layout.tsx

@@ -33,6 +33,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
           {
             path: `/${orgId}/people/all`,
             label: 'People',
+            activeOverrideIdPrefix: 'mem_',
           },
           ...(employees.length > 0
             ? [

apps/app/src/app/s3.ts

@@ -137,14 +137,15 @@ export function extractS3KeyFromUrl(url: string): string {
 
 export async function getFleetAgent({ os }: { os: 'macos' | 'windows' | 'linux' }) {
   const fleetBucketName = process.env.FLEET_AGENT_BUCKET_NAME;
+  const fleetAgentFileName = 'Comp AI Agent-1.0.0-arm64.dmg';
 
   if (!fleetBucketName) {
     throw new Error('FLEET_AGENT_BUCKET_NAME is not defined.');
   }
 
   const getFleetAgentCommand = new GetObjectCommand({
     Bucket: fleetBucketName,
-    Key: `${os}/fleet-osquery.pkg`,
+    Key: `${os}/${fleetAgentFileName}`,
   });
 
   const response = await s3Client.send(getFleetAgentCommand);

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,45 +139,64 @@ 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.
-                    </p>
-                    <p>
-                      You should see a banner that asks you to enable MDM. Click the button and
-                      follow the instructions.
+                {isMacOS ? (
+                  <li>
+                    <strong>Login with your work email</strong>
+                    <p className="mt-1">
+                      After installation, login with your work email, select your organization and
+                      then click "Link Device" and "Install Agent".
                     </p>
-                    <p>
-                      After you've enabled MDM, if you refresh the page, the banner will disappear.
-                      Now your computer will automatically enable the necessary settings on your
-                      computer in order to be compliant.
-                    </p>
-                  </div>
-                </li>
+                  </li>
+                ) : (
+                  <li>
+                    <strong>Enable MDM</strong>
+                    <div className="space-y-2">
+                      <p>
+                        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
+                        follow the instructions.
+                      </p>
+                      <p>
+                        After you've enabled MDM, if you refresh the page, the banner will
+                        disappear. Now your computer will automatically enable the necessary
+                        settings on your computer in order to be compliant.
+                      </p>
+                    </div>
+                  </li>
+                )}
               </ol>
             </div>
           ) : (

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,7 +125,8 @@ export async function GET(req: NextRequest) {
 
     // Get package from S3 and stream it
     const packageFilename = getPackageFilename(os);
-    const packageKey = `${os}/fleet-osquery.${os === 'macos' ? 'pkg' : 'msi'}`;
+    const windowsPackageFilename = 'fleet-osquery.msi';
+    const packageKey = `windows/${windowsPackageFilename}`;
 
     const getObjectCommand = new GetObjectCommand({
       Bucket: fleetBucketName,

apps/portal/src/utils/s3.ts

@@ -132,9 +132,12 @@ export async function getFleetAgent({ os }: { os: 'macos' | 'windows' }) {
       throw new Error(`Unsupported OS: ${os}`);
   }
 
+  const macosPackageFilename = 'Comp AI Agent-1.0.0-arm64.dmg';
+  const windowsPackageFilename = 'fleet-osquery.msi';
+
   const getFleetAgentCommand = new GetObjectCommand({
     Bucket: fleetBucketName,
-    Key: `${os}/fleet-osquery.${extension}`,
+    Key: `${os}/${os === 'macos' ? macosPackageFilename : windowsPackageFilename}`,
   });
 
   const response = await s3Client.send(getFleetAgentCommand);