feat(logs): replace custom logs list with dees-chart-log component and push logs to chart, add log mapping and lifecycle sync, and bump smartlog dependency

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2026-02-20 - 7.2.0 - feat(logs)
+replace custom logs list with dees-chart-log component and push logs to chart, add log mapping and lifecycle sync, and bump smartlog dependency
+
+- Replaced the legacy in-component log list and styling with a dees-chart-log element to render application logs.
+- Added updated() lifecycle handler to push new logs to the chart and new helper methods pushLogsToChart() and getMappedLogEntries() to map log entries to the chart's expected format.
+- Removed the streaming toggle, getActiveFilters(), legacy CSS for the log list, and the old per-entry rendering markup.
+- Added explicit typing for dropdown @selectedOption handlers (e: any).
+- Bumped dependency @push.rocks/smartlog from ^3.2.0 to ^3.2.1 in package.json.
+
 ## 2026-02-19 - 7.1.0 - feat(ops/monitoring)
 add in-memory log buffer, metrics time-series and ops UI integration
 

package.json

@@ -42,7 +42,7 @@
     "@push.rocks/smartfile": "^13.1.2",
     "@push.rocks/smartguard": "^3.1.0",
     "@push.rocks/smartjwt": "^2.2.1",
-    "@push.rocks/smartlog": "^3.2.0",
+    "@push.rocks/smartlog": "^3.2.1",
     "@push.rocks/smartmetrics": "^3.0.1",
     "@push.rocks/smartmongo": "^5.1.0",
     "@push.rocks/smartmta": "^5.2.2",

pnpm-lock.yaml

@@ -54,8 +54,8 @@ importers:
         specifier: ^2.2.1
         version: 2.2.1
       '@push.rocks/smartlog':
-        specifier: ^3.2.0
+        specifier: ^3.2.1
-        version: 3.2.0
+        version: 3.2.1
       '@push.rocks/smartmetrics':
         specifier: ^3.0.1
         version: 3.0.1
@@ -960,8 +960,8 @@ packages:
   '@push.rocks/smartlog-interfaces@3.0.2':
     resolution: {integrity: sha512-8hGRTJehbsFSJxLhCQkA018mZtXVPxPTblbg9VaE/EqISRzUw+eosJ2EJV7M4Qu0eiTJZjnWnNLn8CkD77ziWw==}
 
-  '@push.rocks/smartlog@3.2.0':
+  '@push.rocks/smartlog@3.2.1':
-    resolution: {integrity: sha512-d6IzsSG8HTmgxr8c9BVzZWpn8m3c17b5O+orHdwrlgHqPVa0+WXMe1ezItuPVZH5q6i8h+OfCv382PTloNiweg==}
+    resolution: {integrity: sha512-x9/P59pfzY6HOGYmYrhqmoRl/pliTVx44g2Vbb8dIr/0zA39cAJHlPze1+UGncn37XKGmutK2iLSsJLEsexD0A==}
 
   '@push.rocks/smartmail@2.2.0':
     resolution: {integrity: sha512-28K4HAcda7ODUUpFCgbS/uA+eqwVRcmLJERIdM9AvLHXaHAPLHH97HmwPPcAu9Sp3z05Um0inmDF51X6yVVkcw==}
@@ -4300,7 +4300,7 @@ snapshots:
       '@push.rocks/smartfeed': 1.4.0
       '@push.rocks/smartfile': 11.2.7
       '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartlog-destination-devtools': 1.0.12
       '@push.rocks/smartlog-interfaces': 3.0.2
       '@push.rocks/smartmanifest': 2.0.2
@@ -4349,7 +4349,7 @@ snapshots:
       '@push.rocks/smartfile': 13.1.2
       '@push.rocks/smartfs': 1.3.1
       '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartlog-destination-devtools': 1.0.12
       '@push.rocks/smartlog-interfaces': 3.0.2
       '@push.rocks/smartmanifest': 2.0.2
@@ -4416,7 +4416,7 @@ snapshots:
   '@apiclient.xyz/cloudflare@7.1.0':
     dependencies:
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrequest': 5.0.1
       '@push.rocks/smartstring': 4.1.0
