qa-copilot-lab 0.1.0

package/README.md

@@ -0,0 +1,69 @@
+# QA Copilot Lab
+
+A local practice target site for the *Playwright MCP for QA* course. It is a
+small e-commerce app deliberately built so every common Playwright locator
+strategy has a real place to be exercised — plus a chaos mode, seeded bugs,
+and a reset API for self-healing and CI exercises.
+
+## Run it
+
+```bash
+npm install
+npm start
+```
+
+Then open http://localhost:4173. Login with `qa_student` / `Passw0rd!`.
+
+Flags:
+
+```bash
+npm start -- --fresh        # wipe local data and reseed
+npm start -- --port=5000    # run on a different port
+npm start -- --host=0.0.0.0 # bind every interface (reachable from other devices on the LAN)
+```
+
+Default binding is `127.0.0.1` (this machine only). Use `--host=0.0.0.0`
+(or `HOST=0.0.0.0 npm start`) if you need to reach the app from another
+device on the same network — e.g. testing from a phone, VM, or a
+Playwright run inside a container. Anyone on that network can then reach
+it, so only do this on networks you trust.
+
+## Where your data lives
+
+All data is stored in a single SQLite file at `~/.qa-copilot-lab/data.db`
+(printed on every startup). Restarting the app does **not** erase it —
+only an explicit reset does:
+
+```bash
+curl -X POST http://localhost:4173/api/__reset
+```
+
+## Dev / test control API
+
+| Method | Route | Purpose |
+| --- | --- | --- |
+| `POST` | `/api/__reset` | Restore seed data, clear cart, turn off chaos/bugs |
+| `POST` | `/api/__chaos/:mode` | `off` \| `mild` (class names drift) \| `aggressive` (class **and** testid drift) |
+| `POST` | `/api/__seed-bugs/:setId` | `off` \| `1` \| `2` — inject a known defect for exploratory testing |
+| `POST` | `/api/__flaky/:mode` | `on` \| `off` — checkout gains latency, a 25% chance of a 500, and a real double-submit race |
+| `GET` | `/api/__health` | Readiness check for CI |
+
+## Locator practice
+
+Visit `/locators` for thirty-six isolated examples: sixteen general locator
+strategies (role, label, placeholder, alt text, title, testid, text match,
+CSS attribute, XPath axes, chained filter, nth, frame locator, shadow DOM,
+ARIA state, disabled state, native dialog) plus twenty ARIA roles for
+`getByRole` (textbox, checkbox, combobox, slider, switch, navigation,
+heading, list, listitem, table, row, cell, columnheader, dialog, alert,
+progressbar, status, img, tab/tabpanel, search) — the same strategies used
+throughout the real storefront pages.
+
+## Why these choices
+
+- **Node.js + Express + EJS** — no build step, nothing to compile beyond
+  `better-sqlite3`'s prebuilt binary.
+- **SQLite in the user's home directory** — survives restarts, and `--fresh`
+  gives an explicit, deliberate way to wipe it.
+- **No Docker, no bundled browser** — the app is a webpage; Playwright brings
+  its own browser.

package/bin/cli.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+const { startServer } = require('../src/server');
+
+const args = process.argv.slice(2);
+const fresh = args.includes('--fresh');
+const portArg = args.find((a) => a.startsWith('--port='));
+const hostArg = args.find((a) => a.startsWith('--host='));
+const port = portArg ? Number(portArg.split('=')[1]) : Number(process.env.PORT) || 4173;
+const host = hostArg ? hostArg.split('=')[1] : process.env.HOST || '127.0.0.1';
+
+startServer({ port, fresh, host });

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "qa-copilot-lab",
+  "version": "0.1.0",
+  "description": "Local practice target site for the Playwright MCP for QA course — every common locator strategy, a chaos mode for self-healing practice, seeded bugs for exploratory testing, and a reset API for CI.",
+  "bin": {
+    "qa-copilot-lab": "bin/cli.js"
+  },
+  "main": "src/server.js",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "start": "node bin/cli.js"
+  },
+  "dependencies": {
+    "better-sqlite3": "^11.3.0",
+    "cookie-parser": "^1.4.6",
+    "ejs": "^3.1.10",
+    "express": "^4.19.2"
+  },
+  "license": "MIT",
+  "devDependencies": {},
+  "keywords": [],
+  "author": "",
+  "type": "commonjs"
+}

