@amg555/frameforge-mcp 2.7.6 → 2.7.8

package/.agent/skills/gstack-browse/test/fill-change-event.test.ts

@@ -1,78 +0,0 @@
-/**
- * Regression test for `browse fill` on change-only validators.
- *
- * Playwright's Locator.fill() dispatches an `input` event but not `change`.
- * Frameworks that validate on `change` (AngularJS ng-change, debounced
- * strength/match checks — e.g. cPanel's Jupiter theme "Add FTP Account"
- * password-match check) never see the update: the DOM value is correct but
- * the framework's own validator still reports a mismatch.
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-import * as os from 'os';
-import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
-import { startTestServer } from './test-server';
-import { BrowserManager } from '../src/browser-manager';
-import { handleWriteCommand as _handleWriteCommand } from '../src/write-commands';
-
-// Per-FILE Chromium profile: this file launches an in-process persistent
-// context (BrowserManager.launch()), and sharing a profile dir with the
-// long-lived browse daemon a sibling file may have spawned kills one side's
-// Chromium (ProcessSingleton on user-data-dir). Scoped via hooks, never
-// module scope (see test/gstack-home-module-scope.test.ts's rationale).
-const ORIGINAL_CHROMIUM_PROFILE = process.env.CHROMIUM_PROFILE;
-let CHROMIUM_PROFILE_DIR: string | undefined;
-beforeAll(() => {
-  CHROMIUM_PROFILE_DIR = fs.mkdtempSync(path.join(os.tmpdir(), 'gstack-test-profile-'));
-  process.env.CHROMIUM_PROFILE = CHROMIUM_PROFILE_DIR;
-});
-afterAll(() => {
-  if (ORIGINAL_CHROMIUM_PROFILE === undefined) delete process.env.CHROMIUM_PROFILE;
-  else process.env.CHROMIUM_PROFILE = ORIGINAL_CHROMIUM_PROFILE;
-  if (CHROMIUM_PROFILE_DIR) { try { fs.rmSync(CHROMIUM_PROFILE_DIR, { recursive: true, force: true }); } catch {} }
-});
-
-
-const handleWriteCommand = (cmd: string, args: string[], b: BrowserManager) =>
-  _handleWriteCommand(cmd, args, b.getActiveSession(), b);
-
-let testServer: ReturnType<typeof startTestServer>;
-let bm: BrowserManager;
-let baseUrl: string;
-
-beforeAll(async () => {
-  testServer = startTestServer(0);
-  baseUrl = testServer.url;
-  bm = new BrowserManager();
-  await bm.launch();
-});
-
-afterAll(async () => {
-  try { testServer.server.stop(); } catch {}
-  // Close only this file's own browser — never process.exit(): bun test runs
-  // all files in one process, so a delayed exit kills the whole suite
-  // (see test/no-suicide-exit.test.ts). close() can hang when the browser
-  // already died, so race it at 3s and abandon; the child is reaped at exit.
-  try { await Promise.race([bm?.close(), new Promise((resolve) => setTimeout(resolve, 3000))]); } catch {}
-});
-
-describe('fill dispatches change event', () => {
-  test('a change-only validator sees the filled value', async () => {
-    await handleWriteCommand('goto', [baseUrl + '/change-only-validator.html'], bm);
-    await handleWriteCommand('fill', ['#password', 'hello123'], bm);
-    await handleWriteCommand('fill', ['#password2', 'hello123'], bm);
-
-    const status = await bm.getPage().locator('#match-status').textContent();
-    expect(status).toBe('match');
-  });
-
-  test('a change-only validator still catches a real mismatch', async () => {
-    await handleWriteCommand('goto', [baseUrl + '/change-only-validator.html'], bm);
-    await handleWriteCommand('fill', ['#password', 'hello123'], bm);
-    await handleWriteCommand('fill', ['#password2', 'different'], bm);
-
-    const status = await bm.getPage().locator('#match-status').textContent();
-    expect(status).toBe('no-match');
-  });
-});

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

@@ -1,61 +0,0 @@
-/**
- * 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);
-  });
-
-  test('source-checkout fallback resolves <git-root>/browse/dist/browse[.exe]', () => {
-    // The windows-setup-e2e.yml workflow builds binaries directly under
-    // browse/dist/ (no .claude/skills/gstack/ install layout). find-browse
-    // must resolve those — otherwise every fresh build that hasn't run
-    // ./setup yet looks broken. Static pin so a future refactor that
-    // drops the source-checkout branch trips this test.
-    const src = require('fs').readFileSync(require('path').join(__dirname, '../src/find-browse.ts'), 'utf-8');
-    expect(src).toContain('Source-checkout fallback');
-    expect(src).toContain("join(root, 'browse', 'dist', 'browse')");
-  });
-});

package/.agent/skills/gstack-browse/test/findport.test.ts

@@ -1,232 +0,0 @@
-import { describe, test, expect } from 'bun:test';
-import * as net from 'net';
-import * as path from 'path';
-import { __testInternals__ } from '../src/server';
-
-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('explicit BROWSE_PORT diagnostic distinguishes bind denial from occupied port', () => {
-    const blocked = __testInternals__.formatExplicitPortUnavailableError(34567, {
-      available: false,
-      code: 'EPERM',
-      message: 'operation not permitted',
-    }).message;
-
-    expect(blocked).toContain('Cannot bind BROWSE_PORT=34567');
-    expect(blocked).toContain('localhost port binding is blocked');
-    expect(blocked).toContain('not that the port is occupied');
-
-    const occupied = __testInternals__.formatExplicitPortUnavailableError(34567, {
-      available: false,
-      code: 'EADDRINUSE',
-      message: 'address already in use',
-    }).message;
-
-    expect(occupied).toBe('[browse] Port 34567 (from BROWSE_PORT env) is in use');
-  });
-
-  test('random port diagnostic calls out sandbox-style bind denial', () => {
-    const message = __testInternals__.formatRandomPortUnavailableError([
-      { port: 11001, result: { available: false, code: 'EADDRINUSE', message: 'address already in use' } },
-      { port: 12002, result: { available: false, code: 'EPERM', message: 'operation not permitted' } },
-    ]).message;
-
-    expect(message).toContain('Cannot bind localhost ports after 2 attempts');
-    expect(message).toContain('Last error: 12002 (EPERM: operation not permitted)');
-    expect(message).toContain('not that every sampled port is occupied');
-    expect(message).toContain('set BROWSE_PORT to an approved port');
-  });
-
-  test('random port diagnostic preserves old busy-port meaning when all attempts are occupied', () => {
-    const message = __testInternals__.formatRandomPortUnavailableError([
-      { port: 11001, result: { available: false, code: 'EADDRINUSE', message: 'address already in use' } },
-      { port: 12002, result: { available: false, code: 'EADDRINUSE', message: 'address already in use' } },
-    ]).message;
-
-    expect(message).toContain('No available port after 5 attempts');
-    expect(message).toContain('every sampled port was already in use');
-  });
-
-  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', timeout: 30_000 });
-
-    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', ` // timeout in trailing options
-      const net = require('net');
-
-      async function testFix() {
-        // Ask the OS for an available test port. A random port may already
-        // belong to another parallel test or local service.
-        const port = await new Promise((resolve, reject) => {
-          const srv = net.createServer();
-          srv.once('error', reject);
-          srv.listen(0, '127.0.0.1', () => {
-            const allocatedPort = srv.address().port;
-            srv.close((error) => error ? reject(error) : resolve(allocatedPort));
-          });
-        });
-
-        // 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().catch((error) => {
-        console.error(error);
-        process.exitCode = 1;
-      });
-    `], { stdout: 'pipe', stderr: 'pipe', timeout: 30_000 });
-
-    expect(result.exitCode, result.stderr.toString()).toBe(0);
-    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/.agent/skills/gstack-browse/test/fixtures/basic.html

@@ -1,33 +0,0 @@
-<!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/.agent/skills/gstack-browse/test/fixtures/change-only-validator.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Test Page - Change-Only Validator</title>
-</head>
-<body>
-  <h1>Change-Only Validator</h1>
-
-  <!--
-    Minimal repro of AngularJS ng-change / debounced cross-field validators
-    (e.g. cPanel's Jupiter theme "Add FTP Account" password-match check):
-    the listener only reacts to `change`, never `input`. A page like this
-    silently "loses" a Playwright-style value-set-without-a-change-event.
-  -->
-  <input type="password" id="password" name="password">
-  <input type="password" id="password2" name="password2">
-  <div id="match-status">unknown</div>
-
-  <script>
-    function checkMatch() {
-      var a = document.getElementById('password').value;
-      var b = document.getElementById('password2').value;
-      document.getElementById('match-status').textContent =
-        a && a === b ? 'match' : 'no-match';
-    }
-    document.getElementById('password').addEventListener('change', checkMatch);
-    document.getElementById('password2').addEventListener('change', checkMatch);
-  </script>
-</body>
-</html>

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

@@ -1,22 +0,0 @@
-<!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/.agent/skills/gstack-browse/test/fixtures/dialog.html

@@ -1,15 +0,0 @@
-<!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/.agent/skills/gstack-browse/test/fixtures/dropdown.html

@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Test Page - Dropdown/Autocomplete</title>
-  <style>
-    .search-container { position: relative; width: 300px; }
-    .search-input { width: 100%; padding: 8px; }
-    .dropdown-portal {
-      position: fixed;
-      top: 60px;
-      left: 20px;
-      z-index: 9999;
-      background: white;
-      border: 1px solid #ccc;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      width: 300px;
-    }
-    .dropdown-item {
-      padding: 8px 12px;
-      cursor: pointer;
-    }
-    .dropdown-item:hover { background: #f0f0f0; }
-    .dropdown-item-no-cursor {
-      padding: 8px 12px;
-    }
-  </style>
-</head>
-<body>
-  <h1>Dropdown Test</h1>
-
-  <div class="search-container">
-    <input type="text" class="search-input" placeholder="Search for someone..." id="search" aria-label="Search">
-  </div>
-
-  <!-- Simulates a React portal / floating-ui popover -->
-  <div class="dropdown-portal" id="dropdown-portal" data-floating-ui-portal>
-    <!-- Items with cursor:pointer but NO ARIA roles (common pattern) -->
-    <div class="dropdown-item" onclick="selectItem('alice')">Alice Johnson - Acme Corp</div>
-    <div class="dropdown-item" onclick="selectItem('bob')">Bob Smith - Beta Inc</div>
-    <div class="dropdown-item" onclick="selectItem('carol')">Carol Davis - Gamma LLC</div>
-
-    <!-- Items WITH role="option" (well-built component) -->
-    <div class="dropdown-item" role="option" onclick="selectItem('dave')">Dave Wilson - Delta Co</div>
-
-    <!-- Item with no cursor, no onclick, just text (should NOT be captured) -->
-    <div class="dropdown-item-no-cursor" id="static-text">No results? Try a different search.</div>
-  </div>
-
-  <!-- Standard interactive elements (should appear in ARIA tree normally) -->
-  <button id="submit-btn">Submit</button>
-  <a href="/test">Normal Link</a>
-
-  <script>
-    function selectItem(name) {
-      document.getElementById('search').value = name;
-      document.getElementById('dropdown-portal').style.display = 'none';
-    }
-  </script>
-</body>
-</html>

package/.agent/skills/gstack-browse/test/fixtures/empty.html

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

package/.agent/skills/gstack-browse/test/fixtures/forms.html

@@ -1,55 +0,0 @@
-<!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/.agent/skills/gstack-browse/test/fixtures/iframe.html

@@ -1,30 +0,0 @@
-<!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>