BREAKING CHANGE(config): convert configuration management to read-only; remove updateConfiguration endpoint and client-side editing

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/dcrouter',
-  version: '3.1.0',
+  version: '4.0.0',
   description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }

ts_web/appstate.ts

@@ -267,17 +267,17 @@ export const fetchAllStatsAction = statsStatePart.createAction(async (statePartA
   }
 });
 
-// Fetch Configuration Action
+// Fetch Configuration Action (read-only)
 export const fetchConfigurationAction = configStatePart.createAction(async (statePartArg) => {
   const context = getActionContext();
-  
+
   const currentState = statePartArg.getState();
 
   try {
     const configRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
       interfaces.requests.IReq_GetConfiguration
     >('/typedrequest', 'getConfiguration');
-    
+
     const response = await configRequest.fire({
       identity: context.identity,
     });
@@ -296,35 +296,6 @@ export const fetchConfigurationAction = configStatePart.createAction(async (stat
   }
 });
 
-// Update Configuration Action
-export const updateConfigurationAction = configStatePart.createAction<{
-  section: string;
-  config: any;
-}>(async (statePartArg, dataArg) => {
-  const context = getActionContext();
-  if (!context.identity) {
-    throw new Error('Must be logged in to update configuration');
-  }
-
-  const updateRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
-    interfaces.requests.IReq_UpdateConfiguration
-  >('/typedrequest', 'updateConfiguration');
-
-  const response = await updateRequest.fire({
-    identity: context.identity,
-    section: dataArg.section,
-    config: dataArg.config,
-  });
-
-  if (response.updated) {
-    // Refresh configuration
-    await configStatePart.dispatchAction(fetchConfigurationAction, null);
-    return statePartArg.getState();
-  }
-
-  return statePartArg.getState();
-});
-
 // Fetch Recent Logs Action
 export const fetchRecentLogsAction = logStatePart.createAction<{
   limit?: number;

ts_web/elements/ops-view-config.ts

@@ -9,6 +9,7 @@ import {
   state,
   css,
   cssManager,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 
 @customElement('ops-view-config')
@@ -20,12 +21,6 @@ export class OpsViewConfig extends DeesElement {
     error: null,
   };
 
-  @state()
-  accessor editingSection: string | null = null;
-
-  @state()
-  accessor editedConfig: any = null;
-
   constructor() {
     super();
     const subscription = appstate.configStatePart
@@ -61,6 +56,14 @@ export class OpsViewConfig extends DeesElement {
         font-size: 18px;
         font-weight: 600;
         color: ${cssManager.bdTheme('#333', '#ccc')};
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .sectionTitle dees-icon {
+        font-size: 20px;
+        color: ${cssManager.bdTheme('#666', '#888')};
       }
 
       .sectionContent {
@@ -71,12 +74,18 @@ export class OpsViewConfig extends DeesElement {
         margin-bottom: 20px;
       }
 
+      .configField:last-child {
+        margin-bottom: 0;
+      }
+
       .fieldLabel {
-        font-size: 14px;
+        font-size: 13px;
         font-weight: 600;
         color: ${cssManager.bdTheme('#666', '#999')};
         margin-bottom: 8px;
         display: block;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
       }
 
       .fieldValue {
@@ -84,41 +93,77 @@ export class OpsViewConfig extends DeesElement {
         font-size: 14px;
         color: ${cssManager.bdTheme('#333', '#ccc')};
         background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
-        padding: 8px 12px;
-        border-radius: 4px;
+        padding: 10px 14px;
+        border-radius: 6px;
         border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
       }
 
-      .configEditor {
-        width: 100%;
-        min-height: 200px;
-        font-family: 'Consolas', 'Monaco', monospace;
-        font-size: 14px;
-        padding: 12px;
-        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
-        border-radius: 4px;
-        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
-        resize: vertical;
+      .fieldValue.empty {
+        color: ${cssManager.bdTheme('#999', '#666')};
+        font-style: italic;
       }
 
-      .buttonGroup {
-        display: flex;
-        gap: 8px;
-        margin-top: 16px;
+      .nestedFields {
+        margin-left: 16px;
+        padding-left: 16px;
+        border-left: 2px solid ${cssManager.bdTheme('#e9ecef', '#333')};
       }
 
-      .warning {
-        background: ${cssManager.bdTheme('#fff3cd', '#4a4a1a')};
-        border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#666633')};
-        border-radius: 4px;
-        padding: 12px;
-        margin-bottom: 16px;
-        color: ${cssManager.bdTheme('#856404', '#ffcc66')};
-        display: flex;
+      /* Status badge styles */
+      .statusBadge {
+        display: inline-flex;
         align-items: center;
+        gap: 6px;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 13px;
+        font-weight: 600;
+      }
+
+      .statusBadge.enabled {
+        background: ${cssManager.bdTheme('#d4edda', '#1a3d1a')};
+        color: ${cssManager.bdTheme('#155724', '#66cc66')};
+      }
+
+      .statusBadge.disabled {
+        background: ${cssManager.bdTheme('#f8d7da', '#3d1a1a')};
+        color: ${cssManager.bdTheme('#721c24', '#cc6666')};
+      }
+
+      .statusBadge dees-icon {
+        font-size: 14px;
+      }
+
+      /* Array/list display */
+      .arrayItems {
+        display: flex;
+        flex-wrap: wrap;
         gap: 8px;
       }
 
+      .arrayItem {
+        display: inline-flex;
+        align-items: center;
+        background: ${cssManager.bdTheme('#e7f3ff', '#1a2a3d')};
+        color: ${cssManager.bdTheme('#0066cc', '#66aaff')};
+        padding: 4px 12px;
+        border-radius: 16px;
+        font-size: 13px;
+        font-family: 'Consolas', 'Monaco', monospace;
+      }
+
+      .arrayCount {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#999', '#666')};
+        margin-bottom: 8px;
+      }
+
+      /* Numeric value formatting */
+      .numericValue {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#0066cc', '#66aaff')};
+      }
+
       .errorMessage {
         background: ${cssManager.bdTheme('#fee', '#4a1f1f')};
         border: 1px solid ${cssManager.bdTheme('#fcc', '#6a2f2f')};
@@ -133,13 +178,30 @@ export class OpsViewConfig extends DeesElement {
         padding: 40px;
         color: ${cssManager.bdTheme('#666', '#999')};
       }
+
+      .infoNote {
+        background: ${cssManager.bdTheme('#e7f3ff', '#1a2a3d')};
+        border: 1px solid ${cssManager.bdTheme('#b3d7ff', '#2a4a6d')};
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 24px;
+        color: ${cssManager.bdTheme('#004085', '#88ccff')};
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .infoNote dees-icon {
+        font-size: 20px;
+        flex-shrink: 0;
+      }
     `,
   ];
 
   public render() {
     return html`
       <ops-sectionheading>Configuration</ops-sectionheading>
-      
+
       ${this.configState.isLoading ? html`
         <div class="loadingMessage">
           <dees-spinner></dees-spinner>
@@ -150,118 +212,175 @@ export class OpsViewConfig extends DeesElement {
           Error loading configuration: ${this.configState.error}
         </div>
       ` : this.configState.config ? html`
-        <div class="warning">
-          <dees-icon name="warning"></dees-icon>
-          <span>Changes to configuration will take effect immediately. Please be careful when editing production settings.</span>
+        <div class="infoNote">
+          <dees-icon icon="lucide:info"></dees-icon>
+          <span>This view displays the current running configuration. DcRouter is configured through code or remote management.</span>
         </div>
 
-        ${this.renderConfigSection('email', 'Email Configuration', this.configState.config?.email)}
-        ${this.renderConfigSection('dns', 'DNS Configuration', this.configState.config?.dns)}
-        ${this.renderConfigSection('proxy', 'Proxy Configuration', this.configState.config?.proxy)}
-        ${this.renderConfigSection('security', 'Security Configuration', this.configState.config?.security)}
+        ${this.renderConfigSection('email', 'Email', 'lucide:mail', this.configState.config?.email)}
+        ${this.renderConfigSection('dns', 'DNS', 'lucide:globe', this.configState.config?.dns)}
+        ${this.renderConfigSection('proxy', 'Proxy', 'lucide:network', this.configState.config?.proxy)}
+        ${this.renderConfigSection('security', 'Security', 'lucide:shield', this.configState.config?.security)}
       ` : html`
         <div class="errorMessage">No configuration loaded</div>
       `}
     `;
   }
 
-  private renderConfigSection(key: string, title: string, config: any) {
-    const isEditing = this.editingSection === key;
-    
+  private renderConfigSection(key: string, title: string, icon: string, config: any) {
+    const isEnabled = config?.enabled ?? false;
+
     return html`
       <div class="configSection">
         <div class="sectionHeader">
-          <h3 class="sectionTitle">${title}</h3>
-          <div>
-            ${isEditing ? html`
-              <dees-button 
-                @click=${() => this.saveConfig(key)}
-                type="highlighted"
-              >
-                Save
-              </dees-button>
-              <dees-button 
-                @click=${() => this.cancelEdit()}
-              >
-                Cancel
-              </dees-button>
-            ` : html`
-              <dees-button 
-                @click=${() => this.startEdit(key, config)}
-              >
-                Edit
-              </dees-button>
-            `}
-          </div>
+          <h3 class="sectionTitle">
+            <dees-icon icon="${icon}"></dees-icon>
+            ${title}
+          </h3>
+          ${this.renderStatusBadge(isEnabled)}
         </div>
         <div class="sectionContent">
-          ${isEditing ? html`
-            <textarea 
-              class="configEditor"
-              @input=${(e) => this.editedConfig = e.target.value}
-              .value=${JSON.stringify(config, null, 2)}
-            ></textarea>
-          ` : html`
-            ${this.renderConfigFields(config)}
+          ${config ? this.renderConfigFields(config) : html`
+            <div class="fieldValue empty">Not configured</div>
           `}
         </div>
       </div>
     `;
   }
 
-  private renderConfigFields(config: any, prefix = '') {
+  private renderStatusBadge(enabled: boolean): TemplateResult {
+    return enabled
+      ? html`<span class="statusBadge enabled"><dees-icon icon="lucide:check"></dees-icon>Enabled</span>`
+      : html`<span class="statusBadge disabled"><dees-icon icon="lucide:x"></dees-icon>Disabled</span>`;
+  }
+
+  private renderConfigFields(config: any, prefix = ''): TemplateResult | TemplateResult[] {
     if (!config || typeof config !== 'object') {
-      return html`<div class="fieldValue">${config}</div>`;
+      return html`<div class="fieldValue">${this.formatValue(config)}</div>`;
     }
 
     return Object.entries(config).map(([key, value]) => {
       const fieldName = prefix ? `${prefix}.${key}` : key;
-      
-      if (typeof value === 'object' && !Array.isArray(value)) {
+      const displayName = this.formatFieldName(key);
+
+      // Handle boolean values with badges
+      if (typeof value === 'boolean') {
         return html`
           <div class="configField">
-            <label class="fieldLabel">${fieldName}</label>
-            ${this.renderConfigFields(value, fieldName)}
+            <label class="fieldLabel">${displayName}</label>
+            ${this.renderStatusBadge(value)}
           </div>
         `;
       }
-      
+
+      // Handle arrays
+      if (Array.isArray(value)) {
+        return html`
+          <div class="configField">
+            <label class="fieldLabel">${displayName}</label>
+            ${this.renderArrayValue(value, key)}
+          </div>
+        `;
+      }
+
+      // Handle nested objects
+      if (typeof value === 'object' && value !== null) {
+        return html`
+          <div class="configField">
+            <label class="fieldLabel">${displayName}</label>
+            <div class="nestedFields">
+              ${this.renderConfigFields(value, fieldName)}
+            </div>
+          </div>
+        `;
+      }
+
+      // Handle primitive values
       return html`
         <div class="configField">
-          <label class="fieldLabel">${fieldName}</label>
-          <div class="fieldValue">
-            ${Array.isArray(value) ? value.join(', ') : value}
-          </div>
+          <label class="fieldLabel">${displayName}</label>
+          <div class="fieldValue">${this.formatValue(value, key)}</div>
         </div>
       `;
     });
   }
 
-  private startEdit(section: string, config: any) {
-    this.editingSection = section;
-    this.editedConfig = JSON.stringify(config, null, 2);
-  }
-
-  private cancelEdit() {
-    this.editingSection = null;
-    this.editedConfig = null;
-  }
-
-  private async saveConfig(section: string) {
-    try {
-      const parsedConfig = JSON.parse(this.editedConfig);
-      
-      await appstate.configStatePart.dispatchAction(appstate.updateConfigurationAction, {
-        section,
-        config: parsedConfig,
-      });
-      
-      this.editingSection = null;
-      this.editedConfig = null;
-      
-      // Configuration updated successfully
-    } catch (error) {
-      console.error(`Error updating configuration:`, error);
+  private renderArrayValue(arr: any[], fieldKey: string): TemplateResult {
+    if (arr.length === 0) {
+      return html`<div class="fieldValue empty">None configured</div>`;
     }
+
+    // Determine if we should show as pills/tags
+    const showAsPills = arr.every(item => typeof item === 'string' || typeof item === 'number');
+
+    if (showAsPills) {
+      const itemLabel = this.getArrayItemLabel(fieldKey, arr.length);
+      return html`
+        <div class="arrayCount">${arr.length} ${itemLabel}</div>
+        <div class="arrayItems">
+          ${arr.map(item => html`<span class="arrayItem">${item}</span>`)}
+        </div>
+      `;
+    }
+
+    // For complex arrays, show as JSON
+    return html`
+      <div class="fieldValue">
+        ${arr.length} items configured
+      </div>
+    `;
   }
-}
+
+  private getArrayItemLabel(fieldKey: string, count: number): string {
+    const labels: Record<string, [string, string]> = {
+      ports: ['port', 'ports'],
+      domains: ['domain', 'domains'],
+      nameservers: ['nameserver', 'nameservers'],
+      blockList: ['IP', 'IPs'],
+    };
+
+    const label = labels[fieldKey] || ['item', 'items'];
+    return count === 1 ? label[0] : label[1];
+  }
+
+  private formatFieldName(key: string): string {
+    // Convert camelCase to readable format
+    return key
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, str => str.toUpperCase())
+      .trim();
+  }
+
+  private formatValue(value: any, fieldKey?: string): string | TemplateResult {
+    if (value === null || value === undefined) {
+      return html`<span class="empty">Not set</span>`;
+    }
+
+    if (typeof value === 'number') {
+      // Format bytes
+      if (fieldKey?.toLowerCase().includes('size') || fieldKey?.toLowerCase().includes('bytes')) {
+        return html`<span class="numericValue">${this.formatBytes(value)}</span>`;
+      }
+      // Format time values
+      if (fieldKey?.toLowerCase().includes('ttl') || fieldKey?.toLowerCase().includes('timeout')) {
+        return html`<span class="numericValue">${value} seconds</span>`;
+      }
+      // Format port numbers
+      if (fieldKey?.toLowerCase().includes('port')) {
+        return html`<span class="numericValue">${value}</span>`;
+      }
+      // Format counts with separators
+      return html`<span class="numericValue">${value.toLocaleString()}</span>`;
+    }
+
+    return String(value);
+  }
+
+  private formatBytes(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+}

ts_web/readme.md

@@ -128,8 +128,7 @@ interface IConfigState {
 - `loginAction` - Authenticate user
 - `logoutAction` - End session
 - `fetchAllStatsAction` - Refresh all statistics
-- `fetchConfigurationAction` - Load configuration
-- `updateConfigurationAction` - Save configuration changes
+- `fetchConfigurationAction` - Load configuration (read-only)
 
 ## Client-Side Routing