package/public/css/style.css

@@ -0,0 +1,169 @@
+:root {
+  --ink: #161a18;
+  --ink-soft: #4b544f;
+  --paper: #f1f3ef;
+  --paper-raised: #ffffff;
+  --line: #d9ddd6;
+  --accent: #1f7a5c;
+  --accent-soft: #e4efe9;
+  --warn: #b85c2c;
+  --warn-soft: #f5e6dc;
+  --danger: #a83c3c;
+}
+
+html[data-theme='dark'] {
+  --ink: #edefea;
+  --ink-soft: #b6c0b9;
+  --paper: #131815;
+  --paper-raised: #1a201c;
+  --line: #2a322c;
+  --accent: #49b088;
+  --accent-soft: #1c2f27;
+  --warn: #e08a4f;
+  --warn-soft: #35281e;
+  --danger: #e07171;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  line-height: 1.5;
+}
+
+a { color: var(--accent); }
+code { font-family: "Courier New", monospace; background: var(--paper-raised); padding: 1px 5px; border-radius: 4px; }
+
+/* ---- navbar ---- */
+.navbar {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 14px 24px;
+  background: var(--paper-raised);
+  border-bottom: 1px solid var(--line);
+}
+.brand { font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ink); }
+.search-form { flex: 1; max-width: 360px; }
+.search-form input { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
+.nav-links { display: flex; gap: 14px; }
+.nav-links a { text-decoration: none; color: var(--ink-soft); font-size: 14px; }
+.chaos-badge { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: var(--warn-soft); color: var(--warn); padding: 4px 8px; border-radius: 5px; }
+.cart-link { text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 6px; }
+.badge { background: var(--accent); color: white; border-radius: 999px; font-size: 12px; padding: 1px 7px; }
+.theme-toggle { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
+.account-menu { display: flex; gap: 14px; align-items: center; }
+.account-greeting { color: var(--ink); font-size: 14px; }
+.account-menu a, .link-button { text-decoration: none; color: var(--ink-soft); background: none; border: none; padding: 0; cursor: pointer; font-size: 14px; }
+.account-menu a:hover, .link-button:hover { color: var(--ink); text-decoration: underline; }
+
+.toast-stack { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
+.toast { background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font-size: 14px; }
+.toast-error { background: var(--danger); }
+
+.page-container { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }
+
+/* ---- buttons / forms ---- */
+.btn { display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-size: 14px; text-decoration: none; }
+.btn-primary { background: var(--accent); color: white; }
+.btn-primary[aria-disabled='true'] { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
+.btn-secondary { background: var(--paper-raised); border-color: var(--line); color: var(--ink); }
+.btn-danger { background: var(--danger); color: white; }
+.icon-btn { background: none; border: none; font-size: 16px; cursor: pointer; }
+.inline-form { display: inline-block; margin-left: 8px; }
+
+form label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--ink-soft); }
+input[type='text'], input[type='email'], input[type='password'], input[type='search'], input[type='number'] {
+  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); color: var(--ink); width: 100%; max-width: 320px;
+}
+.checkbox-row { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0; }
+.form-error { color: var(--danger); }
+.auth-form-wrap { max-width: 380px; }
+
+/* ---- hero / sections ---- */
+.hero { padding: 40px 0; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
+.hero h1 { max-width: 20ch; }
+.section { margin-bottom: 40px; }
+
+/* ---- product grid / cards ---- */
+.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
+.product-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
+.product-thumb { width: 100%; border-radius: 6px; margin-bottom: 8px; }
+.product-card h3 { font-size: 15px; margin: 6px 0; }
+.product-card h3 a { text-decoration: none; color: var(--ink); }
+.category-tag { font-size: 12px; color: var(--ink-soft); }
+.price { font-weight: 600; }
+.badge-warn { background: var(--warn-soft); color: var(--warn); padding: 2px 8px; border-radius: 5px; font-size: 12px; }
+
+/* ---- catalog layout ---- */
+.catalog-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }
+.filters h2 { font-size: 13px; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
+.pagination { display: flex; gap: 6px; margin-top: 20px; }
+.page-link { padding: 6px 11px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
+.page-link.active { background: var(--accent); color: white; border-color: var(--accent); }
+
+/* ---- product detail ---- */
+.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px; }
+.gallery-main { width: 100%; border-radius: 10px; }
+.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; }
+.thumb-btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-raised); cursor: pointer; font-size: 12px; }
+.qty-stepper { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
+.qty-stepper input { width: 60px; text-align: center; }
+.qty-stepper button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper-raised); cursor: pointer; }
+
+.tabs [role='tablist'] { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
+.tabs [role='tab'] { padding: 10px 16px; border: none; background: none; cursor: pointer; color: var(--ink-soft); border-bottom: 2px solid transparent; }
+.tabs [role='tab'][aria-selected='true'] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
+.review-list { list-style: none; padding: 0; }
+.review-item { border-bottom: 1px solid var(--line); padding: 10px 0; }
+
+/* ---- accordion ---- */
+.accordion-item { border-bottom: 1px solid var(--line); }
+.accordion-trigger { width: 100%; text-align: left; padding: 14px 0; background: none; border: none; font-size: 15px; cursor: pointer; color: var(--ink); }
+.accordion-panel { padding-bottom: 14px; color: var(--ink-soft); }
+
+/* ---- cart / checkout ---- */
+table { width: 100%; border-collapse: collapse; margin: 16px 0; }
+.cart-table th, .cart-table td, table td, table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
+.qty-edit { width: 60px; }
+.cart-total { font-size: 16px; margin: 16px 0; }
+.checkout-step { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
+.payment-frame, .payment-frame-small { width: 100%; max-width: 420px; height: 180px; border: 1px solid var(--line); border-radius: 8px; }
+.payment-frame-small { height: 140px; }
+.checkout-summary { list-style: none; padding: 0; }
+.autocomplete { position: relative; max-width: 320px; }
+.autocomplete-list { position: absolute; z-index: 5; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; list-style: none; margin: 4px 0 0; padding: 4px; width: 100%; }
+.autocomplete-list li { padding: 7px 10px; cursor: pointer; border-radius: 4px; }
+.autocomplete-list li:hover { background: var(--accent-soft); }
+
+.frame-body { padding: 18px; font-family: system-ui, sans-serif; background: var(--paper); color: var(--ink); }
+.payment-form .form-row { display: flex; gap: 12px; }
+.hint-text { font-size: 13px; color: var(--ink-soft); }
+
+/* ---- account / wishlist ---- */
+.wishlist { list-style: none; padding: 0; max-width: 420px; }
+.wishlist-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: grab; }
+.wishlist-item.dragging { opacity: 0.4; }
+.drag-handle { color: var(--ink-soft); }
+.wishlist-empty { color: var(--ink-soft); border: none; background: none; }
+.upload-form { display: flex; align-items: center; gap: 10px; }
+
+/* ---- locators playground ---- */
+.locator-list { display: flex; flex-direction: column; gap: 22px; }
+.locator-demo { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
+.locator-demo h3 { margin-top: 0; font-size: 15px; }
+.reveal-btn { margin-top: 10px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 13px; }
+.locator-demo .answer { margin-top: 10px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; }
+.locator-demo .answer:not([hidden]) { display: block; }
+.demo-dialog { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: var(--paper); max-width: 360px; }
+.demo-status { display: block; font-size: 13px; color: var(--accent); }
+
+.site-footer { text-align: center; padding: 20px; color: var(--ink-soft); font-size: 13px; border-top: 1px solid var(--line); }
+
+@media (max-width: 720px) {
+  .catalog-layout, .product-detail { grid-template-columns: 1fr; }
+  .navbar { flex-wrap: wrap; }
+}

package/public/js/accordion.js

@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.accordion-trigger').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const panel = document.getElementById(btn.getAttribute('aria-controls'));
+      const open = btn.getAttribute('aria-expanded') === 'true';
+      btn.setAttribute('aria-expanded', String(!open));
+      panel.hidden = open;
+    });
+  });
+});

