Component Reference

All 18 React components in the frontend, organized by function.

Visualization6 components

GalaxyCanvasDualHeartbeatCHIGaugeSubIndexBarsTrustCompassTimeLapse

Panels & Navigation5 components

SystemPanelSearchPaletteTrustFilterBarWatchlistPanelPanel

Alerts & Transactions3 components

AlertBellAlertFeedTransactionHistory

Wallet & Onboarding3 components

WalletModalDisconnectWalletModalGuidedTour

Total Components

Canvas-based

Galaxy + EKG

SVG-based

Gauge + Compass + Cards

~17K

Largest

GalaxyCanvas lines

All components are located in fe_frontierpulse/app/components/. Most are client components using Canvas API, SVG, or Framer Motion.

Visualization

GalaxyCanvas

GalaxyCanvas.tsx~17,800 lines

The main galaxy map rendering all 24,502 star systems as interactive Canvas nodes.

Uses requestAnimationFrame for 60fps rendering. Each system node is colored by trust level (green/orange/red), sized by depth, and glows on hover. Selected systems show a dashed pulsing ring and cyan gate connection lines to destinations. Supports click-to-select, hover preview, and trust filter integration.

Visual	Data
Brightness	Player activity level
Color	Trust: green (≥70), orange (40-70), red (<40)
Size	Depth from 3D coordinate normalization (1.5-3px)
Gate lines	Cyan flowing dashes to Smart Gate destinations

DualHeartbeat

DualHeartbeat.tsx~5,100 lines

Dual EKG-style heartbeat monitor showing Activity (white) and Trust (green) pulses.

Maintains a 300-point rolling buffer updated at ~30fps. Rendered with quadratic Bezier curves (ctx.quadraticCurveTo). Features a horizontal scanline sweep effect and sinusoidal beat spike generation. The relationship between the two lines reveals civilization health patterns.

CHIGauge

CHIGauge.tsx~1,800 lines

SVG circular arc gauge displaying the global Civilization Health Index (0-100).

Animated arc that fills based on CHI score. Color changes by threshold: green (≥70), blue (≥50), orange (≥30), red (<30). Shows the overall score number in the center with diagnosis text below.

SubIndexBars

SubIndexBars.tsx~1,500 lines

Six horizontal progress bars for CHI sub-indices.

Displays Economic Vitality, Security Index, Growth Rate, Connectivity, Trust Index, and Social Cohesion as labeled progress bars with percentage labels.

TrustCompass

TrustCompass.tsx~6,900 lines

5-axis SVG radar chart (pentagon) for player reputation profiles.

Axes: Reliability, Commerce, Stewardship, Diplomacy, Volatility (inverted: 100 - value). Pentagon guide lines at 25/50/75/100 levels. Filled polygon with trust-based color. Shows 5 dimension progress bars below and the player archetype label.

TimeLapse

TimeLapse.tsx~6,800 lines

Historical time-lapse replay controller with playback controls.

Range selector (24h, 7d, 30d), play/pause, speed toggle (1x/2x/4x), interactive progress scrubber. Generates synthetic historical snapshots using sinusoidal time-varying offsets to base vitals.

Panels & Navigation

SystemPanel

SystemPanel.tsx~12,700 lines

Deep-dive panel for a selected star system.

Shows system vitals (Activity, Trust, Local CHI as colored bars), stats (player count, infrastructure, TX frequency, combat), real gate connections from World API, up to 8 constellation neighbors (clickable), and known pilots with trust scores. Includes a link to generate the shareable Pulse Card.

SearchPalette

SearchPalette.tsx~9,000 lines

Ctrl+K command palette for instant system search across all 24,502 systems.

Fuzzy search by system name or ID. Results show system name, constellation, and trust status. Clicking a result selects it on the galaxy map.

TrustFilterBar

TrustFilterBar.tsx~2,700 lines

Filter pills to highlight systems by trust level.

Three toggleable pills: Healthy (green, trust ≥70), Stressed (orange, 40-70), Hostile (red, <40). Can also show 'All' for no filter.

WatchlistPanel

WatchlistPanel.tsx~10,900 lines

Personal tracking panel for bookmarked systems and players.

Add/remove systems and players. Persistent via Zustand store with localStorage. Quick-access links to jump to watched items on the map.

Panel

Panel.tsx~500 lines

Reusable glassmorphism panel wrapper with consistent styling.

Alerts & Transactions

AlertBell

AlertBell.tsx~4,200 lines

Notification bell icon with badge count and dropdown panel.

Shows unread alert count. Dropdown lists alerts sorted by severity (critical → info) with color-coded severity badges. Each alert links to the affected system.

AlertFeed

AlertFeed.tsx~1,700 lines

Full alert feed list component used in the dropdown.

Renders alert type, severity badge, system name, description, and relative timestamp for each anomaly alert.

TransactionHistory

TransactionHistory.tsx~6,800 lines

Dashboard widget showing recent oracle transactions.

Auto-refreshes every 5 seconds. Shows function name (color-coded by type), digest linked to Suiscan, age, sender, Move call count, and gas consumed.

Wallet & Onboarding

WalletModal

WalletModal.tsx~11,400 lines

Sui wallet connection modal powered by @mysten/dapp-kit.

Detects available Sui wallets (Sui Wallet, Suiet, Ethos, etc.). Shows wallet icons, handles connection flow, and stores the connected address in Zustand.

DisconnectWalletModal

DisconnectWalletModal.tsx~4,400 lines

Confirmation dialog before disconnecting wallet session.

Shows connected address and asks for confirmation. Clears wallet state from the store on disconnect.

GuidedTour

GuidedTour.tsx~11,100 lines

Interactive step-by-step onboarding walkthrough.

Highlights key UI elements one by one (galaxy map, heartbeat, CHI gauge, trust compass, search palette, etc.). Shows contextual tooltips explaining what each feature does. Can be dismissed or replayed.

State Management

All client-side state is managed by a single Zustand 5 store with localStorage persistence for watchlist and wallet data.

lib/store.ts

interface UIStore {
  // UI state
  selectedSystemId: number | null;
  selectedPlayerAddress: string | null;
  activeView: "overview" | "systems" | "players" | "alerts";

  // Watchlist (persisted to localStorage)
  walletAddress: string | null;
  watchedSystemIds: number[];
  personalSystemIds: number[];  // auto-detected from wallet activity

  // Actions
  setSelectedSystem: (id: number | null) => void;
  setSelectedPlayer: (address: string | null) => void;
  toggleWatchSystem: (id: number) => void;
  clearWatchlist: () => void;
}