slicejs-web-framework 3.3.7 → 3.4.0

package/Slice/Components/Structural/EventManager/EventManagerDebugger.js

@@ -6,7 +6,10 @@ export default class EventManagerDebugger extends HTMLElement {
       super();
       this.isOpen = false;
       this.filterText = '';
+      this.activeTab = 'subscribers';
       this.refreshInterval = null;
+      this._autoRefreshTimer = null;
+      this._lastHistoryLength = 0;
    }
 
    /**
@@ -41,6 +44,11 @@ export default class EventManagerDebugger extends HTMLElement {
    open() {
       this.isOpen = true;
       this.container.classList.add('active');
+      this.activeTab = 'subscribers';
+      if (slice.events) {
+         slice.events.startRecording();
+      }
+      this._startAutoRefresh();
       this.renderList();
    }
 
@@ -51,6 +59,29 @@ export default class EventManagerDebugger extends HTMLElement {
    close() {
       this.isOpen = false;
       this.container.classList.remove('active');
+      this._stopAutoRefresh();
+      if (slice.events) {
+         slice.events.stopRecording();
+      }
+   }
+
+   _startAutoRefresh() {
+      this._stopAutoRefresh();
+      this._autoRefreshTimer = setInterval(() => {
+         if (!this.isOpen) return;
+         if (this.activeTab === 'history') {
+            this.renderHistory();
+         } else {
+            this.renderList();
+         }
+      }, 1500);
+   }
+
+   _stopAutoRefresh() {
+      if (this._autoRefreshTimer) {
+         clearInterval(this._autoRefreshTimer);
+         this._autoRefreshTimer = null;
+      }
    }
 
    cacheElements() {
@@ -61,15 +92,35 @@ export default class EventManagerDebugger extends HTMLElement {
       this.countLabel = this.querySelector('#events-count');
       this.refreshButton = this.querySelector('#events-refresh');
       this.closeButton = this.querySelector('#events-close');
+      this.tabSubs = this.querySelector('#tab-subscribers');
+      this.tabHistory = this.querySelector('#tab-history');
    }
 
    bindEvents() {
-      this.refreshButton.addEventListener('click', () => this.renderList());
+      this.refreshButton.addEventListener('click', () => {
+         if (this.activeTab === 'history') this.renderHistory();
+         else this.renderList();
+      });
       this.closeButton.addEventListener('click', () => this.close());
       this.filterInput.addEventListener('input', (event) => {
          this.filterText = event.target.value.trim().toLowerCase();
+         if (this.activeTab === 'history') this.renderHistory();
+         else this.renderList();
+      });
+      this.tabSubs.addEventListener('click', () => {
+         this.activeTab = 'subscribers';
+         this.tabSubs.classList.add('active');
+         this.tabHistory.classList.remove('active');
+         this.filterInput.placeholder = 'filter events…';
          this.renderList();
       });
+      this.tabHistory.addEventListener('click', () => {
+         this.activeTab = 'history';
+         this.tabHistory.classList.add('active');
+         this.tabSubs.classList.remove('active');
+         this.filterInput.placeholder = 'filter history…';
+         this.renderHistory();
+      });
    }
 
    makeDraggable() {
@@ -117,6 +168,7 @@ export default class EventManagerDebugger extends HTMLElement {
 
       const items = [];
       slice.events.subscriptions.forEach((subs, eventName) => {
+         const emitCount = slice.events.emitCounts?.get(eventName) || 0;
          const entries = Array.from(subs.entries()).map(([id, sub]) => {
             const componentSliceId = sub.componentSliceId || null;
             const component = componentSliceId ? slice.controller.getComponent(componentSliceId) : null;
@@ -133,7 +185,7 @@ export default class EventManagerDebugger extends HTMLElement {
             return;
          }
 
-         items.push({ eventName, count: subs.size, entries });
+         items.push({ eventName, count: subs.size, emitCount, entries });
       });
 
       items.sort((a, b) => a.eventName.localeCompare(b.eventName));
@@ -141,32 +193,76 @@ export default class EventManagerDebugger extends HTMLElement {
       this.countLabel.textContent = String(items.length);
       this.list.innerHTML = items.length
          ? items.map((item) => {
-              const details = item.entries.map((entry) => {
-                 const label = entry.componentName
-                    ? `${entry.componentName} (${entry.componentSliceId})`
-                    : entry.componentSliceId || 'Global';
-                 const onceBadge = entry.once ? '<span class="badge">once</span>' : '';
-                 return `
-                  <div class="subscriber-row">
-                     <div class="subscriber-name">${label}</div>
-                     <div class="subscriber-meta">${entry.id}${onceBadge}</div>
-                  </div>
-               `;
-              }).join('');
-
-              return `
-               <details class="event-row">
-                  <summary>
-                     <div class="event-name">${item.eventName}</div>
-                     <div class="event-count">${item.count}</div>
-                  </summary>
-                  <div class="subscriber-list">
-                     ${details || '<div class="empty">No subscribers</div>'}
-                  </div>
-               </details>
-            `;
-           }).join('')
-         : '<div class="empty">No events</div>';
+               const details = item.entries.map((entry) => {
+                  const label = entry.componentName
+                     ? `${entry.componentName} (${entry.componentSliceId})`
+                     : entry.componentSliceId || 'Global';
+                  const onceBadge = entry.once ? '<span class="badge">once</span>' : '';
+                  return `
+                   <div class="subscriber-row">
+                      <div class="subscriber-name">${label}</div>
+                      <div class="subscriber-meta">${entry.id}${onceBadge}</div>
+                   </div>
+                `;
+               }).join('');
+
+               return `
+                <details class="event-row">
+                   <summary>
+                      <div class="event-name">${item.eventName}</div>
+                      <div class="event-metrics">
+                         <span class="emit-count" title="Emits this session">⚡${item.emitCount}</span>
+                         <span class="event-count">${item.count}</span>
+                      </div>
+                   </summary>
+                   <div class="subscriber-list">
+                      ${details || '<div class="empty">No subscribers</div>'}
+                   </div>
+                </details>
+             `;
+            }).join('')
+          : '<div class="empty">No events</div>';
+   }
+
+   renderHistory() {
+      if (!slice?.events?.emitHistory) {
+         this.list.textContent = 'EventManager not available.';
+         this.countLabel.textContent = '0';
+         return;
+      }
+
+      const history = slice.events.emitHistory;
+      const filtered = this.filterText
+         ? history.filter(e => e.eventName.toLowerCase().includes(this.filterText))
+         : history;
+
+      this.countLabel.textContent = String(filtered.length);
+      if (!filtered.length) {
+         this.list.innerHTML = '<div class="empty">No emits recorded yet</div>';
+         return;
+      }
+
+      const now = Date.now();
+      this.list.innerHTML = [...filtered].reverse().map((entry) => {
+         const diff = now - entry.timestamp;
+         const timeStr = diff < 1000 ? 'now'
+            : diff < 60000 ? `${Math.floor(diff / 1000)}s ago`
+            : `${Math.floor(diff / 60000)}m ago`;
+         return `
+            <div class="history-row">
+               <div class="history-event">${this.escapeHtml(entry.eventName)}</div>
+               <div class="history-time">${timeStr}</div>
+            </div>
+         `;
+      }).join('');
+   }
+
+   escapeHtml(value) {
+      return String(value)
+         .replace(/&/g, '&amp;')
+         .replace(/</g, '&lt;')
+         .replace(/>/g, '&gt;')
+         .replace(/"/g, '&quot;');
    }
 
    renderTemplate() {
@@ -183,6 +279,10 @@ export default class EventManagerDebugger extends HTMLElement {
                <button id="events-close" class="btn" title="Close" aria-label="Close">✕</button>
             </div>
          </div>
+         <div class="events-tabs">
+            <button id="tab-subscribers" class="tab-btn active">Subscribers</button>
+            <button id="tab-history" class="tab-btn">History</button>
+         </div>
          <div class="events-toolbar">
             <input id="events-filter" type="text" placeholder="filter events…" autocomplete="off" spellcheck="false" />
             <div class="count"><span id="events-count">0</span></div>
@@ -195,18 +295,22 @@ export default class EventManagerDebugger extends HTMLElement {
    renderStyles() {
       return `
 /* Slice Instruments — events console. All selectors scoped to the
-   <slice-eventmanager-debugger> tag so nothing clashes with app styles. */
+    <slice-eventmanager-debugger> tag so nothing clashes with app styles.
+    Every --si-* token reads the matching framework theme variable from
+    :root, falling back to the original hardcoded value if absent. */
 slice-eventmanager-debugger {
-   --si-accent: var(--primary-color, #6ee7ff);
-   --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
-   --si-surface: rgba(17, 19, 28, 0.86);
-   --si-raised: rgba(255, 255, 255, 0.035);
-   --si-raised-2: rgba(255, 255, 255, 0.06);
-   --si-border: rgba(255, 255, 255, 0.09);
-   --si-text: #e8eaf2;
-   --si-dim: #888fa6;
-   --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
-}
+    --si-accent: var(--primary-color, #6ee7ff);
+    --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+    --si-surface: var(--primary-background-color, rgba(17, 19, 28, 0.86));
+    --si-raised: var(--secondary-background-color, rgba(255, 255, 255, 0.035));
+    --si-raised-2: var(--tertiary-background-color, rgba(255, 255, 255, 0.06));
+    --si-border: var(--medium-color, rgba(255, 255, 255, 0.09));
+    --si-text: var(--font-primary-color, #e8eaf2);
+    --si-dim: var(--font-secondary-color, #888fa6);
+    --si-danger: var(--danger-color, #ff6b6b);
+    --si-success: var(--success-color, #46d39a);
+    --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+ }
 
 slice-eventmanager-debugger #events-debugger {
    position: fixed;
@@ -311,6 +415,31 @@ slice-eventmanager-debugger .btn:hover {
 slice-eventmanager-debugger .btn:active { transform: scale(0.92); }
 slice-eventmanager-debugger #events-refresh:hover { color: var(--si-accent); }
 
+slice-eventmanager-debugger .events-tabs {
+   display: flex;
+   gap: 0;
+   padding: 0 12px;
+   border-bottom: 1px solid var(--si-border);
+   background: var(--si-raised);
+}
+slice-eventmanager-debugger .tab-btn {
+   all: unset;
+   cursor: pointer;
+   font-size: 10px;
+   font-weight: 600;
+   letter-spacing: 0.06em;
+   text-transform: uppercase;
+   padding: 7px 12px;
+   color: var(--si-dim);
+   border-bottom: 2px solid transparent;
+   transition: color 0.15s ease, border-color 0.15s ease;
+}
+slice-eventmanager-debugger .tab-btn:hover { color: var(--si-text); }
+slice-eventmanager-debugger .tab-btn.active {
+   color: var(--si-accent);
+   border-bottom-color: var(--si-accent);
+}
+
 slice-eventmanager-debugger .events-toolbar {
    display: flex;
    gap: 10px;
@@ -397,6 +526,21 @@ slice-eventmanager-debugger .event-name {
    white-space: nowrap;
 }
 
+slice-eventmanager-debugger .event-metrics {
+   display: flex;
+   align-items: center;
+   gap: 6px;
+}
+slice-eventmanager-debugger .emit-count {
+   font-weight: 600;
+   font-size: 10px;
+   color: var(--si-success);
+   background: rgba(70, 211, 154, 0.12);
+   border: 1px solid rgba(70, 211, 154, 0.25);
+   padding: 1px 6px;
+   border-radius: 999px;
+   white-space: nowrap;
+}
 slice-eventmanager-debugger .event-count {
    font-weight: 600;
    font-size: 11px;
@@ -408,6 +552,33 @@ slice-eventmanager-debugger .event-count {
    min-width: 22px;
    text-align: center;
 }
+slice-eventmanager-debugger .history-row {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   gap: 10px;
+   padding: 6px 11px;
+   background: var(--si-raised);
+   border-radius: 7px;
+   border: 1px solid var(--si-border);
+   border-left: 2px solid transparent;
+   transition: border-color 0.15s ease;
+}
+slice-eventmanager-debugger .history-row:hover { border-left-color: var(--si-accent); }
+slice-eventmanager-debugger .history-event {
+   font-family: var(--si-mono);
+   font-size: 11.5px;
+   color: var(--si-text);
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
+slice-eventmanager-debugger .history-time {
+   font-size: 10px;
+   color: var(--si-dim);
+   white-space: nowrap;
+   flex-shrink: 0;
+}
 
 slice-eventmanager-debugger .subscriber-list {
    margin-top: 9px;