clay-server 4.8.0-beta.1 → 4.8.0-beta.2

package/lib/public/modules/notifications.js

@@ -1,3 +1,4 @@
+import { initExtensionSettings } from './extension-settings.js';
 import { copyToClipboard, showToast } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 
@@ -161,113 +162,7 @@ export function initNotifications(_ctx) {
     });
   })();
 
-  // --- Extension pill popover ---
-  (function () {
-    var extPillWrap = $("ext-pill-wrap");
-    var extPillBtn = $("ext-pill");
-    var extPopover = $("ext-popover");
-    var extDownloadBtn = $("ext-download-btn");
-    var extDownloadStatus = $("ext-download-status");
-    var extCopyUrl = $("ext-copy-url");
-    if (!extPillWrap || !extPillBtn || !extPopover) return;
-
-    // Detect extension connection via postMessage from content.js
-    var extConnected = false;
-    var connectedBanner = $("ext-connected-banner");
-    var extDesc = $("ext-popover-desc");
-    var extDivider = $("ext-popover-divider");
-    var extGuideTitle = $("ext-popover-guide-title");
-    var extSteps = extPopover.querySelector(".ext-popover-steps");
-
-    function setExtConnected() {
-      if (extConnected) return;
-      extConnected = true;
-      extPillBtn.classList.add("ext-connected");
-      extPillBtn.innerHTML = '<i data-lucide="check"></i> Extension';
-      refreshIcons(extPillBtn);
-      if (connectedBanner) connectedBanner.classList.remove("hidden");
-      if (extDownloadBtn) extDownloadBtn.style.display = "none";
-      if (extDownloadStatus) extDownloadStatus.classList.add("hidden");
-      if (extDesc) extDesc.style.display = "none";
-      if (extDivider) extDivider.style.display = "none";
-      if (extGuideTitle) extGuideTitle.style.display = "none";
-      if (extSteps) extSteps.style.display = "none";
-    }
-
-    window.addEventListener("message", function (event) {
-      if (event.source !== window) return;
-      if (!event.data || event.data.source !== "clay-chrome-extension") return;
-      setExtConnected();
-    });
-
-    // Toggle popover
-    extPillBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      extPopover.classList.toggle("visible");
-      refreshIcons(extPopover);
-    });
-
-    document.addEventListener("click", function (e) {
-      if (!extPopover.contains(e.target) && e.target !== extPillBtn && !extPillBtn.contains(e.target)) {
-        extPopover.classList.remove("visible");
-      }
-    });
-
-    // Download button
-    if (extDownloadBtn) {
-      extDownloadBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        extDownloadBtn.disabled = true;
-        extDownloadBtn.innerHTML = iconHtml("loader") + " Downloading...";
-        refreshIcons(extDownloadBtn);
-        var loaderIcon = extDownloadBtn.querySelector(".lucide");
-        if (loaderIcon) loaderIcon.style.animation = "spin 1s linear infinite";
-        if (extDownloadStatus) {
-          extDownloadStatus.classList.remove("hidden");
-          extDownloadStatus.textContent = "Fetching from GitHub...";
-          extDownloadStatus.style.color = "";
-        }
-        fetch("/api/extension/download").then(function (resp) {
-          if (!resp.ok) throw new Error("Download failed (" + resp.status + ")");
-          return resp.blob();
-        }).then(function (blob) {
-          var url = URL.createObjectURL(blob);
-          var a = document.createElement("a");
-          a.href = url;
-          a.download = "clay-chrome-extension.zip";
-          document.body.appendChild(a);
-          a.click();
-          document.body.removeChild(a);
-          URL.revokeObjectURL(url);
-          if (extDownloadStatus) {
-            extDownloadStatus.textContent = "Download complete!";
-            extDownloadStatus.style.color = "var(--accent)";
-          }
-          showToast("Extension downloaded");
-        }).catch(function (err) {
-          if (extDownloadStatus) {
-            extDownloadStatus.textContent = "Failed: " + err.message;
-            extDownloadStatus.style.color = "var(--danger, #e53935)";
-          }
-          showToast("Download failed");
-        }).finally(function () {
-          extDownloadBtn.disabled = false;
-          extDownloadBtn.innerHTML = iconHtml("download") + " Download Extension (.zip)";
-          refreshIcons(extDownloadBtn);
-        });
-      });
-    }
-
-    // Copy chrome://extensions URL
-    if (extCopyUrl) {
-      extCopyUrl.addEventListener("click", function (e) {
-        e.stopPropagation();
-        copyToClipboard("chrome://extensions").then(function () {
-          showToast("Copied chrome://extensions");
-        });
-      });
-    }
-  })();
+  initExtensionSettings();
 
   // --- Settings: Check for updates ---
   (function () {

package/lib/public/modules/shared-browser-activity.js

@@ -0,0 +1,66 @@
+import { store } from './store.js';
+
+export function activityHtml() {
+  return '<div class="shared-browser-activity"><div class="shared-browser-caption-history" role="log" aria-live="off" aria-label="Browser caption history" tabindex="0"></div><button type="button" class="shared-browser-caption-latest" hidden>Back to live ↓</button><span class="shared-browser-caption-announcement" role="status" aria-live="polite"></span></div>';
+}
+function ui(patch) { store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), patch) }); }
+function renderCaptions(el, browser, active) {
+  var caption = el.querySelector('.shared-browser-activity');
+  var history = el.querySelector('.shared-browser-caption-history');
+  var latest = el.querySelector('.shared-browser-caption-latest');
+  if (!history.dataset.bound) {
+    history.dataset.bound = 'true';
+    history.addEventListener('scroll', function () {
+      var pinned = history.scrollHeight - history.clientHeight - history.scrollTop < 20;
+      ui({ captionPinned: pinned });
+      caption.dataset.reviewing = String(!pinned);
+      latest.hidden = pinned;
+    });
+    latest.onclick = function () { history.scrollTop = history.scrollHeight; ui({ captionPinned: true }); latest.hidden = true; caption.dataset.reviewing = 'false'; };
+  }
+  var entries = browser && browser.activityHistory || [];
+  if (!entries.length && active) entries = [{ id: 'ready', text: "I'm ready to work through the next step with you.", phase: 'idle' }];
+  caption.hidden = !entries.length;
+  var last = entries[entries.length - 1];
+  var key = browser && browser.id + ':' + entries.length + ':' + (last ? last.id + ':' + last.phase + ':' + last.text : 'empty');
+  var state = store.get('sharedBrowserUi') || {};
+  if (state.captionHistoryKey === key) return;
+  var fresh = state.captionBrowserId !== (browser && browser.id);
+  var pinned = fresh || state.captionPinned !== false;
+  var top = history.scrollTop;
+  history.replaceChildren();
+  entries.forEach(function (entry, index) {
+    var row = document.createElement('div'); row.className = 'shared-browser-caption-row';
+    row.dataset.age = String(Math.min(entries.length - index - 1, 3));
+    var line = document.createElement('span'); line.className = 'shared-browser-activity-text'; line.textContent = entry.text;
+    row.appendChild(line);
+    if (entry.phase === 'failed' || entry.phase === 'interrupted') {
+      var status = document.createElement('small'); status.textContent = entry.phase === 'failed' ? 'This step could not be completed.' : 'This step was interrupted.'; row.appendChild(status);
+    }
+    history.appendChild(row);
+  });
+  ui({ captionHistoryKey: key, captionBrowserId: browser && browser.id, captionPinned: pinned });
+  history.scrollTop = pinned ? history.scrollHeight : top;
+  latest.hidden = pinned;
+  caption.dataset.reviewing = String(!pinned);
+  var announcement = el.querySelector('.shared-browser-caption-announcement');
+  var text = active && last ? last.text + (last.phase === 'failed' ? ' This step could not be completed.' : '') : '';
+  if (announcement.textContent !== text) announcement.textContent = text;
+}
+export function renderBrowserActivity(el, browser, connected) {
+  var active = browser && browser.phase === 'live' && browser.control === 'agent' && !browser.handoff && connected;
+  renderCaptions(el, browser, active);
+  var canvas = el.querySelector('canvas');
+  var pointer = active && browser.pointer;
+  var cursor = el.querySelector('.shared-browser-pointer');
+  cursor.hidden = !pointer || pointer.width !== canvas.width || pointer.height !== canvas.height;
+  if (cursor.hidden) return;
+  cursor.style.left = (100 * pointer.x / canvas.width) + '%';
+  cursor.style.top = (100 * pointer.y / canvas.height) + '%';
+  var key = browser.id + ':' + browser.epoch + ':' + pointer.sequence;
+  if ((store.get('sharedBrowserUi') || {}).pointerAnimationKey === key) return;
+  store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), { pointerAnimationKey: key }) });
+  if (pointer.clicked && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    cursor.querySelector('i').animate([{ opacity: .8, transform: 'scale(.3)' }, { opacity: 0, transform: 'scale(1.8)' }], { duration: 650 });
+  }
+}

