[dev] [Marfuen] mariano/make-portal-great-again

.cursor/mcp.json

@@ -1,12 +1,8 @@
 {
   "mcpServers": {
-    "trigger": {
-      "command": "npx",
-      "args": [
-        "trigger.dev@latest",
-        "mcp",
-        "--dev-only"
-      ]
+    "chakra-ui": {
+      "command": "bunx",
+      "args": ["-y", "@chakra-ui/react-mcp"]
     }
   }
-}
+}

apps/api/src/app/s3.ts

@@ -126,7 +126,7 @@ export async function getFleetAgent({
   os,
 }: {
   os: 'macos' | 'windows' | 'linux';
-}) {
+}): Promise<unknown> {
   if (!s3Client) {
     throw new Error('S3 client not configured');
   }

apps/portal/agents.md

@@ -0,0 +1,7 @@
+# Portal AGENTS.md
+
+## Component usage
+
+- Only use components from the `packages/ui-new` package.
+- Import components from `@trycompai/ui-new` (or the appropriate package name).
+- Do not use components from `packages/ui` or other UI packages.

apps/portal/next.config.ts

@@ -4,7 +4,11 @@ import './src/env.mjs';
 const isStandalone = process.env.NEXT_OUTPUT_STANDALONE === 'true';
 
 const config = {
-  transpilePackages: ['@trycompai/db'],
+  transpilePackages: ['@trycompai/db', '@trycompai/ui-new'],
+  serverExternalPackages: ['@ark-ui/react', '@zag-js/anatomy'],
+  experimental: {
+    optimizePackageImports: ['@chakra-ui/react'],
+  },
   images: {
     remotePatterns: [
       {

apps/portal/package.json

@@ -14,6 +14,7 @@
     "@trycompai/email": "workspace:*",
     "@trycompai/kv": "workspace:*",
     "@trycompai/ui": "workspace:*",
+    "@trycompai/ui-new": "workspace:*",
     "@types/jszip": "^3.4.1",
     "@upstash/ratelimit": "^2.0.5",
     "archiver": "^7.0.1",
@@ -43,8 +44,8 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "private": true,
   "scripts": {
@@ -53,9 +54,9 @@
     "db:generate": "bun run db:getschema && prisma generate",
     "db:getschema": "node ../../packages/db/scripts/combine-schemas.js && cp ../../packages/db/dist/schema.prisma prisma/schema.prisma",
     "db:migrate": "cd ../../packages/db && bunx prisma migrate dev && cd ../../apps/portal",
-    "dev": "next dev --turbopack -p 3002",
+    "dev": "next dev -p 3002",
     "lint": "next lint && prettier --check .",
     "prebuild": "bun run db:generate",
     "start": "next start"
   }
-}
+}

apps/portal/src/app/(app)/(home)/[orgId]/page.tsx

@@ -13,12 +13,14 @@ export default async function OrganizationPage({ params }: { params: Promise<{ o
   const { orgId } = await params;
 
   // Auth check with error handling
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  }).catch((error) => {
-    console.error('Error getting session:', error);
-    redirect('/');
-  });
+  const session = await auth.api
+    .getSession({
+      headers: await headers(),
+    })
+    .catch((error) => {
+      console.error('Error getting session:', error);
+      redirect('/');
+    });
 
   if (!session?.user) {
     redirect('/auth');

apps/portal/src/app/(app)/(home)/[orgId]/types/index.ts

@@ -88,4 +88,4 @@ export type MDM = {
   enrollment_status: string;
   name?: string;
   server_url?: string;
-};
+};

apps/portal/src/app/(app)/layout.tsx

@@ -8,10 +8,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
     headers: await headers(),
   });
 
-  console.log('session', session);
-
   if (!session?.user) {
-    console.log('no session');
     redirect('/auth');
   }
 

apps/portal/src/app/(public)/auth/page.tsx

@@ -1,9 +1,16 @@
 import { LoginForm } from '@/app/components/login-form';
 import { OtpSignIn } from '@/app/components/otp';
 import { env } from '@/env.mjs';
-import { Button } from '@comp/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@comp/ui/card';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@comp/ui/card';
 import { Icons } from '@comp/ui/icons';
+import { Button } from '@trycompai/ui-new';
 import { ArrowRight } from 'lucide-react';
 import type { Metadata } from 'next';
 import Link from 'next/link';
@@ -48,7 +55,7 @@ export default async function Page() {
                 Comp AI makes SOC 2, ISO 27001, HIPAA and GDPR effortless. Eliminate compliance
                 busywork, win more deals and accelerate growth.
               </p>
-              <Button variant="link" className="mt-2 p-0" asChild>
+              <Button variant="outline" className="mt-2 p-0" asChild>
                 <Link
                   href="https://trycomp.ai"
                   target="_blank"

apps/portal/src/app/(public)/test-ui/components/ButtonPaletteSwitcher.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import {
+  Button,
+  HStack,
+  SUPPORTED_COLOR_PALETTES,
+  type SupportedColorPalette,
+  Text,
+} from '@trycompai/ui-new';
+
+export type ButtonColorPalette = SupportedColorPalette;
+
+export function ButtonPaletteSwitcher({
+  value,
+  onChange,
+}: {
+  value: ButtonColorPalette;
+  onChange: (value: ButtonColorPalette) => void;
+}) {
+  return (
+    <HStack gap={3} align="center" flexWrap="wrap">
+      <Text color="fg" fontSize="sm" fontWeight="medium">
+        Palette
+      </Text>
+      <HStack
+        gap="2"
+        flexWrap="wrap"
+        bg="bg"
+        borderWidth="1px"
+        borderColor="border"
+        borderRadius="lg"
+        p="1"
+        boxShadow="xs"
+        role="group"
+        aria-label="Button palette"
+      >
+        {SUPPORTED_COLOR_PALETTES.map((palette) => {
+          const isSelected = palette === value;
+
+          return (
+            <Button
+              key={palette}
+              size="sm"
+              variant={isSelected ? 'solid' : 'outline'}
+              colorPalette={palette}
+              onClick={() => onChange(palette)}
+              aria-pressed={isSelected}
+            >
+              <HStack gap="2">
+                <Text as="span" textTransform="capitalize">
+                  {palette}
+                </Text>
+              </HStack>
+            </Button>
+          );
+        })}
+      </HStack>
+    </HStack>
+  );
+}

apps/portal/src/app/(public)/test-ui/components/TestUiPage.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import {
+  Box,
+  ColorModeButton,
+  Container,
+  Flex,
+  Heading,
+  type SupportedColorPalette,
+} from '@trycompai/ui-new';
+import { useState } from 'react';
+import { ButtonPaletteSwitcher } from './ButtonPaletteSwitcher';
+import { TestUiSectionsBottom } from './TestUiSectionsBottom';
+import { TestUiSectionsTop } from './TestUiSectionsTop';
+
+export function TestUiPage() {
+  const [palette, setPalette] = useState<SupportedColorPalette>('primary');
+
+  return (
+    <Box pb="12">
+      <Box
+        position="sticky"
+        top="0"
+        zIndex="sticky"
+        bg="bg"
+        borderBottomWidth="1px"
+        borderBottomColor="border"
+      >
+        <Container maxW="1400px" py="4">
+          <Flex
+            align={{ base: 'stretch', md: 'center' }}
+            justify="space-between"
+            direction={{ base: 'column', md: 'row' }}
+            gap="4"
+          >
+            <Heading size="xl">Design System Preview</Heading>
+            <Flex align="center" justify="space-between" gap="4" flexWrap="wrap">
+              <ButtonPaletteSwitcher value={palette} onChange={setPalette} />
+              <ColorModeButton />
+            </Flex>
+          </Flex>
+        </Container>
+      </Box>
+
+      <Container maxW="1400px" py={8}>
+        <TestUiSectionsTop palette={palette} />
+        <TestUiSectionsBottom palette={palette} />
+      </Container>
+    </Box>
+  );
+}

apps/portal/src/app/(public)/test-ui/components/TestUiPrimitives.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { Box, Flex, Heading, HStack, Text } from '@trycompai/ui-new';
+import type { ReactNode } from 'react';
+
+export function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Box mb={12}>
+      <Heading size="lg" mb={6} pb={2} borderBottom="1px solid" borderColor="border">
+        {title}
+      </Heading>
+      {children}
+    </Box>
+  );
+}
+
+export function SubSection({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Box mb={4}>
+      <Text fontWeight="semibold" mb={2}>
+        {title}
+      </Text>
+      {children}
+    </Box>
+  );
+}
+
+const DEFAULT_SHADES = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+] as const;
+
+export function ColorRow({
+  name,
+  description,
+  shades = DEFAULT_SHADES,
+  highlightShade = '700',
+}: {
+  name: string;
+  description?: string;
+  shades?: readonly string[];
+  highlightShade?: string;
+}) {
+  return (
+    <Box w="full">
+      <HStack>
+        <Text fontWeight="semibold" fontSize="sm">
+          {name}
+        </Text>
+        {description && (
+          <Text fontSize="xs" color="gray.600">
+            {description}
+          </Text>
+        )}
+      </HStack>
+      {/* Add top padding (lg+) so shade labels above swatches don't overlap the header */}
+      <Flex gap={1} mt={2} pt={{ base: 0, lg: 6 }}>
+        {shades.map((shade) => (
+          <Box
+            key={shade}
+            bg={`${name}.${shade}`}
+            h={16}
+            flex={1}
+            borderRadius="sm"
+            title={`${name}.${shade}`}
+            position="relative"
+            outline={shade === highlightShade ? '2px solid' : undefined}
+            outlineColor={shade === highlightShade ? 'fg' : undefined}
+            outlineOffset={shade === highlightShade ? '2px' : undefined}
+          >
+            <Text
+              position="absolute"
+              bottom="calc(100% + 2px)"
+              left="50%"
+              transform="translateX(-50%)"
+              fontSize="xs"
+              color="gray.500"
+              display={{ base: 'none', lg: 'block' }}
+            >
+              {shade}
+            </Text>
+          </Box>
+        ))}
+      </Flex>
+    </Box>
+  );
+}