@beworke/pixel 0.1.0-rc.1 → 0.1.0-rc.6

package/dist/examples/html-script/behavior/example-behavior-runtime-intelligence.html

@@ -0,0 +1,433 @@
+<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pixel v2 — Runtime Intelligence (Etapa 20)</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+        padding: 2rem;
+        max-width: 1100px;
+      }
+      .hint {
+        background: #ecfdf5;
+        border: 1px solid #a7f3d0;
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        font-size: 14px;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin: 1rem 0;
+      }
+      button {
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+      }
+      .state-badge {
+        display: inline-block;
+        padding: 0.35rem 0.85rem;
+        border-radius: 999px;
+        font-weight: 600;
+        font-size: 0.9rem;
+        background: #dbeafe;
+        color: #1e40af;
+        margin-bottom: 1rem;
+      }
+      .panels {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+      @media (max-width: 820px) {
+        .panels {
+          grid-template-columns: 1fr;
+        }
+      }
+      .panel {
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+        border-radius: 8px;
+        padding: 1rem;
+        background: #f4f4f5;
+        border: 1px solid #e4e4e7;
+      }
+      .panel h3 {
+        margin: 0 0 0.75rem;
+        font-size: 13px;
+        font-family: system-ui, sans-serif;
+      }
+      .panel pre {
+        margin: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+      #logs {
+        background: #18181b;
+        color: #fafafa;
+        min-height: 180px;
+        max-height: 320px;
+        overflow: auto;
+        margin-top: 1rem;
+        border-radius: 8px;
+        padding: 1rem;
+        font-family: ui-monospace, monospace;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Behavior Runtime Intelligence</h1>
+    <p class="hint">
+      Etapa 20 — RateLimit, Buffer, StateMachine e Session Summary. Emite
+      <code>BEHAVIOR_SESSION_SUMMARY</code> via Dispatcher. Dados fictícios.
+      <br /><br />
+      <strong>Roteiro:</strong> Init → Burst → Idle/Active/Hidden/Visible →
+      Flush → Summary → Destroy (captura summary) → Reinit.
+    </p>
+
+    <div id="state-badge" class="state-badge">state: —</div>
+
+    <div class="actions">
+      <button type="button" id="btn-init">Init</button>
+      <button type="button" id="btn-burst">Burst signals</button>
+      <button type="button" id="btn-idle">Idle</button>
+      <button type="button" id="btn-active">Active</button>
+      <button type="button" id="btn-hidden">Hidden</button>
+      <button type="button" id="btn-visible">Visible</button>
+      <button type="button" id="btn-flush">Flush</button>
+      <button type="button" id="btn-summary">Summary</button>
+      <button type="button" id="btn-destroy">Destroy</button>
+      <button type="button" id="btn-reinit">Reinit</button>
+      <button type="button" id="btn-clear">Clear log</button>
+    </div>
+
+    <div class="panels">
+      <div class="panel">
+        <h3>Rate limit</h3>
+        <pre id="rate-limit">—</pre>
+      </div>
+      <div class="panel">
+        <h3>Buffer</h3>
+        <pre id="buffer">—</pre>
+      </div>
+      <div class="panel">
+        <h3>Session summary</h3>
+        <pre id="summary">—</pre>
+      </div>
+      <div class="panel">
+        <h3>Engagement</h3>
+        <pre id="engagement">—</pre>
+      </div>
+      <div class="panel" style="grid-column: 1 / -1">
+        <h3>Diagnostics (behavior.*)</h3>
+        <pre id="diag">—</pre>
+      </div>
+    </div>
+
+    <div id="logs"></div>
+
+    <script src="../../../dist/v2/global.global.js"></script>
+    <script>
+      (function () {
+        const { Pixel, DEFAULT_PIXEL_CONFIG } = window.PixelV2;
+        const logsEl = document.getElementById('logs');
+        const stateBadge = document.getElementById('state-badge');
+        const rateLimitEl = document.getElementById('rate-limit');
+        const bufferEl = document.getElementById('buffer');
+        const summaryEl = document.getElementById('summary');
+        const engagementEl = document.getElementById('engagement');
+        const diagEl = document.getElementById('diag');
+
+        let pixel = null;
+        let unsubscribe = null;
+        let lastSnapshot = null;
+        const eventCounts = {
+          BEHAVIOR_SESSION_SUMMARY: 0,
+          ENGAGEMENT_UPDATE: 0,
+          ENGAGEMENT_SUMMARY: 0,
+        };
+
+        function log(msg, data) {
+          const line = document.createElement('div');
+          line.textContent =
+            '[' +
+            new Date().toISOString().slice(11, 23) +
+            '] ' +
+            msg +
+            (data !== undefined ? ' ' + JSON.stringify(data) : '');
+          logsEl.prepend(line);
+        }
+
+        function buildConfig() {
+          return {
+            ...DEFAULT_PIXEL_CONFIG,
+            identity: {
+              ...DEFAULT_PIXEL_CONFIG.identity,
+              pixelId: 'runtime-intelligence-demo',
+            },
+            modules: {
+              ...DEFAULT_PIXEL_CONFIG.modules,
+              core: {
+                ...DEFAULT_PIXEL_CONFIG.modules.core,
+                enabled: true,
+                pageView: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.core.pageView,
+                  enabled: false,
+                  trackInitialPageView: false,
+                  spa: false,
+                },
+                session: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.core.session,
+                  enabled: false,
+                },
+              },
+              privacy: {
+                ...DEFAULT_PIXEL_CONFIG.modules.privacy,
+                enabled: false,
+              },
+              conversion: {
+                ...DEFAULT_PIXEL_CONFIG.modules.conversion,
+                enabled: false,
+              },
+              integrations: {
+                ...DEFAULT_PIXEL_CONFIG.modules.integrations,
+                enabled: false,
+              },
+              transport: {
+                ...DEFAULT_PIXEL_CONFIG.modules.transport,
+                enabled: false,
+              },
+              behavior: {
+                ...DEFAULT_PIXEL_CONFIG.modules.behavior,
+                enabled: true,
+                heartbeat: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.heartbeat,
+                  enabled: false,
+                },
+                engagement: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.engagement,
+                  enabled: true,
+                  evaluationIntervalMs: 3000,
+                  minScoreDelta: 3,
+                  emitSummaryOnDestroy: false,
+                },
+                rateLimit: {
+                  enabled: true,
+                  windowMs: 1000,
+                  maxSignalsPerWindow: 20,
+                  criticalBypass: true,
+                },
+                buffer: {
+                  enabled: true,
+                  maxSize: 50,
+                  maxAgeMs: 5000,
+                  flushSize: 15,
+                  dropStrategy: 'compress_similar',
+                  flushOnHidden: true,
+                },
+                stateMachine: {
+                  enabled: true,
+                  historyLimit: 30,
+                },
+                sessionSummary: {
+                  enabled: true,
+                  emitOnHidden: true,
+                  emitOnDestroy: true,
+                  minimumSessionMs: 0,
+                },
+                trackers: {
+                  ...DEFAULT_PIXEL_CONFIG.modules.behavior.trackers,
+                  scroll: { enabled: false, thresholds: [], debounceMs: 0 },
+                  click: { enabled: false, rageClick: { enabled: false, threshold: 3, windowMs: 500 } },
+                  visibility: { enabled: false },
+                  idle: { enabled: false, thresholdMs: 60000 },
+                  exitIntent: { enabled: false },
+                  viewport: {
+                    enabled: false,
+                    targets: [],
+                    rootMargin: '0px',
+                    observeMutations: false,
+                    mutationDebounceMs: 0,
+                    maxObservedElements: 0,
+                  },
+                },
+              },
+            },
+          };
+        }
+
+        function captureLive() {
+          if (!pixel || !pixel.isInitialized || !pixel.isInitialized()) return null;
+          try {
+            const snap = pixel.getDebugSnapshot();
+            lastSnapshot = snap;
+            return snap;
+          } catch (err) {
+            return lastSnapshot;
+          }
+        }
+
+        function refresh(destroyed) {
+          const snap = captureLive();
+          if (!snap) {
+            if (destroyed && lastSnapshot) {
+              renderPanels(lastSnapshot, true);
+            }
+            return;
+          }
+          renderPanels(snap, destroyed);
+        }
+
+        function renderPanels(snap, destroyed) {
+          const b = snap.behavior || {};
+          const sm = b.stateMachine;
+          stateBadge.textContent =
+            'state: ' +
+            (sm ? sm.state : '—') +
+            ' · gen ' +
+            (sm ? sm.generation : '—') +
+            (destroyed ? ' (destroyed)' : '');
+
+          rateLimitEl.textContent = JSON.stringify(b.rateLimit, null, 2);
+          bufferEl.textContent = JSON.stringify(b.buffer, null, 2);
+          summaryEl.textContent = JSON.stringify(
+            { eventCounts: eventCounts, sessionSummary: b.sessionSummary },
+            null,
+            2
+          );
+          engagementEl.textContent = JSON.stringify(b.engagement, null, 2);
+          diagEl.textContent = JSON.stringify(
+            {
+              runtime: destroyed ? 'destroyed' : 'active',
+              health: snap.health,
+              configuredEngines: b.configuredEngines,
+              rateLimit: b.rateLimit,
+              buffer: b.buffer,
+              stateMachine: b.stateMachine,
+              sessionSummary: b.sessionSummary,
+            },
+            null,
+            2
+          );
+        }
+
+        function wire() {
+          if (!pixel || unsubscribe) return;
+          const services = pixel.getDebugServices && pixel.getDebugServices();
+          if (!services || !services.dispatcher) return;
+          unsubscribe = services.dispatcher.subscribe(function (event) {
+            if (event.type === 'BEHAVIOR_SESSION_SUMMARY') {
+              eventCounts.BEHAVIOR_SESSION_SUMMARY += 1;
+              log('BEHAVIOR_SESSION_SUMMARY', {
+                reason: event.reason,
+                clickCount: event.clickCount,
+                generation: event.generation,
+                finalState: event.finalState,
+              });
+              captureLive();
+              refresh(false);
+            } else if (event.type === 'ENGAGEMENT_UPDATE') {
+              eventCounts.ENGAGEMENT_UPDATE += 1;
+              log('ENGAGEMENT_UPDATE', { score: event.score, level: event.level });
+              refresh(false);
+            } else if (event.type === 'ENGAGEMENT_SUMMARY') {
+              eventCounts.ENGAGEMENT_SUMMARY += 1;
+              log('ENGAGEMENT_SUMMARY', { score: event.score, peakScore: event.peakScore });
+            }
+          });
+        }
+
+        async function doInit() {
+          if (pixel && pixel.isInitialized()) {
+            log('already initialized');
+            return;
+          }
+          pixel = new Pixel(buildConfig());
+          await pixel.init();
+          wire();
+          log('init ok');
+          refresh(false);
+        }
+
+        async function doDestroy() {
+          if (!pixel) return;
+          captureLive();
+          await pixel.destroy();
+          if (unsubscribe) {
+            unsubscribe();
+            unsubscribe = null;
+          }
+          pixel = null;
+          log('destroy ok');
+          refresh(true);
+        }
+
+        document.getElementById('btn-init').onclick = doInit;
+        document.getElementById('btn-destroy').onclick = doDestroy;
+        document.getElementById('btn-reinit').onclick = async function () {
+          await doDestroy();
+          await doInit();
+        };
+        document.getElementById('btn-burst').onclick = function () {
+          if (!pixel) return;
+          for (let i = 0; i < 30; i += 1) {
+            pixel.debugPublishBehaviorSignal('SCROLL', { maxScrollPercent: i * 3 });
+            pixel.debugPublishBehaviorSignal('CLICK');
+          }
+          log('burst: 60 signals');
+          refresh(false);
+        };
+        document.getElementById('btn-idle').onclick = function () {
+          if (!pixel) return;
+          pixel.debugPublishBehaviorSignal('IDLE', { idleSince: Date.now() });
+          log('signal: IDLE');
+          refresh(false);
+        };
+        document.getElementById('btn-active').onclick = function () {
+          if (!pixel) return;
+          pixel.debugPublishBehaviorSignal('ACTIVITY', { at: Date.now() });
+          log('signal: ACTIVITY');
+          refresh(false);
+        };
+        document.getElementById('btn-hidden').onclick = function () {
+          if (!pixel) return;
+          pixel.debugPublishBehaviorSignal('HIDDEN', { hiddenAt: Date.now() });
+          log('signal: HIDDEN');
+          refresh(false);
+        };
+        document.getElementById('btn-visible').onclick = function () {
+          if (!pixel) return;
+          pixel.debugPublishBehaviorSignal('VISIBLE', { visibleSince: Date.now() });
+          log('signal: VISIBLE');
+          refresh(false);
+        };
+        document.getElementById('btn-flush').onclick = function () {
+          if (!pixel) return;
+          pixel.flushBehaviorBuffer();
+          log('manual buffer flush');
+          refresh(false);
+        };
+        document.getElementById('btn-summary').onclick = function () {
+          if (!pixel) return;
+          const ok = pixel.emitBehaviorSessionSummary('hidden');
+          log('manual summary', { emitted: ok });
+          refresh(false);
+        };
+        document.getElementById('btn-clear').onclick = function () {
+          logsEl.textContent = '';
+          eventCounts.BEHAVIOR_SESSION_SUMMARY = 0;
+          eventCounts.ENGAGEMENT_UPDATE = 0;
+          eventCounts.ENGAGEMENT_SUMMARY = 0;
+        };
+
+        log('ready — clique Init (requer dist/v2/global.global.js)');
+      })();
+    </script>
+  </body>
+</html>