@vitronai/alethia 0.3.6 → 0.3.8

package/README.md

@@ -66,7 +66,7 @@ alethia-mcp --health-check
 Expected:
 
 ```
-✓ Connected. 7 MCP tools available.
+✓ Connected. MCP tools available.
   runtime version:  0.1.0-alpha.1
   default profile:  controlled-web
   kill switch:      inactive
@@ -125,9 +125,9 @@ After saving the config, restart your MCP client.
 
 Once configured, your agent has the full Alethia tool suite available. The most common one:
 
-> *"Use alethia_tell to navigate to localhost:3000, sign in as admin@example.com / password123, and verify the dashboard heading is visible."*
+> *"Use alethia_tell to navigate to file:///path/to/app.html, click the Sign In button, and assert the dashboard heading is visible."*
 
-The agent will call `alethia_tell` with that NLP, Alethia compiles to Action IR, runs through the VITRON-EA1 policy gate, executes step by step, and returns a `PlanRun` with per-step results, policy audit records, and an integrity hash.
+The agent calls `alethia_tell` with plain English. Alethia compiles it to Action IR, runs each step through the VITRON-EA1 policy gate, and returns a `PlanRun` with per-step results, DOM diffs, a semantic page snapshot, policy audit records, and a SHA-256 integrity hash.
 
 ---
 
@@ -137,9 +137,8 @@ The agent will call `alethia_tell` with that NLP, Alethia compiles to Action IR,
 Execute natural-language test instructions. The headline tool.
 
 ```
-nlp: "navigate to http://localhost:3000/login
-      type admin@example.com into the email field
-      type password123 into the password field
+nlp: "navigate to file:///path/to/app.html
+      type test@example.com into the email field
       click Sign In
       assert the dashboard heading is visible"
 ```

package/demo/README.md

@@ -0,0 +1,74 @@
+# Alethia Demo Pages
+
+Ready-to-use local HTML pages for testing Alethia. Open any page in your browser or drive it with `alethia_tell`.
+
+## Pages
+
+| Page | What it tests | Key features shown |
+|---|---|---|
+| `signup-form.html` | Login flow with validation | Navigate, type, click, assert, error detection, DOM diffs |
+| `todo-app.html` | Dynamic list add/delete | Type, click, assert, list awareness in snapshots |
+| `ecommerce.html` | Add to cart → checkout | EA1 policy gate blocks purchase (write-high) |
+| `spa-loading.html` | Async data loading (2s delay) | Page readiness detection, MutationObserver wait-for |
+| `cookie-banner.html` | Cookie consent + newsletter | Conditional steps ("if banner exists, click Accept") |
+| `form-validation.html` | Multi-field validation | Smart assertions, error detection, suggested fixes |
+| `admin-panel.html` | Classified admin system | EA1 blocks user deletion (write-high), audit trail, modal handling |
+| `financial-dashboard.html` | Trading risk monitor | Compliance checks, EA1 blocks trades (write-high), data verification |
+
+## Prompts
+
+### Login flow (signup-form.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/signup-form.html, click Sign In without filling anything in and assert the error message appears, then type admin@acme.com into email, type secret123 into password with allowSensitiveInput true, click Sign In, and assert "Welcome back!" is visible.
+```
+
+### Todo list (todo-app.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/todo-app.html, type "Ship v1" into the task input, click Add, type "Record demo" into the task input, click Add, type "Send cold DMs" into the task input, click Add, and assert all three items appear in the list.
+```
+
+### EA1 policy gate (ecommerce.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/ecommerce.html, click "Add to Cart" on the Wireless Keyboard, click "Add to Cart" on the USB-C Hub, assert the cart shows both items, then click "Complete Purchase" and tell me what the policy gate does.
+```
+
+### Page readiness / SPA loading (spa-loading.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/spa-loading.html and assert "1,247" is visible. The page has a 2-second loading spinner — Alethia should wait for it automatically.
+```
+
+### Conditional steps / cookie banner (cookie-banner.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/cookie-banner.html. If the cookie banner exists, click Accept. Then type hello@test.com into the email field and click Subscribe. Assert "Subscribed!" is visible.
+```
+
+### Form validation / smart assertions (form-validation.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/form-validation.html and click Send Message without filling anything. Check what validation errors appear. Then fill in: name "Jane Doe", email "jane@test.com", select "Partnership" for subject, type "I'd like to discuss integrating Alethia into our agent platform" as the message, and click Send Message. Assert "Message Sent!" is visible.
+```
+
+### Admin panel / defense (admin-panel.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/admin-panel.html. Assert the classification banner says "TOP SECRET // SCI". Check how many users are listed in the table. Then try to click "Delete" on Lt. Marcus Webb — tell me what the policy gate does. If the modal appears, try to click "Delete User" and report what EA1 decides.
+```
+
+### Financial risk monitor (financial-dashboard.html)
+```
+Use alethia_tell to navigate to file:///PATH/demo/financial-dashboard.html. Assert the risk level banner is visible. Check the margin used percentage. Verify the compliance checks — are any failing? Then try to click "Liquidate All" and tell me what the policy gate does.
+```
+
+## Setup
+
+Replace `PATH` in the prompts above with the actual path to this demo folder:
+
+```bash
+# Find your path
+npm root -g
+# The demos are at: <global_root>/@vitronai/alethia/demo/
+```
+
+Or clone the repo and use the local path:
+```bash
+git clone https://github.com/vitron-ai/alethia-mcp.git
+# Demos at: /path/to/alethia-mcp/demo/
+```

