<bmx-log-stream>

<div class="row" role="group" aria-label="Example queries">
  <bmx-button id="ex-ls-errors" variant="soft">level:&gt;=warn</bmx-button>
  <bmx-button id="ex-ls-5xx" variant="soft">status:&gt;=500</bmx-button>
  <bmx-button id="ex-ls-clear" variant="ghost">Clear</bmx-button>
</div>

<bmx-log-stream id="ex-ls" label="Order service log" redact="email" style="--bmx-log-stream-height: 24rem; margin-block-start: 1rem"></bmx-log-stream>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-ls-out">
    <strong>Everything runs in the browser.</strong> The log below is made in this page and opened as a file would be;
    drop one of your own on the viewer to read it instead. Search with words, <code>field:value</code> or
    <code>/regular expressions/</code>, hide levels with the chips, select a line and press <kbd>Enter</kbd> for its
    fields, and use <strong>Export</strong> to save what is on show. Email addresses are masked.
  </span>
</div>

<script type="module">
  await customElements.whenDefined('bmx-log-stream');

  const log = document.getElementById('ex-ls');
  const out = document.getElementById('ex-ls-out');

  // Two thousand JSON lines: an order service, with a stack trace now and then.
  const paths = ['/api/orders', '/api/cart', '/api/checkout', '/api/session'];
  const lines = [];
  for (let i = 0; i < 2000; i += 1) {
    const time = new Date(Date.UTC(2026, 8, 28, 9) + i * 1800).toISOString();
    const status = i % 97 === 0 ? 503 : i % 23 === 0 ? 404 : 200;
    const level = status >= 500 ? 'error' : status >= 400 ? 'warn' : i % 5 === 0 ? 'debug' : 'info';
    lines.push(JSON.stringify({ time, level, msg: `GET ${paths[i % 4]}`, status, ms: (i * 37) % 400, email: `customer${i % 40}@example.com` }));
  }
  await log.load(new Blob([lines.join('\n')], { type: 'application/x-ndjson' }));

  const queries = { 'ex-ls-errors': 'level:>=warn', 'ex-ls-5xx': 'status:>=500', 'ex-ls-clear': '' };
  for (const [id, query] of Object.entries(queries)) {
    document.getElementById(id).addEventListener('click', () => (log.query = query));
  }

  // Events: what is on show, and the line the reader chose.
  log.addEventListener('bmxLogFilter', event => {
    const { matches, total } = event.detail;
    out.textContent = `bmxLogFilter - ${matches} of ${total} lines match`;
  });
  log.addEventListener('bmxLogSelect', event => {
    out.textContent = `bmxLogSelect - line ${event.detail.line.number}: ${JSON.stringify(event.detail.fields)}`;
  });

  // Live lines are appended as they arrive, from a WebSocket for example:
  //   socket.onmessage = message => log.appendLog(message.data);
</script>