jsgui3-server 0.0.150 → 0.0.152

package/admin-ui/v1/controls/admin_shell.js

@@ -17,29 +17,29 @@ const Stat_Card = require('./stat_card');
  * Book reference: Chapter 6 — Implementation Patterns (Admin Shell)
  * Layers: B (View Composition) + D (Concrete Render)
  */
-class Admin_Shell extends Active_HTML_Document {
-    constructor(spec = {}) {
-        spec.__type_name = spec.__type_name || 'admin_shell';
-        super(spec);
-        const { context } = this;
-
-        this._nav_items = [];
-        this._tab_items = [];
-        this._section_labels = Object.create(null);
-        this._custom_nav_items = [];
-        this._custom_nav_separator = null;
-        this._custom_sections_list = [];
-        this._client_bootstrapped = false;
-
-        if (typeof this.body.add_class === 'function') {
-            this.body.add_class('admin-shell');
-        }
+class Admin_Shell extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'admin_shell';
+        super(spec);
+        const { context } = this;
+
+        this._nav_items = [];
+        this._tab_items = [];
+        this._section_labels = Object.create(null);
+        this._custom_nav_items = [];
+        this._custom_nav_separator = null;
+        this._custom_sections_list = [];
+        this._client_bootstrapped = false;
+
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('admin-shell');
+        }
 
         const compose = () => {
-            // ─── Sidebar ─────────────────────────────────────
-            const sidebar = new controls.div({ context, 'class': 'as-sidebar' });
-            this.body.add(sidebar);
-            this._sidebar = sidebar;
+            // ─── Sidebar ─────────────────────────────────────
+            const sidebar = new controls.div({ context, 'class': 'as-sidebar' });
+            this.body.add(sidebar);
+            this._sidebar = sidebar;
 
             const brand = new controls.div({ context, 'class': 'as-brand' });
             const brand_icon = new controls.span({ context, 'class': 'as-brand-icon' });
@@ -50,11 +50,11 @@ class Admin_Shell extends Active_HTML_Document {
             brand.add(brand_text);
             sidebar.add(brand);
 
-            const nav = new controls.div({ context, 'class': 'as-nav' });
-            sidebar.add(nav);
-            this._nav = nav;
-
-            this._add_nav_item(nav, 'Dashboard', 'dashboard', true);
+            const nav = new controls.div({ context, 'class': 'as-nav' });
+            sidebar.add(nav);
+            this._nav = nav;
+
+            this._add_nav_item(nav, 'Dashboard', 'dashboard', true);
             this._add_nav_item(nav, 'Resources', 'resources');
             this._add_nav_item(nav, 'Routes', 'routes');
             this._add_nav_item(nav, 'Settings', 'settings');
@@ -75,12 +75,12 @@ class Admin_Shell extends Active_HTML_Document {
             main.add(toolbar);
 
             // Hamburger button (hidden on desktop, visible on tablet/phone)
-            const hamburger = new controls.button({ context, 'class': 'as-hamburger' });
-            hamburger.dom.attributes.type = 'button';
-            hamburger.dom.attributes['aria-label'] = 'Toggle navigation';
-            hamburger.add('\u2630');
-            toolbar.add(hamburger);
-            this._hamburger = hamburger;
+            const hamburger = new controls.button({ context, 'class': 'as-hamburger' });
+            hamburger.dom.attributes.type = 'button';
+            hamburger.dom.attributes['aria-label'] = 'Toggle navigation';
+            hamburger.add('\u2630');
+            toolbar.add(hamburger);
+            this._hamburger = hamburger;
 
             const page_title = new controls.h2({ context, 'class': 'as-page-title' });
             page_title.add('Dashboard');
@@ -94,9 +94,9 @@ class Admin_Shell extends Active_HTML_Document {
             this._status_dot = status_dot;
 
             // Sidebar overlay backdrop (for tablet/phone)
-            const overlay = new controls.div({ context, 'class': 'as-sidebar-overlay' });
-            this.body.add(overlay);
-            this._overlay = overlay;
+            const overlay = new controls.div({ context, 'class': 'as-sidebar-overlay' });
+            this.body.add(overlay);
+            this._overlay = overlay;
 
             // Content area
             const content = new controls.div({ context, 'class': 'as-content' });
@@ -130,82 +130,82 @@ class Admin_Shell extends Active_HTML_Document {
             const bottom_bar = new controls.div({ context, 'class': 'as-bottom-bar' });
             this.body.add(bottom_bar);
 
-            const tab_items = [
-                { label: '\u2302', section: 'dashboard', text: 'Home' },
-                { label: '\u25A6', section: 'resources', text: 'Resources' },
-                { label: '\u2194', section: 'routes', text: 'Routes' },
-                { label: '\u2699', section: 'settings', text: 'Settings' }
-            ];
-            tab_items.forEach(item => {
-                this._add_tab_item(bottom_bar, item, item.section === 'dashboard');
-            });
-
-            hamburger.on('click', () => this._toggle_sidebar());
-            overlay.on('click', () => this._close_sidebar());
-        };
-
-        if (!spec.el) {
-            compose();
-        }
-    }
-
-    _add_nav_item(nav, label, id, active, options = {}) {
-        const { context } = this;
-        const item = new controls.div({
-            context,
-            'class': 'as-nav-item' + (active ? ' active' : '')
-        });
-        item.dom.attributes['data-section'] = id;
-        const icon_text = options.icon ? options.icon + ' ' : '';
-        item.add(icon_text + label);
-        nav.add(item);
-
-        const nav_item_info = {
-            id,
-            label: options.title || label,
-            control: item,
-            is_custom: !!options.is_custom
-        };
-        this._section_labels[id] = nav_item_info.label;
-        this._nav_items.push(nav_item_info);
-        if (nav_item_info.is_custom) {
-            this._custom_nav_items.push(nav_item_info);
-        }
-
-        item.on('click', () => {
-            this._activate_section_from_nav(id, nav_item_info.label);
-        });
-
-        return item;
-    }
-
-    _add_tab_item(bottom_bar, item, active) {
-        const { context } = this;
-        const tab = new controls.div({ context, 'class': 'as-tab-item' + (active ? ' active' : '') });
-        tab.dom.attributes['data-section'] = item.section;
-
-        const icon = new controls.span({ context, 'class': 'as-tab-icon' });
-        icon.add(item.label);
-        tab.add(icon);
-
-        const label = new controls.span({ context, 'class': 'as-tab-label' });
-        label.add(item.text);
-        tab.add(label);
-        bottom_bar.add(tab);
-
-        this._tab_items.push({
-            id: item.section,
-            label: item.text,
-            control: tab
-        });
-
-        tab.on('click', () => {
-            this._activate_section_from_tab(item.section, item.text);
-        });
-    }
-
-    _compose_dashboard(container) {
-        const { context } = this;
+            const tab_items = [
+                { label: '\u2302', section: 'dashboard', text: 'Home' },
+                { label: '\u25A6', section: 'resources', text: 'Resources' },
+                { label: '\u2194', section: 'routes', text: 'Routes' },
+                { label: '\u2699', section: 'settings', text: 'Settings' }
+            ];
+            tab_items.forEach(item => {
+                this._add_tab_item(bottom_bar, item, item.section === 'dashboard');
+            });
+
+            hamburger.on('click', () => this._toggle_sidebar());
+            overlay.on('click', () => this._close_sidebar());
+        };
+
+        if (!spec.el) {
+            compose();
+        }
+    }
+
+    _add_nav_item(nav, label, id, active, options = {}) {
+        const { context } = this;
+        const item = new controls.div({
+            context,
+            'class': 'as-nav-item' + (active ? ' active' : '')
+        });
+        item.dom.attributes['data-section'] = id;
+        const icon_text = options.icon ? options.icon + ' ' : '';
+        item.add(icon_text + label);
+        nav.add(item);
+
+        const nav_item_info = {
+            id,
+            label: options.title || label,
+            control: item,
+            is_custom: !!options.is_custom
+        };
+        this._section_labels[id] = nav_item_info.label;
+        this._nav_items.push(nav_item_info);
+        if (nav_item_info.is_custom) {
+            this._custom_nav_items.push(nav_item_info);
+        }
+
+        item.on('click', () => {
+            this._activate_section_from_nav(id, nav_item_info.label);
+        });
+
+        return item;
+    }
+
+    _add_tab_item(bottom_bar, item, active) {
+        const { context } = this;
+        const tab = new controls.div({ context, 'class': 'as-tab-item' + (active ? ' active' : '') });
+        tab.dom.attributes['data-section'] = item.section;
+
+        const icon = new controls.span({ context, 'class': 'as-tab-icon' });
+        icon.add(item.label);
+        tab.add(icon);
+
+        const label = new controls.span({ context, 'class': 'as-tab-label' });
+        label.add(item.text);
+        tab.add(label);
+        bottom_bar.add(tab);
+
+        this._tab_items.push({
+            id: item.section,
+            label: item.text,
+            control: tab
+        });
+
+        tab.on('click', () => {
+            this._activate_section_from_tab(item.section, item.text);
+        });
+    }
+
+    _compose_dashboard(container) {
+        const { context } = this;
 
         // Server Info group
         const server_group = new Group_Box({ context, title: 'Server', 'class': 'group-box' });
@@ -258,437 +258,470 @@ class Admin_Shell extends Active_HTML_Document {
         const telemetry_group = new Group_Box({ context, title: 'Telemetry', 'class': 'group-box' });
         container.add(telemetry_group);
 
-        this._card_requests = new Stat_Card({
-            context, label: 'Requests', value: '0', detail: '0 req/min', accent: '#f093fb', 'class': 'stat_card'
-        });
-        telemetry_group.inner.add(this._card_requests);
-    }
-
-    // ─── Client-Side Activation ──────────────────────────────
-
-    activate() {
-        if (!this.__active) {
-            super.activate();
-        }
-
-        if (!this._client_bootstrapped) {
-            this._client_bootstrapped = true;
-            this._update_layout_mode();
-            if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
-                if (!this._bound_resize_handler) {
-                    this._bound_resize_handler = () => this._update_layout_mode();
-                }
-                window.addEventListener('resize', this._bound_resize_handler);
-            }
-
-            this._fetch_status();
-            this._connect_sse();
-            this._load_custom_sections();
-        }
-    }
-
-    _update_layout_mode() {
-        const has_window = typeof window !== 'undefined';
-        const w = has_window && typeof window.innerWidth === 'number'
-            ? window.innerWidth
-            : 1024;
-        let mode = 'desktop';
-        if (w <= 480) mode = 'phone';
-        else if (w <= 768) mode = 'tablet';
-        if (this.body && this.body.dom && this.body.dom.attributes) {
-            this.body.dom.attributes['data-layout-mode'] = mode;
-        }
-        if (this.body && this.body.el && typeof this.body.el.setAttribute === 'function') {
-            this.body.el.setAttribute('data-layout-mode', mode);
-        }
-        this._layout_mode = mode;
-    }
-
-    _toggle_sidebar() {
-        const sidebar = this._sidebar;
-        const overlay = this._overlay;
-        if (!sidebar) return;
-        const is_open = typeof sidebar.has_class === 'function' && sidebar.has_class('as-sidebar-open');
-        if (is_open) {
-            this._close_sidebar();
-        } else {
-            if (typeof sidebar.add_class === 'function') {
-                sidebar.add_class('as-sidebar-open');
-            }
-            if (overlay && typeof overlay.add_class === 'function') {
-                overlay.add_class('active');
-            }
-        }
-    }
-
-    _close_sidebar() {
-        if (this._sidebar && typeof this._sidebar.remove_class === 'function') {
-            this._sidebar.remove_class('as-sidebar-open');
-        }
-        if (this._overlay && typeof this._overlay.remove_class === 'function') {
-            this._overlay.remove_class('active');
-        }
-    }
-
-    _activate_section_from_nav(section_id, section_label) {
-        this._set_active_nav(section_id);
-        if (String(section_id).indexOf('custom:') === 0) {
-            this._set_active_tab(null);
-        } else {
-            this._set_active_tab(section_id);
-        }
-        this._set_page_title(section_label || this._get_section_label(section_id));
-        this._close_sidebar();
-        this._select_section(section_id);
-    }
-
-    _activate_section_from_tab(section_id, section_label) {
-        this._set_active_tab(section_id);
-        this._set_active_nav(section_id);
-        this._set_page_title(section_label || this._get_section_label(section_id));
-        this._select_section(section_id);
-    }
-
-    _set_active_nav(section_id) {
-        this._nav_items.forEach((nav_item) => {
-            if (!nav_item.control) return;
-            if (nav_item.id === section_id) {
-                nav_item.control.add_class('active');
-            } else {
-                nav_item.control.remove_class('active');
-            }
-        });
-    }
-
-    _set_active_tab(section_id) {
-        this._tab_items.forEach((tab_item) => {
-            if (!tab_item.control) return;
-            if (section_id != null && tab_item.id === section_id) {
-                tab_item.control.add_class('active');
-            } else {
-                tab_item.control.remove_class('active');
-            }
-        });
-    }
-
-    _get_section_label(section_id) {
-        return this._section_labels[section_id] || section_id;
-    }
-
-    _set_page_title(text) {
-        this._set_control_text(this._page_title, text);
-    }
-
-    _select_section(section) {
-        this._active_section = section;
-
-        const dashboard_section = this._dashboard_section;
-        const dynamic_section = this._dynamic_section;
-        if (!dashboard_section || !dynamic_section) return Promise.resolve();
-
-        if (section === 'dashboard') {
-            dashboard_section.remove_class('hidden');
-            dynamic_section.add_class('hidden');
-            this._set_status_text('Dashboard view');
-            return Promise.resolve();
-        }
-
-        dashboard_section.add_class('hidden');
-        dynamic_section.remove_class('hidden');
-
-        if (section === 'resources') {
-            return this._render_resources_section();
-        } else if (section === 'routes') {
-            return this._render_routes_section();
-        } else if (section === 'settings') {
-            return this._render_settings_section();
-        } else if (section.startsWith('custom:')) {
-            const custom_id = section.substring(7);
-            const custom = this._custom_sections_list && this._custom_sections_list.find(s => s.id === custom_id);
-            if (custom) {
-                return this._render_custom_section(custom);
-            }
-        }
-        return Promise.resolve();
-    }
-
-    _set_control_text(control, text) {
-        if (!control) return;
-        if (typeof control.clear === 'function') {
-            control.clear();
-        }
-        if (typeof control.add === 'function') {
-            control.add(String(text == null ? '' : text));
-        }
-    }
-
-    _clear_control(control) {
-        if (control && typeof control.clear === 'function') {
-            control.clear();
-        }
-    }
-
-    _render_loading(message) {
-        if (!this._dynamic_section) return;
-        this._clear_control(this._dynamic_section);
-        const panel = this._create_panel();
-        const text = new controls.div({ context: this.context, 'class': 'as-muted' });
-        text.add(String(message));
-        panel.add(text);
-        this._dynamic_section.add(panel);
-    }
-
-    _render_error(message, retry_handler) {
-        if (!this._dynamic_section) return;
-        this._clear_control(this._dynamic_section);
-
-        const panel = this._create_panel();
-        const text = new controls.div({ context: this.context, 'class': 'as-error' });
-        text.add(String(message));
-        panel.add(text);
-
-        const retry_btn = new controls.button({ context: this.context, 'class': 'as-retry-btn' });
-        retry_btn.dom.attributes.type = 'button';
-        retry_btn.add('Retry');
-        if (typeof retry_handler === 'function') {
-            retry_btn.on('click', retry_handler);
-        }
-        panel.add(retry_btn);
-
-        this._dynamic_section.add(panel);
-    }
-
-    _render_empty(message) {
-        if (!this._dynamic_section) return;
-        this._clear_control(this._dynamic_section);
-
-        const panel = this._create_panel();
-        const text = new controls.div({ context: this.context, 'class': 'as-muted' });
-        text.add(String(message));
-        panel.add(text);
-        this._dynamic_section.add(panel);
-    }
-
-    _fetch_json(url) {
-        return fetch(url).then((res) => {
-            if (!res.ok) {
-                if (res.status === 401) {
-                    this._redirect_to_login();
-                    throw new Error('Unauthorized');
-                }
-                throw new Error('HTTP ' + res.status + ' for ' + url);
-            }
-            return res.json();
-        });
-    }
-
-    _create_tag_control(tag_name, class_name) {
-        const spec = {
-            context: this.context,
-            tagName: tag_name
-        };
-        if (class_name) {
-            spec.class = class_name;
-        }
-        return new Control(spec);
-    }
-
-    _create_panel(panel_title) {
-        const panel = new controls.div({ context: this.context, 'class': 'as-panel' });
-        if (panel_title) {
-            const title = new controls.h3({ context: this.context, 'class': 'as-panel-title' });
-            title.add(String(panel_title));
-            panel.add(title);
-        }
-        return panel;
-    }
-
-    _stringify_value(value) {
-        if (value == null) return '';
-        if (typeof value === 'object') {
-            try {
-                return JSON.stringify(value);
-            } catch (err) {
-                return String(value);
-            }
-        }
-        return String(value);
-    }
-
-    _create_table_panel(panel_title, column_names, rows_data) {
-        const panel = this._create_panel(panel_title);
-
-        const table = this._create_tag_control('table', 'as-table');
-        const thead = this._create_tag_control('thead');
-        const header_row = this._create_tag_control('tr');
-
-        column_names.forEach((column_name) => {
-            const th = this._create_tag_control('th');
-            th.add(String(column_name));
-            header_row.add(th);
-        });
-        thead.add(header_row);
-        table.add(thead);
-
-        const tbody = this._create_tag_control('tbody');
-        rows_data.forEach((row_data) => {
-            const row = this._create_tag_control('tr');
-            row_data.forEach((cell_value) => {
-                const td = this._create_tag_control('td');
-                td.add(this._stringify_value(cell_value));
-                row.add(td);
-            });
-            tbody.add(row);
-        });
-        table.add(tbody);
-
-        panel.add(table);
-        return panel;
-    }
-
-    _create_kv_row(key_text, value_text) {
-        const row = new controls.div({ context: this.context, 'class': 'as-kv-row' });
-        const key = new controls.span({ context: this.context, 'class': 'as-kv-key' });
-        key.add(String(key_text));
-        const value = new controls.span({ context: this.context, 'class': 'as-kv-value' });
-        value.add(this._stringify_value(value_text));
-        row.add(key);
-        row.add(value);
-        return row;
-    }
-
-    _render_resources_section() {
-        this._render_loading('Loading resources...');
-        this._set_status_text('Loading resources');
-
-        return this._fetch_json('/api/admin/v1/resources')
-            .then((data) => {
-                if (!this._dynamic_section) return;
-
-                const children = (data && data.children) || [];
-                if (children.length === 0) {
-                    this._render_empty('No resources found.');
-                    return;
-                }
-
-                const rows_data = children.map((resource_item) => {
-                    return [
-                        resource_item.name || 'Unnamed',
-                        resource_item.type || 'Resource',
-                        resource_item.state || 'unknown'
-                    ];
-                });
-
-                this._clear_control(this._dynamic_section);
-                this._dynamic_section.add(
-                    this._create_table_panel('Resources', ['Name', 'Type', 'State'], rows_data)
-                );
-
-                this._set_status_text('Loaded resources: ' + children.length);
-            })
-            .catch((err) => {
-                console.error('[Admin] Failed to load resources:', err);
+        this._card_requests = new Stat_Card({
+            context, label: 'Requests', value: '0', detail: '0 req/min', accent: '#f093fb', 'class': 'stat_card'
+        });
+        telemetry_group.inner.add(this._card_requests);
+    }
+
+    // ─── Client-Side Activation ──────────────────────────────
+
+    activate() {
+        if (!this.__active) {
+            super.activate();
+        }
+
+        if (!this._client_bootstrapped) {
+            this._client_bootstrapped = true;
+            this._update_layout_mode();
+            if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+                if (!this._bound_resize_handler) {
+                    this._bound_resize_handler = () => this._update_layout_mode();
+                }
+                window.addEventListener('resize', this._bound_resize_handler);
+            }
+
+            this._fetch_status();
+            this._connect_sse();
+            this._load_custom_sections();
+        }
+    }
+
+    _update_layout_mode() {
+        const has_window = typeof window !== 'undefined';
+        const w = has_window && typeof window.innerWidth === 'number'
+            ? window.innerWidth
+            : 1024;
+        let mode = 'desktop';
+        if (w <= 480) mode = 'phone';
+        else if (w <= 768) mode = 'tablet';
+        if (this.body && this.body.dom && this.body.dom.attributes) {
+            this.body.dom.attributes['data-layout-mode'] = mode;
+        }
+        if (this.body && this.body.el && typeof this.body.el.setAttribute === 'function') {
+            this.body.el.setAttribute('data-layout-mode', mode);
+        }
+        this._layout_mode = mode;
+    }
+
+    _toggle_sidebar() {
+        const sidebar = this._sidebar;
+        const overlay = this._overlay;
+        if (!sidebar) return;
+        const is_open = typeof sidebar.has_class === 'function' && sidebar.has_class('as-sidebar-open');
+        if (is_open) {
+            this._close_sidebar();
+        } else {
+            if (typeof sidebar.add_class === 'function') {
+                sidebar.add_class('as-sidebar-open');
+            }
+            if (overlay && typeof overlay.add_class === 'function') {
+                overlay.add_class('active');
+            }
+        }
+    }
+
+    _close_sidebar() {
+        if (this._sidebar && typeof this._sidebar.remove_class === 'function') {
+            this._sidebar.remove_class('as-sidebar-open');
+        }
+        if (this._overlay && typeof this._overlay.remove_class === 'function') {
+            this._overlay.remove_class('active');
+        }
+    }
+
+    _activate_section_from_nav(section_id, section_label) {
+        this._set_active_nav(section_id);
+        if (String(section_id).indexOf('custom:') === 0) {
+            this._set_active_tab(null);
+        } else {
+            this._set_active_tab(section_id);
+        }
+        this._set_page_title(section_label || this._get_section_label(section_id));
+        this._close_sidebar();
+        this._select_section(section_id);
+    }
+
+    _activate_section_from_tab(section_id, section_label) {
+        this._set_active_tab(section_id);
+        this._set_active_nav(section_id);
+        this._set_page_title(section_label || this._get_section_label(section_id));
+        this._select_section(section_id);
+    }
+
+    _set_active_nav(section_id) {
+        this._nav_items.forEach((nav_item) => {
+            if (!nav_item.control) return;
+            if (nav_item.id === section_id) {
+                nav_item.control.add_class('active');
+            } else {
+                nav_item.control.remove_class('active');
+            }
+        });
+    }
+
+    _set_active_tab(section_id) {
+        this._tab_items.forEach((tab_item) => {
+            if (!tab_item.control) return;
+            if (section_id != null && tab_item.id === section_id) {
+                tab_item.control.add_class('active');
+            } else {
+                tab_item.control.remove_class('active');
+            }
+        });
+    }
+
+    _get_section_label(section_id) {
+        return this._section_labels[section_id] || section_id;
+    }
+
+    _set_page_title(text) {
+        this._set_control_text(this._page_title, text);
+    }
+
+    _select_section(section) {
+        this._active_section = section;
+
+        const dashboard_section = this._dashboard_section;
+        const dynamic_section = this._dynamic_section;
+        if (!dashboard_section || !dynamic_section) return Promise.resolve();
+
+        if (section === 'dashboard') {
+            dashboard_section.remove_class('hidden');
+            dynamic_section.add_class('hidden');
+            this._set_status_text('Dashboard view');
+            return Promise.resolve();
+        }
+
+        dashboard_section.add_class('hidden');
+        dynamic_section.remove_class('hidden');
+
+        if (section === 'resources') {
+            return this._render_resources_section();
+        } else if (section === 'routes') {
+            return this._render_routes_section();
+        } else if (section === 'settings') {
+            return this._render_settings_section();
+        } else if (section.startsWith('custom:')) {
+            const custom_id = section.substring(7);
+            const custom = this._custom_sections_list && this._custom_sections_list.find(s => s.id === custom_id);
+            if (custom) {
+                return this._render_custom_section(custom);
+            }
+        }
+        return Promise.resolve();
+    }
+
+    _set_control_text(control, text) {
+        if (!control) return;
+        if (typeof control.clear === 'function') {
+            control.clear();
+        }
+        if (typeof control.add === 'function') {
+            control.add(String(text == null ? '' : text));
+        }
+    }
+
+    _clear_control(control) {
+        if (control && typeof control.clear === 'function') {
+            control.clear();
+        }
+    }
+
+    _render_loading(message) {
+        if (!this._dynamic_section) return;
+        this._clear_control(this._dynamic_section);
+        const panel = this._create_panel();
+        const text = new controls.div({ context: this.context, 'class': 'as-muted' });
+        text.add(String(message));
+        panel.add(text);
+        this._dynamic_section.add(panel);
+    }
+
+    _render_error(message, retry_handler) {
+        if (!this._dynamic_section) return;
+        this._clear_control(this._dynamic_section);
+
+        const panel = this._create_panel();
+        const text = new controls.div({ context: this.context, 'class': 'as-error' });
+        text.add(String(message));
+        panel.add(text);
+
+        const retry_btn = new controls.button({ context: this.context, 'class': 'as-retry-btn' });
+        retry_btn.dom.attributes.type = 'button';
+        retry_btn.add('Retry');
+        if (typeof retry_handler === 'function') {
+            retry_btn.on('click', retry_handler);
+        }
+        panel.add(retry_btn);
+
+        this._dynamic_section.add(panel);
+    }
+
+    _render_empty(message) {
+        if (!this._dynamic_section) return;
+        this._clear_control(this._dynamic_section);
+
+        const panel = this._create_panel();
+        const text = new controls.div({ context: this.context, 'class': 'as-muted' });
+        text.add(String(message));
+        panel.add(text);
+        this._dynamic_section.add(panel);
+    }
+
+    _fetch_json(url) {
+        return fetch(url).then((res) => {
+            if (!res.ok) {
+                if (res.status === 401) {
+                    this._redirect_to_login();
+                    throw new Error('Unauthorized');
+                }
+                throw new Error('HTTP ' + res.status + ' for ' + url);
+            }
+            return res.json();
+        });
+    }
+
+    _create_tag_control(tag_name, class_name) {
+        const spec = {
+            context: this.context,
+            tagName: tag_name
+        };
+        if (class_name) {
+            spec.class = class_name;
+        }
+        return new Control(spec);
+    }
+
+    _create_panel(panel_title) {
+        const panel = new controls.div({ context: this.context, 'class': 'as-panel' });
+        if (panel_title) {
+            const title = new controls.h3({ context: this.context, 'class': 'as-panel-title' });
+            title.add(String(panel_title));
+            panel.add(title);
+        }
+        return panel;
+    }
+
+    _stringify_value(value) {
+        if (value == null) return '';
+        if (typeof value === 'object') {
+            try {
+                return JSON.stringify(value);
+            } catch (err) {
+                return String(value);
+            }
+        }
+        return String(value);
+    }
+
+    _create_table_panel(panel_title, column_names, rows_data) {
+        const panel = this._create_panel(panel_title);
+
+        const table = this._create_tag_control('table', 'as-table');
+        const thead = this._create_tag_control('thead');
+        const header_row = this._create_tag_control('tr');
+
+        column_names.forEach((column_name) => {
+            const th = this._create_tag_control('th');
+            th.add(String(column_name));
+            header_row.add(th);
+        });
+        thead.add(header_row);
+        table.add(thead);
+
+        const tbody = this._create_tag_control('tbody');
+        rows_data.forEach((row_data) => {
+            const row = this._create_tag_control('tr');
+            row_data.forEach((cell_value) => {
+                const td = this._create_tag_control('td');
+                td.add(this._stringify_value(cell_value));
+                row.add(td);
+            });
+            tbody.add(row);
+        });
+        table.add(tbody);
+
+        panel.add(table);
+        return panel;
+    }
+
+    _create_kv_row(key_text, value_text) {
+        const row = new controls.div({ context: this.context, 'class': 'as-kv-row' });
+        const key = new controls.span({ context: this.context, 'class': 'as-kv-key' });
+        key.add(String(key_text));
+        const value = new controls.span({ context: this.context, 'class': 'as-kv-value' });
+        value.add(this._stringify_value(value_text));
+        row.add(key);
+        row.add(value);
+        return row;
+    }
+
+    _render_resources_section() {
+        this._render_loading('Loading resources...');
+        this._set_status_text('Loading resources');
+
+        return this._fetch_json('/api/admin/v1/resources')
+            .then((data) => {
+                if (!this._dynamic_section) return;
+
+                const children = (data && data.children) || [];
+                if (children.length === 0) {
+                    this._render_empty('No resources found.');
+                    return;
+                }
+
+                const rows_data = children.map((resource_item) => {
+                    return [
+                        resource_item.name || 'Unnamed',
+                        resource_item.type || 'Resource',
+                        resource_item.state || 'unknown'
+                    ];
+                });
+
+                this._clear_control(this._dynamic_section);
+                this._dynamic_section.add(
+                    this._create_table_panel('Resources', ['Name', 'Type', 'State'], rows_data)
+                );
+
+                this._set_status_text('Loaded resources: ' + children.length);
+            })
+            .catch((err) => {
+                console.error('[Admin] Failed to load resources:', err);
                 this._render_error('Failed to load resources.', () => this._render_resources_section());
                 this._set_status_text('Error loading resources');
             });
     }
 
-    _render_routes_section() {
-        this._render_loading('Loading routes...');
-        this._set_status_text('Loading routes');
-
-        return this._fetch_json('/api/admin/v1/routes')
-            .then((routes) => {
-                if (!this._dynamic_section) return;
-
-                if (!Array.isArray(routes) || routes.length === 0) {
-                    this._render_empty('No routes found.');
-                    return;
-                }
-
-                const rows_data = routes.map((route) => {
-                    return [
-                        route.path || '',
-                        route.method || 'GET',
-                        route.type || 'route',
-                        route.handler || 'anonymous'
-                    ];
-                });
-
-                this._clear_control(this._dynamic_section);
-                this._dynamic_section.add(
-                    this._create_table_panel('Routes', ['Path', 'Method', 'Type', 'Handler'], rows_data)
-                );
-
-                this._set_status_text('Loaded routes: ' + routes.length);
-            })
-            .catch((err) => {
-                console.error('[Admin] Failed to load routes:', err);
+    _render_routes_section() {
+        this._render_loading('Loading routes...');
+        this._set_status_text('Loading routes');
+
+        return this._fetch_json('/api/admin/v1/routes')
+            .then((routes) => {
+                if (!this._dynamic_section) return;
+
+                if (!Array.isArray(routes) || routes.length === 0) {
+                    this._render_empty('No routes found.');
+                    return;
+                }
+
+                const rows_data = routes.map((route) => {
+                    return [
+                        route.path || '',
+                        route.method || 'GET',
+                        route.type || 'route',
+                        route.handler || 'anonymous'
+                    ];
+                });
+
+                this._clear_control(this._dynamic_section);
+                this._dynamic_section.add(
+                    this._create_table_panel('Routes', ['Path', 'Method', 'Type', 'Handler'], rows_data)
+                );
+
+                this._set_status_text('Loaded routes: ' + routes.length);
+            })
+            .catch((err) => {
+                console.error('[Admin] Failed to load routes:', err);
                 this._render_error('Failed to load routes.', () => this._render_routes_section());
                 this._set_status_text('Error loading routes');
             });
     }
 
-    _render_settings_section() {
-        this._render_loading('Loading settings snapshot...');
-        this._set_status_text('Loading settings snapshot');
-
-        return this._fetch_json('/api/admin/v1/status')
-            .then((status) => {
-                if (!this._dynamic_section) return;
-
-                const server_name = (status && status.server && status.server.name) || 'jsgui3-server';
-                const node_version = (status && status.process && status.process.node_version) || 'unknown';
-                const platform = (status && status.process && status.process.platform) || 'unknown';
-                const arch = (status && status.process && status.process.arch) || 'unknown';
-
-                const panel = this._create_panel('Settings (Read-only)');
-                panel.add(this._create_kv_row('Server Name', server_name));
-                panel.add(this._create_kv_row('Node Version', node_version));
-                panel.add(this._create_kv_row('Platform', platform + ' / ' + arch));
-
-                const logout_btn = new controls.button({ context: this.context, 'class': 'as-logout-btn' });
-                logout_btn.dom.attributes.type = 'button';
-                logout_btn.add('Log Out');
-                logout_btn.on('click', () => {
-                    fetch('/api/admin/v1/auth/logout', {
-                        method: 'POST',
-                        credentials: 'same-origin'
-                    }).finally(() => {
-                        this._redirect_to_login();
-                    });
-                });
-                panel.add(logout_btn);
-
-                const muted = new controls.div({ context: this.context, 'class': 'as-muted' });
-                muted.add('Authentication and write-actions are intentionally not enabled yet.');
-                panel.add(muted);
-
-                this._clear_control(this._dynamic_section);
-                this._dynamic_section.add(panel);
-
-                this._set_status_text('Loaded settings snapshot');
-            })
-            .catch((err) => {
-                console.error('[Admin] Failed to load settings snapshot:', err);
+    _render_settings_section() {
+        this._render_loading('Loading settings snapshot...');
+        this._set_status_text('Loading settings snapshot');
+
+        return this._fetch_json('/api/admin/v1/status')
+            .then((status) => {
+                if (!this._dynamic_section) return;
+
+                const server_name = (status && status.server && status.server.name) || 'jsgui3-server';
+                const node_version = (status && status.process && status.process.node_version) || 'unknown';
+                const platform = (status && status.process && status.process.platform) || 'unknown';
+                const arch = (status && status.process && status.process.arch) || 'unknown';
+
+                const panel = this._create_panel('Settings (Read-only)');
+                panel.add(this._create_kv_row('Server Name', server_name));
+                panel.add(this._create_kv_row('Node Version', node_version));
+                panel.add(this._create_kv_row('Platform', platform + ' / ' + arch));
+
+                const primary_endpoint = (status && status.server && status.server.primary_endpoint) || '—';
+                const listening_endpoints = (status && status.server && status.server.listening_endpoints) || [];
+                const startup_diagnostics = (status && status.server && status.server.startup_diagnostics) || null;
+
+                const startup_panel = this._create_panel('Startup & Network');
+                startup_panel.add(this._create_kv_row('Primary Endpoint', primary_endpoint));
+                startup_panel.add(this._create_kv_row('Listening Endpoints', listening_endpoints.length));
+
+                if (Array.isArray(listening_endpoints) && listening_endpoints.length > 0) {
+                    const endpoints_list = new controls.div({ context: this.context, 'class': 'as-kv-stack' });
+                    listening_endpoints.forEach((endpoint, index) => {
+                        const endpoint_url = endpoint && endpoint.url ? endpoint.url : '';
+                        endpoints_list.add(this._create_kv_row('Endpoint ' + (index + 1), endpoint_url));
+                    });
+                    startup_panel.add(endpoints_list);
+                }
+
+                if (startup_diagnostics) {
+                    startup_panel.add(this._create_kv_row('Requested Port', startup_diagnostics.requested_port));
+                    if (startup_diagnostics.fallback_port) {
+                        startup_panel.add(this._create_kv_row('Fallback Port', startup_diagnostics.fallback_port));
+                    }
+                    if (startup_diagnostics.fallback_host) {
+                        startup_panel.add(this._create_kv_row('Fallback Host', startup_diagnostics.fallback_host));
+                    }
+                    const attempted = Array.isArray(startup_diagnostics.addresses_attempted)
+                        ? startup_diagnostics.addresses_attempted.join(', ')
+                        : '';
+                    startup_panel.add(this._create_kv_row('Addresses Attempted', attempted || '—'));
+                }
+
+                panel.add(startup_panel);
+
+                const logout_btn = new controls.button({ context: this.context, 'class': 'as-logout-btn' });
+                logout_btn.dom.attributes.type = 'button';
+                logout_btn.add('Log Out');
+                logout_btn.on('click', () => {
+                    fetch('/api/admin/v1/auth/logout', {
+                        method: 'POST',
+                        credentials: 'same-origin'
+                    }).finally(() => {
+                        this._redirect_to_login();
+                    });
+                });
+                panel.add(logout_btn);
+
+                const muted = new controls.div({ context: this.context, 'class': 'as-muted' });
+                muted.add('Authentication and write-actions are intentionally not enabled yet.');
+                panel.add(muted);
+
+                this._clear_control(this._dynamic_section);
+                this._dynamic_section.add(panel);
+
+                this._set_status_text('Loaded settings snapshot');
+            })
+            .catch((err) => {
+                console.error('[Admin] Failed to load settings snapshot:', err);
                 this._render_error('Failed to load settings snapshot.', () => this._render_settings_section());
                 this._set_status_text('Error loading settings snapshot');
-            });
-    }
-
-    _redirect_to_login() {
-        if (typeof window !== 'undefined' && window.location) {
-            window.location.href = '/admin/v1/login';
-        }
-    }
-
-    _fetch_status() {
-        return this._fetch_json('/api/admin/v1/status')
-            .then(data => {
-                this._apply_status(data);
-                this._set_status_text('Connected — data loaded');
-            })
-            .catch(err => {
+            });
+    }
+
+    _redirect_to_login() {
+        if (typeof window !== 'undefined' && window.location) {
+            window.location.href = '/admin/v1/login';
+        }
+    }
+
+    _fetch_status() {
+        return this._fetch_json('/api/admin/v1/status')
+            .then(data => {
+                this._apply_status(data);
+                this._set_status_text('Connected — data loaded');
+            })
+            .catch(err => {
                 console.error('[Admin] Failed to fetch status:', err);
                 this._set_status_text('Error loading status');
             });
@@ -798,22 +831,22 @@ class Admin_Shell extends Active_HTML_Document {
                 }
             });
 
-            es.addEventListener('open', () => {
-                // Reset backoff on successful connection
-                this._sse_backoff = 1000;
-                this._set_status_text('Live — SSE connected');
-                if (this._status_dot) {
-                    this._status_dot.add_class('online');
-                    this._status_dot.remove_class('offline');
-                }
-            });
-
-            es.addEventListener('error', () => {
-                this._set_status_text('SSE disconnected — reconnecting...');
-                if (this._status_dot) {
-                    this._status_dot.add_class('offline');
-                    this._status_dot.remove_class('online');
-                }
+            es.addEventListener('open', () => {
+                // Reset backoff on successful connection
+                this._sse_backoff = 1000;
+                this._set_status_text('Live — SSE connected');
+                if (this._status_dot) {
+                    this._status_dot.add_class('online');
+                    this._status_dot.remove_class('offline');
+                }
+            });
+
+            es.addEventListener('error', () => {
+                this._set_status_text('SSE disconnected — reconnecting...');
+                if (this._status_dot) {
+                    this._status_dot.add_class('offline');
+                    this._status_dot.remove_class('online');
+                }
 
                 // Close and reconnect with backoff
                 es.close();
@@ -892,9 +925,9 @@ class Admin_Shell extends Active_HTML_Document {
         this._set_status_text('Live — last update ' + hh + ':' + mm + ':' + ss);
     }
 
-    _set_status_text(text) {
-        this._set_control_text(this._status_text, text);
-    }
+    _set_status_text(text) {
+        this._set_control_text(this._status_text, text);
+    }
 
     // ─── Custom Sections (Extensibility) ─────────────────
 
@@ -904,91 +937,91 @@ class Admin_Shell extends Active_HTML_Document {
      * click handler that fetches data from its api_path and renders
      * it using automatic table/key-value rendering.
      */
-    _load_custom_sections() {
-        this._custom_sections_list = [];
-
-        return this._fetch_json('/api/admin/v1/custom-sections')
-            .then(sections => {
-                this._remove_custom_nav_items();
-                if (!Array.isArray(sections) || sections.length === 0) return;
-
-                this._custom_sections_list = sections;
-                if (!this._nav) return;
-
-                this._ensure_custom_nav_separator();
-
-                sections.forEach(section => {
-                    const section_id = 'custom:' + section.id;
-                    const item = this._add_nav_item(
-                        this._nav,
-                        section.label || section.id,
-                        section_id,
-                        false,
-                        {
-                            icon: section.icon || '',
-                            title: section.label || section.id,
-                            is_custom: true
-                        }
-                    );
-                    if (this.__active && typeof item.activate === 'function') {
-                        item.activate();
-                    }
-                });
-            })
-            .catch(err => {
-                console.warn('[Admin] Failed to load custom sections:', err);
-            });
-    }
-
-    _remove_custom_nav_items() {
-        const custom_ids = this._custom_nav_items.map((custom_item) => custom_item.id);
-        this._custom_nav_items.forEach((custom_item) => {
-            if (custom_item.control && typeof custom_item.control.remove === 'function') {
-                custom_item.control.remove();
-            }
-        });
-        this._custom_nav_items = [];
-
-        this._nav_items = this._nav_items.filter((nav_item) => !nav_item.is_custom);
-        custom_ids.forEach((custom_id) => {
-            delete this._section_labels[custom_id];
-        });
-
-        if (this._custom_nav_separator && typeof this._custom_nav_separator.remove === 'function') {
-            this._custom_nav_separator.remove();
-            this._custom_nav_separator = null;
-        }
-    }
-
-    _ensure_custom_nav_separator() {
-        if (this._custom_nav_separator || !this._nav) return;
-        const separator = new controls.div({ context: this.context, 'class': 'as-nav-separator' });
-        this._nav.add(separator);
-        this._custom_nav_separator = separator;
-        if (this.__active && typeof separator.activate === 'function') {
-            separator.activate();
-        }
-    }
+    _load_custom_sections() {
+        this._custom_sections_list = [];
+
+        return this._fetch_json('/api/admin/v1/custom-sections')
+            .then(sections => {
+                this._remove_custom_nav_items();
+                if (!Array.isArray(sections) || sections.length === 0) return;
+
+                this._custom_sections_list = sections;
+                if (!this._nav) return;
+
+                this._ensure_custom_nav_separator();
+
+                sections.forEach(section => {
+                    const section_id = 'custom:' + section.id;
+                    const item = this._add_nav_item(
+                        this._nav,
+                        section.label || section.id,
+                        section_id,
+                        false,
+                        {
+                            icon: section.icon || '',
+                            title: section.label || section.id,
+                            is_custom: true
+                        }
+                    );
+                    if (this.__active && typeof item.activate === 'function') {
+                        item.activate();
+                    }
+                });
+            })
+            .catch(err => {
+                console.warn('[Admin] Failed to load custom sections:', err);
+            });
+    }
+
+    _remove_custom_nav_items() {
+        const custom_ids = this._custom_nav_items.map((custom_item) => custom_item.id);
+        this._custom_nav_items.forEach((custom_item) => {
+            if (custom_item.control && typeof custom_item.control.remove === 'function') {
+                custom_item.control.remove();
+            }
+        });
+        this._custom_nav_items = [];
+
+        this._nav_items = this._nav_items.filter((nav_item) => !nav_item.is_custom);
+        custom_ids.forEach((custom_id) => {
+            delete this._section_labels[custom_id];
+        });
+
+        if (this._custom_nav_separator && typeof this._custom_nav_separator.remove === 'function') {
+            this._custom_nav_separator.remove();
+            this._custom_nav_separator = null;
+        }
+    }
+
+    _ensure_custom_nav_separator() {
+        if (this._custom_nav_separator || !this._nav) return;
+        const separator = new controls.div({ context: this.context, 'class': 'as-nav-separator' });
+        this._nav.add(separator);
+        this._custom_nav_separator = separator;
+        if (this.__active && typeof separator.activate === 'function') {
+            separator.activate();
+        }
+    }
 
     /**
      * Render a custom section by fetching its data endpoint.
      * Arrays are rendered as tables, objects as key-value panels,
      * scalars as plain text.
      */
-    _render_custom_section(section) {
-        if (!this._dashboard_section || !this._dynamic_section) return Promise.resolve();
-
-        this._dashboard_section.add_class('hidden');
-        this._dynamic_section.remove_class('hidden');
-
-        this._render_loading('Loading ' + section.label + '...');
-        this._set_status_text('Loading ' + section.label);
-
-        return this._fetch_json(section.api_path)
-            .then(data => {
-                this._render_custom_section_data(section, data);
-                this._set_status_text('Loaded ' + section.label);
-            })
+    _render_custom_section(section) {
+        if (!this._dashboard_section || !this._dynamic_section) return Promise.resolve();
+
+        this._dashboard_section.add_class('hidden');
+        this._dynamic_section.remove_class('hidden');
+
+        this._render_loading('Loading ' + section.label + '...');
+        this._set_status_text('Loading ' + section.label);
+
+        return this._fetch_json(section.api_path)
+            .then(data => {
+                this._render_custom_section_data(section, data);
+                this._set_status_text('Loaded ' + section.label);
+            })
             .catch(err => {
                 console.error('[Admin] Failed to load custom section:', err);
                 this._render_error('Failed to load ' + section.label + '.', () => this._render_custom_section(section));
@@ -999,47 +1032,47 @@ class Admin_Shell extends Active_HTML_Document {
     /**
      * Auto-render data based on shape:
      * - Array of objects → table
-     * - Object → key-value panel
-     * - Scalar → plain text
-     */
-    _render_custom_section_data(section, data) {
-        if (!this._dynamic_section) return;
-
-        if (Array.isArray(data)) {
-            if (data.length === 0) {
-                this._render_empty('No data for ' + section.label + '.');
-                return;
-            }
-            const normalized_first_row = (data[0] && typeof data[0] === 'object')
-                ? data[0]
-                : { value: data[0] };
-            const keys = Object.keys(normalized_first_row);
-            const rows_data = data.map((row) => {
-                const normalized_row = (row && typeof row === 'object') ? row : { value: row };
-                return keys.map((key) => normalized_row[key]);
-            });
-
-            this._clear_control(this._dynamic_section);
-            this._dynamic_section.add(
-                this._create_table_panel(section.label, keys, rows_data)
-            );
-        } else if (data && typeof data === 'object') {
-            const panel = this._create_panel(section.label);
-            Object.entries(data).forEach((entry) => {
-                panel.add(this._create_kv_row(entry[0], entry[1]));
-            });
-            this._clear_control(this._dynamic_section);
-            this._dynamic_section.add(panel);
-        } else {
-            const panel = this._create_panel();
-            const text = new controls.div({ context: this.context, 'class': 'as-muted' });
-            text.add(this._stringify_value(data));
-            panel.add(text);
-            this._clear_control(this._dynamic_section);
-            this._dynamic_section.add(panel);
-        }
-    }
-}
+     * - Object → key-value panel
+     * - Scalar → plain text
+     */
+    _render_custom_section_data(section, data) {
+        if (!this._dynamic_section) return;
+
+        if (Array.isArray(data)) {
+            if (data.length === 0) {
+                this._render_empty('No data for ' + section.label + '.');
+                return;
+            }
+            const normalized_first_row = (data[0] && typeof data[0] === 'object')
+                ? data[0]
+                : { value: data[0] };
+            const keys = Object.keys(normalized_first_row);
+            const rows_data = data.map((row) => {
+                const normalized_row = (row && typeof row === 'object') ? row : { value: row };
+                return keys.map((key) => normalized_row[key]);
+            });
+
+            this._clear_control(this._dynamic_section);
+            this._dynamic_section.add(
+                this._create_table_panel(section.label, keys, rows_data)
+            );
+        } else if (data && typeof data === 'object') {
+            const panel = this._create_panel(section.label);
+            Object.entries(data).forEach((entry) => {
+                panel.add(this._create_kv_row(entry[0], entry[1]));
+            });
+            this._clear_control(this._dynamic_section);
+            this._dynamic_section.add(panel);
+        } else {
+            const panel = this._create_panel();
+            const text = new controls.div({ context: this.context, 'class': 'as-muted' });
+            text.add(this._stringify_value(data));
+            panel.add(text);
+            this._clear_control(this._dynamic_section);
+            this._dynamic_section.add(panel);
+        }
+    }
+}
 
 Admin_Shell.css = `
 /* ─── Reset & Root ───────────────────────────────────────── */