clay-server 5.3.0-beta.6 → 5.3.0

package/lib/public/modules/project-admin-overview.js

@@ -1,21 +1,136 @@
-// This page never opens a project socket or loads project content modules.
+// Restricted projects use public shell primitives without opening a project socket.
+import { createStore, store } from './store.js';
+import { groupProjects, getProjectAbbrev } from './project-grouping.js';
+import { computeVars, validateTheme, defaultDarkFallback, defaultLightFallback } from './theme-palette.js';
+import { initTooltips } from './tooltip.js';
+
+var data = JSON.parse(document.getElementById('project-admin-data').textContent);
+createStore({ adminOverview: data, adminUsage: null, adminUsageLoading: false, adminUsageTimer: null, adminUsageGeneration: 0, adminRailCollapsed: {}, adminThemes: null });
+
+function applyAppearance() {
+  var seed = window.__clayAppearanceSeed;
+  var mode = seed && seed.configured && seed.mode || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+  var id = seed && (seed[mode + 'Theme'] || seed.theme);
+  var themes = store.get('adminThemes') || {};
+  var theme = themes[id] && themes[id].variant === mode ? themes[id] : (mode === 'light' ? defaultLightFallback : defaultDarkFallback);
+  if (!validateTheme(theme)) return;
+  var vars = computeVars(theme);
+  Object.keys(vars).forEach(function (name) { document.documentElement.style.setProperty(name, vars[name]); });
+  document.documentElement.classList.toggle('light-theme', theme.variant === 'light');
+  document.documentElement.classList.toggle('dark-theme', theme.variant !== 'light');
+}
+applyAppearance();
+fetch('/api/themes', { credentials: 'same-origin' }).then(function (response) { if (!response.ok) throw new Error('Themes unavailable'); return response.json(); }).then(function (themes) {
+  var valid = {};
+  Object.entries(Object.assign({}, themes.bundled, themes.custom)).forEach(function (entry) { if (validateTheme(entry[1])) valid[entry[0]] = entry[1]; });
+  store.set({ adminThemes: valid }); applyAppearance();
+}).catch(function () {});
+matchMedia('(prefers-color-scheme: light)').addEventListener('change', applyAppearance);
+
+function projectLink(project, worktree) {
+  var link = document.createElement('a');
+  link.className = (worktree ? 'icon-strip-wt-item' : 'icon-strip-item') + (project.slug === data.project.slug ? ' active' : '');
+  link.href = '/p/' + encodeURIComponent(project.slug) + '/';
+  link.dataset.slug = project.slug;
+  link.dataset.tip = project.title + (project.contentAccess === false ? ' · Administrative overview' : '');
+  link.setAttribute('aria-label', link.dataset.tip);
+  if (project.slug === data.project.slug) link.setAttribute('aria-current', 'page');
+  var label = document.createElement('span');
+  label.className = worktree ? 'wt-branch-abbrev' : 'icon-strip-name';
+  if (project.icon) label.classList.add('project-emoji');
+  label.textContent = project.icon || getProjectAbbrev(project.title);
+  link.appendChild(label);
+  return link;
+}
+function renderNavigation() {
+  var container = document.getElementById('icon-strip-projects');
+  var grouped = groupProjects(data.projects);
+  grouped.parents.forEach(function (project) {
+    var children = grouped.wtByParent[project.slug] || [];
+    var link = projectLink(project, false);
+    if (!children.length) { container.appendChild(link); return; }
+    var group = document.createElement('div');
+    group.className = 'icon-strip-group'; group.dataset.parentSlug = project.slug;
+    var header = document.createElement('div'); header.className = 'project-admin-rail-header';
+    header.appendChild(link); link.classList.add('folder-header');
+    var toggle = document.createElement('button');
+    toggle.type = 'button'; toggle.className = 'icon-strip-group-chevron'; toggle.dataset.tip = 'Toggle worktrees';
+    toggle.setAttribute('aria-label', 'Toggle ' + project.title + ' worktrees'); toggle.setAttribute('aria-expanded', 'true');
+    var list = document.createElement('div'); list.className = 'icon-strip-group-items'; list.id = 'worktrees-' + project.slug;
+    toggle.setAttribute('aria-controls', list.id);
+    toggle.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 3v12a6 6 0 0 0 12 0V6M6 7h0"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="6" r="3"/></svg>';
+    toggle.addEventListener('click', function () {
+      var collapsed = group.classList.toggle('collapsed'); list.inert = collapsed;
+      toggle.setAttribute('aria-expanded', String(!collapsed));
+      var state = Object.assign({}, store.get('adminRailCollapsed')); state[project.slug] = collapsed; store.set({ adminRailCollapsed: state });
+    });
+    children.forEach(function (child) { list.appendChild(projectLink(child, true)); });
+    header.appendChild(toggle); group.append(header, list); container.appendChild(group);
+  });
+  var parent = data.projects.find(function (project) { return project.slug === data.project.parentSlug; });
+  var label = document.getElementById('project-admin-parent');
+  if (parent) { label.hidden = false; label.textContent = 'Worktree of ' + parent.title; }
+}
+renderNavigation();
+initTooltips();
+
 var tabs = Array.from(document.querySelectorAll('[role="tab"]'));
 function select(tab) {
   tabs.forEach(function (item) {
     var active = item === tab;
-    item.setAttribute("aria-selected", String(active));
-    item.tabIndex = active ? 0 : -1;
-    document.getElementById(item.getAttribute("aria-controls")).hidden = !active;
+    item.setAttribute('aria-selected', String(active)); item.tabIndex = active ? 0 : -1;
+    document.getElementById(item.getAttribute('aria-controls')).hidden = !active;
   });
 }
 tabs.forEach(function (tab, index) {
-  tab.addEventListener("click", function () { select(tab); });
-  tab.addEventListener("keydown", function (event) {
-    if (["ArrowLeft", "ArrowRight", "Home", "End"].indexOf(event.key) === -1) return;
+  tab.addEventListener('click', function () { select(tab); });
+  tab.addEventListener('keydown', function (event) {
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].indexOf(event.key) === -1) return;
     event.preventDefault();
-    var target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs[tabs.length - 1] : tabs[(index + (event.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length];
-    select(target);
-    target.focus();
+    var target = event.key === 'Home' ? tabs[0] : event.key === 'End' ? tabs[tabs.length - 1] : tabs[(index + (event.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length];
+    select(target); target.focus();
   });
 });
 select(tabs[0]);
+
+function size(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return 'Unavailable';
+  var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'], index = 0;
+  while (bytes >= 1024 && index < units.length - 1) { bytes /= 1024; index++; }
+  return bytes.toFixed(index ? 1 : 0) + ' ' + units[index];
+}
+function clearUsage() {
+  ['bytes', 'files', 'free', 'capacity'].forEach(function (field) { document.getElementById('usage-' + field).textContent = '—'; });
+  store.set({ adminUsage: null });
+}
+async function loadUsage(refresh) {
+  if (store.get('adminUsageLoading')) return;
+  clearTimeout(store.get('adminUsageTimer'));
+  var generation = store.get('adminUsageGeneration');
+  store.set({ adminUsageLoading: true });
+  var button = document.getElementById('project-admin-refresh'), status = document.getElementById('usage-status');
+  button.disabled = true; document.getElementById('project-admin-usage').setAttribute('aria-busy', 'true');
+  try {
+    var response = await fetch('/api/server/storage/project/' + encodeURIComponent(data.project.slug) + (refresh ? '?refresh=1' : ''), { credentials: 'same-origin' });
+    var result = await response.json();
+    if (generation !== store.get('adminUsageGeneration')) return;
+    if (!response.ok) { if ([401, 403, 404, 409].indexOf(response.status) >= 0) clearUsage(); throw new Error(result.error || 'Storage measurement failed.'); }
+    if (result.slug !== data.project.slug) throw new Error('Storage response belongs to another project.');
+    store.set({ adminUsage: result });
+    var usage = result.usage;
+    if (usage && usage.available) {
+      document.getElementById('usage-bytes').textContent = (result.partial || result.scanning ? 'At least ' : '') + size(usage.bytes);
+      document.getElementById('usage-files').textContent = (result.partial || result.scanning ? 'At least ' : '') + Number(usage.files).toLocaleString();
+      document.getElementById('usage-free').textContent = size(usage.availableBytes);
+      document.getElementById('usage-capacity').textContent = size(usage.capacityBytes);
+    } else clearUsage();
+    status.textContent = result.scanning ? 'Scan in progress. Totals are not final.' : !usage || !usage.available ? 'Storage is unavailable: the directory is missing, unreadable or shared by multiple registrations.' : (result.partial ? 'Partial scan; some paths could not be measured. ' : '') + 'Measured ' + new Date(result.checkedAt).toLocaleString() + '. Cached for up to 5 minutes.';
+    if (result.scanning && !document.hidden) store.set({ adminUsageTimer: setTimeout(function () { loadUsage(false); }, 1500) });
+  } catch (error) { if (generation === store.get('adminUsageGeneration')) status.textContent = error.message + (store.get('adminUsage') ? ' Previous measurement retained.' : ''); }
+  finally { if (generation === store.get('adminUsageGeneration')) { store.set({ adminUsageLoading: false }); button.disabled = false; document.getElementById('project-admin-usage').setAttribute('aria-busy', 'false'); } }
+}
+document.getElementById('project-admin-refresh').addEventListener('click', function () { loadUsage(true); });
+document.addEventListener('visibilitychange', function () { if (document.hidden) clearTimeout(store.get('adminUsageTimer')); else if (store.get('adminUsage') && store.get('adminUsage').scanning) loadUsage(false); });
+window.addEventListener('pagehide', function () { clearTimeout(store.get('adminUsageTimer')); store.set({ adminUsageGeneration: store.get('adminUsageGeneration') + 1 }); });
+window.addEventListener('pageshow', function (event) { if (event.persisted) { clearUsage(); store.set({ adminUsageLoading: false }); loadUsage(false); } });
+loadUsage(false);

package/lib/public/modules/project-grouping.js

@@ -20,3 +20,12 @@ export function groupProjects(projects) {
   }
   return { parents: parents, wtByParent: wtByParent };
 }
+
+export function getProjectAbbrev(name) {
+  if (!name) return "?";
+  var words = name.replace(/[^a-zA-Z0-9\s]/g, "").trim().split(/\s+/);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}

package/lib/public/modules/server-settings-controls.js

@@ -4,6 +4,23 @@ import { showToast } from './utils.js';
 import { confirmSettingsAction, clearSettingsDraft, setSettingsDraft } from './server-settings-state.js';
 import { enhanceSettingsSelects } from './settings-select.js';
 
+var controlSettings = {
+  set_keep_awake: { config: 'keepAwake', field: 'value' },
+  set_image_retention: { config: 'imageRetentionDays', field: 'days' },
+  set_update_channel: { config: 'updateChannel', field: 'channel' }
+};
+function controlValue(input, type) {
+  if (type === 'set_image_retention') return Number(input.value);
+  if (type === 'set_update_channel') return input.checked ? 'beta' : 'stable';
+  return input.checked;
+}
+function savedControlValue(type) {
+  var value = (store.get('serverSettingsConfig') || {})[controlSettings[type].config];
+  if (type === 'set_image_retention') return value === undefined ? 7 : Number(value);
+  if (type === 'set_update_channel') return value === 'beta' ? 'beta' : 'stable';
+  return !!value;
+}
+
 function status(id, text) {
   var el = document.getElementById(id);
   if (el) { el.textContent = text; el.classList.remove('hidden'); }
@@ -19,7 +36,7 @@ function sendSetting(type, values, buttonId, statusId) {
   if (input) { input.disabled = true; input.dispatchEvent(new Event('settings-sync')); }
   status(statusId, 'Saving…');
   var pending = Object.assign({}, store.get('serverSettingsPending') || {});
-  pending[type] = { buttonId: buttonId, statusId: statusId };
+  pending[type] = { buttonId: buttonId, statusId: statusId, submitted: controlSettings[type] ? values[controlSettings[type].field] : null };
   store.set({ serverSettingsPending: pending });
   ws.send(JSON.stringify(Object.assign({ type: type }, values)));
   setTimeout(function () {
@@ -51,14 +68,25 @@ export function handleServerSettingResult(msg) {
   var input = request.buttonId === 'settings-pin-save-btn' ? document.getElementById('settings-pin-input') : request.buttonId.endsWith('-save') ? document.getElementById(request.buttonId.slice(0, -5)) : null;
   if (input) { input.disabled = false; input.dispatchEvent(new Event('settings-sync')); }
   status(request.statusId, msg.ok ? 'Saved. ' + (msg.timing || '') : (msg.error || 'Could not save. Retry your change.'));
-  if (msg.ok) clearSettingsDraft(type);
+  if (msg.ok) {
+    var setting = controlSettings[type];
+    if (setting) {
+      var config = Object.assign({}, store.get('serverSettingsConfig') || {});
+      config[setting.config] = request.submitted;
+      store.set({ serverSettingsConfig: config });
+      var dirty = input && controlValue(input, type) !== savedControlValue(type);
+      setSettingsDraft(type, dirty);
+      if (button) button.hidden = !dirty;
+      if (dirty) status(request.statusId, 'Submitted value saved. Newer edits remain unsaved.');
+    } else clearSettingsDraft(type);
+  }
 }
 
 function finishSetting(msg, id, field) {
   handleServerSettingResult(msg);
   var el = document.getElementById(id);
   var key = 'set_keep_awake';
-  if (!msg.type.endsWith('_result') && (store.get('serverSettingsDrafts') || {})[key]) return;
+  if ((store.get('serverSettingsDrafts') || {})[key]) return;
   if (el && msg.ok !== false && msg[field] !== undefined) el.checked = !!msg[field];
 }
 
@@ -108,7 +136,8 @@ export function initServerControls() {
     var save = document.createElement('button'); save.type = 'button'; save.className = 'settings-btn-sm'; save.textContent = 'Save changes';
     save.id = entry[0] + '-save'; save.hidden = true; receipt.insertAdjacentElement('beforebegin', save);
     input.onchange = function () {
-      setSettingsDraft(entry[1], true); save.hidden = false; receipt.textContent = entry[3];
+      var dirty = controlValue(input, entry[1]) !== savedControlValue(entry[1]);
+      setSettingsDraft(entry[1], dirty); save.hidden = !dirty; receipt.textContent = dirty ? entry[3] : 'No unsaved changes';
     };
     save.onclick = function () {
       var values = {}; values[entry[2]] = entry[2] === 'days' ? Number(input.value) : entry[2] === 'channel' ? (input.checked ? 'beta' : 'stable') : input.checked;

package/lib/public/modules/session-folder-toolbar.js

@@ -165,7 +165,7 @@ export function renderFolderToolbar(surface, displayCounts) {
   view.setAttribute("aria-haspopup", "true");
   var viewState = store.get('sessionFolderViewMenu');
   view.setAttribute("aria-expanded", String(!!(viewState && viewState.surface === surface)));
-  view.innerHTML = iconHtml("sliders-horizontal") + "<span>View</span>";
+  view.innerHTML = iconHtml("sliders-horizontal") + "<span>View options</span>";
   view.addEventListener("click", function () { toggleViewMenu(surface); });
 
   var magnifier = document.createElement("button");

package/lib/public/modules/session-tool-item.js

@@ -0,0 +1,86 @@
+import { clayToolGroupSummary } from './clay-tool-presentation.js';
+import { iconHtml } from './icons.js';
+
+// Shared stateless activity chrome for live sessions and read-only transcripts.
+export function createSessionToolItem(id, name) {
+  var el = document.createElement("div");
+  el.className = "tool-item";
+  if (id != null) el.dataset.toolId = id;
+  el.innerHTML =
+    '<div class="tool-header">' +
+    '<span class="tool-chevron">' + iconHtml("chevron-right") + '</span>' +
+    '<span class="tool-bullet"></span>' +
+    '<span class="tool-name"></span>' +
+    '<span class="tool-desc"></span>' +
+    '<span class="tool-status-icon">' + iconHtml("loader", "icon-spin") + '</span>' +
+    '</div>' +
+    '<div class="tool-subtitle">' +
+    '<span class="tool-connector">&#9492;</span>' +
+    '<span class="tool-subtitle-text">Running...</span>' +
+    '</div>';
+
+  el.querySelector(".tool-name").textContent = name;
+
+  return el;
+}
+
+export function createSessionToolGroup(avatarUrl) {
+  var group = document.createElement('div'); group.className = 'tool-group';
+  var parent = group;
+  if (avatarUrl) {
+    var image = document.createElement('img'); image.className = 'dm-bubble-avatar dm-bubble-avatar-mate'; image.src = avatarUrl; image.alt = ''; group.appendChild(image);
+    parent = document.createElement('div'); parent.className = 'dm-bubble-content'; group.appendChild(parent);
+  }
+  parent.innerHTML = '<div class="tool-group-header" style="display:none"><span class="tool-group-chevron">' + iconHtml('chevron-right') + '</span><span class="tool-group-bullet"></span><span class="tool-group-label">Running...</span><span class="tool-group-status-icon">' + iconHtml('loader', 'icon-spin') + '</span></div><div class="tool-group-items"></div>';
+  return group;
+}
+
+export function sessionToolGroupSummary(group, tools) {
+  var claySummary = clayToolGroupSummary(group, tools);
+  if (claySummary) return claySummary;
+  var names = group.toolNames;
+  var count = names.length;
+  var allDone = group.doneCount >= count;
+
+  // Count by tool name
+  var counts = {};
+  for (var i = 0; i < names.length; i++) {
+    counts[names[i]] = (counts[names[i]] || 0) + 1;
+  }
+  var uniqueNames = Object.keys(counts);
+
+  if (uniqueNames.length === 1) {
+    var name = uniqueNames[0];
+    var n = counts[name];
+    if (allDone) {
+      switch (name) {
+        case "Read": return "Read " + n + " file" + (n > 1 ? "s" : "");
+        case "Edit": return "Edited " + n + " file" + (n > 1 ? "s" : "");
+        case "Write": return "Wrote " + n + " file" + (n > 1 ? "s" : "");
+        case "Bash": return "Ran " + n + " command" + (n > 1 ? "s" : "");
+        case "Grep": return "Searched " + n + " pattern" + (n > 1 ? "s" : "");
+        case "Glob": return "Found " + n + " pattern" + (n > 1 ? "s" : "");
+        case "Task": return "Ran " + n + " task" + (n > 1 ? "s" : "");
+        case "WebSearch": return "Searched " + n + " quer" + (n > 1 ? "ies" : "y");
+        case "WebFetch": return "Fetched " + n + " URL" + (n > 1 ? "s" : "");
+        default: return "Ran " + n + " tool" + (n > 1 ? "s" : "");
+      }
+    }
+    switch (name) {
+      case "Read": return "Reading " + n + " file" + (n > 1 ? "s" : "") + "...";
+      case "Edit": return "Editing " + n + " file" + (n > 1 ? "s" : "") + "...";
+      case "Write": return "Writing " + n + " file" + (n > 1 ? "s" : "") + "...";
+      case "Bash": return "Running " + n + " command" + (n > 1 ? "s" : "") + "...";
+      case "Grep": return "Searching " + n + " pattern" + (n > 1 ? "s" : "") + "...";
+      case "Glob": return "Finding " + n + " pattern" + (n > 1 ? "s" : "") + "...";
+      case "Task": return "Running " + n + " task" + (n > 1 ? "s" : "") + "...";
+      case "WebSearch": return "Searching " + n + " quer" + (n > 1 ? "ies" : "y") + "...";
+      case "WebFetch": return "Fetching " + n + " URL" + (n > 1 ? "s" : "") + "...";
+      default: return "Running " + n + " tool" + (n > 1 ? "s" : "") + "...";
+    }
+  }
+
+  // Mixed tools
+  if (allDone) return "Ran " + count + " tools";
+  return "Running " + count + " tools...";
+}

package/lib/public/modules/settings-select.js

@@ -55,8 +55,9 @@ export function enhanceSettingsSelects(root) {
         item.hidden = option.hidden;
         item.onclick = function (event) {
           event.preventDefault();
+          var changed = select.value !== option.value;
           select.value = option.value;
-          select.dispatchEvent(new Event('change', { bubbles: true }));
+          if (changed) select.dispatchEvent(new Event('change', { bubbles: true }));
           sync();
           close(true);
         };

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

@@ -7,37 +7,53 @@ export function renderBrowserTabs(el, select, send) {
   var selected = store.get('sharedBrowser');
   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;
+  var focused = bar.contains(document.activeElement) ? document.activeElement : null;
+  var focusedId = focused && focused.dataset.browserId, focusedAction = focused && focused.dataset.tabAction;
+  var previousSelection = bar.dataset.selected;
+  var previousStrip = bar.querySelector('.shared-browser-tab-list'), scrollLeft = previousStrip ? previousStrip.scrollLeft : 0;
+  bar.dataset.key = key; bar.dataset.selected = selected && selected.id || '';
   bar.replaceChildren();
+  var strip = document.createElement('div'); strip.className = 'shared-browser-tab-list'; strip.setAttribute('role', 'presentation');
+  bar.appendChild(strip);
   tabs.forEach(function (tab, index) {
-    var item = document.createElement('div'); item.className = 'shared-browser-tab';
+    var item = document.createElement('div'); item.className = 'shared-browser-tab'; item.setAttribute('role', 'presentation');
+    var active = !!selected && selected.id === tab.id;
     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 + (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.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.dataset.browserId = tab.id; button.dataset.tabAction = 'select';
+    button.setAttribute('aria-selected', String(active)); button.tabIndex = active ? 0 : -1;
+    var title = 'New tab';
+    try { if (tab.url) title = new URL(tab.url).hostname || 'New tab'; } catch (e) {}
+    var mode = tab.phase === 'ended' ? 'Ended' : tab.phase === 'starting' ? 'Starting' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.';
+    var description = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + mode;
+    var label = document.createElement('span'); label.className = 'shared-browser-tab-label'; label.textContent = title;
+    button.innerHTML = iconHtml(tab.personalCookiesAvailable && tab.incognito ? 'glasses' : 'globe');
+    button.appendChild(label); button.setAttribute('aria-label', description); button.setAttribute('data-tip', description);
+    item.dataset.phase = tab.phase; item.dataset.control = tab.control;
     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');
+    var close = document.createElement('button'); close.type = 'button'; close.className = 'shared-browser-tab-close'; close.innerHTML = iconHtml('x');
+    close.dataset.browserId = tab.id; close.dataset.tabAction = 'close';
+    close.setAttribute('aria-label', 'Close browser tab ' + (index + 1)); close.setAttribute('data-tip', 'Close tab'); close.disabled = !store.get('connected');
     close.onclick = function () { send('close', { browserId: tab.id }); };
-    item.append(button, close); bar.appendChild(item);
+    item.append(button, close); strip.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();
+  function addButton(icon, label, description, fields, action) {
+    var button = document.createElement('button'); button.type = 'button'; button.className = 'shared-browser-new-tab';
+    button.innerHTML = iconHtml(icon); button.dataset.tabAction = action;
+    button.setAttribute('aria-label', label); button.setAttribute('data-tip', description); button.disabled = !store.get('connected');
+    button.onclick = function () { send('open', fields); }; bar.appendChild(button);
   }
+  addButton('plus', 'New browser tab', selected && selected.personalCookiesAvailable ? 'New tab · Personal browser' : 'New incognito tab', { newTab: true }, 'new');
+  if (selected && selected.personalCookiesAvailable) addButton('glasses', 'New incognito tab', 'New incognito tab · Site data is not saved', { newTab: true, incognito: true }, 'incognito');
+  refreshIcons();
+  strip.scrollLeft = scrollLeft;
+  var buttons = Array.from(bar.querySelectorAll('button'));
+  var replacement = focused && buttons.find(function (button) { return button.dataset.browserId === focusedId && button.dataset.tabAction === focusedAction; });
+  if (focused) (replacement || bar.querySelector('[aria-selected="true"]') || buttons[0]).focus({ preventScroll: true });
+  var current = bar.querySelector('[aria-selected="true"]');
+  if (current && previousSelection !== bar.dataset.selected) current.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 }

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

@@ -15,7 +15,7 @@ import { openAddProjectModal } from './project-start-dialog.js';
 import { showHomeHub } from './app-home-hub.js';
 import { getPendingTuiAttention } from './app-notifications.js';
 import { isExternalWorktree, externalWorktreeTooltip, appendExternalWorktreeBadge } from './worktree-location.js';
-import { groupProjects } from './project-grouping.js';
+import { groupProjects, getProjectAbbrev } from './project-grouping.js';
 import { showProjectAccessPopover } from './project-access.js';
 import { renderProjectMates, mateForWorkspace } from './project-mate-navigation.js';
 import { openProjectCreateChoice } from './project-mate-creation-workspace.js';
@@ -337,15 +337,6 @@ export function initSidebarProjects() {
 export function getCachedProjectList() { return cachedProjectList; }
 export function getCachedCurrentSlug() { return cachedCurrentSlug; }
 
-function getProjectAbbrev(name) {
-  if (!name) return "?";
-  var words = name.replace(/[^a-zA-Z0-9\s]/g, "").trim().split(/\s+/);
-  if (words.length >= 2) {
-    return (words[0][0] + words[1][0]).toUpperCase();
-  }
-  return name.substring(0, 2).toUpperCase();
-}
-
 export { getProjectAbbrev };
 
 // --- Project context menu ---

package/lib/public/modules/split-session-empty-pane.js

@@ -0,0 +1,47 @@
+import { store } from './store.js';
+import { currentLayoutScope } from './split-view-layout-scope.js';
+
+export function clearEmptySplit(host) {
+  var pane = host && host.querySelector(':scope > .split-session-empty-pane');
+  var menu = document.getElementById('split-view-create-menu');
+  if (pane && menu && pane.contains(menu)) {
+    menu.hidden = true;
+    if (menu.contains(document.activeElement)) document.activeElement.blur();
+    if (pane.contains(menu)) document.body.appendChild(menu);
+  }
+  if (pane) pane.remove();
+  var divider = host && host.querySelector(':scope > .split-session-reserved-divider');
+  if (divider) divider.remove();
+}
+
+export function reserveEmptySplit(host, geometry, inset) {
+  var state = store.get('splitSessionPicker');
+  var receipt = state && state.receipt;
+  var target = receipt && geometry.panes[receipt.origin];
+  if (!state || !state.side || !target || !currentLayoutScope(receipt.scope)) { clearEmptySplit(host); return false; }
+  var side = state.side, vertical = side === 'top' || side === 'bottom', before = side === 'left' || side === 'top';
+  var size = vertical ? 'height' : 'width', axis = vertical ? 'y' : 'x';
+  var half = Math.max(0, (target[size] - 7) / 2);
+  var original = Object.assign({}, target), empty = Object.assign({}, target), gap = Object.assign({}, target);
+  original[size] = half; empty[size] = half; gap[size] = 7;
+  gap[axis] += half;
+  if (before) original[axis] += half + 7; else empty[axis] += half + 7;
+  geometry.panes[receipt.origin] = original;
+  var pane = host.querySelector(':scope > .split-session-empty-pane');
+  if (!pane) {
+    pane = document.createElement('section'); pane.className = 'split-session-empty-pane';
+    pane.innerHTML = '<div class="split-session-empty-body"></div>';
+    host.appendChild(pane);
+  }
+  pane.dataset.side = side; pane.setAttribute('aria-label', 'Empty ' + side + ' split');
+  var menu = document.getElementById('split-view-create-menu');
+  var body = pane.querySelector('.split-session-empty-body');
+  if (menu && menu.parentNode !== body) body.appendChild(menu);
+  var divider = host.querySelector(':scope > .split-session-reserved-divider');
+  if (!divider) { divider = document.createElement('div'); divider.className = 'split-session-reserved-divider'; divider.setAttribute('aria-hidden', 'true'); host.appendChild(divider); }
+  [[pane, empty], [divider, gap]].forEach(function (entry) {
+    entry[0].style.left = inset.left + entry[1].x + 'px'; entry[0].style.top = inset.top + entry[1].y + 'px';
+    entry[0].style.width = entry[1].width + 'px'; entry[0].style.height = entry[1].height + 'px';
+  });
+  return true;
+}