package/public/js/autocomplete.js

@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const input = document.getElementById('address-input');
+  const list = document.getElementById('address-listbox');
+  if (!input || !list) return;
+
+  const sampleAddresses = [
+    '12 Sukhumvit Road', '45 Silom Soi 3', '88 Rama IX Avenue',
+    '210 Ratchadaphisek Road', '5 Ekkamai Soi 10', '77 Ladprao Road',
+    '19 Phahonyothin Road', '3 Sathorn Soi 1',
+  ];
+
+  input.addEventListener('input', () => {
+    const q = input.value.trim().toLowerCase();
+    list.innerHTML = '';
+    if (!q) {
+      list.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+      return;
+    }
+    const matches = sampleAddresses.filter((a) => a.toLowerCase().includes(q)).slice(0, 5);
+    matches.forEach((addr) => {
+      const li = document.createElement('li');
+      li.setAttribute('role', 'option');
+      li.textContent = addr;
+      li.addEventListener('click', () => {
+        input.value = addr;
+        list.hidden = true;
+        input.setAttribute('aria-expanded', 'false');
+      });
+      list.appendChild(li);
+    });
+    list.hidden = matches.length === 0;
+    input.setAttribute('aria-expanded', String(matches.length > 0));
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!input.contains(e.target) && !list.contains(e.target)) list.hidden = true;
+  });
+});

