jsgui3-server 0.0.147 → 0.0.149

package/admin-ui/server.js

@@ -0,0 +1,104 @@
+const jsgui = require('./client');
+const { Admin_Page } = jsgui.controls;
+const { each } = jsgui;
+
+class Admin_Module {
+    constructor(server) {
+        this.server = server;
+        this.setup_routes();
+    }
+
+    setup_routes() {
+        const { server } = this;
+
+        // 1. Main Admin Page Route
+        // Using a custom Website_Resource for the admin app
+        // We register Admin_Page as the content control
+
+        // Manual route setup to render the page
+        // (Similar to how examples work, but integrated)
+
+        // We'll expose a 'setup' method that the main server calls
+        // Or we can attach directly if we have access to the router
+    }
+
+    // Called by the main server to attach admin functionality
+    attach_to_router(router) {
+        console.log('[Admin_Module] Attaching /admin routes...');
+
+        // API: List Resources
+        // GET /api/admin/resources
+        router.set_route('/api/admin/resources', (req, res) => {
+            const resources_data = this.get_resources_tree();
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(resources_data));
+        });
+
+        // API: List Observables
+        // GET /api/admin/observables
+        router.set_route('/api/admin/observables', (req, res) => {
+            const observables = this.get_observables_list();
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end(JSON.stringify(observables));
+        });
+    }
+
+    get_resources_tree() {
+        const pool = this.server.resource_pool;
+        const tree = {
+            name: 'Root',
+            type: 'pool',
+            children: []
+        };
+
+        if (pool && pool.resources) {
+            // Need to iterate pool resources safely
+            // resource_pool.resources is likely a Collection or array
+            const resources = pool.resources._arr || []; // Assuming Data_Structures.Collection
+
+            resources.forEach(res => {
+                tree.children.push({
+                    name: res.name || 'Unnamed Resource',
+                    type: res.constructor.name
+                });
+            });
+        }
+        return tree;
+    }
+
+    get_observables_list() {
+        // We need a way to track all published observables
+        // Ideally, HTTP_Observable_Publisher instances are stored in the resource pool or a specific list
+
+        // For now, we'll scan the router for observable publishers
+        // This relies on the server exposing its router/routes map
+        const observables = [];
+
+        // Implementation detail: server.router doesn't expose a simple list of routes easily in standard Router
+        // We might need to track them when publish_observable is called.
+        // But we can look at server.resource_pool for publishers
+
+        const pool = this.server.resource_pool;
+        if (pool && pool.resources) {
+            const resources = pool.resources._arr || [];
+            resources.forEach(res => {
+                // Check if it's an observable publisher
+                // Robust check: does it have 'obs' property and handle_http? 
+                // Or check constructor name if available
+                if (res.constructor.name === 'Observable_Publisher' || (res.obs && res.handle_http)) {
+                    observables.push({
+                        name: res.name || 'Observable',
+                        route: '?', // Route might not be stored on the resource itself, but on the router
+                        schema: res.schema,
+                        status: res.is_paused ? 'paused' : 'active',
+                        connections: res.active_sse_connections ? res.active_sse_connections.size : 0
+                    });
+                }
+            });
+        }
+
+        return observables;
+    }
+}
+
+module.exports = Admin_Module;

package/client/controls/auto-observable.js