package/lib/public/modules/shared-browser-input.js

@@ -0,0 +1,73 @@
+import { store } from './store.js';
+import { sendBrowserInput } from './shared-browser.js';
+
+function writable() {
+  var browser = store.get('sharedBrowser');
+  return browser && browser.control === "user" && !browser.handoff && browser.phase === "live" && store.get('connected');
+}
+function ui(patch) { store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), patch) }); }
+export function clearBrowserInput() {
+  var current = store.get('sharedBrowserUi') || {};
+  clearTimeout(current.moveTimer);
+  ui({ moveTimer: null, move: null, pointer: null, composing: false });
+}
+export function bindBrowserInput(canvas, keyboard) {
+  function point(event) {
+    var box = canvas.getBoundingClientRect();
+    var scale = Math.min(box.width / canvas.width, box.height / canvas.height);
+    var x = (event.clientX - box.left - (box.width - canvas.width * scale) / 2) / scale;
+    var y = (event.clientY - box.top - (box.height - canvas.height * scale) / 2) / scale;
+    return { x: Math.max(0, Math.min(canvas.width - 1, x)), y: Math.max(0, Math.min(canvas.height - 1, y)) };
+  }
+  function flush() {
+    var current = store.get('sharedBrowserUi') || {};
+    clearTimeout(current.moveTimer);
+    var move = current.move;
+    ui({ move: null, moveTimer: null });
+    if (move && writable()) sendBrowserInput(Object.assign({ kind: "move" }, move));
+  }
+  canvas.addEventListener("pointermove", function (event) {
+    if (!writable()) return;
+    var current = store.get('sharedBrowserUi') || {};
+    ui({ move: point(event), moveTimer: current.moveTimer || setTimeout(flush, 40) });
+  });
+  canvas.addEventListener("pointerdown", function (event) {
+    if (!writable() || event.button !== 0) return;
+    event.preventDefault(); flush();
+    canvas.setPointerCapture(event.pointerId);
+    ui({ pointer: event.pointerId });
+    keyboard.focus({ preventScroll: true });
+    sendBrowserInput(Object.assign({ kind: "down" }, point(event)));
+  });
+  function release(event) {
+    var current = store.get('sharedBrowserUi') || {};
+    if (current.pointer !== event.pointerId) return;
+    flush(); ui({ pointer: null });
+    if (writable()) sendBrowserInput(Object.assign({ kind: "up" }, point(event)));
+    if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+  }
+  canvas.addEventListener("pointerup", release);
+  canvas.addEventListener("pointercancel", release);
+  canvas.addEventListener("lostpointercapture", release);
+  canvas.addEventListener("wheel", function (event) {
+    if (!writable()) return;
+    event.preventDefault(); sendBrowserInput({ kind: "wheel", deltaY: event.deltaY });
+  }, { passive: false });
+  canvas.addEventListener("focus", function () { if (writable()) keyboard.focus({ preventScroll: true }); });
+  keyboard.addEventListener("compositionstart", function () { ui({ composing: true }); });
+  keyboard.addEventListener("compositionend", function () { ui({ composing: false }); if (writable() && keyboard.value) sendBrowserInput({ kind: "text", text: keyboard.value }); keyboard.value = ""; });
+  keyboard.addEventListener("input", function () {
+    if ((store.get('sharedBrowserUi') || {}).composing) return;
+    if (writable() && keyboard.value) sendBrowserInput({ kind: "text", text: keyboard.value });
+    keyboard.value = "";
+  });
+  keyboard.addEventListener("keydown", function (event) {
+    if (!writable() || event.isComposing) return;
+    var key = event.key;
+    if ((event.ctrlKey || event.metaKey) && key.toLowerCase() === "a") key = "ControlOrMeta+A";
+    else if (key === "Tab" && event.shiftKey) key = "Shift+Tab";
+    if (/^(Tab|Shift\+Tab|Enter|Backspace|Delete|Escape|ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Home|End|ControlOrMeta\+A)$/.test(key)) {
+      event.preventDefault(); sendBrowserInput({ kind: "key", key: key });
+    }
+  });
+}

