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

package/lib/public/modules/project-mate-navigation.js

@@ -0,0 +1,238 @@
+// Existing Mates share the project rail while retaining their conversations.
+import { store } from './store.js';
+import { applyWorkspaceColor } from './mate-workspace-color.js';
+import { mateAvatarUrl } from './avatar.js';
+import { renderMateProjectHeader, renderOrdinaryProjectHeader } from './project-header-identity.js';
+import { getHomeMateName } from './home-mate-selection.js';
+import { switchProject } from './app-projects.js';
+import { closeTerminal } from './terminal.js';
+import { closeFileViewer } from './filebrowser.js';
+import { getActiveMentionMateIds, onMentionActiveChange, bindIconTooltip, hideIconTooltip, showMateCtxMenu } from './sidebar-mates.js';
+
+var FILTER_MODES = ['all', 'projects', 'mates'];
+var FILTER_LABELS = { all: 'All', projects: 'Projects', mates: 'Mates' };
+var filterSaveQueue = Promise.resolve();
+
+export function normalizeProjectMateFilterMode(mode) {
+  return FILTER_MODES.indexOf(mode) === -1 ? 'all' : mode;
+}
+
+export function advanceProjectMateFilter(mode, turns) {
+  var index = FILTER_MODES.indexOf(normalizeProjectMateFilterMode(mode));
+  return { mode: FILTER_MODES[(index + 1) % FILTER_MODES.length], turns: (Number(turns) || 0) + 1 };
+}
+
+function applyProjectMateFilter() {
+  var rail = document.getElementById('icon-strip-projects');
+  var knob = document.getElementById('icon-strip-filter-knob');
+  if (!rail || !knob) return;
+  var mode = normalizeProjectMateFilterMode(store.get('projectMateFilterMode'));
+  var turns = Number(store.get('projectMateFilterTurns')) || 0;
+  var next = FILTER_MODES[(FILTER_MODES.indexOf(mode) + 1) % FILTER_MODES.length];
+  rail.dataset.filterMode = mode;
+  knob.dataset.mode = mode;
+  knob.setAttribute('aria-label', 'Showing ' + FILTER_LABELS[mode].toLowerCase() + '. Activate to show ' + FILTER_LABELS[next].toLowerCase());
+  knob.querySelector('.icon-strip-filter-pointer').style.transform = 'rotate(' + (turns * 120) + 'deg)';
+  document.getElementById('icon-strip-filter-label').textContent = FILTER_LABELS[mode];
+}
+
+function saveProjectMateFilter(mode) {
+  filterSaveQueue = filterSaveQueue.catch(function () {}).then(function () {
+    return fetch('/api/user/project-mate-filter', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'same-origin',
+      keepalive: true,
+      body: JSON.stringify({ mode: mode })
+    });
+  }).catch(function () {});
+}
+
+function activateProjectMateFilter() {
+  var next = advanceProjectMateFilter(store.get('projectMateFilterMode'), store.get('projectMateFilterTurns'));
+  store.set({ projectMateFilterMode: next.mode, projectMateFilterTurns: next.turns, projectMateFilterActivated: true });
+  saveProjectMateFilter(next.mode);
+}
+
+function restoreProjectMateFilter() {
+  fetch('/api/profile', { credentials: 'same-origin' }).then(function (response) {
+    if (!response.ok) throw new Error('Unable to restore project and Mate filter');
+    return response.json();
+  }).then(function (profile) {
+    if (store.get('projectMateFilterActivated')) return;
+    var mode = normalizeProjectMateFilterMode(profile.projectMateFilterMode);
+    store.set({ projectMateFilterMode: mode, projectMateFilterTurns: FILTER_MODES.indexOf(mode) });
+  }).catch(function () {});
+}
+
+export function navigationMates(mates) {
+  return (Array.isArray(mates) ? mates : []).filter(function (mate) {
+    return mate && mate.id && !mate.archived;
+  }).sort(function (a, b) {
+    var aClay = a.builtinKey === 'clay' ? 0 : 1;
+    var bClay = b.builtinKey === 'clay' ? 0 : 1;
+    return aClay - bClay || (a.createdAt || 0) - (b.createdAt || 0);
+  });
+}
+
+export function isMateWorkspace(state) {
+  return (!!state.activeProjectMateId && state.activeProjectSlug === state.currentSlug) || (state.projectsHubList || []).some(function (project) {
+    return project.slug === state.currentSlug && project.isMate === true;
+  }) || navigationMates(state.cachedMatesList).some(function (mate) {
+    return state.currentSlug === 'mate-' + mate.id;
+  });
+}
+
+export function mateForWorkspace(state) {
+  var mates = navigationMates(state.cachedMatesList);
+  for (var i = 0; i < mates.length; i++) if (state.currentSlug === 'mate-' + mates[i].id) return mates[i];
+  return null;
+}
+
+function renderMateHeaderDefault(state) {
+  var mate = mateForWorkspace(state);
+  if (!mate || state.homeShellVisible) {
+    renderOrdinaryProjectHeader(state);
+    return;
+  }
+  renderMateProjectHeader(state, mate);
+}
+
+export function openMateWorkspace(mateId) {
+  var mate = navigationMates(store.get('cachedMatesList')).find(function (item) { return item.id === mateId; });
+  if (!mate) return;
+  if (store.get('currentSlug') !== 'mate-' + mateId) {
+    closeTerminal();
+    closeFileViewer();
+  }
+  switchProject('mate-' + mateId);
+}
+
+function createMateIcon(mateId) {
+  var button = document.createElement('button');
+  button.type = 'button';
+  button.className = 'icon-strip-item icon-strip-project-mate';
+  button.dataset.mateId = mateId;
+  button.innerHTML = '<img class="icon-strip-mate-avatar" alt="" draggable="false"><span class="icon-strip-pill"></span><span class="icon-strip-status"></span><span class="icon-strip-project-badge"></span>';
+  button.addEventListener('click', function () {
+    hideIconTooltip();
+    openMateWorkspace(mateId);
+  });
+  bindIconTooltip(button, function () {
+    var mate = navigationMates(store.get('cachedMatesList')).find(function (item) { return item.id === mateId; });
+    return {
+      text: mate ? getHomeMateName(mate) : 'Mate',
+      kind: 'mate',
+      avatarUrl: mate ? mateAvatarUrl(mate, 24) : '',
+    };
+  });
+  button.addEventListener('contextmenu', function (event) {
+    event.preventDefault();
+    var mate = navigationMates(store.get('cachedMatesList')).find(function (item) { return item.id === mateId; });
+    if (mate) showMateCtxMenu(button, mate);
+  });
+  return button;
+}
+
+export function renderProjectMates() {
+  var rail = document.getElementById('icon-strip-projects');
+  if (!rail) return;
+  hideIconTooltip();
+  var state = store.snap();
+  var clay = navigationMates(state.cachedMatesList).find(function (mate) { return mate.builtinKey === 'clay'; });
+  var clayActive = !!clay && !state.homeShellVisible && !state.dmMode && state.currentSlug === 'mate-' + clay.id;
+  document.body.classList.toggle('clay-workspace-active', clayActive);
+  var clayEntry = document.querySelector('.icon-strip-brand');
+  if (clayEntry) {
+    clayEntry.disabled = !clay;
+    clayEntry.classList.toggle('active', clayActive);
+    clayEntry.setAttribute('aria-label', clay ? 'Open Clay' : 'Clay is unavailable');
+    if (clayActive) clayEntry.setAttribute('aria-current', 'page');
+    else clayEntry.removeAttribute('aria-current');
+  }
+  document.body.classList.toggle('mate-workspace-active', !state.homeShellVisible && isMateWorkspace(state));
+  applyWorkspaceColor(mateForWorkspace(state));
+  renderMateHeaderDefault(state);
+  var mates = navigationMates(state.cachedMatesList).filter(function (mate) {
+    return mate.builtinKey !== 'clay';
+  });
+  var mentionActive = getActiveMentionMateIds();
+  var projects = state.projectsHubList || [];
+  var unread = state.dmUnread || {};
+  var icons = {};
+  rail.querySelectorAll('[data-mate-id]').forEach(function (button) { icons[button.dataset.mateId] = button; });
+  mates.forEach(function (mate) {
+    var button = icons[mate.id] || createMateIcon(mate.id);
+    delete icons[mate.id];
+    var active = !state.homeShellVisible && !state.dmMode && state.currentSlug === 'mate-' + mate.id;
+    var project = projects.find(function (item) { return item.slug === 'mate-' + mate.id; });
+    var busy = !!(project && project.isProcessing) || !!mentionActive[mate.id];
+    var count = active ? 0 : (unread[mate.id] || 0);
+    button.classList.toggle('active', !!active);
+    button.setAttribute('aria-label', getHomeMateName(mate) + ', Mate' + (busy ? ', working' : '') + (count ? ', ' + count + ' unread' : ''));
+    if (active) button.setAttribute('aria-current', 'page');
+    else button.removeAttribute('aria-current');
+    var avatar = button.querySelector('img');
+    var url = mateAvatarUrl(mate, 38);
+    if (avatar.getAttribute('src') !== url) avatar.src = url;
+    var status = button.querySelector('.icon-strip-status');
+    status.classList.toggle('processing', busy);
+    status.classList.toggle('connected', !!state.connected);
+    var badge = button.querySelector('.icon-strip-project-badge');
+    badge.classList.toggle('has-unread', count > 0);
+    badge.textContent = count > 99 ? '99+' : count ? String(count) : '';
+    if (!button.parentNode) rail.appendChild(button);
+  });
+  Object.keys(icons).forEach(function (id) { icons[id].remove(); });
+  var ordered = Array.from(rail.querySelectorAll('[data-mate-id]'));
+  mates.forEach(function (mate, index) {
+    var button = ordered.find(function (item) { return item.dataset.mateId === mate.id; });
+    if (ordered[index] === button) return;
+    rail.insertBefore(button, ordered[index] || null);
+    ordered.splice(ordered.indexOf(button), 1);
+    ordered.splice(index, 0, button);
+  });
+  var separator = rail.querySelector('.icon-strip-peer-separator');
+  var hasProjects = !!rail.querySelector(':scope > .icon-strip-item[data-slug], :scope > .icon-strip-group');
+  if (hasProjects && mates.length) {
+    if (!separator) {
+      separator = document.createElement('div');
+      separator.className = 'icon-strip-peer-separator';
+    }
+    var firstMate = rail.querySelector(':scope > [data-mate-id]');
+    if (firstMate) rail.insertBefore(separator, firstMate);
+  } else if (separator) {
+    separator.remove();
+  }
+  rail.querySelectorAll('[data-slug]').forEach(function (item) {
+    item.classList.toggle('active', !state.homeShellVisible && !state.dmMode && item.dataset.slug === state.currentSlug);
+  });
+  var home = document.querySelector('.icon-strip-home');
+  if (home && !home.classList.contains('icon-strip-brand')) home.classList.toggle('active', !!state.homeShellVisible);
+  applyProjectMateFilter();
+}
+
+export function initProjectMateNavigation() {
+  var clayEntry = document.querySelector('.icon-strip-brand');
+  if (clayEntry) {
+    clayEntry.addEventListener('click', function () {
+      var clay = navigationMates(store.get('cachedMatesList')).find(function (mate) { return mate.builtinKey === 'clay'; });
+      hideIconTooltip();
+      if (clay) openMateWorkspace(clay.id);
+    });
+    bindIconTooltip(clayEntry, { text: 'Clay', kind: 'mate', avatarUrl: 'clay-studio-symbol.png' });
+  }
+  var knob = document.getElementById('icon-strip-filter-knob');
+  if (knob) knob.addEventListener('click', activateProjectMateFilter);
+  store.subscribe(function (state, previous) {
+    if (state.cachedMatesList !== previous.cachedMatesList || state.homeChatMateId !== previous.homeChatMateId ||
+        state.homeShellVisible !== previous.homeShellVisible || state.projectsHubList !== previous.projectsHubList ||
+        state.dmUnread !== previous.dmUnread || state.currentSlug !== previous.currentSlug ||
+        state.dmMode !== previous.dmMode || state.connected !== previous.connected) renderProjectMates();
+    if (state.projectMateFilterMode !== previous.projectMateFilterMode ||
+        state.projectMateFilterTurns !== previous.projectMateFilterTurns) applyProjectMateFilter();
+  });
+  onMentionActiveChange(renderProjectMates);
+  renderProjectMates();
+  restoreProjectMateFilter();
+}