@@ -5150,7 +5150,7 @@ snapshots:
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartfile': 13.1.2
       '@push.rocks/smartfs': 1.3.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpath': 6.0.0
       '@push.rocks/smartpromise': 4.2.3
       typescript: 5.9.3
@@ -5171,7 +5171,7 @@ snapshots:
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartfs': 1.3.1
       '@push.rocks/smartinteract': 2.0.16
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartlog-destination-local': 9.0.2
       '@push.rocks/smartpath': 6.0.0
       '@push.rocks/smartpromise': 4.2.3
@@ -5197,7 +5197,7 @@ snapshots:
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartfile': 13.1.2
       '@push.rocks/smartfs': 1.3.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartnpm': 2.0.6
       '@push.rocks/smartpath': 6.0.0
       '@push.rocks/smartrequest': 5.0.1
@@ -5232,7 +5232,7 @@ snapshots:
       '@push.rocks/smartexpect': 2.5.0
       '@push.rocks/smartfile': 11.2.7
       '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartmongo': 2.2.0(socks@2.8.7)
       '@push.rocks/smartnetwork': 4.4.0
       '@push.rocks/smartpath': 6.0.0
@@ -5278,7 +5278,7 @@ snapshots:
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartfs': 1.3.1
       '@push.rocks/smartinteract': 2.0.16
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartlog-destination-local': 9.0.2
       '@push.rocks/smartshell': 3.3.0
       '@push.rocks/smartwatch': 6.3.0
@@ -5711,7 +5711,7 @@ snapshots:
       '@push.rocks/qenv': 6.1.3
       '@push.rocks/smartfile': 11.2.7
       '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpath': 6.0.0
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
@@ -5735,7 +5735,7 @@ snapshots:
       '@api.global/typedrequest': 3.2.6
       '@configvault.io/interfaces': 1.0.17
       '@push.rocks/smartfile': 11.2.7
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpath': 6.0.0
 
   '@push.rocks/smartacme@9.1.3(socks@2.8.7)':
@@ -5746,7 +5746,7 @@ snapshots:
       '@push.rocks/smartdata': 7.0.15(socks@2.8.7)
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartdns': 7.8.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartnetwork': 4.4.0
       '@push.rocks/smartstring': 4.1.0
       '@push.rocks/smarttime': 4.2.3
@@ -5856,7 +5856,7 @@ snapshots:
   '@push.rocks/smartcli@4.0.20':
     dependencies:
       '@push.rocks/lik': 6.2.2
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartobject': 1.0.12
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
@@ -5881,7 +5881,7 @@ snapshots:
     dependencies:
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartmongo': 2.2.0(socks@2.8.7)
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
@@ -5910,7 +5910,7 @@ snapshots:
     dependencies:
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartmongo': 2.2.0(socks@2.8.7)
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
@@ -6102,7 +6102,7 @@ snapshots:
       '@api.global/typedrequest-interfaces': 2.0.2
       '@tsclass/tsclass': 4.4.4
 
-  '@push.rocks/smartlog@3.2.0':
+  '@push.rocks/smartlog@3.2.1':
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
       '@push.rocks/consolecolor': 2.0.3
@@ -6149,7 +6149,7 @@ snapshots:
   '@push.rocks/smartmetrics@3.0.1':
     dependencies:
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
 
   '@push.rocks/smartmime@1.0.6':
     dependencies:
@@ -6218,7 +6218,7 @@ snapshots:
     dependencies:
       '@push.rocks/smartfile': 13.1.2
       '@push.rocks/smartfs': 1.3.1
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartmail': 2.2.0
       '@push.rocks/smartpath': 6.0.0
       '@push.rocks/smartrust': 1.2.1
@@ -6324,7 +6324,7 @@ snapshots:
   '@push.rocks/smartproxy@25.7.8':
     dependencies:
       '@push.rocks/smartcrypto': 2.0.4
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartrust': 1.2.1
       '@tsclass/tsclass': 9.3.0
       minimatch: 10.2.1
