clay-server 5.2.0-beta.3 → 5.2.0-beta.5

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

@@ -3,6 +3,7 @@ import { getWs } from './ws-ref.js';
 import { githubLinkTarget } from './github-links.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { escapeHtml as escapeText } from './utils.js';
+import { primaryWorkPopover, handlePrimaryWorkClick } from './session-work-primary.js';
 
 function escapeHtml(value) {
   return escapeText(String(value)).replace(/"/g, '"').replace(/'/g, ''');
@@ -34,13 +35,38 @@ export function orderedGithubWork(session) {
   var links = safeLinks(session).slice().reverse();
   var latestIssue = links.find(function (link) { return link.kind === 'issue' || link.provider === 'linear'; });
   if (latestIssue) links = [latestIssue].concat(links.filter(function (link) { return link !== latestIssue; }));
-  return links;
+  var primary = session && session.workPrimary || {};
+  return links.filter(function (link) { return String(primary[link.provider === 'linear' ? 'linear' : link.kind] || '').toLowerCase() === link.url.toLowerCase(); }).concat(
+    links.filter(function (link) { return String(primary[link.provider === 'linear' ? 'linear' : link.kind] || '').toLowerCase() !== link.url.toLowerCase(); }));
 }
 function compactGithubWork(links, sessionRow) {
   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' || link.provider === 'linear'; });
+  var latestLinear = links.find(function (link) { return link.provider === 'linear'; });
+  var latestIssue = links.find(function (link) { return link.kind === 'issue' && link.provider !== 'linear'; });
   var latestPr = links.find(function (link) { return link.kind === 'pr'; });
-  return [latestIssue, latestPr].filter(Boolean);
+  return [latestLinear, latestIssue, latestPr].filter(Boolean);
+}
+function personalScope() {
+  return String(store.get('currentSlug') || '') + '\u0000' + String(store.get('myUserId') || 'default');
+}
+function ensurePersonalScope() {
+  var scope = personalScope();
+  if (store.get('githubPersonalReviewScope') !== scope) store.set({ githubPersonalReviewScope: scope, githubPersonalReview: {} });
+  return scope;
+}
+function sessionIdentifier(session) {
+  return String(session && (session._githubSessionId || session.id || session.localId) || '');
+}
+function personalReviewState(session, link) {
+  var scope = ensurePersonalScope();
+  var key = scope + '\u0000' + (sessionIdentifier(session) || String(link._githubSessionId || '')) + '\u0000' + String(link.url || '').toLowerCase();
+  return (store.get('githubPersonalReview') || {})[key] || link.personalReviewState || '';
+}
+function prReviewStatus(link) {
+  if (link.review === 'CHANGES_REQUESTED') return { icon: 'message-square-warning', label: 'Changes requested', className: 'github-review-changes' };
+  if (link.personalReviewState === 'requested') return { icon: 'user-round-check', label: 'Review requested from you', className: 'github-review-requested' };
+  if (link.review === 'APPROVED') return { icon: 'badge-check', label: 'Approved', className: 'github-review-approved' };
+  return null;
 }
 export function githubWorkMarkup(session, detailed, expanded, sessionRow) {
   var links = orderedGithubWork(session);
@@ -52,19 +78,51 @@ export function githubWorkMarkup(session, detailed, expanded, sessionRow) {
       return anchor(link.url, description, LINEAR_MARK + '<span class="linear-work-id">' + escapeHtml(link.identifier) + '</span><span class="linear-work-title">' + escapeHtml(link.title) + '</span><span class="linear-work-state"><span class="linear-work-state-full">' + escapeHtml(link.stateName) + '</span><span class="linear-work-state-compact" aria-hidden="true">' + escapeHtml(compactLinearState(link.stateName)) + '</span></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)' : '');
-    var html = anchor(link.url, description, iconHtml('github', 'github-work-brand') + iconHtml(icon, 'github-work-status') + '<span><span class="github-work-kind">' + (link.kind === 'pr' ? 'PR ' : 'Issue ') + '</span>#' + escapeHtml(String(link.number)) + '</span>', 'session-github-link github-kind-' + (link.kind === 'pr' ? 'pr' : 'issue') + ' github-state-' + state);
+    var reviewLink = Object.assign({}, link, { personalReviewState: personalReviewState(session, link) });
+    var reviewStatus = link.kind === 'pr' && state === 'open' ? prReviewStatus(reviewLink) : null;
+    var icon = link.kind === 'pr' ? (state === 'merged' ? 'git-merge' : state === 'closed' ? 'git-pull-request-closed' : state === 'draft' ? 'git-pull-request-draft' : reviewStatus ? reviewStatus.icon : 'git-pull-request') : (state === 'closed' ? 'circle-check' : 'circle-dot');
+    var statusLabel = reviewStatus ? reviewStatus.label : (state === 'merged' ? 'Merged' : state === 'closed' ? 'Closed' : state === 'draft' ? 'Draft' : state === 'open' ? 'Open' : 'Unknown');
+    var description = link.repository + ' · ' + label(link) + ' · ' + link.title + ' · ' + statusLabel + (link.checkedAt ? ' · Checked ' + new Date(link.checkedAt).toLocaleString() : '') + (link.stale ? ' (last known status; refresh unavailable)' : '');
+    var statusMarkup = '<span class="github-work-status' + (reviewStatus ? ' ' + reviewStatus.className : '') + '" title="' + escapeHtml(statusLabel) + '" aria-label="' + escapeHtml(statusLabel) + '">' + iconHtml(icon) + '</span>';
+    var html = anchor(link.url, description, iconHtml('github', 'github-work-brand') + statusMarkup + '<span><span class="github-work-kind">' + (link.kind === 'pr' ? 'PR ' : 'Issue ') + '</span>#' + escapeHtml(String(link.number)) + '</span>', 'session-github-link github-kind-' + (link.kind === 'pr' ? 'pr' : 'issue') + ' github-state-' + state);
     if (expanded) html = '<span class="github-work-entry">' + html + '<span class="github-work-entry-title">' + escapeHtml(link.title || '') + '</span><span class="github-work-entry-meta">' + escapeHtml(link.repository + ' · ' + state + (link.stale ? ' · Last known status' : '')) + '</span></span>';
     if (detailed && link.kind === 'pr') {
-      html += anchor(link.url + '/files', 'View PR changes on GitHub', 'Changes', 'github-work-action');
-      html += anchor(link.url + '#pullrequestreview', 'View PR reviews on GitHub', escapeHtml((link.review || 'Reviews').replace(/_/g, ' ').toLowerCase()), 'github-work-action');
+      var actions = anchor(link.url + '/files', 'View PR changes on GitHub', 'Changes', 'github-work-action') +
+        anchor(link.url + '#pullrequestreview', 'View PR reviews on GitHub', 'Reviews', 'github-work-action');
+      var checks = '';
       (link.checks || []).forEach(function (check) {
-        if (/^https:\/\//i.test(check.url)) html += anchor(check.url, check.name + ': ' + check.state, escapeHtml(check.name + ' · ' + check.state.toLowerCase()), 'github-work-action');
+        if (/^https:\/\//i.test(check.url)) checks += anchor(check.url, check.name + ': ' + check.state, '<span class="github-work-check-name">' + escapeHtml(check.name) + '</span><span class="github-work-check-state">' + escapeHtml(check.state.toLowerCase()) + '</span>', 'github-work-action github-work-check');
       });
+      return '<span class="github-work-pr-group" data-github-pr="' + escapeHtml(String(link.number)) + '">' +
+        '<span class="github-work-pr-header">' + html + '</span>' +
+        '<span class="github-work-pr-actions">' + actions + '</span>' +
+        (checks ? '<span class="github-work-pr-checks">' + checks + '</span>' : '') +
+        '</span>';
     }
     return html;
-  }).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>';
+  }).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-work-session="' + escapeHtml(String(session.id || session.localId || '')) + '" data-work-primary="' + escapeHtml(JSON.stringify(session.workPrimary || {})) + '" data-github-links="' + escapeHtml(JSON.stringify(safeLinks(session))) + '">+' + (links.length - displayed.length) + '</button>' : '') + '</span>';
+}
+export function applyGithubPersonalReviewStatus(message) {
+  var state = store.snap();
+  if (!message || (message.projectSlug && message.projectSlug !== state.currentSlug) || (message.accountId && message.accountId !== state.myUserId)) return;
+  var refresh = state.githubWorkRefresh || {};
+  if (message.requestId && refresh.requestId && message.requestId !== refresh.requestId) return;
+  var updates = message.personalReview || {};
+  var scope = ensurePersonalScope();
+  var personal = Object.assign({}, store.get('githubPersonalReview') || {});
+  var sessionId = String(message.sessionId);
+  Object.keys(updates).forEach(function (url) {
+    var status = updates[url];
+    if (status === 'requested' || status === 'clear') personal[scope + '\u0000' + sessionId + '\u0000' + url.toLowerCase()] = status;
+  });
+  store.set({ githubPersonalReview: personal });
+  var sessions = store.get('githubWorkSessions') || [];
+  sessions.forEach(function (session) {
+    if (String(session.localId) !== sessionId && String(session.id) !== sessionId) return;
+    document.querySelectorAll('[data-github-session-id="' + sessionIdentifier(session) + '"] .session-work-links-slot').forEach(function (slot) { slot.innerHTML = githubWorkMarkup(session, false, false, true); });
+  });
+  syncGithubSessions(sessions);
+  refreshIcons();
 }
 export function appendGithubWork(row, session, title) {
   var html = githubWorkMarkup(session, false, false, true);
@@ -84,6 +142,7 @@ export function appendGithubWork(row, session, title) {
 }
 export function syncGithubSessions(sessions) {
   bindGithubWorkPopover();
+  ensurePersonalScope();
   store.set({ githubWorkSessions: sessions || [], githubWorkProject: store.get('currentSlug') });
   var active = (sessions || []).find(function (session) { return session.active; });
   var title = document.getElementById('header-title');
@@ -122,15 +181,16 @@ export function refreshGithubWork() {
   if (previous.key === key && Date.now() - previous.at < 60000) return;
   var ws = getWs();
   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 requestId = 'github-refresh-' + Date.now() + '-' + Math.random().toString(36).slice(2);
+  store.set({ githubWorkRefresh: { key: key, at: Date.now(), requestId: requestId } });
+  ws.send(JSON.stringify({ type: 'session_github_refresh', sessionIds: ids, requestId: requestId, projectSlug: store.get('currentSlug'), accountId: store.get('myUserId') || null }));
   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() {
   closeGithubWorkPopover();
-  store.set({ githubWorkSessions: [], githubWorkProject: null, githubWorkRefresh: null });
+  store.set({ githubWorkSessions: [], githubWorkProject: null, githubWorkRefresh: null, githubPersonalReview: {}, workPrimaryPending: null });
   var header = document.getElementById('header-github-links');
   if (header) header.remove();
 }
@@ -184,6 +244,7 @@ function bindGithubWorkPopover() {
   if (store.get('githubWorkPopoverBound')) return;
   store.set({ githubWorkPopoverBound: true });
   document.addEventListener('click', function (event) {
+    if (handlePrimaryWorkClick(event)) return;
     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');
@@ -204,7 +265,11 @@ function bindGithubWorkPopover() {
     popup.setAttribute('role', 'dialog');
     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);
+    popup.dataset.sessionId = button.dataset.workSession || '';
+    var primary;
+    try { primary = JSON.parse(button.dataset.workPrimary || '{}'); } catch (error) { primary = {}; }
+    var popupLinks = links.map(function (link) { return Object.assign({}, link, { _githubSessionId: popup.dataset.sessionId }); });
+    popup.innerHTML = '<strong>' + workTitle + '</strong>' + primaryWorkPopover(popupLinks, primary, popup.dataset.sessionId, githubWorkMarkup);
     document.body.appendChild(popup);
     mountGithubWorkPopover(popup, button);
     button.setAttribute('aria-expanded', 'true');
@@ -224,3 +289,9 @@ function bindGithubWorkPopover() {
     if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.dmMode !== previous.dmMode) closeGithubWorkPopover();
   });
 }
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId) {
+    var scope = personalScope();
+    if (state.githubPersonalReviewScope !== scope) store.set({ githubPersonalReviewScope: scope, githubPersonalReview: {} });
+  }
+});

package/lib/public/modules/session-work-primary.js

@@ -0,0 +1,51 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml } from './utils.js';
+var PRIMARY_PIN = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path class="work-primary-pin-head" d="M16 9V4l1-1V2H7v1l1 1v5l-2 3v2h12v-2z"/><path d="M12 14v8"/></svg>';
+function attr(value) { return escapeHtml(String(value)).replace(/"/g, '&quot;').replace(/'/g, '&#39;'); }
+export function primaryWorkPopover(links, primary, sessionId, render) {
+  var html = ['linear', 'pr', 'issue'].map(function (type) {
+    var items = links.filter(function (link) { return (link.provider === 'linear' ? 'linear' : link.kind) === type; }).reverse();
+    if (!items.length) return '';
+    return '<section class="work-primary-group"><h3>' + ({ linear: 'Linear issues', pr: 'Pull requests', issue: 'GitHub issues' })[type] + '</h3>' + items.map(function (link) {
+      var selected = String(primary[type] || '').toLowerCase() === link.url.toLowerCase();
+      return '<div class="work-primary-row">' + render({ githubLinks: [link] }, false, true) +
+        (sessionId ? '<button type="button" class="work-primary-choice" data-primary-url="' + attr(link.url) + '" aria-label="' + attr((selected ? 'Primary: ' : 'Make primary: ') + (link.identifier || (type === 'pr' ? 'PR #' : 'Issue #') + link.number)) + '" title="' + (selected ? 'Primary' : 'Make primary') + '" aria-pressed="' + selected + '"' + (selected ? ' disabled' : '') + '>' + PRIMARY_PIN + '</button>' : '') + '</div>';
+    }).join('') + '</section>';
+  }).join('');
+  return html + '<p class="work-primary-feedback" role="status" aria-live="polite"></p>';
+}
+export function handlePrimaryWorkClick(event) {
+  var button = event.target.closest('.work-primary-choice');
+  if (!button) return false;
+  event.preventDefault(); event.stopPropagation();
+  var popup = button.closest('#github-work-popover'), ws = getWs();
+  if (!popup) return true;
+  var feedback = popup.querySelector('.work-primary-feedback');
+  if (!ws || ws.readyState !== 1) { feedback.textContent = 'Reconnect to save your selection.'; return true; }
+  var requestId = 'work-primary-' + Date.now() + '-' + Math.random().toString(36).slice(2);
+  store.set({ workPrimaryPending: { requestId: requestId, sessionId: Number(popup.dataset.sessionId), projectSlug: store.get('currentSlug') } });
+  popup.querySelectorAll('.work-primary-choice').forEach(function (control) { control.disabled = true; });
+  feedback.textContent = 'Saving…';
+  var projectSlug = store.get('currentSlug');
+  setTimeout(function () {
+    handlePrimaryWorkResult({ requestId: requestId, projectSlug: projectSlug, error: 'Save confirmation did not arrive. Reopen the list to check, or retry.' });
+  }, 15000);
+  try { ws.send(JSON.stringify({ type: 'session_work_primary_set', requestId: requestId, sessionId: Number(popup.dataset.sessionId), url: button.dataset.primaryUrl })); }
+  catch (error) { handlePrimaryWorkResult({ requestId: requestId, projectSlug: store.get('currentSlug'), error: 'Could not send your selection. Please retry.' }); }
+  return true;
+}
+export function handlePrimaryWorkResult(msg) {
+  var pending = store.get('workPrimaryPending');
+  if (!pending || msg.requestId !== pending.requestId || msg.projectSlug !== pending.projectSlug) return;
+  store.set({ workPrimaryPending: null });
+  var popup = document.getElementById('github-work-popover');
+  if (!popup || Number(popup.dataset.sessionId) !== pending.sessionId || store.get('currentSlug') !== pending.projectSlug) return;
+  popup.querySelectorAll('.work-primary-choice').forEach(function (button) {
+    var selected = msg.error ? button.getAttribute('aria-pressed') === 'true' : Object.values(msg.workPrimary || {}).some(function (url) { return url.toLowerCase() === button.dataset.primaryUrl.toLowerCase(); });
+    button.setAttribute('aria-pressed', String(selected)); button.disabled = selected;
+    button.title = selected ? 'Primary' : 'Make primary';
+    button.setAttribute('aria-label', (selected ? 'Primary: ' : 'Make primary: ') + button.getAttribute('aria-label').replace(/^(Primary|Make primary): /, ''));
+  });
+  popup.querySelector('.work-primary-feedback').textContent = msg.error || 'Primary saved.';
+}

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

@@ -0,0 +1,112 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml as escapeText } from './utils.js';
+
+function escapeHtml(value) { return escapeText(String(value)).replace(/"/g, '"').replace(/'/g, '''); }
+function state() { return store.get('sharedBrowserSettings') || {}; }
+function set(patch) { store.set({ sharedBrowserSettings: Object.assign({}, state(), patch) }); }
+function root() { return document.getElementById('shared-browser-settings'); }
+function button(label, action, target, description) {
+  return '<button type="button" data-settings-action="' + action + '" data-target="' + escapeHtml(target || '') + '" data-label="' + escapeHtml(description || target || '') + '">' + escapeHtml(label) + '</button>';
+}
+function request(operation, target) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { set({ error: 'Reconnect to manage browser data.', pending: false }); renderBrowserSettings(); return; }
+  var id = crypto.randomUUID();
+  set({ pending: true, requestId: id, error: '', notice: '' });
+  ws.send(JSON.stringify({ type: 'shared_browser_settings', sessionId: store.get('activeSessionId'), requestId: id, operation: operation, target: target }));
+  renderBrowserSettings();
+  setTimeout(function () {
+    if (state().requestId === id && state().pending) { set({ pending: false, error: 'The request timed out. Refresh to check the saved state.' }); renderBrowserSettings(); }
+  }, 15000);
+}
+export function closeBrowserSettings(restoreFocus) {
+  var wasOpen = !!state().open;
+  set({ open: false, review: null }); renderBrowserSettings();
+  var trigger = document.querySelector('[data-action="settings"]'); if (trigger && wasOpen && restoreFocus !== false) trigger.focus();
+}
+export function browserSettingsHtml() {
+  return '<section id="shared-browser-settings" class="shared-browser-settings" aria-label="Browser settings" hidden></section>';
+}
+export function bindBrowserSettings(panel) {
+  panel.querySelector('[data-action="settings"]').onclick = function () {
+    set({ open: true, page: 'sites', data: null, review: null, filter: '' });
+    request('list');
+    root().querySelector('[data-settings-action="back"]').focus();
+  };
+  root().addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeBrowserSettings(); }
+  });
+  root().addEventListener('input', function (event) {
+    if (event.target.matches('[data-settings-filter]')) { set({ filter: event.target.value }); renderRows(); root().dataset.key = JSON.stringify([state(), store.get('connected')]); }
+  });
+  root().addEventListener('click', function (event) {
+    var control = event.target.closest('[data-settings-action]');
+    if (!control || control.disabled) return;
+    var action = control.dataset.settingsAction;
+    if (action === 'back') { closeBrowserSettings(); return; }
+    if (action === 'sites' || action === 'history') { set({ page: action, filter: '', review: null, notice: '', error: '' }); renderBrowserSettings(); return; }
+    if (action === 'refresh') { request('list'); return; }
+    if (action === 'cancel') { set({ review: null }); renderBrowserSettings(); root().querySelector('[data-settings-action="refresh"]').focus(); return; }
+    if (action === 'confirm') { var review = state().review; if (review) request(review.action, review.target); return; }
+    set({ notice: '', error: '', review: { action: action, target: control.dataset.target, label: control.dataset.label || control.dataset.target } });
+    renderBrowserSettings(); root().querySelector('[data-settings-action="cancel"]').focus();
+  });
+}
+function renderRows() {
+  var el = root(), s = state(); if (!el || !s.open) return;
+  var rows = el.querySelector('.browser-settings-rows'); if (!rows) return;
+  var filter = (s.filter || '').toLowerCase();
+  var data = s.data || { sites: [], history: [] };
+  if (s.page === 'history') {
+    rows.innerHTML = data.history.filter(function (entry) { return entry.url.toLowerCase().includes(filter); }).map(function (entry) {
+      return '<div class="browser-settings-row"><div><span class="browser-settings-url">' + escapeHtml(entry.url) + '</span><small>' + escapeHtml(new Date(entry.at).toLocaleString()) + '</small></div>' + button('Remove', 'delete_history', entry.id, entry.url) + '</div>';
+    }).join('');
+  } else {
+    rows.innerHTML = data.sites.filter(function (site) { return site.host.toLowerCase().includes(filter); }).map(function (site) {
+      return '<details><summary>' + escapeHtml(site.host) + '<small>' + site.cookies.length + (site.cookies.length === 1 ? ' cookie · ' : ' cookies · ') + site.origins.length + (site.origins.length === 1 ? ' storage origin' : ' storage origins') + '</small></summary><div class="browser-settings-row"><span>Cookies and site storage</span>' + button('Remove site data', 'delete_site', site.host) + '</div>' +
+        site.origins.map(function (origin) { return '<p class="browser-settings-origin">' + escapeHtml(origin.origin) + '<small>' + origin.localStorage + ' localStorage entries · ' + origin.databases + ' IndexedDB databases</small></p>'; }).join('') +
+        site.cookies.map(function (cookie) {
+          var info = cookie.domain + cookie.path + ' · ' + (cookie.expires === -1 ? 'Session cookie' : 'Expires ' + new Date(cookie.expires * 1000).toLocaleDateString()) + (cookie.httpOnly ? ' · HttpOnly' : '') + (cookie.secure ? ' · Secure' : '') + (cookie.partitioned ? ' · Partitioned' : '');
+          return '<div class="browser-settings-row"><div><span>' + escapeHtml(cookie.name) + '</span><small>' + escapeHtml(info) + '</small></div>' + button('Remove cookie', 'delete_cookie', cookie.id, cookie.name + ' · ' + cookie.domain + cookie.path) + '</div>';
+        }).join('') + '</details>';
+    }).join('');
+  }
+  if (!rows.innerHTML) rows.innerHTML = '<p class="browser-settings-muted">' + (s.pending && !s.data ? 'Loading saved data…' : filter ? 'No matching entries.' : s.page === 'history' ? 'No saved browsing history.' : 'No saved cookies or site data.') + '</p>';
+  rows.querySelectorAll('button').forEach(function (control) { control.disabled = !!s.pending || !store.get('connected'); });
+}
+export function renderBrowserSettings() {
+  var el = root(); if (!el) return;
+  var s = state(), panel = el.closest('.shared-browser-panel');
+  var browser = store.get('sharedBrowser');
+  var trigger = panel.querySelector('[data-action="settings"]');
+  trigger.hidden = !(browser && browser.personalCookiesAvailable);
+  trigger.disabled = !store.get('connected');
+  trigger.setAttribute('aria-expanded', String(!!s.open));
+  el.hidden = !s.open;
+  panel.classList.toggle('browser-settings-open', !!s.open);
+  if (!s.open) return;
+  var key = JSON.stringify([s, store.get('connected')]); if (el.dataset.key === key) return; el.dataset.key = key;
+  var page = s.page || 'sites';
+  el.innerHTML = '<div class="browser-settings-heading">' + button('Back to browser', 'back') + '<h3>Browser settings</h3></div><p class="browser-settings-muted">Personal · Shared across your Mates. Incognito tabs do not save data here.</p>' +
+    '<nav aria-label="Browser settings sections">' + button('Cookies & site data', 'sites') + button('History', 'history') + '</nav>' +
+    '<p class="browser-settings-muted">' + (page === 'sites' ? 'Cookies, localStorage and IndexedDB are saved for your account. New personal tabs restore saved site storage. Removing data may sign you out. Removals also apply to open personal tabs. Sites may create new data afterwards.' : 'Your latest 500 page visits. Clearing this list leaves open tabs, their Back/Forward navigation and conversation activity unchanged.') + '</p>' +
+    '<div class="browser-settings-tools"><input data-settings-filter aria-label="Filter saved browser data" placeholder="' + (page === 'sites' ? 'Find a site' : 'Find a page') + '" value="' + escapeHtml(s.filter || '') + '">' + button('Refresh', 'refresh') + button(page === 'sites' ? 'Clear all site data' : 'Clear history', page === 'sites' ? 'clear_data' : 'clear_history') + '</div>' +
+    '<p class="browser-settings-feedback" role="status">' + escapeHtml(s.error || (!store.get('connected') ? 'Disconnected. Reconnect and refresh to see current saved data.' : s.pending ? 'Updating…' : s.notice || '')) + '</p>' +
+    (s.review ? '<div class="browser-settings-review" role="group" aria-label="Confirm removal"><strong>' + (s.review.action.includes('history') ? 'Remove browsing history?' : 'Remove saved site data?') + '</strong><p>' + (s.review.action.includes('history') ? 'This removes ' + (s.review.action === 'clear_history' ? 'all saved visits' : 'this saved visit') + ' from your personal history.' : s.review.action === 'delete_cookie' ? 'This removes ' + escapeHtml(s.review.label) + ' across your personal Mate browsers and may sign you out.' : 'This removes ' + (s.review.action === 'clear_data' ? 'all cookies and site storage' : 'cookies and storage for ' + escapeHtml(s.review.target)) + ' across your personal Mate browsers and may sign you out.') + '</p>' + button('Cancel', 'cancel') + button('Remove', 'confirm') + '</div>' : '') +
+    '<div class="browser-settings-rows"></div>';
+  el.querySelector('[data-settings-action="' + page + '"]').setAttribute('aria-current', 'page');
+  el.querySelectorAll('button').forEach(function (control) { control.disabled = control.dataset.settingsAction !== 'back' && (!!s.pending || !store.get('connected')); });
+  renderRows();
+}
+export function handleBrowserSettingsMessage(msg) {
+  if (!msg.requestId || msg.requestId !== state().requestId) return false;
+  if (msg.type === 'shared_browser_settings') {
+    var removed = !!state().review;
+    set({ data: msg.settings, pending: false, review: null, error: '', notice: removed ? 'Removed from your saved browser data.' : '' });
+  } else if (msg.type === 'shared_browser_error') set({ pending: false, error: msg.error });
+  else return false;
+  renderBrowserSettings();
+  if (state().open && removed) root().querySelector('[data-settings-action="refresh"]').focus();
+  return true;
+}

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

