feat(page): add page widget extensibility system

app/page/page-widgets.js

···
+/**
+ * Page Widget Host API
+ *
+ * Manages extension-provided widgets in the page host window. Extensions
+ * communicate via pubsub to register, render, update, and close widgets.
+ * The host publishes lifecycle events so extensions can react to page
+ * navigation and loading.
+ *
+ * Integration: imported by page.js, which calls init() with the webview
+ * element and pubsub api reference.
+ *
+ * Pubsub topics (extension -> host):
+ *   widget:register   - Register a widget type
+ *   widget:render     - Populate a widget with content
+ *   widget:update     - Update an existing widget
+ *   widget:close      - Remove a widget
+ *   page:execute-script - Request script execution in page webview
+ *
+ * Pubsub topics (host -> extension):
+ *   page:loaded       - Page finished loading (already exists in page.js)
+ *   page:navigated    - In-page navigation occurred
+ *   page:will-close   - Page window is about to close
+ *   page:script-result - Result of script execution
+ *   widget:registered  - Confirmation of widget registration
+ */
+
+/**
+ * @typedef {Object} WidgetRegistration
+ * @property {string} extensionId - The registering extension's ID
+ * @property {string} widgetId - Unique widget identifier
+ * @property {string} [title] - Widget title
+ * @property {string} [position='right'] - 'right' | 'left' | 'bottom'
+ * @property {number} [width] - Preferred width in px
+ * @property {number} [maxHeight] - Maximum height in px
+ */
+
+/**
+ * @typedef {Object} PageWidgetHost
+ * @property {function} init - Initialize the widget host
+ * @property {function} destroy - Tear down subscriptions and widgets
+ * @property {function} getWidgets - Get all registered widgets
+ * @property {function} publishNavigated - Publish navigation event
+ * @property {function} publishWillClose - Publish will-close event
+ */
+
+/**
+ * Create a page widget host instance.
+ *
+ * Pure factory function — no global state. All state is local to the
+ * returned object, making it testable without DOM.
+ *
+ * @param {object} deps - Dependencies injected by page.js
+ * @param {object} deps.api - The pubsub/IPC API (window.app)
+ * @param {HTMLElement} deps.webview - The <webview> element
+ * @param {HTMLElement} deps.widgetContainer - Container for right-side widgets
+ * @param {function} deps.addWidget - page.js addWidget(id, opts)
+ * @param {function} deps.updateWidget - page.js updateWidget(id, opts)
+ * @param {function} deps.removeWidget - page.js removeWidget(id)
+ * @returns {PageWidgetHost}
+ */
+export function createPageWidgetHost(deps) {
+  const { api, webview, widgetContainer, addWidget, updateWidget, removeWidget } = deps;
+
+  /** @type {Map<string, WidgetRegistration>} */
+  const registrations = new Map();
+
+  /** @type {Map<string, object>} widget handles from addWidget */
+  const activeWidgets = new Map();
+
+  /** @type {Array<function>} unsubscribe callbacks */
+  const unsubs = [];
+
+  /** @type {Map<string, {resolve: function, reject: function}>} pending script requests */
+  const pendingScripts = new Map();
+
+  const DEBUG = false;
+
+  // --- Subscription helpers ---
+
+  function subscribe(topic, handler) {
+    const unsub = api.subscribe(topic, handler, api.scopes.GLOBAL);
+    unsubs.push(unsub);
+    return unsub;
+  }
+
+  // --- Widget registration ---
+
+  function handleRegister(msg) {
+    if (!msg || !msg.extensionId || !msg.widgetId) {
+      DEBUG && console.log('[page-widgets] Invalid register message:', msg);
+      return;
+    }
+
+    const key = `${msg.extensionId}:${msg.widgetId}`;
+    const registration = {
+      extensionId: msg.extensionId,
+      widgetId: msg.widgetId,
+      title: msg.title || msg.widgetId,
+      position: msg.position || 'right',
+      width: msg.width || undefined,
+      maxHeight: msg.maxHeight || undefined,
+    };
+
+    registrations.set(key, registration);
+
+    DEBUG && console.log('[page-widgets] Registered widget:', key, registration);
+
+    api.publish('widget:registered', {
+      extensionId: msg.extensionId,
+      widgetId: msg.widgetId,
+      success: true,
+    }, api.scopes.GLOBAL);
+  }
+
+  // --- Widget rendering ---
+
+  function handleRender(msg) {
+    if (!msg || !msg.extensionId || !msg.widgetId) {
+      DEBUG && console.log('[page-widgets] Invalid render message:', msg);
+      return;
+    }
+
+    const key = `${msg.extensionId}:${msg.widgetId}`;
+    const registration = registrations.get(key);
+    if (!registration) {
+      console.warn('[page-widgets] Cannot render unregistered widget:', key);
+      return;
+    }
+
+    // Remove existing widget if re-rendering
+    if (activeWidgets.has(key)) {
+      removeWidget(key);
+      activeWidgets.delete(key);
+    }
+
+    const handle = addWidget(key, {
+      title: msg.title || registration.title,
+      content: msg.html || msg.content || '',
+      autoDismiss: msg.autoDismiss || 0,
+      onClose: () => {
+        activeWidgets.delete(key);
+        api.publish('widget:closed', {
+          extensionId: msg.extensionId,
+          widgetId: msg.widgetId,
+        }, api.scopes.GLOBAL);
+      },
+    });
+
+    if (handle) {
+      activeWidgets.set(key, handle);
+      DEBUG && console.log('[page-widgets] Rendered widget:', key);
+    }
+  }
+
+  // --- Widget update ---
+
+  function handleUpdate(msg) {
+    if (!msg || !msg.extensionId || !msg.widgetId) return;
+
+    const key = `${msg.extensionId}:${msg.widgetId}`;
+    if (!activeWidgets.has(key)) {
+      DEBUG && console.log('[page-widgets] Cannot update inactive widget:', key);
+      return;
+    }
+
+    updateWidget(key, {
+      title: msg.title,
+      content: msg.html || msg.content,
+    });
+
+    DEBUG && console.log('[page-widgets] Updated widget:', key);
+  }
+
+  // --- Widget close ---
+
+  function handleClose(msg) {
+    if (!msg || !msg.extensionId || !msg.widgetId) return;
+
+    const key = `${msg.extensionId}:${msg.widgetId}`;
+    if (activeWidgets.has(key)) {
+      removeWidget(key);
+      activeWidgets.delete(key);
+      DEBUG && console.log('[page-widgets] Closed widget:', key);
+    }
+  }
+
+  // --- Content script execution ---
+
+  function handleExecuteScript(msg) {
+    if (!msg || !msg.extensionId || !msg.requestId || !msg.script) {
+      DEBUG && console.log('[page-widgets] Invalid execute-script message:', msg);
+      return;
+    }
+
+    if (!webview) {
+      api.publish('page:script-result', {
+        requestId: msg.requestId,
+        extensionId: msg.extensionId,
+        error: 'No webview available',
+      }, api.scopes.GLOBAL);
+      return;
+    }
+
+    // Execute the script in the webview and publish the result
+    webview.executeJavaScript(msg.script)
+      .then((result) => {
+        api.publish('page:script-result', {
+          requestId: msg.requestId,
+          extensionId: msg.extensionId,
+          result,
+          success: true,
+        }, api.scopes.GLOBAL);
+      })
+      .catch((err) => {
+        api.publish('page:script-result', {
+          requestId: msg.requestId,
+          extensionId: msg.extensionId,
+          error: err.message || String(err),
+          success: false,
+        }, api.scopes.GLOBAL);
+      });
+  }
+
+  // --- Lifecycle event publishers ---
+
+  function publishNavigated(url, title) {
+    api.publish('page:navigated', { url, title }, api.scopes.GLOBAL);
+  }
+
+  function publishWillClose(url) {
+    api.publish('page:will-close', { url }, api.scopes.GLOBAL);
+  }
+
+  // --- Init / Destroy ---
+
+  function init() {
+    subscribe('widget:register', handleRegister);
+    subscribe('widget:render', handleRender);
+    subscribe('widget:update', handleUpdate);
+    subscribe('widget:close', handleClose);
+    subscribe('page:execute-script', handleExecuteScript);
+
+    DEBUG && console.log('[page-widgets] Initialized');
+  }
+
+  function destroy() {
+    // Publish will-close before tearing down
+    try {
+      const url = webview?.getURL?.();
+      if (url) publishWillClose(url);
+    } catch {
+      // webview may not be ready
+    }
+
+    // Remove all active widgets
+    for (const key of activeWidgets.keys()) {
+      removeWidget(key);
+    }
+    activeWidgets.clear();
+    registrations.clear();
+
+    // Clear pending script requests
+    for (const [, pending] of pendingScripts) {
+      pending.reject(new Error('Widget host destroyed'));
+    }
+    pendingScripts.clear();
+
+    // Unsubscribe all
+    for (const unsub of unsubs) {
+      if (typeof unsub === 'function') unsub();
+    }
+    unsubs.length = 0;
+
+    DEBUG && console.log('[page-widgets] Destroyed');
+  }
+
+  function getWidgets() {
+    return new Map(registrations);
+  }
+
+  function getActiveWidgets() {
+    return new Map(activeWidgets);
+  }
+
+  return {
+    init,
+    destroy,
+    getWidgets,
+    getActiveWidgets,
+    publishNavigated,
+    publishWillClose,
+    // Exposed for testing
+    _handleRegister: handleRegister,
+    _handleRender: handleRender,
+    _handleUpdate: handleUpdate,
+    _handleClose: handleClose,
+    _handleExecuteScript: handleExecuteScript,
+  };
+}

