opengstack 0.13.7 → 0.13.8

package/skills/browse/test/findport.test.ts

@@ -0,0 +1,191 @@
+import { describe, test, expect } from 'bun:test';
+import * as net from 'net';
+import * as path from 'path';
+
+const polyfillPath = path.resolve(import.meta.dir, '../src/bun-polyfill.cjs');
+
+// Helper: bind a port and hold it open, returning a cleanup function
+function occupyPort(port: number): Promise<() => Promise<void>> {
+  return new Promise((resolve, reject) => {
+    const srv = net.createServer();
+    srv.once('error', reject);
+    srv.listen(port, '127.0.0.1', () => {
+      resolve(() => new Promise<void>((r) => srv.close(() => r())));
+    });
+  });
+}
+
+// Helper: find a known-free port by binding to 0
+function getFreePort(): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const srv = net.createServer();
+    srv.once('error', reject);
+    srv.listen(0, '127.0.0.1', () => {
+      const port = (srv.address() as net.AddressInfo).port;
+      srv.close(() => resolve(port));
+    });
+  });
+}
+
+describe('findPort / isPortAvailable', () => {
+
+  test('isPortAvailable returns true for a free port', async () => {
+    // Use the same isPortAvailable logic from server.ts
+    const port = await getFreePort();
+
+    const available = await new Promise<boolean>((resolve) => {
+      const srv = net.createServer();
+      srv.once('error', () => resolve(false));
+      srv.listen(port, '127.0.0.1', () => {
+        srv.close(() => resolve(true));
+      });
+    });
+
+    expect(available).toBe(true);
+  });
+
+  test('isPortAvailable returns false for an occupied port', async () => {
+    const port = await getFreePort();
+    const release = await occupyPort(port);
+
+    try {
+      const available = await new Promise<boolean>((resolve) => {
+        const srv = net.createServer();
+        srv.once('error', () => resolve(false));
+        srv.listen(port, '127.0.0.1', () => {
+          srv.close(() => resolve(true));
+        });
+      });
+
+      expect(available).toBe(false);
+    } finally {
+      await release();
+    }
+  });
+
+  test('port is actually free after isPortAvailable returns true', async () => {
+    // This is the core race condition test: after isPortAvailable says
+    // a port is free, can we IMMEDIATELY bind to it?
+    const port = await getFreePort();
+
+    // Simulate isPortAvailable
+    const isFree = await new Promise<boolean>((resolve) => {
+      const srv = net.createServer();
+      srv.once('error', () => resolve(false));
+      srv.listen(port, '127.0.0.1', () => {
+        srv.close(() => resolve(true));
+      });
+    });
+
+    expect(isFree).toBe(true);
+
+    // Now immediately try to bind — this would fail with the old
+    // Bun.serve() polyfill approach because the test server's
+    // listen() would still be pending
+    const canBind = await new Promise<boolean>((resolve) => {
+      const srv = net.createServer();
+      srv.once('error', () => resolve(false));
+      srv.listen(port, '127.0.0.1', () => {
+        srv.close(() => resolve(true));
+      });
+    });
+
+    expect(canBind).toBe(true);
+  });
+
+  test('polyfill Bun.serve stop() is fire-and-forget (async)', async () => {
+    // Verify that the polyfill's stop() does NOT wait for the socket
+    // to actually close — this is the root cause of the race condition.
+    // On macOS/Linux the OS reclaims the port fast enough that the race
+    // rarely manifests, but on Windows TIME_WAIT makes it 100% repro.
+    const result = Bun.spawnSync(['node', '-e', `
+      require('${polyfillPath}');
+      const net = require('net');
+
+      async function test() {
+        const port = 10000 + Math.floor(Math.random() * 50000);
+
+        const testServer = Bun.serve({
+          port,
+          hostname: '127.0.0.1',
+          fetch: () => new Response('ok'),
+        });
+
+        // stop() returns undefined — it does NOT return a Promise,
+        // so callers cannot await socket teardown
+        const retval = testServer.stop();
+        console.log(typeof retval === 'undefined' ? 'FIRE_AND_FORGET' : 'AWAITABLE');
+      }
+
+      test();
+    `], { stdout: 'pipe', stderr: 'pipe' });
+
+    const output = result.stdout.toString().trim();
+    // Confirms the polyfill's stop() is fire-and-forget — callers
+    // cannot wait for the port to be released, hence the race
+    expect(output).toBe('FIRE_AND_FORGET');
+  });
+
+  test('net.createServer approach does not have the race condition', async () => {
+    // Prove the fix: net.createServer with proper async bind/close
+    // releases the port cleanly
+    const result = Bun.spawnSync(['node', '-e', `
+      const net = require('net');
+
+      async function testFix() {
+        const port = 10000 + Math.floor(Math.random() * 50000);
+
+        // Simulate the NEW isPortAvailable: proper async bind/close
+        const isFree = await new Promise((resolve) => {
+          const srv = net.createServer();
+          srv.once('error', () => resolve(false));
+          srv.listen(port, '127.0.0.1', () => {
+            srv.close(() => resolve(true));
+          });
+        });
+
+        if (!isFree) {
+          console.log('PORT_BUSY');
+          return;
+        }
+
+        // Immediately try to bind — should succeed because close()
+        // completed before the Promise resolved
+        const canBind = await new Promise((resolve) => {
+          const srv = net.createServer();
+          srv.once('error', () => resolve(false));
+          srv.listen(port, '127.0.0.1', () => {
+            srv.close(() => resolve(true));
+          });
+        });
+
+        console.log(canBind ? 'FIX_WORKS' : 'FIX_BROKEN');
+      }
+
+      testFix();
+    `], { stdout: 'pipe', stderr: 'pipe' });
+
+    const output = result.stdout.toString().trim();
+    expect(output).toBe('FIX_WORKS');
+  });
+
+  test('isPortAvailable handles rapid sequential checks', async () => {
+    // Stress test: check the same port multiple times in sequence
+    const port = await getFreePort();
+    const results: boolean[] = [];
+
+    for (let i = 0; i < 5; i++) {
+      const available = await new Promise<boolean>((resolve) => {
+        const srv = net.createServer();
+        srv.once('error', () => resolve(false));
+        srv.listen(port, '127.0.0.1', () => {
+          srv.close(() => resolve(true));
+        });
+      });
+      results.push(available);
+    }
+
+    // All 5 checks should succeed — no leaked sockets
+    expect(results).toEqual([true, true, true, true, true]);
+  });
+});