package/demo/admin-panel.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Admin Panel — Classified</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; padding: 1.5rem; }
+    .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e293b; padding-bottom: 1rem; margin-bottom: 1.5rem; }
+    h1 { font-size: 1.4rem; }
+    .classification { background: #991b1b; color: #fecaca; padding: 0.3rem 0.8rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
+    .user-info { color: #64748b; font-size: 0.85rem; }
+    .grid { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; }
+    .sidebar { display: flex; flex-direction: column; gap: 0.5rem; }
+    .nav-item { padding: 0.6rem 0.8rem; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; cursor: pointer; text-align: left; font-size: 0.9rem; }
+    .nav-item.active { background: #1e3a5f; border-color: #3b82f6; color: #e2e8f0; }
+    .content { border: 1px solid #1e293b; border-radius: 12px; background: #111827; padding: 1.5rem; }
+    .content h2 { margin-bottom: 1rem; font-size: 1.2rem; }
+    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
+    th { text-align: left; padding: 0.6rem; color: #64748b; border-bottom: 1px solid #1e293b; font-weight: 600; }
+    td { padding: 0.6rem; border-bottom: 1px solid #0f172a; }
+    .status-active { color: #34d399; }
+    .status-suspended { color: #f87171; }
+    .status-pending { color: #fbbf24; }
+    .actions { display: flex; gap: 0.4rem; }
+    .actions button { padding: 0.3rem 0.6rem; border-radius: 6px; border: none; font-size: 0.8rem; cursor: pointer; }
+    .btn-view { background: #1e3a5f; color: #93c5fd; }
+    .btn-suspend { background: #7f1d1d; color: #fca5a5; }
+    .btn-delete { background: #991b1b; color: #fecaca; }
+    .btn-approve { background: #14532d; color: #86efac; }
+    .audit-log { margin-top: 1rem; font-family: monospace; font-size: 0.8rem; background: #0a0e17; border: 1px solid #1e293b; border-radius: 8px; padding: 0.8rem; max-height: 200px; overflow-y: auto; }
+    .audit-entry { padding: 0.2rem 0; color: #64748b; }
+    .audit-entry .timestamp { color: #475569; }
+    .audit-entry .action { color: #fbbf24; }
+    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
+    .modal.visible { display: flex; }
+    .modal-content { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 1.5rem; max-width: 400px; text-align: center; }
+    .modal-content h3 { color: #f87171; margin-bottom: 0.8rem; }
+    .modal-content p { color: #94a3b8; margin-bottom: 1rem; }
+    .modal-actions { display: flex; gap: 0.8rem; justify-content: center; }
+    .modal-actions button { padding: 0.5rem 1.2rem; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
+    .btn-cancel { background: #334155; color: #e2e8f0; }
+    .btn-confirm-delete { background: #991b1b; color: white; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div>
+      <h1>System Administration</h1>
+      <span class="user-info">Operator: admin@agency.gov · Session: 4f8a2c · Clearance: TS/SCI</span>
+    </div>
+    <span class="classification">TOP SECRET // SCI</span>
+  </div>
+  <div class="grid">
+    <div class="sidebar">
+      <button class="nav-item active" id="nav-users">User Management</button>
+      <button class="nav-item" id="nav-access">Access Control</button>
+      <button class="nav-item" id="nav-audit">Audit Trail</button>
+      <button class="nav-item" id="nav-system">System Config</button>
+    </div>
+    <div class="content">
+      <h2>User Management</h2>
+      <table>
+        <thead>
+          <tr><th>Name</th><th>Role</th><th>Clearance</th><th>Status</th><th>Actions</th></tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Col. Sarah Chen</td><td>Program Director</td><td>TS/SCI</td>
+            <td class="status-active">Active</td>
+            <td class="actions"><button class="btn-view">View</button><button class="btn-suspend">Suspend</button></td>
+          </tr>
+          <tr>
+            <td>Maj. James Rivera</td><td>Systems Engineer</td><td>TS</td>
+            <td class="status-active">Active</td>
+            <td class="actions"><button class="btn-view">View</button><button class="btn-suspend">Suspend</button></td>
+          </tr>
+          <tr>
+            <td>Dr. Aisha Patel</td><td>Analyst</td><td>Secret</td>
+            <td class="status-pending">Pending Review</td>
+            <td class="actions"><button class="btn-view">View</button><button class="btn-approve">Approve</button></td>
+          </tr>
+          <tr>
+            <td>Lt. Marcus Webb</td><td>Contractor</td><td>Secret</td>
+            <td class="status-suspended">Suspended</td>
+            <td class="actions"><button class="btn-view">View</button><button class="btn-delete" id="delete-webb">Delete</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="audit-log" id="audit-log">
+        <div class="audit-entry"><span class="timestamp">2026-04-10T09:14:22Z</span> <span class="action">LOGIN</span> admin@agency.gov from 10.0.0.42</div>
+        <div class="audit-entry"><span class="timestamp">2026-04-10T09:14:28Z</span> <span class="action">VIEW</span> User Management panel accessed</div>
+      </div>
+    </div>
+  </div>
+  <div id="delete-modal" class="modal">
+    <div class="modal-content">
+      <h3>Confirm User Deletion</h3>
+      <p>This action is irreversible. Lt. Marcus Webb's access credentials, audit history, and associated records will be permanently removed.</p>
+      <div class="modal-actions">
+        <button class="btn-cancel" id="cancel-delete">Cancel</button>
+        <button class="btn-confirm-delete" id="confirm-delete">Delete User</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    var auditLog = document.getElementById('audit-log');
+    function logAudit(action, detail) {
+      var entry = document.createElement('div');
+      entry.className = 'audit-entry';
+      entry.innerHTML = '<span class="timestamp">' + new Date().toISOString() + '</span> <span class="action">' + action + '</span> ' + detail;
+      auditLog.appendChild(entry);
+      auditLog.scrollTop = auditLog.scrollHeight;
+    }
+    document.getElementById('delete-webb').addEventListener('click', function() {
+      document.getElementById('delete-modal').classList.add('visible');
+      logAudit('DELETE_REQUESTED', 'Deletion requested for Lt. Marcus Webb');
+    });
+    document.getElementById('cancel-delete').addEventListener('click', function() {
+      document.getElementById('delete-modal').classList.remove('visible');
+      logAudit('DELETE_CANCELLED', 'Deletion cancelled for Lt. Marcus Webb');
+    });
+    document.getElementById('confirm-delete').addEventListener('click', function() {
+      document.getElementById('delete-modal').classList.remove('visible');
+      logAudit('DELETE_CONFIRMED', 'Lt. Marcus Webb permanently deleted');
+    });
+  </script>
+</body>
+</html>

package/demo/cookie-banner.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Blog Post</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
+    h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
+    .meta { color: #64748b; margin-bottom: 1.5rem; font-size: 0.9rem; }
+    article { max-width: 640px; line-height: 1.7; }
+    article p { margin-bottom: 1rem; color: #cbd5e1; }
+    .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1e293b; border-top: 1px solid #334155; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; z-index: 100; }
+    .cookie-banner p { color: #94a3b8; font-size: 0.9rem; margin: 0; }
+    .cookie-banner button { padding: 0.5rem 1.2rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
+    .accept-btn { background: #3b82f6; color: white; }
+    .decline-btn { background: #334155; color: #94a3b8; }
+    .hidden { display: none; }
+    .newsletter { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; margin-top: 2rem; }
+    .newsletter h3 { margin-bottom: 0.5rem; }
+    .newsletter input { padding: 0.5rem; border-radius: 6px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; margin-right: 0.5rem; }
+    .newsletter button { padding: 0.5rem 1rem; border-radius: 6px; border: none; background: #3b82f6; color: white; cursor: pointer; }
+    .subscribed { color: #34d399; font-weight: 600; display: none; }
+  </style>
+</head>
+<body>
+  <article>
+    <h1>Why Zero-IPC Matters for AI Agents</h1>
+    <p class="meta">April 10, 2026 · 5 min read</p>
+    <p>When an AI agent generates code and needs to verify it works, every millisecond of automation latency compounds. CDP-based tools add ~580ms of marshalling tax per assertion.</p>
+    <p>Zero-IPC eliminates the process boundary between the automation driver and the DOM. The driver touches the DOM the same way the page's own JavaScript does — synchronously, in-process, with no serialization overhead.</p>
+    <p>The result: ~13ms per step instead of ~580ms. That's not an optimization — it's a different architecture.</p>
+    <div class="newsletter">
+      <h3>Subscribe to updates</h3>
+      <div id="subscribe-form">
+        <input id="email" type="email" placeholder="you@example.com" aria-label="Email address" />
+        <button id="subscribe-btn" type="button">Subscribe</button>
+      </div>
+      <p id="subscribed" class="subscribed">Subscribed! Check your inbox.</p>
+    </div>
+  </article>
+
+  <div id="cookie-banner" class="cookie-banner">
+    <p>We use cookies to improve your experience. No tracking, no ads.</p>
+    <div>
+      <button class="decline-btn" id="decline-cookies" type="button">Decline</button>
+      <button class="accept-btn" id="accept-cookies" type="button">Accept</button>
+    </div>
+  </div>
+
+  <script>
+    document.getElementById('accept-cookies').addEventListener('click', function() {
+      document.getElementById('cookie-banner').classList.add('hidden');
+    });
+    document.getElementById('decline-cookies').addEventListener('click', function() {
+      document.getElementById('cookie-banner').classList.add('hidden');
+    });
+    document.getElementById('subscribe-btn').addEventListener('click', function() {
+      var email = document.getElementById('email').value;
+      if (email && email.includes('@')) {
+        document.getElementById('subscribe-form').style.display = 'none';
+        document.getElementById('subscribed').style.display = 'block';
+      }
+    });
+  </script>
+</body>
+</html>

package/demo/ecommerce.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Acme Store</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
+    h1 { font-size: 1.8rem; margin-bottom: 1.5rem; }
+    .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
+    .product { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; }
+    .product h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
+    .product .price { color: #34d399; font-weight: 700; font-size: 1.2rem; }
+    .product p { color: #94a3b8; font-size: 0.9rem; margin: 0.4rem 0; }
+    button { padding: 0.6rem 1rem; border-radius: 8px; border: none; background: #3b82f6; color: white; font-weight: 600; cursor: pointer; margin-top: 0.5rem; }
+    button:hover { background: #2563eb; }
+    button:disabled { background: #475569; cursor: not-allowed; }
+    .cart { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; max-width: 400px; }
+    .cart h2 { margin-bottom: 0.8rem; }
+    .cart ul { list-style: none; }
+    .cart li { padding: 0.4rem 0; border-bottom: 1px solid #0f172a; display: flex; justify-content: space-between; }
+    .cart-total { margin-top: 0.8rem; font-weight: 700; font-size: 1.1rem; color: #34d399; }
+    .cart-empty { color: #64748b; }
+    .checkout-btn { background: #ef4444; width: 100%; margin-top: 0.8rem; }
+    .success { display: none; color: #34d399; font-size: 1.2rem; font-weight: 700; margin-top: 1rem; }
+  </style>
+</head>
+<body>
+  <h1>Acme Store</h1>
+  <div class="products">
+    <div class="product">
+      <h2>Wireless Keyboard</h2>
+      <p>Mechanical, RGB backlit</p>
+      <span class="price">$79</span>
+      <br/>
+      <button onclick="addToCart('Wireless Keyboard', 79)">Add to Cart</button>
+    </div>
+    <div class="product">
+      <h2>USB-C Hub</h2>
+      <p>7-port, 100W passthrough</p>
+      <span class="price">$45</span>
+      <br/>
+      <button onclick="addToCart('USB-C Hub', 45)">Add to Cart</button>
+    </div>
+    <div class="product">
+      <h2>Monitor Stand</h2>
+      <p>Adjustable, aluminum</p>
+      <span class="price">$120</span>
+      <br/>
+      <button onclick="addToCart('Monitor Stand', 120)">Add to Cart</button>
+    </div>
+  </div>
+  <div class="cart">
+    <h2>Cart</h2>
+    <ul id="cart-items"><li class="cart-empty">Your cart is empty</li></ul>
+    <p id="cart-total" class="cart-total"></p>
+    <button class="checkout-btn" id="checkout-btn" onclick="checkout()" disabled>Complete Purchase</button>
+  </div>
+  <p id="success" class="success" role="alert">Order confirmed! Thank you for your purchase.</p>
+  <script>
+    const cart = [];
+    function addToCart(name, price) {
+      cart.push({ name, price });
+      renderCart();
+    }
+    function renderCart() {
+      const list = document.getElementById('cart-items');
+      const total = document.getElementById('cart-total');
+      const btn = document.getElementById('checkout-btn');
+      if (cart.length === 0) {
+        list.innerHTML = '<li class="cart-empty">Your cart is empty</li>';
+        total.textContent = '';
+        btn.disabled = true;
+        return;
+      }
+      list.innerHTML = cart.map(item => '<li><span>' + item.name + '</span><span>$' + item.price + '</span></li>').join('');
+      const sum = cart.reduce((s, i) => s + i.price, 0);
+      total.textContent = 'Total: $' + sum;
+      btn.disabled = false;
+    }
+    function checkout() {
+      document.getElementById('success').style.display = 'block';
+      document.getElementById('checkout-btn').disabled = true;
+      document.getElementById('checkout-btn').textContent = 'Purchased';
+      document.title = 'Order Confirmed — Acme Store';
+    }
+  </script>
+</body>
+</html>

package/demo/financial-dashboard.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Trading Platform — Risk Monitor</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0a0e17; color: #e2e8f0; min-height: 100vh; padding: 1.5rem; }
+    h1 { font-size: 1.4rem; margin-bottom: 0.3rem; }
+    .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 1.5rem; }
+    .risk-banner { padding: 0.6rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-weight: 600; }
+    .risk-low { background: #14532d; border: 1px solid #22c55e; color: #86efac; }
+    .risk-medium { background: #78350f; border: 1px solid #f59e0b; color: #fde68a; }
+    .risk-high { background: #7f1d1d; border: 1px solid #ef4444; color: #fca5a5; }
+    .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
+    .metric { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1rem; }
+    .metric-label { color: #64748b; font-size: 0.8rem; margin-bottom: 0.3rem; }
+    .metric-value { font-size: 1.6rem; font-weight: 700; }
+    .metric-value.positive { color: #34d399; }
+    .metric-value.negative { color: #f87171; }
+    .metric-value.neutral { color: #3b82f6; }
+    .positions { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.2rem; margin-bottom: 1.5rem; }
+    .positions h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
+    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
+    th { text-align: left; padding: 0.5rem; color: #64748b; border-bottom: 1px solid #1e293b; }
+    td { padding: 0.5rem; border-bottom: 1px solid #0f172a; }
+    .pnl-positive { color: #34d399; }
+    .pnl-negative { color: #f87171; }
+    .trade-actions { display: flex; gap: 1rem; margin-top: 1rem; }
+    .trade-btn { padding: 0.6rem 1.2rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 0.9rem; }
+    .btn-buy { background: #14532d; color: #86efac; }
+    .btn-sell { background: #7f1d1d; color: #fca5a5; }
+    .btn-liquidate { background: #991b1b; color: white; }
+    .compliance { background: #111827; border: 1px solid #1e293b; border-radius: 12px; padding: 1.2rem; }
+    .compliance h2 { font-size: 1.1rem; margin-bottom: 0.8rem; }
+    .check-item { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #0f172a; }
+    .check-pass { color: #34d399; }
+    .check-fail { color: #f87171; }
+    .check-warn { color: #fbbf24; }
+  </style>
+</head>
+<body>
+  <h1>Risk Monitor</h1>
+  <p class="subtitle">Live · Last update: 2 seconds ago · Market: NYSE · Session: Pre-market</p>
+
+  <div id="risk-banner" class="risk-banner risk-medium" role="alert">
+    RISK LEVEL: MEDIUM — Portfolio exposure approaching limit (82% of max)
+  </div>
+
+  <div class="metrics">
+    <div class="metric">
+      <div class="metric-label">Portfolio Value</div>
+      <div class="metric-value neutral">$4.2M</div>
+    </div>
+    <div class="metric">
+      <div class="metric-label">Day P&L</div>
+      <div class="metric-value positive">+$127,430</div>
+    </div>
+    <div class="metric">
+      <div class="metric-label">Open Positions</div>
+      <div class="metric-value neutral">14</div>
+    </div>
+    <div class="metric">
+      <div class="metric-label">Margin Used</div>
+      <div class="metric-value negative">82%</div>
+    </div>
+  </div>
+
+  <div class="positions">
+    <h2>Open Positions</h2>
+    <table>
+      <thead>
+        <tr><th>Symbol</th><th>Qty</th><th>Avg Cost</th><th>Current</th><th>P&L</th><th>Risk</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>AAPL</td><td>5,000</td><td>$178.42</td><td>$182.15</td><td class="pnl-positive">+$18,650</td><td>Low</td></tr>
+        <tr><td>TSLA</td><td>2,000</td><td>$245.80</td><td>$238.20</td><td class="pnl-negative">-$15,200</td><td>Medium</td></tr>
+        <tr><td>NVDA</td><td>1,500</td><td>$890.00</td><td>$912.50</td><td class="pnl-positive">+$33,750</td><td>Low</td></tr>
+        <tr><td>GME</td><td>10,000</td><td>$28.40</td><td>$24.15</td><td class="pnl-negative">-$42,500</td><td>High</td></tr>
+      </tbody>
+    </table>
+    <div class="trade-actions">
+      <button class="trade-btn btn-buy" id="buy-btn">Buy</button>
+      <button class="trade-btn btn-sell" id="sell-btn">Sell Position</button>
+      <button class="trade-btn btn-liquidate" id="liquidate-btn">Liquidate All</button>
+    </div>
+  </div>
+
+  <div class="compliance">
+    <h2>Compliance Checks</h2>
+    <div class="check-item"><span>Position concentration limit (< 25%)</span><span class="check-pass">PASS</span></div>
+    <div class="check-item"><span>Margin requirement (< 85%)</span><span class="check-warn">WARNING — 82%</span></div>
+    <div class="check-item"><span>Daily loss limit (< $100K)</span><span class="check-pass">PASS</span></div>
+    <div class="check-item"><span>Restricted securities check</span><span class="check-pass">CLEAR</span></div>
+    <div class="check-item"><span>Pre-trade risk approval</span><span class="check-fail">REQUIRED for trades > $500K</span></div>
+  </div>
+</body>
+</html>

package/demo/form-validation.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Contact Form</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+    .container { width: 400px; }
+    h1 { font-size: 1.8rem; margin-bottom: 1.2rem; }
+    form { display: flex; flex-direction: column; gap: 0.8rem; }
+    label { font-size: 0.9rem; color: #94a3b8; }
+    input, textarea, select { padding: 0.7rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 1rem; font-family: inherit; }
+    input::placeholder, textarea::placeholder { color: #64748b; }
+    input.invalid, textarea.invalid, select.invalid { border-color: #f87171; }
+    .field-error { color: #f87171; font-size: 0.8rem; display: none; }
+    .field-error.visible { display: block; }
+    textarea { resize: vertical; min-height: 80px; }
+    button { padding: 0.75rem; border-radius: 8px; border: none; background: #3b82f6; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; }
+    button:hover { background: #2563eb; }
+    button:disabled { background: #475569; cursor: not-allowed; }
+    .success { display: none; text-align: center; }
+    .success h2 { color: #34d399; margin-bottom: 0.5rem; }
+    .success p { color: #94a3b8; }
+    .char-count { font-size: 0.8rem; color: #64748b; text-align: right; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div id="form-container">
+      <h1>Contact Us</h1>
+      <form id="contact-form" onsubmit="return false;">
+        <div>
+          <label for="name">Full Name</label>
+          <input id="name" placeholder="Jane Doe" aria-label="Full name" />
+          <p id="name-error" class="field-error" role="alert">Name is required</p>
+        </div>
+        <div>
+          <label for="contact-email">Email</label>
+          <input id="contact-email" type="email" placeholder="jane@example.com" aria-label="Email" />
+          <p id="email-error" class="field-error" role="alert">Please enter a valid email</p>
+        </div>
+        <div>
+          <label for="subject">Subject</label>
+          <select id="subject" aria-label="Subject">
+            <option value="">Select a topic...</option>
+            <option value="general">General inquiry</option>
+            <option value="support">Technical support</option>
+            <option value="partnership">Partnership</option>
+            <option value="licensing">Licensing</option>
+          </select>
+          <p id="subject-error" class="field-error" role="alert">Please select a subject</p>
+        </div>
+        <div>
+          <label for="message">Message</label>
+          <textarea id="message" placeholder="Tell us what's on your mind..." aria-label="Message"></textarea>
+          <p class="char-count"><span id="char-count">0</span>/500</p>
+          <p id="message-error" class="field-error" role="alert">Message must be at least 10 characters</p>
+        </div>
+        <button type="button" id="submit-btn">Send Message</button>
+      </form>
+    </div>
+    <div id="success" class="success">
+      <h2>Message Sent!</h2>
+      <p>Thanks for reaching out. We'll get back to you within 24 hours.</p>
+    </div>
+  </div>
+  <script>
+    var messageEl = document.getElementById('message');
+    var charCount = document.getElementById('char-count');
+    messageEl.addEventListener('input', function() {
+      charCount.textContent = messageEl.value.length;
+    });
+
+    document.getElementById('submit-btn').addEventListener('click', function() {
+      var name = document.getElementById('name');
+      var email = document.getElementById('contact-email');
+      var subject = document.getElementById('subject');
+      var message = document.getElementById('message');
+      var valid = true;
+
+      // Reset
+      [name, email, subject, message].forEach(function(el) { el.classList.remove('invalid'); });
+      document.querySelectorAll('.field-error').forEach(function(el) { el.classList.remove('visible'); });
+
+      if (!name.value.trim()) {
+        name.classList.add('invalid');
+        document.getElementById('name-error').classList.add('visible');
+        valid = false;
+      }
+      if (!email.value.trim() || !email.value.includes('@')) {
+        email.classList.add('invalid');
+        document.getElementById('email-error').classList.add('visible');
+        valid = false;
+      }
+      if (!subject.value) {
+        subject.classList.add('invalid');
+        document.getElementById('subject-error').classList.add('visible');
+        valid = false;
+      }
+      if (message.value.trim().length < 10) {
+        message.classList.add('invalid');
+        document.getElementById('message-error').classList.add('visible');
+        valid = false;
+      }
+      if (valid) {
+        document.getElementById('form-container').style.display = 'none';
+        document.getElementById('success').style.display = 'block';
+        document.title = 'Message Sent — Contact';
+      }
+    });
+  </script>
+</body>
+</html>

package/demo/signup-form.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Acme Dashboard</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+    .container { width: 360px; }
+    h1 { font-size: 1.8rem; margin-bottom: 1.2rem; }
+    form { display: flex; flex-direction: column; gap: 0.8rem; }
+    input { padding: 0.7rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 1rem; }
+    input::placeholder { color: #64748b; }
+    button { padding: 0.75rem; border-radius: 8px; border: none; background: #3b82f6; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; }
+    button:hover { background: #2563eb; }
+    .error { color: #f87171; font-size: 0.9rem; display: none; }
+    .error.visible { display: block; }
+    #dashboard { display: none; }
+    #dashboard h1 { color: #34d399; }
+    #dashboard ul { list-style: none; margin-top: 1rem; }
+    #dashboard li { padding: 0.5rem 0; border-bottom: 1px solid #1e293b; }
+    #dashboard button { background: #ef4444; margin-top: 1rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div id="login">
+      <h1>Sign In</h1>
+      <div id="error" class="error" role="alert">Please fill in all fields</div>
+      <form onsubmit="return false;">
+        <input id="email" type="email" placeholder="Email" aria-label="Email" />
+        <input id="password" type="password" placeholder="Password" aria-label="Password" />
+        <button type="button" id="signin-btn">Sign In</button>
+      </form>
+    </div>
+    <div id="dashboard">
+      <h1>Welcome back!</h1>
+      <p id="user-greeting"></p>
+      <ul id="tasks">
+        <li>Deploy v2.1</li>
+        <li>Review PR #42</li>
+        <li>Update docs</li>
+      </ul>
+      <button type="button" id="logout-btn">Sign Out</button>
+    </div>
+  </div>
+  <script>
+    document.getElementById('signin-btn').addEventListener('click', function() {
+      var email = document.getElementById('email').value;
+      var password = document.getElementById('password').value;
+      var error = document.getElementById('error');
+      if (!email || !password) {
+        error.classList.add('visible');
+        return;
+      }
+      error.classList.remove('visible');
+      document.getElementById('login').style.display = 'none';
+      document.getElementById('dashboard').style.display = 'block';
+      document.getElementById('user-greeting').textContent = 'Logged in as ' + email;
+      document.title = 'Dashboard — Acme';
+    });
+    document.getElementById('logout-btn').addEventListener('click', function() {
+      document.getElementById('login').style.display = 'block';
+      document.getElementById('dashboard').style.display = 'none';
+      document.getElementById('email').value = '';
+      document.getElementById('password').value = '';
+      document.title = 'Acme Dashboard';
+    });
+  </script>
+</body>
+</html>

package/demo/spa-loading.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>SPA Dashboard</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+    .container { width: 480px; }
+    h1 { font-size: 1.8rem; margin-bottom: 1rem; }
+    .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #334155; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 0.5rem; vertical-align: middle; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    .loading { color: #94a3b8; margin-bottom: 1rem; }
+    .card { border: 1px solid #334155; border-radius: 12px; padding: 1.2rem; background: #1e293b; margin-bottom: 0.8rem; }
+    .card h3 { margin-bottom: 0.4rem; }
+    .card p { color: #94a3b8; font-size: 0.9rem; }
+    .stats { display: flex; gap: 1rem; margin-top: 1rem; }
+    .stat { text-align: center; }
+    .stat-value { font-size: 2rem; font-weight: 700; color: #3b82f6; }
+    .stat-label { font-size: 0.8rem; color: #64748b; }
+    #content { display: none; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Analytics Dashboard</h1>
+    <div id="loading" class="loading" aria-busy="true">
+      <span class="spinner"></span>Loading dashboard data...
+    </div>
+    <div id="content">
+      <div class="stats">
+        <div class="stat">
+          <div class="stat-value">1,247</div>
+          <div class="stat-label">Users</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">89%</div>
+          <div class="stat-label">Uptime</div>
+        </div>
+        <div class="stat">
+          <div class="stat-value">3.2s</div>
+          <div class="stat-label">Avg Response</div>
+        </div>
+      </div>
+      <div class="card">
+        <h3>Recent Activity</h3>
+        <p>12 deployments this week. Last deploy: 2 hours ago.</p>
+      </div>
+      <div class="card">
+        <h3>Alerts</h3>
+        <p>No active alerts. All systems operational.</p>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Simulate async data loading — 2 second delay
+    setTimeout(function() {
+      document.getElementById('loading').style.display = 'none';
+      document.getElementById('loading').setAttribute('aria-busy', 'false');
+      document.getElementById('content').style.display = 'block';
+      document.title = 'Analytics Dashboard — Loaded';
+    }, 2000);
+  </script>
+</body>
+</html>

package/demo/todo-app.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Todo App</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+    .container { width: 400px; }
+    h1 { font-size: 1.8rem; margin-bottom: 1.2rem; }
+    .add-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+    input { flex: 1; padding: 0.7rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 1rem; }
+    input::placeholder { color: #64748b; }
+    button { padding: 0.7rem 1.2rem; border-radius: 8px; border: none; background: #3b82f6; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; }
+    button:hover { background: #2563eb; }
+    ul { list-style: none; }
+    li { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #1e293b; }
+    .delete-btn { background: #ef4444; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
+    .count { color: #94a3b8; font-size: 0.9rem; margin-top: 0.8rem; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Todo List</h1>
+    <div class="add-row">
+      <input id="todo-input" placeholder="Add a task..." aria-label="New task" />
+      <button type="button" onclick="addTodo()">Add</button>
+    </div>
+    <ul id="todo-list"></ul>
+    <p id="count" class="count"></p>
+  </div>
+  <script>
+    function updateCount() {
+      const items = document.querySelectorAll('#todo-list li');
+      document.getElementById('count').textContent = items.length + ' item' + (items.length !== 1 ? 's' : '');
+    }
+    function addTodo() {
+      const input = document.getElementById('todo-input');
+      const text = input.value.trim();
+      if (!text) return;
+      const li = document.createElement('li');
+      li.innerHTML = '<span>' + text + '</span><button class="delete-btn" onclick="this.parentElement.remove(); updateCount()">Delete</button>';
+      document.getElementById('todo-list').appendChild(li);
+      input.value = '';
+      updateCount();
+    }
+    document.getElementById('todo-input').addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') addTodo();
+    });
+  </script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitronai/alethia",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "MIT-licensed MCP bridge to the Alethia desktop runtime — the patent-pending zero-IPC E2E test runtime built for AI agents. 45x faster than Playwright on the localhost loop. Local-first, zero telemetry by default. Auto-installs the signed headless runtime on first use.",
   "type": "module",
   "main": "dist/index.js",
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist",
+    "demo",
     "LICENSE",
     "README.md"
   ],