```
### Label styling
```tsx
```
### HUD corner brackets
```tsx
```
Also available as `.hud-corners` CSS class in `index.css`.
### Glass surface
```css
.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
```tsx
Loading...
```
### Animated list items (Framer Motion)
```tsx
{items.map((item) => (
{/* content */}
))}
```
### Confidence color coding
```typescript
// 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
```typescript
const CATEGORY_STYLE: Record = {
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):
| Tool | Letter | Color |
|------|--------|-------|
| reasoning | R | `text-purple-400` |
| maigret | M | `text-blue-400` |
| browser_action | B | `text-cyan-400` |
| web_search | W | `text-orange-400` |
| save_finding | S | `text-yellow-400` |
| geo_locate | G | `text-green-400` |
| whitepages | P | `text-red-400` |
| reverse_image | I | `text-pink-400` |
| darkweb | D | `text-red-500` |
### BrowserView States
| State | Condition | Display |
|-------|-----------|---------|
| Planning | `status === "planning"`, no URL | Globe icon + "Waiting for investigation to initialize..." |
| Connecting | `status === "investigating"`, no URL | Status dot + "Connecting to browser" |
| Active | `liveUrl` present | Floating "Live" pill (top-right) + URL label (bottom-left) + full-height iframe |
## CSS Animations (in `src/index.css`)
| Name | Effect |
|------|--------|
| `pulse` | Opacity 1->0.5->1 |
| `horizontalScan` | Left-to-right sweep with fade |
| `float` | Subtle vertical float |
| `cursorBlink` | Typing cursor blink (step function) |
| `gridFadeIn` | Fade opacity 0->0.04 |
| `dataStream` | Vertical translateY scroll |
| `radarSweep` | 360 degree rotation |
| `vignetteBreath` | Pulsing vignette box-shadow (4s) |
| `toastGlow` | Toast entrance flash with box-shadow (0.6s) |
| `drawCheck` | SVG stroke-dashoffset to 0 |
| `progressShimmer` | Background-position shimmer |
| `typewriterCursor` | Border-right color blink |
| `stampSlam` | Scale 3->0.9->1.05->1 with rotation (0.6s) |
| `dossierScan` | Top-to-bottom scan line (3s/8s) |
| `ringDraw` | SVG stroke-dashoffset ring draw |
| `redactFlicker` | Opacity flicker 0.06->0.12 |
## 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:
```tsx
// 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 `` in `App.tsx`
- **Route params**: `useParams<{ id: string }>()` returns string, cast to `Id<"investigations">` for Convex