package/lib/public/modules/shared-browser-tabs.js

@@ -0,0 +1,33 @@
+import { store } from './store.js';
+
+export function renderBrowserTabs(el, select, send) {
+  var bar = el.querySelector('.shared-browser-tabs');
+  var tabs = store.get('sharedBrowsers') || [];
+  var selected = store.get('sharedBrowser');
+  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase]; }), selected && selected.id, store.get('connected')]);
+  if (bar.dataset.key === key) return;
+  bar.dataset.key = key;
+  bar.replaceChildren();
+  tabs.forEach(function (tab, index) {
+    var item = document.createElement('div'); item.className = 'shared-browser-tab';
+    var button = document.createElement('button'); button.type = 'button'; button.setAttribute('role', 'tab');
+    button.setAttribute('aria-selected', String(!!selected && selected.id === tab.id));
+    var title = 'Tab ' + (index + 1);
+    try { if (tab.url) title = new URL(tab.url).hostname; } catch (e) {}
+    var label = document.createElement('span'); label.textContent = title;
+    var owner = document.createElement('small'); owner.textContent = tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'Clay' : 'You';
+    button.append(label, owner); button.title = title + ' · ' + owner.textContent;
+    button.onclick = function () { select(tab.id); };
+    button.onkeydown = function (event) {
+      var next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : -1;
+      if (next < 0) return;
+      event.preventDefault(); select(tabs[next].id); bar.querySelectorAll('[role="tab"]')[next].focus();
+    };
+    var close = document.createElement('button'); close.type = 'button'; close.textContent = '×'; close.setAttribute('aria-label', 'Close browser tab ' + (index + 1)); close.disabled = !store.get('connected');
+    close.onclick = function () { send('close', { browserId: tab.id }); };
+    item.append(button, close); bar.appendChild(item);
+  });
+  var add = document.createElement('button'); add.type = 'button'; add.textContent = '+'; add.setAttribute('aria-label', 'New browser tab'); add.disabled = !store.get('connected');
+  add.onclick = function () { send('open', { newTab: true }); };
+  bar.appendChild(add);
+}

