Frontend

Overview

The desktop application is the primary operator interface for ExfilGuardian. It connects to the Rust server's REST API and displays real-time alerts, metrics, and capture status. The app runs as a native desktop application via Electron, with the UI built in Next.js 16 (App Router).

Stack

Technology	Version	Purpose
Next.js	16.1	React framework (App Router + Turbopack)
React	19.2	UI library
Electron	40	Desktop wrapper
coss ui	latest	Component library (Base UI + Tailwind v4)
Zustand	5	Client state management
TanStack Query	5	Server state management
Recharts	3	Data visualization
Biome	2.3	Linter + formatter
Bun	1.3+	Runtime + package manager

Pages

The app has 6 pages accessible via the sidebar:

Route	Page	Description
`/`	Home	Redirects to `/dashboard`
`/dashboard`	Dashboard	4 KPI cards, traffic chart, threat distribution, layer status, quick actions
`/threats`	Threats	Filterable threat list by severity, split-panel detail view
`/threats/[id]`	Threat Detail	Full-page view of a single threat with all metadata
`/capture`	Capture	Interface selector, capture controls, packet stats, protocol distribution
`/analysis`	Analysis	24h correlation graph, detection layers overview, signatures list, behavioral stats
`/settings`	Settings	General, capture, detection, and storage configuration panels

Current State

The frontend is connected to the real backend — there is no mock mode. Every page reads live data from the Rust REST API via TanStack Query; when the server is unreachable it degrades to empty lists plus an "offline" banner driven by /api/status.

What works now:

Live dashboard, threats, flows, processes, files, DNS, analysis, rules, reports, settings, and the admin area (agents, users, enrollment, organization, fleet map)
Real-time charts and metrics polled from GET /api/v1/metrics
Full user management: Better Auth (admin + organization/teams) on PostgreSQL/Drizzle, roles, email invitations (Resend), guards enforced
AI report analysis (Claude) that ranks alerts and flags likely false positives
Runs both as a native Electron app and as a standalone Next.js server (production)
Settings persistence (in-memory, not synced to backend)
Dark mode support via Tailwind

What needs wiring:

Electron IPC handlers → Rust REST API (/api/v1/alerts, /api/v1/metrics)
Real threat data from the correlation engine
Real capture stats from the agent
Settings sync with config.yaml

Development

Start Desktop App

cd desktop
bun install
bun run dev:electron

This runs two processes concurrently:

next dev --turbopack on localhost:3000
electron . loading the Next.js dev server

Start Web Only

cd desktop
bun run dev

Commands

Command	Description
`bun run dev`	Next.js dev server only
`bun run dev:electron`	Next.js + Electron
`bun run build`	Build Next.js + compile Electron TS
`bun run pack`	Build + package (unpacked)
`bun run dist`	Build + package (distributable)
`bun run check`	Biome lint check
`bun run check:fix`	Biome auto-fix
`bun run format`	Biome format
`bun run typecheck`	TypeScript type check

Sub-pages

Next.js: App Router patterns, routing, server/client components
Components: coss ui library and component patterns
State Management: Zustand stores, TanStack Query, data flow
Electron: Main process, IPC handlers, security model

Frontend

On this page