go-duck-cli 1.3.372 → 1.4.5

package/templates/go/router.go.hbs

@@ -2,9 +2,12 @@ package router
 
 import (
     "context"
+    "encoding/json"
     "fmt"
+    "io"
     "log"
     "net/http"
+    "os"
     "strings"
     "time"
 
@@ -15,6 +18,9 @@ import (
     "gorm.io/driver/postgres"
     "gorm.io/gorm"
     "gorm.io/plugin/opentelemetry/tracing"
+    "github.com/prometheus/client_golang/prometheus/promhttp"
+    "github.com/shirou/gopsutil/v3/cpu"
+    "github.com/shirou/gopsutil/v3/mem"
     {{#if multitenancy_enabled}}
     "{{app_name}}/management"
     {{/if}}
@@ -148,6 +154,8 @@ func SetupRouter(appConfig *config.Config) *gin.Engine {
         log.Println("✅ Connected to master MongoDB")
     }
 
+    // Intercept Gin standard output for the live log stream
+    gin.DefaultWriter = io.MultiWriter(os.Stdout, logger.GlobalLogBroker)
     r := gin.Default()
 
     // 11. Global Middleware (OTel, Rate Limit & CORS)
@@ -157,15 +165,119 @@ func SetupRouter(appConfig *config.Config) *gin.Engine {
     r.Use(middleware.RateLimitMiddleware(appConfig))
     r.Use(middleware.CORSMiddleware(appConfig))
 
+    if appConfig.GoDuck.Telemetry.Metrics.PrometheusEnabled || appConfig.GoDuck.Telemetry.Metrics.StreamEnabled {
+        r.Use(telemetry.MetricsTrackingMiddleware(appConfig))
+    }
+
     // Health Check
     r.GET("/health", func(c *gin.Context) {
         c.JSON(http.StatusOK, gin.H{"status": "UP"})
     })
 
+    // Prometheus Metrics
+    if appConfig.GoDuck.Telemetry.Metrics.PrometheusEnabled {
+        r.GET("/metrics", gin.WrapH(promhttp.Handler()))
+    }
+
+    // Full JSON System Metrics (JHipster Parity)
+    if appConfig.GoDuck.Telemetry.Metrics.PrometheusEnabled || appConfig.GoDuck.Telemetry.Metrics.StreamEnabled {
+        r.GET("/api/system/metrics", func(c *gin.Context) {
+            sysMetrics := telemetry.CollectSystemMetrics()
+            appMetrics := telemetry.GetGlobalMetrics()
+
+            appMetrics.mu.RLock()
+            defer appMetrics.mu.RUnlock()
+
+            c.JSON(http.StatusOK, gin.H{
+                "system": sysMetrics,
+                "endpoints": appMetrics.Endpoints,
+                "status_codes": appMetrics.StatusCodes,
+                "failed_calls": appMetrics.FailedCalls,
+            })
+        })
+    }
+
+    // Live Server Logs Stream (SSE)
+    if appConfig.GoDuck.Telemetry.Metrics.StreamEnabled {
+        r.GET("/api/system/logs/stream", func(c *gin.Context) {
+            c.Header("Content-Type", "text/event-stream")
+            c.Header("Cache-Control", "no-cache")
+            c.Header("Connection", "keep-alive")
+            c.Header("Access-Control-Allow-Origin", "*")
+
+            clientChan := make(chan []byte, 100)
+            logger.GlobalLogBroker.AddClient(clientChan)
+
+            defer func() {
+                logger.GlobalLogBroker.RemoveClient(clientChan)
+            }()
+
+            c.Stream(func(w io.Writer) bool {
+                select {
+                case <-c.Request.Context().Done():
+                    return false
+                case msg := <-clientChan:
+                    c.SSEvent("log", string(msg))
+                    return true
+                }
+            })
+        })
+    }
+
+    // Real-Time System Stream (SSE)
+    if appConfig.GoDuck.Telemetry.Metrics.StreamEnabled {
+        r.GET("/api/system/stream", func(c *gin.Context) {
+            c.Header("Content-Type", "text/event-stream")
+            c.Header("Cache-Control", "no-cache")
+            c.Header("Connection", "keep-alive")
+            c.Header("Access-Control-Allow-Origin", "*")
+
+            interval := appConfig.GoDuck.Telemetry.Metrics.StreamInterval
+            if interval == 0 {
+                interval = time.Second
+            }
+
+            ticker := time.NewTicker(interval)
+            defer ticker.Stop()
+
+            c.Stream(func(w io.Writer) bool {
+                select {
+                case <-c.Request.Context().Done():
+                    return false
+                case <-ticker.C:
+                    cpuPercent, _ := cpu.Percent(0, false)
+                    memStats, _ := mem.VirtualMemory()
+                    
+                    var cpuUsage float64
+                    if len(cpuPercent) > 0 {
+                        cpuUsage = cpuPercent[0]
+                    }
+
+                    // Simple load calculation
+                    loadPct := (cpuUsage + memStats.UsedPercent) / 2.0
+
+                    payload := map[string]interface{}{
+                        "timestamp": time.Now().Format(time.RFC3339),
+                        "cpu_percent": cpuUsage,
+                        "mem_percent": memStats.UsedPercent,
+                        "mem_used_mb": memStats.Used / 1024 / 1024,
+                        "mem_total_mb": memStats.Total / 1024 / 1024,
+                        "load_percentage": loadPct,
+                    }
+                    
+                    data, _ := json.Marshal(payload)
+                    c.SSEvent("message", string(data))
+                    return true
+                }
+            })
+        })
+    }
+
     // Swagger Docs & UI
     // Expose standard OpenAPI endpoints (JHipster / Spring / WSO2 compatibility)
     r.StaticFile("/v3/api-docs", "./docs/swagger.json")
     r.StaticFile("/swagger.json", "./docs/swagger.json") // Legacy fallback
+    r.StaticFile("/api/mqtt-topics", "./docs/mqtt_topics.json5")
     r.StaticFile("/logo.png", "./docs/web/logo.png")
     r.GET("/swagger", func(c *gin.Context) {
         swaggerHTML := `<!DOCTYPE html>
@@ -175,6 +287,7 @@ func SetupRouter(appConfig *config.Config) *gin.Engine {
   <title>Swagger UI (Secured)</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui.css" />
   <script src="https://cdn.jsdelivr.net/npm/keycloak-js@24.0.4/dist/keycloak.min.js"></script>
+  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
   <style>
     html { box-sizing: border-box; overflow: -moz-scrollbars-vertical; overflow-y: scroll; }
     *, *:before, *:after { box-sizing: inherit; }
@@ -271,6 +384,157 @@ func SetupRouter(appConfig *config.Config) *gin.Engine {
       background: #2ecc71;
       box-shadow: 0 0 8px #2ecc71;
     }
+
+    /* MQTT Topics Viewer */
+    #mqtt-modal {
+      display: none;
+      position: fixed;
+      top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.6);
+      z-index: 2000;
+      justify-content: center;
+      align-items: center;
+    }
+    .mqtt-content {
+      background: #000;
+      width: 80%; max-width: 900px;
+      border-radius: 8px;
+      padding: 20px;
+      color: #00ff00;
+      font-family: monospace;
+      position: relative;
+      box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+    }
+    .mqtt-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #333;
+      padding-bottom: 10px;
+    }
+    .mqtt-close { color: white; cursor: pointer; font-size: 1.5rem; }
+    .mqtt-dl { background: #333; color: white; border: none; padding: 5px 10px; cursor: pointer; border-radius: 4px; }
+    .mqtt-dl:hover { background: #555; }
+    
+    .syntax-punct { color: #ff0000; }
+    
+    /* Interactive MQTT Actions */
+    .mqtt-action-btn {
+      margin-left: 10px; padding: 2px 8px; border: none; border-radius: 4px;
+      font-size: 0.8rem; font-weight: bold; color: white; cursor: pointer;
+      vertical-align: middle;
+    }
+    #mqtt-action-modal {
+      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.8); z-index: 3000; justify-content: center; align-items: center;
+    }
+    .mqtt-action-content {
+      background: #1e1e1e; width: 80%; max-width: 800px; border-radius: 8px; padding: 20px;
+      color: #fff; font-family: monospace; position: relative;
+    }
+    .mqtt-console {
+      background: #000; color: #0f0; padding: 10px; height: 300px; overflow-y: auto;
+      border-radius: 4px; margin-top: 10px; border: 1px solid #333; white-space: pre-wrap;
+    }
+    .mqtt-editor {
+      width: 100%; height: 200px; background: #000; color: #0f0; font-family: monospace;
+      padding: 10px; border: 1px solid #333; border-radius: 4px; margin-top: 10px;
+    }
+    .broker-input {
+      background: #333; color: #fff; border: 1px solid #555; padding: 5px;
+      border-radius: 4px; width: 250px; margin-left: 15px; font-family: monospace;
+    }
+
+    /* System Metrics Dashboard */
+    #sys-metrics-modal {
+      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.8); z-index: 4000; justify-content: center; align-items: center;
+    }
+    .metrics-content {
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(20px);
+      width: 90%; max-width: 1200px; height: 85vh; border-radius: 12px;
+      padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+      display: flex; flex-direction: column;
+    }
+    .metrics-header {
+      display: flex; justify-content: space-between; align-items: center;
+      border-bottom: 2px solid #eaeaea; padding-bottom: 15px; margin-bottom: 20px;
+    }
+    .metrics-header h3 { margin: 0; font-size: 1.5rem; color: #2c3e50; }
+    .metrics-close { color: #888; cursor: pointer; font-size: 2rem; line-height: 1; }
+    .metrics-close:hover { color: #333; }
+    
+    .metrics-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
+    .metrics-tab {
+      padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer;
+      font-weight: 600; background: #eee; color: #555; transition: all 0.2s;
+    }
+    .metrics-tab.active { background: #4a90e2; color: white; }
+    
+    .metrics-dashboard-grid {
+      display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
+      overflow-y: auto; padding-right: 10px;
+    }
+    .metric-card {
+      background: white; border-radius: 8px; padding: 15px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #f0f0f0;
+    }
+    .metric-card.wide { grid-column: span 4; }
+    .metric-card.half { grid-column: span 2; }
+    .metric-title { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
+    .metric-value { font-size: 1.8rem; font-weight: 700; color: #2c3e50; display: flex; align-items: baseline; gap: 5px;}
+    .metric-unit { font-size: 1rem; color: #999; font-weight: normal; }
+    
+    .progress-bar-container {
+      width: 100%; height: 8px; background: #eee; border-radius: 4px; margin-top: 10px; overflow: hidden;
+    }
+    .progress-bar { height: 100%; background: #2ecc71; transition: width 0.5s ease-out, background 0.3s; }
+    
+    .endpoint-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+    .endpoint-table th, .endpoint-table td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; }
+    .endpoint-table th { color: #888; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; }
+    
+    #metrics-raw-view {
+      display: none; background: #1e1e1e; color: #d4d4d4; padding: 20px;
+      border-radius: 8px; overflow: auto; height: 100%; font-family: monospace;
+    }
+    .json-key { color: #9cdcfe; }
+    .json-string { color: #ce9178; }
+    .json-number { color: #b5cea8; }
+    .json-boolean { color: #569cd6; }
+
+    /* Live Server Logs */
+    #live-logs-modal {
+      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      background: rgba(0,0,0,0.8); z-index: 4000; justify-content: center; align-items: center;
+    }
+    .logs-content {
+      background: #1e1e1e; width: 90%; max-width: 1400px; height: 85vh; border-radius: 12px;
+      padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+      display: flex; flex-direction: column; overflow: hidden;
+    }
+    .logs-header {
+      background: #252526; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center;
+      border-bottom: 1px solid #333; color: #fff;
+    }
+    .logs-controls { display: flex; align-items: center; gap: 15px; }
+    .logs-search {
+      background: #3c3c3c; color: #fff; border: 1px solid #555; padding: 5px 10px;
+      border-radius: 4px; width: 250px; outline: none;
+    }
+    .logs-search:focus { border-color: #007acc; }
+    .logs-status { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
+    .logs-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
+    .logs-status-dot.paused { background: #f39c12; box-shadow: 0 0 8px #f39c12; }
+    .logs-body {
+      flex: 1; padding: 15px; overflow-y: auto; background: #1e1e1e;
+      color: #d4d4d4; font-family: monospace; font-size: 0.9rem; line-height: 1.4;
+      white-space: pre-wrap; word-wrap: break-word;
+    }
+    .log-line { margin: 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
+    .log-line:hover { background: rgba(255,255,255,0.02); }
+    .log-line.hidden { display: none; }
   </style>
 </head>
 <body>
@@ -292,11 +556,164 @@ func SetupRouter(appConfig *config.Config) *gin.Engine {
       <input type="text" id="tenant-input" class="tenant-input" placeholder="X-Tenant-ID" value="tenant_1" title="Multi-tenant DB Target" />
       <button id="login-btn" class="btn btn-login">Login with Keycloak</button>
       <button id="logout-btn" class="btn btn-logout">Logout</button>
+      <button id="mqtt-btn" class="btn" style="background: #2c3e50; color: white;">MQTT Topics</button>
+      <button id="sys-metrics-btn" class="btn" style="background: #8e44ad; color: white;">System Metrics</button>
+      <button id="live-logs-btn" class="btn" style="background: #d35400; color: white;" title="Stream Server Console Logs">Live Logs</button>
     </div>
   </div>
 
   <div id="swagger-ui"></div>
   
+  <div id="mqtt-modal">
+    <div class="mqtt-content">
+      <div class="mqtt-header">
+        <h3 style="margin: 0; color: white;">MQTT Topics Dictionary (JSON5)</h3>
+        <div>
+          <button class="mqtt-dl" id="mqtt-dl-btn">Download JSON5</button>
+          <span class="mqtt-close" id="mqtt-close">&times;</span>
+        </div>
+      </div>
+      <pre id="mqtt-viewer" style="overflow-x: auto; max-height: 70vh; margin: 0;"></pre>
+    </div>
+  </div>
+
+  <div id="mqtt-action-modal">
+    <div class="mqtt-action-content">
+      <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding-bottom: 10px;">
+        <div>
+          <h3 style="margin: 0; display: inline-block;"><span id="action-title">SUBSCRIBE</span>: <span id="action-topic" style="color: #3498db;"></span></h3>
+          <input type="text" id="broker-url" class="broker-input" value="ws://localhost:9001" title="Broker WS URL" />
+          <span id="broker-status" style="margin-left: 10px; font-size: 0.9rem; color: #f39c12;">Disconnected</span>
+        </div>
+        <span class="mqtt-close" id="mqtt-action-close">&times;</span>
+      </div>
+      
+      <!-- Subscribe View -->
+      <div id="view-subscribe" style="display: none;">
+        <div class="mqtt-console" id="mqtt-console">Waiting for messages...\n</div>
+      </div>
+      
+      <!-- Publish View -->
+      <div id="view-publish" style="display: none;">
+        <textarea id="mqtt-payload" class="mqtt-editor">{\n  "example": "payload"\n}</textarea>
+        <button id="mqtt-publish-btn" class="btn" style="background: #e74c3c; color: white; margin-top: 15px; width: 100%;">PUBLISH PAYLOAD</button>
+      </div>
+    </div>
+  </div>
+
+  <div id="sys-metrics-modal">
+    <div class="metrics-content">
+      <div class="metrics-header">
+        <h3>System Metrics Dashboard</h3>
+        <span class="metrics-close" id="sys-metrics-close">&times;</span>
+      </div>
+      
+      <div class="metrics-tabs">
+        <button class="metrics-tab active" id="tab-dashboard">Dashboard</button>
+        <button class="metrics-tab" id="tab-raw">Raw JSON</button>
+      </div>
+
+      <div id="metrics-dashboard-view" class="metrics-dashboard-grid">
+        <!-- CPU Card -->
+        <div class="metric-card">
+          <div class="metric-title">Process CPU</div>
+          <div class="metric-value"><span id="m-cpu">0.00</span><span class="metric-unit">%</span></div>
+          <div class="progress-bar-container"><div id="p-cpu" class="progress-bar" style="width: 0%"></div></div>
+        </div>
+        <!-- Memory Card -->
+        <div class="metric-card">
+          <div class="metric-title">Heap Alloc</div>
+          <div class="metric-value"><span id="m-heap">0</span><span class="metric-unit">MB</span></div>
+          <div class="progress-bar-container"><div id="p-heap" class="progress-bar" style="width: 0%"></div></div>
+        </div>
+        <!-- Goroutines Card -->
+        <div class="metric-card">
+          <div class="metric-title">Goroutines</div>
+          <div class="metric-value"><span id="m-goroutines">0</span></div>
+        </div>
+        <!-- Uptime Card -->
+        <div class="metric-card">
+          <div class="metric-title">Uptime</div>
+          <div class="metric-value" style="font-size: 1.2rem; margin-top: 5px;"><span id="m-uptime">-</span></div>
+        </div>
+        
+        <!-- GC Card -->
+        <div class="metric-card half">
+          <div class="metric-title">Garbage Collection</div>
+          <div style="display: flex; justify-content: space-around; margin-top: 15px;">
+            <div style="text-align: center;">
+              <div class="metric-value" style="justify-content: center;"><span id="m-gc-count">0</span></div>
+              <div style="font-size: 0.8rem; color: #888;">Total Runs</div>
+            </div>
+            <div style="text-align: center;">
+              <div class="metric-value" style="justify-content: center;"><span id="m-gc-pause">0</span><span class="metric-unit">ms</span></div>
+              <div style="font-size: 0.8rem; color: #888;">Total Pause Time</div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- HTTP Traffic Statuses -->
+        <div class="metric-card half">
+          <div class="metric-title">HTTP Traffic</div>
+          <div style="display: flex; justify-content: space-around; margin-top: 15px;">
+            <div style="text-align: center;">
+              <div class="metric-value" style="justify-content: center; color: #2ecc71;"><span id="m-http-ok">0</span></div>
+              <div style="font-size: 0.8rem; color: #888;">200 OK</div>
+            </div>
+            <div style="text-align: center;">
+              <div class="metric-value" style="justify-content: center; color: #e74c3c;"><span id="m-http-fail">0</span></div>
+              <div style="font-size: 0.8rem; color: #888;">Failed Calls (400+)</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Endpoints Table -->
+        <div class="metric-card wide">
+          <div class="metric-title">API Endpoints Performance</div>
+          <table class="endpoint-table">
+            <thead>
+              <tr>
+                <th>Endpoint</th>
+                <th>Hits</th>
+                <th>Mean Latency</th>
+                <th>Max Latency</th>
+              </tr>
+            </thead>
+            <tbody id="m-endpoints-body">
+              <tr><td colspan="4" style="text-align: center; color: #888;">No data available</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <pre id="metrics-raw-view"></pre>
+    </div>
+  </div>
+
+  <div id="live-logs-modal">
+    <div class="logs-content">
+      <div class="logs-header">
+        <div style="display: flex; align-items: center; gap: 15px;">
+          <h3 style="margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px;">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+            Server Terminal
+          </h3>
+          <div class="logs-status">
+            <div class="logs-status-dot" id="log-status-dot"></div>
+            <span id="log-status-text">Streaming (Space to Pause)</span>
+          </div>
+        </div>
+        <div class="logs-controls">
+          <input type="text" id="log-search" class="logs-search" placeholder="Filter logs (Ctrl+F behavior)..." />
+          <span class="metrics-close" id="live-logs-close" style="color: #fff; margin-left: 10px;">&times;</span>
+        </div>
+      </div>
+      <div class="logs-body" id="log-console-body">
+        <div style="color: #555;">Connecting to live log stream...</div>
+      </div>
+    </div>
+  </div>
+
   <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-bundle.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.15.5/swagger-ui-standalone-preset.js"></script>
   <script>
@@ -385,6 +802,397 @@ func SetupRouter(appConfig *config.Config) *gin.Engine {
           layout: "StandaloneLayout"
         });
       });
+
+      // MQTT Viewer Logic
+      const mqttModal = document.getElementById('mqtt-modal');
+      const actionModal = document.getElementById('mqtt-action-modal');
+      const actionTitle = document.getElementById('action-title');
+      const actionTopic = document.getElementById('action-topic');
+      const viewSub = document.getElementById('view-subscribe');
+      const viewPub = document.getElementById('view-publish');
+      const brokerInput = document.getElementById('broker-url');
+      const brokerStatus = document.getElementById('broker-status');
+      const mqttConsole = document.getElementById('mqtt-console');
+      const payloadEditor = document.getElementById('mqtt-payload');
+      
+      let rawJson5 = '';
+      let mqttClient = null;
+      let currentTopic = '';
+      
+      // Open Action Modal Logic (Global so inline onClick can call it)
+      window.openMqttAction = function(topic, action) {
+        currentTopic = topic;
+        actionTitle.innerText = action;
+        actionTopic.innerText = topic;
+        
+        if (action === 'SEND') {
+          viewSub.style.display = 'none';
+          viewPub.style.display = 'block';
+        } else {
+          viewSub.style.display = 'block';
+          viewPub.style.display = 'none';
+          mqttConsole.innerHTML = `Waiting for messages on ${topic}...\\n`;
+        }
+        
+        actionModal.style.display = 'flex';
+      };
+      
+      document.getElementById('mqtt-action-close').onclick = () => {
+        if (mqttClient) { mqttClient.end(); mqttClient = null; }
+        brokerStatus.innerText = 'Disconnected';
+        brokerStatus.style.color = '#f39c12';
+        actionModal.style.display = 'none';
+      };
+
+      // Metrics Dashboard Logic
+      const sysMetricsModal = document.getElementById('sys-metrics-modal');
+      let metricsInterval = null;
+
+      function syntaxHighlight(json) {
+        if (typeof json != 'string') {
+           json = JSON.stringify(json, undefined, 2);
+        }
+        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+            var cls = 'json-number';
+            if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                    cls = 'json-key';
+                } else {
+                    cls = 'json-string';
+                }
+            } else if (/true|false/.test(match)) {
+                cls = 'json-boolean';
+            } else if (/null/.test(match)) {
+                cls = 'json-null';
+            }
+            return '<span class="' + cls + '">' + match + '</span>';
+        });
+      }
+
+      function updateProgressBar(id, value, max) {
+        const el = document.getElementById(id);
+        let pct = (value / max) * 100;
+        if (pct > 100) pct = 100;
+        el.style.width = pct + "%";
+        if (pct > 85) el.style.background = '#e74c3c';
+        else if (pct > 60) el.style.background = '#f1c40f';
+        else el.style.background = '#2ecc71';
+      }
+
+      function fetchMetrics() {
+        const headers = {};
+        if (keycloak && keycloak.token) {
+          headers['Authorization'] = 'Bearer ' + keycloak.token;
+        }
+        const tenantId = document.getElementById('tenant-input').value;
+        if (tenantId) headers['X-Tenant-ID'] = tenantId;
+
+        fetch('/api/system/metrics', { headers })
+          .then(res => {
+            if (!res.ok) throw new Error('Status ' + res.status);
+            return res.json();
+          })
+          .then(data => {
+            // Update Dashboard UI
+            const sys = data.system;
+            document.getElementById('m-cpu').innerText = sys.process_cpu_usage.toFixed(2);
+            updateProgressBar('p-cpu', sys.process_cpu_usage, 100);
+
+            document.getElementById('m-heap').innerText = sys.heap_alloc_mb;
+            updateProgressBar('p-heap', sys.heap_alloc_mb, sys.heap_sys_mb > 0 ? sys.heap_sys_mb : 1024);
+
+            document.getElementById('m-goroutines').innerText = sys.goroutines;
+            document.getElementById('m-uptime').innerText = sys.uptime;
+            document.getElementById('m-gc-count').innerText = sys.num_gc;
+            document.getElementById('m-gc-pause').innerText = sys.gc_pause_total_ms;
+
+            document.getElementById('m-http-ok').innerText = data.status_codes['200'] ? data.status_codes['200'].count : 0;
+            document.getElementById('m-http-fail').innerText = data.failed_calls;
+
+            // Endpoints Table
+            const tbody = document.getElementById('m-endpoints-body');
+            tbody.innerHTML = '';
+            const endpoints = Object.entries(data.endpoints).sort((a, b) => b[1].count - a[1].count);
+            if (endpoints.length === 0) {
+              tbody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: #888;">No data available</td></tr>';
+            } else {
+              endpoints.forEach(([path, stats]) => {
+                tbody.innerHTML += `<tr>
+                  <td style="font-family: monospace; font-weight: bold;">${path}</td>
+                  <td>${stats.count}</td>
+                  <td>${stats.mean_time_ms.toFixed(2)} ms</td>
+                  <td>${stats.max_time_ms.toFixed(2)} ms</td>
+                </tr>`;
+              });
+            }
+
+            // Raw JSON View
+            document.getElementById('metrics-raw-view').innerHTML = syntaxHighlight(data);
+          })
+          .catch(err => {
+            console.error('Failed to fetch metrics', err);
+          });
+      }
+
+      document.getElementById('sys-metrics-btn').onclick = () => {
+        if (!keycloak.authenticated) {
+          alert('Please login to view System Metrics');
+          return;
+        }
+        sysMetricsModal.style.display = 'flex';
+        fetchMetrics();
+        metricsInterval = setInterval(fetchMetrics, 3000);
+      };
+
+      document.getElementById('sys-metrics-close').onclick = () => {
+        sysMetricsModal.style.display = 'none';
+        if (metricsInterval) {
+          clearInterval(metricsInterval);
+          metricsInterval = null;
+        }
+      };
+
+      document.getElementById('tab-dashboard').onclick = (e) => {
+        e.target.classList.add('active');
+        document.getElementById('tab-raw').classList.remove('active');
+        document.getElementById('metrics-dashboard-view').style.display = 'grid';
+        document.getElementById('metrics-raw-view').style.display = 'none';
+      };
+
+      document.getElementById('tab-raw').onclick = (e) => {
+        e.target.classList.add('active');
+        document.getElementById('tab-dashboard').classList.remove('active');
+        document.getElementById('metrics-dashboard-view').style.display = 'none';
+        document.getElementById('metrics-raw-view').style.display = 'block';
+      };
+      
+      function connectMqtt() {
+        if (mqttClient) {
+          if (mqttClient.options.href === brokerInput.value && mqttClient.connected) {
+             // Already connected to this broker, just subscribe if needed
+             if (actionTitle.innerText === 'SUBSCRIBE') mqttClient.subscribe(currentTopic);
+             return;
+          }
+          mqttClient.end();
+        }
+        
+        brokerStatus.innerText = "Connecting...";
+        brokerStatus.style.color = "#f39c12";
+        
+        try {
+          mqttClient = mqtt.connect(brokerInput.value);
+        } catch(e) {
+          brokerStatus.innerText = "Error: " + e.message;
+          brokerStatus.style.color = "#e74c3c";
+          return;
+        }
+        
+        mqttClient.on('connect', () => {
+          brokerStatus.innerText = "Connected";
+          brokerStatus.style.color = "#2ecc71";
+          if (actionTitle.innerText === 'SUBSCRIBE') {
+            mqttClient.subscribe(currentTopic, (err) => {
+              if(!err) mqttConsole.innerHTML += `Subscribed to ${currentTopic}\\n`;
+            });
+          }
+        });
+        
+        mqttClient.on('message', (topic, message) => {
+          if (topic === currentTopic) {
+            const time = new Date().toLocaleTimeString();
+            let msgStr = message.toString();
+            try { msgStr = JSON.stringify(JSON.parse(msgStr), null, 2); } catch(e){}
+            mqttConsole.innerHTML += `\\n<span style="color:#888">[${time}]</span>\\n${msgStr}\\n`;
+            mqttConsole.scrollTop = mqttConsole.scrollHeight;
+          }
+        });
+        
+        mqttClient.on('error', (err) => {
+          brokerStatus.innerText = "Error";
+          brokerStatus.style.color = "#e74c3c";
+          console.error("MQTT Error:", err);
+        });
+      }
+      
+      brokerInput.addEventListener('change', connectMqtt);
+      
+      document.getElementById('mqtt-publish-btn').onclick = () => {
+        if (!mqttClient || !mqttClient.connected) {
+          alert("Broker not connected!");
+          return;
+        }
+        const payload = payloadEditor.value;
+        mqttClient.publish(currentTopic, payload, {}, (err) => {
+          if (err) {
+            alert("Failed to publish: " + err);
+          } else {
+            alert("Message published to " + currentTopic);
+            actionModal.style.display = 'none';
+          }
+        });
+      };
+      
+      document.getElementById('mqtt-action-close').onclick = () => {
+        if (mqttClient && actionTitle.innerText === 'SUBSCRIBE') {
+          mqttClient.unsubscribe(currentTopic);
+        }
+        actionModal.style.display = 'none';
+      };
+      
+      document.getElementById('mqtt-btn').onclick = () => {
+        fetch('/api/mqtt-topics')
+          .then(res => {
+            if (!res.ok) throw new Error("Status " + res.status);
+            return res.text();
+          })
+          .then(text => {
+            rawJson5 = text;
+            let highlighted = text
+              .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+              .replace(/([{}[\]:,])/g, '<span class="syntax-punct">$1</span>');
+              
+            // Inject buttons next to topics (Only if authenticated)
+            highlighted = highlighted.replace(/"([^"]+)"(<span class="syntax-punct">.*?<\\/span>)/g, (match, topic, punct) => {
+              if (topic.includes('/')) {
+                let btnHtml = "";
+                if (keycloak && keycloak.authenticated) {
+                  const isSend = /patch|put|post|create|update/i.test(topic);
+                  const btnLabel = isSend ? "SEND" : "SUBSCRIBE";
+                  const btnColor = isSend ? "#e74c3c" : "#3498db";
+                  btnHtml = ` <button class="mqtt-action-btn" style="background:${btnColor}" onclick="openMqttAction('${topic}', '${btnLabel}')">${btnLabel}</button>`;
+                }
+                return `"${topic}"${punct}${btnHtml}`;
+              }
+              return match;
+            });
+              
+            document.getElementById('mqtt-viewer').innerHTML = highlighted;
+            mqttModal.style.display = 'flex';
+          }).catch(err => alert('Failed to fetch MQTT topics: ' + err));
+      };
+
+      document.getElementById('mqtt-close').onclick = () => mqttModal.style.display = 'none';
+      
+      document.getElementById('mqtt-dl-btn').onclick = () => {
+        const blob = new Blob([rawJson5], { type: 'application/json5' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'mqtt_topics.json5';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      };
+
+      // Live Logs Logic
+      const liveLogsModal = document.getElementById('live-logs-modal');
+      const logBody = document.getElementById('log-console-body');
+      const logSearch = document.getElementById('log-search');
+      const logStatusDot = document.getElementById('log-status-dot');
+      const logStatusText = document.getElementById('log-status-text');
+      
+      let logsEventSource = null;
+      let autoScroll = true;
+      let currentFilter = "";
+      
+      function appendLogLine(text) {
+        const line = document.createElement('div');
+        line.className = 'log-line';
+        
+        // Basic ANSI color stripping for cleaner display if backend sends colors
+        text = text.replace(/\\x1B\\[[0-9;]*[a-zA-Z]/g, '');
+        line.innerText = text;
+
+        if (currentFilter && !text.toLowerCase().includes(currentFilter)) {
+          line.classList.add('hidden');
+        }
+
+        logBody.appendChild(line);
+        
+        // Prevent DOM overflow (keep last 2000 lines)
+        if (logBody.children.length > 2000) {
+          logBody.removeChild(logBody.firstChild);
+        }
+
+        if (autoScroll) {
+          logBody.scrollTop = logBody.scrollHeight;
+        }
+      }
+
+      document.getElementById('live-logs-btn').onclick = () => {
+        if (!keycloak.authenticated) {
+          alert('Please login to view Server Logs');
+          return;
+        }
+        liveLogsModal.style.display = 'flex';
+        logBody.innerHTML = '<div style="color: #555;">Connecting to live log stream...</div>';
+        autoScroll = true;
+        updateLogStatusUI();
+        
+        // Connect SSE
+        logsEventSource = new EventSource('/api/system/logs/stream');
+        
+        logsEventSource.onmessage = function(event) {
+          // Remove connecting message on first log
+          if (logBody.children.length === 1 && logBody.firstChild.innerText.includes('Connecting')) {
+            logBody.innerHTML = '';
+          }
+          appendLogLine(event.data);
+        };
+
+        logsEventSource.onerror = function() {
+          appendLogLine('[SSE Error] Disconnected from log stream.');
+          logsEventSource.close();
+        };
+      };
+
+      document.getElementById('live-logs-close').onclick = () => {
+        liveLogsModal.style.display = 'none';
+        if (logsEventSource) {
+          logsEventSource.close();
+          logsEventSource = null;
+        }
+      };
+
+      // Filter Logic
+      logSearch.addEventListener('input', (e) => {
+        currentFilter = e.target.value.toLowerCase();
+        const lines = logBody.getElementsByClassName('log-line');
+        for (let i = 0; i < lines.length; i++) {
+          const text = lines[i].innerText.toLowerCase();
+          if (currentFilter && !text.includes(currentFilter)) {
+            lines[i].classList.add('hidden');
+          } else {
+            lines[i].classList.remove('hidden');
+          }
+        }
+        if (autoScroll) logBody.scrollTop = logBody.scrollHeight;
+      });
+
+      // Spacebar Pause/Play
+      document.addEventListener('keydown', (e) => {
+        // Only trigger if modal is open and user is not typing in the search box
+        if (liveLogsModal.style.display === 'flex' && document.activeElement !== logSearch) {
+          if (e.code === 'Space') {
+            e.preventDefault(); // Prevent page scroll
+            autoScroll = !autoScroll;
+            updateLogStatusUI();
+          }
+        }
+      });
+
+      function updateLogStatusUI() {
+        if (autoScroll) {
+          logStatusDot.classList.remove('paused');
+          logStatusText.innerText = 'Streaming (Space to Pause)';
+        } else {
+          logStatusDot.classList.add('paused');
+          logStatusText.innerText = 'Paused Auto-scroll (Space to Resume)';
+        }
+      }
+
     };
   </script>
 </body>