package/lib/public/modules/shared-browser-viewport-menu.js

@@ -0,0 +1,76 @@
+import { store } from './store.js';
+import { iconHtml } from './icons.js';
+import { sendBrowserInput } from './shared-browser.js';
+
+var presets = ['1280,800', '1440,900', '1024,768', '800,600', '375,667', '390,844'];
+function root() { return document.getElementById('shared-browser-resolution'); }
+function setOpen(value) {
+  store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), { viewportMenuOpen: value }) });
+  var el = root();
+  if (!el) return;
+  el.querySelector('[data-viewport-trigger]').setAttribute('aria-expanded', String(value));
+  el.querySelector('[role="menu"]').hidden = !value;
+}
+export function closeViewportMenu() { setOpen(false); }
+export function viewportMenuHtml() {
+  return '<div id="shared-browser-resolution" class="shared-browser-resolution"><button type="button" data-viewport-trigger aria-label="Browser viewport" aria-haspopup="menu" aria-expanded="false" aria-controls="shared-browser-resolutions"><span>1280 × 800</span>' + iconHtml('chevron-up') + '</button><div id="shared-browser-resolutions" class="shared-browser-resolution-menu" role="menu" aria-label="Browser resolutions" hidden></div></div>';
+}
+export function renderViewportMenu(panel, browser, enabled) {
+  var el = panel.querySelector('.shared-browser-resolution');
+  var trigger = el.querySelector('[data-viewport-trigger]');
+  trigger.disabled = !enabled;
+  if (!enabled || !store.get('sharedBrowserOpen')) closeViewportMenu();
+  var size = browser ? browser.width + ',' + browser.height : '1280,800';
+  trigger.querySelector('span').textContent = size.replace(',', ' × ');
+  var menu = el.querySelector('[role="menu"]');
+  if (menu.dataset.size === size) return;
+  menu.dataset.size = size;
+  var values = presets.includes(size) ? presets : presets.concat([size]);
+  menu.replaceChildren();
+  values.forEach(function (value) {
+    var option = document.createElement('button');
+    option.type = 'button'; option.setAttribute('role', 'menuitemradio');
+    option.setAttribute('aria-checked', String(value === size));
+    option.dataset.size = value; option.tabIndex = -1;
+    option.textContent = value.replace(',', ' × ');
+    option.setAttribute('aria-label', option.textContent);
+    menu.appendChild(option);
+  });
+}
+export function bindViewportMenu(panel) {
+  var el = panel.querySelector('.shared-browser-resolution');
+  var trigger = el.querySelector('[data-viewport-trigger]');
+  var menu = el.querySelector('[role="menu"]');
+  function open(last) {
+    if (trigger.disabled) return;
+    setOpen(true);
+    var items = menu.querySelectorAll('button');
+    var selected = menu.querySelector('[aria-checked="true"]');
+    (last ? items[items.length - 1] : selected || items[0]).focus();
+  }
+  trigger.onclick = function () {
+    if ((store.get('sharedBrowserUi') || {}).viewportMenuOpen) closeViewportMenu(); else open(false);
+  };
+  trigger.onkeydown = function (event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); open(event.key === 'ArrowUp'); }
+  };
+  menu.onclick = function (event) {
+    var option = event.target.closest('[data-size]');
+    if (!option || trigger.disabled) return;
+    var size = option.dataset.size.split(',');
+    closeViewportMenu(); trigger.focus();
+    sendBrowserInput({ kind: 'resize', width: Number(size[0]), height: Number(size[1]) });
+  };
+  el.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeViewportMenu(); trigger.focus(); return; }
+    if (event.key === 'Tab') { closeViewportMenu(); return; }
+    if (event.target === trigger || !['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    event.preventDefault();
+    var items = Array.from(menu.querySelectorAll('button'));
+    var index = items.indexOf(document.activeElement);
+    index = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : (index + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+    items[index].focus();
+  });
+  document.addEventListener('pointerdown', function (event) { if (!el.contains(event.target)) closeViewportMenu(); });
+  el.addEventListener('focusout', function (event) { if (!el.contains(event.relatedTarget)) closeViewportMenu(); });
+}