@@ -6405,7 +6405,7 @@ snapshots:
       '@cfworker/json-schema': 4.1.1
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartenv': 6.0.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpath': 6.0.0
       ws: 8.19.0
     transitivePeerDependencies:
@@ -6440,7 +6440,7 @@ snapshots:
       '@push.rocks/smartdelay': 3.0.5
       '@push.rocks/smartenv': 5.0.13
       '@push.rocks/smartjson': 5.2.0
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
       '@push.rocks/smarttime': 4.1.1
@@ -6555,7 +6555,7 @@ snapshots:
       '@design.estate/dees-element': 2.1.6
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
       '@push.rocks/smarttime': 4.1.1
@@ -6571,7 +6571,7 @@ snapshots:
       '@design.estate/dees-element': 2.1.6
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
       '@push.rocks/smarttime': 4.1.1
@@ -6587,7 +6587,7 @@ snapshots:
       '@design.estate/dees-element': 2.1.6
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartlog': 3.2.0
+      '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpromise': 4.2.3
       '@push.rocks/smartrx': 3.0.10
       '@push.rocks/smarttime': 4.2.3

ts/00_commitinfo_data.ts

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

ts_web/00_commitinfo_data.ts

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

ts_web/elements/ops-view-logs.ts

@@ -55,87 +55,20 @@ export class OpsViewLogs extends DeesElement {
         align-items: center;
         gap: 8px;
       }
-
-      .logContainer {
-        background: ${cssManager.bdTheme('#f8f9fa', '#1e1e1e')};
-        border-radius: 8px;
-        padding: 16px;
-        max-height: 600px;
-        overflow-y: auto;
-        font-family: 'Consolas', 'Monaco', monospace;
-        font-size: 13px;
-      }
-
-      .logEntry {
-        margin-bottom: 8px;
-        line-height: 1.5;
-      }
-
-      .logTimestamp {
-        color: ${cssManager.bdTheme('#7a7a7a', '#7a7a7a')};
-        margin-right: 8px;
-      }
-
-      .logLevel {
-        font-weight: bold;
-        margin-right: 8px;
-        padding: 2px 6px;
-        border-radius: 3px;
-        font-size: 11px;
-      }
-
-      .logLevel.debug { 
-        color: ${cssManager.bdTheme('#6a9955', '#6a9955')}; 
-        background: ${cssManager.bdTheme('rgba(106, 153, 85, 0.1)', 'rgba(106, 153, 85, 0.1)')};
-      }
-      .logLevel.info { 
-        color: ${cssManager.bdTheme('#569cd6', '#569cd6')}; 
-        background: ${cssManager.bdTheme('rgba(86, 156, 214, 0.1)', 'rgba(86, 156, 214, 0.1)')};
-      }
-      .logLevel.warn { 
-        color: ${cssManager.bdTheme('#ce9178', '#ce9178')}; 
-        background: ${cssManager.bdTheme('rgba(206, 145, 120, 0.1)', 'rgba(206, 145, 120, 0.1)')};
-      }
-      .logLevel.error { 
-        color: ${cssManager.bdTheme('#f44747', '#f44747')}; 
-        background: ${cssManager.bdTheme('rgba(244, 71, 71, 0.1)', 'rgba(244, 71, 71, 0.1)')};
-      }
-
-      .logCategory {
-        color: ${cssManager.bdTheme('#c586c0', '#c586c0')};
-        margin-right: 8px;
-      }
-
-      .logMessage {
-        color: ${cssManager.bdTheme('#333', '#d4d4d4')};
-      }
-
-      .noLogs {
-        color: ${cssManager.bdTheme('#7a7a7a', '#7a7a7a')};
-        text-align: center;
-        padding: 40px;
-      }
     `,
   ];
 
   public render() {
     return html`
       <ops-sectionheading>Logs</ops-sectionheading>
-      
+
       <div class="controls">
         <div class="filterGroup">
-          <dees-button 
+          <dees-button
             @click=${() => this.fetchLogs()}
           >
             Refresh Logs
           </dees-button>
