@pasko70/pibo 1.1.0 → 1.3.0

package/dist/debug/web-snapshot-browser-scripts.js

@@ -0,0 +1,303 @@
+export function buildSnapshotExpression(options) {
+    return `(() => {
+  const options = ${JSON.stringify(options)};
+  ${browserSnapshotLibrary()}
+  return captureSnapshot(options);
+})()`;
+}
+export function buildWatchExpression(options) {
+    return `(async () => {
+  const options = ${JSON.stringify(options)};
+  ${browserSnapshotLibrary()}
+  return await runWatch(options);
+})()`;
+}
+function browserSnapshotLibrary() {
+    return String.raw `
+function nowIso() { return new Date().toISOString(); }
+function safeString(value) { return typeof value === 'string' ? value : ''; }
+function short(value, limit) {
+  const text = safeString(value).replace(/\s+/g, ' ').trim();
+  return text.length > limit ? text.slice(0, Math.max(0, limit - 1)) + '…' : text;
+}
+function redactText(element, options) {
+  const tag = element.tagName.toLowerCase();
+  const debug = element.getAttribute('data-pibo-debug') || '';
+  if (tag === 'textarea' || tag === 'input' || debug === 'composer') {
+    const value = 'value' in element ? String(element.value || '') : '';
+    return value ? '[redacted:' + value.length + ' chars]' : '';
+  }
+  const text = element.innerText || element.textContent || '';
+  if (!options.includeText && /message|trace|terminal|composer/i.test(debug)) return text ? '[redacted]' : '';
+  return short(text, options.textLimit);
+}
+function classSummary(element) {
+  const value = safeString(element.getAttribute('class'));
+  if (!value) return undefined;
+  const parts = value.split(/\s+/).filter(Boolean);
+  const useful = parts.filter((part) => /selected|active|hidden|opacity|translate|animate|border|bg-|text-|ring|disabled|pointer|sr-only/.test(part));
+  return (useful.length ? useful : parts.slice(0, 6)).slice(0, 10).join(' ');
+}
+function attrMap(element) {
+  const attrs = {};
+  const allow = /^(id|role|aria-|data-pibo-|data-testid$|disabled$|checked$|selected$|hidden$|tabindex$|title$)/;
+  for (const attr of Array.from(element.attributes || [])) {
+    if (!allow.test(attr.name)) continue;
+    if (/token|cookie|authorization|secret|password/i.test(attr.name)) {
+      attrs[attr.name] = '[redacted]';
+    } else {
+      attrs[attr.name] = short(attr.value, 120);
+    }
+  }
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    attrs.value = element.value ? '[redacted:' + element.value.length + ' chars]' : '';
+    attrs.disabled = Boolean(element.disabled);
+  }
+  return attrs;
+}
+function roleOf(element) {
+  const explicit = element.getAttribute('role');
+  if (explicit) return explicit;
+  const tag = element.tagName.toLowerCase();
+  if (tag === 'button') return 'button';
+  if (tag === 'a') return 'link';
+  if (tag === 'textarea') return 'textbox';
+  if (tag === 'input') return 'input';
+  if (tag === 'select') return 'combobox';
+  if (tag === 'main') return 'main';
+  if (tag === 'aside') return 'complementary';
+  if (tag === 'nav') return 'navigation';
+  return undefined;
+}
+function nameOf(element, options) {
+  const aria = element.getAttribute('aria-label');
+  if (aria) return short(aria, options.textLimit);
+  const title = element.getAttribute('title');
+  if (title) return short(title, options.textLimit);
+  const tag = element.tagName.toLowerCase();
+  if (tag === 'input' || tag === 'textarea') return short(element.getAttribute('placeholder') || '', options.textLimit);
+  const debug = element.getAttribute('data-pibo-debug');
+  if (debug === 'session-row') return short(element.getAttribute('data-pibo-title') || element.innerText || '', options.textLimit);
+  return undefined;
+}
+function elementPath(element) {
+  const parts = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE && current !== document.documentElement) {
+    const tag = current.tagName.toLowerCase();
+    const parent = current.parentElement;
+    if (!parent) {
+      parts.unshift(tag);
+      break;
+    }
+    const index = Array.from(parent.children).filter((child) => child.tagName === current.tagName).indexOf(current) + 1;
+    parts.unshift(tag + ':nth-of-type(' + index + ')');
+    current = parent;
+  }
+  return parts.join('>');
+}
+function identityOf(element) {
+  const debug = element.getAttribute('data-pibo-debug');
+  const session = element.getAttribute('data-pibo-session-id');
+  const room = element.getAttribute('data-pibo-room-id');
+  const view = element.getAttribute('data-pibo-view-id');
+  const testId = element.getAttribute('data-testid');
+  const id = element.id;
+  if (debug && session) return { identity: debug + ':' + session, kind: 'pibo-session' };
+  if (debug && room) return { identity: debug + ':' + room, kind: 'pibo-room' };
+  if (debug && view) return { identity: debug + ':' + view, kind: 'pibo-view' };
+  if (debug) return { identity: debug, kind: 'pibo-debug' };
+  if (testId) return { identity: 'testid:' + testId, kind: 'testid' };
+  if (id) return { identity: 'id:' + id, kind: 'id' };
+  const role = roleOf(element);
+  const name = nameOf(element, { textLimit: 40 }) || '';
+  if (role && name) return { identity: role + ':' + name, kind: 'role-name' };
+  return { identity: 'path:' + elementPath(element), kind: 'path' };
+}
+function boxOf(element) {
+  const rect = element.getBoundingClientRect();
+  return { x: Math.round(rect.x), y: Math.round(rect.y), w: Math.round(rect.width), h: Math.round(rect.height) };
+}
+function isImportantElement(element, depth) {
+  if (!(element instanceof Element)) return false;
+  const tag = element.tagName.toLowerCase();
+  if (depth === 0) return true;
+  if (['script', 'style', 'svg', 'path', 'rect', 'circle', 'line', 'polyline', 'polygon'].includes(tag)) return false;
+  if (element.hasAttribute('data-pibo-debug') || element.hasAttribute('data-pibo-session-id') || element.hasAttribute('data-testid')) return true;
+  if (element.hasAttribute('aria-label') || element.hasAttribute('title') || element.hasAttribute('role')) return true;
+  if (['button', 'a', 'input', 'textarea', 'select', 'option', 'main', 'aside', 'nav'].includes(tag)) return true;
+  if (element === document.activeElement) return true;
+  if (element.getAttribute('aria-selected') === 'true' || element.getAttribute('data-pibo-selected') === 'true' || element.hasAttribute('hidden')) return true;
+  const text = (element.innerText || element.textContent || '').replace(/\s+/g, ' ').trim();
+  if (text && element.children.length === 0 && depth <= 4) return true;
+  return false;
+}
+function summarizeElement(element, depth, ref, options) {
+  const ident = identityOf(element);
+  const node = {
+    ref,
+    identity: ident.identity,
+    identityKind: ident.kind,
+    depth,
+    tag: element.tagName.toLowerCase(),
+    attributes: attrMap(element),
+    path: elementPath(element),
+  };
+  const role = roleOf(element); if (role) node.role = role;
+  const name = nameOf(element, options); if (name) node.name = name;
+  const text = redactText(element, options); if (text) node.text = text;
+  const classes = classSummary(element); if (classes) node.classSummary = classes;
+  if (document.activeElement === element) node.focused = true;
+  if (options.includeLayout) node.box = boxOf(element);
+  return node;
+}
+function captureSnapshot(options) {
+  const root = document.querySelector(options.scope);
+  const nodes = [];
+  const omitted = { nodes: 0, depth: 0, budget: false };
+  let refSeq = 0;
+  function walk(element, depth) {
+    if (!(element instanceof Element)) return;
+    if (depth > options.maxDepth) { omitted.depth += 1; return; }
+    if (isImportantElement(element, depth)) {
+      if (nodes.length >= options.maxNodes) { omitted.nodes += 1; omitted.budget = true; return; }
+      const node = summarizeElement(element, depth, '@n' + (++refSeq), options);
+      nodes.push(node);
+    }
+    for (const child of Array.from(element.children)) walk(child, depth + 1);
+  }
+  if (root) walk(root, 0);
+  const active = document.activeElement instanceof Element ? summarizeElement(document.activeElement, 0, '@focus', options) : undefined;
+  return {
+    kind: 'snapshot',
+    createdAt: nowIso(),
+    url: location.href,
+    title: document.title || '',
+    scope: options.scope,
+    rootFound: Boolean(root),
+    root: nodes[0],
+    activeElement: active ? { identity: active.identity, tag: active.tag, name: active.name, path: active.path } : undefined,
+    nodes,
+    omitted,
+  };
+}
+function mutationTarget(mutation, options) {
+  const target = mutation.target instanceof Element ? mutation.target : mutation.target.parentElement;
+  return target ? summarizeElement(target, 0, '@target', options) : undefined;
+}
+function pushEvent(events, omitted, maxEvents, event) {
+  if (events.length >= maxEvents) { omitted.events += 1; return; }
+  events.push(event);
+}
+function findNewSessionButton() {
+  const candidates = Array.from(document.querySelectorAll('button'));
+  return candidates.find((button) => {
+    const label = [button.getAttribute('aria-label'), button.getAttribute('title'), button.textContent].filter(Boolean).join(' ');
+    return /New Session/i.test(label);
+  });
+}
+async function runWatch(options) {
+  const root = document.querySelector(options.scope);
+  const events = [];
+  const omitted = { events: 0, nodes: 0, depth: 0, budget: false };
+  const start = performance.now();
+  const at = () => Math.max(0, Math.round(performance.now() - start));
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  let action = undefined;
+  const routeEvent = (kind, beforeUrl, afterUrl) => {
+    if (beforeUrl !== afterUrl) pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'route', kind, before: beforeUrl, after: afterUrl });
+  };
+  history.pushState = function(...args) {
+    const beforeUrl = location.href;
+    const result = originalPushState.apply(this, args);
+    routeEvent('pushState', beforeUrl, location.href);
+    return result;
+  };
+  history.replaceState = function(...args) {
+    const beforeUrl = location.href;
+    const result = originalReplaceState.apply(this, args);
+    routeEvent('replaceState', beforeUrl, location.href);
+    return result;
+  };
+  const onPopState = () => pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'route', kind: 'popstate', after: location.href });
+  const onFocusIn = (event) => {
+    if (!(event.target instanceof Element)) return;
+    if (root && !root.contains(event.target)) return;
+    const node = summarizeElement(event.target, 0, '@focus', options);
+    pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'focus', kind: 'focusin', target: node.identity, node });
+  };
+  const observer = root ? new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === 'childList') {
+        for (const added of Array.from(mutation.addedNodes)) {
+          if (!(added instanceof Element)) continue;
+          const node = summarizeElement(added, 0, '@added', options);
+          pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'dom', kind: 'added', target: node.identity, node });
+        }
+        for (const removed of Array.from(mutation.removedNodes)) {
+          if (!(removed instanceof Element)) continue;
+          const node = summarizeElement(removed, 0, '@removed', options);
+          pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'dom', kind: 'removed', target: node.identity, node });
+        }
+      } else if (mutation.type === 'attributes') {
+        const node = mutationTarget(mutation, options);
+        if (!node) continue;
+        const name = mutation.attributeName || 'attribute';
+        const after = mutation.target instanceof Element ? mutation.target.getAttribute(name) : undefined;
+        pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'dom', kind: 'attr', target: node.identity, detail: name, before: mutation.oldValue || '', after: after || '', node });
+      } else if (mutation.type === 'characterData') {
+        const node = mutationTarget(mutation, options);
+        pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'dom', kind: 'text', target: node ? node.identity : undefined, before: short(mutation.oldValue || '', options.textLimit), after: short(mutation.target.textContent || '', options.textLimit), node });
+      }
+    }
+  }) : undefined;
+  if (observer && root) observer.observe(root, { childList: true, subtree: true, attributes: true, attributeOldValue: true, characterData: true, characterDataOldValue: true, attributeFilter: ['class', 'style', 'hidden', 'aria-selected', 'aria-expanded', 'data-pibo-selected', 'data-pibo-session-id', 'data-pibo-selected-session-id', 'data-pibo-state', 'data-pibo-debug'] });
+  document.addEventListener('focusin', onFocusIn, true);
+  window.addEventListener('popstate', onPopState, true);
+  const before = captureSnapshot(options);
+  omitted.nodes += before.omitted.nodes;
+  omitted.depth += before.omitted.depth;
+  omitted.budget = omitted.budget || before.omitted.budget;
+  if (options.action === 'new-session') {
+    try {
+      const button = findNewSessionButton();
+      action = { requested: 'new-session', performed: Boolean(button) };
+      if (button) {
+        const node = summarizeElement(button, 0, '@action', options);
+        pushEvent(events, omitted, options.maxEvents, { t: at(), source: 'action', kind: 'click', target: node.identity, detail: 'New Session', node });
+        button.click();
+      } else {
+        action.error = 'New Session button not found';
+      }
+    } catch (error) {
+      action = { requested: 'new-session', performed: false, error: String(error && error.message ? error.message : error) };
+    }
+  }
+  await new Promise((resolve) => setTimeout(resolve, options.durationMs));
+  observer?.disconnect();
+  document.removeEventListener('focusin', onFocusIn, true);
+  window.removeEventListener('popstate', onPopState, true);
+  history.pushState = originalPushState;
+  history.replaceState = originalReplaceState;
+  const after = captureSnapshot(options);
+  omitted.nodes += after.omitted.nodes;
+  omitted.depth += after.omitted.depth;
+  omitted.budget = omitted.budget || after.omitted.budget || omitted.events > 0;
+  return {
+    kind: 'watch',
+    createdAt: nowIso(),
+    url: location.href,
+    title: document.title || '',
+    scope: options.scope,
+    durationMs: options.durationMs,
+    rootFound: Boolean(before.rootFound || after.rootFound),
+    events,
+    before,
+    after,
+    omitted,
+    action,
+  };
+}
+`;
+}