package/lib/public/modules/shared-browser.js

@@ -0,0 +1,214 @@
+import { renderBrowserTabs } from './shared-browser-tabs.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { bindBrowserInput, clearBrowserInput } from './shared-browser-input.js';
+import { activityHtml, renderBrowserActivity } from './shared-browser-activity.js';
+import { viewportMenuHtml, bindViewportMenu, renderViewportMenu, closeViewportMenu } from './shared-browser-viewport-menu.js';
+
+function desktop() { return window.matchMedia('(min-width: 1024px)').matches; }
+function eligible() {
+  var permissions = store.get('permissions');
+  return desktop() && !!store.get('currentSlug') && !!store.get('activeSessionId') && !store.get('dmMode') && (!permissions || permissions.terminal !== false);
+}
+function panel() { return document.getElementById('shared-browser-panel'); }
+function ui(patch) { store.set({ sharedBrowserUi: Object.assign({}, store.get('sharedBrowserUi'), patch) }); }
+function send(type, fields) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1 || !store.get('activeSessionId')) return false;
+  var browser = store.get('sharedBrowser');
+  ws.send(JSON.stringify(Object.assign({ type: 'shared_browser_' + type, sessionId: store.get('activeSessionId'),
+    browserId: browser && browser.id, epoch: browser && browser.epoch }, fields || {})));
+  return true;
+}
+export function sendBrowserInput(event) { ui({ error: '' }); send('input', { event: event }); }
+function layoutMonitor() {
+  var el = panel();
+  if (!el || !store.get('sharedBrowserOpen')) return;
+  var stage = el.querySelector('.shared-browser-viewport');
+  var canvas = el.querySelector('canvas');
+  var skin = canvas.width === 800 && canvas.height === 600 ? 'mac' : canvas.width === 1024 && canvas.height === 768 ? 'crt' : canvas.width < canvas.height ? 'phone' : 'laptop';
+  stage.dataset.skin = skin;
+  var scale = Math.min((stage.clientWidth - 96) / canvas.width, (stage.clientHeight - 140 - el.querySelector('.shared-browser-caption').offsetHeight) / canvas.height, 1);
+  if (scale <= 0) return;
+  var monitor = el.querySelector('.shared-browser-monitor');
+  monitor.style.width = Math.floor(canvas.width * scale) + 'px';
+  monitor.style.height = Math.floor(canvas.height * scale) + 'px';
+  el.querySelector('.shared-browser-monitor-label').textContent = canvas.width + ' × ' + canvas.height + ' · ' + Math.round(scale * 100) + '%';
+}
+function iconButton(action, icon, label) {
+  return '<button type="button" data-action="' + action + '" title="' + label + '" aria-label="' + label + '">' + iconHtml(icon) + '</button>';
+}
+function ensurePanel() {
+  if (panel()) return;
+  var root = document.getElementById('main-panels');
+  if (!root) return;
+  var el = document.createElement('section');
+  el.id = 'shared-browser-panel';
+  el.className = 'shared-browser-panel hidden';
+  el.setAttribute('aria-label', 'Shared browser');
+  el.innerHTML = '<header class="shared-browser-header"><span class="shared-browser-title">' + iconHtml('globe') + 'Browser</span><span class="shared-browser-phase" role="status">Ready</span><div class="shared-browser-window">' +
+    iconButton('wide', 'chevrons-left-right', 'Widen browser panel') + iconButton('fullscreen', 'maximize-2', 'Toggle browser fullscreen') + iconButton('hide', 'x', 'Hide browser panel') + '</div></header>' +
+    '<div class="shared-browser-tabs" role="tablist" aria-label="Browser tabs"></div><form class="shared-browser-address">' + iconButton('back', 'arrow-left', 'Back') + iconButton('forward', 'arrow-right', 'Forward') + iconButton('reload', 'rotate-cw', 'Reload') +
+    '<input aria-label="Browser address" placeholder="Enter a URL" type="text" autocomplete="off" spellcheck="false"><button type="submit" aria-label="Open address">' + iconHtml('arrow-right') + '</button></form>' +
+    '<div class="shared-browser-viewport"><div class="shared-browser-monitor"><div class="shared-browser-pointer-layer" aria-hidden="true"><div class="shared-browser-pointer" hidden><svg viewBox="0 0 24 28"><path d="M3 2 L3 22 L8 17 L12 26 L16 24 L12 15 L20 15 Z"/></svg><i></i></div></div><canvas width="1280" height="800" tabindex="0" aria-label="Shared browser page"></canvas>' +
+    '<div class="shared-browser-empty">' + iconHtml('globe') + '<h3>A browser you can share with your Driver</h3><p>Enter an address to browse together.<br>Localhost connects to the Clay host.</p><p class="shared-browser-private">Cookies last only for this browser session.</p></div>' +
+    '<textarea class="shared-browser-keyboard" aria-label="Type into shared browser" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea><span class="shared-browser-monitor-brand" aria-hidden="true">Clay Studio</span><span class="shared-browser-monitor-detail" aria-hidden="true"></span><span class="shared-browser-monitor-stand" aria-hidden="true"></span></div><div class="shared-browser-caption"><span class="shared-browser-monitor-label"></span>' + activityHtml() + '</div></div>' +
+    '<p class="shared-browser-error hidden" role="status"></p>' +
+    '<footer class="shared-browser-footer"><div class="shared-browser-control"><span>You’re in control</span><button type="button" data-action="control">Give control</button></div>' +
+    '<div class="shared-browser-details">' + viewportMenuHtml() + '<button type="button" data-action="end">End browser</button></div></footer>';
+  root.appendChild(el);
+  el.querySelector('[data-action="hide"]').onclick = hideSharedBrowser;
+  el.querySelector('[data-action="wide"]').onclick = function () { var wide = !(store.get('sharedBrowserUi') || {}).wide; ui({ wide: wide }); render(); };
+  el.querySelector('[data-action="fullscreen"]').onclick = function () { var full = !(store.get('sharedBrowserUi') || {}).fullscreen; ui({ fullscreen: full }); render(); };
+  ['back', 'forward', 'reload'].forEach(function (action) { el.querySelector('[data-action="' + action + '"]').onclick = function () { sendBrowserInput({ kind: action }); }; });
+  el.querySelector('form').onsubmit = function (event) { event.preventDefault(); sendBrowserInput({ kind: 'navigate', url: el.querySelector('form input').value }); };
+  el.querySelector('[data-action="control"]').onclick = function () {
+    var browser = store.get('sharedBrowser');
+    if (browser) send('control', { control: browser.control === 'user' ? 'agent' : 'user' });
+  };
+  el.querySelector('[data-action="end"]').onclick = function () { var browser = store.get('sharedBrowser'); send(browser && browser.phase === 'ended' ? 'open' : 'end'); };
+  bindViewportMenu(el);
+  var observer = new ResizeObserver(layoutMonitor);
+  observer.observe(el.querySelector('.shared-browser-viewport'));
+  bindBrowserInput(el.querySelector('canvas'), el.querySelector('textarea'));
+  refreshIcons();
+}
+function renderEntry() {
+  var button = document.getElementById('shared-browser-btn');
+  if (!button) return;
+  button.classList.toggle('hidden', !eligible());
+  var browser = store.get('sharedBrowser');
+  button.title = browser ? 'View browser · ' + (store.get('connected') ? browser.phase : 'Disconnected') : 'Open browser';
+  button.setAttribute('aria-label', browser ? 'View browser' : 'Open browser');
+  button.setAttribute('aria-expanded', String(!!store.get('sharedBrowserOpen')));
+  button.disabled = !store.get('connected');
+}
+function render() {
+  renderEntry();
+  var el = panel();
+  if (!el) return;
+  renderBrowserTabs(el, selectBrowserTab, send);
+  var browser = store.get('sharedBrowser');
+  var state = store.get('sharedBrowserUi') || {};
+  var connected = store.get('connected');
+  var live = browser && browser.phase === 'live';
+  var user = live && !browser.handoff && browser.control === 'user' && connected;
+  el.classList.toggle('hidden', !store.get('sharedBrowserOpen') || !eligible());
+  el.classList.toggle('shared-browser-wide', !!state.wide);
+  el.classList.toggle('panel-fullscreen', !!state.fullscreen);
+  el.querySelector('[data-action="wide"]').setAttribute('aria-pressed', state.wide ? 'true' : 'false');
+  el.querySelector('[data-action="fullscreen"]').setAttribute('aria-pressed', state.fullscreen ? 'true' : 'false');
+  el.querySelector('.shared-browser-phase').textContent = !connected ? 'Disconnected' : browser ? ({ starting: 'Starting…', live: 'Live', ended: 'Ended · Last frame' })[browser.phase] : 'Ready';
+  el.querySelector('.shared-browser-phase').dataset.live = live && connected ? 'true' : 'false';
+  el.querySelector('.shared-browser-monitor').dataset.live = live && connected ? 'true' : 'false';
+  var address = el.querySelector('form input');
+  if (document.activeElement !== address) address.value = browser ? browser.url : '';
+  el.querySelectorAll('form input, form button').forEach(function (node) { node.disabled = !user; });
+  el.querySelector('textarea').disabled = !user;
+  el.querySelector('canvas').style.cursor = user ? 'default' : 'not-allowed';
+  el.querySelector('.shared-browser-control span').textContent = !live ? (browser && browser.phase === 'starting' ? 'Starting…' : 'Ended') : browser.handoff ? 'Switching…' : browser.control === 'user' ? 'You control' : 'Driver controls';
+  el.querySelector('[data-action="control"]').textContent = browser && browser.control === 'agent' ? 'Take control' : 'Give control';
+  el.querySelector('[data-action="control"]').disabled = !live || !!browser.handoff || !connected;
+  el.querySelector('[data-action="control"]').hidden = !live;
+  el.querySelector('[data-action="end"]').disabled = !browser || !connected;
+  el.querySelector('[data-action="end"]').textContent = browser && browser.phase === 'ended' ? 'New browser' : 'End browser';
+  var error = state.error || (browser && browser.error) || '';
+  el.querySelector('.shared-browser-error').textContent = error;
+  el.querySelector('.shared-browser-error').classList.toggle('hidden', !error);
+  el.querySelector('.shared-browser-empty').classList.toggle('hidden', !!(browser && browser.url && state.hasFrame));
+  renderViewportMenu(el, browser, user);
+  renderBrowserActivity(el, browser, connected);
+  layoutMonitor();
+}
+function setBrowserTab(browser) {
+  var old = store.get('sharedBrowser');
+  store.set({ sharedBrowser: browser });
+  if (!old || !browser || old.id !== browser.id) {
+    clearBrowserInput(); closeViewportMenu(); ui({ hasFrame: false, error: '', decoding: false, captionHistoryKey: null });
+    var el = panel(); if (el) el.querySelector('canvas').getContext('2d').clearRect(0, 0, 1920, 1200);
+  } else if (old.epoch !== browser.epoch) clearBrowserInput();
+}
+function selectBrowserTab(id) {
+  var browser = (store.get('sharedBrowsers') || []).find(function (tab) { return tab.id === id; });
+  if (!browser) return;
+  setBrowserTab(browser);
+  send('view', { visible: desktop() && !document.hidden }); render();
+}
+export function openSharedBrowser() {
+  if (!eligible()) return;
+  ensurePanel();
+  claimRightWorkbench('browser');
+  store.set({ sharedBrowserOpen: true });
+  var browser = store.get('sharedBrowser');
+  if (!browser) send('open');
+  else send('view', { visible: true });
+  render();
+}
+export function hideSharedBrowser() {
+  closeViewportMenu();
+  clearBrowserInput();
+  if (store.get('sharedBrowserOpen')) send('view', { visible: false });
+  store.set({ sharedBrowserOpen: false });
+  releaseRightWorkbench('browser');
+  render();
+}
+export function handleSharedBrowserMessage(msg) {
+  if (!msg.type || msg.type.indexOf('shared_browser_') !== 0) return false;
+  if (String(msg.sessionId) !== String(store.get('activeSessionId'))) return true;
+  if (msg.type === 'shared_browser_state') {
+    var old = store.get('sharedBrowser');
+    var tabs = msg.browsers || (msg.browser ? [msg.browser] : []);
+    store.set({ sharedBrowsers: tabs });
+    var selected = !msg.focus && old && tabs.find(function (tab) { return tab.id === old.id; });
+    selected = selected || msg.browser || tabs[0] || null;
+    setBrowserTab(selected);
+    if (msg.present && eligible()) {
+      ensurePanel(); claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
+    }
+    if (store.get('sharedBrowserOpen') && selected) send('view', { visible: desktop() && !document.hidden });
+    render();
+  } else if (msg.type === 'shared_browser_error') { ui({ error: msg.error }); render(); }
+  else if (msg.type === 'shared_browser_frame') {
+    var current = store.get('sharedBrowser');
+    if (!desktop() || !store.get('sharedBrowserOpen') || !current || current.id !== msg.browserId || (store.get('sharedBrowserUi') || {}).decoding) return true;
+    var sessionId = store.get('activeSessionId');
+    ui({ decoding: true });
+    var image = new Image();
+    image.onload = function () {
+      var latest = store.get('sharedBrowser');
+      if (latest && latest.id === msg.browserId && store.get('activeSessionId') === sessionId && panel()) {
+        var canvas = panel().querySelector('canvas'); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight;
+        canvas.getContext('2d').drawImage(image, 0, 0);
+        ui({ decoding: false, hasFrame: true }); render();
+      }
+    };
+    image.onerror = function () { if (store.get('activeSessionId') === sessionId) ui({ decoding: false }); };
+    image.src = 'data:image/jpeg;base64,' + msg.data;
+  }
+  return true;
+}
+export function initSharedBrowser() {
+  var button = document.getElementById('shared-browser-btn');
+  if (!button) return;
+  button.onclick = openSharedBrowser;
+  window.matchMedia('(min-width: 1024px)').addEventListener('change', function () { if (!desktop()) hideSharedBrowser(); renderEntry(); });
+  document.addEventListener('visibilitychange', function () { if (store.get('sharedBrowserOpen')) send('view', { visible: !document.hidden && desktop() }); });
+  refreshIcons(); renderEntry();
+  if (store.get('connected')) send('state_request');
+}
+registerRightWorkbench('browser', hideSharedBrowser);
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.myUserId !== previous.myUserId) {
+    clearBrowserInput(); releaseRightWorkbench('browser');
+    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {} });
+    if (state.connected) send('state_request');
+    render();
+  } else if (state.connected !== previous.connected) {
+    if (state.connected) send('state_request');
+    render();
+  } else if (state.permissions !== previous.permissions || state.dmMode !== previous.dmMode) {
+    if (!eligible()) hideSharedBrowser(); renderEntry();
+  }
+});

