Files
pic/webui
roof 89aed4efe0
Unit Tests / test (push) Successful in 12m6s
feat: connectivity redesign phase 2 — instance-aware routing + reference connections by id
apply_routes now iterates over connection instances rather than types:
each instance gets its own fwmark, routing table, interface, and
redirect_port via _routing_connections / _resolve_peer_connection /
_apply_connection_for_src; kill-switch is enforced per iface-instance.
Old per-type MARKS/TABLES constants are kept only as migration scaffolding.

peer_registry: exit_via is now stored as a connection id (or 'default');
_migrate_exit_via_to_connection_id runs on _load_peers to upgrade legacy
type-string values; set_peer_exit_via validates against known connection
ids; VALID_EXIT_VIA removed; config_manager wired in from managers.py.

egress_manager: egress_overrides keyed by service_id → connection_id;
local MARKS/TABLES/EXIT_TYPES/_REDIRECT_PORTS/_add_tor_redirect removed;
(mark, table, redirect_port) resolved at apply-time via
connectivity_manager.get_connection; manifest egress.allowed still
enforced by connection type.

api/app.py + api.js: PUT peer/service exit endpoints accept {connection_id};
back-compat shim resolves a legacy type string to its single active instance.

Tests extended: two same-type instances produce distinct marks/tables/ports;
peer exit_via and egress override id migrations round-trip correctly;
single-instance behaviour is equivalent to the old type-keyed path.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-10 17:35:28 -04:00
..
2025-09-12 23:04:52 +03:00
2025-09-12 23:04:52 +03:00
2025-09-12 23:04:52 +03:00
2025-09-13 18:56:00 +03:00
2025-09-12 23:04:52 +03:00
2025-09-13 14:23:31 +03:00
2025-09-12 23:04:52 +03:00

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

  1. Install dependencies:

    bun install
    
  2. Start the development server:

    npm run dev
    
  3. Open your browser to http://localhost:5173

Development Features

  • Hot Reload: Changes reflect immediately
  • API Proxy: Requests to /api/* are proxied to http://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: .card for content containers
  • Buttons: .btn, .btn-primary, .btn-secondary, etc.
  • Inputs: .input for form fields
  • Status Indicators: .status-indicator, .status-online, etc.

Browser Support

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Contributing

  1. Follow the existing code style
  2. Use TypeScript for new components
  3. Add tests for new features
  4. Update documentation as needed

License

Part of the Personal Internet Cell project.