WPF UI

🎨 WPF UI

Dark Theme

GitHub-inspired dark theme (Styles.xaml):

Token	Color	Usage
BgDark	#0D1117	Main background
BgMedium	#161B22	Cards, panels
BgLight	#21262D	Hover, elevated
AccentBlue	#58A6FF	Primary accent
AccentGreen	#3FB950	Success, Start button
AccentRed	#F85149	Error, Stop button
AccentCyan	#56D4DD	Secondary accent
TextPrimary	#E6EDF3	Main text
TextSecondary	#8B949E	Labels

Layout: Nested Tabs

MainWindow
├── Title Bar (gradient)
├── TabControl (Left, groups)
│   ├── 🌐 WEB → TabControl (Top, tools)
│   │   ├── Load Test → LoadTestPanel
│   │   ├── HTTP Headers → HttpHeadersPanel
│   │   ├── SSL Checker → SSLPanel
│   │   └── WebSocket → WebSocketPanel
│   ├── 🔧 NETWORK → TabControl (Top)
│   │   ├── Ping → PingPanel
│   │   └── Traceroute → TraceroutePanel
│   └── 🔍 DISCOVERY → TabControl (Top)
│       ├── DNS → DnsPanel
│       ├── Port Scanner → PortScanPanel
│       ├── IP Scanner → IPScanPanel
│       ├── GeoIP → GeoIPPanel
│       └── Whois → WhoisPanel
└── Status Bar (accent dot + status text)

MVVM Pattern

• ViewModelBase — INotifyPropertyChanged + SetProperty
• ToolViewModelBase — Engine process management, log, status
• RelayCommand — ICommand with Execute/CanExecute

Module Structure

Mỗi tool module gồm 4 files:

Modules/ToolName/
├── ToolNameTool.cs       ← ITool: metadata + factory
├── ToolNameViewModel.cs  ← Logic, parse engine output
├── ToolNamePanel.xaml     ← UI layout
└── ToolNamePanel.xaml.cs  ← code-behind (minimal)

Panel Layout Convention

┌──────────────────────────────────────┐
│  LEFT (340px)    │ 12px │  RIGHT (*) │
│                  │ gap  │            │
│  CardBorder:     │      │  CardBorder│
│  ├── Config      │      │  ├── Title │
│  ├── Buttons     │      │  └── Data  │
│  └── Stats       │      │    (Grid/  │
│                  │      │     Chart) │
│  CardBorder:     │      │            │
│  └── Log         │      │            │
└──────────────────────────────────────┘