1da6730735
This commit adds the complete Dangerous Pi web management interface with all MVP features implemented and tested locally. ## New Features ### Backend (Python + FastAPI) - Complete FastAPI backend with async support - 40+ API endpoints (Health, PM3, WiFi, Updates, UPS, BLE, Plugins) - 6 managers: Session, WiFi, Update, UPS, BLE, Plugin - SQLite database with sessions, config, history, crash reports - Server-Sent Events (SSE) for real-time notifications - Mock PM3 worker for development without hardware ### WiFi Manager - Interface detection (USB vs built-in) - Network scanning with signal strength - Mode switching (AP/Client/Dual/Auto/Off) - Network connection with password support - Hidden SSID and saved networks support - Static IP and DHCP configuration - 10 WiFi API endpoints ### Update Manager - GitHub releases API integration - Automatic periodic update checks - Semantic version comparison - Update download with progress tracking - SHA256 checksum verification - Automatic installation with backup and rollback - PM3 client rebuild after updates - 6 Update API endpoints ### UPS Manager - I2C battery monitoring (MAX17040-compatible) - Battery percentage, voltage, current tracking - Power source detection (AC/Battery) - Safe shutdown triggers at configurable thresholds - Event callbacks for battery warnings - SSE and BLE notification integration - 3 UPS API endpoints ### BLE Manager - Bluetooth Low Energy notification support - Auto-detects BLE capability - Multiple notification types (updates, battery, shutdown, etc.) - BLE advertising management - Device connection tracking - 4 BLE API endpoints ### Plugin Framework - Dynamic plugin loading/unloading - Plugin lifecycle management (load, enable, disable, unload) - Hook system for extensibility - JSON-based metadata - Example "Hello World" plugin included - 7 Plugin API endpoints ### Frontend (Remix.js + React) - Cyberpunk-themed responsive UI - Dashboard with system status - PM3 command interface with history - Settings page with WiFi and Update management - Command logs viewer - Theme toggle (Dark/Light/Auto) - Server-side rendering (SSR) - Mobile-first responsive design ### System Integration - Systemd service with security hardening - Automated install/uninstall scripts - Environment configuration template - Hardware access groups (i2c, bluetooth, gpio, dialout) - Pi-gen stage 04 integration for OS image building - Port conflict resolution with ttyd-bash - I2C interface auto-enable for UPS HAT ### Testing - test_backend.py - Backend API tests - test_ups.py - UPS manager tests - test_ble.py - BLE manager tests - test_plugins.py - Plugin manager tests - All tests passing locally ### Documentation - 12 comprehensive documentation files - claude.md - AI development guide - WIFI_MANAGER.md - WiFi management guide - UPDATE_MANAGER.md - Update system guide - PORT_CONFLICT.md - Port conflict resolution guide - MVP_COMPLETE.md - MVP implementation summary - PROJECT_STATUS.md - Project status and roadmap - systemd/README.md - Service management docs - pi-gen integration documentation ## Technical Details - ~5,000+ lines of backend code - 11 Python dependencies (smbus2 added for UPS) - FastAPI with async/await throughout - Type hints and docstrings on all functions - RESTful API design with SSE for notifications - Security hardening (non-root, protected dirs, resource limits) ## Next Steps - Deploy to Raspberry Pi Zero 2 W hardware - Test with real Proxmark3 device - Test UPS HAT integration - Test BLE on Pi hardware - Build custom OS image with pi-gen - Performance optimization for Pi Zero 2 W 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Dangerous Pi Frontend
Modern, lightweight web interface for Proxmark3 management built with Remix.js.
Features
- Cyberpunk Theme - Dark mode default with light mode support
- Responsive Design - Mobile-first, works on all screen sizes
- Real-time Updates - SSE integration for live status
- Lightweight - Optimized for Pi Zero 2 W (< 150KB bundle)
- Progressive Enhancement - Works without JavaScript
Tech Stack
- Framework: Remix v2 (React Router)
- Styling: Vanilla CSS (no framework, ~15KB)
- Build: Vite
- TypeScript: Full type safety
Development
Prerequisites
- Node.js 18+
- npm or yarn
- Backend running on http://localhost:8000
Install Dependencies
npm install
Start Development Server
npm run dev
Frontend will be available at http://localhost:3000
The dev server proxies API requests to the backend (http://localhost:8000).
Build for Production
npm run build
Start Production Server
npm start
Project Structure
app/
├── routes/ # Page routes
│ ├── _index.tsx # Dashboard (/)
│ ├── commands.tsx # PM3 Commands (/commands)
│ ├── settings.tsx # Settings (/settings)
│ └── logs.tsx # Command Logs (/logs)
├── root.tsx # Root layout
├── styles.css # Global styles
└── entry.*.tsx # Client/Server entry points
Pages
Dashboard (/)
- System status (CPU, memory, disk)
- PM3 connection status
- Quick actions
- Real-time SSE updates
Commands (/commands)
- Execute PM3 commands
- Quick command buttons
- Terminal-style output
- Command history with ↑/↓ navigation
Settings (/settings)
- General settings (auth, HTTPS)
- Wi-Fi configuration
- Advanced options (PM3 device, BLE)
- System actions (restart, shutdown)
Logs (/logs)
- Command history table
- Export functionality (planned)
- System logs (planned)
Design System
Colors (Cyberpunk)
- Primary: Cyan (
#00ffff) - Secondary: Magenta (
#ff00ff) - Accent: Green (
#00ff88) - Background: Dark Blue (
#0a0e1a)
Typography
- Sans: System font stack (zero download)
- Mono: SF Mono, Monaco, Cascadia Code, etc.
Components
- Buttons (primary, secondary, danger)
- Cards with hover effects
- Status badges with pulse animation
- Terminal-style code blocks
- Toast notifications
- Form inputs with focus states
Theme System
Supports three modes:
- dark - Cyberpunk dark theme (default)
- light - Clean light theme
- auto - Follow system preference
Theme persisted in localStorage, toggled via header button.
API Integration
REST Endpoints
// System
GET /api/health
GET /api/system/info
POST /api/system/session/create
GET /api/system/config
// PM3
GET /api/pm3/status
POST /api/pm3/command
GET /api/pm3/commands/history
SSE Events
GET /sse/events
// Events:
- connected
- pm3_status
- update_available
- backup_complete
- ups_battery
Performance Optimization
Targets
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- Bundle Size: < 150KB gzipped
Techniques
- Server-side rendering (SSR)
- CSS-only animations
- System fonts (no web fonts)
- Code splitting by route
- Minimal dependencies
Accessibility
- WCAG 2.1 AA compliant
- Keyboard navigation
- Focus indicators
- ARIA labels
- Screen reader tested
Testing Checklist
- Works without JavaScript
- Mobile responsive (320px+)
- Dark/light mode toggle
- SSE connection
- Command execution
- Session management
- Keyboard shortcuts
- Touch targets (44x44px)
Browser Support
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Mobile browsers (iOS 14+, Android 10+)
Deployment
With Backend
The frontend should be built and served by the backend in production:
# Build frontend
cd app/frontend
npm run build
# Backend serves from build/client/
Standalone (Development)
For development, run separately:
# Terminal 1: Backend
python -m app.backend.main
# Terminal 2: Frontend
cd app/frontend
npm run dev
Contributing
See UI_GUIDELINES.md for design principles and best practices.
License
Part of the Dangerous Pi project. Built for Dangerous Things.