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

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/project-settings.js

@@ -3,6 +3,8 @@ import { refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
 import { parseEmojis } from './markdown.js';
 import { closeFileViewer } from './filebrowser.js';
+import { holdNotesForSettings, releaseNotesForSettings } from './sticky-notes.js';
+import { openNotesBrowser, closeNotesBrowser, isNotesBrowserOpen } from './sticky-notes-browser.js';
 import { renderModelList, renderModeList, renderEffortBar, renderThinkingBar, renderBetaCard } from './settings-defaults.js';
 import { initProjectSessionVisibilitySettings, populateProjectSessionVisibilitySettings } from './project-session-visibility-settings.js';
 
@@ -12,6 +14,7 @@ var navItems = null;
 var sections = null;
 var currentSlug = null;
 var currentProject = null; // { slug, name, icon }
+var notesBrowserReopen = false;
 
 // Emoji categories (reuse from sidebar)
 var EMOJI_CATEGORIES = null;
@@ -186,15 +189,30 @@ export function openProjectSettings(slug, project) {
   // Close file viewer if open (prevent split-screen)
   closeFileViewer();
 
+  // Sticky notes must not sit over settings; remember what to restore.
+  if (panelEl.classList.contains("hidden")) {
+    notesBrowserReopen = isNotesBrowserOpen();
+    if (notesBrowserReopen) closeNotesBrowser();
+    holdNotesForSettings();
+  }
+
   // Show panel
   panelEl.classList.remove("hidden");
   refreshIcons();
 }
 
-export function closeProjectSettings() {
+// `cleanup` is for teardown while leaving the project: the notes workbench is
+// not reopened over whatever screen comes next.
+export function closeProjectSettings(opts) {
   if (!panelEl) return;
+  var wasOpen = !panelEl.classList.contains("hidden");
   panelEl.classList.add("hidden");
   closePsEmojiPicker();
+  if (wasOpen) {
+    releaseNotesForSettings();
+    if (notesBrowserReopen && !(opts && opts.cleanup)) openNotesBrowser();
+    notesBrowserReopen = false;
+  }
 }
 
 export function isProjectSettingsOpen() {

package/lib/public/modules/session-github.js

@@ -9,7 +9,8 @@ function escapeHtml(value) {
 }
 
 function safeLinks(session) {
-  return (session && Array.isArray(session.githubLinks) ? session.githubLinks : []).filter(function (link) {
+  return (session && Array.isArray(session.githubLinks) ? session.githubLinks : []).concat(session && Array.isArray(session.linearLinks) ? session.linearLinks : []).filter(function (link) {
+    if (link.provider === 'linear') return /^https:\/\/linear\.app\/[a-zA-Z0-9_-]+\/issue\/[A-Z][A-Z0-9_]*-[1-9][0-9]*$/.test(link.url);
     var target = githubLinkTarget(link.url);
     return target && (target.kind === 'issue' || target.kind === 'pull');
   });
@@ -27,7 +28,7 @@ export function orderedGithubWork(session) {
   return links;
 }
 function compactGithubWork(links, sessionRow) {
-  if (!sessionRow) return links.slice(0, 1);
+  if (!sessionRow && !links.some(function (link) { return link.provider === 'linear'; })) return links.slice(0, 1);
   var latestIssue = links.find(function (link) { return link.kind === 'issue'; });
   var latestPr = links.find(function (link) { return link.kind === 'pr'; });
   return [latestIssue, latestPr].filter(Boolean);
@@ -37,6 +38,10 @@ export function githubWorkMarkup(session, detailed, expanded, sessionRow) {
   if (!links.length) return '';
   var displayed = detailed || expanded ? links : compactGithubWork(links, sessionRow);
   return '<span class="session-github-links' + (detailed ? ' github-work-details' : '') + (sessionRow ? ' session-row-github-links' : '') + '">' + displayed.map(function (link) {
+    if (link.provider === 'linear') {
+      var description = link.identifier + ' · ' + link.title + ' · ' + link.stateName + (link.stale ? ' · Last known status' : '');
+      return anchor(link.url, description, iconHtml('circle-dot', 'github-work-status') + '<span class="linear-work-id">' + escapeHtml(link.identifier) + '</span><span class="linear-work-title">' + escapeHtml(link.title) + '</span><span class="linear-work-state">' + escapeHtml(link.stateName) + '</span>', 'session-github-link session-linear-link');
+    }
     var state = ['open', 'closed', 'merged', 'draft'].indexOf(link.state) >= 0 ? link.state : 'unknown';
     var icon = link.kind === 'pr' ? (state === 'merged' ? 'git-merge' : state === 'closed' ? 'git-pull-request-closed' : state === 'draft' ? 'git-pull-request-draft' : 'git-pull-request') : (state === 'closed' ? 'circle-check' : 'circle-dot');
     var description = link.repository + ' · ' + label(link) + ' · ' + link.title + ' · ' + state + (link.checkedAt ? ' · Checked ' + new Date(link.checkedAt).toLocaleString() : '') + (link.stale ? ' (last known status; refresh unavailable)' : '');
@@ -50,7 +55,7 @@ export function githubWorkMarkup(session, detailed, expanded, sessionRow) {
       });
     }
     return html;
-  }).join('') + (!detailed && !expanded && links.length > displayed.length ? '<button type="button" class="github-work-more" aria-label="Show all ' + links.length + ' linked GitHub items" aria-haspopup="dialog" aria-expanded="false" data-github-links="' + escapeHtml(JSON.stringify(safeLinks(session))) + '">+' + (links.length - displayed.length) + '</button>' : '') + '</span>';
+  }).join('') + (!detailed && !expanded && links.length > displayed.length ? '<button type="button" class="github-work-more" aria-label="Show all ' + links.length + ' linked ' + (links.some(function (item) { return item.provider === 'linear'; }) ? 'work items' : 'GitHub items') + '" aria-haspopup="dialog" aria-expanded="false" data-github-links="' + escapeHtml(JSON.stringify(safeLinks(session))) + '">+' + (links.length - displayed.length) + '</button>' : '') + '</span>';
 }
 export function appendGithubWork(row, session, title) {
   var html = githubWorkMarkup(session, false, false, true);
@@ -109,6 +114,8 @@ export function refreshGithubWork() {
   if (!ws || ws.readyState !== 1) return;
   store.set({ githubWorkRefresh: { key: key, at: Date.now() } });
   ws.send(JSON.stringify({ type: 'session_github_refresh', sessionIds: ids }));
+  var linearIds = ids.filter(function (id) { return (store.get('githubWorkSessions') || []).some(function (item) { return item.id === id && (item.linearLinks || []).length; }); });
+  if (linearIds.length) ws.send(JSON.stringify({ type: 'session_linear_refresh', sessionIds: linearIds }));
 }
 
 export function resetGithubWork() {
@@ -126,6 +133,8 @@ function bindGithubWorkPopover() {
   if (store.get('githubWorkPopoverBound')) return;
   store.set({ githubWorkPopoverBound: true });
   document.addEventListener('click', function (event) {
+    var linear = event.target.closest('.session-linear-link');
+    if (linear && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) { event.preventDefault(); event.stopPropagation(); closeGithubWorkPopover(); import('./linear-panel.js').then(function (module) { module.openLinear(linear.href); }); return; }
     var button = event.target.closest('.github-work-more');
     if (!button) return;
     event.preventDefault();
@@ -141,8 +150,9 @@ function bindGithubWorkPopover() {
     popup.className = 'github-work-popover';
     popup.setAttribute('popover', 'auto');
     popup.setAttribute('role', 'dialog');
-    popup.setAttribute('aria-label', 'Linked GitHub work');
-    popup.innerHTML = '<strong>Linked GitHub work</strong>' + githubWorkMarkup({ githubLinks: links }, false, true);
+    var workTitle = links.some(function (link) { return link.provider === 'linear'; }) ? 'Linked work' : 'Linked GitHub work';
+    popup.setAttribute('aria-label', workTitle);
+    popup.innerHTML = '<strong>' + workTitle + '</strong>' + githubWorkMarkup({ githubLinks: links }, false, true);
     document.body.appendChild(popup);
     button.setAttribute('aria-expanded', 'true');
     popup.addEventListener('toggle', function (toggle) {

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(); });
+}