@@ -0,0 +1,207 @@
+const jsgui = require('jsgui3-client');
+const { Control, controls } = jsgui;
+
+class Auto_Observable_UI extends Control {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'auto_observable_ui';
+        super(spec);
+        this.add_class('auto-observable-ui');
+
+        this.url = spec.url;
+        this.obs = spec.obs;
+
+        // Container for the dynamic content
+        this.content_container = new controls.div({
+            context: this.context,
+            class: 'content-container'
+        });
+        this.add(this.content_container);
+
+        // Status indicator
+        this.status_indicator = new controls.div({
+            context: this.context,
+            class: 'status-indicator status-connecting'
+        });
+        this.add(this.status_indicator);
+    }
+
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            this._connect();
+        }
+    }
+
+    _connect() {
+        let obs = this.obs;
+        if (!obs && this.url) {
+            obs = new jsgui.Remote_Observable({ url: this.url });
+            this.obs = obs;
+        }
+
+        if (!obs) return;
+
+        obs.on('connect', () => {
+            this.status_indicator.remove_class('status-connecting');
+            this.status_indicator.add_class('status-connected');
+            this.status_indicator.dom.innerText = 'Connected';
+        });
+
+        obs.on('schema', (schema) => {
+            console.log('Schema received:', schema);
+            this._build_ui_from_schema(schema);
+        });
+
+        obs.on('next', (data) => {
+            // If we haven't received a schema yet, maybe infer it or just display raw?
+            // For now, if we built the UI, we update it.
+            if (this._update_handler) {
+                this._update_handler(data);
+            } else if (!this._ui_built) {
+                // Infer simple schema if not provided?
+                // Or just show raw JSON
+                this._build_default_ui(data);
+                this._ui_built = true;
+                if (this._update_handler) this._update_handler(data);
+            }
+        });
+
+        obs.on('error', (err) => {
+            this.status_indicator.add_class('status-error');
+            this.status_indicator.dom.innerText = 'Error: ' + err.message;
+        });
+
+        obs.connect();
+    }
+
+    _build_ui_from_schema(schema) {
+        if (this._ui_built) return; // Don't rebuild for now
+        this._ui_built = true;
+
+        this.content_container.content.clear();
+
+        const type = schema.type || (schema.output_type ? schema.output_type : 'unknown');
+
+        if (type === 'int' || type === 'number') {
+            this._build_number_ui(schema);
+        } else if (type === 'text' || type === 'log') {
+            this._build_log_ui(schema);
+        } else if (type === 'percentage' || (type === 'number' && schema.min !== undefined && schema.max !== undefined)) {
+            this._build_gauge_ui(schema);
+        } else {
+            this._build_json_ui(schema);
+        }
+    }
+
+    _build_default_ui(first_data) {
+        if (typeof first_data === 'number') {
+            this._build_number_ui({ type: 'number' });
+        } else if (typeof first_data === 'string') {
+            this._build_log_ui({ type: 'text' });
+        } else {
+            this._build_json_ui({ type: 'object' });
+        }
+    }
+
+    _build_number_ui(schema) {
+        const val_div = new controls.div({
+            context: this.context,
+            class: 'value-display number-display'
+        });
+        this.content_container.add(val_div);
+
+        const label = new controls.h3({ context: this.context });
+        label.add(schema.name || 'Value');
+        val_div.add(label);
+
+        const value_text = new controls.div({ context: this.context, class: 'value-text' });
+        value_text.add('--');
+        val_div.add(value_text);
+
+        this._update_handler = (data) => {
+            let val = data;
+            if (typeof data === 'object' && data.value !== undefined) val = data.value;
+            value_text.dom.innerText = String(val);
+        };
+    }
+
+    _build_log_ui(schema) {
+        const log_container = new controls.div({
+            context: this.context,
+            class: 'value-display log-display'
+        });
+        this.content_container.add(log_container);
+
+        const label = new controls.h3({ context: this.context });
+        label.add(schema.name || 'Log');
+        log_container.add(label);
+
+        const log_area = new controls.div({ context: this.context, class: 'log-area' });
+        log_container.add(log_area);
+
+        this._update_handler = (data) => {
+            const entry = document.createElement('div');
+            entry.className = 'log-entry';
+            let msg = data;
+            if (typeof data === 'object') msg = data.message || JSON.stringify(data);
+
+            entry.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
+            log_area.dom.appendChild(entry);
+            log_area.dom.scrollTop = log_area.dom.scrollHeight;
+        };
+    }
+
+    _build_gauge_ui(schema) {
+        // Simple progress bar for now
+        const container = new controls.div({
+            context: this.context,
+            class: 'value-display gauge-display'
+        });
+        this.content_container.add(container);
+
+        const label = new controls.h3({ context: this.context });
+        label.add(schema.name || 'Gauge');
+        container.add(label);
+
+        const bar_bg = new controls.div({ context: this.context, class: 'progress-bg' });
+        const bar_fill = new controls.div({ context: this.context, class: 'progress-fill' });
+        bar_bg.add(bar_fill);
+        container.add(bar_bg);
+
+        const value_text = new controls.div({ context: this.context, class: 'value-text-small' });
+        container.add(value_text);
+
+        const min = schema.min || 0;
+        const max = schema.max || 100;
+
+        this._update_handler = (data) => {
+            let val = data;
+            if (typeof data === 'object' && data.value !== undefined) val = data.value;
+
+            const pct = Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100));
+            bar_fill.dom.style.width = pct + '%';
+            value_text.dom.innerText = `${val} / ${max}`;
+        }
+    }
+
+    _build_json_ui(schema) {
+        const container = new controls.div({
+            context: this.context,
+            class: 'value-display json-display'
+        });
+        this.content_container.add(container);
+
+        const label = new controls.h3({ context: this.context });
+        label.add(schema.name || 'Data');
+        container.add(label);
+
+        const pre = new controls.pre({ context: this.context });
+        container.add(pre);
+
+        this._update_handler = (data) => {
+            pre.dom.innerText = JSON.stringify(data, null, 2);
+        }
+    }
+}
+
+module.exports = Auto_Observable_UI;

