@design.estate/dees-catalog 3.35.0 → 3.36.0

package/dist_bundle/bundle.js

@@ -101154,6 +101154,7 @@ var init_versions = __esm({
     CDN_VERSIONS = {
       xterm: "5.3.0",
       xtermAddonFit: "0.8.0",
+      xtermAddonSearch: "0.13.0",
       highlightJs: "11.11.1",
       apexcharts: "5.3.6",
       tiptap: "2.23.0",
@@ -101173,12 +101174,14 @@ var init_DeesServiceLibLoader = __esm({
       // Cached library references
       xtermLib = null;
       xtermFitAddonLib = null;
+      xtermSearchAddonLib = null;
       highlightJsLib = null;
       apexChartsLib = null;
       tiptapLib = null;
       // Loading promises to prevent duplicate concurrent loads
       xtermLoadingPromise = null;
       xtermFitAddonLoadingPromise = null;
+      xtermSearchAddonLoadingPromise = null;
       highlightJsLoadingPromise = null;
       apexChartsLoadingPromise = null;
       tiptapLoadingPromise = null;
@@ -101242,6 +101245,30 @@ var init_DeesServiceLibLoader = __esm({
         })();
         return this.xtermFitAddonLoadingPromise;
       }
+      /**
+       * Load xterm-addon-search from CDN
+       * @returns Promise resolving to SearchAddon class
+       */
+      async loadXtermSearchAddon() {
+        if (this.xtermSearchAddonLib) {
+          return this.xtermSearchAddonLib;
+        }
+        if (this.xtermSearchAddonLoadingPromise) {
+          return this.xtermSearchAddonLoadingPromise;
+        }
+        this.xtermSearchAddonLoadingPromise = (async () => {
+          const url = `${CDN_BASE}/xterm-addon-search@${CDN_VERSIONS.xtermAddonSearch}/+esm`;
+          const module = await import(
+            /* @vite-ignore */
+            url
+          );
+          this.xtermSearchAddonLib = {
+            SearchAddon: module.SearchAddon
+          };
+          return this.xtermSearchAddonLib;
+        })();
+        return this.xtermSearchAddonLoadingPromise;
+      }
       /**
        * Inject xterm CSS styles into the document head
        */
@@ -101368,6 +101395,7 @@ var init_DeesServiceLibLoader = __esm({
         await Promise.all([
           this.loadXterm(),
           this.loadXtermFitAddon(),
+          this.loadXtermSearchAddon(),
           this.loadHighlightJs(),
           this.loadApexCharts(),
           this.loadTiptap()
@@ -101382,6 +101410,8 @@ var init_DeesServiceLibLoader = __esm({
             return this.xtermLib !== null;
           case "xtermFitAddon":
             return this.xtermFitAddonLib !== null;
+          case "xtermSearchAddon":
+            return this.xtermSearchAddonLib !== null;
           case "highlightJs":
             return this.highlightJsLib !== null;
           case "apexCharts":
@@ -123291,6 +123321,10 @@ var DeesStatsGrid = class extends (_a34 = DeesElement, _tiles_dec = [n5({ type:
       if (usage < 80) return "medium";
       return "high";
     };
+    const maxBarsWidth = cores.length * 24 + (cores.length - 1) * 3;
+    const columnSpan = tile.columnSpan || 1;
+    const estimatedTileWidth = this.minTileWidth * columnSpan + (columnSpan - 1) * this.gap - 32;
+    const shouldCenter = maxBarsWidth < estimatedTileWidth * 0.666;
     return b2`
       <div class="cpu-cores-wrapper">
         <div class="cpu-cores-header">
@@ -123298,7 +123332,7 @@ var DeesStatsGrid = class extends (_a34 = DeesElement, _tiles_dec = [n5({ type:
           <span class="cpu-cores-unit">%</span>
           <span class="cpu-cores-label">${cores.length} cores</span>
         </div>
-        <div class="cpu-cores-bars">
+        <div class="cpu-cores-bars ${shouldCenter ? "centered" : ""}">
           ${cores.map((core2) => {
       const usage = Math.min(100, Math.max(0, core2.usage));
       const colorClass = getColorClass(usage);
@@ -123694,6 +123728,10 @@ __publicField(DeesStatsGrid, "styles", [
         padding: 4px 0;
       }
 
+      .cpu-cores-bars.centered {
+        justify-content: center;
+      }
+
       .cpu-core-bar-container {
         flex: 1;
         min-width: 6px;
@@ -123710,14 +123748,16 @@ __publicField(DeesStatsGrid, "styles", [
         width: 100%;
         background: ${cssManager.bdTheme("#e8e8e8", "#1a1a1a")};
         border-radius: 2px;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
+        position: relative;
         overflow: hidden;
         min-height: 40px;
       }
 
       .cpu-core-bar-fill {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
         width: 100%;
         background: ${cssManager.bdTheme("#666666", "#888888")};
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
@@ -129843,8 +129883,10 @@ init_dist_ts26();
 var demoFunc33 = () => {
   return b2`
     <dees-demowrapper .runAfterRender=${async (elementArg) => {
-    const logElement = elementArg.querySelector("dees-chart-log");
-    let intervalId;
+    const structuredLog = elementArg.querySelector("#structured-log");
+    const rawLog = elementArg.querySelector("#raw-log");
+    let structuredIntervalId;
+    let rawIntervalId;
     const serverSources = ["Server", "Database", "API", "Auth", "Cache", "Queue", "WebSocket", "Scheduler"];
     const logTemplates = {
       debug: [
@@ -129883,6 +129925,20 @@ var demoFunc33 = () => {
         "Health check passed: all systems operational"
       ]
     };
+    const dockerLogTemplates = [
+      "\x1B[90m2024-01-15T10:23:45.123Z\x1B[0m \x1B[36mINFO\x1B[0m  [nginx] GET /api/health 200 - 2ms",
+      "\x1B[90m2024-01-15T10:23:45.456Z\x1B[0m \x1B[33mWARN\x1B[0m  [redis] Connection pool running low: 3/10",
+      "\x1B[90m2024-01-15T10:23:45.789Z\x1B[0m \x1B[31mERROR\x1B[0m [mongodb] Query timeout after 30000ms",
+      "\x1B[90m2024-01-15T10:23:46.012Z\x1B[0m \x1B[36mINFO\x1B[0m  [app] Processing batch job #{{jobId}}",
+      "\x1B[90m2024-01-15T10:23:46.345Z\x1B[0m \x1B[32mOK\x1B[0m    [health] All services healthy",
+      "\x1B[90m2024-01-15T10:23:46.678Z\x1B[0m \x1B[36mINFO\x1B[0m  [kafka] Message consumed from topic: events",
+      "\x1B[90m2024-01-15T10:23:47.001Z\x1B[0m \x1B[35mDEBUG\x1B[0m [grpc] Request received: GetUser(id={{userId}})",
+      "\x1B[90m2024-01-15T10:23:47.234Z\x1B[0m \x1B[31mERROR\x1B[0m [auth] Token validation failed: expired",
+      "\x1B[90m2024-01-15T10:23:47.567Z\x1B[0m \x1B[33mWARN\x1B[0m  [rate-limit] IP {{ip}} approaching rate limit",
+      "\x1B[90m2024-01-15T10:23:47.890Z\x1B[0m \x1B[36mINFO\x1B[0m  [websocket] Client connected: session={{session}}",
+      // Multi-line log entry like stack traces
+      "\x1B[31mError: Connection refused\x1B[0m\n    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)\n    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)\n    at async DatabaseService.query (/app/src/db/service.ts:89:12)"
+    ];
     const generateRandomLog = () => {
       const levels = ["debug", "info", "warn", "error", "success"];
       const weights = [0.2, 0.5, 0.15, 0.1, 0.05];
@@ -129900,15 +129956,21 @@ var demoFunc33 = () => {
       const templates = logTemplates[level];
       const template = templates[Math.floor(Math.random() * templates.length)];
       const message2 = template.replace("{{module}}", ["express", "mongoose", "redis", "socket.io"][Math.floor(Math.random() * 4)]).replace("{{key}}", "user:" + Math.floor(Math.random() * 1e3)).replace("{{time}}", String(Math.floor(Math.random() * 500) + 50)).replace("{{headers}}", "Content-Type: application/json, Authorization: Bearer ...").replace("{{var}}", ["NODE_ENV", "DATABASE_URL", "API_KEY", "PORT"][Math.floor(Math.random() * 4)]).replace("{{method}}", ["GET", "POST", "PUT", "DELETE"][Math.floor(Math.random() * 4)]).replace("{{path}}", ["/api/users", "/api/auth/login", "/api/products", "/health"][Math.floor(Math.random() * 4)]).replace("{{userId}}", String(Math.floor(Math.random() * 1e4))).replace("{{jobId}}", "job_" + Math.random().toString(36).substring(2, 11)).replace("{{task}}", ["cleanup", "backup", "report-generation", "cache-refresh"][Math.floor(Math.random() * 4)]).replace("{{ip}}", `192.168.1.${Math.floor(Math.random() * 255)}`).replace("{{query}}", "SELECT * FROM users WHERE ...").replace("{{percent}}", String(Math.floor(Math.random() * 30) + 70)).replace("{{endpoint}}", "/api/v1/legacy").replace("{{days}}", String(Math.floor(Math.random() * 30) + 1)).replace("{{error}}", ["ECONNREFUSED", "ETIMEDOUT", "ENOTFOUND"][Math.floor(Math.random() * 3)]).replace("{{user}}", "user_" + Math.floor(Math.random() * 1e3)).replace("{{service}}", ["Redis", "MongoDB", "ElasticSearch"][Math.floor(Math.random() * 3)]).replace("{{port}}", String(3e3 + Math.floor(Math.random() * 10))).replace("{{size}}", String(Math.floor(Math.random() * 500) + 100));
-      logElement.addLog(level, message2, source);
+      structuredLog.addLog(level, message2, source);
+    };
+    const generateDockerLog = () => {
+      const template = dockerLogTemplates[Math.floor(Math.random() * dockerLogTemplates.length)];
+      const now2 = (/* @__PURE__ */ new Date()).toISOString();
+      const logLine = template.replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g, now2).replace("{{jobId}}", String(Math.floor(Math.random() * 1e4))).replace("{{userId}}", String(Math.floor(Math.random() * 1e4))).replace("{{ip}}", `192.168.1.${Math.floor(Math.random() * 255)}`).replace("{{session}}", Math.random().toString(36).substring(2, 11));
+      rawLog.writelnRaw(logLine);
     };
-    const startSimulation = () => {
-      if (!intervalId) {
+    const startStructuredSimulation = () => {
+      if (!structuredIntervalId) {
         const scheduleNext = () => {
           generateRandomLog();
           const nextDelay = Math.random() * 2e3 + 500;
-          intervalId = window.setTimeout(() => {
-            if (intervalId) {
+          structuredIntervalId = window.setTimeout(() => {
+            if (structuredIntervalId) {
               scheduleNext();
             }
           }, nextDelay);
@@ -129916,57 +129978,131 @@ var demoFunc33 = () => {
         scheduleNext();
       }
     };
-    const stopSimulation = () => {
-      if (intervalId) {
-        window.clearTimeout(intervalId);
-        intervalId = null;
+    const stopStructuredSimulation = () => {
+      if (structuredIntervalId) {
+        window.clearTimeout(structuredIntervalId);
+        structuredIntervalId = null;
+      }
+    };
+    const startRawSimulation = () => {
+      if (!rawIntervalId) {
+        const scheduleNext = () => {
+          generateDockerLog();
+          const nextDelay = Math.random() * 1e3 + 200;
+          rawIntervalId = window.setTimeout(() => {
+            if (rawIntervalId) {
+              scheduleNext();
+            }
+          }, nextDelay);
+        };
+        scheduleNext();
+      }
+    };
+    const stopRawSimulation = () => {
+      if (rawIntervalId) {
+        window.clearTimeout(rawIntervalId);
+        rawIntervalId = null;
       }
     };
     const buttons = elementArg.querySelectorAll("dees-button");
     buttons.forEach((button) => {
       const text9 = button.textContent?.trim();
-      if (text9 === "Add Single Log") {
-        button.addEventListener("click", () => generateRandomLog());
-      } else if (text9 === "Start Simulation") {
-        button.addEventListener("click", () => startSimulation());
-      } else if (text9 === "Stop Simulation") {
-        button.addEventListener("click", () => stopSimulation());
+      switch (text9) {
+        case "Add Structured Log":
+          button.addEventListener("click", () => generateRandomLog());
+          break;
+        case "Start Structured":
+          button.addEventListener("click", () => startStructuredSimulation());
+          break;
+        case "Stop Structured":
+          button.addEventListener("click", () => stopStructuredSimulation());
+          break;
+        case "Add Docker Log":
+          button.addEventListener("click", () => generateDockerLog());
+          break;
+        case "Start Docker":
+          button.addEventListener("click", () => startRawSimulation());
+          break;
+        case "Stop Docker":
+          button.addEventListener("click", () => stopRawSimulation());
+          break;
       }
     });
   }}>
       <style>
-      .demoBox {
-        position: relative;
-        background: #000000;
-        height: 100%;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      .controls {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-      }
-      .info {
-        color: #888;
-        font-size: 12px;
-        font-family: 'Geist Sans', sans-serif;
-      }
-    </style>
+        ${i`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 5%)")};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+          .section-title {
+            color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .section-description {
+            color: ${cssManager.bdTheme("hsl(215.4 16.3% 46.9%)", "hsl(215 20.2% 65.1%)")};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+          }
+        `}
+      </style>
     <div class="demoBox">
-      <div class="controls">
-        <dees-button>Add Single Log</dees-button>
-        <dees-button>Start Simulation</dees-button>
-        <dees-button>Stop Simulation</dees-button>
+      <!-- Structured Logs Section -->
+      <div class="section">
+        <div class="section-title">Structured Logs (ILogEntry)</div>
+        <div class="section-description">
+          Structured log entries with level, message, and source. Supports search and keyword highlighting.
+        </div>
+        <div class="controls">
+          <dees-button>Add Structured Log</dees-button>
+          <dees-button>Start Structured</dees-button>
+          <dees-button>Stop Structured</dees-button>
+        </div>
+        <dees-chart-log
+          id="structured-log"
+          .label=${"Production Server Logs"}
+          .highlightKeywords=${["error", "failed", "timeout"]}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      </div>
+
+      <!-- Raw Logs Section -->
+      <div class="section">
+        <div class="section-title">Raw Logs (Docker/Container Style)</div>
+        <div class="section-description">
+          Raw log output with ANSI escape sequences for real Docker/container logs.
+        </div>
+        <div class="controls">
+          <dees-button>Add Docker Log</dees-button>
+          <dees-button>Start Docker</dees-button>
+          <dees-button>Stop Docker</dees-button>
+        </div>
+        <dees-chart-log
+          id="raw-log"
+          .label=${"Docker Container Logs"}
+          .mode=${"raw"}
+          .showMetrics=${false}
+        ></dees-chart-log>
       </div>
-      <div class="info">Simulating realistic server logs with various levels and sources</div>
-      <dees-chart-log
-        .label=${"Production Server Logs"}
-      ></dees-chart-log>
     </div>
     </dees-demowrapper>
   `;
@@ -129976,16 +130112,37 @@ var demoFunc33 = () => {
 init_dist_ts26();
 init_dist_ts25();
 init_theme();
-var _maxEntries_dec, _autoScroll_dec, _logEntries_dec, _label_dec6, _a45, _DeesChartLog_decorators, _init47, _label6, _logEntries, _autoScroll, _maxEntries;
+init_services();
+var _terminalReady_dec, _metrics_dec, _filterMode_dec, _searchQuery_dec2, _showMetrics_dec, _highlightKeywords_dec, _maxEntries_dec, _autoScroll_dec, _logEntries_dec, _mode_dec, _label_dec6, _a45, _DeesChartLog_decorators, _init47, _label6, _mode, _logEntries, _autoScroll, _maxEntries, _highlightKeywords, _showMetrics, _searchQuery2, _filterMode, _metrics, _terminalReady;
 _DeesChartLog_decorators = [t4("dees-chart-log")];
-var DeesChartLog = class extends (_a45 = DeesElement, _label_dec6 = [n5()], _logEntries_dec = [n5({ type: Array })], _autoScroll_dec = [n5({ type: Boolean })], _maxEntries_dec = [n5({ type: Number })], _a45) {
+var DeesChartLog = class extends (_a45 = DeesElement, _label_dec6 = [n5()], _mode_dec = [n5({ type: String })], _logEntries_dec = [n5({ type: Array })], _autoScroll_dec = [n5({ type: Boolean })], _maxEntries_dec = [n5({ type: Number })], _highlightKeywords_dec = [n5({ type: Array })], _showMetrics_dec = [n5({ type: Boolean })], _searchQuery_dec2 = [r5()], _filterMode_dec = [r5()], _metrics_dec = [r5()], _terminalReady_dec = [r5()], _a45) {
   constructor() {
     super();
     __privateAdd(this, _label6, __runInitializers(_init47, 8, this, "Server Logs")), __runInitializers(_init47, 11, this);
-    __privateAdd(this, _logEntries, __runInitializers(_init47, 12, this, [])), __runInitializers(_init47, 15, this);
-    __privateAdd(this, _autoScroll, __runInitializers(_init47, 16, this, true)), __runInitializers(_init47, 19, this);
-    __privateAdd(this, _maxEntries, __runInitializers(_init47, 20, this, 1e3)), __runInitializers(_init47, 23, this);
-    __publicField(this, "logContainer");
+    __privateAdd(this, _mode, __runInitializers(_init47, 12, this, "structured")), __runInitializers(_init47, 15, this);
+    __privateAdd(this, _logEntries, __runInitializers(_init47, 16, this, [])), __runInitializers(_init47, 19, this);
+    __privateAdd(this, _autoScroll, __runInitializers(_init47, 20, this, true)), __runInitializers(_init47, 23, this);
+    __privateAdd(this, _maxEntries, __runInitializers(_init47, 24, this, 1e4)), __runInitializers(_init47, 27, this);
+    __privateAdd(this, _highlightKeywords, __runInitializers(_init47, 28, this, [])), __runInitializers(_init47, 31, this);
+    __privateAdd(this, _showMetrics, __runInitializers(_init47, 32, this, true)), __runInitializers(_init47, 35, this);
+    __privateAdd(this, _searchQuery2, __runInitializers(_init47, 36, this, "")), __runInitializers(_init47, 39, this);
+    __privateAdd(this, _filterMode, __runInitializers(_init47, 40, this, false)), __runInitializers(_init47, 43, this);
+    __privateAdd(this, _metrics, __runInitializers(_init47, 44, this, { debug: 0, info: 0, warn: 0, error: 0, success: 0, total: 0, rate: 0 })), __runInitializers(_init47, 47, this);
+    __privateAdd(this, _terminalReady, __runInitializers(_init47, 48, this, false)), __runInitializers(_init47, 51, this);
+    // Buffer of all log entries for filter mode
+    __publicField(this, "logBuffer", []);
+    // Track trailing hidden entries count for live updates in filter mode
+    __publicField(this, "trailingHiddenCount", 0);
+    // xterm instances
+    __publicField(this, "terminal", null);
+    __publicField(this, "fitAddon", null);
+    __publicField(this, "searchAddon", null);
+    __publicField(this, "resizeObserver", null);
+    __publicField(this, "terminalThemeSubscription", null);
+    __publicField(this, "domtoolsInstance", null);
+    // Rate calculation
+    __publicField(this, "rateBuffer", []);
+    __publicField(this, "rateInterval", null);
     domtools_elementbasic_exports.setup();
   }
   render() {
@@ -129993,105 +130150,508 @@ var DeesChartLog = class extends (_a45 = DeesElement, _label_dec6 = [n5()], _log
       <div class="mainbox">
         <div class="header">
           <div class="title">${this.label}</div>
+          <div class="search-box">
+            <input
+              type="text"
+              placeholder="Search logs..."
+              .value=${this.searchQuery}
+              @input=${(e11) => this.handleSearchInput(e11)}
+              @keydown=${(e11) => this.handleSearchKeydown(e11)}
+            />
+            <div class="search-nav">
+              <button @click=${() => this.searchPrevious()} title="Previous match">↑</button>
+              <button @click=${() => this.searchNext()} title="Next match">↓</button>
+            </div>
+            <button
+              class="filter-toggle ${this.filterMode ? "active" : ""}"
+              @click=${() => this.toggleFilterMode()}
+              title="${this.filterMode ? "Switch to highlight mode" : "Switch to filter mode"}"
+            >
+              ${this.filterMode ? "Filter" : "Highlight"}
+            </button>
+          </div>
           <div class="controls">
-            <button 
+            <button
               class="control-button ${this.autoScroll ? "active" : ""}"
-              @click=${() => {
-      this.autoScroll = !this.autoScroll;
-    }}
+              @click=${() => this.toggleAutoScroll()}
             >
               Auto Scroll
             </button>
-            <button 
-              class="control-button"
-              @click=${() => {
-      this.clearLogs();
-    }}
-            >
+            <button class="control-button" @click=${() => this.clearLogs()}>
               Clear
             </button>
           </div>
         </div>
-        <div class="logContainer">
-          ${this.logEntries.length === 0 ? b2`<div class="empty-state">No logs to display</div>` : this.logEntries.map((entry) => this.renderLogEntry(entry))}
+
+        <div class="terminal-container">
+          ${!this.terminalReady ? b2`<div class="loading-state">Loading terminal...</div>` : ""}
         </div>
+
+        ${this.showMetrics ? b2`
+              <div class="metrics-bar">
+                <span class="metric error">errors: ${this.metrics.error}</span>
+                <span class="metric warn">warns: ${this.metrics.warn}</span>
+                <span class="metric info">info: ${this.metrics.info}</span>
+                <span class="metric success">success: ${this.metrics.success}</span>
+                <span class="metric debug">debug: ${this.metrics.debug}</span>
+                <span class="metric rate">${this.metrics.rate.toFixed(1)} logs/sec</span>
+              </div>
+            ` : ""}
       </div>
     `;
   }
-  renderLogEntry(entry) {
-    const timestamp2 = new Date(entry.timestamp).toLocaleTimeString("en-US", {
+  async firstUpdated() {
+    this.domtoolsInstance = await this.domtoolsPromise;
+    await this.initializeTerminal();
+    if (this.logEntries.length > 0) {
+      for (const entry of this.logEntries) {
+        this.writeLogEntry(entry);
+      }
+    }
+  }
+  async initializeTerminal() {
+    const libLoader = DeesServiceLibLoader.getInstance();
+    const [xtermBundle, fitBundle, searchBundle] = await Promise.all([
+      libLoader.loadXterm(),
+      libLoader.loadXtermFitAddon(),
+      libLoader.loadXtermSearchAddon()
+    ]);
+    await this.injectXtermStylesIntoShadow();
+    this.terminal = new xtermBundle.Terminal({
+      cursorBlink: false,
+      disableStdin: true,
+      fontSize: 12,
+      fontFamily: "'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
+      theme: this.getTerminalTheme(),
+      scrollback: this.maxEntries,
+      convertEol: true
+    });
+    this.fitAddon = new fitBundle.FitAddon();
+    this.searchAddon = new searchBundle.SearchAddon();
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.loadAddon(this.searchAddon);
+    const container = this.shadowRoot.querySelector(".terminal-container");
+    this.terminal.open(container);
+    await new Promise((resolve2) => requestAnimationFrame(resolve2));
+    this.fitAddon.fit();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.fitAddon?.fit();
+    });
+    this.resizeObserver.observe(container);
+    this.terminalThemeSubscription = this.domtoolsInstance.themeManager.themeObservable.subscribe(() => {
+      if (this.terminal) {
+        this.terminal.options.theme = this.getTerminalTheme();
+      }
+    });
+    this.rateInterval = setInterval(() => this.calculateRate(), 1e3);
+    this.terminalReady = true;
+  }
+  getTerminalTheme() {
+    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    return isDark ? {
+      background: "#0a0a0a",
+      foreground: "#e0e0e0",
+      cursor: "#e0e0e0",
+      selectionBackground: "#404040",
+      black: "#000000",
+      red: "#ff5555",
+      green: "#50fa7b",
+      yellow: "#f1fa8c",
+      blue: "#6272a4",
+      magenta: "#ff79c6",
+      cyan: "#8be9fd",
+      white: "#f8f8f2",
+      brightBlack: "#6272a4",
+      brightRed: "#ff6e6e",
+      brightGreen: "#69ff94",
+      brightYellow: "#ffffa5",
+      brightBlue: "#d6acff",
+      brightMagenta: "#ff92df",
+      brightCyan: "#a4ffff",
+      brightWhite: "#ffffff"
+    } : {
+      background: "#ffffff",
+      foreground: "#333333",
+      cursor: "#333333",
+      selectionBackground: "#add6ff",
+      black: "#000000",
+      red: "#cd3131",
+      green: "#00bc00",
+      yellow: "#949800",
+      blue: "#0451a5",
+      magenta: "#bc05bc",
+      cyan: "#0598bc",
+      white: "#555555",
+      brightBlack: "#666666",
+      brightRed: "#cd3131",
+      brightGreen: "#14ce14",
+      brightYellow: "#b5ba00",
+      brightBlue: "#0451a5",
+      brightMagenta: "#bc05bc",
+      brightCyan: "#0598bc",
+      brightWhite: "#a5a5a5"
+    };
+  }
+  /**
+   * Inject xterm CSS styles into shadow root
+   * This is needed because shadow DOM doesn't inherit styles from document.head
+   */
+  async injectXtermStylesIntoShadow() {
+    const styleId = "xterm-shadow-styles";
+    if (this.shadowRoot.getElementById(styleId)) {
+      return;
+    }
+    const cssUrl = `${CDN_BASE}/xterm@${CDN_VERSIONS.xterm}/css/xterm.css`;
+    const response = await fetch(cssUrl);
+    const cssText = await response.text();
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = cssText;
+    this.shadowRoot.appendChild(style);
+  }
+  // =====================
+  // Structured Log Methods
+  // =====================
+  /**
+   * Add a single structured log entry
+   */
+  addLog(level, message2, source) {
+    const entry = {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      level,
+      message: message2,
+      source
+    };
+    this.logBuffer.push(entry);
+    if (this.logBuffer.length > this.maxEntries) {
+      this.logBuffer.shift();
+    }
+    if (!this.filterMode || !this.searchQuery) {
+      this.writeLogEntry(entry);
+    } else if (this.entryMatchesFilter(entry)) {
+      this.trailingHiddenCount = 0;
+      this.writeLogEntry(entry);
+    } else {
+      this.updateTrailingPlaceholder();
+    }
+    this.updateMetrics(entry.level);
+  }
+  /**
+   * Add multiple structured log entries
+   */
+  updateLog(entries) {
+    if (!entries) return;
+    for (const entry of entries) {
+      this.logBuffer.push(entry);
+      if (this.logBuffer.length > this.maxEntries) {
+        this.logBuffer.shift();
+      }
+      if (!this.filterMode || !this.searchQuery) {
+        this.writeLogEntry(entry);
+      } else if (this.entryMatchesFilter(entry)) {
+        this.trailingHiddenCount = 0;
+        this.writeLogEntry(entry);
+      } else {
+        this.updateTrailingPlaceholder();
+      }
+      this.updateMetrics(entry.level);
+    }
+  }
+  /**
+   * Update the trailing hidden placeholder in real-time
+   * Clears the last line if a placeholder already exists, then writes updated count
+   */
+  updateTrailingPlaceholder() {
+    if (!this.terminal) return;
+    if (this.trailingHiddenCount > 0) {
+      this.terminal.write("\x1B[1A\x1B[2K\r");
+    }
+    this.trailingHiddenCount++;
+    this.writeHiddenPlaceholder(this.trailingHiddenCount);
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  /**
+   * Check if a log entry matches the current filter
+   */
+  entryMatchesFilter(entry) {
+    if (!this.searchQuery) return true;
+    const query4 = this.searchQuery.toLowerCase();
+    return entry.message.toLowerCase().includes(query4) || entry.level.toLowerCase().includes(query4) || (entry.source?.toLowerCase().includes(query4) ?? false);
+  }
+  writeLogEntry(entry) {
+    if (!this.terminal) return;
+    const formatted = this.formatLogEntry(entry);
+    this.terminal.writeln(formatted);
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  formatLogEntry(entry) {
+    const timestamp2 = this.formatTimestamp(entry.timestamp);
+    const levelColors = {
+      debug: "\x1B[90m",
+      // Gray
+      info: "\x1B[36m",
+      // Cyan
+      warn: "\x1B[33m",
+      // Yellow
+      error: "\x1B[31m",
+      // Red
+      success: "\x1B[32m"
+      // Green
+    };
+    const reset = "\x1B[0m";
+    const dim = "\x1B[2m";
+    const levelStr = `${levelColors[entry.level]}[${entry.level.toUpperCase().padEnd(7)}]${reset}`;
+    const sourceStr = entry.source ? `${dim}[${entry.source}]${reset} ` : "";
+    const messageStr = this.applyHighlights(entry.message);
+    return `${dim}${timestamp2}${reset} ${levelStr} ${sourceStr}${messageStr}`;
+  }
+  formatTimestamp(isoString) {
+    const date = new Date(isoString);
+    return date.toLocaleTimeString("en-US", {
       hour12: false,
       hour: "2-digit",
       minute: "2-digit",
       second: "2-digit",
       fractionalSecondDigits: 3
     });
-    return b2`
-      <div class="logEntry">
-        <span class="timestamp">${timestamp2}</span>
-        <span class="level ${entry.level}">${entry.level}</span>
-        ${entry.source ? b2`<span class="source">[${entry.source}]</span>` : ""}
-        <span class="message">${entry.message}</span>
-      </div>
-    `;
   }
-  async firstUpdated() {
-    await this.domtoolsPromise;
-    this.logContainer = this.shadowRoot.querySelector(".logContainer");
-    const demoLogs = [
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "Server started on port 3000", source: "Server" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "debug", message: "Loading configuration from /etc/app/config.json", source: "Config" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "Connected to MongoDB at mongodb://localhost:27017", source: "Database" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "success", message: "Database connection established successfully", source: "Database" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "warn", message: "No SSL certificate found, using self-signed certificate", source: "Security" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "API routes initialized: GET /api/users, POST /api/users, DELETE /api/users/:id", source: "Router" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "debug", message: "Middleware stack: cors, bodyParser, authentication, errorHandler", source: "Middleware" },
-      { timestamp: (/* @__PURE__ */ new Date()).toISOString(), level: "info", message: "WebSocket server listening on ws://localhost:3001", source: "WebSocket" }
-    ];
-    this.logEntries = demoLogs;
-    this.scrollToBottom();
-  }
-  async updateLog(entries) {
-    if (entries) {
-      this.logEntries = [...this.logEntries, ...entries];
-      if (this.logEntries.length > this.maxEntries) {
-        this.logEntries = this.logEntries.slice(-this.maxEntries);
+  applyHighlights(text9) {
+    const keywords = [...this.highlightKeywords];
+    if (this.filterMode && this.searchQuery) {
+      keywords.push(this.searchQuery);
+    }
+    if (keywords.length === 0) return text9;
+    let result = text9;
+    for (const keyword of keywords) {
+      const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const regex = new RegExp(`(${escaped})`, "gi");
+      result = result.replace(regex, "\x1B[43m\x1B[30m$1\x1B[0m");
+    }
+    return result;
+  }
+  // =====================
+  // Raw Log Methods
+  // =====================
+  /**
+   * Write raw data to the terminal (for Docker logs, etc.)
+   */
+  writeRaw(data) {
+    if (!this.terminal) return;
+    this.terminal.write(data);
+    this.recordLogEvent();
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  /**
+   * Write a raw line to the terminal
+   */
+  writelnRaw(line) {
+    if (!this.terminal) return;
+    this.terminal.writeln(line);
+    this.recordLogEvent();
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  // =====================
+  // Search Methods
+  // =====================
+  handleSearchInput(e11) {
+    const input = e11.target;
+    const newQuery = input.value;
+    const queryChanged = this.searchQuery !== newQuery;
+    this.searchQuery = newQuery;
+    if (this.filterMode && queryChanged) {
+      this.reRenderFilteredLogs();
+    } else if (this.searchQuery) {
+      this.searchAddon?.findNext(this.searchQuery);
+    }
+  }
+  handleSearchKeydown(e11) {
+    if (e11.key === "Enter") {
+      if (e11.shiftKey) {
+        this.searchPrevious();
+      } else {
+        this.searchNext();
       }
-      this.requestUpdate();
-      await this.updateComplete;
-      if (this.autoScroll) {
-        this.scrollToBottom();
+    } else if (e11.key === "Escape") {
+      this.searchQuery = "";
+      e11.target.value = "";
+    }
+  }
+  /**
+   * Search for a query in the terminal
+   */
+  search(query4) {
+    this.searchQuery = query4;
+    this.searchAddon?.findNext(query4);
+  }
+  /**
+   * Find next search match
+   */
+  searchNext() {
+    if (this.searchQuery) {
+      this.searchAddon?.findNext(this.searchQuery);
+    }
+  }
+  /**
+   * Find previous search match
+   */
+  searchPrevious() {
+    if (this.searchQuery) {
+      this.searchAddon?.findPrevious(this.searchQuery);
+    }
+  }
+  // =====================
+  // Control Methods
+  // =====================
+  toggleAutoScroll() {
+    this.autoScroll = !this.autoScroll;
+    if (this.autoScroll && this.terminal) {
+      this.terminal.scrollToBottom();
+    }
+  }
+  /**
+   * Toggle between filter mode and highlight mode
+   */
+  toggleFilterMode() {
+    this.filterMode = !this.filterMode;
+    this.reRenderFilteredLogs();
+  }
+  /**
+   * Re-render logs based on current filter state
+   * In filter mode: show matching logs with placeholders for hidden entries
+   * In highlight mode: show all logs
+   */
+  reRenderFilteredLogs() {
+    if (!this.terminal) return;
+    this.terminal.clear();
+    this.trailingHiddenCount = 0;
+    if (!this.filterMode || !this.searchQuery) {
+      for (const entry of this.logBuffer) {
+        const formatted = this.formatLogEntry(entry);
+        this.terminal.writeln(formatted);
+      }
+    } else {
+      let hiddenCount = 0;
+      for (const entry of this.logBuffer) {
+        if (this.entryMatchesFilter(entry)) {
+          if (hiddenCount > 0) {
+            this.writeHiddenPlaceholder(hiddenCount);
+            hiddenCount = 0;
+          }
+          const formatted = this.formatLogEntry(entry);
+          this.terminal.writeln(formatted);
+        } else {
+          hiddenCount++;
+        }
       }
+      if (hiddenCount > 0) {
+        this.writeHiddenPlaceholder(hiddenCount);
+        this.trailingHiddenCount = hiddenCount;
+      }
+    }
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
     }
   }
+  /**
+   * Write a placeholder line showing how many log entries are hidden by filter
+   */
+  writeHiddenPlaceholder(count2) {
+    const dim = "\x1B[2m";
+    const reset = "\x1B[0m";
+    const text9 = count2 === 1 ? `[1 log line hidden by filter ...]` : `[${count2} log lines hidden by filter ...]`;
+    this.terminal?.writeln(`${dim}${text9}${reset}`);
+  }
+  /**
+   * Clear all logs and reset metrics
+   */
   clearLogs() {
-    this.logEntries = [];
-    this.requestUpdate();
+    this.terminal?.clear();
+    this.logBuffer = [];
+    this.trailingHiddenCount = 0;
+    this.resetMetrics();
   }
+  /**
+   * Scroll to the bottom of the log
+   */
   scrollToBottom() {
-    if (this.logContainer) {
-      this.logContainer.scrollTop = this.logContainer.scrollHeight;
-    }
+    this.terminal?.scrollToBottom();
   }
-  addLog(level, message2, source) {
-    const newEntry = {
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      level,
-      message: message2,
-      source
+  // =====================
+  // Metrics Methods
+  // =====================
+  updateMetrics(level) {
+    this.metrics = {
+      ...this.metrics,
+      [level]: this.metrics[level] + 1,
+      total: this.metrics.total + 1
     };
-    this.updateLog([newEntry]);
+    this.recordLogEvent();
+  }
+  recordLogEvent() {
+    this.rateBuffer.push(Date.now());
+  }
+  calculateRate() {
+    const now2 = Date.now();
+    this.rateBuffer = this.rateBuffer.filter((t9) => now2 - t9 < 1e4);
+    const rate = this.rateBuffer.length / 10;
+    if (rate !== this.metrics.rate) {
+      this.metrics = { ...this.metrics, rate };
+    }
+  }
+  resetMetrics() {
+    this.metrics = { debug: 0, info: 0, warn: 0, error: 0, success: 0, total: 0, rate: 0 };
+    this.rateBuffer = [];
+  }
+  // =====================
+  // Lifecycle
+  // =====================
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+    }
+    if (this.rateInterval) {
+      clearInterval(this.rateInterval);
+    }
+    if (this.terminal) {
+      this.terminal.dispose();
+    }
   }
 };
 _init47 = __decoratorStart(_a45);
 _label6 = new WeakMap();
+_mode = new WeakMap();
 _logEntries = new WeakMap();
 _autoScroll = new WeakMap();
 _maxEntries = new WeakMap();
+_highlightKeywords = new WeakMap();
+_showMetrics = new WeakMap();
+_searchQuery2 = new WeakMap();
+_filterMode = new WeakMap();
+_metrics = new WeakMap();
+_terminalReady = new WeakMap();
 __decorateElement(_init47, 4, "label", _label_dec6, DeesChartLog, _label6);
+__decorateElement(_init47, 4, "mode", _mode_dec, DeesChartLog, _mode);
 __decorateElement(_init47, 4, "logEntries", _logEntries_dec, DeesChartLog, _logEntries);
 __decorateElement(_init47, 4, "autoScroll", _autoScroll_dec, DeesChartLog, _autoScroll);
 __decorateElement(_init47, 4, "maxEntries", _maxEntries_dec, DeesChartLog, _maxEntries);
+__decorateElement(_init47, 4, "highlightKeywords", _highlightKeywords_dec, DeesChartLog, _highlightKeywords);
+__decorateElement(_init47, 4, "showMetrics", _showMetrics_dec, DeesChartLog, _showMetrics);
+__decorateElement(_init47, 4, "searchQuery", _searchQuery_dec2, DeesChartLog, _searchQuery2);
+__decorateElement(_init47, 4, "filterMode", _filterMode_dec, DeesChartLog, _filterMode);
+__decorateElement(_init47, 4, "metrics", _metrics_dec, DeesChartLog, _metrics);
+__decorateElement(_init47, 4, "terminalReady", _terminalReady_dec, DeesChartLog, _terminalReady);
 DeesChartLog = __decorateElement(_init47, 0, "DeesChartLog", _DeesChartLog_decorators, DeesChartLog);
 __publicField(DeesChartLog, "demo", demoFunc33);
 __publicField(DeesChartLog, "demoGroup", "Chart");
@@ -130099,13 +130659,12 @@ __publicField(DeesChartLog, "styles", [
   themeDefaultStyles,
   cssManager.defaultStyles,
   i`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         color: ${cssManager.bdTheme("hsl(0 0% 3.9%)", "hsl(0 0% 98%)")};
-        font-size: 12px;
-        line-height: 1.5;
       }
+
       .mainbox {
         position: relative;
         width: 100%;
@@ -130120,143 +130679,197 @@ __publicField(DeesChartLog, "styles", [
 
       .header {
         background: ${cssManager.bdTheme("hsl(0 0% 97%)", "hsl(0 0% 7%)")};
-        padding: 12px 16px;
+        padding: 8px 12px;
         border-bottom: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        gap: 12px;
         flex-shrink: 0;
+        flex-wrap: wrap;
       }
 
       .title {
         font-weight: 500;
         font-size: 14px;
         color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        white-space: nowrap;
       }
 
-      .controls {
+      .search-box {
         display: flex;
-        gap: 8px;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        min-width: 150px;
+        max-width: 300px;
       }
 
-      .control-button {
-        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
-        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
-        border-radius: 6px;
-        padding: 6px 12px;
-        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        cursor: pointer;
+      .search-box input {
+        flex: 1;
+        padding: 4px 8px;
         font-size: 12px;
-        font-weight: 500;
-        transition: all 0.15s;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      }
-
-      .control-button:hover {
-        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 14.9%)")};
-        border-color: ${cssManager.bdTheme("hsl(0 0% 79.8%)", "hsl(0 0% 20.9%)")};
-        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 4px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 9%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 95%)")};
+        outline: none;
       }
 
-      .control-button.active {
-        background: ${cssManager.bdTheme("hsl(0 0% 9%)", "hsl(0 0% 93.9%)")};
-        color: ${cssManager.bdTheme("hsl(0 0% 98%)", "hsl(0 0% 3.9%)")};
+      .search-box input:focus {
+        border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
       }
 
-      .logContainer {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 16px;
-        font-size: 12px;
+      .search-box input::placeholder {
+        color: ${cssManager.bdTheme("hsl(0 0% 63.9%)", "hsl(0 0% 45.1%)")};
       }
 
-      .logEntry {
-        margin-bottom: 4px;
+      .search-nav {
         display: flex;
-        white-space: pre-wrap;
-        word-break: break-all;
-        font-variant-numeric: tabular-nums;
+        gap: 2px;
       }
 
-      .timestamp {
-        color: ${cssManager.bdTheme("hsl(0 0% 63.9%)", "hsl(0 0% 45.1%)")};
-        margin-right: 12px;
-        flex-shrink: 0;
+      .search-nav button {
+        padding: 4px 6px;
+        font-size: 11px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 3px;
+        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+        cursor: pointer;
+        line-height: 1;
       }
 
-      .level {
-        margin-right: 8px;
-        padding: 0 6px;
-        border-radius: 3px;
-        font-weight: 600;
-        text-transform: uppercase;
-        font-size: 10px;
-        flex-shrink: 0;
+      .search-nav button:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 20%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
 
-      .level.debug {
+      .filter-toggle {
+        padding: 4px 8px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 4px;
         color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        background: ${cssManager.bdTheme("hsl(0 0% 45.1% / 0.1)", "hsl(0 0% 63.9% / 0.1)")};
+        cursor: pointer;
+        transition: all 0.15s;
+        white-space: nowrap;
       }
 
-      .level.info {
-        color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
-        background: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2% / 0.1)", "hsl(217.2 91.2% 59.8% / 0.1)")};
+      .filter-toggle:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 20%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
 
-      .level.warn {
-        color: ${cssManager.bdTheme("hsl(25 95% 53%)", "hsl(25 95% 63%)")};
-        background: ${cssManager.bdTheme("hsl(25 95% 53% / 0.1)", "hsl(25 95% 63% / 0.1)")};
+      .filter-toggle.active {
+        background: ${cssManager.bdTheme("hsl(45 93% 47%)", "hsl(45 93% 47%)")};
+        border-color: ${cssManager.bdTheme("hsl(45 93% 47%)", "hsl(45 93% 47%)")};
+        color: hsl(0 0% 9%);
       }
 
-      .level.error {
-        color: ${cssManager.bdTheme("hsl(0 84.2% 60.2%)", "hsl(0 72.2% 50.6%)")};
-        background: ${cssManager.bdTheme("hsl(0 84.2% 60.2% / 0.1)", "hsl(0 72.2% 50.6% / 0.1)")};
+      .controls {
+        display: flex;
+        gap: 6px;
+        margin-left: auto;
       }
 
-      .level.success {
-        color: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3%)", "hsl(142.1 70.6% 45.3%)")};
-        background: ${cssManager.bdTheme("hsl(142.1 76.2% 36.3% / 0.1)", "hsl(142.1 70.6% 45.3% / 0.1)")};
+      .control-button {
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 14.9%)")};
+        border: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        border-radius: 4px;
+        padding: 4px 10px;
+        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        transition: all 0.15s;
       }
 
-      .source {
-        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
-        margin-right: 8px;
-        flex-shrink: 0;
+      .control-button:hover {
+        background: ${cssManager.bdTheme("hsl(0 0% 95.1%)", "hsl(0 0% 20%)")};
+        border-color: ${cssManager.bdTheme("hsl(0 0% 79.8%)", "hsl(0 0% 25%)")};
+        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 93.9%)")};
       }
 
-      .message {
-        color: ${cssManager.bdTheme("hsl(0 0% 15%)", "hsl(0 0% 90%)")};
+      .control-button.active {
+        background: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
+        border-color: ${cssManager.bdTheme("hsl(222.2 47.4% 51.2%)", "hsl(217.2 91.2% 59.8%)")};
+        color: white;
+      }
+
+      .terminal-container {
         flex: 1;
+        overflow: hidden;
+        padding: 8px;
+        background: ${cssManager.bdTheme("hsl(0 0% 100%)", "hsl(0 0% 3.9%)")};
       }
 
-      .empty-state {
+      .terminal-container .xterm {
+        height: 100%;
+      }
+
+      .loading-state {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
         font-style: italic;
+        font-size: 13px;
+      }
+
+      .metrics-bar {
+        background: ${cssManager.bdTheme("hsl(0 0% 97%)", "hsl(0 0% 7%)")};
+        border-top: 1px solid ${cssManager.bdTheme("hsl(0 0% 89.8%)", "hsl(0 0% 14.9%)")};
+        padding: 6px 12px;
+        display: flex;
+        gap: 16px;
+        font-size: 11px;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+
+      .metric {
+        display: flex;
+        align-items: center;
+        gap: 4px;
       }
 
-      /* Custom scrollbar */
-      .logContainer::-webkit-scrollbar {
+      .metric::before {
+        content: '';
         width: 8px;
+        height: 8px;
+        border-radius: 50%;
       }
 
-      .logContainer::-webkit-scrollbar-track {
-        background: ${cssManager.bdTheme("hsl(0 0% 95%)", "hsl(0 0% 10%)")};
+      .metric.error::before {
+        background: hsl(0 84.2% 60.2%);
       }
 
-      .logContainer::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme("hsl(0 0% 70%)", "hsl(0 0% 30%)")};
-        border-radius: 4px;
+      .metric.warn::before {
+        background: hsl(25 95% 53%);
+      }
+
+      .metric.info::before {
+        background: hsl(222.2 47.4% 51.2%);
       }
 
-      .logContainer::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme("hsl(0 0% 60%)", "hsl(0 0% 40%)")};
+      .metric.success::before {
+        background: hsl(142.1 76.2% 36.3%);
+      }
+
+      .metric.debug::before {
+        background: hsl(0 0% 63.9%);
+      }
+
+      .metric.rate {
+        margin-left: auto;
+        color: ${cssManager.bdTheme("hsl(0 0% 45.1%)", "hsl(0 0% 63.9%)")};
+      }
+
+      .metric.rate::before {
+        display: none;
       }
     `
 ]);
@@ -154150,9 +154763,9 @@ var openWidgetContextMenu = ({
 // ts_web/elements/dees-dashboardgrid/dees-dashboardgrid.ts
 init_dist_ts26();
 init_dees_icon();
-var _previewWidgets_dec, _resolvedMargins_dec, _metrics_dec, _placeholderPosition_dec, _activeBreakpoint_dec, _layouts_dec, _showGridLines_dec, _rtl_dec, _cellHeightUnit_dec, _enableAnimation_dec, _editable_dec, _columns_dec2, _margin_dec, _cellHeight_dec, _widgets_dec2, _a75, _DeesDashboardgrid_decorators, _init78, _widgets2, _cellHeight, _margin, _columns2, _editable, _enableAnimation, _cellHeightUnit, _rtl, _showGridLines, _layouts, _activeBreakpoint, _placeholderPosition, _metrics, _resolvedMargins, _previewWidgets;
+var _previewWidgets_dec, _resolvedMargins_dec, _metrics_dec2, _placeholderPosition_dec, _activeBreakpoint_dec, _layouts_dec, _showGridLines_dec, _rtl_dec, _cellHeightUnit_dec, _enableAnimation_dec, _editable_dec, _columns_dec2, _margin_dec, _cellHeight_dec, _widgets_dec2, _a75, _DeesDashboardgrid_decorators, _init78, _widgets2, _cellHeight, _margin, _columns2, _editable, _enableAnimation, _cellHeightUnit, _rtl, _showGridLines, _layouts, _activeBreakpoint, _placeholderPosition, _metrics2, _resolvedMargins, _previewWidgets;
 _DeesDashboardgrid_decorators = [t4("dees-dashboardgrid")];
-var DeesDashboardgrid = class extends (_a75 = DeesElement, _widgets_dec2 = [n5({ type: Array })], _cellHeight_dec = [n5({ type: Number })], _margin_dec = [n5({ type: Object })], _columns_dec2 = [n5({ type: Number })], _editable_dec = [n5({ type: Boolean })], _enableAnimation_dec = [n5({ type: Boolean, reflect: true })], _cellHeightUnit_dec = [n5({ type: String })], _rtl_dec = [n5({ type: Boolean })], _showGridLines_dec = [n5({ type: Boolean })], _layouts_dec = [n5({ attribute: false })], _activeBreakpoint_dec = [n5({ type: String })], _placeholderPosition_dec = [r5()], _metrics_dec = [r5()], _resolvedMargins_dec = [r5()], _previewWidgets_dec = [r5()], _a75) {
+var DeesDashboardgrid = class extends (_a75 = DeesElement, _widgets_dec2 = [n5({ type: Array })], _cellHeight_dec = [n5({ type: Number })], _margin_dec = [n5({ type: Object })], _columns_dec2 = [n5({ type: Number })], _editable_dec = [n5({ type: Boolean })], _enableAnimation_dec = [n5({ type: Boolean, reflect: true })], _cellHeightUnit_dec = [n5({ type: String })], _rtl_dec = [n5({ type: Boolean })], _showGridLines_dec = [n5({ type: Boolean })], _layouts_dec = [n5({ attribute: false })], _activeBreakpoint_dec = [n5({ type: String })], _placeholderPosition_dec = [r5()], _metrics_dec2 = [r5()], _resolvedMargins_dec = [r5()], _previewWidgets_dec = [r5()], _a75) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _widgets2, __runInitializers(_init78, 8, this, [])), __runInitializers(_init78, 11, this);
@@ -154167,7 +154780,7 @@ var DeesDashboardgrid = class extends (_a75 = DeesElement, _widgets_dec2 = [n5({
     __privateAdd(this, _layouts, __runInitializers(_init78, 44, this)), __runInitializers(_init78, 47, this);
     __privateAdd(this, _activeBreakpoint, __runInitializers(_init78, 48, this, "base")), __runInitializers(_init78, 51, this);
     __privateAdd(this, _placeholderPosition, __runInitializers(_init78, 52, this, null)), __runInitializers(_init78, 55, this);
-    __privateAdd(this, _metrics, __runInitializers(_init78, 56, this, null)), __runInitializers(_init78, 59, this);
+    __privateAdd(this, _metrics2, __runInitializers(_init78, 56, this, null)), __runInitializers(_init78, 59, this);
     __privateAdd(this, _resolvedMargins, __runInitializers(_init78, 60, this, null)), __runInitializers(_init78, 63, this);
     __privateAdd(this, _previewWidgets, __runInitializers(_init78, 64, this, null)), __runInitializers(_init78, 67, this);
     __publicField(this, "containerBounds", null);
@@ -154744,7 +155357,7 @@ _showGridLines = new WeakMap();
 _layouts = new WeakMap();
 _activeBreakpoint = new WeakMap();
 _placeholderPosition = new WeakMap();
-_metrics = new WeakMap();
+_metrics2 = new WeakMap();
 _resolvedMargins = new WeakMap();
 _previewWidgets = new WeakMap();
 __decorateElement(_init78, 4, "widgets", _widgets_dec2, DeesDashboardgrid, _widgets2);
@@ -154759,7 +155372,7 @@ __decorateElement(_init78, 4, "showGridLines", _showGridLines_dec, DeesDashboard
 __decorateElement(_init78, 4, "layouts", _layouts_dec, DeesDashboardgrid, _layouts);
 __decorateElement(_init78, 4, "activeBreakpoint", _activeBreakpoint_dec, DeesDashboardgrid, _activeBreakpoint);
 __decorateElement(_init78, 4, "placeholderPosition", _placeholderPosition_dec, DeesDashboardgrid, _placeholderPosition);
-__decorateElement(_init78, 4, "metrics", _metrics_dec, DeesDashboardgrid, _metrics);
+__decorateElement(_init78, 4, "metrics", _metrics_dec2, DeesDashboardgrid, _metrics2);
 __decorateElement(_init78, 4, "resolvedMargins", _resolvedMargins_dec, DeesDashboardgrid, _resolvedMargins);
 __decorateElement(_init78, 4, "previewWidgets", _previewWidgets_dec, DeesDashboardgrid, _previewWidgets);
 DeesDashboardgrid = __decorateElement(_init78, 0, "DeesDashboardgrid", _DeesDashboardgrid_decorators, DeesDashboardgrid);
@@ -157494,7 +158107,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.35.0",
+  version: "3.36.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 export {
@@ -159397,4 +160010,4 @@ ibantools/jsnext/ibantools.js:
    * @preferred
    *)
 */
-//# sourceMappingURL=bundle-1768240828162.js.map
+//# sourceMappingURL=bundle-1768261315087.js.map