Open Scouts

The Firecrawl design system uses a modular component architecture organized within the components-new/ directory. It integrates Tailwind CSS for utility-first styling, shadcn/ui (built on Radix UI) for core components, and custom libraries for animations and data visualization.

Directory Structure

• components-new/ui/: Core UI primitives including shadcn/, magic/ (animated components), tremor/ (data visualization), and motion/ (animation utilities).
• components-new/shared/: Reusable application components like icons/, buttons/, cards/, effects/, and layout/ utilities.
• components-new/app/: Components specific to application routes, such as brand/, pricing/, and (home)/.
• components-new/providers/: Context providers and theme management logic.

components-new/
├── ui/                    # Core UI components
│   ├── shadcn/           # shadcn/ui components
│   ├── magic/            # Magic UI animated components
│   ├── tremor/           # Tremor data visualization components
│   └── motion/           # Motion and animation utilities
├── shared/               # Shared application components
│   ├── icons/            # Icon components and brand assets
│   ├── buttons/          # Custom button components
│   ├── cards/            # Card components
│   ├── effects/          # Visual effects and animations
│   ├── layout/           # Layout utilities
│   └── ui/               # Shared UI utilities
├── app/                  # Application-specific components
│   ├── brand/            # Brand-related components
│   ├── pricing/          # Pricing page components
│   └── (home)/           # Home page components
└── providers/            # Context providers and theme management

🚨 Critical: Custom Sizing System

Unlike standard Tailwind which uses rem units, the Firecrawl design system uses a custom sizing system where numeric values equal literal pixels.

Key Differences

Usage Guidelines

✅ Use for Spacing (padding, margin, gap):

<div className="p-24 gap-16 mb-8"> {/* 24px padding, 16px gap, 8px margin-bottom */} ```

✅ **Use for Border Radius** (pixel-based):
```tsx
<div className="rounded-8"> {/* 8px border radius */} ```

✅ **Use for Border Width** (explicit pixels):
```tsx
<div className="border-1"> {/* 1px border */} ```

❌ **AVOID for Component Heights/Widths** (unless using large pixel values):
```tsx
{/* WRONG - Button will be 9px tall! */}
<Button className="h-9" />

{/* WRONG - Icon will be 4px × 4px! */}
<Icon className="size-4" />

Working with Components

If a component (like an Icon or Button) appears too small because it's using h-* or size-* utilities, use explicit pixel values or the style prop:

{/* Instead of size-4 (4px), use explicit values */}
<Icon className="w-16 h-16" />  {/* 16px × 16px icon */}

{/* Or use style prop for non-spacing dimensions */}
<Icon style={{ width: '1rem', height: '1rem' }} />  {/* 16px × 16px */}

const sizes = Array.from({ length: 1000 }, (_, i) => i).reduce(
  (acc, curr) => {
    acc[curr] = `${curr}px`;  // 3 = "3px", 8 = "8px", 100 = "100px"
    return acc;
  },
  { /* fractional percentages */ }
);

Open Scouts is built on a modern stack designed for scalability and real-time updates:

• Frontend: Next.js with Supabase Realtime.
• Database: PostgreSQL (Supabase) utilizing pg_cron for scheduling and pgvector for semantic search.
• Authentication: Supabase Auth (Email/Password + Google OAuth).
• AI Agent: OpenAI GPT-4 with function calling (search & scrape tools).
• Edge Function: Deno-based serverless functions that orchestrate agent execution.
• Web Scraping: Firecrawl API for search and content extraction.

Scalable Dispatcher Pattern

To handle thousands of scouts, the system uses a dispatcher pattern:

1. pg_cron triggers dispatch_due_scouts() every minute.
2. The function identifies due scouts and uses pg_net to fire individual HTTP POST requests.
3. Each request triggers an isolated Edge Function invocation (256MB memory, 400s timeout) for a specific scout.
4. A separate cron job cleans up stuck executions every 5 minutes.

The UI layer is organized into three distinct tiers based on the component's purpose and complexity:

1. UI Components (components-new/ui/): Low-level, accessible building blocks.

   • shadcn/ui: Standard form controls, layouts, navigation, feedback, and data components.
   • Magic UI: Animated and interactive components like animated-shiny-text, dot-pattern, and ripple.
   • Tremor: Data visualization components including various charts (LineChart, BarChart, etc.) and dashboard controls.

2. Shared Components (components-new/shared/): Reusable brand and utility elements used across the application.

   • Icons: Organized exports for brand symbols and utility icons (e.g., GitHub, Check).
   • Buttons: Custom brand-styled buttons like SlateButton, HeatButton, and FireActionLink.
   • Layout & Effects: Specialized components for animations (flame/, animated-beam) and layout (curvy-rect, unified-blur-overlay).

3. Application Components (components-new/app/): High-level, page-specific components, such as those in app/brand/ used for brand presentation (e.g., BrandHero).

The color system is defined in colors.json and styles/colors.json and is designed for consistent light and dark mode theming. Colors are mapped to CSS custom properties and can be used via Tailwind CSS classes.

Color Categories

Heat Colors (Brand)

Primary brand color (#fa5d19) with opacity variants:

• heat-4 to heat-100 (4% to 100% opacity).

Accent Colors (Semantic)

• accent-black: Dark neutral (#262626)
• accent-white: Pure white (#ffffff)
• accent-amethyst: Purple (#9061ff)
• accent-bluetron: Blue (#2a6dfb)
• accent-crimson: Red (#eb3424)
• accent-forest: Green (#42c366)
• accent-honey: Yellow (#ecb730)

Alpha Variants (Layering)

• black-alpha-1 to black-alpha-88: Black overlays (1% to 88% opacity).
• white-alpha-56 and white-alpha-72: White overlays (56% and 72% opacity).

UI Colors (Interface)

• Borders: border-faint, border-muted, border-loud.
• Illustrations: illustrations-faint, illustrations-muted, illustrations-default.
• Backgrounds: background-lighter, background-base.