@runchr/gstack-antigravity 0.1.1 → 0.1.3

package/.agents/skills/gstack/browse/test/cookie-picker-routes.test.ts

@@ -0,0 +1,205 @@
+/**
+ * Tests for cookie-picker route handler
+ *
+ * Tests the HTTP glue layer directly with mock BrowserManager objects.
+ * Verifies that all routes return valid JSON (not HTML) with correct CORS headers.
+ */
+
+import { describe, test, expect } from 'bun:test';
+import { handleCookiePickerRoute } from '../src/cookie-picker-routes';
+
+// ─── Mock BrowserManager ──────────────────────────────────────
+
+function mockBrowserManager() {
+  const addedCookies: any[] = [];
+  const clearedDomains: string[] = [];
+  return {
+    bm: {
+      getPage: () => ({
+        context: () => ({
+          addCookies: (cookies: any[]) => { addedCookies.push(...cookies); },
+          clearCookies: (opts: { domain: string }) => { clearedDomains.push(opts.domain); },
+        }),
+      }),
+    } as any,
+    addedCookies,
+    clearedDomains,
+  };
+}
+
+function makeUrl(path: string, port = 9470): URL {
+  return new URL(`http://127.0.0.1:${port}${path}`);
+}
+
+function makeReq(method: string, body?: any): Request {
+  const opts: RequestInit = { method };
+  if (body) {
+    opts.body = JSON.stringify(body);
+    opts.headers = { 'Content-Type': 'application/json' };
+  }
+  return new Request('http://127.0.0.1:9470', opts);
+}
+
+// ─── Tests ──────────────────────────────────────────────────────
+
+describe('cookie-picker-routes', () => {
+  describe('CORS', () => {
+    test('OPTIONS returns 204 with correct CORS headers', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/browsers');
+      const req = new Request('http://127.0.0.1:9470', { method: 'OPTIONS' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(204);
+      expect(res.headers.get('Access-Control-Allow-Origin')).toBe('http://127.0.0.1:9470');
+      expect(res.headers.get('Access-Control-Allow-Methods')).toContain('POST');
+    });
+
+    test('JSON responses include correct CORS origin with port', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/browsers', 9450);
+      const req = new Request('http://127.0.0.1:9450', { method: 'GET' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.headers.get('Access-Control-Allow-Origin')).toBe('http://127.0.0.1:9450');
+    });
+  });
+
+  describe('JSON responses (not HTML)', () => {
+    test('GET /cookie-picker/browsers returns JSON', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/browsers');
+      const req = new Request('http://127.0.0.1:9470', { method: 'GET' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(200);
+      expect(res.headers.get('Content-Type')).toBe('application/json');
+      const body = await res.json();
+      expect(body).toHaveProperty('browsers');
+      expect(Array.isArray(body.browsers)).toBe(true);
+    });
+
+    test('GET /cookie-picker/domains without browser param returns JSON error', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/domains');
+      const req = new Request('http://127.0.0.1:9470', { method: 'GET' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(400);
+      expect(res.headers.get('Content-Type')).toBe('application/json');
+      const body = await res.json();
+      expect(body).toHaveProperty('error');
+      expect(body).toHaveProperty('code', 'missing_param');
+    });
+
+    test('POST /cookie-picker/import with invalid JSON returns JSON error', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/import');
+      const req = new Request('http://127.0.0.1:9470', {
+        method: 'POST',
+        body: 'not json',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(400);
+      expect(res.headers.get('Content-Type')).toBe('application/json');
+      const body = await res.json();
+      expect(body.code).toBe('bad_request');
+    });
+
+    test('POST /cookie-picker/import missing browser field returns JSON error', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/import');
+      const req = makeReq('POST', { domains: ['.example.com'] });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(400);
+      const body = await res.json();
+      expect(body.code).toBe('missing_param');
+    });
+
+    test('POST /cookie-picker/import missing domains returns JSON error', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/import');
+      const req = makeReq('POST', { browser: 'Chrome' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(400);
+      const body = await res.json();
+      expect(body.code).toBe('missing_param');
+    });
+
+    test('POST /cookie-picker/remove with invalid JSON returns JSON error', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/remove');
+      const req = new Request('http://127.0.0.1:9470', {
+        method: 'POST',
+        body: '{bad',
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(400);
+      expect(res.headers.get('Content-Type')).toBe('application/json');
+    });
+
+    test('POST /cookie-picker/remove missing domains returns JSON error', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/remove');
+      const req = makeReq('POST', {});
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(400);
+      const body = await res.json();
+      expect(body.code).toBe('missing_param');
+    });
+
+    test('GET /cookie-picker/imported returns JSON with domain list', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/imported');
+      const req = new Request('http://127.0.0.1:9470', { method: 'GET' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(200);
+      expect(res.headers.get('Content-Type')).toBe('application/json');
+      const body = await res.json();
+      expect(body).toHaveProperty('domains');
+      expect(body).toHaveProperty('totalDomains');
+      expect(body).toHaveProperty('totalCookies');
+    });
+  });
+
+  describe('routing', () => {
+    test('GET /cookie-picker returns HTML', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker');
+      const req = new Request('http://127.0.0.1:9470', { method: 'GET' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(200);
+      expect(res.headers.get('Content-Type')).toContain('text/html');
+    });
+
+    test('unknown path returns 404', async () => {
+      const { bm } = mockBrowserManager();
+      const url = makeUrl('/cookie-picker/nonexistent');
+      const req = new Request('http://127.0.0.1:9470', { method: 'GET' });
+
+      const res = await handleCookiePickerRoute(url, req, bm);
+
+      expect(res.status).toBe(404);
+    });
+  });
+});

package/.agents/skills/gstack/browse/test/find-browse.test.ts

@@ -0,0 +1,50 @@
+/**
+ * Tests for find-browse binary locator.
+ */
+
+import { describe, test, expect } from 'bun:test';
+import { locateBinary } from '../src/find-browse';
+import { existsSync } from 'fs';
+
+describe('locateBinary', () => {
+  test('returns null when no binary exists at known paths', () => {
+    // This test depends on the test environment — if a real binary exists at
+    // ~/.claude/skills/gstack/browse/dist/browse, it will find it.
+    // We mainly test that the function doesn't throw.
+    const result = locateBinary();
+    expect(result === null || typeof result === 'string').toBe(true);
+  });
+
+  test('returns string path when binary exists', () => {
+    const result = locateBinary();
+    if (result !== null) {
+      expect(existsSync(result)).toBe(true);
+    }
+  });
+
+  test('priority chain checks .codex, .agents, .claude markers', () => {
+    // Verify the source code implements the correct priority order.
+    // We read the function source to confirm the markers array order.
+    const src = require('fs').readFileSync(require('path').join(__dirname, '../src/find-browse.ts'), 'utf-8');
+    // The markers array should list .codex first, then .agents, then .claude
+    const markersMatch = src.match(/const markers = \[([^\]]+)\]/);
+    expect(markersMatch).not.toBeNull();
+    const markers = markersMatch![1];
+    const codexIdx = markers.indexOf('.codex');
+    const agentsIdx = markers.indexOf('.agents');
+    const claudeIdx = markers.indexOf('.claude');
+    // All three must be present
+    expect(codexIdx).toBeGreaterThanOrEqual(0);
+    expect(agentsIdx).toBeGreaterThanOrEqual(0);
+    expect(claudeIdx).toBeGreaterThanOrEqual(0);
+    // .codex before .agents before .claude
+    expect(codexIdx).toBeLessThan(agentsIdx);
+    expect(agentsIdx).toBeLessThan(claudeIdx);
+  });
+
+  test('function signature accepts no arguments', () => {
+    // locateBinary should be callable with no arguments
+    expect(typeof locateBinary).toBe('function');
+    expect(locateBinary.length).toBe(0);
+  });
+});

package/.agents/skills/gstack/browse/test/fixtures/basic.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Page - Basic</title>
+  <style>
+    body { font-family: "Helvetica Neue", sans-serif; color: #333; margin: 20px; }
+    h1 { color: navy; font-size: 24px; }
+    .highlight { background: yellow; padding: 4px; }
+    .hidden { display: none; }
+    nav a { margin-right: 10px; color: blue; }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="/page1">Page 1</a>
+    <a href="/page2">Page 2</a>
+    <a href="https://external.com/link">External</a>
+  </nav>
+  <h1 id="title">Hello World</h1>
+  <p class="highlight">This is a highlighted paragraph.</p>
+  <p class="hidden">This should be hidden.</p>
+  <div id="content" data-testid="main-content" data-version="1.0">
+    <p>Some body text here.</p>
+    <ul>
+      <li>Item one</li>
+      <li>Item two</li>
+      <li>Item three</li>
+    </ul>
+  </div>
+  <footer>Footer text</footer>
+</body>
+</html>

package/.agents/skills/gstack/browse/test/fixtures/cursor-interactive.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Page - Cursor Interactive</title>
+  <style>
+    .clickable-div { cursor: pointer; padding: 10px; border: 1px solid #ccc; }
+    .hover-card { cursor: pointer; padding: 20px; background: #f0f0f0; }
+  </style>
+</head>
+<body>
+  <h1>Cursor Interactive Test</h1>
+  <!-- These are NOT standard interactive elements but have cursor:pointer -->
+  <div class="clickable-div" id="click-div" onclick="this.textContent = 'clicked!'">Click me (div)</div>
+  <span class="hover-card" id="hover-span">Hover card (span)</span>
+  <div tabindex="0" id="focusable-div">Focusable div</div>
+  <div onclick="alert('hi')" id="onclick-div">Onclick div</div>
+  <!-- Standard interactive element (should NOT appear in -C output) -->
+  <button id="normal-btn">Normal Button</button>
+  <a href="/test">Normal Link</a>
+</body>
+</html>

package/.agents/skills/gstack/browse/test/fixtures/dialog.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Page - Dialog</title>
+</head>
+<body>
+  <h1>Dialog Test</h1>
+  <button id="alert-btn" onclick="alert('Hello from alert')">Alert</button>
+  <button id="confirm-btn" onclick="document.getElementById('confirm-result').textContent = confirm('Are you sure?') ? 'confirmed' : 'cancelled'">Confirm</button>
+  <button id="prompt-btn" onclick="document.getElementById('prompt-result').textContent = prompt('Enter name:', 'default') || 'null'">Prompt</button>
+  <p id="confirm-result"></p>
+  <p id="prompt-result"></p>
+</body>
+</html>

package/.agents/skills/gstack/browse/test/fixtures/empty.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<html><body></body></html>

package/.agents/skills/gstack/browse/test/fixtures/forms.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Page - Forms</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; }
+    form { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; }
+    label { display: block; margin: 5px 0; }
+    input, select, textarea { margin-bottom: 10px; padding: 5px; }
+    #result { color: green; display: none; }
+  </style>
+</head>
+<body>
+  <h1>Form Test Page</h1>
+
+  <form id="login-form" action="/login" method="post">
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" placeholder="your@email.com" required>
+    <label for="password">Password:</label>
+    <input type="password" id="password" name="password" required>
+    <button type="submit" id="login-btn">Log In</button>
+  </form>
+
+  <form id="profile-form" action="/profile" method="post">
+    <label for="name">Name:</label>
+    <input type="text" id="name" name="name" placeholder="Your name">
+    <label for="bio">Bio:</label>
+    <textarea id="bio" name="bio" placeholder="Tell us about yourself"></textarea>
+    <label for="role">Role:</label>
+    <select id="role" name="role">
+      <option value="">Choose...</option>
+      <option value="admin">Admin</option>
+      <option value="user">User</option>
+      <option value="guest">Guest</option>
+    </select>
+    <label>
+      <input type="checkbox" id="newsletter" name="newsletter"> Subscribe to newsletter
+    </label>
+    <button type="submit" id="profile-btn">Save Profile</button>
+  </form>
+
+  <div id="result">Form submitted!</div>
+
+  <script>
+    document.querySelectorAll('form').forEach(form => {
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        document.getElementById('result').style.display = 'block';
+        console.log('[Form] Submitted:', form.id);
+      });
+    });
+  </script>
+</body>
+</html>

package/.agents/skills/gstack/browse/test/fixtures/qa-eval-checkout.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>QA Eval — Checkout</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; }
+    .checkout-form { max-width: 500px; }
+    .form-group { margin-bottom: 15px; }
+    .form-group label { display: block; margin-bottom: 4px; font-weight: bold; }
+    .form-group input { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
+    .form-group input.invalid { border-color: red; }
+    .form-group .error-msg { color: red; font-size: 12px; display: none; }
+    .total { font-size: 24px; font-weight: bold; margin: 20px 0; }
+    button[type="submit"] { padding: 12px 24px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
+    .order-summary { background: #f5f5f5; padding: 15px; border-radius: 4px; margin-bottom: 20px; }
+  </style>
+</head>
+<body>
+  <h1>Checkout</h1>
+
+  <div class="order-summary">
+    <h2>Order Summary</h2>
+    <p>Widget Pro — $99.99 x <input type="number" id="quantity" value="1" min="1" style="width: 50px;"></p>
+    <p class="total" id="total">Total: $99.99</p>  <!-- BUG 2: shows $NaN when quantity is cleared -->
+  </div>
+
+  <form class="checkout-form" id="checkout-form">
+    <h2>Shipping Information</h2>
+
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input type="text" id="email" name="email" placeholder="you@example.com" required
+             pattern="[^@]+@[^@]">  <!-- BUG 1: broken regex — accepts "user@" as valid -->
+      <span class="error-msg" id="email-error">Please enter a valid email</span>
+    </div>
+
+    <div class="form-group">
+      <label for="address">Address</label>
+      <input type="text" id="address" name="address" placeholder="123 Main St" required>
+    </div>
+
+    <div class="form-group">
+      <label for="city">City</label>
+      <input type="text" id="city" name="city" placeholder="San Francisco" required>
+    </div>
+
+    <div class="form-group">
+      <label for="zip">Zip Code</label>
+      <input type="text" id="zip" name="zip" placeholder="94105">  <!-- BUG 4: missing required attribute -->
+    </div>
+
+    <h2>Payment</h2>
+
+    <div class="form-group">
+      <label for="cc">Credit Card Number</label>
+      <input type="text" id="cc" name="cc" placeholder="4111 1111 1111 1111" required>
+      <!-- BUG 3: no maxlength — overflows container at >20 chars -->
+    </div>
+
+    <div class="form-group">
+      <label for="exp">Expiration</label>
+      <input type="text" id="exp" name="exp" placeholder="MM/YY" required maxlength="5">
+    </div>
+
+    <div class="form-group">
+      <label for="cvv">CVV</label>
+      <input type="text" id="cvv" name="cvv" placeholder="123" required maxlength="4">
+    </div>
+
+    <button type="submit">Place Order — $<span id="submit-total">99.99</span></button>
+  </form>
+
+  <script>
+    // Update total when quantity changes
+    const quantityInput = document.getElementById('quantity');
+    const totalEl = document.getElementById('total');
+    const submitTotalEl = document.getElementById('submit-total');
+
+    quantityInput.addEventListener('input', () => {
+      // BUG 2: parseInt on empty string returns NaN, no fallback
+      const qty = parseInt(quantityInput.value);
+      const total = (qty * 99.99).toFixed(2);
+      totalEl.textContent = 'Total: $' + total;
+      submitTotalEl.textContent = total;
+    });
+
+    // Email validation (broken)
+    const emailInput = document.getElementById('email');
+    emailInput.addEventListener('blur', () => {
+      // BUG 1: this regex accepts "user@" — missing domain part check
+      const valid = /[^@]+@/.test(emailInput.value);
+      emailInput.classList.toggle('invalid', !valid && emailInput.value.length > 0);
+      document.getElementById('email-error').style.display = (!valid && emailInput.value.length > 0) ? 'block' : 'none';
+    });
+
+    // Form submit
+    document.getElementById('checkout-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      // BUG 5: stripe is not defined — console error on submit
+      stripe.createPaymentMethod({
+        type: 'card',
+        card: { number: document.getElementById('cc').value }
+      });
+    });
+  </script>
+</body>
+</html>

package/.agents/skills/gstack/browse/test/fixtures/qa-eval-spa.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>QA Eval — SPA Store</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; margin: 0; }
+    nav { background: #333; padding: 10px 20px; }
+    nav a { color: white; margin-right: 15px; text-decoration: none; cursor: pointer; }
+    nav a:hover { text-decoration: underline; }
+    #app { padding: 20px; }
+    .product { border: 1px solid #ddd; padding: 10px; margin: 10px 0; border-radius: 4px; }
+    .product button { padding: 6px 12px; background: #0066cc; color: white; border: none; cursor: pointer; }
+    .cart-count { background: #cc0000; color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
+    .error { color: red; padding: 10px; }
+    .loading { color: #666; padding: 10px; }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="#/home">Home</a>
+    <a href="#/prodcts">Products</a>  <!-- BUG 1: broken route — typo "prodcts" instead of "products" -->
+    <a href="#/contact">Contact</a>
+    <span class="cart-count" id="cart-count">0</span>
+  </nav>
+
+  <div id="app">
+    <p>Welcome to SPA Store. Use the navigation above.</p>
+  </div>
+
+  <script>
+    let cartCount = 0;
+
+    // BUG 2: cart count never resets on route change — stale state
+    function addToCart() {
+      cartCount++;
+      document.getElementById('cart-count').textContent = cartCount;
+    }
+
+    function renderHome() {
+      document.getElementById('app').innerHTML = `
+        <h1>Welcome to SPA Store</h1>
+        <p>Browse our products using the navigation above.</p>
+      `;
+    }
+
+    function renderProducts() {
+      document.getElementById('app').innerHTML = '<p class="loading">Loading products...</p>';
+
+      // BUG 3: async race — shows data briefly, then shows error
+      setTimeout(() => {
+        document.getElementById('app').innerHTML = `
+          <h1>Products</h1>
+          <div class="product">
+            <h3>Widget A</h3>
+            <p>$29.99</p>
+            <button onclick="addToCart()">Add to Cart</button>
+          </div>
+          <div class="product">
+            <h3>Widget B</h3>
+            <p>$49.99</p>
+            <button onclick="addToCart()">Add to Cart</button>
+          </div>
+        `;
+      }, 300);
+
+      setTimeout(() => {
+        document.getElementById('app').innerHTML = '<p class="error">Error: Failed to fetch products from API</p>';
+      }, 1000);
+    }
+
+    function renderContact() {
+      document.getElementById('app').innerHTML = `
+        <h1>Contact Us</h1>
+        <p>Email: support@spastore.example.com</p>
+      `;
+    }
+
+    // BUG 4: nav links have no aria-current attribute on active route
+    function router() {
+      const hash = window.location.hash || '#/home';
+      switch (hash) {
+        case '#/home': renderHome(); break;
+        case '#/products': renderProducts(); break;
+        case '#/contact': renderContact(); break;
+        default:
+          document.getElementById('app').innerHTML = '<p>Page not found</p>';
+      }
+
+      // BUG 5: console.warn on every route change — simulates listener leak
+      console.warn('Possible memory leak detected: 11 event listeners added to window');
+    }
+
+    window.addEventListener('hashchange', router);
+    router();
+  </script>
+</body>
+</html>

package/.agents/skills/gstack/browse/test/fixtures/qa-eval.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>QA Eval — Widget Dashboard</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; }
+    nav { margin-bottom: 20px; }
+    nav a { margin-right: 15px; color: #0066cc; }
+    form { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 4px; }
+    input { display: block; margin: 8px 0; padding: 6px; }
+    button { padding: 8px 16px; margin-top: 8px; }
+    .stats { margin: 20px 0; }
+    img { display: block; margin: 20px 0; }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="/">Home</a>
+    <a href="/about">About</a>
+    <a href="/nonexistent-404-page">Resources</a>  <!-- BUG 1: broken link (404) -->
+  </nav>
+
+  <h1>Widget Dashboard</h1>
+
+  <form id="contact">
+    <h2>Contact Us</h2>
+    <input type="text" name="name" placeholder="Name" required>
+    <input type="email" name="email" placeholder="Email" required>
+    <button type="submit" disabled>Submit</button>  <!-- BUG 2: submit button permanently disabled -->
+  </form>
+
+  <div class="stats" style="width: 400px; overflow: hidden;">
+    <h2>Statistics</h2>
+    <p style="white-space: nowrap; width: 600px;">
+      Revenue: $1,234,567.89 | Users: 45,678 | Conversion: 3.2% | Growth: +12.5% MoM | Retention: 87.3%
+    </p>  <!-- BUG 3: content overflow/clipping — text wider than container with overflow:hidden -->
+  </div>
+
+  <img src="/logo.png">  <!-- BUG 4: missing alt text on image -->
+
+  <footer>
+    <p>&copy; 2026 Widget Co. All rights reserved.</p>
+  </footer>
+
+  <script>
+    console.error("TypeError: Cannot read properties of undefined (reading 'map')");
+    // BUG 5: console error on page load
+  </script>
+</body>
+</html>