package/dev-status.svg

@@ -0,0 +1,139 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 850" style="background:#1e1e2e; font-family: 'Segoe UI', sans-serif; color: #cdd6f4;">
+  <!-- Definitions for gradients and shadows -->
+  <defs>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="3" dy="3" stdDeviation="4" flood-color="#000000" flood-opacity="0.5"/>
+    </filter>
+    <linearGradient id="grad-server" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#313244;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#45475a;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad-client" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#181825;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#1e1e2e;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad-success" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#a6e3a1;stop-opacity:0.2" />
+      <stop offset="100%" style="stop-color:#a6e3a1;stop-opacity:0.1" />
+    </linearGradient>
+    <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
+      <path d="M0,0 L0,6 L9,3 z" fill="#89b4fa" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="50" y="50" fill="#cdd6f4" font-size="32" font-weight="bold">jsgui3-server: Dev Status & Architecture</text>
+  <text x="50" y="80" fill="#a6adc8" font-size="16">Admin UI • Auto-Observables • Defensive Programming • Server Lifecycle</text>
+
+  <!-- Areas -->
+  <rect x="50" y="110" width="500" height="700" rx="15" fill="url(#grad-server)" stroke="#585b70" stroke-width="2" />
+  <text x="70" y="140" fill="#fab387" font-size="24" font-weight="bold">Server Side (Node.js)</text>
+
+  <rect x="650" y="110" width="500" height="700" rx="15" fill="url(#grad-client)" stroke="#585b70" stroke-width="2" />
+  <text x="670" y="140" fill="#89b4fa" font-size="24" font-weight="bold">Client Side (Browser)</text>
+
+  <!-- Server Components -->
+  
+  <!-- Server Lifecycle Box -->
+  <g transform="translate(80, 180)">
+    <rect width="440" height="140" rx="8" fill="#313244" stroke="#f38ba8" stroke-width="2" stroke-dasharray="5,5" filter="url(#shadow)" />
+    <text x="15" y="30" fill="#f38ba8" font-size="18" font-weight="bold">Lifecycle Fixes</text>
+    
+    <g transform="translate(20, 50)">
+      <circle cx="10" cy="10" r="5" fill="#f38ba8" />
+      <text x="25" y="15" fill="#cdd6f4" font-size="14">1. _started Guard (Prevents double start)</text>
+    </g>
+    <g transform="translate(20, 80)">
+      <circle cx="10" cy="10" r="5" fill="#f38ba8" />
+      <text x="25" y="15" fill="#cdd6f4" font-size="14">2. Split Events: 'ready' vs 'listening'</text>
+    </g>
+     <g transform="translate(20, 110)">
+      <text x="25" y="15" fill="#a6adc8" font-size="12" font-style="italic">Fixed EADDRINUSE crash root cause</text>
+    </g>
+  </g>
+
+  <!-- Admin Module -->
+  <g transform="translate(80, 350)">
+    <rect width="200" height="120" rx="8" fill="#45475a" stroke="#89b4fa" stroke-width="2" filter="url(#shadow)" />
+    <text x="50" y="30" fill="#89b4fa" font-size="18" font-weight="bold">Admin_Module</text>
+    <line x1="10" y1="40" x2="190" y2="40" stroke="#585b70" />
+    <text x="15" y="65" fill="#cdd6f4" font-size="14">GET /api/admin/resources</text>
+    <text x="15" y="90" fill="#cdd6f4" font-size="14">GET /api/admin/observables</text>
+  </g>
+
+  <!-- Publishers -->
+  <g transform="translate(320, 350)">
+    <rect width="200" height="120" rx="8" fill="#45475a" stroke="#a6e3a1" stroke-width="2" filter="url(#shadow)" />
+    <text x="30" y="30" fill="#a6e3a1" font-size="18" font-weight="bold">Publishers</text>
+    <line x1="10" y1="40" x2="190" y2="40" stroke="#585b70" />
+    <text x="15" y="65" fill="#cdd6f4" font-size="14">HTTP_Webpage_Publisher</text>
+    <text x="15" y="90" fill="#cdd6f4" font-size="14">HTTP_Observable_Publisher</text>
+  </g>
+
+  <!-- Defensive Layers -->
+  <g transform="translate(80, 500)">
+    <rect width="440" height="100" rx="8" fill="url(#grad-success)" stroke="#a6e3a1" stroke-width="1" />
+    <text x="15" y="30" fill="#a6e3a1" font-size="18" font-weight="bold">Defensive Coding Layers</text>
+    <text x="20" y="60" fill="#cdd6f4" font-size="14">• Resource_Pool.add(undefined) → Warn & Return</text>
+    <text x="20" y="80" fill="#cdd6f4" font-size="14">• Bundler Failures → Fallback Empty Bundle</text>
+  </g>
+  
+  <!-- Bundler -->
+  <g transform="translate(80, 630)">
+    <rect width="440" height="60" rx="8" fill="#313244" stroke="#fab387" stroke-width="2" />
+    <text x="15" y="35" fill="#fab387" font-size="18" font-weight="bold">Bundler (esbuild)</text>
+    <text x="180" y="35" fill="#cdd6f4" font-size="14">Fixed: npm link jsgui3-html</text>
+  </g>
+
+
+  <!-- Client Components -->
+
+  <!-- Admin Page -->
+  <g transform="translate(680, 250)">
+    <rect width="440" height="180" rx="8" fill="#313244" stroke="#89b4fa" stroke-width="2" filter="url(#shadow)" />
+    <text x="15" y="30" fill="#89b4fa" font-size="18" font-weight="bold">Admin_Page (Client)</text>
+    <line x1="10" y1="40" x2="430" y2="40" stroke="#585b70" />
+    
+    <!-- Child Controls -->
+    <g transform="translate(20, 60)">
+      <rect width="180" height="40" rx="4" fill="#45475a" stroke="#cba6f7" stroke-width="1" />
+      <text x="35" y="25" fill="#cba6f7" font-size="14">Resource_List</text>
+    </g>
+    
+    <g transform="translate(220, 60)">
+      <rect width="180" height="40" rx="4" fill="#45475a" stroke="#cba6f7" stroke-width="1" />
+      <text x="25" y="25" fill="#cba6f7" font-size="14">Observables_List</text>
+    </g>
+    
+    <g transform="translate(120, 120)">
+      <rect width="200" height="40" rx="4" fill="#45475a" stroke="#f9e2af" stroke-width="1" />
+      <text x="30" y="25" fill="#f9e2af" font-size="14">Auto_Observable_UI</text>
+    </g>
+  </g>
+
+  <!-- Data Flow Arrows -->
+  
+  <!-- Route Info -->
+  <path d="M 280 410 L 680 300" stroke="#89b4fa" stroke-width="2" stroke-dasharray="5,5" fill="none" marker-end="url(#arrow)" />
+  <rect x="420" y="330" width="120" height="25" rx="4" fill="#1e1e2e" stroke="#89b4fa" />
+  <text x="430" y="347" fill="#89b4fa" font-size="12">JSON Data</text>
+
+  <!-- Observable Stream -->
+  <path d="M 430 470 L 800 390" stroke="#a6e3a1" stroke-width="2" fill="none" marker-end="url(#arrow)" />
+  <rect x="560" y="440" width="100" height="25" rx="4" fill="#1e1e2e" stroke="#a6e3a1" />
+  <text x="575" y="457" fill="#a6e3a1" font-size="12">SSE Steam</text>
+
+  <!-- Legend -->
+  <g transform="translate(900, 750)">
+    <text x="0" y="0" fill="#a6adc8" font-size="14" font-weight="bold">Legend</text>
+    <rect x="0" y="10" width="15" height="15" fill="#313244" stroke="#f38ba8" />
+    <text x="25" y="23" fill="#cdd6f4" font-size="12">Lifecycle Code</text>
+    
+    <rect x="0" y="35" width="15" height="15" fill="#313244" stroke="#89b4fa" />
+    <text x="25" y="48" fill="#cdd6f4" font-size="12">UI / Route Component</text>
+    
+    <rect x="0" y="60" width="15" height="15" fill="#313244" stroke="#a6e3a1" />
+    <text x="25" y="73" fill="#cdd6f4" font-size="12">Observable / Defensive</text>
+  </g>
+
+</svg>