CyberMind-FR
0d6aaa1111
- Add complete Project Hub & Workspace Interface implementation - New data models: Project, ModuleKit, Workspace - 3 fixture projects (cybermind.fr, cybermood.eu, secubox-c3) - 4 module kits (Security, Network, Automation, Media) - Workspace routes with project switching and kit installation - 4 workspace tabs: Overview, Module Kits, Devices, Composer - New navigation item: Workspace (7th section) - Remove all glowing effects from UI - Remove Command Center widget glow and backdrop blur - Remove device status indicator glow - Remove toggle button glow effects - Extend DataStore with 13 new methods for workspace management - Add 270+ lines of workspace-specific CSS with responsive layouts - Create workspace templates and result partials 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
72 lines
3.3 KiB
Markdown
72 lines
3.3 KiB
Markdown
# SecuBox WebUI Prototyper
|
|
|
|
FastAPI + Jinja2 mockup that emulates LuCI-like management of SecuBox plugins/modules on a local workstation. It virtualizes modules, presets, and command pipelines so developers can experiment without a router.
|
|
|
|
## Features
|
|
- **Module Catalog**: Browse 29+ auto-ingested SecuBox modules with live metadata from packages
|
|
- **AppStore**: Marketplace interface with categories, search, ratings, and reviews
|
|
- **Component Registry**: Reusable UI components from installed modules
|
|
- **Configuration Profiles**: Bundle modules and presets for different use cases
|
|
- **Template Generator**: UCI/network/firewall configuration templates
|
|
- **Settings**: Theme switching, language, backend connection (virtualized/SSH/HTTP)
|
|
- **Multi-theme Support**: SecuBox Light + LuCI Dark with seamless switching
|
|
- **Preset Runner**: Simulates multi-command pipelines with aggregated results/logs
|
|
- **Custom Context Console**: Feed JSON overrides into preset executions
|
|
- **HTMX Integration**: Partial updates for dynamic UI without page reloads
|
|
- **Alpine.js State**: Client-side reactivity and toast notifications
|
|
|
|
## Getting Started
|
|
```bash
|
|
cd secubox-tools/webui
|
|
python -m venv .venv && source .venv/bin/activate
|
|
pip install -e .[dev] # or use UV/Poetry per preference
|
|
uvicorn app.main:app --reload --port 8100
|
|
```
|
|
|
|
Then visit `http://127.0.0.1:8100/` and toggle themes via the header controls.
|
|
|
|
## Project Layout
|
|
```
|
|
webui/
|
|
app/ # FastAPI application package
|
|
data/ # Fixture catalogs for modules, presets, commands
|
|
templates/ # Jinja2 templates + multi-theme hierarchy
|
|
static/ # Tailwind-ready CSS (currently handcrafted)
|
|
scripts/ # Future ingest/automation helpers
|
|
```
|
|
|
|
## Regenerating the Module Catalog
|
|
The UI now ingests live metadata from `package/secubox/*` and root `luci-*` directories. Run the helper to refresh `data/modules.json` after editing packages:
|
|
|
|
```bash
|
|
# via helper script
|
|
cd secubox-tools/webui
|
|
./scripts/ingest_packages.py --pretty
|
|
|
|
# or using the installed CLI entry point
|
|
secubox-webui-ingest --pretty
|
|
```
|
|
|
|
This parser reads each Makefile (LUCI_TITLE, VERSION, DESCRIPTION, etc.), derives friendly names/tags, and assigns default secure contexts/actions for the virtualization mockups.
|
|
|
|
## Status
|
|
|
|
### Completed ✅
|
|
- ✅ Full navigation with 6 main sections (Modules, AppStore, Components, Profiles, Templates, Settings)
|
|
- ✅ Live package metadata ingestion from repository
|
|
- ✅ Multi-theme system (SecuBox Light / LuCI Dark)
|
|
- ✅ Preset virtualization engine with command simulation
|
|
- ✅ HTMX + Alpine.js integration for dynamic UI
|
|
- ✅ AppStore with categories, search, ratings, and reviews
|
|
- ✅ All HTML templates implemented
|
|
- ✅ Responsive card-based layouts
|
|
- ✅ API endpoints for programmatic access
|
|
|
|
### Next Steps
|
|
1. **Wire up interactive features**: Enable install/uninstall, profile activation, template generation
|
|
2. **Backend Integration**: Connect to real OpenWrt device via SSH or HTTP API
|
|
3. **Extend ingest flow**: Derive presets/commands from package metadata (ACLs, README checklists)
|
|
4. **Authentication**: Add session management for multi-user deployments
|
|
5. **Containerized dry-runs**: Extend virtualization engine to run in isolated containers
|
|
6. **Real-time updates**: WebSocket support for live system monitoring
|