roof
f4b8d5c4f7
Unit Tests / test (push) Successful in 12m16s
Security — WireGuard: - Replace linuxserver/wireguard (privileged + SYS_MODULE + /lib/modules) with a bespoke alpine image (wireguard/Dockerfile + entrypoint.sh): CAP_NET_ADMIN only, 119 MB → 14.7 MB. Modern kernels (≥5.6) have WireGuard built in; no module loading required. Kernel-fallback comment left in compose for rare old kernels. Security — supply-chain digest pins: - CoreDNS image pinned by SHA-256 digest in docker-compose.yml. - api/Dockerfile: python:3.11-slim and docker:27-cli pinned by digest. - webui/Dockerfile: node:20-alpine and nginxinc/nginx-unprivileged:alpine pinned. - ntp/Dockerfile: alpine:3.20 pinned by digest. - wireguard/Dockerfile: alpine:3.20 pinned by digest. Security — webui non-root: - Switch from nginx:alpine (root, port 80) to nginxinc/nginx-unprivileged:alpine (port 8080, runs as nginx uid 101). Compose port mapping and all Caddy upstream references updated: cell-webui:80 → cell-webui:8080 everywhere. API layer reduction (561 MB → 245 MB): - Multi-stage api/Dockerfile: docker CLI copied from docker:27-cli stage instead of being installed via apt from Docker's external repo (removes GPG key fetch, lsb-release, gnupg, two apt-get update rounds). --no-install-recommends on remaining apt install. mkdir folded into the same RUN layer. Bug fix — WireGuard config path mismatch: - setup_cell.py wrote wg0.conf to config/wireguard/wg0.conf but wireguard_manager and the new entrypoint expect config/wireguard/wg_confs/wg0.conf (the standard wg-quick sub-directory). Fixed by creating the wg_confs/ sub-dir and writing there; REQUIRED_DIRS updated to pre-create it. Bug fix — empty chrony.conf: - config/ntp/chrony.conf was 0 bytes (pre-existing gap); added a real config (pool.ntp.org + Cloudflare, allow 172.20/10.0, local stratum 10, driftfile, makestep, rtcsync). NTP compose service now builds from ./ntp instead of pulling alpine:latest and running apk at every container start. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Personal Internet Cell - Web UI
A modern React-based web interface for managing your Personal Internet Cell.
Features
- Dashboard: Overview of cell status and services
- Peer Management: Add, remove, and configure WireGuard peers
- Network Services: DNS, DHCP, and NTP management
- WireGuard: VPN configuration and status
- Email Services: Postfix and Dovecot management
- Calendar Services: Radicale CalDAV/CardDAV management
- File Storage: WebDAV file storage management
- Routing: Advanced VPN gateway and routing configuration
- Logs: System logs and monitoring
- Settings: Cell configuration and security settings
Tech Stack
- React 19: Modern React with hooks
- Vite: Fast build tool and dev server
- Tailwind CSS: Utility-first CSS framework
- Lucide React: Beautiful icons
- React Router: Client-side routing
- Axios: HTTP client for API communication
Development
Prerequisites
- Node.js 18+ and npm
- Personal Internet Cell backend running on port 3000
Setup
-
Install dependencies:
bun install -
Start the development server:
npm run dev -
Open your browser to
http://localhost:5173
Development Features
- Hot Reload: Changes reflect immediately
- API Proxy: Requests to
/api/*are proxied tohttp://localhost:3000 - TypeScript Support: Full TypeScript support available
- ESLint: Code linting and formatting
Building for Production
Build
npm run build
This creates a dist/ directory with optimized production files.
Preview
npm run preview
This serves the built files locally for testing.
API Integration
The Web UI communicates with the Personal Internet Cell backend API:
- Base URL:
http://localhost:3000(development) - Health Check:
/health - API Endpoints:
/api/*
Environment Variables
Create a .env file to customize the API URL:
VITE_API_URL=http://localhost:3000
Project Structure
src/
├── components/ # Reusable UI components
│ └── Sidebar.jsx # Navigation sidebar
├── pages/ # Page components
│ ├── Dashboard.jsx # Main dashboard
│ ├── Peers.jsx # Peer management
│ ├── NetworkServices.jsx
│ ├── WireGuard.jsx # VPN configuration
│ ├── Email.jsx # Email services
│ ├── Calendar.jsx # Calendar services
│ ├── Files.jsx # File storage
│ ├── Routing.jsx # Routing configuration
│ ├── Logs.jsx # System logs
│ └── Settings.jsx # Cell settings
├── services/ # API services
│ └── api.js # API client and endpoints
├── App.jsx # Main app component
├── main.jsx # App entry point
└── index.css # Global styles
Styling
The Web UI uses Tailwind CSS with custom components:
- Cards:
.cardfor content containers - Buttons:
.btn,.btn-primary,.btn-secondary, etc. - Inputs:
.inputfor form fields - Status Indicators:
.status-indicator,.status-online, etc.
Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
Contributing
- Follow the existing code style
- Use TypeScript for new components
- Add tests for new features
- Update documentation as needed
License
Part of the Personal Internet Cell project.