jsgui3-server 0.0.148 → 0.0.150
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/agents/Mobile Developer.agent.md +89 -0
- package/.github/workflows/control-scan-manifest-check.yml +31 -0
- package/AGENTS.md +4 -0
- package/README.md +215 -3
- package/admin-ui/client.js +81 -51
- package/admin-ui/v1/admin_auth_service.js +197 -0
- package/admin-ui/v1/admin_user_store.js +71 -0
- package/admin-ui/v1/client.js +17 -0
- package/admin-ui/v1/controls/admin_shell.js +1399 -0
- package/admin-ui/v1/controls/group_box.js +84 -0
- package/admin-ui/v1/controls/stat_card.js +125 -0
- package/admin-ui/v1/server.js +658 -0
- package/admin-ui/v1/utils/formatters.js +68 -0
- package/dev-status.svg +139 -0
- package/docs/admin-extension-guide.md +345 -0
- package/docs/api-reference.md +301 -43
- package/docs/books/adaptive-control-improvements/01-control-candidate-matrix.md +122 -0
- package/docs/books/adaptive-control-improvements/02-tier-1-layout-playbooks.md +207 -0
- package/docs/books/adaptive-control-improvements/03-tier-2-navigation-form-overlay.md +140 -0
- package/docs/books/adaptive-control-improvements/04-cross-cutting-platform-functionality.md +141 -0
- package/docs/books/adaptive-control-improvements/05-styling-theming-density-upgrades.md +114 -0
- package/docs/books/adaptive-control-improvements/06-testing-quality-gates.md +97 -0
- package/docs/books/adaptive-control-improvements/07-delivery-roadmap-and-ownership.md +137 -0
- package/docs/books/adaptive-control-improvements/08-appendix-tier1-acceptance-and-pr-templates.md +261 -0
- package/docs/books/adaptive-control-improvements/README.md +66 -0
- package/docs/books/admin-ui-authentication/01-threat-model-and-goals.md +124 -0
- package/docs/books/admin-ui-authentication/02-session-model-and-token-model.md +75 -0
- package/docs/books/admin-ui-authentication/03-auth-middleware-patterns.md +77 -0
- package/docs/books/admin-ui-authentication/README.md +25 -0
- package/docs/books/creating-a-new-admin-ui/01-introduction-and-vision.md +130 -0
- package/docs/books/creating-a-new-admin-ui/02-architecture-and-data-flow.md +298 -0
- package/docs/books/creating-a-new-admin-ui/03-server-introspection.md +381 -0
- package/docs/books/creating-a-new-admin-ui/04-admin-module-adapter-layer.md +592 -0
- package/docs/books/creating-a-new-admin-ui/05-domain-controls-stat-cards-and-gauges.md +513 -0
- package/docs/books/creating-a-new-admin-ui/06-domain-controls-process-manager.md +544 -0
- package/docs/books/creating-a-new-admin-ui/07-domain-controls-resource-pool-inspector.md +493 -0
- package/docs/books/creating-a-new-admin-ui/08-domain-controls-route-table-and-api-explorer.md +586 -0
- package/docs/books/creating-a-new-admin-ui/09-domain-controls-log-viewer-and-activity-feed.md +490 -0
- package/docs/books/creating-a-new-admin-ui/10-domain-controls-build-status-and-bundle-inspector.md +526 -0
- package/docs/books/creating-a-new-admin-ui/11-domain-controls-configuration-panel.md +808 -0
- package/docs/books/creating-a-new-admin-ui/12-admin-shell-layout-sidebar-navigation.md +210 -0
- package/docs/books/creating-a-new-admin-ui/13-telemetry-integration.md +556 -0
- package/docs/books/creating-a-new-admin-ui/14-realtime-sse-observable-integration.md +485 -0
- package/docs/books/creating-a-new-admin-ui/15-styling-theming-aero-design-system.md +521 -0
- package/docs/books/creating-a-new-admin-ui/16-testing-and-quality-assurance.md +147 -0
- package/docs/books/creating-a-new-admin-ui/17-next-steps-process-resource-roadmap.md +356 -0
- package/docs/books/creating-a-new-admin-ui/README.md +68 -0
- package/docs/books/device-adaptive-composition/01-platform-feature-audit.md +177 -0
- package/docs/books/device-adaptive-composition/02-responsive-composition-model.md +187 -0
- package/docs/books/device-adaptive-composition/03-data-model-vs-view-model.md +231 -0
- package/docs/books/device-adaptive-composition/04-styling-theme-breakpoints.md +234 -0
- package/docs/books/device-adaptive-composition/05-showcase-app-multi-device-assessment.md +193 -0
- package/docs/books/device-adaptive-composition/06-implementation-patterns-and-apis.md +346 -0
- package/docs/books/device-adaptive-composition/07-testing-harness-and-quality-gates.md +265 -0
- package/docs/books/device-adaptive-composition/08-roadmap-and-adoption-plan.md +250 -0
- package/docs/books/device-adaptive-composition/README.md +47 -0
- package/docs/books/jsgui3-bundling-research-book/00-table-of-contents.md +35 -0
- package/docs/books/jsgui3-bundling-research-book/01-pipeline-and-runtime-semantics.md +34 -0
- package/docs/books/jsgui3-bundling-research-book/02-javascript-bundling-core.md +36 -0
- package/docs/books/jsgui3-bundling-research-book/03-style-extraction-and-css-compilation.md +35 -0
- package/docs/books/jsgui3-bundling-research-book/04-static-publishing-and-delivery.md +39 -0
- package/docs/books/jsgui3-bundling-research-book/05-current-limits-and-size-bloat-vectors.md +25 -0
- package/docs/books/jsgui3-bundling-research-book/06-unused-module-elimination-strategy.md +77 -0
- package/docs/books/jsgui3-bundling-research-book/07-jsgui3-html-control-and-mixin-pruning.md +63 -0
- package/docs/books/jsgui3-bundling-research-book/08-test-and-verification-methodology.md +43 -0
- package/docs/books/jsgui3-bundling-research-book/09-roadmap-and-rollout.md +42 -0
- package/docs/books/jsgui3-bundling-research-book/10-further-research-strategies-and-upgrades.md +211 -0
- package/docs/books/jsgui3-bundling-research-book/README.md +35 -0
- package/docs/bundling-system-deep-dive.md +9 -4
- package/docs/comparison-report-express-plex-cpanel.md +549 -0
- package/docs/comprehensive-documentation.md +49 -18
- package/docs/configuration-reference.md +152 -27
- package/docs/core/README.md +19 -0
- package/docs/core/jsgui3-server-core-book/00-table-of-contents.md +21 -0
- package/docs/core/jsgui3-server-core-book/01-startup-readiness-state-machine.md +41 -0
- package/docs/core/jsgui3-server-core-book/02-resource-abstraction-and-lifecycle.md +92 -0
- package/docs/core/jsgui3-server-core-book/03-resource-pool-and-event-topology.md +47 -0
- package/docs/core/jsgui3-server-core-book/04-sse-publisher-semantics.md +41 -0
- package/docs/core/jsgui3-server-core-book/05-serve-factory-resource-wiring.md +46 -0
- package/docs/core/jsgui3-server-core-book/06-e2e-testing-methodology.md +48 -0
- package/docs/core/jsgui3-server-core-book/07-defect-detection-and-hardening-loop.md +47 -0
- package/docs/designs/server-admin-interface-aero.svg +611 -0
- package/docs/publishers-guide.md +59 -4
- package/docs/resources-guide.md +184 -35
- package/docs/simple-server-api-design.md +72 -17
- package/docs/system-architecture.md +18 -14
- package/docs/troubleshooting.md +84 -53
- package/examples/controls/15) window, observable SSE/server.js +6 -1
- package/examples/controls/19) window, auto observable ui/server.js +9 -0
- package/examples/controls/20) window, task manager app/README.md +133 -0
- package/examples/controls/20) window, task manager app/client.js +797 -0
- package/examples/controls/20) window, task manager app/server.js +178 -0
- package/examples/controls/6) window, color_palette/client.js +165 -68
- package/examples/controls/9) window, date picker/client.js +362 -76
- package/examples/controls/9b) window, shared data.model mirrored date pickers/client.js +104 -83
- package/examples/jsgui3-html/06) theming/client.js +22 -1
- package/examples/jsgui3-html/10) binding-debugger/client.js +137 -1
- package/http/responders/static/Static_Route_HTTP_Responder.js +52 -34
- package/lab/experiments/capture-color-controls.js +196 -0
- package/lab/results/screenshots/color-controls/full_page.png +0 -0
- package/lab/results/screenshots/color-controls/section_1_color_grid_12x12.png +0 -0
- package/lab/results/screenshots/color-controls/section_2_color_grid_4x2.png +0 -0
- package/lab/results/screenshots/color-controls/section_3_color_palette.png +0 -0
- package/lab/results/screenshots/color-controls/section_4_palette_comparison.png +0 -0
- package/lab/results/screenshots/color-controls/section_5_raw_swatches.png +0 -0
- package/lab/results/screenshots/color-controls/section_6_optimized_crayola.png +0 -0
- package/lab/results/screenshots/color-controls/section_7_pastel_palette.png +0 -0
- package/lab/results/screenshots/color-controls/section_8_extended_144.png +0 -0
- package/lab/screenshot-utils.js +248 -0
- package/module.js +12 -0
- package/package.json +12 -2
- package/publishers/Publishers.js +4 -3
- package/publishers/helpers/assigners/static-compressed-response-buffers/Single_Control_Webpage_Server_Static_Compressed_Response_Buffers_Assigner.js +5 -5
- package/publishers/http-sse-publisher.js +341 -0
- package/resources/process-resource.js +950 -0
- package/resources/processors/bundlers/js/esbuild/Advanced_JS_Bundler_Using_ESBuild.js +129 -33
- package/resources/processors/bundlers/js/esbuild/Core_JS_Non_Minifying_Bundler_Using_ESBuild.js +18 -7
- package/resources/processors/bundlers/js/esbuild/JSGUI3_HTML_Control_Optimizer.js +829 -0
- package/resources/remote-process-resource.js +355 -0
- package/resources/server-resource-pool.js +354 -41
- package/serve-factory.js +442 -259
- package/server.js +288 -13
- package/tests/README.md +71 -4
- package/tests/admin-ui-jsgui-controls.test.js +581 -0
- package/tests/admin-ui-render.test.js +24 -0
- package/tests/assigners.test.js +56 -40
- package/tests/bundling-default-control-elimination.puppeteer.test.js +260 -0
- package/tests/configuration-validation.test.js +21 -18
- package/tests/content-analysis.test.js +7 -6
- package/tests/control-optimizer-cache-behavior.test.js +52 -0
- package/tests/control-scan-manifest-regression.test.js +144 -0
- package/tests/end-to-end.test.js +15 -14
- package/tests/error-handling.test.js +222 -179
- package/tests/fixtures/bundling-default-button-client.js +37 -0
- package/tests/fixtures/bundling-default-window-client.js +34 -0
- package/tests/fixtures/control_scan_manifest_expectations.json +48 -0
- package/tests/fixtures/resource-monitor-client.js +319 -0
- package/tests/helpers/puppeteer-e2e-harness.js +317 -0
- package/tests/http-sse-publisher.test.js +136 -0
- package/tests/performance.test.js +69 -65
- package/tests/process-resource.test.js +138 -0
- package/tests/publishers.test.js +7 -7
- package/tests/remote-process-resource.test.js +160 -0
- package/tests/sass-controls.e2e.test.js +7 -1
- package/tests/serve-resources.test.js +270 -0
- package/tests/serve.test.js +120 -50
- package/tests/server-resource-pool.test.js +106 -0
- package/tests/small-controls-bundle-size.test.js +252 -0
- package/tests/test-runner.js +14 -1
- package/tests/window-examples.puppeteer.test.js +204 -1
- package/tests/window-resource-integration.puppeteer.test.js +585 -0
- package/tests/temp_invalid.js +0 -7
- package/tests/temp_invalid_utf8.js +0 -1
- package/tests/temp_malformed.js +0 -10
|
@@ -0,0 +1,549 @@
|
|
|
1
|
+
# jsgui3-server Comparison Report: Express, Plex, and cPanel
|
|
2
|
+
|
|
3
|
+
**Date:** February 14, 2026
|
|
4
|
+
**Scope:** Feature comparison, architectural differences, and roadmap recommendations for jsgui3-server admin UI
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 1. Executive Summary
|
|
9
|
+
|
|
10
|
+
jsgui3-server, Express, Plex Media Server, and cPanel are fundamentally different categories of software, but each offers lessons relevant to building a server admin UI:
|
|
11
|
+
|
|
12
|
+
| Software | Category | Core Purpose |
|
|
13
|
+
|----------|----------|-------------|
|
|
14
|
+
| **jsgui3-server** | Isomorphic JS app server | Serve component-based UIs with resource management, SSE streaming, and API publishing |
|
|
15
|
+
| **Express** | HTTP framework | Minimal routing/middleware pipeline for building web applications and APIs |
|
|
16
|
+
| **Plex** | Media server + platform | Client-server media management with transcoding, library organization, and remote streaming |
|
|
17
|
+
| **cPanel/WHM** | Web hosting control panel | Full server administration GUI for web hosting (DNS, email, databases, files, security) |
|
|
18
|
+
|
|
19
|
+
jsgui3-server occupies a unique position: it's an **opinionated application server** that marries isomorphic rendering, resource lifecycle management, and real-time streaming. No single comparison target does the same thing, but each excels in areas jsgui3-server should learn from.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 2. Detailed Feature Comparison
|
|
24
|
+
|
|
25
|
+
### 2.1 HTTP & Routing
|
|
26
|
+
|
|
27
|
+
| Capability | jsgui3-server | Express | Plex | cPanel |
|
|
28
|
+
|-----------|--------------|---------|------|--------|
|
|
29
|
+
| **HTTP methods** | Implicit (routes handle all) | Full (GET/POST/PUT/DELETE/PATCH/ALL) | Internal API | Apache/Nginx managed |
|
|
30
|
+
| **Route parameters** | Basic path matching via Router | `:param`, regex, string patterns | N/A | N/A (URL rewriting via Apache) |
|
|
31
|
+
| **Middleware pipeline** | None | Core architecture — chainable `app.use()` | N/A | N/A |
|
|
32
|
+
| **Router modularity** | Single router | `express.Router()` mini-apps, mountable | N/A | N/A |
|
|
33
|
+
| **Static file serving** | Via publishers (CSS, JS, images) | `express.static()` built-in | Built-in media serving | File Manager GUI |
|
|
34
|
+
| **HTTPS** | Native with `https_options` | Via `https.createServer()` or proxy | AutoSSL via plex.tv | Let's Encrypt AutoSSL |
|
|
35
|
+
| **Request body parsing** | JSON in function publishers | `express.json()`, `express.urlencoded()` | Internal | N/A |
|
|
36
|
+
| **Error handling** | 404/500 defaults | Dedicated error middleware `(err, req, res, next)` | Graceful fallbacks | Error page customization |
|
|
37
|
+
| **CORS** | Not built-in | Via `cors` middleware | Built-in for apps | Apache config |
|
|
38
|
+
|
|
39
|
+
**Key gap in jsgui3-server:** No middleware system. Express's middleware pipeline (`app.use()`) is its defining feature — composable request processing where authentication, logging, compression, CORS, rate limiting, etc., are layered in a predictable order. jsgui3-server handles requests directly via route handlers and publishers without a composable processing pipeline.
|
|
40
|
+
|
|
41
|
+
### 2.2 Application Architecture
|
|
42
|
+
|
|
43
|
+
| Capability | jsgui3-server | Express | Plex | cPanel |
|
|
44
|
+
|-----------|--------------|---------|------|--------|
|
|
45
|
+
| **Rendering model** | Isomorphic (server-render + client-activate) | Template engines (Pug, EJS, Handlebars) or SPA | React-based web app | Perl-generated HTML panels |
|
|
46
|
+
| **Component system** | Full control lifecycle with CSS extraction | None (bring your own) | Proprietary component model | Table-based panel layout |
|
|
47
|
+
| **Auto-bundling** | ESBuild JS + CSS extraction built-in | None (use webpack/vite separately) | Webpack-based build chain | None |
|
|
48
|
+
| **Data binding** | obext Data_Object with reactive fields | None | Flux/Redux-style state | None |
|
|
49
|
+
| **Multi-page** | `pages` config in `Server.serve()` | `app.get()` per route | Tab-based navigation | Section-based panels |
|
|
50
|
+
| **Real-time** | SSE + Observable publishers | Via Socket.io/ws (third-party) | WebSocket for live updates | None |
|
|
51
|
+
| **CLI** | `cli.js serve --port --host` | Via `express-generator` scaffold | N/A | CLI via `whmapi1`, `cpapi2` |
|
|
52
|
+
|
|
53
|
+
**jsgui3-server strengths:** The isomorphic rendering model, automatic CSS extraction from control static properties, and integrated ESBuild bundling are unique. No other system here bundles the UI framework, rendering engine, and build tooling into one server.
|
|
54
|
+
|
|
55
|
+
### 2.3 Resource & Process Management
|
|
56
|
+
|
|
57
|
+
This is the most architecturally significant comparison area for your admin UI goals.
|
|
58
|
+
|
|
59
|
+
| Capability | jsgui3-server | Express | Plex | cPanel/WHM |
|
|
60
|
+
|-----------|--------------|---------|------|-----------|
|
|
61
|
+
| **Process management** | `Process_Resource` with health checks, auto-restart, exponential backoff | None | Internal service manager | `systemctl` integration, service monitoring |
|
|
62
|
+
| **Remote process monitoring** | `Remote_Process_Resource` with HTTP polling | None | Remote server discovery via plex.tv | N/A (per-server) |
|
|
63
|
+
| **Resource pooling** | `Server_Resource_Pool` with lifecycle | None | Library/scanner pool | Service pools (Apache, MySQL, Exim, etc.) |
|
|
64
|
+
| **Health checking** | Configurable intervals, failure thresholds | None | Health endpoint + plex.tv heartbeat | `chkservd` service monitor daemon |
|
|
65
|
+
| **Auto-recovery** | Restart with exponential backoff, max retries | None | Automatic scanner restart | Automatic service restart via Tailwatch |
|
|
66
|
+
| **PM2 integration** | Supported in `Process_Resource` | None (external) | N/A | N/A |
|
|
67
|
+
| **Resource events** | `state_change`, `crashed`, `unhealthy`, `recovered` | None | Push notifications | Email alerts |
|
|
68
|
+
| **File system access** | `FS_Resource` + comprehensive `fs2.js` | None built-in | Media library scanner | File Manager with full GUI |
|
|
69
|
+
| **Data resources** | `Data_Resource` wrapping objects | None | SQLite database for metadata | MySQL, PostgreSQL management |
|
|
70
|
+
| **Network info** | `Local_Server_Info_Resource` | None | UPnP, DLNA discovery | Network config panels |
|
|
71
|
+
|
|
72
|
+
**jsgui3-server's resource system is already strong** compared to Express (which has nothing) and competitive with cPanel's service management. The `Process_Resource` with health checking, auto-restart, and state events is well-designed.
|
|
73
|
+
|
|
74
|
+
### 2.4 Admin UI & Monitoring
|
|
75
|
+
|
|
76
|
+
| Capability | jsgui3-server | Express | Plex | cPanel/WHM |
|
|
77
|
+
|-----------|--------------|---------|------|-----------|
|
|
78
|
+
| **Built-in admin UI** | Basic `/admin` route with sidebar layout | None | Full web dashboard at `localhost:32400/web` | Full WHM at port 2087, cPanel at port 2083 |
|
|
79
|
+
| **Resource tree view** | API exists (`/api/admin/resources`) | None | Library tree with sections | Service tree with status indicators |
|
|
80
|
+
| **Real-time metrics** | Partial (SSE infrastructure exists) | None | Bandwidth, transcoding stats, play history | CPU, memory, disk, bandwidth graphs |
|
|
81
|
+
| **User management** | None | Via passport.js (third-party) | Multi-user with managed users, friends invites, home users | Full account CRUD, reseller tiers |
|
|
82
|
+
| **Access control** | `allowed_addresses` IP filtering | Via middleware | Auth tokens, PIN codes, sharing permissions | ACLs, feature lists, package limits |
|
|
83
|
+
| **Log viewer** | None | Via morgan/winston (third-party) | Activity log with filters | Raw log viewer, Webalizer, AWStats |
|
|
84
|
+
| **Configuration editor** | None | None | Settings panels (network, transcoding, libraries, agents) | Apache/PHP/MySQL config editors |
|
|
85
|
+
| **Backup/Restore** | None | None | None built-in (metadata DB only) | Full backup system with scheduling, remote transfer, incremental |
|
|
86
|
+
| **Notifications** | None | None | Push notifications to mobile, email | Email alerts, system notifications |
|
|
87
|
+
|
|
88
|
+
### 2.5 Security
|
|
89
|
+
|
|
90
|
+
| Capability | jsgui3-server | Express | Plex | cPanel/WHM |
|
|
91
|
+
|-----------|--------------|---------|------|-----------|
|
|
92
|
+
| **Authentication** | None built-in | passport.js, session middleware | plex.tv OAuth + token auth | PAM, OAuth, two-factor (2FA) |
|
|
93
|
+
| **Authorization** | IP filtering only | Role-based via middleware | Server owner > managed users > friends | Root > reseller > user ACL hierarchy |
|
|
94
|
+
| **Rate limiting** | None | `rate-limiter-flexible`, `express-rate-limit` | Built-in API rate limiting | cPHulk brute force protection |
|
|
95
|
+
| **Security headers** | None | Helmet middleware | Standard headers | ModSecurity WAF, CSP headers |
|
|
96
|
+
| **SSL/TLS** | `https_options` passthrough | Same | plex.tv tunnel or local cert | AutoSSL with Let's Encrypt |
|
|
97
|
+
| **Input validation** | None | Via express-validator | Internal sanitization | Input filtering |
|
|
98
|
+
| **Session management** | None | express-session, cookie-session | Token-based | Session cookies with 2FA |
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## 3. What Plex Does Well (Lessons for Admin UI)
|
|
103
|
+
|
|
104
|
+
Plex is the most relevant comparison for the *admin UI experience*, because Plex turns a complex server into something anyone can manage through a polished web interface.
|
|
105
|
+
|
|
106
|
+
### 3.1 Dashboard-First Design
|
|
107
|
+
Plex opens to a content-rich dashboard showing recent activity, currently playing items, server status, and recommendations. The admin never needs to look at a config file. **jsgui3-server's admin should do the same** — open to a live dashboard showing resource states, active SSE connections, request throughput, and errors.
|
|
108
|
+
|
|
109
|
+
### 3.2 Library/Resource Scanning
|
|
110
|
+
Plex automatically scans media libraries and gathers metadata. The equivalent for jsgui3-server is **resource discovery** — auto-detecting running processes, available ports, file system trees, and published API endpoints without manual configuration.
|
|
111
|
+
|
|
112
|
+
### 3.3 Settings Panels
|
|
113
|
+
Plex organizes settings into focused panels: General, Library, Network, Transcoder, Languages, Agents, etc. Each panel has clear labels and inline help. jsgui3-server should similarly break settings into:
|
|
114
|
+
- **Server** (port, host, debug mode, HTTPS)
|
|
115
|
+
- **Resources** (pool configuration, health check intervals)
|
|
116
|
+
- **Publishers** (bundler options, compression, minification)
|
|
117
|
+
- **Network** (allowed addresses, CORS)
|
|
118
|
+
|
|
119
|
+
### 3.4 Remote Access
|
|
120
|
+
Plex's ability to securely expose a local server to the internet via their cloud relay is a killer feature. While jsgui3-server doesn't need Plex's scale, the concept of a **tunneling/remote access toggle** in the admin UI would be valuable (perhaps integrating with tools like `localtunnel` or `ngrok`).
|
|
121
|
+
|
|
122
|
+
### 3.5 Plex Dash (Separate Admin App)
|
|
123
|
+
Plex ships a dedicated admin app (`Plex Dash`) focused purely on monitoring — active streams, bandwidth, transcoding queue, user activity. The separation between "consumer UI" and "admin UI" is clean. jsgui3-server already has this separation (`/admin` route vs. main app).
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## 4. What cPanel Does Well (Lessons for Admin UI)
|
|
128
|
+
|
|
129
|
+
cPanel is the gold standard for web server administration UIs. It's been refined over 29 years.
|
|
130
|
+
|
|
131
|
+
### 4.1 Categorized Tool Panels
|
|
132
|
+
cPanel organizes 50+ tools into logical categories:
|
|
133
|
+
- **Files:** File Manager, Disk Usage, FTP Accounts, Backups
|
|
134
|
+
- **Databases:** MySQL Databases, phpMyAdmin, Remote MySQL
|
|
135
|
+
- **Email:** Email Accounts, Forwarders, MX Entry, Spam Filters
|
|
136
|
+
- **Domains:** Subdomains, Redirects, DNS Zone Editor
|
|
137
|
+
- **Security:** SSL/TLS, IP Blocker, ModSecurity, Two-Factor Auth
|
|
138
|
+
- **Advanced:** Cron Jobs, Error Pages, Apache Handlers, MIME Types
|
|
139
|
+
- **Metrics:** Visitors, Errors, Bandwidth, Resource Usage
|
|
140
|
+
|
|
141
|
+
**For jsgui3-server**, the equivalent categories could be:
|
|
142
|
+
- **Resources:** Resource pool viewer, process manager, remote resources
|
|
143
|
+
- **Publishers:** Published endpoints, SSE channels, function APIs
|
|
144
|
+
- **Bundling:** ESBuild status, CSS extraction, source maps
|
|
145
|
+
- **Network:** Ports, addresses, HTTPS config
|
|
146
|
+
- **Monitoring:** Request logs, SSE connections, health check history
|
|
147
|
+
- **System:** Server info, Node.js version, memory/CPU, uptime
|
|
148
|
+
|
|
149
|
+
### 4.2 WHM's Tiered Access Model
|
|
150
|
+
WHM separates root admin, reseller, and end-user access. For jsgui3-server, a simpler model would suffice:
|
|
151
|
+
- **Admin:** Full server control
|
|
152
|
+
- **Viewer:** Read-only monitoring dashboard
|
|
153
|
+
|
|
154
|
+
### 4.3 Service Manager
|
|
155
|
+
cPanel's `chkservd` monitors services (Apache, MySQL, FTP, Mail) and auto-restarts them. The admin UI shows service status with green/yellow/red indicators and restart buttons. **jsgui3-server's `Process_Resource` already has the backend for this** — it just needs the UI layer.
|
|
156
|
+
|
|
157
|
+
### 4.4 Cron/Scheduled Tasks
|
|
158
|
+
cPanel's cron job editor is simple but powerful. jsgui3-server has no scheduler — adding one (as a resource type) would be valuable.
|
|
159
|
+
|
|
160
|
+
### 4.5 API Access
|
|
161
|
+
cPanel provides `UAPI`, `WHM API`, and legacy `cPanel API 2` — comprehensive APIs that parallel every UI action. jsgui3-server's admin API currently only has two endpoints (`/api/admin/resources` and `/api/admin/observables`). This needs expansion.
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
## 5. What Express Does Well (Lessons for Architecture)
|
|
166
|
+
|
|
167
|
+
Express is about **developer ergonomics** and **composability**.
|
|
168
|
+
|
|
169
|
+
### 5.1 Middleware Pattern
|
|
170
|
+
Express's middleware chain (`app.use(fn)`) is its most powerful architectural concept. Every request passes through a composable pipeline: logging → parsing → auth → CORS → routing → error handling. jsgui3-server should consider adding a **pre-route middleware hook** system, even if lightweight:
|
|
171
|
+
|
|
172
|
+
```javascript
|
|
173
|
+
server.use((req, res, next) => {
|
|
174
|
+
// logging, auth, etc.
|
|
175
|
+
next();
|
|
176
|
+
});
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### 5.2 Route Parameter Extraction
|
|
180
|
+
Express's `:param` syntax enables clean REST APIs (`/users/:userId/books/:bookId`). jsgui3-server's router currently uses fixed-path matching. Adding parameter extraction would enable richer API endpoints.
|
|
181
|
+
|
|
182
|
+
### 5.3 Response Helpers
|
|
183
|
+
Express provides `res.json()`, `res.sendFile()`, `res.redirect()`, `res.render()`, `res.download()` — convenient response utilities. jsgui3-server's publishers handle content-type-specific responses, but adding convenience methods to the response object would improve the API authoring experience.
|
|
184
|
+
|
|
185
|
+
### 5.4 Modular Routing (express.Router)
|
|
186
|
+
Express allows creating independent router modules that can be mounted at different paths. This pattern would be valuable for jsgui3-server's admin UI: the admin routes could be a self-contained router module that gets mounted at `/admin`.
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## 6. The Process vs. Resource Question
|
|
191
|
+
|
|
192
|
+
### 6.1 Current State
|
|
193
|
+
|
|
194
|
+
jsgui3-server already has a well-designed resource abstraction:
|
|
195
|
+
|
|
196
|
+
| Resource Type | Purpose |
|
|
197
|
+
|--------------|---------|
|
|
198
|
+
| `Process_Resource` | Manages local child processes (start/stop/restart, health checks, auto-recovery) |
|
|
199
|
+
| `Remote_Process_Resource` | Monitors remote HTTP processes via polling |
|
|
200
|
+
| `FS_Resource` | File system access |
|
|
201
|
+
| `Data_Resource` | Data object wrapping |
|
|
202
|
+
| `Website_Resource` | Website serving |
|
|
203
|
+
| `Local_Server_Info_Resource` | Network interface info |
|
|
204
|
+
| `Server_Resource_Pool` | Pool with lifecycle management and event forwarding |
|
|
205
|
+
|
|
206
|
+
### 6.2 Analysis: Does jsgui3-server Need a Separate "Process" Primitive?
|
|
207
|
+
|
|
208
|
+
**No. A process IS a specific type of resource, and the current design is correct.**
|
|
209
|
+
|
|
210
|
+
The existing `Process_Resource` already demonstrates this — it extends the base `Resource` class while adding process-specific lifecycle (spawn, kill, signals, PID tracking). This is the right pattern.
|
|
211
|
+
|
|
212
|
+
Here's why separating "Process" from "Resource" would be a mistake:
|
|
213
|
+
|
|
214
|
+
1. **Unified lifecycle:** All resources share `start()`, `stop()`, `restart()`, `status`. A process is just a resource whose start/stop involves spawning/killing a child process.
|
|
215
|
+
2. **Pool composability:** `Server_Resource_Pool` can manage any mix of processes, remote services, data stores, and file systems. A separate process pool would fragment management.
|
|
216
|
+
3. **Event consistency:** Resource events (`state_change`, `crashed`, `unhealthy`, `recovered`) apply equally to processes, remote services, and any future resource types.
|
|
217
|
+
4. **Admin UI simplicity:** One tree view showing all resources, regardless of type, is cleaner than separate "Processes" and "Resources" views.
|
|
218
|
+
|
|
219
|
+
### 6.3 What's Done Well Elsewhere
|
|
220
|
+
|
|
221
|
+
**Kubernetes** models everything as a Resource with a unified YAML spec:
|
|
222
|
+
```
|
|
223
|
+
apiVersion: v1
|
|
224
|
+
kind: Pod // "kind" is the resource type
|
|
225
|
+
metadata:
|
|
226
|
+
name: my-app
|
|
227
|
+
spec: // type-specific configuration
|
|
228
|
+
containers: [...]
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
**systemd** similarly treats everything as a "unit" (service, timer, mount, socket) with a common lifecycle interface and type-specific properties.
|
|
232
|
+
|
|
233
|
+
**PM2** is a pure process manager — it's good at one thing but lacks the broader resource abstraction. jsgui3-server's model is actually more powerful because it can manage processes AND other resource types.
|
|
234
|
+
|
|
235
|
+
### 6.4 Recommended New Resource Types
|
|
236
|
+
|
|
237
|
+
Rather than adding a "Process" primitive, extend the resource taxonomy:
|
|
238
|
+
|
|
239
|
+
| Proposed Resource Type | Purpose | Inspiration |
|
|
240
|
+
|-----------------------|---------|-------------|
|
|
241
|
+
| **Cron_Resource** | Scheduled task execution (like cPanel's cron editor) | cPanel, systemd timers |
|
|
242
|
+
| **Database_Resource** | Database connection pool management | cPanel MySQL, Prisma |
|
|
243
|
+
| **Log_Resource** | Log file monitoring and rotation | cPanel raw access logs, PM2 logs |
|
|
244
|
+
| **Metric_Resource** | Time-series metrics collection (CPU, memory, requests/sec) | Plex dashboard, Prometheus |
|
|
245
|
+
| **Certificate_Resource** | SSL/TLS certificate management and renewal | cPanel AutoSSL, Let's Encrypt |
|
|
246
|
+
| **Tunnel_Resource** | Remote access tunnel management | Plex remote access, ngrok |
|
|
247
|
+
| **Config_Resource** | Configuration with validation, change events, and history | cPanel config editors |
|
|
248
|
+
|
|
249
|
+
Each of these fits naturally into `Server_Resource_Pool` and inherits the base resource lifecycle.
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
## 7. Admin UI Feature Priority Recommendations
|
|
254
|
+
|
|
255
|
+
### Phase 1: Foundation (Implement First)
|
|
256
|
+
|
|
257
|
+
These features build the admin UI infrastructure and deliver immediate value.
|
|
258
|
+
|
|
259
|
+
#### 7.1 Live Resource Dashboard
|
|
260
|
+
**Priority: HIGHEST**
|
|
261
|
+
|
|
262
|
+
Display all resources in `Server_Resource_Pool` with real-time status:
|
|
263
|
+
- Resource name, type, and state (running/stopped/unhealthy) with color indicators
|
|
264
|
+
- Uptime, PID, memory usage for process resources
|
|
265
|
+
- Start/Stop/Restart action buttons
|
|
266
|
+
- Health check status and last check time
|
|
267
|
+
- Use existing SSE infrastructure to push state changes to the dashboard
|
|
268
|
+
|
|
269
|
+
**Why first:** You already have `Process_Resource` with full lifecycle, events, and health checks. The backend is 90% done — you need the UI layer.
|
|
270
|
+
|
|
271
|
+
**jsgui3-html controls to use:**
|
|
272
|
+
- `Status_Indicator` — already exists for colored state dots
|
|
273
|
+
- `Data_Table` or `Data_Grid` — already exists for resource lists
|
|
274
|
+
- `Start_Stop_Toggle_Button` — already exists for process control
|
|
275
|
+
- `Stat_Card` — already exists for metric display
|
|
276
|
+
- `Status_Dashboard` — already exists as a dashboard container
|
|
277
|
+
- `Badge` — already exists for state labels
|
|
278
|
+
|
|
279
|
+
#### 7.2 Expanded Admin API
|
|
280
|
+
**Priority: HIGH**
|
|
281
|
+
|
|
282
|
+
The current admin API has only two endpoints. Expand to:
|
|
283
|
+
|
|
284
|
+
```
|
|
285
|
+
GET /api/admin/resources — List all resources with status
|
|
286
|
+
GET /api/admin/resources/:name — Get single resource detail
|
|
287
|
+
POST /api/admin/resources/:name/start — Start a resource
|
|
288
|
+
POST /api/admin/resources/:name/stop — Stop a resource
|
|
289
|
+
POST /api/admin/resources/:name/restart — Restart a resource
|
|
290
|
+
GET /api/admin/server — Server info (uptime, port, addresses, Node version)
|
|
291
|
+
GET /api/admin/publishers — List all publishers with routes
|
|
292
|
+
GET /api/admin/routes — List all registered routes
|
|
293
|
+
GET /api/admin/sse — SSE publisher stats (connections, event counts)
|
|
294
|
+
GET /api/admin/health — Server health summary
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
#### 7.3 Server Overview Panel
|
|
298
|
+
**Priority: HIGH**
|
|
299
|
+
|
|
300
|
+
A clean dashboard showing:
|
|
301
|
+
- Server uptime and start time
|
|
302
|
+
- Node.js version, jsgui3-server version
|
|
303
|
+
- Listening addresses and ports
|
|
304
|
+
- Total resource count by type and state
|
|
305
|
+
- Active SSE connections count
|
|
306
|
+
- Published API routes list
|
|
307
|
+
|
|
308
|
+
### Phase 2: Monitoring (Implement Second)
|
|
309
|
+
|
|
310
|
+
#### 7.4 SSE Connection Monitor
|
|
311
|
+
Display active SSE connections with:
|
|
312
|
+
- Client ID and connection duration
|
|
313
|
+
- Events sent count
|
|
314
|
+
- Event history buffer status
|
|
315
|
+
- Disconnect/broadcast controls
|
|
316
|
+
|
|
317
|
+
**Why important:** SSE is a differentiating feature of jsgui3-server. Making it visible and manageable in the admin UI highlights the platform's strengths.
|
|
318
|
+
|
|
319
|
+
#### 7.5 Request Log Viewer
|
|
320
|
+
Simple log viewer showing recent HTTP requests:
|
|
321
|
+
- Timestamp, method, path, status code, response time
|
|
322
|
+
- Filter by status code range (2xx, 4xx, 5xx)
|
|
323
|
+
- Auto-scroll with pause/resume
|
|
324
|
+
- Stream via SSE for real-time updates
|
|
325
|
+
|
|
326
|
+
**jsgui3-html controls to use:** `Log_Viewer` (exists), `Search_Bar` (exists), `Filter_Chips` (exists), `Toggle_Button` (exists)
|
|
327
|
+
|
|
328
|
+
#### 7.6 Resource Event Timeline
|
|
329
|
+
Show resource lifecycle events in a timeline:
|
|
330
|
+
- State changes (started, stopped, crashed, recovered)
|
|
331
|
+
- Health check results
|
|
332
|
+
- Process restarts with backoff timing
|
|
333
|
+
|
|
334
|
+
**jsgui3-html controls to use:** `Activity_Feed` (exists — timeline with entries), `Status_Indicator` (exists), `Badge` (exists)
|
|
335
|
+
|
|
336
|
+
### Phase 3: Management (Implement Third)
|
|
337
|
+
|
|
338
|
+
#### 7.7 Process Manager Panel
|
|
339
|
+
Full process management UI:
|
|
340
|
+
- Add new `Process_Resource` via form (command, args, cwd, env vars)
|
|
341
|
+
- Edit health check configuration
|
|
342
|
+
- Set auto-restart policy
|
|
343
|
+
- Environment variable editor
|
|
344
|
+
- stdout/stderr log streaming
|
|
345
|
+
|
|
346
|
+
**jsgui3-html controls to use:** `Form_Container` + `Form_Field` (exist), `Code_Editor` (exists), `Console_Panel` (exists), `Key_Value_Table` + `Property_Editor` (exist), `Log_Viewer` (exists)
|
|
347
|
+
|
|
348
|
+
#### 7.8 Publisher Manager
|
|
349
|
+
View and manage publishers:
|
|
350
|
+
- List all registered publishers with routes and content types
|
|
351
|
+
- Function publisher test panel (input params, execute, see response)
|
|
352
|
+
- Observable publisher controls (pause/resume/inspect)
|
|
353
|
+
|
|
354
|
+
#### 7.9 Settings Panel
|
|
355
|
+
Server configuration editor:
|
|
356
|
+
- Port and host settings
|
|
357
|
+
- Debug mode toggle
|
|
358
|
+
- Bundler configuration
|
|
359
|
+
- Style configuration
|
|
360
|
+
- HTTPS certificate paths
|
|
361
|
+
- Save and restart server
|
|
362
|
+
|
|
363
|
+
### Phase 4: Advanced (Future)
|
|
364
|
+
|
|
365
|
+
#### 7.10 Remote Resource Dashboard
|
|
366
|
+
Monitor `Remote_Process_Resource` instances:
|
|
367
|
+
- Connection status with remote servers
|
|
368
|
+
- Latency graphs
|
|
369
|
+
- Aggregate health across distributed resources
|
|
370
|
+
|
|
371
|
+
#### 7.11 File System Browser
|
|
372
|
+
Leverage `FS_Resource` and `fs2.js`:
|
|
373
|
+
- Navigate server file system (restricted to configured paths)
|
|
374
|
+
- View file contents, sizes, modification dates
|
|
375
|
+
- Upload/download for specific directories
|
|
376
|
+
|
|
377
|
+
**jsgui3-html controls to use:** `File_Tree` + `File_Tree_Node` (exist — purpose-built for this), `Breadcrumbs` (exists), `Code_Editor` or `Markdown_Viewer` (exist for file preview)
|
|
378
|
+
|
|
379
|
+
#### 7.12 Authentication Layer
|
|
380
|
+
Before exposing admin functionality in production:
|
|
381
|
+
- Token-based authentication for admin API
|
|
382
|
+
- Login page for admin UI
|
|
383
|
+
- Session management
|
|
384
|
+
- Role-based access (admin vs. viewer)
|
|
385
|
+
|
|
386
|
+
---
|
|
387
|
+
|
|
388
|
+
## 8. Controls: What Already Exists in jsgui3-html vs. What's Needed
|
|
389
|
+
|
|
390
|
+
jsgui3-html (v0.0.180) already provides **180+ controls** — a comprehensive platform. The admin UI should leverage these existing controls rather than duplicating them. Here's the audit:
|
|
391
|
+
|
|
392
|
+
### Already Available in jsgui3-html (USE THESE):
|
|
393
|
+
|
|
394
|
+
| Category | Controls | Notes |
|
|
395
|
+
|----------|----------|-------|
|
|
396
|
+
| **Layout** | `Grid`, `Stack`, `Cluster`, `Split_Pane`, `Drawer`, `Center`, `Single_Line`, `Multi_Layout_Mode`, `Scroll_View` | Full responsive layout system |
|
|
397
|
+
| **Data Display** | `Data_Table`, `Data_Grid` (connected), `Data_Row`, `Key_Value_Table`, `Virtual_List`, `Virtual_Grid`, `Tree_Table` | Including virtualized variants for large datasets |
|
|
398
|
+
| **Trees** | `Tree`, `Tree_View`, `Tree_Node`, `File_Tree`, `File_Tree_Node` | Hierarchical display including file-specific variant |
|
|
399
|
+
| **Forms** | `Form_Container`, `Form_Field`, `Form_Designer`, `Text_Input`, `Number_Input`, `Password_Input`, `Email_Input`, `Tel_Input`, `Url_Input`, `Textarea`, `Checkbox`, `Radio_Button`, `Radio_Button_Group`, `Combo_Box`, `Select_Options`, `Range_Input`, `File_Upload` | 25+ input types |
|
|
400
|
+
| **Date/Time** | `Date_Picker`, `Datetime_Picker`, `Time_Picker`, `Calendar`, `Month_View`, `Timespan_Selector` | Full date/time suite |
|
|
401
|
+
| **Colors** | `Color_Picker`, `Color_Picker_Tabbed`, `Color_Grid`, `Color_Palette` | Full color selection |
|
|
402
|
+
| **Navigation** | `Breadcrumbs`, `Sidebar_Nav`, `Horizontal_Menu`, `Tabbed_Panel`, `Dropdown_Menu`, `Context_Menu`, `Popup_Menu_Button`, `Menu_Node`, `Command_Palette` | Complete navigation system |
|
|
403
|
+
| **Status & Feedback** | `Status_Indicator`, `Status_Bar`, `Status_Dashboard`, `Stat_Card`, `Badge`, `Toast`, `Alert_Banner`, `Progress_Bar`, `Skeleton_Loader`, `Indicator`, `Validation_Status_Indicator`, `Error_Summary` | Already has Status_Indicator, Stat_Card, Toast, Badge |
|
|
404
|
+
| **Buttons** | `Button`, `Icon_Button`, `Link_Button`, `Arrow_Button`, `Split_Button`, `Toggle_Button`, `Toggle_Switch`, `Start_Stop_Toggle_Button`, `Plus_Minus_Toggle_Button` | Including Start_Stop_Toggle — perfect for process control |
|
|
405
|
+
| **Overlays** | `Modal`, `Pop_Over`, `Tooltip`, `Drawer` | Full overlay system |
|
|
406
|
+
| **Charts** | `Bar_Chart`, `Line_Chart`, `Pie_Chart`, `Sparkline`, `Gauge`, `Meter` | Admin dashboard charting |
|
|
407
|
+
| **Viewers/Editors** | `Log_Viewer`, `Code_Editor`, `Markdown_Viewer`, `Rich_Text_Editor`, `Object_Editor`, `Property_Editor`, `Property_Grid`, `Property_Viewer`, `Resource_Viewer` | Log_Viewer and Resource_Viewer already exist! |
|
|
408
|
+
| **Advanced** | `Window`, `Window_Manager`, `Wizard`, `Master_Detail`, `Stepper`, `Pagination`, `Reorderable_List`, `Inline_Cell_Edit`, `Separator`, `Toolbar`, `Toolbox` | Window management, multi-step wizards |
|
|
409
|
+
| **Misc** | `Avatar`, `Chip`, `Filter_Chips`, `Rating_Stars`, `Sparkline`, `Tag_Input`, `Group_Box`, `Titled_Panel`, `Title_Bar`, `Activity_Feed`, `Console_Panel`, `Login` | Activity_Feed is ideal for event timelines |
|
|
410
|
+
|
|
411
|
+
### Key Observations — Most Admin UI Controls Already Exist:
|
|
412
|
+
|
|
413
|
+
The previous version of this report listed controls that would need to be built. In fact, **nearly all of them already exist in jsgui3-html**:
|
|
414
|
+
|
|
415
|
+
| Previously Listed as "Needed" | Actually Available |
|
|
416
|
+
|------------------------------|-------------------|
|
|
417
|
+
| `Status_Indicator` | **YES** — `Status_Indicator` exists |
|
|
418
|
+
| `Stat_Card` | **YES** — `Stat_Card` exists |
|
|
419
|
+
| `Data_Table` | **YES** — `Data_Table` + `Data_Grid` (connected) exist |
|
|
420
|
+
| `Tree_View` | **YES** — `Tree_View` + `Tree` + `File_Tree` exist |
|
|
421
|
+
| `Form` / `Form_Field` | **YES** — `Form_Container` + `Form_Field` + `Form_Designer` exist |
|
|
422
|
+
| `Modal` | **YES** — `Modal` exists |
|
|
423
|
+
| `Toast` | **YES** — `Toast` exists |
|
|
424
|
+
| `Breadcrumb` | **YES** — `Breadcrumbs` exists |
|
|
425
|
+
| `Progress_Bar` | **YES** — `Progress_Bar` exists |
|
|
426
|
+
| `Tooltip` | **YES** — `Tooltip` exists |
|
|
427
|
+
| `Badge` | **YES** — `Badge` exists |
|
|
428
|
+
| `Log_Viewer` | **YES** — `Log_Viewer` exists |
|
|
429
|
+
| `Timeline` | **YES** — `Activity_Feed` serves this purpose |
|
|
430
|
+
| `Key_Value_Editor` | **YES** — `Key_Value_Table` + `Property_Editor` exist |
|
|
431
|
+
|
|
432
|
+
### Controls to Build in jsgui3-server (domain-specific composites):
|
|
433
|
+
|
|
434
|
+
Only a handful of **server-admin-specific composites** are needed in this repo, built on top of existing jsgui3-html controls:
|
|
435
|
+
|
|
436
|
+
- **`Resource_Card`** — Composes `Stat_Card` + `Status_Indicator` + `Start_Stop_Toggle_Button` for a single resource
|
|
437
|
+
- **`Resource_List`** — Composes `Data_Table` or `Tree_View` with `Status_Indicator` per row for the resource pool
|
|
438
|
+
- **`SSE_Monitor`** — Composes `Data_Table` + `Badge` for active SSE connections
|
|
439
|
+
- **`API_Tester`** — Composes `Form_Container` + `Code_Editor` for testing function publishers
|
|
440
|
+
- **`Server_Info_Panel`** — Composes `Key_Value_Table` + `Stat_Card` for server overview
|
|
441
|
+
- **`Process_Detail`** — Composes `Property_Grid` + `Log_Viewer` + `Console_Panel` for process inspection
|
|
442
|
+
|
|
443
|
+
### Potential Enhancements to Existing jsgui3-html Controls:
|
|
444
|
+
|
|
445
|
+
Some existing controls may benefit from extensions for admin UI use cases:
|
|
446
|
+
|
|
447
|
+
| Control | Possible Enhancement |
|
|
448
|
+
|---------|---------------------|
|
|
449
|
+
| `Data_Table` / `Data_Grid` | SSE-powered live row updates, auto-refresh binding |
|
|
450
|
+
| `Log_Viewer` | SSE streaming source, auto-scroll with pause/resume, log level filtering |
|
|
451
|
+
| `Status_Indicator` | Standard state-to-color mapping (running=green, stopped=grey, error=red, unhealthy=yellow) |
|
|
452
|
+
| `Activity_Feed` | SSE event source binding for resource event timeline |
|
|
453
|
+
| `Key_Value_Table` | Inline edit mode (may already exist via `Inline_Cell_Edit`) |
|
|
454
|
+
| `Stat_Card` | Sparkline integration for trend display |
|
|
455
|
+
| `Status_Dashboard` | Configurable widget grid for custom admin dashboards |
|
|
456
|
+
|
|
457
|
+
---
|
|
458
|
+
|
|
459
|
+
## 9. Architectural Recommendations
|
|
460
|
+
|
|
461
|
+
### 9.1 Add Lightweight Middleware Support
|
|
462
|
+
Not a full Express-style pipeline, but a simple pre-route hook:
|
|
463
|
+
|
|
464
|
+
```javascript
|
|
465
|
+
// In server.js
|
|
466
|
+
server.before((req, res, next) => {
|
|
467
|
+
req.start_time = Date.now();
|
|
468
|
+
next();
|
|
469
|
+
});
|
|
470
|
+
|
|
471
|
+
server.after((req, res) => {
|
|
472
|
+
const duration = Date.now() - req.start_time;
|
|
473
|
+
emit_request_metric({ path: req.url, duration, status: res.statusCode });
|
|
474
|
+
});
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
This enables logging, auth, and metrics collection without reimplementing Express's full middleware architecture.
|
|
478
|
+
|
|
479
|
+
### 9.2 Enrich the Admin API with SSE
|
|
480
|
+
Rather than polling for resource status, the admin UI should subscribe to a dedicated admin SSE stream:
|
|
481
|
+
|
|
482
|
+
```javascript
|
|
483
|
+
// Server-side
|
|
484
|
+
server.admin_events = new HTTP_SSE_Publisher({ name: 'admin_events' });
|
|
485
|
+
|
|
486
|
+
// Forward all resource pool events
|
|
487
|
+
server.resource_pool.on('resource_state_change', (data) => {
|
|
488
|
+
server.admin_events.broadcast('resource_state_change', data);
|
|
489
|
+
});
|
|
490
|
+
|
|
491
|
+
// Client-side admin UI
|
|
492
|
+
const source = new EventSource('/api/admin/events');
|
|
493
|
+
source.addEventListener('resource_state_change', (e) => {
|
|
494
|
+
update_resource_display(JSON.parse(e.data));
|
|
495
|
+
});
|
|
496
|
+
```
|
|
497
|
+
|
|
498
|
+
### 9.3 Resource Serialization Standard
|
|
499
|
+
Every resource should implement `get_abstract()` returning a standard shape:
|
|
500
|
+
|
|
501
|
+
```javascript
|
|
502
|
+
{
|
|
503
|
+
name: 'my_process',
|
|
504
|
+
type: 'Process_Resource',
|
|
505
|
+
state: 'running',
|
|
506
|
+
uptime_ms: 345000,
|
|
507
|
+
health: { status: 'healthy', last_check: '2026-02-14T12:00:00Z' },
|
|
508
|
+
metrics: { memory_mb: 45, cpu_percent: 2.1 },
|
|
509
|
+
actions: ['stop', 'restart'], // Available actions in current state
|
|
510
|
+
meta: { /* type-specific data */ }
|
|
511
|
+
}
|
|
512
|
+
```
|
|
513
|
+
|
|
514
|
+
### 9.4 Keep the Resource Taxonomy Open
|
|
515
|
+
The resource system's extensibility is its greatest strength. Document the pattern clearly so users can create custom resource types:
|
|
516
|
+
|
|
517
|
+
```javascript
|
|
518
|
+
class My_Custom_Resource extends Resource {
|
|
519
|
+
start() { /* ... */ }
|
|
520
|
+
stop() { /* ... */ }
|
|
521
|
+
get status() { return { state: this._state, /* ... */ }; }
|
|
522
|
+
get_abstract() { return { /* ... */ }; }
|
|
523
|
+
}
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
---
|
|
527
|
+
|
|
528
|
+
## 10. Summary: What to Build First
|
|
529
|
+
|
|
530
|
+
| Priority | Feature | Effort | Impact | Dependencies |
|
|
531
|
+
|----------|---------|--------|--------|-------------|
|
|
532
|
+
| 1 | **Expanded Admin API** (10+ endpoints) | Medium | High | None |
|
|
533
|
+
| 2 | **Live Resource Dashboard** with status indicators | Medium | High | Admin API |
|
|
534
|
+
| 3 | **Admin SSE stream** for real-time updates | Low | High | SSE Publisher (exists) |
|
|
535
|
+
| 4 | **Server Overview Panel** | Low | Medium | Admin API |
|
|
536
|
+
| 5 | **Process Manager** (start/stop/restart UI) | Medium | High | Resource Dashboard |
|
|
537
|
+
| 6 | **Request logging** with SSE streaming | Medium | Medium | Admin SSE |
|
|
538
|
+
| 7 | **Publisher/Route viewer** | Low | Medium | Admin API |
|
|
539
|
+
| 8 | **Resource Event Timeline** | Medium | Medium | Admin SSE |
|
|
540
|
+
| 9 | **Settings Panel** | Medium | Medium | Config_Resource |
|
|
541
|
+
| 10 | **Authentication layer** | High | Critical (for production) | Session management |
|
|
542
|
+
|
|
543
|
+
### Bottom Line
|
|
544
|
+
|
|
545
|
+
jsgui3-server's resource abstraction is architecturally sound — **don't add a separate "Process" primitive**. Instead, extend the resource taxonomy with new types (Cron, Log, Metric, Config) and invest heavily in the admin UI that makes the existing resource system visible and manageable.
|
|
546
|
+
|
|
547
|
+
The immediate priority should be: **expand the admin API, add SSE-powered real-time status updates, and build the resource dashboard UI**. This is the highest-impact work because the backend capabilities already exist — they just need to be surfaced.
|
|
548
|
+
|
|
549
|
+
For controls, lean on jsgui3-html for general-purpose primitives (Data_Table, Tree_View, Form, Modal) and build domain-specific composites (Status_Indicator, Resource_Card, Log_Viewer, SSE_Monitor) within jsgui3-server.
|
|
@@ -15,7 +15,7 @@ This document provides detailed technical documentation for the JSGUI3 Server fr
|
|
|
15
15
|
- You're troubleshooting complex issues or performance problems
|
|
16
16
|
- You need to understand deployment, security, and production considerations
|
|
17
17
|
|
|
18
|
-
**Note:** Start with [README.md](../README.md) for project overview and basic usage. For server API design principles, see [docs/simple-server-api-design.md](docs/simple-server-api-design.md).
|
|
18
|
+
**Note:** Start with [README.md](../README.md) for project overview and basic usage. For server API design principles, see [docs/simple-server-api-design.md](docs/simple-server-api-design.md). For bundling internals and elimination strategy research, see [docs/books/jsgui3-bundling-research-book/README.md](docs/books/jsgui3-bundling-research-book/README.md).
|
|
19
19
|
|
|
20
20
|
# JSGUI3 Server - Comprehensive Documentation
|
|
21
21
|
|
|
@@ -118,8 +118,9 @@ This section is a short, task-oriented runway for AI agents that need to act qui
|
|
|
118
118
|
**Start here:**
|
|
119
119
|
1. Identify the target subsystem: examples, bundlers, publishers, or controls.
|
|
120
120
|
2. Jump to the focused guide: `docs/books/jsgui3-mvvm-fullstack/README.md`.
|
|
121
|
-
3.
|
|
122
|
-
4.
|
|
121
|
+
3. For bundle-size and pruning work, use: `docs/books/jsgui3-bundling-research-book/README.md`.
|
|
122
|
+
4. Make the smallest change that can pass a targeted test.
|
|
123
|
+
5. Run the narrow test file first, then widen if needed.
|
|
123
124
|
|
|
124
125
|
**Minimal commands:**
|
|
125
126
|
```bash
|
|
@@ -489,14 +490,16 @@ Main entry point for starting the server.
|
|
|
489
490
|
**Parameters:**
|
|
490
491
|
- `options` (object): Server configuration object
|
|
491
492
|
|
|
492
|
-
**Options:**
|
|
493
|
-
- `ctrl` or `Ctrl`: Main control class constructor
|
|
494
|
-
- `pages`: Object defining multiple pages with routes as keys
|
|
495
|
-
- `api`: Object defining API endpoints
|
|
496
|
-
- `
|
|
497
|
-
- `
|
|
498
|
-
- `
|
|
499
|
-
- `
|
|
493
|
+
**Options:**
|
|
494
|
+
- `ctrl` or `Ctrl`: Main control class constructor
|
|
495
|
+
- `pages`: Object defining multiple pages with routes as keys
|
|
496
|
+
- `api`: Object defining API endpoints
|
|
497
|
+
- `resources`: Object/array of managed resource definitions
|
|
498
|
+
- `events`: Enable/configure built-in SSE endpoint for resource lifecycle events
|
|
499
|
+
- `src_path_client_js`: Path to client-side JavaScript file
|
|
500
|
+
- `port`: Server port (default: 8080)
|
|
501
|
+
- `host`: Server host (default: all IPv4 interfaces)
|
|
502
|
+
- `debug`: Enable debug mode (default: false)
|
|
500
503
|
|
|
501
504
|
**Returns:** Promise that resolves to the server instance
|
|
502
505
|
|
|
@@ -527,17 +530,45 @@ const server = await Server.serve({
|
|
|
527
530
|
port: 3000
|
|
528
531
|
});
|
|
529
532
|
|
|
530
|
-
// With API endpoints
|
|
531
|
-
const server = await Server.serve({
|
|
532
|
-
ctrl: DashboardControl,
|
|
533
|
+
// With API endpoints
|
|
534
|
+
const server = await Server.serve({
|
|
535
|
+
ctrl: DashboardControl,
|
|
533
536
|
src_path_client_js: require.resolve('./client.js'),
|
|
534
537
|
api: {
|
|
535
538
|
'status': () => ({ uptime: process.uptime() }),
|
|
536
539
|
'users': async () => await getUsers()
|
|
537
|
-
},
|
|
538
|
-
port: 3000
|
|
539
|
-
});
|
|
540
|
-
|
|
540
|
+
},
|
|
541
|
+
port: 3000
|
|
542
|
+
});
|
|
543
|
+
|
|
544
|
+
// With managed resources and SSE lifecycle events
|
|
545
|
+
let server_with_resources;
|
|
546
|
+
server_with_resources = await Server.serve({
|
|
547
|
+
api: {
|
|
548
|
+
'resources/summary': () => server_with_resources.resource_pool.summary
|
|
549
|
+
},
|
|
550
|
+
resources: {
|
|
551
|
+
worker_direct: {
|
|
552
|
+
type: 'process',
|
|
553
|
+
command: process.execPath,
|
|
554
|
+
args: ['worker.js'],
|
|
555
|
+
autoRestart: true
|
|
556
|
+
},
|
|
557
|
+
worker_pm2: {
|
|
558
|
+
type: 'process',
|
|
559
|
+
processManager: { type: 'pm2' }, // pm2Path optional
|
|
560
|
+
command: process.execPath,
|
|
561
|
+
args: ['worker.js']
|
|
562
|
+
},
|
|
563
|
+
remote_worker: {
|
|
564
|
+
type: 'remote',
|
|
565
|
+
host: '127.0.0.1',
|
|
566
|
+
port: 3400
|
|
567
|
+
}
|
|
568
|
+
},
|
|
569
|
+
events: true // creates /events and forwards resource lifecycle events
|
|
570
|
+
});
|
|
571
|
+
```
|
|
541
572
|
|
|
542
573
|
### Publishers API
|
|
543
574
|
|