@@ -1,10 +1,11 @@
+import { iconHtml, refreshIcons } from './icons.js';
 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')]);
+  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase, tab.incognito, tab.personalCookiesAvailable]; }), selected && selected.id, store.get('connected')]);
   if (bar.dataset.key === key) return;
   bar.dataset.key = key;
   bar.replaceChildren();
@@ -14,9 +15,9 @@ export function renderBrowserTabs(el, select, send) {
     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 label = document.createElement('span'); label.textContent = title + (tab.personalCookiesAvailable && tab.incognito ? ' · Incognito' : '');
     var owner = document.createElement('small'); owner.textContent = tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'Shared' : 'You only';
-    button.append(label, owner); button.title = title + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
+    button.append(label, owner); button.title = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
     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;
@@ -28,6 +29,15 @@ export function renderBrowserTabs(el, select, send) {
     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.title = selected && selected.personalCookiesAvailable ? 'New tab · Personal browser' : 'New incognito tab';
   add.onclick = function () { send('open', { newTab: true }); };
   bar.appendChild(add);
+  if (selected && selected.personalCookiesAvailable) {
+    var incognito = document.createElement('button'); incognito.type = 'button';
+    incognito.innerHTML = iconHtml('glasses');
+    incognito.setAttribute('aria-label', 'New incognito tab'); incognito.title = 'New incognito tab · Site data is not saved';
+    incognito.disabled = !store.get('connected');
+    incognito.onclick = function () { send('open', { newTab: true, incognito: true }); };
+    bar.appendChild(incognito); refreshIcons();
+  }
 }

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

@@ -1,3 +1,5 @@
+import { browserLinkTarget, initBrowserLinks } from './clay-browser-links.js';
+import { browserSettingsHtml, bindBrowserSettings, renderBrowserSettings, closeBrowserSettings, handleBrowserSettingsMessage } from './shared-browser-settings.js';
 import { renderBrowserTabs } from './shared-browser-tabs.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -50,15 +52,15 @@ function ensurePanel() {
   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>' +
+    iconButton('settings', 'settings-2', 'Browser settings') + 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>' +
+    browserSettingsHtml() + '<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 use with Clay</h3><p>Enter an address to browse together.<br>Localhost connects to the Clay host.</p><p class="shared-browser-private">Site data lasts 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 class="shared-browser-control-status" role="status" aria-live="polite">You and Clay can control this browser</span><button type="button" data-action="control" aria-pressed="false"></button></div>' +
-    '<div class="shared-browser-details">' + viewportMenuHtml() + '<button type="button" data-action="end">End browser</button></div></footer>';
+    '<div class="shared-browser-details"><span class="shared-browser-cookie-mode"></span>' + 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(); };
@@ -69,8 +71,9 @@ function ensurePanel() {
     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'); };
+  el.querySelector('[data-action="end"]').onclick = function () { var browser = store.get('sharedBrowser'); send(browser && browser.phase === 'ended' ? 'open' : 'end', browser && browser.phase === 'ended' ? { incognito: browser.incognito } : undefined); };
   bindViewportMenu(el);
+  bindBrowserSettings(el);
   var observer = new ResizeObserver(layoutMonitor);
   observer.observe(el.querySelector('.shared-browser-viewport'));
   bindBrowserInput(el.querySelector('canvas'), el.querySelector('textarea'));
@@ -141,11 +144,16 @@ function render() {
   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 personal = browser && browser.incognito === false;
+  el.querySelector('.shared-browser-cookie-mode').textContent = personal ? 'Personal browser' : 'Incognito';
+  el.querySelector('.shared-browser-cookie-mode').title = personal ? 'Cookies and site storage are saved for your account across your Mates.' : 'Cookies and site storage are isolated and discarded when this tab ends.';
+  el.querySelector('.shared-browser-private').textContent = personal ? 'Your cookies and site storage are remembered across your Mates and browser restarts.' : 'Site data lasts only for this browser session.';
   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, operable);
+  renderBrowserSettings();
   renderBrowserActivity(el, browser, connected);
   layoutMonitor();
 }
