webspresso 0.0.89 → 0.0.91

package/plugins/admin-panel/client/parts/08-record-list.js

@@ -61,7 +61,7 @@ const RecordList = {
     
     return m(Layout, { breadcrumbs }, [
       // Header
-      m('.flex.items-center.justify-between.mb-4', [
+      m('.flex.flex-col.sm:flex-row.sm:items-center.sm:justify-between.gap-3.mb-4', [
         m('.flex.items-center.gap-3', [
           m('h2.text-2xl.font-bold', modelMeta?.label || modelName),
           m(RefreshIconButton, {
@@ -76,16 +76,16 @@ const RecordList = {
               });
             },
           }),
-          modelMeta?.softDelete ? m('.flex.rounded-lg.border.border-gray-200 dark:border-slate-600.p-0.5', [
+          modelMeta?.softDelete ? m('.flex.rounded-lg.border.border-gray-200.dark:border-slate-600.p-0.5', [
             m('button.px-3.py-1.5.text-sm.font-medium.rounded-md.transition-colors', {
-              class: !state.trashedView ? 'bg-indigo-600.text-white' : 'text-gray-600.hover:text-gray-900 dark:hover:text-slate-100 dark:hover:text-slate-100',
+              class: !state.trashedView ? 'bg-indigo-600.text-white' : 'text-gray-600.hover:text-gray-900.dark:hover:text-slate-100',
               onclick: () => {
                 state.trashedView = false;
                 loadRecords(modelName, 1);
               },
             }, 'Active'),
             m('button.px-3.py-1.5.text-sm.font-medium.rounded-md.transition-colors', {
-              class: state.trashedView ? 'bg-indigo-600.text-white' : 'text-gray-600.hover:text-gray-900 dark:hover:text-slate-100 dark:hover:text-slate-100',
+              class: state.trashedView ? 'bg-indigo-600.text-white' : 'text-gray-600.hover:text-gray-900.dark:hover:text-slate-100',
               onclick: () => {
                 state.trashedView = true;
                 loadRecords(modelName, 1);
@@ -232,29 +232,29 @@ const RecordList = {
             ])
           : m('.bg-white dark:bg-slate-800.rounded-lg.shadow-sm.border.border-gray-200 dark:border-slate-600.overflow-hidden', [
             // Bulk Actions Toolbar (shown when items selected)
-            (state.selectedRecords && state.selectedRecords.size > 0) || state.selectAllMode ? m('.bg-indigo-50.border-b.border-indigo-100.px-4.py-3.flex.items-center.justify-between', [
-              m('.flex.items-center.gap-3', [
-                m('span.text-sm.text-indigo-700.font-medium', 
+            (state.selectedRecords && state.selectedRecords.size > 0) || state.selectAllMode ? m('.bg-indigo-50.dark:bg-indigo-950/40.border-b.border-indigo-100.dark:border-indigo-900/50.px-4.py-3.flex.flex-col.sm:flex-row.sm:items-center.sm:justify-between.gap-3', [
+              m('.flex.flex-wrap.items-center.gap-2', [
+                m('span.text-sm.text-indigo-700.dark:text-indigo-300.font-medium', 
                   state.selectAllMode 
                     ? 'All ' + state.pagination.total + ' records selected'
                     : state.selectedRecords.size + ' record' + (state.selectedRecords.size > 1 ? 's' : '') + ' selected'
                 ),
                 // Show "Select all X records" option when current page is fully selected
-                !state.selectAllMode && state.selectedRecords.size === state.records.length && state.pagination.total > state.records.length && m('button.text-sm.text-indigo-600.hover:text-indigo-800.underline.font-medium', {
+                !state.selectAllMode && state.selectedRecords.size === state.records.length && state.pagination.total > state.records.length && m('button.text-sm.text-indigo-600.dark:text-indigo-400.hover:text-indigo-800.underline.font-medium', {
                   onclick: () => {
                     state.selectAllMode = true;
                     m.redraw();
                   },
                 }, 'Select all ' + state.pagination.total + ' records'),
                 // Show "Select only this page" when in selectAllMode
-                state.selectAllMode && m('button.text-sm.text-indigo-600.hover:text-indigo-800.underline', {
+                state.selectAllMode && m('button.text-sm.text-indigo-600.dark:text-indigo-400.hover:text-indigo-800.underline', {
                   onclick: () => {
                     state.selectAllMode = false;
                     m.redraw();
                   },
                 }, 'Select only this page (' + state.selectedRecords.size + ')'),
               ]),
-              m('.flex.items-center.gap-2', [
+              m('.flex.flex-wrap.items-center.gap-1.5', [
                 state.trashedView && modelMeta?.softDelete
                   ? m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.text-green-600.bg-white dark:bg-slate-800.border.border-green-200.rounded.hover:bg-green-50.transition-colors', {
                       disabled: state.bulkActionInProgress,
@@ -425,8 +425,8 @@ const RecordList = {
                 // Sticky header
                 m('thead.bg-gray-50.dark:bg-slate-900', { style: 'position: sticky; top: 0; z-index: 20;' }, [
                   m('tr', [
-                    // Checkbox column header (sticky left, box-shadow on right)
-                    m('th.px-4.py-3.text-left.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200 dark:border-slate-700', { style: 'width: 40px; position: sticky; left: 0; z-index: 15; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' }, [
+                    // Checkbox column header (sticky left on md+, box-shadow on right)
+                    m('th.px-4.py-3.text-left.bg-gray-50.dark:bg-slate-900.border-b.border-gray-200.dark:border-slate-700.admin-table-sticky-check', { style: 'width: 40px;' }, [
                       m('input[type=checkbox].rounded.border-gray-300 dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
                         checked: state.records.length > 0 && state.selectedRecords && state.selectedRecords.size === state.records.length,
                         indeterminate: state.selectedRecords && state.selectedRecords.size > 0 && state.selectedRecords.size < state.records.length,
@@ -440,23 +440,21 @@ const RecordList = {
                         },
                       }),
                     ]),
-                    // Dynamic column headers (first column sticky left with box-shadow)
+                    // Dynamic column headers (first column sticky left on md+ with box-shadow)
                     ...displayColumns.map((col, i) => {
                       const isSortable = col.sortable !== false;
                       const isSorted = isSortable && state.sortColumn === col.name;
                       const dir = isSorted ? state.sortDirection : null;
-                      const stickyStyle = i === 0 ? 'position: sticky; left: 40px; z-index: 15; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' : '';
+                      const stickyClass = i === 0 ? '.admin-table-sticky-first' : '';
 
                       if (!isSortable) {
-                        return m('th.px-4.py-3.text-left.text-xs.font-medium.text-gray-500.dark:text-slate-400.uppercase.tracking-wider.whitespace-nowrap.bg-gray-50.dark:bg-slate-900.border-b.border-gray-200.dark:border-slate-700',
-                          stickyStyle ? { style: stickyStyle } : {},
+                        return m('th.px-4.py-3.text-left.text-xs.font-medium.text-gray-500.dark:text-slate-400.uppercase.tracking-wider.whitespace-nowrap.bg-gray-50.dark:bg-slate-900.border-b.border-gray-200.dark:border-slate-700' + stickyClass,
                           formatColumnLabel(col.name)
                         );
                       }
 
-                      return m('th.px-4.py-3.text-left.text-xs.font-medium.text-gray-500.dark:text-slate-400.uppercase.tracking-wider.whitespace-nowrap.bg-gray-50.dark:bg-slate-900.border-b.border-gray-200.dark:border-slate-700.cursor-pointer.select-none.hover:bg-gray-100.dark:hover:bg-slate-800/80.transition-colors.group',
+                      return m('th.px-4.py-3.text-left.text-xs.font-medium.text-gray-500.dark:text-slate-400.uppercase.tracking-wider.whitespace-nowrap.bg-gray-50.dark:bg-slate-900.border-b.border-gray-200.dark:border-slate-700.cursor-pointer.select-none.hover:bg-gray-100.dark:hover:bg-slate-800/80.transition-colors.group' + stickyClass,
                         {
-                          style: stickyStyle || undefined,
                           onclick: () => {
                             let nextSort = col.name;
                             let nextDir = 'asc';
@@ -489,21 +487,19 @@ const RecordList = {
                         ])
                       );
                     }),
-                    // Sticky actions header (sticky right, box-shadow on left)
-                    m('th.px-4.py-3.text-right.text-xs.font-medium.text-gray-500 dark:text-slate-400.uppercase.tracking-wider.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200 dark:border-slate-700', {
-                      style: 'position: sticky; right: 0; min-width: 120px; z-index: 15; box-shadow: -4px 0 8px -4px rgba(0,0,0,0.08);',
+                    // Sticky actions header (sticky right on md+, box-shadow on left)
+                    m('th.px-4.py-3.text-right.text-xs.font-medium.text-gray-500.dark:text-slate-400.uppercase.tracking-wider.bg-gray-50.dark:bg-slate-900.border-b.border-gray-200.dark:border-slate-700.admin-table-sticky-actions', {
+                      style: 'min-width: 120px;',
                     }, 'Actions'),
                   ]),
                 ]),
                 m('tbody.divide-y.divide-gray-100.dark:divide-slate-700', state.records.map(record => 
-                  m('tr.hover:bg-gray-50 dark:hover:bg-slate-800/50.transition-colors', {
+                  m('tr.hover:bg-gray-50.dark:hover:bg-slate-800/50.transition-colors', {
                     class: state.selectedRecords && state.selectedRecords.has(record[primaryKey]) ? 'bg-indigo-50 dark:bg-indigo-950/50' : '',
                   }, [
-                    // Checkbox cell (sticky left, box-shadow on right)
-                    m('td.px-4.py-3.bg-white.dark:bg-slate-800', {
-                      style: 'position: sticky; left: 0; z-index: 5; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);',
-                    }, [
-                      m('input[type=checkbox].rounded.border-gray-300 dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
+                    // Checkbox cell (sticky left on md+, box-shadow on right)
+                    m('td.px-4.py-3.bg-white.dark:bg-slate-800.admin-table-sticky-check', [
+                      m('input[type=checkbox].rounded.border-gray-300.dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
                         checked: state.selectedRecords && state.selectedRecords.has(record[primaryKey]),
                         onchange: (e) => {
                           if (!state.selectedRecords) state.selectedRecords = new Set();
@@ -516,17 +512,14 @@ const RecordList = {
                         },
                       }),
                     ]),
-                    // Dynamic cell values (first column sticky left with box-shadow)
+                    // Dynamic cell values (first column sticky left on md+ with box-shadow)
                     ...displayColumns.map((col, i) => 
-                      m('td.px-4.py-3.text-sm.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800',
-                        i === 0 ? { style: 'position: sticky; left: 40px; z-index: 5; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' } : {},
+                      m('td.px-4.py-3.text-sm.whitespace-nowrap.text-gray-700.dark:text-slate-300.bg-white.dark:bg-slate-800' + (i === 0 ? '.admin-table-sticky-first' : ''),
                         formatCellValue(record[col.name], col, record)
                       )
                     ),
-                    // Sticky actions cell (sticky right, box-shadow on left)
-                    m('td.px-4.py-3.text-sm.text-right.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800', {
-                      style: 'position: sticky; right: 0; z-index: 5; box-shadow: -4px 0 8px -4px rgba(0,0,0,0.08);',
-                    }, [
+                    // Sticky actions cell (sticky right on md+, box-shadow on left)
+                    m('td.px-4.py-3.text-sm.text-right.whitespace-nowrap.text-gray-700.dark:text-slate-300.bg-white.dark:bg-slate-800.admin-table-sticky-actions', [
                       state.trashedView && modelMeta?.softDelete
                         ? m('button.inline-flex.items-center.px-2.py-1.text-sm.text-green-600.dark:text-green-400.hover:text-green-800.dark:hover:text-green-300.hover:bg-green-50.dark:hover:bg-green-950/40.rounded.transition-colors', {
                             onclick: async () => {

package/plugins/admin-panel/client/parts/09-record-form.js

@@ -1,9 +1,141 @@
-// Record Form Component - renders fields based on model schema
+// Record Form Component - renders fields based on model schema with dynamic validation
+
+/**
+ * Validate a single column value against schema and metadata rules
+ */
+function validateField(col, value, formData) {
+  const validations = col.validations || {};
+  const isRequired = !col.nullable;
+  const label = col.ui?.label || formatColumnLabel(col.name);
+
+  // 1. Required / Nullable check
+  if (isRequired) {
+    if (value === undefined || value === null || (typeof value === 'string' && value.trim() === '')) {
+      return label + ' is required';
+    }
+    if (col.customField && col.customField.type === 'rich-text' && isRichTextEmpty(value)) {
+      return label + ' is required';
+    }
+  }
+
+  // If value is empty and column is nullable, it's valid
+  if (value === undefined || value === null || value === '') {
+    return null;
+  }
+
+  // 2. Type validation
+  if (col.type === 'integer' || col.type === 'bigint') {
+    const num = Number(value);
+    if (isNaN(num) || !Number.isInteger(num)) {
+      return label + ' must be an integer';
+    }
+  } else if (col.type === 'float' || col.type === 'decimal') {
+    const num = Number(value);
+    if (isNaN(num)) {
+      return label + ' must be a valid number';
+    }
+  } else if (col.type === 'json') {
+    if (typeof value === 'string') {
+      try {
+        JSON.parse(value);
+      } catch {
+        return label + ' must be valid JSON';
+      }
+    }
+  }
+
+  // 3. String Length & Format Validations
+  if (typeof value === 'string') {
+    const minLen = validations.minLength !== undefined ? validations.minLength : validations.min;
+    if (minLen !== undefined && value.length < minLen) {
+      return label + ' must be at least ' + minLen + ' characters';
+    }
+    const maxLen = validations.maxLength !== undefined ? validations.maxLength : (validations.max || col.maxLength);
+    if (maxLen !== undefined && value.length > maxLen) {
+      return label + ' must be at most ' + maxLen + ' characters';
+    }
+    if (validations.email) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(value.trim())) {
+        return label + ' must be a valid email address';
+      }
+    }
+    if (validations.url) {
+      try {
+        new URL(value.trim());
+      } catch {
+        return label + ' must be a valid URL';
+      }
+    }
+    if (validations.pattern) {
+      try {
+        const regex = new RegExp(validations.pattern);
+        if (!regex.test(value)) {
+          return label + ' format is invalid';
+        }
+      } catch {}
+    }
+  }
+
+  // 4. Numeric Bounds
+  if (typeof value === 'number') {
+    if (validations.min !== undefined && value < validations.min) {
+      return label + ' must be at least ' + validations.min;
+    }
+    if (validations.max !== undefined && value > validations.max) {
+      return label + ' must be at most ' + validations.max;
+    }
+  }
+
+  // 5. Enum validation
+  if (col.enumValues && Array.isArray(col.enumValues) && col.enumValues.length > 0) {
+    if (!col.enumValues.includes(value)) {
+      return label + ' must be one of: ' + col.enumValues.join(', ');
+    }
+  }
+
+  // 6. Custom Field Validator
+  if (col.customField && typeof col.customField.validate === 'function') {
+    const customErr = col.customField.validate(value, formData);
+    if (customErr) return customErr;
+  }
+
+  return null;
+}
+
+/**
+ * Validate all columns in a form
+ */
+function validateForm(columns, formData) {
+  const errors = {};
+  if (!columns || !Array.isArray(columns)) return errors;
+
+  for (const col of columns) {
+    const autoType = isAutoColumn(col);
+    if (autoType === 'primary' || autoType === 'auto') continue;
+    if (col.ui && col.ui.hidden) continue;
+
+    let val = formData[col.name];
+    if (col.customField && col.customField.type === 'rich-text') {
+      const hiddenInput = document.getElementById(col.name + '-value');
+      if (hiddenInput) val = hiddenInput.value;
+    }
+
+    const err = validateField(col, val, formData);
+    if (err) {
+      errors[col.name] = err;
+    }
+  }
+
+  return errors;
+}
+
 const RecordForm = {
   oninit: () => {
     const modelName = m.route.param('model');
     const id = m.route.param('id');
     state.error = null;
+    state.fieldErrors = {};
     state.loading = true;
     state.formData = {};
     state.currentModelMeta = null;
@@ -66,24 +198,32 @@ const RecordForm = {
         style: 'min-height: calc(100vh - 280px);',
         onsubmit: async (e) => {
           e.preventDefault();
-          state.loading = true;
           state.error = null;
-          try {
-            // Validate rich-text fields first
-            if (modelMeta && modelMeta.columns) {
-              for (const col of modelMeta.columns) {
-                if (col.customField && col.customField.type === 'rich-text' && !col.nullable) {
-                  const hiddenInput = document.getElementById(col.name + '-value');
-                  const value = hiddenInput ? hiddenInput.value : state.formData[col.name];
-                  if (isRichTextEmpty(value)) {
-                    state.error = (col.ui?.label || col.name) + ' is required';
-                    state.loading = false;
-                    return;
-                  }
+          state.fieldErrors = {};
+
+          // 1. Run client-side validation
+          if (modelMeta && modelMeta.columns) {
+            const validationErrors = validateForm(modelMeta.columns, state.formData);
+            if (Object.keys(validationErrors).length > 0) {
+              state.fieldErrors = validationErrors;
+              state.error = 'Please fix the errors indicated below.';
+              m.redraw();
+              setTimeout(() => {
+                const firstInvalidKey = Object.keys(validationErrors)[0];
+                const targetEl = document.getElementById(firstInvalidKey) ||
+                  document.getElementById('file-input-' + firstInvalidKey) ||
+                  document.getElementById('quill-editor-' + firstInvalidKey);
+                if (targetEl && targetEl.scrollIntoView) {
+                  targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                  if (typeof targetEl.focus === 'function') targetEl.focus();
                 }
-              }
+              }, 50);
+              return;
             }
-            
+          }
+
+          state.loading = true;
+          try {
             // Build payload, excluding auto-generated fields
             const payload = {};
             if (modelMeta && modelMeta.columns) {
@@ -123,9 +263,13 @@ const RecordForm = {
             }
             m.route.set('/models/' + modelName);
           } catch (err) {
-            state.error = err.message;
+            state.error = err.message || 'Failed to save record';
+            if (err.fields && typeof err.fields === 'object') {
+              state.fieldErrors = err.fields;
+            }
           } finally {
             state.loading = false;
+            m.redraw();
           }
         }
       }, [
@@ -146,11 +290,16 @@ const RecordForm = {
             const isReadonly = !!autoType || (col.ui && col.ui.readonly);
             const renderer = getFieldRenderer(col, modelMeta);
             const value = state.formData[col.name];
+            const fieldError = state.fieldErrors ? state.fieldErrors[col.name] : null;
+            
             const onChange = (newValue) => {
               state.formData[col.name] = newValue;
+              if (state.fieldErrors && state.fieldErrors[col.name]) {
+                delete state.fieldErrors[col.name];
+              }
             };
             
-            return renderer(col, value, onChange, isReadonly);
+            return renderer(col, value, onChange, isReadonly, fieldError);
           }) : m('p.text-gray-600 dark:text-slate-400.mb-4', 'Loading form fields...'),
         ]),
         
@@ -160,7 +309,7 @@ const RecordForm = {
             type: 'submit',
             disabled: state.loading,
           }, state.loading ? 'Saving...' : 'Save'),
-          m('button.bg-gray-200 dark:bg-slate-700.text-gray-800 dark:text-slate-200.px-6.py-2.rounded.hover:bg-gray-300 dark:hover:bg-slate-600 dark:hover:bg-slate-600[type=button]', {
+          m('button.bg-gray-200.dark:bg-slate-700.text-gray-800.dark:text-slate-200.px-6.py-2.rounded.hover:bg-gray-300.dark:hover:bg-slate-600[type=button]', {
             onclick: () => m.route.set('/models/' + modelName),
           }, 'Cancel'),
         ]),

package/plugins/admin-panel/core/admin-module.js

@@ -8,7 +8,7 @@ function formatClientComponent(pageId, rawCode) {
   let code = (rawCode || '').trim();
   if (!code) return '';
   if (code.includes('window.__customPages')) {
-    return code;
+    return `try {\n${code}\n} catch (err) {\n  console.error('[Admin Panel] Failed to load custom page component "${pageId}":', err);\n}`;
   }
   if (code.startsWith('module.exports =')) {
     code = code.replace(/^module\.exports\s*=\s*/, '');
@@ -16,7 +16,7 @@ function formatClientComponent(pageId, rawCode) {
   if (code.endsWith(';')) {
     code = code.slice(0, -1);
   }
-  return `window.__customPages = window.__customPages || {};\nwindow.__customPages[${JSON.stringify(pageId)}] = ${code};`;
+  return `try {\n  window.__customPages = window.__customPages || {};\n  window.__customPages[${JSON.stringify(pageId)}] = ${code};\n} catch (err) {\n  console.error('[Admin Panel] Failed to load custom page component "${pageId}":', err);\n}`;
 }
 
 /**

package/plugins/admin-panel/core/api-extensions.js

@@ -4,8 +4,113 @@
  * @module plugins/admin-panel/core/api-extensions
  */
 
+const os = require('os');
+const https = require('https');
 const { sanitizeForOutput } = require('../../../core/orm/utils');
 
+function getWebspressoVersion() {
+  try {
+    const pkg = require('../../../package.json');
+    return pkg.version || '0.0.1';
+  } catch {
+    return '0.0.1';
+  }
+}
+
+let npmVersionCache = {
+  latestVersion: null,
+  checkedAt: 0,
+  inFlight: null,
+};
+
+function fetchLatestNpmVersion(force = false) {
+  const now = Date.now();
+  if (!force && npmVersionCache.latestVersion && (now - npmVersionCache.checkedAt < 30 * 60 * 1000)) {
+    return Promise.resolve(npmVersionCache.latestVersion);
+  }
+
+  if (npmVersionCache.inFlight) {
+    return npmVersionCache.inFlight;
+  }
+
+  npmVersionCache.inFlight = new Promise((resolve) => {
+    const req = https.get('https://registry.npmjs.org/webspresso/latest', {
+      headers: {
+        'User-Agent': 'Webspresso-Admin-Version-Check',
+        'Accept': 'application/json',
+      },
+      timeout: 3000,
+    }, (res) => {
+      if (res.statusCode !== 200) {
+        res.resume();
+        return resolve(npmVersionCache.latestVersion);
+      }
+      let rawData = '';
+      res.setEncoding('utf8');
+      res.on('data', (chunk) => { rawData += chunk; });
+      res.on('end', () => {
+        try {
+          const parsed = JSON.parse(rawData);
+          if (parsed && typeof parsed.version === 'string') {
+            npmVersionCache.latestVersion = parsed.version;
+            npmVersionCache.checkedAt = Date.now();
+            return resolve(parsed.version);
+          }
+        } catch {}
+        npmVersionCache.checkedAt = Date.now();
+        resolve(npmVersionCache.latestVersion);
+      });
+    });
+
+    req.on('timeout', () => {
+      req.destroy();
+      npmVersionCache.checkedAt = Date.now();
+      resolve(npmVersionCache.latestVersion);
+    });
+
+    req.on('error', () => {
+      npmVersionCache.checkedAt = Date.now();
+      resolve(npmVersionCache.latestVersion);
+    });
+  }).finally(() => {
+    npmVersionCache.inFlight = null;
+  });
+
+  return npmVersionCache.inFlight;
+}
+
+function compareSemver(v1, v2) {
+  if (!v1 || !v2) return 0;
+  const p1 = String(v1).replace(/^v/, '').split('.').map(n => parseInt(n, 10) || 0);
+  const p2 = String(v2).replace(/^v/, '').split('.').map(n => parseInt(n, 10) || 0);
+  for (let i = 0; i < Math.max(p1.length, p2.length); i++) {
+    const n1 = p1[i] || 0;
+    const n2 = p2[i] || 0;
+    if (n1 > n2) return 1;
+    if (n1 < n2) return -1;
+  }
+  return 0;
+}
+
+function formatUptime(seconds) {
+  const sec = Math.floor(seconds || 0);
+  const d = Math.floor(sec / (3600 * 24));
+  const h = Math.floor((sec % (3600 * 24)) / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  const s = Math.floor(sec % 60);
+  const parts = [];
+  if (d > 0) parts.push(`${d}d`);
+  if (h > 0) parts.push(`${h}h`);
+  if (m > 0) parts.push(`${m}m`);
+  if (s > 0 || parts.length === 0) parts.push(`${s}s`);
+  return parts.join(' ');
+}
+
+function formatBytes(bytes) {
+  if (!bytes || bytes === 0) return '0 MB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
 /**
  * Build query with filters applied
  * @param {Object} repo - Repository instance
@@ -730,6 +835,44 @@ function createExtensionApiHandlers(options) {
     }
   }
 
+  /**
+   * System info & Webspresso version check
+   */
+  async function systemInfoHandler(req, res) {
+    try {
+      const force = req.query && req.query.force === 'true';
+      const currentVersion = getWebspressoVersion();
+      const latestVersion = await fetchLatestNpmVersion(force);
+      const hasUpdate = Boolean(latestVersion && compareSemver(latestVersion, currentVersion) > 0);
+
+      const mem = process.memoryUsage();
+      const dbClient = db?.knex?.client?.config?.client || 'knex';
+
+      res.json({
+        success: true,
+        webspressoVersion: currentVersion,
+        latestVersion: latestVersion || currentVersion,
+        hasUpdate,
+        nodeVersion: process.version,
+        platform: `${os.type()} ${os.release()} (${process.platform})`,
+        arch: process.arch,
+        environment: process.env.NODE_ENV || 'development',
+        uptimeSeconds: Math.floor(process.uptime()),
+        uptimeFormatted: formatUptime(process.uptime()),
+        memory: {
+          heapUsed: formatBytes(mem.heapUsed),
+          heapTotal: formatBytes(mem.heapTotal),
+          rss: formatBytes(mem.rss),
+        },
+        database: {
+          client: String(dbClient),
+        },
+      });
+    } catch (error) {
+      res.status(500).json({ error: error.message });
+    }
+  }
+
   return {
     configHandler,
     widgetDataHandler,
@@ -742,6 +885,7 @@ function createExtensionApiHandlers(options) {
     activityLogHandler,
     settingsGetHandler,
     settingsUpdateHandler,
+    systemInfoHandler,
   };
 }
 
@@ -750,4 +894,9 @@ module.exports = {
   buildFilteredQuery,
   getAllMatchingIds,
   coerceBulkTemporalValue,
+  getWebspressoVersion,
+  fetchLatestNpmVersion,
+  compareSemver,
+  formatUptime,
+  formatBytes,
 };

package/plugins/admin-panel/field-renderers/rich-text.js

@@ -10,13 +10,14 @@ module.exports = {
       
       // Load Quill if not already loaded
       if (typeof window.Quill === 'undefined') {
+        const adminPath = (window.__ADMIN_PATH__) || '/_admin';
         const link = document.createElement('link');
         link.rel = 'stylesheet';
-        link.href = 'https://cdn.quilljs.com/1.3.6/quill.snow.css';
+        link.href = adminPath + '/vendor/quill.snow.min.css';
         document.head.appendChild(link);
         
         const script = document.createElement('script');
-        script.src = 'https://cdn.quilljs.com/1.3.6/quill.js';
+        script.src = adminPath + '/vendor/quill.min.js';
         script.onload = () => {
           initEditor(vnode);
         };