package/public/js/cart.js

@@ -0,0 +1,52 @@
+function updateCartBadge(count) {
+  const badge = document.querySelector('.cart-link .badge');
+  if (badge) badge.textContent = count;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const qtyInput = document.getElementById('qty-input');
+  const qtyMinus = document.getElementById('qty-minus');
+  const qtyPlus = document.getElementById('qty-plus');
+  if (qtyInput && qtyMinus && qtyPlus) {
+    qtyMinus.addEventListener('click', () => {
+      qtyInput.value = Math.max(1, Number(qtyInput.value) - 1);
+    });
+    qtyPlus.addEventListener('click', () => {
+      qtyInput.value = Number(qtyInput.value) + 1;
+    });
+  }
+
+  document.querySelectorAll('[data-role="add-to-cart"]').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const qtyInputId = btn.dataset.qtyInput;
+      const qty = qtyInputId ? Number(document.getElementById(qtyInputId).value) || 1 : 1;
+      const res = await fetch('/api/cart', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ productId: btn.dataset.productId, qty }),
+      });
+      const cart = await res.json();
+      updateCartBadge(cart.count);
+      window.toast(`${btn.dataset.productName || 'Item'} added to cart`);
+    });
+  });
+
+  document.querySelectorAll('.qty-edit').forEach((input) => {
+    input.addEventListener('change', async () => {
+      await fetch(`/api/cart/${input.dataset.productId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ qty: input.value }),
+      });
+      window.location.reload();
+    });
+  });
+
+  document.querySelectorAll('.remove-line').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const cart = await (await fetch(`/api/cart/${btn.dataset.productId}`, { method: 'DELETE' })).json();
+      updateCartBadge(cart.count);
+      window.location.reload();
+    });
+  });
+});

package/public/js/confirm-dialog.js

@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('delete-account-form');
+  if (!form) return;
+  form.addEventListener('submit', (e) => {
+    const ok = window.confirm('Delete this account? This cannot be undone.');
+    if (!ok) e.preventDefault();
+  });
+});

package/public/js/drag-drop.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const list = document.getElementById('wishlist-list');
+  if (!list) return;
+
+  let dragged = null;
+
+  list.querySelectorAll('.wishlist-item').forEach((item) => {
+    item.addEventListener('dragstart', () => {
+      dragged = item;
+      item.classList.add('dragging');
+    });
+    item.addEventListener('dragend', () => item.classList.remove('dragging'));
+  });
+
+  list.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    const after = getItemAfter(list, e.clientY);
+    if (!dragged) return;
+    if (after == null) list.appendChild(dragged);
+    else list.insertBefore(dragged, after);
+  });
+
+  list.addEventListener('drop', () => {
+    const order = Array.from(list.querySelectorAll('.wishlist-item')).map((el) => el.dataset.productId);
+    fetch('/wishlist', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: 'order=' + order.join(','),
+    }).then(() => window.toast && window.toast('Wishlist order saved'));
+  });
+
+  function getItemAfter(container, y) {
+    const items = [...container.querySelectorAll('.wishlist-item:not(.dragging)')];
+    return items.reduce(
+      (closest, child) => {
+        const box = child.getBoundingClientRect();
+        const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) return { offset, element: child };
+        return closest;
+      },
+      { offset: Number.NEGATIVE_INFINITY, element: null }
+    ).element;
+  }
+});

package/public/js/reveal-answer.js

@@ -0,0 +1,10 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.reveal-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const answer = btn.nextElementSibling;
+      if (!answer) return;
+      answer.hidden = !answer.hidden;
+      btn.textContent = answer.hidden ? 'Reveal' : 'Hide';
+    });
+  });
+});

package/public/js/star-rating.js

@@ -0,0 +1,38 @@
+class StarRating extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) this.render();
+  }
+
+  render() {
+    const value = Number(this.getAttribute('value')) || 0;
+    const root = this.shadowRoot;
+    root.innerHTML = `
+      <style>
+        .stars { display: inline-flex; gap: 2px; font-size: 20px; cursor: pointer; }
+        .star { color: #c7cdc9; }
+        .star.filled { color: #d7ac5c; }
+      </style>
+      <span class="stars"></span>
+    `;
+    const wrap = root.querySelector('.stars');
+    for (let i = 1; i <= 5; i++) {
+      const star = document.createElement('span');
+      star.className = 'star' + (i <= value ? ' filled' : '');
+      star.dataset.star = String(i);
+      star.textContent = '★';
+      star.addEventListener('click', () => this.setAttribute('value', String(i)));
+      wrap.appendChild(star);
+    }
+  }
+}
+
+customElements.define('star-rating', StarRating);

package/public/js/tabs.js

@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[role="tablist"]').forEach((tablist) => {
+    const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        tabs.forEach((t) => {
+          t.setAttribute('aria-selected', String(t === tab));
+          const panel = document.getElementById(t.getAttribute('aria-controls'));
+          if (panel) panel.hidden = t !== tab;
+        });
+      });
+    });
+  });
+});

package/public/js/theme-toggle.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const btn = document.getElementById('theme-toggle');
+  if (!btn) return;
+  const html = document.documentElement;
+
+  const saved = (() => {
+    try {
+      return localStorage.getItem('qa-lab-theme');
+    } catch {
+      return null;
+    }
+  })();
+  if (saved) html.setAttribute('data-theme', saved);
+
+  btn.addEventListener('click', () => {
+    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    try {
+      localStorage.setItem('qa-lab-theme', next);
+    } catch {
+      /* private browsing — theme just won't persist */
+    }
+  });
+});

package/public/js/toast.js

@@ -0,0 +1,10 @@
+window.toast = function toast(message, type) {
+  const stack = document.getElementById('toast-stack');
+  if (!stack) return;
+  const el = document.createElement('div');
+  el.className = 'toast' + (type === 'error' ? ' toast-error' : '');
+  el.setAttribute('role', 'status');
+  el.textContent = message;
+  stack.appendChild(el);
+  setTimeout(() => el.remove(), 3500);
+};

package/src/chaos.js

@@ -0,0 +1,18 @@
+const state = require('./state');
+
+// Mild chaos: CSS class names drift, but data-testid stays put (still locatable).
+// Aggressive chaos: both class names AND data-testid values drift — forces a
+// self-healing agent to fall back to role/text/label locators instead.
+function cx(base) {
+  const mode = state.getChaosMode();
+  if (mode === 'off') return base;
+  return `${base}-${state.getChaosSeed()}`;
+}
+
+function testId(base) {
+  const mode = state.getChaosMode();
+  if (mode !== 'aggressive') return base;
+  return `${base}-${state.getChaosSeed()}`;
+}
+
+module.exports = { cx, testId };