macOS Desktop Prototype
Dual-mode utility · Menu-bar popover + 920×620 main window · Complete keyboard shortcuts
✓ VERIFIED PROTOTYPE
Presented & Verified by ABIN S CHANDRAN
Reviewer Demo Instructions
1
Menu-Bar Tray Popover (Screen 16):
Click the shield icon in the top right system menu-bar or use the left navigator. Test the 320px quick-connect popover, mode toggles, and instant server quick-switcher.
Click the shield icon in the top right system menu-bar or use the left navigator. Test the 320px quick-connect popover, mode toggles, and instant server quick-switcher.
2
Native Keyboard Shortcuts:
Press ⌘K to toggle connection state, ⌘F to focus server search instantly, ⌘R to re-ping all servers, and ⌘, to open Preferences.
Press ⌘K to toggle connection state, ⌘F to focus server search instantly, ⌘R to re-ping all servers, and ⌘, to open Preferences.
3
Main Window & Sortable Data Table (Screen 17):
Explore the 920×620 desktop window. Click column headers (Location, City, Protocol, Ping) to sort ascending/descending. Filter by All, Streaming, and P2P.
Explore the 920×620 desktop window. Click column headers (Location, City, Protocol, Ping) to sort ascending/descending. Filter by All, Streaming, and P2P.
4
Preferences Modal (Screen 18):
Open Preferences via ⌘, or the gear icon. Explore General (Launch at Login), Protocol options (WireGuard, AnyConnect, OpenVPN, V2Ray), and Kill Switch protection.
Open Preferences via ⌘, or the gear icon. Explore General (Launch at Login), Protocol options (WireGuard, AnyConnect, OpenVPN, V2Ray), and Kill Switch protection.
5
Window Resizing & Scale Engine:
Use the Window Scale controls (Auto Fit, 100%, 85%, 75%) to observe responsive scaling without dock clipping on smaller screens.
Use the Window Scale controls (Auto Fit, 100%, 85%, 75%) to observe responsive scaling without dock clipping on smaller screens.
Known Simulation Scope:
This is a browser-based high-fidelity design prototype. macOS NetworkExtension Packet Tunnel Provider, system menu-bar NSStatusItem hooks, and privileged helper daemon IPC are simulated in browser JavaScript.
Prototype Validation Checklist
- Passed Screen 16: Menu-bar utility popover (320px compact layout with live ping)
- Passed Screen 17: Main 920×620 desktop window with 3-column split view
- Passed Screen 18: Tabbed Preferences window with General, Protocols, and Kill Switch
- Passed Desktop Keyboard Shortcuts (⌘K Connect, ⌘F Search, ⌘R Re-ping, ⌘, Settings)
- Passed Sortable multi-column server table with latency indicators
- Passed Real-time simulated ping latency engine with jitter
- Passed macOS traffic lights window controls (close, minimize, zoom)
- Passed Interactive macOS Dock with running app indicators and bouncy zoom
- Passed Responsive Auto-Fit Window Scaler preventing clipping on compact displays
- Simulated macOS PacketTunnelProvider extension & privileged root helper daemon
File:
Open Raw Prototype ↗
macos.html (161 KB)