@@ -163,6 +171,16 @@ function selectBrowserTab(id) {
   setBrowserTab(browser);
   send('view', { visible: desktop() && !document.hidden }); render();
 }
+export function openSharedBrowserAt(value) {
+  var url = browserLinkTarget('browser:' + value);
+  if (!url) throw new Error('Enter a valid HTTP or HTTPS browser address.');
+  if (!desktop()) throw new Error('Clay Browser is available on desktop screens.');
+  if (!eligible()) throw new Error('Browser access is unavailable in this conversation.');
+  if (!store.get('connected')) throw new Error('Reconnect before opening this browser link.');
+  ensurePanel(); closeBrowserSettings(false);
+  claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
+  ui({ error: '' }); send('open', { url: url }); render();
+}
 export function openSharedBrowser() {
   if (!eligible() || !store.get('connected')) return;
   ensurePanel();
@@ -175,6 +193,7 @@ export function openSharedBrowser() {
 }
 export function hideSharedBrowser() {
   closeViewportMenu();
+  closeBrowserSettings();
   clearBrowserInput();
   if (store.get('sharedBrowserOpen')) send('view', { visible: false });
   store.set({ sharedBrowserOpen: false });
@@ -184,6 +203,7 @@ export function hideSharedBrowser() {
 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 (handleBrowserSettingsMessage(msg)) return true;
   if (msg.type === 'shared_browser_state') {
     var old = store.get('sharedBrowser');
     var tabs = msg.browsers || (msg.browser ? [msg.browser] : []);
@@ -217,6 +237,7 @@ export function handleSharedBrowserMessage(msg) {
   return true;
 }
 export function initSharedBrowser() {
+  initBrowserLinks();
   var button = document.getElementById('shared-browser-btn');
   if (button) button.onclick = openSharedBrowser;
   var toggle = document.getElementById('shared-browser-toggle-btn');
@@ -233,7 +254,7 @@ 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: {} });
+    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {}, sharedBrowserSettings: {} });
     if (state.connected) send('state_request');
     render();
   } else if (state.connected !== previous.connected) {

package/lib/public/modules/sidebar-session-folders-ui.js

@@ -353,7 +353,7 @@ function renderSection(section, ctx, kind) {
     body.appendChild(empty);
   }
   var view = currentFolderState().view;
-  var dateGroups = isFavorites ? null : groupUnitsByDate(section.units, view.sort, view.direction);
+  var dateGroups = isFavorites || view.showDateHeadings === false ? null : groupUnitsByDate(section.units, view.sort, view.direction);
   if (dateGroups) {
     for (var g = 0; g < dateGroups.length; g++) {
       var ids = groupRootSessionIds(dateGroups[g].units);

package/lib/public/modules/split-view.js

@@ -1,3 +1,4 @@
+import { handlePaneBrowserMessage } from './pane-browser-bridge.js';
 import { openWireframe } from './wireframe-workbench.js';
 // Two-pane iframe shell for the split-view spike.
 
@@ -168,6 +169,7 @@ function handlePaneMessage(event) {
     return;
   }
   if (handlePaneIssueMessage(event, host)) return;
+  if (handlePaneBrowserMessage(event, host)) return;
   if (handlePaneFileMessage(event, host, openFile, revealFilesPanel)) return;
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");