From 51b4312cc084451b9de561ae89c7cdf6be002754 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Mon, 16 Mar 2026 14:19:49 +0000
Subject: [PATCH] fix(platform-service-detail-view): replace custom service log
 markup with dees-chart-log in the platform service detail view

---
 changelog.md                                  |  7 ++
 ts_web/00_commitinfo_data.ts                  |  2 +-
 .../sz-platform-service-detail-view.ts        | 85 +++----------------
 3 files changed, 19 insertions(+), 75 deletions(-)

diff --git a/changelog.md b/changelog.md
index 239c247..5790adb 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-03-16 - 2.6.1 - fix(platform-service-detail-view)
+replace custom service log markup with dees-chart-log in the platform service detail view
+
+- Removes bespoke log container styles and rendering logic in favor of the shared dees-chart-log component
+- Normalizes log timestamps to ISO format before passing entries to the chart component
+- Enables log auto-scroll, entry limits, and metrics display for service logs
+
 ## 2026-03-16 - 2.6.0 - feat(service-create-view)
 add platform service toggles for MongoDB, S3, and ClickHouse provisioning
 
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index c08f7c1..df5c898 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '2.6.0',
+  version: '2.6.1',
   description: 'UI component catalog for serve.zone'
 }
diff --git a/ts_web/elements/sz-platform-service-detail-view.ts b/ts_web/elements/sz-platform-service-detail-view.ts
index 8965fa6..073d5a2 100644
--- a/ts_web/elements/sz-platform-service-detail-view.ts
+++ b/ts_web/elements/sz-platform-service-detail-view.ts
@@ -363,56 +363,6 @@ export class SzPlatformServiceDetailView extends DeesElement {
         background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
       }
 
-      .log-container {
-        background: ${cssManager.bdTheme('#18181b', '#09090b')};
-        border-radius: 6px;
-        padding: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-        font-size: 12px;
-        line-height: 1.6;
-      }
-
-      .log-entry {
-        display: flex;
-        gap: 12px;
-        padding: 4px 0;
-      }
-
-      .log-timestamp {
-        color: #71717a;
-        flex-shrink: 0;
-      }
-
-      .log-level {
-        flex-shrink: 0;
-        width: 50px;
-        text-transform: uppercase;
-        font-weight: 500;
-      }
-
-      .log-level.info {
-        color: #60a5fa;
-      }
-
-      .log-level.warn {
-        color: #fbbf24;
-      }
-
-      .log-level.error {
-        color: #f87171;
-      }
-
-      .log-level.debug {
-        color: #a1a1aa;
-      }
-
-      .log-message {
-        color: #fafafa;
-        word-break: break-word;
-      }
-
       .config-item {
         display: flex;
         justify-content: space-between;
@@ -637,30 +587,17 @@ export class SzPlatformServiceDetailView extends DeesElement {
         ` : ''}
 
         <!-- Logs -->
-        <div class="section full-width">
-          <div class="section-header">
-            <div class="section-title">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="4 17 10 11 4 5"></polyline>
-                <line x1="12" y1="19" x2="20" y2="19"></line>
-              </svg>
-              Logs
-            </div>
-          </div>
-          <div class="section-content">
-            <div class="log-container">
-              ${this.logs.length > 0 ? this.logs.map(log => html`
-                <div class="log-entry">
-                  <span class="log-timestamp">${log.timestamp}</span>
-                  <span class="log-level ${log.level}">${log.level}</span>
-                  <span class="log-message">${log.message}</span>
-                </div>
-              `) : html`
-                <div style="color: #71717a; text-align: center; padding: 20px;">No logs available</div>
-              `}
-            </div>
-          </div>
-        </div>
+        <dees-chart-log
+          .label=${'Service Logs'}
+          .logEntries=${this.logs.map(log => ({
+            timestamp: log.timestamp.includes('T') ? log.timestamp : new Date(log.timestamp).toISOString(),
+            level: log.level as 'debug' | 'info' | 'warn' | 'error',
+            message: log.message,
+          }))}
+          .autoScroll=${true}
+          .maxEntries=${2000}
+          .showMetrics=${true}
+        ></dees-chart-log>
       </div>
     `;
   }