package/skills/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/skills/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/skills/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/skills/browse/test/fixtures/empty.html

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

package/skills/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/skills/browse/test/fixtures/iframe.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Page - Iframe</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; }
+    iframe { border: 1px solid #ccc; width: 400px; height: 200px; }
+  </style>
+</head>
+<body>
+  <h1 id="main-title">Main Page</h1>
+  <iframe id="test-frame" name="testframe" srcdoc='
+    <!DOCTYPE html>
+    <html>
+    <body>
+      <h1 id="frame-title">Inside Frame</h1>
+      <button id="frame-btn">Frame Button</button>
+      <input id="frame-input" type="text" placeholder="Type here">
+      <div id="frame-result"></div>
+      <script>
+        document.getElementById("frame-btn").addEventListener("click", () => {
+          document.getElementById("frame-result").textContent = "Frame button clicked";
+        });
+      </script>
+    </body>
+    </html>
+  '></iframe>
+</body>
+</html>

package/skills/browse/test/fixtures/network-idle.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Test Page - Network Idle</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; }
+    #result { margin-top: 10px; color: green; }
+  </style>
+</head>
+<body>
+  <button id="fetch-btn">Load Data</button>
+  <div id="result"></div>
+  <button id="static-btn">Static Action</button>
+  <div id="static-result"></div>
+  <script>
+    document.getElementById('fetch-btn').addEventListener('click', async () => {
+      // Simulate an XHR that takes 200ms
+      const res = await fetch('/echo');
+      const data = await res.json();
+      document.getElementById('result').textContent = 'Data loaded: ' + Object.keys(data).length + ' headers';
+    });
+
+    document.getElementById('static-btn').addEventListener('click', () => {
+      // No network activity — purely client-side
+      document.getElementById('static-result').textContent = 'Static action done';
+    });
+  </script>
+</body>
+</html>

package/skills/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/skills/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/skills/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>