-          
-          <dees-button 
-            @click=${() => this.toggleStreaming()}
-            .type=${this.logState.isStreaming ? 'highlighted' : 'normal'}
-          >
-            ${this.logState.isStreaming ? 'Stop Streaming' : 'Start Streaming'}
-          </dees-button>
         </div>
 
         <div class="filterGroup">
@@ -143,7 +76,7 @@ export class OpsViewLogs extends DeesElement {
           <dees-input-dropdown
             .options=${['all', 'debug', 'info', 'warn', 'error']}
             .selectedOption=${'all'}
-            @selectedOption=${(e) => this.updateFilter('level', e.detail)}
+            @selectedOption=${(e: any) => this.updateFilter('level', e.detail)}
           ></dees-input-dropdown>
         </div>
 
@@ -152,7 +85,7 @@ export class OpsViewLogs extends DeesElement {
           <dees-input-dropdown
             .options=${['all', 'smtp', 'dns', 'security', 'system', 'email']}
             .selectedOption=${'all'}
-            @selectedOption=${(e) => this.updateFilter('category', e.detail)}
+            @selectedOption=${(e: any) => this.updateFilter('category', e.detail)}
           ></dees-input-dropdown>
         </div>
 
@@ -161,34 +94,55 @@ export class OpsViewLogs extends DeesElement {
           <dees-input-dropdown
             .options=${['50', '100', '200', '500']}
             .selectedOption=${'100'}
-            @selectedOption=${(e) => this.updateFilter('limit', e.detail)}
+            @selectedOption=${(e: any) => this.updateFilter('limit', e.detail)}
           ></dees-input-dropdown>
         </div>
       </div>
 
-      <div class="logContainer">
+      <dees-chart-log
-        ${this.logState.recentLogs.length > 0 ? 
+        .label=${'Application Logs'}
-          this.logState.recentLogs.map(log => html`
+        .autoScroll=${true}
-            <div class="logEntry">
+        .maxEntries=${2000}
-              <span class="logTimestamp">${new Date(log.timestamp).toLocaleTimeString()}</span>
+        .showMetrics=${true}
-              <span class="logLevel ${log.level}">${log.level.toUpperCase()}</span>
+      ></dees-chart-log>
-              <span class="logCategory">[${log.category}]</span>
-              <span class="logMessage">${log.message}</span>
-            </div>
-          `) : html`
-            <div class="noLogs">No logs to display</div>
-          `
-        }
-      </div>
     `;
   }
 
   async connectedCallback() {
     super.connectedCallback();
-    // Auto-fetch logs when the view mounts
     this.fetchLogs();
   }
 
+  async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('logState')) {
+      this.pushLogsToChart();
+    }
+  }
+
+  private async pushLogsToChart() {
+    const chartLog = this.shadowRoot?.querySelector('dees-chart-log') as any;
+    if (!chartLog) return;
+
+    // Ensure the chart element has finished its own initialization
+    await chartLog.updateComplete;
+
+    chartLog.clearLogs();
+    const entries = this.getMappedLogEntries();
+    if (entries.length > 0) {
+      chartLog.updateLog(entries);
+    }
+  }
+
+  private getMappedLogEntries() {
+    return this.logState.recentLogs.map((log) => ({
+      timestamp: new Date(log.timestamp).toISOString(),
+      level: log.level as 'debug' | 'info' | 'warn' | 'error',
+      message: log.message,
+      source: log.category,
+    }));
+  }
+
   private async fetchLogs() {
     await appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, {
       limit: this.filterLimit,
@@ -214,17 +168,4 @@ export class OpsViewLogs extends DeesElement {
 
     this.fetchLogs();
   }
-
+}
-  private getActiveFilters() {
-    return {
-      level: this.filterLevel,
-      category: this.filterCategory,
-      limit: this.filterLimit,
-    };
-  }
-
-  private toggleStreaming() {
-    // TODO: Implement log streaming with VirtualStream
-    console.log('Streaming toggle not yet implemented');
-  }
-}