secubox-openwrt/secubox-tools/webui/README.md
CyberMind-FR 0d6aaa1111 feat(webui): add Project Hub workspace and remove Command Center glow effects
- 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>
2026-01-03 08:10:22 +01:00

3.3 KiB

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

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:

# 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