UI Components

UI Components

Overview

React 19 + TypeScript frontend with Tailwind CSS 4, Framer Motion animations, and a dark detective-themed design system. All components in src/components/, pages in src/pages/.

Stack

Design System

Colors (CSS custom properties via @theme)

Defined in src/index.css:

Typography

Two font families:

--font-display: "Outfit", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;

Use .font-display for Outfit, font-mono (default body) for JetBrains Mono.

Component Inventory

Hooks

Pages

Common Patterns

Section header (most repeated pattern)

<div className="flex items-center gap-3 mb-5">
  <div className="h-px w-3 bg-accent/30" />
  <h3 className="text-[10px] font-bold text-text-secondary tracking-[0.2em] uppercase font-mono">
    {label}
  </h3>
  <span className="text-[10px] text-text-muted font-mono tabular-nums">{count}</span>
</div>

Input styling

<input
  className="w-full px-4 py-3 bg-bg-card/80 border rounded-lg text-text-primary text-sm
             placeholder:text-text-muted/60 focus:outline-none transition-all duration-300
             border-border hover:border-border-bright
             focus:border-accent/40 focus:shadow-[0_0_20px_rgba(0,255,136,0.06)]"
/>

Card styling

<div className="relative bg-bg-card/60 border border-border/60 rounded-lg p-3
                hover:border-border-bright hover:bg-bg-card-hover transition-all duration-200 group">

Label styling

<span className="text-[10px] text-text-secondary tracking-[0.2em] uppercase font-mono">

HUD corner brackets

<div className="absolute top-0 left-0 w-2.5 h-2.5 border-t border-l border-accent/15 rounded-tl-xl pointer-events-none" />
<div className="absolute bottom-0 right-0 w-2.5 h-2.5 border-b border-r border-accent/15 rounded-br-xl pointer-events-none" />

Also available as .hud-corners CSS class in index.css.

Glass surface

.glass { backdrop-filter: blur(12px); background: rgba(7,7,12,0.7); }
.glass-accent { backdrop-filter: blur(12px); background: rgba(0,255,136,0.08); }

Loading spinner

<div className="relative w-12 h-12">
  <div className="absolute inset-0 border-2 border-accent/20 rounded-full" />
  <div className="absolute inset-0 border-2 border-transparent border-t-accent rounded-full animate-spin" />
</div>
<span className="text-[10px] text-text-muted tracking-[0.3em] uppercase font-mono">Loading...</span>

Animated list items (Framer Motion)

<AnimatePresence mode="popLayout">
  {items.map((item) => (
    <motion.div
      key={item._id}
      initial={{ opacity: 0, x: -12 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.3 }}
    >
      {/* content */}
    </motion.div>
  ))}
</AnimatePresence>

Confidence color coding

// Used across FindingsGrid, DetectiveReport, Runs
// Takes prefix param ("text-" or "bg-") for flexibility
if (confidence >= 80) return `${prefix}accent`;     // green
if (confidence >= 60) return `${prefix}yellow-400`;  // or text-warning in DetectiveReport
if (confidence >= 40) return `${prefix}orange-400`;
return `${prefix}danger`;                            // red, < 40%

Category badge colors

const CATEGORY_STYLE: Record<string, { bg: string; text: string; border: string; dot: string }> = {
  social:     { bg: "bg-blue-500/8",    text: "text-blue-400",    border: "border-blue-500/20",    dot: "bg-blue-400" },
  connection: { bg: "bg-purple-500/8",  text: "text-purple-400",  border: "border-purple-500/20",  dot: "bg-purple-400" },
  location:   { bg: "bg-green-500/8",   text: "text-green-400",   border: "border-green-500/20",   dot: "bg-green-400" },
  activity:   { bg: "bg-yellow-500/8",  text: "text-yellow-400",  border: "border-yellow-500/20",  dot: "bg-yellow-400" },
  identity:   { bg: "bg-cyan-500/8",    text: "text-cyan-400",    border: "border-cyan-500/20",    dot: "bg-cyan-400" },
};

Tool icons in ActivityStream

Single-letter abbreviations with tool-specific colors (includes bg and border fields):

BrowserView States

CSS Animations (in src/index.css)

Atmospheric Effects

• Film grain: body::before with SVG noise at 2.5% opacity
• Grid background: .grid-bg class or inline styles with green-tinted grid lines (40-60px)
• Radial glow: Accent-colored radial gradient on hero sections

Convex Integration

Frontend uses Convex React hooks:

// Queries (real-time subscriptions)
const investigation = useQuery(api.investigations.get, { id });
const steps = useQuery(api.investigations.getSteps, { investigationId });
const findings = useQuery(api.investigations.getFindings, { investigationId });
const edges = useQuery(api.graphEdges.getEdges, { investigationId });
const allInvestigations = useQuery(api.investigations.list);
const report = useQuery(api.reports.getReport, { investigationId });

// Mutations
const createInvestigation = useMutation(api.investigations.create);

// Actions
const startInvestigation = useAction(api.orchestrator.startInvestigation);

useQuery returns reactive data — components re-render automatically when Convex data changes.

Gotchas

• Tailwind v4: Uses @theme directive in CSS instead of tailwind.config.js. Plugin is @tailwindcss/vite, not PostCSS.
• No App.css: Removed default Vite styles. All styling via Tailwind utilities in index.css.
• Convex provider: Must wrap app in <ConvexProvider client={convex}> in App.tsx
• Route params: useParams<{ id: string }>() returns string, cast to Id<"investigations"> for Convex