package/lib/public/modules/project-session-navigation.js

@@ -0,0 +1,29 @@
+// Exact project/session navigation shared by search, notifications and links.
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { switchProject } from './app-projects.js';
+
+function flush() {
+  var pending = store.get('pendingProjectSessionNavigation');
+  var ws = getWs();
+  if (!pending || store.get('activeProjectSlug') !== pending.projectSlug || !ws || ws.readyState !== 1) return false;
+  store.set({ pendingProjectSessionNavigation: null });
+  ws.send(JSON.stringify({ type: 'switch_session', id: pending.sessionId }));
+  return true;
+}
+
+export function openProjectSession(projectSlug, sessionId) {
+  var id = Number(sessionId);
+  if (!projectSlug || !Number.isSafeInteger(id) || id < 1) return false;
+  store.set({ pendingProjectSessionNavigation: { projectSlug: projectSlug, sessionId: id } });
+  switchProject(projectSlug);
+  flush();
+  return true;
+}
+
+export function initProjectSessionNavigation() {
+  store.subscribe(function (state, previous) {
+    if (state.activeProjectSlug !== previous.activeProjectSlug || state.connected !== previous.connected || state.pendingProjectSessionNavigation !== previous.pendingProjectSessionNavigation) flush();
+  });
+  flush();
+}

