design-clone 1.2.0 → 2.3.0

package/src/core/dimension/dom-tree-analyzer.js

@@ -0,0 +1,191 @@
+/**
+ * DOM Tree Analyzer
+ *
+ * Traverse DOM tree hierarchically to capture structure,
+ * semantic landmarks, and parent-child relationships.
+ *
+ * Key features:
+ * - PreOrder traversal (parent before children)
+ * - W3C landmark detection (header, main, footer, nav, aside)
+ * - Section context mapping (hero, content, sidebar, footer)
+ * - Bidirectional parent-child refs
+ * - Configurable max depth (default: 8)
+ *
+ * Post-processing (landmarks map, heading tree, stats) lives in
+ * dom-tree-analyzer-tree-builders.js and runs in Node context.
+ */
+
+import { buildLandmarksMap, buildHeadingTree, countTreeStats } from './dom-tree-analyzer-tree-builders.js';
+
+// Constants
+export const MAX_DEPTH = 8;
+export const LANDMARK_TAGS = ['header', 'main', 'footer', 'nav', 'aside', 'section', 'article'];
+export const HEADING_TAGS  = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+// Section detection thresholds
+const HERO_THRESHOLD     = 0.15;
+const FOOTER_THRESHOLD   = 0.85;
+const SIDEBAR_MAX_WIDTH  = 400;
+const Y_POSITION_TOLERANCE = 5;
+
+/**
+ * Extract DOM tree hierarchy from page.
+ * @param {import('playwright').Page} page - Playwright page
+ * @param {Object} options
+ * @param {number} [options.maxDepth=8] - Maximum traversal depth
+ * @param {boolean} [options.includeHidden=false] - Include hidden elements
+ * @returns {Promise<Object>} DOMHierarchy with root, landmarks, headingTree, stats
+ */
+export async function extractDOMHierarchy(page, options = {}) {
+  const { maxDepth = MAX_DEPTH, includeHidden = false } = options;
+  const startTime = Date.now();
+
+  // Run DOM traversal inside browser context
+  const result = await page.evaluate(
+    ({ maxDepth, includeHidden, LANDMARK_TAGS, HEADING_TAGS, HERO_THRESHOLD, FOOTER_THRESHOLD, SIDEBAR_MAX_WIDTH }) => {
+      const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+      const pageWidth  = document.documentElement.clientWidth;
+
+      function detectRole(el) {
+        const tag      = el.tagName.toLowerCase();
+        const ariaRole = el.getAttribute('role');
+        if (ariaRole) return ariaRole;
+
+        if (LANDMARK_TAGS.includes(tag)) {
+          const isTopLevel = !el.closest('main, section, article, aside');
+          if (tag === 'header' || tag === 'footer') {
+            return isTopLevel ? `${tag}-landmark` : `${tag}-section`;
+          }
+          return tag;
+        }
+
+        if (HEADING_TAGS.includes(tag)) return `heading-${tag.slice(1)}`;
+
+        if (tag === 'div' || tag === 'span') {
+          const cls = (el.className || '').toString().toLowerCase();
+          if (cls.includes('container')) return 'container';
+          if (cls.includes('wrapper'))   return 'wrapper';
+          if (cls.includes('card'))      return 'card';
+          if (cls.includes('grid'))      return 'grid';
+          if (cls.includes('hero'))      return 'hero';
+        }
+
+        return null;
+      }
+
+      function detectSectionContext(el, yPos) {
+        const tag = el.tagName.toLowerCase();
+        if (tag === 'header' || el.closest('header')) return 'header';
+        if (tag === 'footer' || el.closest('footer')) return 'footer';
+        if (tag === 'aside'  || el.closest('aside'))  return 'sidebar';
+        if (tag === 'nav'    || el.closest('nav'))     return 'nav';
+
+        const yRatio = yPos / pageHeight;
+        if (yRatio < HERO_THRESHOLD)   return 'hero';
+        if (yRatio > FOOTER_THRESHOLD) return 'footer';
+
+        const computed = window.getComputedStyle(el);
+        const rect     = el.getBoundingClientRect();
+        if ((computed.position === 'fixed' || computed.position === 'sticky') && rect.width < SIDEBAR_MAX_WIDTH) {
+          return 'sidebar';
+        }
+
+        return 'content';
+      }
+
+      function traverseDOM(el, depth, parentId, path) {
+        if (depth > maxDepth) return null;
+        const rect = el.getBoundingClientRect();
+        if (!includeHidden && rect.width === 0 && rect.height === 0) return null;
+
+        const id       = path.join('-');
+        const computed = window.getComputedStyle(el);
+        const yPos     = rect.y + window.scrollY;
+
+        const node = {
+          id,
+          tagName:  el.tagName.toLowerCase(),
+          depth,
+          role:     detectRole(el),
+          section:  detectSectionContext(el, yPos),
+          attributes: {
+            id:        el.id || null,
+            className: el.className ? el.className.toString().split(' ').slice(0, 3).join(' ') : null,
+            role:      el.getAttribute('role')
+          },
+          dimensions: {
+            width:  Math.round(rect.width),
+            height: Math.round(rect.height),
+            x:      Math.round(rect.x),
+            y:      Math.round(yPos)
+          },
+          layout: {
+            display:             computed.display,
+            position:            computed.position !== 'static' ? computed.position : undefined,
+            flexDirection:       computed.flexDirection !== 'row' ? computed.flexDirection : undefined,
+            gridTemplateColumns: computed.gridTemplateColumns !== 'none' ? computed.gridTemplateColumns : undefined
+          },
+          children: [],
+          parentId
+        };
+
+        let childIdx = 0;
+        for (const child of el.children) {
+          const childNode = traverseDOM(child, depth + 1, id, [...path, childIdx]);
+          if (childNode) { node.children.push(childNode); childIdx++; }
+        }
+
+        return node;
+      }
+
+      const root = traverseDOM(document.body, 0, null, [0]);
+      return { root, pageHeight, pageWidth };
+    },
+    { maxDepth, includeHidden, LANDMARK_TAGS, HEADING_TAGS, HERO_THRESHOLD, FOOTER_THRESHOLD, SIDEBAR_MAX_WIDTH }
+  );
+
+  // Post-process in Node context using tree-builder helpers
+  const landmarks   = buildLandmarksMap(result.root);
+  const headingTree = buildHeadingTree(result.root);
+  const { totalNodes, maxDepth: maxActualDepth } = countTreeStats(result.root);
+
+  // Enrich headings with text + fontSize (separate evaluate for perf)
+  const headingData = await page.evaluate(({ headingTree, yTolerance }) => {
+    return headingTree.map(h => {
+      const headings = document.querySelectorAll(`h${h.level}`);
+      for (const el of headings) {
+        const rect = el.getBoundingClientRect();
+        const yPos = Math.round(rect.y + window.scrollY);
+        if (Math.abs(yPos - h.y) < yTolerance) {
+          const computed = window.getComputedStyle(el);
+          return {
+            ...h,
+            text:     el.textContent?.trim().slice(0, 60) || null,
+            fontSize: parseFloat(computed.fontSize) || null
+          };
+        }
+      }
+      return h;
+    });
+  }, { headingTree, yTolerance: Y_POSITION_TOLERANCE });
+
+  const duration = Date.now() - startTime;
+  if (duration > 500) {
+    console.error(`[WARN] DOM hierarchy extraction took ${duration}ms (>500ms target)`);
+  }
+
+  return {
+    root:        result.root,
+    landmarks,
+    headingTree: headingData,
+    stats: {
+      totalNodes,
+      maxDepth:        maxActualDepth,
+      landmarkCount:   [landmarks.header, landmarks.main, landmarks.footer].filter(Boolean).length +
+                       landmarks.nav.length + landmarks.aside.length,
+      pageHeight:      result.pageHeight,
+      pageWidth:       result.pageWidth,
+      extractionTimeMs: duration
+    }
+  };
+}