package/lib/public/modules/sidebar-mobile.js

@@ -983,7 +983,7 @@ function renderSheetMateProfile(listEl) {
   var actions = [
     { icon: "book-open", label: "Knowledge", btnId: "mate-knowledge-btn", countId: "mate-knowledge-count" },
     { icon: "sticky-note", label: "Sticky Notes", btnId: "sticky-notes-sidebar-btn", countId: "sticky-notes-sidebar-count" },
-    { icon: "puzzle", label: "Skills", btnId: "mate-skills-btn" }
+    { icon: "puzzle", label: "MCP / Skills", btnId: "mate-mcp-btn" }
   ];
 
   for (var i = 0; i < actions.length; i++) {
@@ -1100,7 +1100,7 @@ function renderSheetTools(listEl) {
     { icon: "brain", label: "Memory", action: "mate-memory" },
     { icon: "book-open", label: "Knowledge", action: "mate-knowledge" },
     { icon: "sticky-note", label: "Sticky Notes", action: "mate-sticky" },
-    { icon: "puzzle", label: "Skills", action: "mate-skills" }
+    { icon: "puzzle", label: "MCP / Skills", action: "mate-skills" }
   ] : [
     { icon: "folder-tree", label: "Files", action: "files" },
     { icon: "square-terminal", label: "Terminal", action: "terminal" },
@@ -1130,7 +1130,7 @@ function renderSheetTools(listEl) {
         } else if (item.action === "mate-sticky") {
           targetId = "mate-sticky-notes-btn";
         } else if (item.action === "mate-skills") {
-          targetId = "mate-skills-btn";
+          targetId = "mate-mcp-btn";
         } else if (item.action === "mate-memory") {
           targetId = "mate-memory-btn";
         } else if (item.action === "mate-debate") {