codex
This commit is contained in:
parent
f552cf7b99
commit
d9534270c8
24
.codex/README.md
Normal file
24
.codex/README.md
Normal file
@ -0,0 +1,24 @@
|
||||
# Codex Configuration for SecuBox OpenWrt
|
||||
|
||||
This `.codex/` directory captures the working agreements for Codex when editing the SecuBox OpenWrt feed. Every section is sourced from the local documentation (`README.md`, `DEVELOPMENT-GUIDELINES.md`, `CLAUDE.md`, `QUICK-START.md`, `DOCUMENTATION-INDEX.md`, `VALIDATION-GUIDE.md`, `PERMISSIONS-GUIDE.md`, `CODE-TEMPLATES.md`, `MODULE-IMPLEMENTATION-GUIDE.md`, etc.) plus the `.claude/` guidance. Follow these notes before touching any LuCI module, RPC backend, CSS, or deployment script.
|
||||
|
||||
Use these files as checkpoints:
|
||||
- `context.md`: what the suite is and how the repository is organized
|
||||
- `requirements.md`: functional and non-functional expectations
|
||||
- `architecture.md`: how data flows between LuCI views, RPCD, and system services
|
||||
- `conventions.md`: naming, packaging, ACL, CSS, and JavaScript standards
|
||||
- `workflows.md`: validated procedures for setup, build, deploy, release, and debugging
|
||||
- `rules.md`: enforceable guardrails Codex must respect before shipping any change
|
||||
- `prompting.md`: templates for requesting contributions from Codex or other AIs
|
||||
- `claudeia-notes.md`: how the existing Claude guidance maps onto Codex rules
|
||||
|
||||
Always cross-check instructions here with the source docs referenced above. When documentation conflicts, prioritize: repository source files → `.claude` rules → markdown guides.
|
||||
|
||||
## First 5 Commands to Run in this Repo
|
||||
1. `./secubox-tools/fix-permissions.sh --local` — normalize RPCD (755) and web assets (644) before editing
|
||||
2. `./secubox-tools/validate-modules.sh` — run the 7 critical checks (RPCD names, menu paths, JSON, permissions, etc.)
|
||||
3. `./secubox-tools/install-git-hooks.sh` — installs the pre-push validator so mistakes are caught automatically
|
||||
4. `./secubox-tools/local-build.sh validate` — replicates the CI validation locally using the OpenWrt SDK cache
|
||||
5. `./secubox-tools/local-build.sh build luci-app-<module>` — builds the module you are changing (use the exact package name)
|
||||
|
||||
Refer back to this README whenever you onboard a new contributor or need to explain how `.codex/` should be used in the SecuBox OpenWrt repository.
|
||||
37
.codex/architecture.md
Normal file
37
.codex/architecture.md
Normal file
@ -0,0 +1,37 @@
|
||||
# Architecture
|
||||
|
||||
## High-Level View
|
||||
The SecuBox suite is a collection of LuCI packages that all share the same pattern:
|
||||
|
||||
1. **LuCI Views** (`htdocs/luci-static/resources/view/<module>/*.js`) build the UI using `view.extend`, `ui`, and DOM helpers. Views import per-module API helpers and shared CSS (`system-hub/common.css`, plus module-specific `.css`).
|
||||
2. **API Helpers** (`htdocs/luci-static/resources/<module>/api.js`) declare ubus calls with `rpc.declare` and export a `baseclass.extend` instance that exposes typed methods (`getStatus`, `listServices`, etc.).
|
||||
3. **RPCD Backend** (`root/usr/libexec/rpcd/luci.<module>`) receives `list`/`call` requests from ubus, executes shell or UCI logic, and emits JSON via `json_*` helpers.
|
||||
4. **Navigation & ACL** (`root/usr/share/luci/menu.d/*.json`, `root/usr/share/rpcd/acl.d/*.json`) describe where the module appears in LuCI and who may access each ubus method.
|
||||
5. **Deployment Tooling** (`deploy-module-template.sh`, `secubox-tools/*.sh`) automates copying files to routers, backing up, fixing permissions, clearing caches, and restarting `rpcd`/`uhttpd`.
|
||||
|
||||
System Hub and SecuBox provide “umbrella” tabs (`admin/secubox/...`) but each module is otherwise isolated and should not reach into another module's files unless explicitly documented (e.g., System Hub reading SecuBox theme preferences via `luci.secubox get_theme`).
|
||||
|
||||
## Data Flow
|
||||
1. User opens `admin/secubox/.../<tab>` in LuCI.
|
||||
2. Menu JSON loads `luci-static/resources/view/<module>/<view>.js`.
|
||||
3. The view's `load()` issues `Promise.all([...API calls...])` to `api.js` helpers.
|
||||
4. `api.js` uses `rpc.declare({object: 'luci.<module>', method: ...})` to talk to ubus.
|
||||
5. ubus dispatches to `/usr/libexec/rpcd/luci.<module>`, which handles `list`/`call` requests, touches UCI/system services, and replies JSON.
|
||||
6. View `render()` updates DOM components, sets up `poll.add` for periodic refresh, and attaches event handlers that call more RPC actions.
|
||||
7. Deploy scripts copy updated JS/CSS/RPC/menu/ACL to the router, fix permissions, and restart `rpcd`/`uhttpd` to expose the changes.
|
||||
|
||||
## Boundaries & Dependency Rules
|
||||
- Modules must keep JS, CSS, RPC, menu, and ACL files self-contained under their own directory; shared assets go in `system-hub/common.css` or `templates/`.
|
||||
- Do not import code from another module's `htdocs/.../view` folder. Shared logic should be duplicated intentionally or moved into a common helper under `system-hub/` or a new shared location documented in `DEVELOPMENT-GUIDELINES.md`.
|
||||
- Any ubus interaction between modules must be explicitly documented (e.g., System Hub calling `luci.secubox get_theme`). Otherwise, treat every `luci.<module>` namespace as private.
|
||||
- Keep RPCD scripts shell-only unless the repo adds other interpreters; they must rely on standard OpenWrt utilities (`ubus`, `uci`, `/lib/functions.sh`, `/usr/share/libubox/jshn.sh`).
|
||||
|
||||
## Adding a New Module – Checklist
|
||||
1. **Scaffold**: Copy `templates/luci-app-template` or an existing module directory and rename files (`PKG_NAME`, `LUCI_TITLE`, etc.).
|
||||
2. **Implement RPCD**: Create `/root/usr/libexec/rpcd/luci.<module>` with `list`/`call`, JSON helpers, and method coverage for every UI action.
|
||||
3. **Add API Helper**: In `htdocs/luci-static/resources/<module>/api.js` extend `baseclass` and declare each ubus call.
|
||||
4. **Build Views**: Under `htdocs/luci-static/resources/view/<module>/` add `overview.js` plus additional tabs as needed. Include CSS via `<link>` to `system-hub/common.css` and module-specific files. Follow design system rules.
|
||||
5. **Wire Menu/ACL**: Create `root/usr/share/luci/menu.d/luci-app-<module>.json` with the correct `admin/secubox/...` path and `firstchild` entry; create `root/usr/share/rpcd/acl.d/luci-app-<module>.json` enumerating read/write ubus methods.
|
||||
6. **Docs**: Write `luci-app-<module>/README.md` describing purpose, features, install commands, and troubleshooting steps.
|
||||
7. **Permissions**: Update `Makefile` with `PKG_FILE_MODES:=/usr/libexec/rpcd/luci.<module>:755` (and any other executables). Confirm CSS/JS remain 644.
|
||||
8. **Validation & Build**: Run `./secubox-tools/fix-permissions.sh --local`, `./secubox-tools/validate-module-generation.sh luci-app-<module>`, and `./secubox-tools/local-build.sh build luci-app-<module>` before submitting.
|
||||
23
.codex/claudeia-notes.md
Normal file
23
.codex/claudeia-notes.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Claude Guidance Alignment
|
||||
|
||||
## Key Directives from `.claude/` and `CLAUDE.md`
|
||||
1. **Read the docs first** – Always consult `DEVELOPMENT-GUIDELINES.md`, `QUICK-START.md`, and `CLAUDE.md` before coding. `.claude/README.md` reiterates this and links every critical guide.
|
||||
2. **Naming & paths** – RPCD filename ≡ ubus object string (with `luci.` prefix) and menu `path` ≡ view path. Violations lead to `-32000` RPC errors or HTTP 404s.
|
||||
3. **Permissions** – RPCD scripts/scripts under `/usr/libexec` need 755, web assets 644. Use `PKG_FILE_MODES` in Makefiles plus `./secubox-tools/fix-permissions.sh --local/--remote`.
|
||||
4. **Validation** – Mandatory: `./secubox-tools/validate-modules.sh` (7 checks). For new modules use `validate-module-generation.sh`, and install pre-push hooks.
|
||||
5. **Design system** – Use `system-hub/common.css` variables (`--sh-*`), gradients, `.sh-*` classes, Inter/JetBrains fonts, and dark-mode selectors. No hardcoded colors or fonts.
|
||||
6. **Workflow** – Deploy via `deploy-module-template.sh` (with ROUTER env), fix perms, clear LuCI caches, restart `rpcd/uhttpd`. Build via `local-build.sh` or `make package/...`.
|
||||
7. **Prompting** – `.claude/module-implementation-guide.md` provides a template for AI prompts, expecting all files (Makefile, README, RPCD, API, views, menu, ACL) plus validation outputs.
|
||||
|
||||
## Mapping to Codex Rules
|
||||
- The Codex prime directive (protect RPC naming, menu paths, permissions, design system, validation) mirrors `.claude` rules; no conflicts.
|
||||
- Our `workflows.md` codifies the same commands Claude expects (fix perms, validate, local-build, deploy scripts).
|
||||
- The `prompting.md` templates derive from `.claude/module-implementation-guide.md` so Codex and Claude share the same deliverable expectations.
|
||||
- Design constraints (dark mode, gradients, fonts) from `.claude/README.md` and `DEVELOPMENT-GUIDELINES.md` appear in `conventions.md` and `requirements.md`.
|
||||
|
||||
## Conflict Resolution
|
||||
If `.claude` guidance ever diverges from repo truth, follow this priority chain (per instructions):
|
||||
1. Source code & current repo configuration (Makefiles, scripts, actual files)
|
||||
2. `.claude/` rules and `CLAUDE.md`
|
||||
3. Markdown guides (`DEVELOPMENT-GUIDELINES.md`, `CODE-TEMPLATES.md`, etc.)
|
||||
Flag any contradictions as TODOs in the relevant `.codex` file when discovered.
|
||||
55
.codex/context.md
Normal file
55
.codex/context.md
Normal file
@ -0,0 +1,55 @@
|
||||
# SecuBox Context
|
||||
|
||||
## What SecuBox OpenWrt Suite Is
|
||||
SecuBox is a suite of LuCI applications that ship advanced security, monitoring, and automation dashboards for OpenWrt routers. Each `luci-app-*` package combines LuCI JavaScript views, RPCD backends, UCI integration, ACL policies, and shared CSS built on the SecuBox design system (dark-first palette, Inter + JetBrains Mono). GitHub Actions builds the packages for every supported architecture (`x86`, `ARM`, `MIPS`) and the repo also carries tooling for validation, repair, deployment, and firmware image creation.
|
||||
|
||||
## Repository Layout
|
||||
- `.claude/` – authoritative assistant guidance, prompts, and settings
|
||||
- `.github/workflows/` – CI definitions (package build matrix, validation, firmware images)
|
||||
- `luci-app-*/` – one directory per LuCI module (Makefile, README, `htdocs/`, `root/`)
|
||||
- `secubox-tools/` – validation/build/deploy helpers (`local-build.sh`, `validate-modules.sh`, etc.)
|
||||
- `templates/` – scaffolding for new LuCI packages
|
||||
- Root docs: `README.md`, `QUICK-START.md`, `DEVELOPMENT-GUIDELINES.md`, `CLAUDE.md`, `DOCUMENTATION-INDEX.md`, `CODE-TEMPLATES.md`, `FEATURE-REGENERATION-PROMPTS.md`, `MODULE_STATUS.md`, `PERMISSIONS-GUIDE.md`, `VALIDATION-GUIDE.md`, etc.
|
||||
- Deploy scripts: `deploy-module-template.sh`, `deploy-*.sh` (system hub, secubox, beta releases, etc.)
|
||||
- Test fixtures: `test-direct.js`, `test-modules-simple.js`
|
||||
|
||||
## Module Map (Purpose & Entry Points)
|
||||
Each module follows the same structure: `Makefile`, module-specific README, JavaScript views under `htdocs/luci-static/resources/view/<module>/`, API helpers under `htdocs/luci-static/resources/<module>/api.js`, CSS in the same folder, RPCD backend in `root/usr/libexec/rpcd/luci.<module>`, menu JSON under `root/usr/share/luci/menu.d/`, and ACL JSON under `root/usr/share/rpcd/acl.d/`.
|
||||
|
||||
| Module | Purpose | Primary Views (JS) |
|
||||
|--------|---------|--------------------|
|
||||
| `luci-app-secubox` | Central SecuBox hub (module launcher, dashboard, dev status) | `secubox/dashboard.js`, `modules.js`, `modules-minimal.js`, `dev-status.js`, `alerts.js`, `monitoring.js`, `settings.js`
|
||||
| `luci-app-system-hub` | System control center (health, services, diagnostics, remote) | `system-hub/overview.js`, `health.js`, `services.js`, `components.js`, `logs.js`, `backup.js`, `diagnostics.js`, `remote.js`, `settings.js`, `dev-status.js`
|
||||
| `luci-app-crowdsec-dashboard` | CrowdSec decision, alerts, bouncer management | `crowdsec-dashboard/overview.js`, `alerts.js`, `decisions.js`, `bouncers.js`, `metrics.js`, `settings.js`
|
||||
| `luci-app-netdata-dashboard` | Netdata monitoring integration | `netdata-dashboard/dashboard.js`, `system.js`, `network.js`, `processes.js`, `realtime.js`, `settings.js`
|
||||
| `luci-app-netifyd-dashboard` | DPI / application intelligence | `netifyd-dashboard/overview.js`, `applications.js`, `devices.js`, `flows.js`, `risks.js`, `talkers.js`, `settings.js`
|
||||
| `luci-app-network-modes` | Switch router/AP/bridge/sniffer modes | `network-modes/overview.js`, `wizard.js`, `sniffer.js`, `accesspoint.js`, `relay.js`, `router.js`, `settings.js`
|
||||
| `luci-app-wireguard-dashboard` | WireGuard VPN monitoring/config | `wireguard-dashboard/overview.js`, `peers.js`, `traffic.js`, `config.js`, `settings.js`, `qrcodes.js`
|
||||
| `luci-app-client-guardian` | NAC + captive portal + parental controls | `client-guardian/overview.js`, `clients.js`, `zones.js`, `portal.js`, `captive.js`, `alerts.js`, `parental.js`, `settings.js`, `logs.js`
|
||||
| `luci-app-auth-guardian` | Authentication/voucher/OAuth portal | `auth-guardian/overview.js`, `sessions.js`, `vouchers.js`, `oauth.js`, `splash.js`, `bypass.js`
|
||||
| `luci-app-bandwidth-manager` | QoS, quotas, priority classes | `bandwidth-manager/overview.js`, `classes.js`, `rules.js`, `schedules.js`, `media.js`, `clients.js`, `usage.js`, `quotas.js`, `settings.js`
|
||||
| `luci-app-media-flow` | Streaming/media traffic analytics | `media-flow/dashboard.js`, `services.js`, `clients.js`, `history.js`, `alerts.js`
|
||||
| `luci-app-cdn-cache` | Local CDN cache policies & stats | `cdn-cache/overview.js`, `policies.js`, `cache.js`, `statistics.js`, `maintenance.js`, `settings.js`
|
||||
| `luci-app-vhost-manager` | Virtual hosts & SSL orchestration | `vhost-manager/overview.js`, `vhosts.js`, `internal.js`, `redirects.js`, `ssl.js`, `certificates.js`, `logs.js`
|
||||
| `luci-app-traffic-shaper` | Advanced traffic shaping presets | `traffic-shaper/overview.js`, `classes.js`, `rules.js`, `stats.js`, `presets.js`
|
||||
| `luci-app-ksm-manager` | Secure key/certificate management | `ksm-manager/overview.js`, `keys.js`, `secrets.js`, `certificates.js`, `ssh.js`, `hsm.js`, `audit.js`, `settings.js`
|
||||
|
||||
(Modules not listed explicitly above share the same structure; inspect each `luci-app-*/htdocs/luci-static/resources/view/<module>/` directory for the definitive entrypoints.)
|
||||
|
||||
## Stack & Integration Points
|
||||
- **Frontend**: LuCI JavaScript views (`view.extend`) + SecuBox design system CSS. Every view imports the per-module `api.js` module for ubus calls and includes shared styles like `system-hub/common.css`.
|
||||
- **Backend**: RPCD shell scripts under `root/usr/libexec/rpcd/luci.<module>` expose ubus methods (`status`, `get_*`, `set_*`, etc.). Modules often also ship helper scripts under `/usr/libexec/secubox/` and UCI defaults under `root/etc/uci-defaults/`.
|
||||
- **UBus / RPC**: JavaScript uses `rpc.declare` with `object: 'luci.<module>'`. RPCD `list` and `call` cases must mirror these names.
|
||||
- **Menu/ACL**: JSON files in `root/usr/share/luci/menu.d/` and `root/usr/share/rpcd/acl.d/` keep navigation and permissions consistent with the views and RPCD backend.
|
||||
- **Packaging**: OpenWrt LuCI package Makefiles include `luci.mk`, define `PKG_FILE_MODES` for executable scripts (typically RPCD 755), and mark packages as `LUCI_PKGARCH:=all` because they are script-only.
|
||||
|
||||
## Glossary
|
||||
- **LuCI** – OpenWrt web interface framework (Lua backend + JS frontend)
|
||||
- **RPCD** – Daemon providing ubus RPC endpoints; modules drop scripts in `/usr/libexec/rpcd/`
|
||||
- **ubus** – OpenWrt message bus used for remote procedure calls
|
||||
- **UCI** – Unified Configuration Interface (files in `/etc/config/`)
|
||||
- **ACL** – RPCD permission JSON files in `/usr/share/rpcd/acl.d/`
|
||||
- **PKG_FILE_MODES** – Makefile variable forcing specific permissions for installed files
|
||||
- **SecuBox Design System** – Shared CSS variables (`--sh-*`) and components defined in `system-hub/common.css`
|
||||
- **Validation suite** – `./secubox-tools/validate-modules.sh`, `validate-module-generation.sh`, `pre-push-validation.sh`
|
||||
- **Deploy script** – `deploy-module-template.sh` (backup, copy JS/CSS/RPCD/menu/ACL, fix perms, restart services)
|
||||
46
.codex/conventions.md
Normal file
46
.codex/conventions.md
Normal file
@ -0,0 +1,46 @@
|
||||
# Conventions
|
||||
|
||||
## OpenWrt Packaging
|
||||
- Every `luci-app-*` Makefile includes `$(TOPDIR)/rules.mk` and `$(TOPDIR)/feeds/luci/luci.mk`, sets `PKG_NAME`, `PKG_VERSION`, `PKG_RELEASE`, `PKG_LICENSE`, `PKG_MAINTAINER`, `LUCI_TITLE`, `LUCI_DESCRIPTION`, `LUCI_DEPENDS`, and `LUCI_PKGARCH:=all`.
|
||||
- Use `PKG_FILE_MODES` to mark executables, e.g. `PKG_FILE_MODES:=/usr/libexec/rpcd/luci.system-hub:755`. CSS/JS/Menu/ACL files inherit 644 automatically—never mark them executable.
|
||||
- Structure: `htdocs/luci-static/resources/view/<module>/*.js`, `htdocs/luci-static/resources/<module>/api.js` + CSS, `root/usr/libexec/rpcd/luci.<module>`, `root/usr/share/luci/menu.d/luci-app-<module>.json`, `root/usr/share/rpcd/acl.d/luci-app-<module>.json`, optional `/etc/config/<module>` and UCI defaults.
|
||||
- Run `./secubox-tools/local-build.sh build luci-app-<module>` or `make package/luci-app-<module>/compile V=s` before pushing.
|
||||
|
||||
## LuCI JavaScript & CSS
|
||||
- Always start JS files with `'use strict';` and use `return view.extend({ ... })`. API modules must `return baseclass.extend({ ... })`.
|
||||
- Import dependencies with `'require ...'` statements (`view`, `form`, `ui`, `rpc`, `system-hub/api as API`, etc.).
|
||||
- Use `Promise.all` inside `load()` and update DOM in `render()`. Register periodic refresh with `poll.add` for live data.
|
||||
- Styling: link to `system-hub/common.css` + module CSS. Use `.sh-*` classes, gradient headers, `.sh-stats-grid`, `.sh-card`, `.sh-btn-*`, `.sh-filter-tab`, etc. Always support `[data-theme="dark"]` selectors.
|
||||
- Component patterns: page header with `.sh-page-title` gradient, stats badges (min 130px, JetBrains Mono values), cards with 3px top border, sticky nav/filter tabs.
|
||||
- No hardcoded colors/gradients: reference `var(--sh-*)`. Typography: Inter for text, JetBrains Mono for numeric values.
|
||||
|
||||
## RPC/ubus Backends
|
||||
- Script filename **must** match ubus object (`/usr/libexec/rpcd/luci.<module>`). The ubus object string in JS, ACL, and CLI (`ubus call`) must use the same dotted name.
|
||||
- RPCD scripts shell template: `#!/bin/sh`, `. /lib/functions.sh`, `. /usr/share/libubox/jshn.sh`, `case "$1" in list|call ) ... esac`. `list` advertises each method; `call` routes to handler functions, returning JSON via `json_init/json_add_*`.
|
||||
- Methods should validate input parameters, sanitize user data, interact with UCI/CLI commands safely, and return success/error payloads with clear keys.
|
||||
|
||||
## ACLs & Menu Files
|
||||
- Menu JSON lives in `root/usr/share/luci/menu.d/` and must align with view files: `"path": "<module>/<view>"` referencing `htdocs/luci-static/resources/view/<module>/<view>.js`.
|
||||
- Provide a `"firstchild"` entry for the module root under `admin/secubox/...`, then `"view"` entries per tab with `order` values.
|
||||
- ACL JSON in `root/usr/share/rpcd/acl.d/` should grant read (typically `status`, `get_*`, `list_*`) and write (`set_*`, `apply`, `service_action`) methods separately. Include any UCI sections if config files exist.
|
||||
- Least privilege: never expose shell commands via ubus without validation, and never add ubus methods to ACLs unless needed by the UI.
|
||||
|
||||
## Logging & Debugging
|
||||
- Use `ui.addNotification` in JS to display success/error states. For RPC backends, write diagnostics to syslog with `logger` as needed.
|
||||
- Common field debugging: `ubus list | grep luci.<module>`, `ubus call luci.<module> status`, `logread | grep -i <module>`.
|
||||
- To inspect remote files: `ssh root@router 'ls -la /www/luci-static/resources/view/<module>/'` and `wget -qO- http://router/luci-static/resources/<module>/api.js`.
|
||||
- Automated scripts: `./secubox-tools/secubox-debug.sh luci-app-<module>`, `./secubox-tools/secubox-repair.sh`, `./secubox-tools/fix-permissions.sh --remote root@<ip>`.
|
||||
|
||||
## Testing & Validation
|
||||
- Always run `./secubox-tools/fix-permissions.sh --local` followed by `./secubox-tools/validate-modules.sh` (7 checks) before committing.
|
||||
- For new modules or major changes, run `./secubox-tools/validate-module-generation.sh luci-app-<module>` and `./secubox-tools/local-build.sh full`.
|
||||
- Install git hooks via `./secubox-tools/install-git-hooks.sh` so `pre-push-validation.sh` runs automatically.
|
||||
- On devices: after deploying, run `ubus list`, `ubus call luci.<module> status`, `logread | grep -i error`, ensure LuCI tab loads, and rerun `./secubox-tools/fix-permissions.sh --remote`.
|
||||
|
||||
## Anti-Patterns (Do Not Do)
|
||||
- ❌ Creating RPCD scripts without the `luci.` prefix or mismatching JS/ACL names (causes `-32000` errors).
|
||||
- ❌ Hardcoding colors/fonts, or ignoring `[data-theme="dark"]` (breaks design system).
|
||||
- ❌ Adding files without updating `menu.d`/`acl.d`, or leaving stale menu paths (causes HTTP 404 / unauthorized tabs).
|
||||
- ❌ Shipping CSS/JS with executable permissions (403 errors) or RPCD scripts without 755 (permission denied).
|
||||
- ❌ Bypassing validation/deploy scripts (risk of missing dependencies, wrong permissions, or no backups).
|
||||
- ❌ Calling other modules’ ubus endpoints without documentation; share data through defined APIs only.
|
||||
94
.codex/prompting.md
Normal file
94
.codex/prompting.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Prompting Templates
|
||||
Use these templates when asking Codex (or any assistant) to perform work in this repository. Fill in the placeholders and include the validation commands listed so the change respects SecuBox standards.
|
||||
|
||||
## 1. Add a New LuCI Module
|
||||
```
|
||||
Goal: Create luci-app-<module> for <purpose/category>.
|
||||
Features:
|
||||
1. ...
|
||||
2. ...
|
||||
Backend service(s): ... (CLI commands/paths)
|
||||
UI requirements: tabs/views + metrics/cards needed.
|
||||
Dependencies: (packages, daemons, config files)
|
||||
Deliverables:
|
||||
- Makefile (PKG_NAME, deps, PKG_FILE_MODES)
|
||||
- README.md (install, usage, troubleshooting)
|
||||
- htdocs: view/<module>/*.js, <module>/api.js + CSS
|
||||
- root/usr/libexec/rpcd/luci.<module>
|
||||
- root/usr/share/luci/menu.d/luci-app-<module>.json
|
||||
- root/usr/share/rpcd/acl.d/luci-app-<module>.json
|
||||
Tests:
|
||||
- ./secubox-tools/fix-permissions.sh --local
|
||||
- ./secubox-tools/validate-module-generation.sh luci-app-<module>
|
||||
- ./secubox-tools/local-build.sh build luci-app-<module>
|
||||
```
|
||||
|
||||
## 2. Add a Dashboard Widget to an Existing Module
|
||||
```
|
||||
Module/view to update: luci-app-<module> (view/<module>/<view>.js)
|
||||
Widget purpose: (metrics, chart, status)
|
||||
Data source: RPC method(s) or static content
|
||||
Design requirements: (sh-card, sh-stats-grid, icons, auto-refresh interval)
|
||||
Also update: CSS file? API helper? README section?
|
||||
Validation:
|
||||
- ./secubox-tools/validate-modules.sh
|
||||
- Manual test steps (open admin/secubox/.../<view>, confirm widget renders)
|
||||
```
|
||||
|
||||
## 3. Add a New ubus Method + LuCI Client
|
||||
```
|
||||
Module: luci-app-<module>
|
||||
Method name: <method>
|
||||
Parameters: {...}
|
||||
Backend behavior: (what RPCD does, commands run, JSON shape)
|
||||
UI hook: (button/form/action invoking the method)
|
||||
Files to touch:
|
||||
- htdocs/.../<module>/api.js (rpc.declare)
|
||||
- htdocs/.../<module>/<view>.js (UI wiring)
|
||||
- root/usr/libexec/rpcd/luci.<module> (implement method)
|
||||
- root/usr/share/rpcd/acl.d/luci-app-<module>.json (permissions)
|
||||
Validation/tests:
|
||||
- ubus call luci.<module> <method> '{"..."}'
|
||||
- ./secubox-tools/validate-module-generation.sh luci-app-<module>
|
||||
```
|
||||
|
||||
## 4. Change ACL / Permissions Safely
|
||||
```
|
||||
Module: luci-app-<module>
|
||||
Reason for ACL change: (new method, tightened access)
|
||||
New methods to expose: [list]
|
||||
Read vs write access requirements:
|
||||
Files to update:
|
||||
- root/usr/share/rpcd/acl.d/luci-app-<module>.json
|
||||
- Any README or docs referencing permissions
|
||||
Tests:
|
||||
- jsonlint root/usr/share/rpcd/acl.d/luci-app-<module>.json
|
||||
- ./secubox-tools/validate-modules.sh (ensures ACL covers RPC methods)
|
||||
```
|
||||
|
||||
## 5. Fix Packaging / Makefile Issues
|
||||
```
|
||||
Module: luci-app-<module>
|
||||
Problem: (missing PKG_FILE_MODES, wrong deps, version bump)
|
||||
Required updates:
|
||||
- Makefile fields (PKG_VERSION, PKG_RELEASE, LUCI_DEPENDS, PKG_FILE_MODES)
|
||||
- Add/remove files from install sections?
|
||||
Validation:
|
||||
- ./secubox-tools/secubox-repair.sh (optional)
|
||||
- ./secubox-tools/local-build.sh build luci-app-<module>
|
||||
- ./secubox-tools/validate-modules.sh
|
||||
```
|
||||
|
||||
## 6. Improve Deploy Scripts
|
||||
```
|
||||
Script to change: deploy-module-template.sh / deploy-<target>.sh / secubox-tools/<script>
|
||||
Goal: (copy new file types, add sanity checks, change backup strategy)
|
||||
Environment assumptions: ROUTER env, SSH availability, backup paths, permission fixes.
|
||||
Acceptance:
|
||||
- Script runs non-destructively when ROUTER is set.
|
||||
- Backups created under /root/luci-backups/<timestamp>.
|
||||
- Permissions reset via chmod + remote fix-permissions script.
|
||||
Validation:
|
||||
- shellcheck <script>
|
||||
- Dry-run on staging router or describe how to test.
|
||||
```
|
||||
53
.codex/requirements.md
Normal file
53
.codex/requirements.md
Normal file
@ -0,0 +1,53 @@
|
||||
# Requirements
|
||||
|
||||
## Functional Requirements
|
||||
- **luci-app-secubox**: Provide a central dashboard showing module status, monitoring cards, module launchers, alerts, and developer status (views `dashboard.js`, `modules*.js`, `dev-status.js`).
|
||||
- **luci-app-system-hub**: Expose health scoring, service control, diagnostics, backup/restore, remote access, and the bonus development status tab with matching widgets (`overview.js`, `services.js`, `components.js`, `logs.js`, `backup.js`, `diagnostics.js`, `remote.js`, `dev-status.js`).
|
||||
- **luci-app-crowdsec-dashboard**: Surface CrowdSec bans, alerts, bouncer state, metrics, and configuration actions (views `overview.js`, `alerts.js`, `decisions.js`, `bouncers.js`, `metrics.js`, `settings.js`).
|
||||
- **luci-app-netdata-dashboard**: Embed Netdata telemetry (system, network, processes, realtime, settings) using SecuBox cards and gauges.
|
||||
- **luci-app-netifyd-dashboard**: Show DPI data: applications, devices, flows, risks, “top talkers,” and configuration controls.
|
||||
- **luci-app-network-modes**: Let users toggle router/AP/relay/sniffer modes via wizard flows while preserving backup/restore safeguards.
|
||||
- **luci-app-wireguard-dashboard**: Monitor tunnels, peers, traffic, configs, QR codes, and enforce never exposing private keys.
|
||||
- **luci-app-client-guardian**: Manage NAC zones, portals, captive flow, parental policies, alerts, logs, and quarantine defaults.
|
||||
- **luci-app-auth-guardian**: Run authentication flows (sessions, vouchers, OAuth, splash, bypass) with secure portal assets.
|
||||
- **luci-app-bandwidth-manager**: Configure QoS classes, scheduling, quotas, per-client stats, and media-aware prioritization.
|
||||
- **luci-app-media-flow**: Detect streaming/VoIP services, alert on anomalies, show live bandwidth breakdown by service/client/history.
|
||||
- **luci-app-cdn-cache**: Configure caching policies, show cache metrics, allow maintenance tasks (purge, preload).
|
||||
- **luci-app-vhost-manager**: Create local virtual hosts, SSL bindings, redirects, certificate management, and view logs.
|
||||
- **luci-app-traffic-shaper**: Provide CAKE/HTB based presets, classes, rules, and stats with one-click templates (gaming, streaming, etc.).
|
||||
- **luci-app-ksm-manager**: Manage secure keys/secrets/HSM credentials, track audits, and guard SSH certificate flows.
|
||||
|
||||
## Non-Functional Requirements
|
||||
- **Security & Permissions**: RPCD scripts must be installed with 755 through `PKG_FILE_MODES`; CSS/JS/Menu/ACL remain 644. ACL JSON must enumerate every ubus method. Do not widen ACLs without justification.
|
||||
- **Design System**: Use `system-hub/common.css` variables (`--sh-*`), Inter + JetBrains Mono fonts, gradient classes, and provide `[data-theme="dark"]` overrides. No hardcoded colors.
|
||||
- **Performance**: Views should batch RPC calls via `Promise.all`, re-use API helpers, and throttle `poll.add` intervals per module spec (commonly 5–30s).
|
||||
- **Reliability**: Always run validation (`./secubox-tools/validate-modules.sh` / `validate-module-generation.sh`) and fix permissions before committing. Deployments must include remote permission fixes plus LuCI cache flush/resets.
|
||||
- **Privacy**: Modules such as Client Guardian, Auth Guardian, and WireGuard must never display secrets (e.g., mask private keys, credentials, vouchers).
|
||||
|
||||
## Compatibility Matrix
|
||||
| OpenWrt Version | Status | Package Format | Notes |
|
||||
|-----------------|--------|----------------|-------|
|
||||
| 25.12.0-rc1 | Testing | `.apk` | Uses new apk package manager |
|
||||
| 24.10.x | Supported (recommended) | `.ipk` | Default CI target |
|
||||
| 23.05.x | Supported | `.ipk` | Previous stable |
|
||||
| 22.03.x | Supported | `.ipk` | LTS |
|
||||
| 21.02.x | Partial | `.ipk` | End of support |
|
||||
| SNAPSHOT | Supported | `.apk` | Bleeding edge |
|
||||
|
||||
Architectures covered by CI/local-build: `x86-64`, `x86-generic`, `aarch64-cortex-a53`, `aarch64-cortex-a72`, `aarch64-generic`, `mediatek-filogic`, `rockchip-armv8`, `bcm27xx-bcm2711`, `arm-cortex-a7-neon`, `arm-cortex-a9-neon`, `qualcomm-ipq40xx`, `qualcomm-ipq806x`, `mips-24kc`, `mipsel-24kc`, `mipsel-74kc`.
|
||||
|
||||
## Invariants (Must Never Break)
|
||||
1. **RPCD naming**: `root/usr/libexec/rpcd/luci.<module>` must match every `rpc.declare({object:'luci.<module>'})` reference and ACL entry.
|
||||
2. **Menu path alignment**: `root/usr/share/luci/menu.d/*.json` `path` fields must match the view filenames (`htdocs/luci-static/resources/view/<module>/<view>.js`).
|
||||
3. **File permissions**: RPCD=755, helper scripts=755, CSS/JS/Menu/ACL/UCI=644. Always run `./secubox-tools/fix-permissions.sh --local` and `--remote`.
|
||||
4. **Design system compliance**: Use shared CSS variables, fonts, and gradient/button classes; implement `[data-theme="dark"]` overrides.
|
||||
5. **Validation gate**: Do not merge or deploy without passing `./secubox-tools/validate-modules.sh` (7 checks) and, when applicable, `validate-module-generation.sh` / `pre-push-validation.sh`.
|
||||
6. **ACL integrity**: ACL JSON must explicitly cover every ubus method (read vs write) and only expose necessary resources.
|
||||
7. **Deployment hygiene**: Use `deploy-module-template.sh` or module-specific deploy scripts so backups, LuCI cache clearing, and service restarts happen consistently.
|
||||
|
||||
## Acceptance Criteria Patterns
|
||||
- ✅ UI work: All new views/styles follow the SecuBox design system, support dark mode, validate RPC responses, and update UI state/polling without console errors.
|
||||
- ✅ RPC additions: Updated `api.js`, `root/usr/libexec/rpcd/luci.<module>`, menu/ACL JSON, and documentation; ubus methods tested via `ubus call luci.<module> <method>`.
|
||||
- ✅ Packaging changes: `Makefile` builds locally via `make package/luci-app-<module>/compile V=s` or `./secubox-tools/local-build.sh build luci-app-<module>`; `PKG_FILE_MODES` covers executables; README updated if behavior changes.
|
||||
- ✅ Deployment: `ROUTER=<host> ./deploy-module-template.sh <module>` completes, `./secubox-tools/fix-permissions.sh --remote <host>` run, `ubus list | grep luci.<module>` returns, and LuCI tab loads without 404/403/-32000 errors.
|
||||
- ✅ Documentation: If UX or API contracts change, update the corresponding module README and reference sections (`DEVELOPMENT-GUIDELINES`, `MODULE_STATUS`, or other docs) or log a TODO when unsure.
|
||||
44
.codex/rules.md
Normal file
44
.codex/rules.md
Normal file
@ -0,0 +1,44 @@
|
||||
# Codex Rules for SecuBox
|
||||
|
||||
## Prime Directive
|
||||
Do not break module contracts: RPCD script names must equal their ubus objects, menu paths must match view files, ACLs must enumerate every exposed method, and every change must preserve the SecuBox design system (CSS variables, dark mode, typography) plus file permissions (RPCD 755, web assets 644). If a change risks violating these invariants, stop and request clarification.
|
||||
|
||||
## Change Scope Discipline
|
||||
- Touch only the module(s) mentioned in the task. Shared assets (e.g., `system-hub/common.css`) require explicit justification.
|
||||
- Keep diffs minimal: update JS + CSS + RPC + menu/ACL together only when they are logically tied.
|
||||
- Document behavior changes in the relevant README or flag a TODO if the correct home is unclear.
|
||||
|
||||
## Mandatory Checks per Change Type
|
||||
- **UI / CSS / View changes**:
|
||||
- Import `system-hub/common.css` + module CSS and follow `.sh-*` component patterns.
|
||||
- Provide `[data-theme="dark"]` selectors and avoid hardcoded colors.
|
||||
- Run `./secubox-tools/validate-modules.sh` to ensure menu/view alignment.
|
||||
- Manually test the LuCI tab or describe how to test (`ubus`, browser steps).
|
||||
- **RPC / ubus changes**:
|
||||
- Update `htdocs/.../<module>/api.js`, `root/usr/libexec/rpcd/luci.<module>`, ACL JSON, and README/usage as needed.
|
||||
- Ensure RPCD `list` advertises all methods and `call` routes to handlers returning valid JSON.
|
||||
- Run `./secubox-tools/validate-module-generation.sh luci-app-<module>` and document sample `ubus call` output.
|
||||
- **Configuration / UCI changes**:
|
||||
- Provide migration instructions (uci-defaults or README notes) and preserve backwards compatibility.
|
||||
- Update ACL if new config sections are accessed via RPC.
|
||||
- Mention manual steps (e.g., `/etc/init.d/<service> restart`).
|
||||
- **Deploy/Tooling changes**:
|
||||
- Explain safety nets (backups, permission fixes).
|
||||
- Dry-run scripts or include commands for re-running (e.g., `ROUTER=... ./deploy-module-template.sh system-hub`).
|
||||
|
||||
## Security Rules
|
||||
- Least privilege ACLs: never add ubus methods to `write` unless strictly necessary; justify any new ACL entry.
|
||||
- Sanitize inputs and guard shell invocations in RPCD (no unchecked user data in `eval`/`sh -c`).
|
||||
- Never surface private keys, credentials, or tokens in LuCI output.
|
||||
- Enforce file permissions via `PKG_FILE_MODES` and `./secubox-tools/fix-permissions.sh`.
|
||||
|
||||
## OpenWrt-Specific Rules
|
||||
- Use package dependencies consistent with module purpose (`+luci-base +rpcd` plus service-specific deps).
|
||||
- Keep packages arch-independent unless compiling binaries (current repo uses `LUCI_PKGARCH:=all`).
|
||||
- Validate JSON and shell scripts with `jsonlint` and `shellcheck` when touched.
|
||||
- Respect CI workflows; replicate them locally via `./secubox-tools/local-build.sh build` before pushing.
|
||||
|
||||
## Stop Conditions & TODOs
|
||||
- If documentation is missing or contradictory, log a `TODO` in the affected `.codex` file or module README describing what needs clarification before touching code.
|
||||
- If you cannot confirm an invariant (e.g., unknown menu path or ubus method), halt and ask for the correct reference from `DEVELOPMENT-GUIDELINES.md` / `.claude`.
|
||||
- For hardware-specific commands (e.g., device-specific firmware builds) where target details are unknown, respond with steps needed from the user rather than guessing.
|
||||
87
.codex/workflows.md
Normal file
87
.codex/workflows.md
Normal file
@ -0,0 +1,87 @@
|
||||
# Workflows
|
||||
|
||||
## Setup
|
||||
1. **Normalize permissions**
|
||||
```bash
|
||||
./secubox-tools/fix-permissions.sh --local
|
||||
```
|
||||
2. **Install git hooks** (pre-push validator)
|
||||
```bash
|
||||
./secubox-tools/install-git-hooks.sh
|
||||
```
|
||||
3. **Run the baseline validation** (7 checks)
|
||||
```bash
|
||||
./secubox-tools/validate-modules.sh
|
||||
```
|
||||
4. **Cache the SDK and validate via local-build**
|
||||
```bash
|
||||
./secubox-tools/local-build.sh validate
|
||||
```
|
||||
5. **Inspect module status & docs** using `DOCUMENTATION-INDEX.md`, `MODULE_STATUS.md`, and each module’s README before editing.
|
||||
|
||||
## Build Packages
|
||||
- **Single module via SDK**
|
||||
```bash
|
||||
make package/luci-app-<module>/compile V=s
|
||||
```
|
||||
- **Local CI-equivalent build**
|
||||
```bash
|
||||
./secubox-tools/local-build.sh build luci-app-<module>
|
||||
# or build all architectures
|
||||
./secubox-tools/local-build.sh build
|
||||
```
|
||||
- **Firmware images** (preload SecuBox packages)
|
||||
```bash
|
||||
./secubox-tools/local-build.sh build-firmware mochabin
|
||||
```
|
||||
|
||||
## Run / Validate on a Device
|
||||
1. Copy the package or run the standardized deploy script:
|
||||
```bash
|
||||
ROUTER=root@192.168.8.191 ./deploy-module-template.sh system-hub
|
||||
# For other modules: replace system-hub, script backs up, copies JS/CSS/RPCD/menu/ACL, fixes perms, clears cache, restarts rpcd/uhttpd.
|
||||
```
|
||||
2. Fix remote permissions & restart services (safety net):
|
||||
```bash
|
||||
./secubox-tools/fix-permissions.sh --remote root@192.168.8.191
|
||||
```
|
||||
3. Functional smoke tests:
|
||||
```bash
|
||||
ssh root@router "ubus list | grep luci.<module>"
|
||||
ssh root@router "ubus call luci.<module> status"
|
||||
ssh root@router "/etc/init.d/rpcd restart && /etc/init.d/uhttpd restart"
|
||||
```
|
||||
4. Clear LuCI cache if manual copy: `rm -f /tmp/luci-indexcache /tmp/luci-modulecache/*`.
|
||||
|
||||
## Linting & Formatting
|
||||
- JSON: `jsonlint root/usr/share/luci/menu.d/*.json root/usr/share/rpcd/acl.d/*.json`
|
||||
- Shell scripts: `shellcheck root/usr/libexec/rpcd/* secubox-tools/*.sh`
|
||||
- Ubux objects: `./secubox-tools/validate-module-generation.sh luci-app-<module>`
|
||||
|
||||
## CI Overview
|
||||
- **build-openwrt-packages.yml** – Multi-arch SDK builds (.ipk/.apk) triggered on push/PR/tags/workflow_dispatch.
|
||||
- **test-validate.yml** – Runs validation scripts, shellcheck, JSON lint.
|
||||
- **build-secubox-images.yml** – Builds firmware images per device profile.
|
||||
Use `Actions > Run workflow` with inputs (package name, OpenWrt version, architectures) to trigger manual builds.
|
||||
|
||||
## Release & Deploy
|
||||
1. **Tag release**
|
||||
```bash
|
||||
git tag -a v1.x.y -m "Release notes"
|
||||
git push origin v1.x.y
|
||||
```
|
||||
2. **Use deploy modules script** for router installs; for combined releases, run `deploy-system-hub.sh`, `deploy-secubox-dashboard.sh`, or other `deploy-*.sh` wrappers which copy relevant files, call `fix-permissions`, clear caches, and restart services.
|
||||
3. **Post-deploy validation**: `ubus list`, `logread | grep -i error`, open the LuCI tab in a private browser window to bypass cache.
|
||||
4. **Rollback plan**: `deploy-module-template.sh` creates backups under `/root/luci-backups/<timestamp>`; restore manually via `scp` if needed.
|
||||
|
||||
## Debugging Cookbook (Top Issues)
|
||||
1. **HTTP 404 for view** – Menu path mismatch; fix `root/usr/share/luci/menu.d/*.json` to match `htdocs/.../view/<module>/<view>.js`, redeploy, flush LuCI cache.
|
||||
2. **RPC -32000 Object not found** – RPCD script name or permissions wrong; rename to `luci.<module>`, ensure 755, restart `rpcd`.
|
||||
3. **403 on CSS/JS** – File deployed with 600/700 perms; run `./secubox-tools/fix-permissions.sh --remote` targeting the router.
|
||||
4. **Design regression** – Missing CSS variables or dark mode selectors; re-import `system-hub/common.css`, replace hardcoded colors with `var(--sh-*)`, add `[data-theme="dark"]` overrides.
|
||||
5. **Menu not showing** – ACL missing the module or dependencies unsatisfied; update ACL JSON and confirm `depends.acl` in menu entry includes your package.
|
||||
6. **Build fails in CI** – Run `./secubox-tools/local-build.sh full` locally; check for missing Makefile fields or JSON syntax errors.
|
||||
7. **ubus returns malformed JSON** – Ensure RPCD handlers call `json_init`, `json_add_*`, `json_dump` for every branch.
|
||||
8. **LuCI JS error “factory yields invalid constructor”** – API modules must export `baseclass.extend`, not plain objects; instantiate via `.new()` in views when necessary.
|
||||
9. **Device storage full** – Pre-deploy check `df -h | grep overlay`; remove `/tmp/*.ipk` or `/root/luci-backups/*` as suggested in `QUICK-START.md`.
|
||||
10. **Permissions drift after manual SCP** – Always run `./secubox-tools/fix-permissions.sh --remote <router>` after copying files outside the deploy scripts.
|
||||
@ -101,10 +101,12 @@ deploy_js_files() {
|
||||
print_success "Fichiers JS vues déployés"
|
||||
fi
|
||||
|
||||
if [ -f "$LOCAL_RESOURCES/$MODULE_NAME/api.js" ]; then
|
||||
ssh "$ROUTER" "mkdir -p $REMOTE_RESOURCES/$MODULE_NAME"
|
||||
scp -q "$LOCAL_RESOURCES/$MODULE_NAME/api.js" "$ROUTER:$REMOTE_RESOURCES/$MODULE_NAME/" 2>/dev/null || true
|
||||
print_success "API JS déployé"
|
||||
if [ -d "$LOCAL_RESOURCES/$MODULE_NAME" ]; then
|
||||
if ls "$LOCAL_RESOURCES/$MODULE_NAME"/*.js >/dev/null 2>&1; then
|
||||
ssh "$ROUTER" "mkdir -p $REMOTE_RESOURCES/$MODULE_NAME"
|
||||
scp -q "$LOCAL_RESOURCES/$MODULE_NAME/"*.js "$ROUTER:$REMOTE_RESOURCES/$MODULE_NAME/" 2>/dev/null || true
|
||||
print_success "Scripts JS partagés déployés"
|
||||
fi
|
||||
fi
|
||||
}
|
||||
|
||||
|
||||
@ -85,6 +85,11 @@ Navigate to **System → System Hub** in LuCI.
|
||||
- Upload and restore backup file
|
||||
- System reboot with confirmation
|
||||
|
||||
#### Development Status Tab (Bonus)
|
||||
- Mirrors the public `demo-dev-status` widget from secubox-website
|
||||
- Displays overall progress, milestone groups, detailed roadmap, and project stats
|
||||
- Useful to showcase transparency directly from the LuCI interface
|
||||
|
||||
### Command Line
|
||||
|
||||
#### Get System Status
|
||||
|
||||
@ -495,10 +495,69 @@ pre {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.sh-nav-tab {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.sh-nav-tab {
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* === Development Status Bonus Tab === */
|
||||
.sh-page-insight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
background: var(--sh-bg-card);
|
||||
border: 1px solid var(--sh-border);
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.sh-page-insight-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--sh-text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sh-page-insight-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--sh-text-primary);
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
|
||||
.sh-page-insight-sub {
|
||||
font-size: 13px;
|
||||
color: var(--sh-primary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.sh-dev-status-grid .sh-stat-badge {
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
.sh-dev-status-widget-shell {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sh-dev-status-widget-shell #dev-status-widget {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.sh-dev-status-note {
|
||||
margin-top: 20px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
background: var(--sh-bg-secondary);
|
||||
border: 1px dashed var(--sh-border);
|
||||
font-size: 13px;
|
||||
color: var(--sh-text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Dark Mode Overrides === */
|
||||
|
||||
@ -0,0 +1,761 @@
|
||||
'use strict';
|
||||
'require baseclass';
|
||||
/**
|
||||
* SecuBox Development Status Widget
|
||||
* Real-time development progress tracker
|
||||
*/
|
||||
|
||||
return baseclass.extend({
|
||||
// Development milestones and progress
|
||||
milestones: {
|
||||
'modules-core': {
|
||||
name: 'Core Modules',
|
||||
progress: 100,
|
||||
total: 13,
|
||||
completed: 13,
|
||||
icon: '📦',
|
||||
color: '#10b981',
|
||||
items: [
|
||||
{ name: 'Bandwidth Manager', status: 'completed' },
|
||||
{ name: 'Auth Guardian', status: 'completed' },
|
||||
{ name: 'Media Flow', status: 'completed' },
|
||||
{ name: 'VHost Manager', status: 'completed' },
|
||||
{ name: 'CrowdSec Dashboard', status: 'completed' },
|
||||
{ name: 'WireGuard Dashboard', status: 'completed' },
|
||||
{ name: 'Netdata Dashboard', status: 'completed' },
|
||||
{ name: 'Netifyd Dashboard', status: 'completed' },
|
||||
{ name: 'Client Guardian', status: 'completed' },
|
||||
{ name: 'Network Modes', status: 'completed' },
|
||||
{ name: 'Traffic Shaper', status: 'completed' },
|
||||
{ name: 'CDN Cache', status: 'completed' },
|
||||
{ name: 'SecuBox Hub', status: 'completed' }
|
||||
]
|
||||
},
|
||||
'hardware-support': {
|
||||
name: 'Hardware Support',
|
||||
progress: 95,
|
||||
total: 4,
|
||||
completed: 3,
|
||||
icon: '🔧',
|
||||
color: '#f59e0b',
|
||||
items: [
|
||||
{ name: 'ESPRESSObin Ultra', status: 'completed' },
|
||||
{ name: 'Sheeva64 (WiFi 6)', status: 'completed' },
|
||||
{ name: 'MOCHAbin (10GbE)', status: 'completed' },
|
||||
{ name: 'Performance Optimization', status: 'in-progress' }
|
||||
]
|
||||
},
|
||||
'integration': {
|
||||
name: 'Integration & Testing',
|
||||
progress: 85,
|
||||
total: 6,
|
||||
completed: 5,
|
||||
icon: '🧪',
|
||||
color: '#3b82f6',
|
||||
items: [
|
||||
{ name: 'LuCI Integration', status: 'completed' },
|
||||
{ name: 'RPCD Backends', status: 'completed' },
|
||||
{ name: 'ubus APIs', status: 'completed' },
|
||||
{ name: 'Multi-platform Build', status: 'completed' },
|
||||
{ name: 'Documentation', status: 'completed' },
|
||||
{ name: 'Beta Testing Program', status: 'in-progress' }
|
||||
]
|
||||
},
|
||||
'campaign-prep': {
|
||||
name: 'Campaign Preparation',
|
||||
progress: 70,
|
||||
total: 5,
|
||||
completed: 3,
|
||||
icon: '🚀',
|
||||
color: '#8b5cf6',
|
||||
items: [
|
||||
{ name: 'Website Multi-language', status: 'completed' },
|
||||
{ name: 'Demo Pages', status: 'completed' },
|
||||
{ name: 'Video Tutorials', status: 'in-progress' },
|
||||
{ name: 'Marketing Materials', status: 'in-progress' },
|
||||
{ name: 'Crowdfunding Setup', status: 'planned' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// Overall project statistics
|
||||
stats: {
|
||||
modulesCount: 13,
|
||||
languagesSupported: 11,
|
||||
architectures: 4,
|
||||
linesOfCode: 15000,
|
||||
contributors: 3,
|
||||
commits: 450,
|
||||
openIssues: 12,
|
||||
closedIssues: 87
|
||||
},
|
||||
|
||||
// Timeline data
|
||||
timeline: [
|
||||
{
|
||||
phase: 'Phase 1',
|
||||
name: 'Core Development',
|
||||
period: 'Q4 2024 - Q1 2025',
|
||||
status: 'completed',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
phase: 'Phase 2',
|
||||
name: 'Advanced Modules',
|
||||
period: 'Q1 - Q2 2025',
|
||||
status: 'completed',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
phase: 'Phase 3',
|
||||
name: 'Hardware Integration',
|
||||
period: 'Q2 - Q4 2025',
|
||||
status: 'in-progress',
|
||||
progress: 95
|
||||
},
|
||||
{
|
||||
phase: 'Phase 4',
|
||||
name: 'Beta Testing',
|
||||
period: 'Q1 2026',
|
||||
status: 'in-progress',
|
||||
progress: 40
|
||||
},
|
||||
{
|
||||
phase: 'Phase 5',
|
||||
name: 'Crowdfunding Campaign',
|
||||
period: 'Q2 2026',
|
||||
status: 'planned',
|
||||
progress: 20
|
||||
},
|
||||
{
|
||||
phase: 'Phase 6',
|
||||
name: 'Production & Delivery',
|
||||
period: 'Q3 - Q4 2026',
|
||||
status: 'planned',
|
||||
progress: 0
|
||||
}
|
||||
],
|
||||
|
||||
/**
|
||||
* Calculate overall progress
|
||||
*/
|
||||
getOverallProgress() {
|
||||
const milestones = Object.values(this.milestones);
|
||||
const totalProgress = milestones.reduce((sum, m) => sum + m.progress, 0);
|
||||
return Math.round(totalProgress / milestones.length);
|
||||
},
|
||||
|
||||
/**
|
||||
* Get current phase
|
||||
*/
|
||||
getCurrentPhase() {
|
||||
return this.timeline.find(p => p.status === 'in-progress') || this.timeline[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the widget
|
||||
*/
|
||||
render(containerId) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) {
|
||||
console.error(`Container #${containerId} not found`);
|
||||
return;
|
||||
}
|
||||
|
||||
const overallProgress = this.getOverallProgress();
|
||||
const currentPhase = this.getCurrentPhase();
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="dev-status-widget">
|
||||
${this.renderHeader(overallProgress, currentPhase)}
|
||||
${this.renderMilestones()}
|
||||
${this.renderTimeline()}
|
||||
${this.renderStats()}
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.addStyles();
|
||||
this.animateProgressBars();
|
||||
},
|
||||
|
||||
/**
|
||||
* Render header section
|
||||
*/
|
||||
renderHeader(progress, phase) {
|
||||
return `
|
||||
<div class="dsw-header">
|
||||
<div class="dsw-header-content">
|
||||
<h3 class="dsw-title">🚀 Development Status</h3>
|
||||
<p class="dsw-subtitle">Real-time project progress tracker</p>
|
||||
</div>
|
||||
<div class="dsw-overall-progress">
|
||||
<div class="dsw-progress-circle" data-progress="${progress}">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||
<circle class="dsw-progress-bg" cx="60" cy="60" r="54" />
|
||||
<circle class="dsw-progress-bar" cx="60" cy="60" r="54"
|
||||
style="stroke-dashoffset: ${339 - (339 * progress / 100)}" />
|
||||
</svg>
|
||||
<div class="dsw-progress-value">${progress}%</div>
|
||||
</div>
|
||||
<div class="dsw-current-phase">
|
||||
<div class="dsw-phase-label">Current Phase</div>
|
||||
<div class="dsw-phase-name">${phase.phase}: ${phase.name}</div>
|
||||
<div class="dsw-phase-period">${phase.period}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Render milestones section
|
||||
*/
|
||||
renderMilestones() {
|
||||
const milestonesHtml = Object.entries(this.milestones).map(([key, milestone]) => `
|
||||
<div class="dsw-milestone" data-key="${key}">
|
||||
<div class="dsw-milestone-header">
|
||||
<div class="dsw-milestone-info">
|
||||
<span class="dsw-milestone-icon">${milestone.icon}</span>
|
||||
<span class="dsw-milestone-name">${milestone.name}</span>
|
||||
</div>
|
||||
<div class="dsw-milestone-stats">
|
||||
<span class="dsw-milestone-count">${milestone.completed}/${milestone.total}</span>
|
||||
<span class="dsw-milestone-percent" style="color: ${milestone.color}">${milestone.progress}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dsw-progress-bar-container">
|
||||
<div class="dsw-progress-bar-fill" data-progress="${milestone.progress}"
|
||||
style="background: ${milestone.color}"></div>
|
||||
</div>
|
||||
<div class="dsw-milestone-items">
|
||||
${milestone.items.map(item => `
|
||||
<div class="dsw-item dsw-item-${item.status}">
|
||||
<span class="dsw-item-icon">${this.getStatusIcon(item.status)}</span>
|
||||
<span class="dsw-item-name">${item.name}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
return `
|
||||
<div class="dsw-milestones">
|
||||
<h4 class="dsw-section-title">Development Milestones</h4>
|
||||
<div class="dsw-milestones-grid">
|
||||
${milestonesHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Render timeline section
|
||||
*/
|
||||
renderTimeline() {
|
||||
const timelineHtml = this.timeline.map((phase, index) => `
|
||||
<div class="dsw-timeline-item dsw-timeline-${phase.status}">
|
||||
<div class="dsw-timeline-marker">
|
||||
<div class="dsw-timeline-dot"></div>
|
||||
${index < this.timeline.length - 1 ? '<div class="dsw-timeline-line"></div>' : ''}
|
||||
</div>
|
||||
<div class="dsw-timeline-content">
|
||||
<div class="dsw-timeline-header">
|
||||
<span class="dsw-timeline-phase">${phase.phase}</span>
|
||||
<span class="dsw-timeline-period">${phase.period}</span>
|
||||
</div>
|
||||
<div class="dsw-timeline-name">${phase.name}</div>
|
||||
<div class="dsw-timeline-progress">
|
||||
<div class="dsw-timeline-progress-bar">
|
||||
<div class="dsw-timeline-progress-fill" data-progress="${phase.progress}"></div>
|
||||
</div>
|
||||
<span class="dsw-timeline-progress-text">${phase.progress}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
return `
|
||||
<div class="dsw-timeline">
|
||||
<h4 class="dsw-section-title">Project Timeline</h4>
|
||||
<div class="dsw-timeline-container">
|
||||
${timelineHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Render statistics section
|
||||
*/
|
||||
renderStats() {
|
||||
return `
|
||||
<div class="dsw-stats">
|
||||
<h4 class="dsw-section-title">Project Statistics</h4>
|
||||
<div class="dsw-stats-grid">
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.modulesCount}</div>
|
||||
<div class="dsw-stat-label">Modules</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.languagesSupported}</div>
|
||||
<div class="dsw-stat-label">Languages</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.architectures}</div>
|
||||
<div class="dsw-stat-label">Architectures</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${(this.stats.linesOfCode / 1000).toFixed(1)}k</div>
|
||||
<div class="dsw-stat-label">Lines of Code</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.contributors}</div>
|
||||
<div class="dsw-stat-label">Contributors</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.commits}</div>
|
||||
<div class="dsw-stat-label">Commits</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.openIssues}</div>
|
||||
<div class="dsw-stat-label">Open Issues</div>
|
||||
</div>
|
||||
<div class="dsw-stat">
|
||||
<div class="dsw-stat-value">${this.stats.closedIssues}</div>
|
||||
<div class="dsw-stat-label">Closed Issues</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get status icon
|
||||
*/
|
||||
getStatusIcon(status) {
|
||||
const icons = {
|
||||
'completed': '✅',
|
||||
'in-progress': '🔄',
|
||||
'planned': '📋'
|
||||
};
|
||||
return icons[status] || '⚪';
|
||||
},
|
||||
|
||||
/**
|
||||
* Animate progress bars
|
||||
*/
|
||||
animateProgressBars() {
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('[data-progress]').forEach(element => {
|
||||
const progress = element.getAttribute('data-progress');
|
||||
if (element.classList.contains('dsw-progress-bar-fill')) {
|
||||
element.style.width = `${progress}%`;
|
||||
} else if (element.classList.contains('dsw-timeline-progress-fill')) {
|
||||
element.style.width = `${progress}%`;
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
},
|
||||
|
||||
/**
|
||||
* Add widget styles
|
||||
*/
|
||||
addStyles() {
|
||||
if (document.getElementById('dev-status-widget-styles')) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = 'dev-status-widget-styles';
|
||||
style.textContent = `
|
||||
.dev-status-widget {
|
||||
background: var(--sb-bg-card, #1a1a24);
|
||||
border: 1px solid var(--sb-border, #2a2a3a);
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
color: var(--sb-text, #f1f5f9);
|
||||
}
|
||||
|
||||
.dsw-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dsw-title {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #10b981, #06b6d4);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.dsw-subtitle {
|
||||
color: var(--sb-text-muted, #94a3b8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dsw-overall-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dsw-progress-circle {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.dsw-progress-circle svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.dsw-progress-bg {
|
||||
fill: none;
|
||||
stroke: var(--sb-border, #2a2a3a);
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.dsw-progress-bar {
|
||||
fill: none;
|
||||
stroke: url(#gradient);
|
||||
stroke-width: 8;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 339;
|
||||
stroke-dashoffset: 339;
|
||||
transition: stroke-dashoffset 1.5s ease-out;
|
||||
}
|
||||
|
||||
.dsw-progress-value {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--sb-green, #10b981);
|
||||
}
|
||||
|
||||
.dsw-current-phase {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dsw-phase-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
color: var(--sb-text-dim, #64748b);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.dsw-phase-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.dsw-phase-period {
|
||||
font-size: 13px;
|
||||
color: var(--sb-cyan, #06b6d4);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.dsw-section-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: var(--sb-text, #f1f5f9);
|
||||
}
|
||||
|
||||
.dsw-milestones {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.dsw-milestones-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dsw-milestone {
|
||||
background: var(--sb-bg, #0f1019);
|
||||
border: 1px solid var(--sb-border, #2a2a3a);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.dsw-milestone:hover {
|
||||
border-color: var(--sb-cyan, #06b6d4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dsw-milestone-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dsw-milestone-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dsw-milestone-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.dsw-milestone-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dsw-milestone-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dsw-milestone-count {
|
||||
color: var(--sb-text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
.dsw-milestone-percent {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dsw-progress-bar-container {
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.dsw-progress-bar-fill {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: 999px;
|
||||
transition: width 1s ease-out;
|
||||
}
|
||||
|
||||
.dsw-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dsw-item:hover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.dsw-item.dsw-item-completed {
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.dsw-item.dsw-item-in-progress {
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
.dsw-item.dsw-item-planned {
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.dsw-item-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.dsw-item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dsw-timeline {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.dsw-timeline-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.dsw-timeline-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: var(--sb-bg, #0f1019);
|
||||
border: 1px solid var(--sb-border, #2a2a3a);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.dsw-timeline-marker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dsw-timeline-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #10b981;
|
||||
background: #1a1a24;
|
||||
}
|
||||
|
||||
.dsw-timeline-line {
|
||||
flex: 1;
|
||||
width: 3px;
|
||||
background: linear-gradient(180deg, rgba(16, 185, 129, 0.5), rgba(59, 130, 246, 0.5));
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.dsw-timeline-phase {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--sb-text-dim, #64748b);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.dsw-timeline-period {
|
||||
font-size: 13px;
|
||||
color: var(--sb-cyan, #06b6d4);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.dsw-timeline-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.dsw-timeline-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dsw-timeline-progress-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: var(--sb-bg, #0f1019);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dsw-timeline-progress-fill {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(90deg, #10b981, #06b6d4);
|
||||
border-radius: 3px;
|
||||
transition: width 1s ease-out;
|
||||
}
|
||||
|
||||
.dsw-timeline-progress-text {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--sb-text-muted, #94a3b8);
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dsw-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dsw-stat {
|
||||
background: var(--sb-bg, #0f1019);
|
||||
border: 1px solid var(--sb-border, #2a2a3a);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.dsw-stat:hover {
|
||||
border-color: var(--sb-cyan, #06b6d4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.dsw-stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: var(--sb-green, #10b981);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.dsw-stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--sb-text-muted, #94a3b8);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); }
|
||||
50% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dev-status-widget {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dsw-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.dsw-overall-progress {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dsw-milestones-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.dsw-stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Add SVG gradient
|
||||
if (!document.getElementById('dsw-gradient')) {
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('width', '0');
|
||||
svg.setAttribute('height', '0');
|
||||
svg.innerHTML = `
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
`;
|
||||
svg.id = 'dsw-gradient';
|
||||
document.body.appendChild(svg);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,97 @@
|
||||
'use strict';
|
||||
'require view';
|
||||
'require system-hub/theme as Theme';
|
||||
'require system-hub/dev-status-widget as DevStatusWidget';
|
||||
|
||||
return view.extend({
|
||||
widget: null,
|
||||
|
||||
load: function() {
|
||||
return Promise.all([
|
||||
Theme.getTheme()
|
||||
]);
|
||||
},
|
||||
|
||||
getWidget: function() {
|
||||
if (!this.widget)
|
||||
this.widget = DevStatusWidget.new();
|
||||
return this.widget;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var widget = this.getWidget();
|
||||
var container = E('div', { 'class': 'system-hub-dev-status' }, [
|
||||
E('link', { 'rel': 'stylesheet', 'href': L.resource('system-hub/common.css') }),
|
||||
this.renderHeader(),
|
||||
this.renderSummaryGrid(),
|
||||
E('div', { 'class': 'sh-dev-status-widget-shell' }, [
|
||||
E('div', { 'id': 'dev-status-widget' })
|
||||
]),
|
||||
this.renderFooterNote()
|
||||
]);
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
widget.render('dev-status-widget');
|
||||
});
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
renderHeader: function() {
|
||||
var widget = this.getWidget();
|
||||
var currentPhase = widget.getCurrentPhase();
|
||||
|
||||
return E('div', { 'class': 'sh-page-header' }, [
|
||||
E('div', {}, [
|
||||
E('h2', { 'class': 'sh-page-title' }, [
|
||||
E('span', { 'class': 'sh-page-title-icon' }, '🚀'),
|
||||
'Development Status'
|
||||
]),
|
||||
E('p', { 'class': 'sh-page-subtitle' },
|
||||
'Bonus tab showcasing public roadmap & milestones from secubox-website demos')
|
||||
]),
|
||||
E('div', { 'class': 'sh-page-insight' }, [
|
||||
E('div', { 'class': 'sh-page-insight-label' }, 'Current phase'),
|
||||
E('div', { 'class': 'sh-page-insight-value' },
|
||||
currentPhase.phase + ' · ' + currentPhase.name),
|
||||
E('div', { 'class': 'sh-page-insight-sub' }, currentPhase.period)
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderSummaryGrid: function() {
|
||||
var widget = this.getWidget();
|
||||
var overallProgress = widget.getOverallProgress();
|
||||
var phase = widget.getCurrentPhase();
|
||||
var milestonesCount = Object.keys(widget.milestones || {}).length;
|
||||
|
||||
return E('div', { 'class': 'sh-stats-grid sh-dev-status-grid' }, [
|
||||
E('div', { 'class': 'sh-stat-badge' }, [
|
||||
E('div', { 'class': 'sh-stat-value', 'style': 'color:#10b981;' }, overallProgress + '%'),
|
||||
E('div', { 'class': 'sh-stat-label' }, 'Global progress')
|
||||
]),
|
||||
E('div', { 'class': 'sh-stat-badge' }, [
|
||||
E('div', { 'class': 'sh-stat-value' }, milestonesCount),
|
||||
E('div', { 'class': 'sh-stat-label' }, 'Milestone groups')
|
||||
]),
|
||||
E('div', { 'class': 'sh-stat-badge' }, [
|
||||
E('div', { 'class': 'sh-stat-value' }, widget.stats.modulesCount),
|
||||
E('div', { 'class': 'sh-stat-label' }, 'Modules livrés')
|
||||
]),
|
||||
E('div', { 'class': 'sh-stat-badge' }, [
|
||||
E('div', { 'class': 'sh-stat-value' }, (phase.status || '').replace('-', ' ')),
|
||||
E('div', { 'class': 'sh-stat-label' }, 'Phase status')
|
||||
])
|
||||
]);
|
||||
},
|
||||
|
||||
renderFooterNote: function() {
|
||||
return E('div', {
|
||||
'class': 'sh-dev-status-note'
|
||||
}, [
|
||||
E('strong', {}, 'ℹ️ Transparence SecuBox'),
|
||||
E('span', {},
|
||||
' Données synchronisées avec la page demo-dev-status du site public pour partager l\'avancement avec la communauté.')
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -80,5 +80,13 @@
|
||||
"type": "view",
|
||||
"path": "system-hub/settings"
|
||||
}
|
||||
},
|
||||
"admin/secubox/system/system-hub/dev-status": {
|
||||
"title": "Development Status",
|
||||
"order": 10,
|
||||
"action": {
|
||||
"type": "view",
|
||||
"path": "system-hub/dev-status"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user