package/src/core/discovery/app-state-snapshot-capture.js

@@ -0,0 +1,195 @@
+/**
+ * Browser-side state capture for SPA app state snapshots.
+ *
+ * Runs page.evaluate calls to capture framework-specific data
+ * (__NEXT_DATA__, __NUXT__, etc.) and state management store state
+ * (Redux, Vuex, Pinia, Zustand, MobX). Used by app-state-snapshot.js.
+ */
+
+/**
+ * Capture framework-specific data from page
+ * @param {import('playwright').Page} page - Playwright page
+ * @param {string|null} framework - Detected framework name
+ * @returns {Promise<Object|null>}
+ */
+export async function captureFrameworkData(page, framework) {
+  try {
+    return await page.evaluate((fw) => {
+      switch (fw) {
+        case 'next':
+          if (!window.__NEXT_DATA__) return null;
+          return {
+            props: window.__NEXT_DATA__.props,
+            page: window.__NEXT_DATA__.page,
+            query: window.__NEXT_DATA__.query,
+            buildId: window.__NEXT_DATA__.buildId,
+            runtimeConfig: window.__NEXT_DATA__.runtimeConfig,
+            dynamicIds: window.__NEXT_DATA__.dynamicIds
+          };
+
+        case 'nuxt':
+          if (!window.__NUXT__) return null;
+          return {
+            data: window.__NUXT__.data,
+            state: window.__NUXT__.state,
+            serverRendered: window.__NUXT__.serverRendered,
+            routePath: window.__NUXT__.routePath,
+            config: window.__NUXT__.config
+          };
+
+        case 'vue': {
+          const vueApp = document.querySelector('[data-v-app]')?.__vue_app__;
+          if (vueApp?.config?.globalProperties) {
+            return {
+              routePath: window.location.pathname,
+              hasRouter: !!vueApp.config.globalProperties.$router,
+              hasStore: !!vueApp.config.globalProperties.$store ||
+                        !!vueApp.config.globalProperties.$pinia
+            };
+          }
+          return null;
+        }
+
+        case 'react': {
+          const reactRoot = document.getElementById('root') ||
+                           document.querySelector('[data-reactroot]');
+          return reactRoot ? {
+            hasReactRoot: true,
+            rootId: reactRoot.id || null
+          } : null;
+        }
+
+        case 'angular': {
+          const appRoot = document.querySelector('app-root');
+          if (appRoot && window.ng?.probe) {
+            try {
+              const component = window.ng.probe(appRoot);
+              return {
+                componentName: component?.componentInstance?.constructor?.name,
+                hasRouter: !!component?.injector?.get?.('Router', null)
+              };
+            } catch {
+              return { hasAppRoot: true };
+            }
+          }
+          return appRoot ? { hasAppRoot: true } : null;
+        }
+
+        case 'svelte':
+          if (window.__sveltekit_data__) {
+            return window.__sveltekit_data__;
+          }
+          return null;
+
+        case 'astro': {
+          const islands = document.querySelectorAll('astro-island');
+          if (islands.length > 0) {
+            return {
+              islandCount: islands.length,
+              componentNames: Array.from(islands)
+                .map(i => i.getAttribute('component-export'))
+                .filter(Boolean)
+            };
+          }
+          return null;
+        }
+
+        default:
+          return null;
+      }
+    }, framework);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Capture state management store state (Redux, Vuex, Pinia, Zustand, MobX)
+ * @param {import('playwright').Page} page - Playwright page
+ * @returns {Promise<{type: string, state: Object|null}>}
+ */
+export async function captureStoreState(page) {
+  try {
+    return await page.evaluate(() => {
+      // Redux - Method 1: Redux DevTools extension
+      if (window.__REDUX_DEVTOOLS_EXTENSION__) {
+        try {
+          const stores = window.__REDUX_DEVTOOLS_EXTENSION__.stores ||
+                        window.__REDUX_DEVTOOLS_EXTENSION__.open?.() ||
+                        null;
+          if (stores && typeof stores === 'object') {
+            const storeKeys = Object.keys(stores);
+            if (storeKeys.length > 0) {
+              const store = stores[storeKeys[0]];
+              if (store?.getState) {
+                return { type: 'redux', state: store.getState() };
+              }
+            }
+          }
+        } catch {
+          // Continue to other methods
+        }
+      }
+
+      // Redux - Method 2: Direct store on window
+      if (window.store?.getState) {
+        return { type: 'redux', state: window.store.getState() };
+      }
+
+      // Redux - Method 3: __REDUX_STATE__ hydration
+      if (window.__REDUX_STATE__) {
+        return { type: 'redux', state: window.__REDUX_STATE__ };
+      }
+
+      // Vuex - Nuxt 2 / Vue 2/3
+      if (window.$nuxt?.$store?.state) {
+        return { type: 'vuex', state: window.$nuxt.$store.state };
+      }
+      if (window.__VUEX__?.state) {
+        return { type: 'vuex', state: window.__VUEX__.state };
+      }
+
+      // Vuex via Vue app
+      const vueApp = document.querySelector('[data-v-app]')?.__vue_app__;
+      if (vueApp?.config?.globalProperties?.$store?.state) {
+        return { type: 'vuex', state: vueApp.config.globalProperties.$store.state };
+      }
+
+      // Pinia - Nuxt 3 / Vue 3
+      if (window.$nuxt?.$pinia?.state?.value) {
+        return { type: 'pinia', state: window.$nuxt.$pinia.state.value };
+      }
+      if (window.__PINIA__?.state?.value) {
+        return { type: 'pinia', state: window.__PINIA__.state.value };
+      }
+      if (vueApp?.config?.globalProperties?.$pinia?.state?.value) {
+        return { type: 'pinia', state: vueApp.config.globalProperties.$pinia.state.value };
+      }
+
+      // Zustand - check common window-exposed store names
+      const zustandPatterns = ['useStore', 'useAppStore', 'useBearStore', 'store'];
+      for (const pattern of zustandPatterns) {
+        const potentialStore = window[pattern];
+        if (potentialStore?.getState && typeof potentialStore.getState === 'function') {
+          try {
+            const state = potentialStore.getState();
+            if (state && typeof state === 'object') {
+              return { type: 'zustand', state };
+            }
+          } catch {
+            // Not a valid Zustand store
+          }
+        }
+      }
+
+      // MobX
+      if (window.__MOBX_STATE__) {
+        return { type: 'mobx', state: window.__MOBX_STATE__ };
+      }
+
+      return { type: 'none', state: null };
+    });
+  } catch {
+    return { type: 'none', state: null };
+  }
+}

package/src/core/discovery/app-state-snapshot-utils.js

@@ -0,0 +1,178 @@
+/**
+ * Serialization and filtering utilities for app state snapshots.
+ *
+ * Provides safe object serialization (handles circular refs, functions, symbols),
+ * sensitive key filtering (tokens, passwords, secrets), and state size enforcement.
+ * Used by app-state-snapshot.js (main module).
+ */
+
+import { SIZE_LIMITS } from '../../shared/config.js';
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/** Maximum state size in bytes (1MB) - sourced from centralized config */
+export const MAX_STATE_SIZE = SIZE_LIMITS.MAX_STATE;
+
+/** Maximum depth for recursive object traversal */
+export const MAX_TRAVERSAL_DEPTH = 50;
+
+/** Patterns to identify sensitive keys */
+export const SENSITIVE_PATTERNS = [
+  /token/i,
+  /password/i,
+  /passwd/i,
+  /secret/i,
+  /auth/i,
+  /api[_-]?key/i,
+  /credential/i,
+  /private/i,
+  /session/i,
+  /cookie/i,
+  /bearer/i,
+  /jwt/i,
+  /access[_-]?key/i,
+  /refresh[_-]?token/i
+];
+
+/** Marker for filtered sensitive values */
+export const FILTERED_MARKER = '[FILTERED]';
+
+/** Marker for circular references */
+export const CIRCULAR_MARKER = '[Circular]';
+
+/** Marker for unserializable values */
+export const UNSERIALIZABLE_MARKER = '[Unserializable]';
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+/**
+ * Check if a key matches sensitive patterns
+ * @param {string} key - Object key to check
+ * @returns {boolean}
+ */
+export function isSensitiveKey(key) {
+  if (typeof key !== 'string') return false;
+  return SENSITIVE_PATTERNS.some(pattern => pattern.test(key));
+}
+
+/**
+ * Filter sensitive keys from an object recursively
+ * @param {*} obj - Object to filter
+ * @param {string[]} warnings - Array to collect warnings
+ * @param {string} path - Current path for warning messages
+ * @param {number} depth - Current recursion depth
+ * @returns {*} Filtered object
+ */
+export function filterSensitive(obj, warnings = [], path = '', depth = 0) {
+  // Prevent infinite recursion
+  if (depth > MAX_TRAVERSAL_DEPTH) {
+    return '[Max Depth Exceeded]';
+  }
+
+  // Handle primitives
+  if (obj === null || obj === undefined) return obj;
+  if (typeof obj !== 'object') return obj;
+
+  // Handle arrays
+  if (Array.isArray(obj)) {
+    return obj.map((item, i) =>
+      filterSensitive(item, warnings, `${path}[${i}]`, depth + 1)
+    );
+  }
+
+  // Handle objects
+  const filtered = {};
+  for (const [key, value] of Object.entries(obj)) {
+    const fullPath = path ? `${path}.${key}` : key;
+
+    if (isSensitiveKey(key)) {
+      warnings.push(`Filtered sensitive key: ${fullPath}`);
+      filtered[key] = FILTERED_MARKER;
+      continue;
+    }
+
+    filtered[key] = filterSensitive(value, warnings, fullPath, depth + 1);
+  }
+
+  return filtered;
+}
+
+/**
+ * Safely serialize an object handling circular refs, functions, symbols
+ * @param {*} obj - Object to serialize
+ * @param {WeakSet} seen - Set of seen objects for circular detection
+ * @param {number} depth - Current recursion depth
+ * @returns {*} Serializable version of object
+ */
+export function safeSerialize(obj, seen = new WeakSet(), depth = 0) {
+  if (depth > MAX_TRAVERSAL_DEPTH) return '[Max Depth Exceeded]';
+
+  if (obj === null || obj === undefined) return obj;
+  if (typeof obj === 'boolean' || typeof obj === 'number' || typeof obj === 'string') return obj;
+
+  if (typeof obj === 'function') return '[Function]';
+  if (typeof obj === 'symbol') return obj.toString();
+  if (typeof obj === 'bigint') return obj.toString();
+  if (obj instanceof Date) return obj.toISOString();
+  if (obj instanceof RegExp) return obj.toString();
+  if (obj instanceof Error) return { message: obj.message, name: obj.name };
+  if (obj instanceof Map) return Object.fromEntries(obj);
+  if (obj instanceof Set) return Array.from(obj);
+
+  if (typeof obj === 'object') {
+    if (seen.has(obj)) return CIRCULAR_MARKER;
+    seen.add(obj);
+
+    try {
+      if (Array.isArray(obj)) {
+        return obj.map(item => safeSerialize(item, seen, depth + 1));
+      }
+
+      const result = {};
+      for (const [key, value] of Object.entries(obj)) {
+        try {
+          result[key] = safeSerialize(value, seen, depth + 1);
+        } catch {
+          result[key] = UNSERIALIZABLE_MARKER;
+        }
+      }
+      return result;
+    } catch {
+      return UNSERIALIZABLE_MARKER;
+    }
+  }
+
+  return obj;
+}
+
+/**
+ * Enforce state size limit, truncating store state if exceeded
+ * @param {import('./app-state-snapshot.js').StateSnapshot} snapshot - State snapshot to check
+ * @param {string[]} warnings - Array to collect warnings
+ * @returns {import('./app-state-snapshot.js').StateSnapshot} Possibly truncated snapshot
+ */
+export function enforceStateLimit(snapshot, warnings) {
+  const serialized = JSON.stringify(snapshot);
+  const sizeBytes = Buffer.byteLength(serialized, 'utf8');
+
+  if (sizeBytes > MAX_STATE_SIZE) {
+    const sizeMB = (sizeBytes / 1024 / 1024).toFixed(2);
+    warnings.push(`State exceeded 1MB limit (${sizeMB}MB), store state truncated`);
+
+    return {
+      ...snapshot,
+      storeState: {
+        _truncated: true,
+        _reason: `exceeded 1MB limit (${sizeMB}MB)`,
+        _originalType: snapshot.storeType
+      },
+      sizeBytes: MAX_STATE_SIZE
+    };
+  }
+
+  return { ...snapshot, sizeBytes };
+}

package/src/core/discovery/app-state-snapshot.js

@@ -0,0 +1,131 @@
+/**
+ * App State Snapshot Module
+ *
+ * Captures application state from SPAs including:
+ * - Framework data (__NEXT_DATA__, __NUXT__)
+ * - State management stores (Redux, Vuex, Pinia, Zustand)
+ *
+ * Features:
+ * - Sensitive data filtering (tokens, passwords, secrets)
+ * - Safe serialization (handles circular refs, functions, symbols)
+ * - Size limit enforcement (1MB max)
+ *
+ * @module app-state-snapshot
+ */
+
+import {
+  MAX_STATE_SIZE,
+  SENSITIVE_PATTERNS,
+  FILTERED_MARKER,
+  CIRCULAR_MARKER,
+  isSensitiveKey,
+  filterSensitive,
+  safeSerialize,
+  enforceStateLimit
+} from './app-state-snapshot-utils.js';
+
+import {
+  captureFrameworkData,
+  captureStoreState
+} from './app-state-snapshot-capture.js';
+
+// Re-export constants and utilities for backward compatibility
+export {
+  MAX_STATE_SIZE,
+  SENSITIVE_PATTERNS,
+  FILTERED_MARKER,
+  CIRCULAR_MARKER,
+  isSensitiveKey,
+  filterSensitive,
+  safeSerialize,
+  enforceStateLimit,
+  captureFrameworkData,
+  captureStoreState
+};
+
+// ============================================================================
+// Type Definitions (JSDoc)
+// ============================================================================
+
+/**
+ * @typedef {Object} StateSnapshot
+ * @property {Object|null} frameworkData - __NEXT_DATA__, __NUXT__, etc.
+ * @property {Object|null} storeState - Redux/Vuex/Pinia/Zustand state
+ * @property {string|null} framework - Detected framework name
+ * @property {string} storeType - 'redux'|'vuex'|'pinia'|'zustand'|'none'
+ * @property {string[]} warnings - Serialization/filtering warnings
+ * @property {number} capturedAt - Unix timestamp
+ * @property {number} sizeBytes - Serialized size in bytes
+ */
+
+// ============================================================================
+// Main Export
+// ============================================================================
+
+/**
+ * Capture application state from page
+ * @param {import('playwright').Page} page - Playwright page instance
+ * @param {Object|null} [frameworkInfo] - Framework detection result
+ * @returns {Promise<StateSnapshot>}
+ */
+export async function captureAppState(page, frameworkInfo = null) {
+  const warnings = [];
+  const framework = frameworkInfo?.framework || null;
+
+  let snapshot = {
+    frameworkData: null,
+    storeState: null,
+    framework,
+    storeType: 'none',
+    warnings,
+    capturedAt: Date.now(),
+    sizeBytes: 0
+  };
+
+  try {
+    const rawFrameworkData = await captureFrameworkData(page, framework);
+    if (rawFrameworkData) {
+      const serialized = safeSerialize(rawFrameworkData);
+      snapshot.frameworkData = filterSensitive(serialized, warnings);
+    }
+
+    const storeResult = await captureStoreState(page);
+    if (storeResult.state) {
+      const serialized = safeSerialize(storeResult.state);
+      snapshot.storeState = filterSensitive(serialized, warnings);
+      snapshot.storeType = storeResult.type;
+    }
+
+    snapshot = enforceStateLimit(snapshot, warnings);
+  } catch (error) {
+    warnings.push(`State capture error: ${error.message}`);
+  }
+
+  return snapshot;
+}
+
+/**
+ * Format state snapshot for logging
+ * @param {StateSnapshot} snapshot - Captured state
+ * @returns {string}
+ */
+export function formatStateSnapshot(snapshot) {
+  const lines = [
+    '\n=== App State Snapshot ===',
+    `Framework: ${snapshot.framework || 'unknown'}`,
+    `Store Type: ${snapshot.storeType}`,
+    `Framework Data: ${snapshot.frameworkData ? 'captured' : 'none'}`,
+    `Store State: ${snapshot.storeState ? 'captured' : 'none'}`,
+    `Size: ${(snapshot.sizeBytes / 1024).toFixed(2)} KB`
+  ];
+
+  if (snapshot.warnings.length > 0) {
+    lines.push(`Warnings (${snapshot.warnings.length}):`);
+    snapshot.warnings.slice(0, 5).forEach(w => lines.push(`  - ${w}`));
+    if (snapshot.warnings.length > 5) {
+      lines.push(`  ... and ${snapshot.warnings.length - 5} more`);
+    }
+  }
+
+  return lines.join('\n');
+}