package/lib/public/modules/project-settings-environment.js

@@ -0,0 +1,106 @@
+import { refreshIcons } from './icons.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { parseEnvString, serializeEnvValue, looksLikeEnv } from './settings-env-values.js';
+
+function state() { return store.get('projectEnvironmentEditor') || {}; }
+function update(values) { store.set({ projectEnvironmentEditor: Object.assign({}, state(), values) }); }
+function status(text) { document.getElementById('ps-env-save-status').textContent = text; }
+function send(message) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { status('Disconnected. Your draft is kept. Reconnect and try again.'); return false; }
+  ws.send(JSON.stringify(message)); return true;
+}
+export function projectEnvironmentDirty() { return state().slug === store.get("projectSettingsSlug") && !!(state().dirty || state().saving); }
+export function openProjectEnvironment(slug) {
+  if (state().slug === slug && (state().loaded || state().loading || state().dirty)) return;
+  var cached = Object.assign({}, store.get('projectEnvironmentDrafts') || {});
+  if (state().slug && state().dirty) cached[state().slug] = state();
+  store.set({ projectEnvironmentDrafts: cached });
+  if (cached[slug]) { store.set({ projectEnvironmentEditor: cached[slug] }); render(); status('Unsaved changes'); return; }
+  update({ slug: slug, saved: '', rows: [], dirty: false, loaded: false, loading: false, editing: false, saving: false });
+  render(); status('Loading…');
+  var requestId = crypto.randomUUID();
+  update({ requestId: requestId });
+  if (send({ type: 'get_project_env', slug: slug, requestId: requestId })) update({ loading: true });
+}
+export function handleProjectEnv(msg) {
+  if (!state().loading || (msg.slug !== state().slug || msg.requestId !== state().requestId)) return;
+  update({ loading: false });
+  if (msg.error) { status(msg.error); return; }
+  update({ loaded: true, saved: msg.envrc || '', rows: parseEnvString(msg.envrc || '') });
+  render(); status('');
+}
+function changeRows(rows) { update({ rows: rows, dirty: true }); document.getElementById('ps-env-save').disabled = false; status('Unsaved changes'); }
+function render() {
+  var editor = state();
+  var list = document.getElementById('ps-env-list'); list.replaceChildren();
+  (editor.rows || []).forEach(function (entry, index) {
+    var row = document.createElement('div'); row.className = 'ps-env-row';
+    var key = document.createElement('input'); key.className = 'ps-env-key'; key.value = entry.key; key.placeholder = 'KEY'; key.setAttribute('aria-label', 'Variable name');
+    var value = document.createElement('input'); value.className = 'ps-env-val'; value.type = 'password'; value.value = entry.value; value.placeholder = 'Value'; value.setAttribute('aria-label', 'Variable value');
+    [key, value].forEach(function (input) { input.autocomplete = 'off'; input.spellcheck = false; input.disabled = !!editor.saving; });
+    function changed() {
+      var rows = state().rows.slice(); rows[index] = { key: key.value, value: value.value }; changeRows(rows);
+    }
+    key.addEventListener('input', changed); value.addEventListener('input', changed);
+    key.addEventListener('paste', function (event) {
+      var text = event.clipboardData.getData('text');
+      if (!looksLikeEnv(text)) return;
+      event.preventDefault(); var rows = state().rows.slice();
+      rows.splice.apply(rows, [index, 1].concat(parseEnvString(text))); changeRows(rows); render();
+    });
+    var remove = document.createElement('button'); remove.className = 'ps-env-del'; remove.textContent = '×'; remove.setAttribute('aria-label', 'Remove variable'); remove.disabled = !!editor.saving;
+    remove.onclick = function () { var rows = state().rows.slice(); rows.splice(index, 1); changeRows(rows); render(); };
+    remove.innerHTML = '<i data-lucide="x"></i>';
+    var reveal = document.createElement('button'); reveal.type = 'button'; reveal.className = 'settings-btn-sm'; reveal.textContent = 'Show';
+    reveal.setAttribute('aria-label', 'Show variable value'); reveal.setAttribute('aria-pressed', 'false');
+    reveal.onclick = function () { var visible = value.type === 'password'; value.type = visible ? 'text' : 'password'; reveal.textContent = visible ? 'Hide' : 'Show'; reveal.setAttribute('aria-pressed', String(visible)); };
+    row.append(key, value, reveal, remove); list.appendChild(row);
+  });
+  document.getElementById('ps-env-add-btn').disabled = !editor.loaded || !!editor.saving;
+  document.getElementById('ps-env-save').disabled = !editor.loaded || !editor.dirty || !!editor.saving;
+  refreshIcons();
+}
+function clearCachedDraft() {
+  var cached = Object.assign({}, store.get('projectEnvironmentDrafts') || {}); delete cached[state().slug]; store.set({ projectEnvironmentDrafts: cached });
+}
+export function discardProjectEnvironment() {
+  clearCachedDraft();
+  update({ rows: parseEnvString(state().saved || ''), editing: false, dirty: false }); render(); status(''); document.getElementById('ps-env-add-btn').focus();
+}
+export function handleProjectEnvSaved(msg) {
+  if (!state().saving || (msg.slug !== state().slug || msg.requestId !== state().requestId)) return;
+  update({ saving: false });
+  if (!msg.ok) { render(); status(msg.error || 'Save failed. Your draft is kept.'); return; }
+  clearCachedDraft();
+  update({ saved: state().submitted, dirty: false, editing: false });
+  render(); document.getElementById('ps-env-add-btn').focus(); status('Saved. ' + (msg.timing || 'Applies to newly created coding-agent processes.'));
+}
+function save() {
+  var names = {};
+  var rows = state().rows || [];
+  for (var i = 0; i < rows.length; i++) {
+    var key = rows[i].key.trim();
+    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) { status('Enter a valid name for every variable.'); return; }
+    if (Object.prototype.hasOwnProperty.call(names, key)) { status('Each variable needs a unique name.'); return; }
+    names[key] = true;
+  }
+  var envrc = rows.map(function (row) { return 'export ' + row.key.trim() + '=' + serializeEnvValue(row.value); }).join('\n');
+  var requestId = crypto.randomUUID();
+  update({ requestId: requestId });
+  if (!send({ type: 'set_project_env', slug: state().slug, envrc: envrc, requestId: requestId })) return;
+  update({ submitted: envrc, saving: true }); render(); status('Saving…');
+}
+export function initProjectEnvironment() {
+  document.getElementById('ps-env-add-btn').onclick = function () { changeRows((state().rows || []).concat([{ key: '', value: '' }])); render(); document.querySelector('#ps-env-list .ps-env-row:last-child input').focus(); };
+  document.getElementById('ps-env-save').onclick = save;
+  store.subscribe(function (next, previous) {
+    if (next.myUserId !== previous.myUserId) {
+      store.set({ projectEnvironmentEditor: {}, projectEnvironmentDrafts: {} }); render(); status(''); return;
+    }
+    if (previous.connected && !next.connected && (state().saving || state().loading)) {
+      update({ saving: false, loading: false }); render(); status('Disconnected. Your draft is kept. Reconnect and try again.');
+    }
+  });
+}