app/page/page.js

···
  */
 
 import api from '../api.js';
+import { createPageWidgetHost } from './page-widgets.js';
 
 console.log('[page] Script loaded');
 
···
   DEBUG && console.log('[page] Widget updated:', id);
 }
 
+// --- Page Widget Host (extension-provided widgets via pubsub) ---
+
+const pageWidgetHost = createPageWidgetHost({
+  api,
+  webview,
+  widgetContainer,
+  addWidget,
+  updateWidget,
+  removeWidget,
+});
+pageWidgetHost.init();
+
+// Publish page:navigated on in-page navigation
+webview.addEventListener('did-navigate', (e) => {
+  const title = document.title || '';
+  pageWidgetHost.publishNavigated(e.url, title);
+});
+
+// Publish page:will-close when window is closing
+window.addEventListener('beforeunload', () => {
+  pageWidgetHost.destroy();
+});
+
+// Expose for testing
+if (typeof window !== 'undefined') {
+  window.__pageWidgetHost = pageWidgetHost;
+}
+
 // --- OpenSearch discovery widget ---
 
 api.subscribe('websearch:engine-discovered', (msg) => {
···
 webview.addEventListener('did-finish-load', () => {
   setTimeout(extractSimpleEntities, 2000);
 });
+
+// --- Page Command Handlers (pubsub) ---
+// Commands from the cmd palette publish page:cmd:request, we handle them here
+// by running executeJavaScript on the webview and publishing the result back.
+
+api.subscribe('page:cmd:request', async (msg) => {
+  if (!msg || !msg.requestId || !msg.action) return;
+
+  // Only respond if we are the focused page window
+  if (msg.windowId != null && msg.windowId !== myWindowId) return;
+
+  const { requestId, action } = msg;
+
+  const respond = (data, error) => {
+    api.publish('page:cmd:response', {
+      requestId,
+      data: data || null,
+      error: error || null
+    }, api.scopes.GLOBAL);
+  };
+
+  try {
+    switch (action) {
+      case 'list-images': {
+        const images = await webview.executeJavaScript(`
+          (function() {
+            var results = [];
+            var seen = new Set();
+            var imgs = document.querySelectorAll('img[src]');
+            for (var i = 0; i < imgs.length; i++) {
+              var img = imgs[i];
+              var src = img.src;
+              if (!src || seen.has(src)) continue;
+              seen.add(src);
+              var alt = (img.alt || '').trim();
+              var w = img.naturalWidth || img.width || 0;
+              var h = img.naturalHeight || img.height || 0;
+              results.push({
+                src: src,
+                alt: alt,
+                width: w,
+                height: h,
+                title: alt || src.split('/').pop().split('?')[0]
+              });
+            }
+            // Also check CSS background images on visible elements
+            var els = document.querySelectorAll('[style*="background-image"]');
+            for (var j = 0; j < Math.min(els.length, 50); j++) {
+              var style = window.getComputedStyle(els[j]);
+              var bg = style.backgroundImage;
+              if (bg && bg !== 'none') {
+                var match = bg.match(/url\\(["']?([^"')]+)["']?\\)/);
+                if (match && match[1] && !seen.has(match[1])) {
+                  seen.add(match[1]);
+                  results.push({
+                    src: match[1],
+                    alt: 'Background image',
+                    width: 0,
+                    height: 0,
+                    title: match[1].split('/').pop().split('?')[0]
+                  });
+                }
+              }
+            }
+            return results;
+          })();
+        `);
+        respond(images);
+        break;
+      }
+
+      case 'list-feeds': {
+        const feeds = await webview.executeJavaScript(`
+          (function() {
+            var results = [];
+            var feedLinks = document.querySelectorAll(
+              'link[type="application/rss+xml"], ' +
+              'link[type="application/atom+xml"], ' +
+              'link[type="application/feed+json"], ' +
+              'link[rel="alternate"][type*="xml"]'
+            );
+            for (var i = 0; i < feedLinks.length; i++) {
+              var link = feedLinks[i];
+              results.push({
+                url: link.href,
+                title: link.title || link.type || 'Feed',
+                type: link.type || 'unknown'
+              });
+            }
+            // Also look for common feed URL patterns in <a> tags
+            var anchors = document.querySelectorAll('a[href]');
+            var feedPatterns = ['/feed', '/rss', '/atom', '.rss', '.xml', '/feeds/'];
+            var seen = new Set(results.map(function(r) { return r.url; }));
+            for (var j = 0; j < anchors.length; j++) {
+              var href = anchors[j].href;
+              if (!href || seen.has(href)) continue;
+              var lower = href.toLowerCase();
+              for (var k = 0; k < feedPatterns.length; k++) {
+                if (lower.includes(feedPatterns[k])) {
+                  seen.add(href);
+                  results.push({
+                    url: href,
+                    title: anchors[j].textContent.trim().slice(0, 60) || 'Feed link',
+                    type: 'link'
+                  });
+                  break;
+                }
+              }
+            }
+            return results;
+          })();
+        `);
+        respond(feeds);
+        break;
+      }
+
+      case 'list-links': {
+        const links = await webview.executeJavaScript(`
+          (function() {
+            var results = [];
+            var seen = new Set();
+            var anchors = document.querySelectorAll('a[href]');
+            var pageHost = window.location.hostname;
+            for (var i = 0; i < anchors.length; i++) {
+              var a = anchors[i];
+              var href = a.href;
+              if (!href || !href.startsWith('http') || seen.has(href)) continue;
+              seen.add(href);
+              var text = (a.textContent || '').trim().slice(0, 100);
+              if (!text || text.length < 2) continue;
+              var isExternal = false;
+              try { isExternal = new URL(href).hostname !== pageHost; } catch(e) {}
+              results.push({
+                url: href,
+                text: text,
+                title: text,
+                external: isExternal
+              });
+            }
+            return results;
+          })();
+        `);
+        respond(links);
+        break;
+      }
+
+      case 'list-entities': {
+        // Return cached entities if available, otherwise do live extraction
+        if (currentPageEntities && currentPageEntities.length > 0) {
+          respond(currentPageEntities);
+        } else {
+          // Do a quick extraction
+          const entities = await webview.executeJavaScript(`
+            (function() {
+              var entities = [];
+              var seen = new Set();
+
+              // Emails from mailto links
+              var mailLinks = document.querySelectorAll('a[href^="mailto:"]');
+              for (var i = 0; i < mailLinks.length; i++) {
+                var email = mailLinks[i].href.replace('mailto:', '').split('?')[0];
+                if (email && !seen.has(email)) {
+                  seen.add(email);
+                  entities.push({ name: email, type: 'email' });
+                }
+              }
+
+              // Emails from text content (regex)
+              var textContent = document.body ? document.body.innerText : '';
+              var emailRegex = /[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}/g;
+              var emailMatches = textContent.match(emailRegex) || [];
+              for (var j = 0; j < emailMatches.length; j++) {
+                if (!seen.has(emailMatches[j])) {
+                  seen.add(emailMatches[j]);
+                  entities.push({ name: emailMatches[j], type: 'email' });
+                }
+              }
+
+              // Phone numbers from tel links
+              var telLinks = document.querySelectorAll('a[href^="tel:"]');
+              for (var k = 0; k < telLinks.length; k++) {
+                var phone = telLinks[k].href.replace('tel:', '');
+                if (phone && !seen.has(phone)) {
+                  seen.add(phone);
+                  entities.push({ name: phone, type: 'phone' });
+                }
+              }
+
+              // External domains as organizations
+              var links = document.querySelectorAll('a[href]');
+              var domainCounts = {};
+              for (var l = 0; l < Math.min(links.length, 500); l++) {
+                try {
+                  var host = new URL(links[l].href).hostname;
+                  if (host === window.location.hostname) continue;
+                  if (!domainCounts[host]) domainCounts[host] = 0;
+                  domainCounts[host]++;
+                } catch(e) {}
+              }
+              // Only include domains referenced multiple times (likely organizations)
+              Object.keys(domainCounts).forEach(function(domain) {
+                if (domainCounts[domain] >= 2 && !seen.has(domain)) {
+                  seen.add(domain);
+                  entities.push({ name: domain, type: 'organization' });
+                }
+              });
+
+              return entities.slice(0, 100);
+            })();
+          `);
+          respond(entities);
+        }
+        break;
+      }
+
+      case 'view-reader': {
+        // Toggle reader mode by injecting/removing a simplified view
+        const result = await webview.executeJavaScript(`
+          (function() {
+            // Check if already in reader mode
+            if (document.getElementById('__peek_reader_mode')) {
+              // Exit reader mode: restore original content
+              var overlay = document.getElementById('__peek_reader_mode');
+              overlay.remove();
+              document.body.style.overflow = '';
+              return { active: false, message: 'Reader mode off' };
+            }
+
+            // Enter reader mode: extract readable content
+            var title = document.title || '';
+            var article = document.querySelector('article') ||
+                          document.querySelector('[role="main"]') ||
+                          document.querySelector('main') ||
+                          document.querySelector('.post-content') ||
+                          document.querySelector('.article-content') ||
+                          document.querySelector('.entry-content');
+
+            var content = '';
+            if (article) {
+              content = article.innerHTML;
+            } else {
+              // Fallback: use body but strip nav, header, footer, aside, script, style
+              var clone = document.body.cloneNode(true);
+              var remove = clone.querySelectorAll('nav, header, footer, aside, script, style, .nav, .header, .footer, .sidebar, .menu, .ad, .advertisement, [role="navigation"], [role="banner"], [role="complementary"]');
+              for (var i = 0; i < remove.length; i++) {
+                remove[i].remove();
+              }
+              content = clone.innerHTML;
+            }
+
+            var overlay = document.createElement('div');
+            overlay.id = '__peek_reader_mode';
+            overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;background:#fff;color:#222;overflow-y:auto;padding:40px;font-family:Georgia,serif;font-size:18px;line-height:1.6;';
+            overlay.innerHTML =
+              '<div style="max-width:700px;margin:0 auto;">' +
+                '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #ddd;">' +
+                  '<span style="color:#888;font-size:14px;font-family:system-ui,sans-serif;">Reader Mode</span>' +
+                  '<button id="__peek_reader_close" style="background:none;border:1px solid #ccc;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:13px;font-family:system-ui,sans-serif;">Exit</button>' +
+                '</div>' +
+                '<h1 style="font-size:28px;line-height:1.3;margin-bottom:20px;">' + title.replace(/</g, '&lt;') + '</h1>' +
+                content +
+              '</div>';
+
+            document.body.appendChild(overlay);
+            document.body.style.overflow = 'hidden';
+
+            // Wire up close button
+            document.getElementById('__peek_reader_close').addEventListener('click', function() {
+              overlay.remove();
+              document.body.style.overflow = '';
+            });
+
+            return { active: true, message: 'Reader mode on' };
+          })();
+        `);
+        respond(result);
+        break;
+      }
+
+      case 'view-source': {
+        const source = await webview.executeJavaScript(`
+          (function() {
+            return {
+              html: document.documentElement.outerHTML,
+              title: document.title || window.location.href
+            };
+          })();
+        `);
+        respond(source);
+        break;
+      }
+
+      default:
+        respond(null, 'Unknown page command action: ' + action);
+    }
+  } catch (err) {
+    console.error('[page] page:cmd:request error:', err);
+    respond(null, err.message || 'Failed to execute page command');
+  }
+}, api.scopes.GLOBAL);
 
 DEBUG && console.log('[page] Minimal page host initialized for:', targetUrl);

docs/page-widgets.md

···
+# Page Widget Extensibility API
+
+Extensions can hook into the page host lifecycle, execute content scripts in the page webview, and display widgets alongside the page content.
+
+## Architecture
+
+```
+Extension (background.js)          Page Host (page.js)
+  |                                   |
+  |-- widget:register ------------->  | stores registration
+  |<-- widget:registered ----------  | confirms
+  |                                   |
+  |<-- page:loaded ----------------  | page finishes loading
+  |                                   |
+  |-- page:execute-script --------->  | runs in webview
+  |<-- page:script-result ---------  | returns result
+  |                                   |
+  |-- widget:render --------------->  | creates widget DOM
+  |-- widget:update --------------->  | updates widget content
+  |-- widget:close ---------------->  | removes widget
+  |                                   |
+  |<-- page:navigated -------------  | in-page navigation
+  |<-- page:will-close ------------  | window closing
+```
+
+All communication uses the pubsub system (`window.app.publish` / `window.app.subscribe`) with `GLOBAL` scope.
+
+## Pubsub Topics
+
+### Extension to Page Host
+
+#### `widget:register`
+
+Register a widget type. Must be called before `widget:render`.
+
+```js
+api.publish('widget:register', {
+  extensionId: 'my-extension',  // Required: your extension ID
+  widgetId: 'my-widget',        // Required: unique widget ID within your extension
+  title: 'My Widget',           // Optional: display title (defaults to widgetId)
+  position: 'right',            // Optional: 'right' (default). Reserved: 'left', 'bottom'
+}, api.scopes.GLOBAL);
+```
+
+Response: `widget:registered` is published with `{ extensionId, widgetId, success: true }`.
+
+#### `widget:render`
+
+Populate a registered widget with content. If the widget is already rendered, it is replaced.
+
+```js
+api.publish('widget:render', {
+  extensionId: 'my-extension',
+  widgetId: 'my-widget',
+  title: 'Updated Title',       // Optional: overrides registration title
+  html: '<p>Widget content</p>',// HTML string for the widget body
+  autoDismiss: 0,               // Optional: auto-close after N ms (0 = never)
+}, api.scopes.GLOBAL);
+```
+
+#### `widget:update`
+
+Update an already-rendered widget's content or title without replacing the DOM element.
+
+```js
+api.publish('widget:update', {
+  extensionId: 'my-extension',
+  widgetId: 'my-widget',
+  html: '<p>New content</p>',   // Optional: new body content
+  title: 'New Title',           // Optional: new title
+}, api.scopes.GLOBAL);
+```
+
+#### `widget:close`
+
+Remove a widget from the page.
+
+```js
+api.publish('widget:close', {
+  extensionId: 'my-extension',
+  widgetId: 'my-widget',
+}, api.scopes.GLOBAL);
+```
+
+#### `page:execute-script`
+
+Execute JavaScript in the page's webview. Results are returned via `page:script-result`.
+
+```js
+api.publish('page:execute-script', {
+  extensionId: 'my-extension',
+  requestId: 'unique-request-id', // Required: correlate with response
+  script: 'document.title',       // Required: JS code to execute
+}, api.scopes.GLOBAL);
+```
+
+### Page Host to Extension
+
+#### `page:loaded`
+
+Published when a page finishes loading. Already existed before this API.
+
+```js
+api.subscribe('page:loaded', (msg) => {
+  // msg.url - the loaded page URL
+  // msg.title - the page title
+  // msg.opensearchUrl - OpenSearch URL if detected
+}, api.scopes.GLOBAL);
+```
+
+#### `page:navigated`
+
+Published on in-page navigation (did-navigate).
+
+```js
+api.subscribe('page:navigated', (msg) => {
+  // msg.url - the new URL
+  // msg.title - the page title
+}, api.scopes.GLOBAL);
+```
+
+#### `page:will-close`
+
+Published when the page window is about to close.
+
+```js
+api.subscribe('page:will-close', (msg) => {
+  // msg.url - the current page URL
+}, api.scopes.GLOBAL);
+```
+
+#### `page:script-result`
+
+Response to a `page:execute-script` request.
+
+```js
+api.subscribe('page:script-result', (msg) => {
+  if (msg.requestId !== myRequestId) return; // correlate
+  if (msg.success) {
+    console.log('Result:', msg.result);
+  } else {
+    console.error('Error:', msg.error);
+  }
+}, api.scopes.GLOBAL);
+```
+
+#### `widget:registered`
+
+Confirmation after `widget:register`.
+
+#### `widget:closed`
+
+Published when a widget is closed (by user clicking X, or via `widget:close`).
+
+## Content Script Execution Pattern
+
+The request/response pattern uses `requestId` for correlation:
+
+```js
+function executeScript(script, timeout = 5000) {
+  return new Promise((resolve, reject) => {
+    const requestId = `${extensionId}-${Date.now()}-${Math.random()}`;
+    let timer, unsub;
+
+    unsub = api.subscribe('page:script-result', (msg) => {
+      if (msg.requestId !== requestId) return;
+      clearTimeout(timer);
+      unsub();
+      msg.success ? resolve(msg.result) : reject(new Error(msg.error));
+    }, api.scopes.GLOBAL);
+
+    timer = setTimeout(() => { unsub(); reject(new Error('Timeout')); }, timeout);
+
+    api.publish('page:execute-script', {
+      extensionId, requestId, script
+    }, api.scopes.GLOBAL);
+  });
+}
+```
+
+## Widget Positioning
+
+Widgets are placed in the widget container to the right of the page webview. They stack vertically with an 8px gap. Each widget has:
+
+- A header with title and close button
+- A body that accepts HTML content
+- Max width of 280px, min width of 200px
+- Glass-morphism background with backdrop blur
+
+Widgets share the navbar show/hide lifecycle -- they are part of the page chrome.
+
+## Sample Extension
+
+See `extensions/pagewidgets-sample/` for a complete working example that:
+
+1. Registers a "Page Summary" widget on startup
+2. Listens for `page:loaded` events
+3. Executes a content script to extract page metadata (title, description, headings, word count, link count)
+4. Renders the metadata in its widget
+5. Updates on navigation, cleans up on page close
+
+## Testing
+
+### Unit tests
+
+```bash
+node --test tests/unit/page-widgets.test.js
+```
+
+Tests the `createPageWidgetHost` factory function with mock dependencies. Covers registration, rendering, update, close, content script execution, and lifecycle events.
+
+### Playwright tests
+
+```bash
+BACKEND=electron yarn test:electron tests/desktop/page-widgets.spec.ts
+```
+
+End-to-end tests that open real page windows and verify widget registration, rendering, update, close, and content script execution through the full pubsub pipeline.

extensions/cmd/commands/index.js

···
 import editModule from './edit.js';
 import urlModule from './url.js';
 import historyModule from './history.js';
+import pageModule from './page.js';
 
 // Chaining commands - for command composition pipelines
 import listsCommand from './lists.js';
···
   ...editModule.commands,
   ...urlModule.commands,
   ...historyModule.commands,
+  ...pageModule.commands,
 
   // Chaining commands
   listsCommand

extensions/cmd/commands/page.js

···
+/**
+ * Page commands - interact with web page content in the focused page window
+ *
+ * Two command verbs:
+ *   list <type>  — enumerate page content (images, feeds, links, entities)
+ *   view <mode>  — change how the page is displayed (reader, source, devtools)
+ *
+ * These commands communicate with page.js via pubsub:
+ *   1. Command publishes page:cmd:request with a requestId and action
+ *   2. page.js receives it, runs executeJavaScript on the webview
+ *   3. page.js publishes page:cmd:response with the requestId and result
+ *
+ * Commands are restricted to 'page' mode via the modes property.
+ */
+import api from 'peek://app/api.js';
+
+let requestCounter = 0;
+
+/**
+ * Send a request to the focused page window and wait for a response.
+ * @param {string} action - The action to perform (e.g., 'list-images')
+ * @param {Object} params - Additional parameters
+ * @param {number} timeout - Timeout in ms (default 10s)
+ * @returns {Promise<Object>} The response data
+ */
+function pageRequest(action, params = {}, timeout = 10000) {
+  return new Promise((resolve, reject) => {
+    const requestId = `page-cmd-${++requestCounter}-${Date.now()}`;
+    let settled = false;
+
+    const unsubscribe = api.subscribe('page:cmd:response', (msg) => {
+      if (msg.requestId !== requestId) return;
+      if (settled) return;
+      settled = true;
+      unsubscribe?.();
+      if (msg.error) {
+        reject(new Error(msg.error));
+      } else {
+        resolve(msg.data);
+      }
+    }, api.scopes.GLOBAL);
+
+    api.publish('page:cmd:request', {
+      requestId,
+      action,
+      ...params
+    }, api.scopes.GLOBAL);
+
+    setTimeout(() => {
+      if (settled) return;
+      settled = true;
+      unsubscribe?.();
+      reject(new Error('No page window responded. Is a web page open?'));
+    }, timeout);
+  });
+}
+
+// --- List command ---
+
+const LIST_TYPES = [
+  { value: 'images', title: 'images', subtitle: 'Extract all images from the page' },
+  { value: 'feeds', title: 'feeds', subtitle: 'Find RSS/Atom feeds linked from the page' },
+  { value: 'links', title: 'links', subtitle: 'Extract all links from the page' },
+  { value: 'entities', title: 'entities', subtitle: 'List detected entities (people, orgs, places, emails, phones)' },
+];
+
+const listCommand = {
+  name: 'list',
+  description: 'List page content by type',
+  modes: ['page'],
+  produces: ['application/json'],
+  params: [{
+    type: 'enum',
+    options: LIST_TYPES
+  }],
+
+  async execute(ctx) {
+    const subcommand = (ctx.params && ctx.params[0]) || (ctx.search || '').trim();
+
+    if (!subcommand) {
+      return {
+        success: false,
+        message: 'Specify what to list: images, feeds, links, or entities'
+      };
+    }
+
+    const type = subcommand.toLowerCase();
+
+    try {
+      const data = await pageRequest(`list-${type}`);
+
+      if (!data || (Array.isArray(data) && data.length === 0)) {
+        return {
+          success: true,
+          message: `No ${type} found on this page`
+        };
+      }
+
+      return {
+        success: true,
+        output: {
+          data,
+          mimeType: 'application/json',
+          title: `${Array.isArray(data) ? data.length : 0} ${type} found`
+        }
+      };
+    } catch (err) {
+      return {
+        success: false,
+        message: err.message
+      };
+    }
+  }
+};
+
+// --- View command ---
+
+const VIEW_TYPES = [
+  { value: 'reader', title: 'reader', subtitle: 'Toggle reader mode (strip to readable content)' },
+  { value: 'source', title: 'source', subtitle: 'Show page source' },
+  { value: 'devtools', title: 'devtools', subtitle: 'Open DevTools for the page' },
+];
+
+const viewCommand = {
+  name: 'view',
+  description: 'Change page display mode',
+  modes: ['page'],
+  params: [{
+    type: 'enum',
+    options: VIEW_TYPES
+  }],
+
+  async execute(ctx) {
+    const subcommand = (ctx.params && ctx.params[0]) || (ctx.search || '').trim();
+
+    if (!subcommand) {
+      return {
+        success: false,
+        message: 'Specify a view mode: reader, source, or devtools'
+      };
+    }
+
+    const mode = subcommand.toLowerCase();
+
+    if (mode === 'devtools') {
+      // DevTools is handled via IPC directly, not via page.js
+      try {
+        const result = await api.invoke('window-devtools', {});
+        if (result && result.success) {
+          return { success: true, message: 'DevTools opened' };
+        } else {
+          return { success: false, message: result?.error || 'Failed to open DevTools' };
+        }
+      } catch (err) {
+        return { success: false, message: err.message };
+      }
+    }
+
+    try {
+      const data = await pageRequest(`view-${mode}`);
+      if (mode === 'source' && data) {
+        return {
+          success: true,
+          output: {
+            data: data.html || data,
+            mimeType: 'text/html',
+            title: `Source: ${data.title || 'page'}`
+          }
+        };
+      }
+      return {
+        success: true,
+        message: data?.message || `View mode changed to ${mode}`
+      };
+    } catch (err) {
+      return {
+        success: false,
+        message: err.message
+      };
+    }
+  }
+};
+
+const commands = [listCommand, viewCommand];
+
+export default { commands };

extensions/cmd/completers.js

···
 export function completeEnum(partial, exclude, paramDef) {
   const prefix = paramDef.prefix || '';
   const lowerPartial = (partial || '').toLowerCase();
+  const options = paramDef.options || [];
   const values = paramDef.values || [];
 
   const matchText = lowerPartial.startsWith(prefix.toLowerCase())
     ? lowerPartial.slice(prefix.length)
     : lowerPartial;
+
+  // Support both rich options [{value, title, subtitle}] and plain string values
+  if (options.length > 0) {
+    return options
+      .filter(opt => {
+        const val = typeof opt === 'string' ? opt : opt.value;
+        if (exclude.has(val.toLowerCase())) return false;
+        if (matchText && !val.toLowerCase().startsWith(matchText)) return false;
+        return true;
+      })
+      .map(opt => {
+        if (typeof opt === 'string') {
+          return { title: prefix + opt, subtitle: '', value: prefix + opt };
+        }
+        return {
+          title: prefix + (opt.title || opt.value),
+          subtitle: opt.subtitle || '',
+          value: prefix + opt.value
+        };
+      });
+  }
 
   return values
     .filter(val => {

extensions/pagewidgets-sample/background.html

···
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
+  <title>Page Widgets Sample Extension</title>
+</head>
+<body>
+<script type="module">
+  import extension from './background.js';
+
+  const api = window.app;
+  const extId = extension.id;
+
+  console.log(`[ext:${extId}] background.html loaded`);
+
+  // Signal ready to main process
+  api.publish('ext:ready', {
+    id: extId,
+    manifest: {
+      id: extension.id,
+      labels: extension.labels,
+      version: '1.0.0'
+    }
+  }, api.scopes.SYSTEM);
+
+  // Initialize extension
+  if (extension.init) {
+    console.log(`[ext:${extId}] calling init()`);
+    extension.init();
+  }
+
+  // Handle shutdown request from main process
+  api.subscribe('app:shutdown', () => {
+    console.log(`[ext:${extId}] received shutdown`);
+    if (extension.uninit) {
+      extension.uninit();
+    }
+  }, api.scopes.SYSTEM);
+
+  // Handle extension-specific shutdown
+  api.subscribe(`ext:${extId}:shutdown`, () => {
+    console.log(`[ext:${extId}] received extension shutdown`);
+    if (extension.uninit) {
+      extension.uninit();
+    }
+  }, api.scopes.SYSTEM);
+</script>
+</body>
+</html>

extensions/pagewidgets-sample/background.js

···
+/**
+ * Page Widgets Sample Extension
+ *
+ * Demonstrates the page widget extensibility API:
+ * 1. Registers a widget on startup
+ * 2. Listens for page:loaded events
+ * 3. Runs a content script to extract metadata from the page
+ * 4. Renders the extracted metadata in its widget
+ *
+ * This is a reference implementation for extension developers.
+ */
+
+const api = window.app;
+const debug = api.debug;
+
+const EXTENSION_ID = 'pagewidgets-sample';
+const WIDGET_ID = 'page-meta';
+
+let requestCounter = 0;
+
+/**
+ * Generate a unique request ID for script execution correlation
+ */
+function nextRequestId() {
+  return `${EXTENSION_ID}-${++requestCounter}-${Date.now()}`;
+}
+
+/**
+ * Execute a content script in the current page and wait for the result.
+ *
+ * Uses the page:execute-script / page:script-result pubsub pattern
+ * with requestId correlation.
+ *
+ * @param {string} script - JavaScript code to execute in the page webview
+ * @param {number} [timeout=5000] - Timeout in ms
+ * @returns {Promise<any>} - The script result
+ */
+function executeContentScript(script, timeout = 5000) {
+  return new Promise((resolve, reject) => {
+    const requestId = nextRequestId();
+    let timer = null;
+    let unsub = null;
+
+    function cleanup() {
+      if (timer) clearTimeout(timer);
+      if (unsub) unsub();
+    }
+
+    // Listen for the result
+    unsub = api.subscribe('page:script-result', (msg) => {
+      if (msg.requestId !== requestId) return;
+      cleanup();
+
+      if (msg.success) {
+        resolve(msg.result);
+      } else {
+        reject(new Error(msg.error || 'Script execution failed'));
+      }
+    }, api.scopes.GLOBAL);
+
+    // Set timeout
+    timer = setTimeout(() => {
+      cleanup();
+      reject(new Error('Content script execution timed out'));
+    }, timeout);
+
+    // Request execution
+    api.publish('page:execute-script', {
+      extensionId: EXTENSION_ID,
+      requestId,
+      script,
+    }, api.scopes.GLOBAL);
+  });
+}
+
+/**
+ * Content script that extracts page metadata.
+ * Runs inside the page's webview context.
+ */
+const METADATA_EXTRACTION_SCRIPT = `
+(function() {
+  function getMeta(name) {
+    var el = document.querySelector('meta[property="' + name + '"], meta[name="' + name + '"]');
+    return el ? (el.getAttribute('content') || '').trim() : '';
+  }
+
+  var headings = [];
+  var h1s = document.querySelectorAll('h1');
+  for (var i = 0; i < Math.min(h1s.length, 5); i++) {
+    var text = h1s[i].textContent.trim();
+    if (text) headings.push(text);
+  }
+
+  var linkCount = document.querySelectorAll('a[href]').length;
+  var imageCount = document.querySelectorAll('img').length;
+  var formCount = document.querySelectorAll('form').length;
+  var scriptCount = document.querySelectorAll('script').length;
+
+  var wordCount = 0;
+  try {
+    var text = document.body.innerText || '';
+    wordCount = text.split(/\\s+/).filter(function(w) { return w.length > 0; }).length;
+  } catch(e) {}
+
+  return {
+    title: document.title || '',
+    description: getMeta('description') || getMeta('og:description') || '',
+    author: getMeta('author') || '',
+    headings: headings,
+    stats: {
+      links: linkCount,
+      images: imageCount,
+      forms: formCount,
+      scripts: scriptCount,
+      words: wordCount
+    }
+  };
+})();
+`;
+
+/**
+ * Build HTML content for the widget from extracted metadata
+ */
+function buildWidgetHtml(meta) {
+  const parts = [];
+
+  if (meta.description) {
+    parts.push(`<div style="margin-bottom:8px;font-size:12px;color:var(--theme-text-secondary,#aaa);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${escapeHtml(meta.description)}</div>`);
+  }
+
+  if (meta.headings && meta.headings.length > 0) {
+    const headingList = meta.headings
+      .map(h => `<div style="font-size:12px;color:var(--theme-text,#e0e0e0);padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${escapeHtml(h)}</div>`)
+      .join('');
+    parts.push(`<div style="margin-bottom:8px;"><div style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--theme-text-muted,#777);margin-bottom:4px;">Headings</div>${headingList}</div>`);
+  }
+
+  if (meta.stats) {
+    const s = meta.stats;
+    const statItems = [];
+    if (s.words > 0) statItems.push(`${s.words.toLocaleString()} words`);
+    if (s.links > 0) statItems.push(`${s.links} links`);
+    if (s.images > 0) statItems.push(`${s.images} images`);
+    if (s.forms > 0) statItems.push(`${s.forms} forms`);
+
+    if (statItems.length > 0) {
+      parts.push(`<div style="font-size:11px;color:var(--theme-text-muted,#888);line-height:1.5;">${statItems.join(' &middot; ')}</div>`);
+    }
+  }
+
+  if (meta.author) {
+    parts.push(`<div style="font-size:11px;color:var(--theme-text-muted,#888);margin-top:4px;">By ${escapeHtml(meta.author)}</div>`);
+  }
+
+  if (parts.length === 0) {
+    parts.push('<div style="font-size:12px;color:var(--theme-text-muted,#666);font-style:italic;">No metadata available</div>');
+  }
+
+  return parts.join('');
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * Handle page:loaded — extract metadata and render widget
+ */
+async function onPageLoaded(msg) {
+  if (!msg || !msg.url) return;
+
+  debug && console.log('[ext:pagewidgets-sample] Page loaded:', msg.url);
+
+  try {
+    const meta = await executeContentScript(METADATA_EXTRACTION_SCRIPT);
+    const html = buildWidgetHtml(meta);
+
+    api.publish('widget:render', {
+      extensionId: EXTENSION_ID,
+      widgetId: WIDGET_ID,
+      title: 'Page Summary',
+      html,
+    }, api.scopes.GLOBAL);
+
+    debug && console.log('[ext:pagewidgets-sample] Widget rendered for:', msg.url);
+  } catch (err) {
+    console.warn('[ext:pagewidgets-sample] Failed to extract metadata:', err.message);
+
+    api.publish('widget:render', {
+      extensionId: EXTENSION_ID,
+      widgetId: WIDGET_ID,
+      title: 'Page Summary',
+      html: '<div style="font-size:12px;color:var(--theme-text-muted,#666);font-style:italic;">Could not extract page metadata</div>',
+    }, api.scopes.GLOBAL);
+  }
+}
+
+/**
+ * Handle page:navigated — re-extract for new page
+ */
+function onPageNavigated(msg) {
+  if (!msg || !msg.url) return;
+  debug && console.log('[ext:pagewidgets-sample] Page navigated:', msg.url);
+  // Re-extract after a brief delay for the new page to settle
+  setTimeout(() => onPageLoaded(msg), 500);
+}
+
+/**
+ * Handle page:will-close — clean up widget
+ */
+function onPageWillClose() {
+  api.publish('widget:close', {
+    extensionId: EXTENSION_ID,
+    widgetId: WIDGET_ID,
+  }, api.scopes.GLOBAL);
+}
+
+// ===== Lifecycle =====
+
+const init = async () => {
+  console.log('[ext:pagewidgets-sample] init');
+
+  // Step 1: Register our widget
+  api.publish('widget:register', {
+    extensionId: EXTENSION_ID,
+    widgetId: WIDGET_ID,
+    title: 'Page Summary',
+    position: 'right',
+  }, api.scopes.GLOBAL);
+
+  // Step 2: Listen for page lifecycle events
+  api.subscribe('page:loaded', onPageLoaded, api.scopes.GLOBAL);
+  api.subscribe('page:navigated', onPageNavigated, api.scopes.GLOBAL);
+  api.subscribe('page:will-close', onPageWillClose, api.scopes.GLOBAL);
+
+  console.log('[ext:pagewidgets-sample] Initialized — listening for page events');
+};
+
+const uninit = () => {
+  console.log('[ext:pagewidgets-sample] uninit');
+  onPageWillClose();
+};
+
+export default {
+  id: EXTENSION_ID,
+  labels: {
+    name: 'Page Widgets Sample',
+    description: 'Sample extension demonstrating the page widget extensibility API'
+  },
+  init,
+  uninit
+};

extensions/pagewidgets-sample/manifest.json

···
+{
+  "id": "pagewidgets-sample",
+  "shortname": "pagewidgets-sample",
+  "name": "Page Widgets Sample",
+  "description": "Sample extension demonstrating the page widget extensibility API",
+  "version": "1.0.0",
+  "background": "background.html",
+  "builtin": true
+}

tests/desktop/page-widgets.spec.ts

···
+/**
+ * Page Widget Extensibility Tests
+ *
+ * Tests the page widget host API that lets extensions:
+ * - Register widgets via pubsub
+ * - Execute content scripts in the page webview
+ * - Render, update, and close widgets
+ * - React to page lifecycle events
+ *
+ * Run with:
+ *   BACKEND=electron yarn test:electron
+ */
+
+import { test, expect, DesktopApp, getSharedApp, closeSharedApp } from '../fixtures/desktop-app';
+import { Page } from '@playwright/test';
+import { waitForExtensionsReady } from '../helpers/window-utils';
+
+// Shared app instance
+let sharedApp: DesktopApp;
+let sharedBgWindow: Page;
+
+test.beforeAll(async () => {
+  sharedApp = await getSharedApp();
+  sharedBgWindow = await sharedApp.getBackgroundWindow();
+  await waitForExtensionsReady(sharedBgWindow);
+});
+
+test.afterAll(async () => {
+  await closeSharedApp();
+});
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+async function openCanvasPage(
+  bgWindow: Page,
+  url: string
+): Promise<{ pageWindow: Page; windowId: number }> {
+  const result = await bgWindow.evaluate(async (targetUrl: string) => {
+    return await (window as any).app.window.open(targetUrl, {
+      width: 800,
+      height: 600,
+    });
+  }, url);
+  expect(result.success).toBe(true);
+  const windowId = result.id;
+
+  const pageWindow = await sharedApp.getWindow('page/index.html', 15000);
+  expect(pageWindow).toBeTruthy();
+
+  return { pageWindow, windowId };
+}
+
+async function waitForPageLoaded(pageWindow: Page, timeout = 30000): Promise<void> {
+  await pageWindow.waitForFunction(
+    () => {
+      const webview = document.getElementById('content');
+      return webview && webview.classList.contains('loaded');
+    },
+    undefined,
+    { timeout }
+  );
+}
+
+async function waitForWidgetHost(pageWindow: Page, timeout = 10000): Promise<void> {
+  await pageWindow.waitForFunction(
+    () => (window as any).__pageWidgetHost != null,
+    undefined,
+    { timeout }
+  );
+}
+
+async function closeWindow(bgWindow: Page, windowId: number): Promise<void> {
+  await bgWindow.evaluate(async (id: number) => {
+    return await (window as any).app.window.close(id);
+  }, windowId);
+}
+
+// ============================================================================
+// Page Widget Host Tests
+// ============================================================================
+
+test.describe('Page Widgets @desktop', () => {
+  test('widget host is initialized on page load', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    const hasHost = await pageWindow.evaluate(() => {
+      return (window as any).__pageWidgetHost != null;
+    });
+    expect(hasHost).toBe(true);
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+
+  test('widget:register creates a widget registration', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    // Register a widget via pubsub from the page window
+    await pageWindow.evaluate(() => {
+      const api = (window as any).app;
+      api.publish('widget:register', {
+        extensionId: 'test-ext',
+        widgetId: 'test-widget',
+        title: 'Test Widget',
+        position: 'right',
+      }, api.scopes.GLOBAL);
+    });
+
+    // Verify registration
+    const widgetCount = await pageWindow.evaluate(() => {
+      return (window as any).__pageWidgetHost.getWidgets().size;
+    });
+    expect(widgetCount).toBeGreaterThanOrEqual(1);
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+
+  test('widget:render displays a widget in the page', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    // Register and render a widget
+    await pageWindow.evaluate(() => {
+      const api = (window as any).app;
+      api.publish('widget:register', {
+        extensionId: 'test-ext',
+        widgetId: 'render-test',
+        title: 'Render Test',
+      }, api.scopes.GLOBAL);
+
+      api.publish('widget:render', {
+        extensionId: 'test-ext',
+        widgetId: 'render-test',
+        title: 'Rendered Widget',
+        html: '<p class="test-content">Widget content here</p>',
+      }, api.scopes.GLOBAL);
+    });
+
+    // Verify widget DOM was created
+    const widgetExists = await pageWindow.waitForFunction(
+      () => {
+        const container = document.getElementById('widget-container');
+        if (!container) return false;
+        const widget = container.querySelector('[data-widget-id="test-ext:render-test"]');
+        return widget !== null;
+      },
+      undefined,
+      { timeout: 5000 }
+    );
+    expect(widgetExists).toBeTruthy();
+
+    // Verify widget content
+    const content = await pageWindow.evaluate(() => {
+      const widget = document.querySelector('[data-widget-id="test-ext:render-test"]');
+      const body = widget?.querySelector('.widget-body');
+      return body?.innerHTML || '';
+    });
+    expect(content).toContain('Widget content here');
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+
+  test('widget:update modifies existing widget content', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    // Register, render, then update
+    await pageWindow.evaluate(() => {
+      const api = (window as any).app;
+      api.publish('widget:register', {
+        extensionId: 'test-ext',
+        widgetId: 'update-test',
+      }, api.scopes.GLOBAL);
+
+      api.publish('widget:render', {
+        extensionId: 'test-ext',
+        widgetId: 'update-test',
+        html: '<p>Original</p>',
+      }, api.scopes.GLOBAL);
+    });
+
+    // Wait for initial render
+    await pageWindow.waitForFunction(
+      () => document.querySelector('[data-widget-id="test-ext:update-test"]') !== null,
+      undefined,
+      { timeout: 5000 }
+    );
+
+    // Update the widget
+    await pageWindow.evaluate(() => {
+      const api = (window as any).app;
+      api.publish('widget:update', {
+        extensionId: 'test-ext',
+        widgetId: 'update-test',
+        html: '<p>Updated content</p>',
+        title: 'New Title',
+      }, api.scopes.GLOBAL);
+    });
+
+    // Verify update
+    const updatedContent = await pageWindow.evaluate(() => {
+      const widget = document.querySelector('[data-widget-id="test-ext:update-test"]');
+      const body = widget?.querySelector('.widget-body');
+      return body?.innerHTML || '';
+    });
+    expect(updatedContent).toContain('Updated content');
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+
+  test('widget:close removes widget from DOM', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    // Register and render
+    await pageWindow.evaluate(() => {
+      const api = (window as any).app;
+      api.publish('widget:register', {
+        extensionId: 'test-ext',
+        widgetId: 'close-test',
+      }, api.scopes.GLOBAL);
+
+      api.publish('widget:render', {
+        extensionId: 'test-ext',
+        widgetId: 'close-test',
+        html: '<p>To be closed</p>',
+      }, api.scopes.GLOBAL);
+    });
+
+    // Wait for render
+    await pageWindow.waitForFunction(
+      () => document.querySelector('[data-widget-id="test-ext:close-test"]') !== null,
+      undefined,
+      { timeout: 5000 }
+    );
+
+    // Close the widget
+    await pageWindow.evaluate(() => {
+      const api = (window as any).app;
+      api.publish('widget:close', {
+        extensionId: 'test-ext',
+        widgetId: 'close-test',
+      }, api.scopes.GLOBAL);
+    });
+
+    // Wait for removal (animation takes 300ms)
+    await pageWindow.waitForFunction(
+      () => {
+        const host = (window as any).__pageWidgetHost;
+        return host && host.getActiveWidgets().size === 0;
+      },
+      undefined,
+      { timeout: 5000 }
+    );
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+
+  test('page:execute-script runs code in webview and returns result', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    // Execute a script and capture result via pubsub
+    const result = await pageWindow.evaluate(() => {
+      return new Promise((resolve, reject) => {
+        const api = (window as any).app;
+        const requestId = 'test-script-' + Date.now();
+        let timer: ReturnType<typeof setTimeout>;
+
+        const unsub = api.subscribe('page:script-result', (msg: any) => {
+          if (msg.requestId !== requestId) return;
+          clearTimeout(timer);
+          unsub();
+          resolve(msg);
+        }, api.scopes.GLOBAL);
+
+        timer = setTimeout(() => {
+          unsub();
+          reject(new Error('Timed out waiting for script result'));
+        }, 10000);
+
+        api.publish('page:execute-script', {
+          extensionId: 'test-ext',
+          requestId,
+          script: 'document.title',
+        }, api.scopes.GLOBAL);
+      });
+    });
+
+    expect((result as any).success).toBe(true);
+    expect(typeof (result as any).result).toBe('string');
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+
+  test('page:execute-script returns error for invalid script', async () => {
+    const { pageWindow, windowId } = await openCanvasPage(
+      sharedBgWindow,
+      'https://example.com'
+    );
+
+    await waitForPageLoaded(pageWindow);
+    await waitForWidgetHost(pageWindow);
+
+    const result = await pageWindow.evaluate(() => {
+      return new Promise((resolve, reject) => {
+        const api = (window as any).app;
+        const requestId = 'test-error-' + Date.now();
+        let timer: ReturnType<typeof setTimeout>;
+
+        const unsub = api.subscribe('page:script-result', (msg: any) => {
+          if (msg.requestId !== requestId) return;
+          clearTimeout(timer);
+          unsub();
+          resolve(msg);
+        }, api.scopes.GLOBAL);
+
+        timer = setTimeout(() => {
+          unsub();
+          reject(new Error('Timed out'));
+        }, 10000);
+
+        api.publish('page:execute-script', {
+          extensionId: 'test-ext',
+          requestId,
+          script: 'throw new Error("intentional test error")',
+        }, api.scopes.GLOBAL);
+      });
+    });
+
+    expect((result as any).success).toBe(false);
+    expect((result as any).error).toBeTruthy();
+
+    await closeWindow(sharedBgWindow, windowId);
+  });
+});

tests/unit/page-widgets.test.js

···
+/**
+ * Unit tests for the page widget host module.
+ *
+ * Tests the widget registration, rendering, update, close, content script
+ * execution, and lifecycle event publishing without requiring DOM or IPC.
+ *
+ * Run via: node --test tests/unit/page-widgets.test.js
+ */
+import { describe, it, beforeEach } from 'node:test';
+import { strict as assert } from 'node:assert';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const modulePath = join(__dirname, '..', '..', 'app', 'page', 'page-widgets.js');
+
+const { createPageWidgetHost } = await import(modulePath);
+
+// --- Mock factories ---
+
+function createMockApi() {
+  const subscriptions = new Map();
+  const published = [];
+
+  return {
+    scopes: { GLOBAL: 'GLOBAL' },
+
+    subscribe(topic, handler, scope) {
+      if (!subscriptions.has(topic)) subscriptions.set(topic, []);
+      subscriptions.get(topic).push(handler);
+      // Return unsubscribe function
+      return () => {
+        const handlers = subscriptions.get(topic);
+        if (handlers) {
+          const idx = handlers.indexOf(handler);
+          if (idx >= 0) handlers.splice(idx, 1);
+        }
+      };
+    },
+
+    publish(topic, data, scope) {
+      published.push({ topic, data, scope });
+      // Also trigger local subscribers for testing
+      const handlers = subscriptions.get(topic);
+      if (handlers) {
+        for (const h of handlers) h(data);
+      }
+    },
+
+    // Test helpers
+    _published: published,
+    _subscriptions: subscriptions,
+
+    getPublished(topic) {
+      return published.filter(p => p.topic === topic);
+    },
+
+    clearPublished() {
+      published.length = 0;
+    },
+  };
+}
+
+function createMockWebview() {
+  let scriptResult = null;
+  let scriptError = null;
+  let currentUrl = 'https://example.com';
+
+  return {
+    executeJavaScript(script) {
+      if (scriptError) return Promise.reject(new Error(scriptError));
+      return Promise.resolve(scriptResult);
+    },
+    getURL() {
+      return currentUrl;
+    },
+    // Test helpers
+    _setScriptResult(result) { scriptResult = result; scriptError = null; },
+    _setScriptError(err) { scriptError = err; scriptResult = null; },
+    _setUrl(url) { currentUrl = url; },
+  };
+}
+
+function createMockWidgetFns() {
+  const added = [];
+  const updated = [];
+  const removed = [];
+
+  return {
+    addWidget(id, opts) {
+      const handle = { id, ...opts, element: {}, body: {}, timers: [], close: () => {} };
+      added.push({ id, opts });
+      return handle;
+    },
+    updateWidget(id, opts) {
+      updated.push({ id, opts });
+    },
+    removeWidget(id) {
+      removed.push(id);
+    },
+    _added: added,
+    _updated: updated,
+    _removed: removed,
+  };
+}
+
+function createHost(overrides = {}) {
+  const api = createMockApi();
+  const webview = createMockWebview();
+  const widgetFns = createMockWidgetFns();
+
+  const host = createPageWidgetHost({
+    api,
+    webview,
+    widgetContainer: {},
+    addWidget: widgetFns.addWidget,
+    updateWidget: widgetFns.updateWidget,
+    removeWidget: widgetFns.removeWidget,
+    ...overrides,
+  });
+
+  return { host, api, webview, widgetFns };
+}
+
+// --- Tests ---
+
+describe('createPageWidgetHost', () => {
+  describe('init and destroy', () => {
+    it('subscribes to pubsub topics on init', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      assert.ok(api._subscriptions.has('widget:register'));
+      assert.ok(api._subscriptions.has('widget:render'));
+      assert.ok(api._subscriptions.has('widget:update'));
+      assert.ok(api._subscriptions.has('widget:close'));
+      assert.ok(api._subscriptions.has('page:execute-script'));
+    });
+
+    it('unsubscribes and cleans up on destroy', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      // Register a widget
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      assert.equal(host.getWidgets().size, 1);
+
+      host.destroy();
+      assert.equal(host.getWidgets().size, 0);
+    });
+
+    it('publishes page:will-close on destroy', () => {
+      const { host, api, webview } = createHost();
+      host.init();
+      webview._setUrl('https://example.com/test');
+
+      host.destroy();
+
+      const willCloseMessages = api.getPublished('page:will-close');
+      assert.equal(willCloseMessages.length, 1);
+      assert.equal(willCloseMessages[0].data.url, 'https://example.com/test');
+    });
+  });
+
+  describe('widget registration', () => {
+    it('registers a widget with valid data', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      host._handleRegister({
+        extensionId: 'myext',
+        widgetId: 'mywidget',
+        title: 'My Widget',
+        position: 'right',
+      });
+
+      const widgets = host.getWidgets();
+      assert.equal(widgets.size, 1);
+      assert.ok(widgets.has('myext:mywidget'));
+
+      const reg = widgets.get('myext:mywidget');
+      assert.equal(reg.extensionId, 'myext');
+      assert.equal(reg.widgetId, 'mywidget');
+      assert.equal(reg.title, 'My Widget');
+      assert.equal(reg.position, 'right');
+    });
+
+    it('publishes widget:registered confirmation', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+
+      const confirms = api.getPublished('widget:registered');
+      assert.equal(confirms.length, 1);
+      assert.equal(confirms[0].data.extensionId, 'ext1');
+      assert.equal(confirms[0].data.widgetId, 'w1');
+      assert.equal(confirms[0].data.success, true);
+    });
+
+    it('defaults position to right and title to widgetId', () => {
+      const { host } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+
+      const reg = host.getWidgets().get('ext1:w1');
+      assert.equal(reg.position, 'right');
+      assert.equal(reg.title, 'w1');
+    });
+
+    it('rejects registration with missing extensionId', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      host._handleRegister({ widgetId: 'w1' });
+
+      assert.equal(host.getWidgets().size, 0);
+      assert.equal(api.getPublished('widget:registered').length, 0);
+    });
+
+    it('rejects registration with missing widgetId', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1' });
+
+      assert.equal(host.getWidgets().size, 0);
+    });
+
+    it('rejects null message', () => {
+      const { host } = createHost();
+      host.init();
+
+      host._handleRegister(null);
+      host._handleRegister(undefined);
+
+      assert.equal(host.getWidgets().size, 0);
+    });
+
+    it('allows multiple widgets from same extension', () => {
+      const { host } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w2' });
+
+      assert.equal(host.getWidgets().size, 2);
+    });
+
+    it('allows same widget ID from different extensions', () => {
+      const { host } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRegister({ extensionId: 'ext2', widgetId: 'w1' });
+
+      assert.equal(host.getWidgets().size, 2);
+    });
+  });
+
+  describe('widget rendering', () => {
+    it('renders a registered widget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1', title: 'Test' });
+      host._handleRender({
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        html: '<p>Hello</p>',
+      });
+
+      assert.equal(widgetFns._added.length, 1);
+      assert.equal(widgetFns._added[0].id, 'ext1:w1');
+      assert.equal(widgetFns._added[0].opts.content, '<p>Hello</p>');
+      assert.equal(widgetFns._added[0].opts.title, 'Test');
+    });
+
+    it('uses msg.title over registration title', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1', title: 'Original' });
+      host._handleRender({
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        title: 'Updated Title',
+        html: '<p>Content</p>',
+      });
+
+      assert.equal(widgetFns._added[0].opts.title, 'Updated Title');
+    });
+
+    it('rejects render for unregistered widget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRender({
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        html: '<p>Hello</p>',
+      });
+
+      assert.equal(widgetFns._added.length, 0);
+    });
+
+    it('removes existing widget before re-rendering', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRender({ extensionId: 'ext1', widgetId: 'w1', html: '<p>V1</p>' });
+      host._handleRender({ extensionId: 'ext1', widgetId: 'w1', html: '<p>V2</p>' });
+
+      assert.equal(widgetFns._added.length, 2);
+      assert.equal(widgetFns._removed.length, 1);
+      assert.equal(widgetFns._removed[0], 'ext1:w1');
+    });
+
+    it('publishes widget:closed when onClose callback fires', () => {
+      const { host, api, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRender({ extensionId: 'ext1', widgetId: 'w1', html: '<p>Test</p>' });
+
+      // Simulate the close callback being invoked
+      api.clearPublished();
+      const onClose = widgetFns._added[0].opts.onClose;
+      assert.ok(typeof onClose === 'function');
+      onClose();
+
+      const closedMsgs = api.getPublished('widget:closed');
+      assert.equal(closedMsgs.length, 1);
+      assert.equal(closedMsgs[0].data.extensionId, 'ext1');
+      assert.equal(closedMsgs[0].data.widgetId, 'w1');
+    });
+
+    it('passes autoDismiss to addWidget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRender({
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        html: '<p>Temp</p>',
+        autoDismiss: 5000,
+      });
+
+      assert.equal(widgetFns._added[0].opts.autoDismiss, 5000);
+    });
+
+    it('rejects render with missing extensionId', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRender({ widgetId: 'w1', html: '<p>Nope</p>' });
+      assert.equal(widgetFns._added.length, 0);
+    });
+  });
+
+  describe('widget update', () => {
+    it('updates an active widget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRender({ extensionId: 'ext1', widgetId: 'w1', html: '<p>V1</p>' });
+      host._handleUpdate({
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        html: '<p>V2</p>',
+        title: 'New Title',
+      });
+
+      assert.equal(widgetFns._updated.length, 1);
+      assert.equal(widgetFns._updated[0].id, 'ext1:w1');
+      assert.equal(widgetFns._updated[0].opts.content, '<p>V2</p>');
+      assert.equal(widgetFns._updated[0].opts.title, 'New Title');
+    });
+
+    it('ignores update for inactive widget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleUpdate({
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        html: '<p>Ghost</p>',
+      });
+
+      assert.equal(widgetFns._updated.length, 0);
+    });
+  });
+
+  describe('widget close', () => {
+    it('closes an active widget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleRegister({ extensionId: 'ext1', widgetId: 'w1' });
+      host._handleRender({ extensionId: 'ext1', widgetId: 'w1', html: '<p>Bye</p>' });
+      host._handleClose({ extensionId: 'ext1', widgetId: 'w1' });
+
+      // One from re-render removal is 0 (first render), one from close
+      assert.ok(widgetFns._removed.includes('ext1:w1'));
+      assert.equal(host.getActiveWidgets().size, 0);
+    });
+
+    it('ignores close for non-existent widget', () => {
+      const { host, widgetFns } = createHost();
+      host.init();
+
+      host._handleClose({ extensionId: 'ext1', widgetId: 'w1' });
+      assert.equal(widgetFns._removed.length, 0);
+    });
+  });
+
+  describe('content script execution', () => {
+    it('executes script and publishes result', async () => {
+      const { host, api, webview } = createHost();
+      host.init();
+
+      webview._setScriptResult({ title: 'Test Page' });
+
+      host._handleExecuteScript({
+        extensionId: 'ext1',
+        requestId: 'req-1',
+        script: 'document.title',
+      });
+
+      // Wait for the async executeJavaScript to resolve
+      await new Promise(r => setTimeout(r, 10));
+
+      const results = api.getPublished('page:script-result');
+      const result = results.find(r => r.data.requestId === 'req-1');
+      assert.ok(result);
+      assert.equal(result.data.success, true);
+      assert.deepEqual(result.data.result, { title: 'Test Page' });
+      assert.equal(result.data.extensionId, 'ext1');
+    });
+
+    it('publishes error when script fails', async () => {
+      const { host, api, webview } = createHost();
+      host.init();
+
+      webview._setScriptError('ReferenceError: foo is not defined');
+
+      host._handleExecuteScript({
+        extensionId: 'ext1',
+        requestId: 'req-2',
+        script: 'foo()',
+      });
+
+      await new Promise(r => setTimeout(r, 10));
+
+      const results = api.getPublished('page:script-result');
+      const result = results.find(r => r.data.requestId === 'req-2');
+      assert.ok(result);
+      assert.equal(result.data.success, false);
+      assert.ok(result.data.error.includes('ReferenceError'));
+    });
+
+    it('publishes error when no webview', () => {
+      const api = createMockApi();
+      const widgetFns = createMockWidgetFns();
+
+      const host = createPageWidgetHost({
+        api,
+        webview: null,
+        widgetContainer: {},
+        addWidget: widgetFns.addWidget,
+        updateWidget: widgetFns.updateWidget,
+        removeWidget: widgetFns.removeWidget,
+      });
+      host.init();
+
+      host._handleExecuteScript({
+        extensionId: 'ext1',
+        requestId: 'req-3',
+        script: 'document.title',
+      });
+
+      const results = api.getPublished('page:script-result');
+      const result = results.find(r => r.data.requestId === 'req-3');
+      assert.ok(result);
+      assert.ok(result.data.error.includes('No webview'));
+    });
+
+    it('rejects invalid execute-script messages', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      api.clearPublished();
+
+      host._handleExecuteScript(null);
+      host._handleExecuteScript({ extensionId: 'ext1' });
+      host._handleExecuteScript({ extensionId: 'ext1', requestId: 'req-4' });
+
+      assert.equal(api.getPublished('page:script-result').length, 0);
+    });
+  });
+
+  describe('lifecycle events', () => {
+    it('publishNavigated emits page:navigated', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      host.publishNavigated('https://example.com/new', 'New Page');
+
+      const msgs = api.getPublished('page:navigated');
+      assert.equal(msgs.length, 1);
+      assert.equal(msgs[0].data.url, 'https://example.com/new');
+      assert.equal(msgs[0].data.title, 'New Page');
+    });
+
+    it('publishWillClose emits page:will-close', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      host.publishWillClose('https://example.com');
+
+      const msgs = api.getPublished('page:will-close');
+      assert.equal(msgs.length, 1);
+      assert.equal(msgs[0].data.url, 'https://example.com');
+    });
+  });
+
+  describe('pubsub integration', () => {
+    it('responds to widget:register pubsub messages after init', () => {
+      const { host, api } = createHost();
+      host.init();
+
+      // Publish directly via API (simulates an extension sending a message)
+      api.publish('widget:register', {
+        extensionId: 'ext-pubsub',
+        widgetId: 'w-pubsub',
+        title: 'Pubsub Widget',
+      }, api.scopes.GLOBAL);
+
+      assert.equal(host.getWidgets().size, 1);
+      assert.ok(host.getWidgets().has('ext-pubsub:w-pubsub'));
+    });
+
+    it('responds to widget:render pubsub messages', () => {
+      const { host, api, widgetFns } = createHost();
+      host.init();
+
+      api.publish('widget:register', {
+        extensionId: 'ext1',
+        widgetId: 'w1',
+      }, api.scopes.GLOBAL);
+
+      api.publish('widget:render', {
+        extensionId: 'ext1',
+        widgetId: 'w1',
+        html: '<p>Pubsub rendered</p>',
+      }, api.scopes.GLOBAL);
+
+      assert.equal(widgetFns._added.length, 1);
+    });
+
+    it('full lifecycle: register -> render -> update -> close', () => {
+      const { host, api, widgetFns } = createHost();
+      host.init();
+
+      // Register
+      api.publish('widget:register', {
+        extensionId: 'ext1', widgetId: 'w1', title: 'Lifecycle'
+      }, api.scopes.GLOBAL);
+      assert.equal(host.getWidgets().size, 1);
+
+      // Render
+      api.publish('widget:render', {
+        extensionId: 'ext1', widgetId: 'w1', html: '<p>V1</p>'
+      }, api.scopes.GLOBAL);
+      assert.equal(widgetFns._added.length, 1);
+      assert.equal(host.getActiveWidgets().size, 1);
+
+      // Update
+      api.publish('widget:update', {
+        extensionId: 'ext1', widgetId: 'w1', html: '<p>V2</p>', title: 'Updated'
+      }, api.scopes.GLOBAL);
+      assert.equal(widgetFns._updated.length, 1);
+
+      // Close
+      api.publish('widget:close', {
+        extensionId: 'ext1', widgetId: 'w1'
+      }, api.scopes.GLOBAL);
+      assert.equal(host.getActiveWidgets().size, 0);
+    });
+  });
+});