clay-server 5.2.0-beta.6 → 5.2.0-beta.8

package/lib/public/modules/contextual-clay-geometry.js

@@ -0,0 +1,155 @@
+import { contextualTrigger } from './contextual-mate-identity.js';
+import { renderContextualMateHint } from './contextual-mate-hint.js';
+import { store } from './store.js';
+import { showToast } from './utils.js';
+
+var endpoint = '/api/user/contextual-clay-geometry';
+function state() { return store.get('contextualClayGeometry') || {}; }
+function surface() { return document.getElementById('contextual-clay'); }
+function narrow() { return window.matchMedia('(max-width: 768px)').matches; }
+function rectValue(rect) { return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; }
+function bounded(value) {
+  return { left: Math.round(Math.max(0, Math.min(16384, value.left))), top: Math.round(Math.max(0, Math.min(16384, value.top))), width: Math.round(Math.max(340, Math.min(2560, value.width))), height: Math.round(Math.max(360, Math.min(2160, value.height))) };
+}
+function setState(patch) { store.set({ contextualClayGeometry: Object.assign({}, state(), patch) }); }
+function defaultGeometry() {
+  var trigger = contextualTrigger();
+  var anchor = trigger && trigger.getBoundingClientRect();
+  return { left: anchor ? anchor.right + 8 : 64, top: anchor ? anchor.top : 38, width: 480, height: 640 };
+}
+export function positionContextualClay() {
+  var element = surface();
+  var hint = renderContextualMateHint();
+  if (!element || narrow() || (store.get('contextualClay') || {}).mode === 'opening') return;
+  var desired = state().preview || state().desired || defaultGeometry();
+  var width = Math.min(desired.width, window.innerWidth - 16);
+  var height = Math.min(desired.height, window.innerHeight - 16);
+  var left = Math.max(8, Math.min(desired.left, window.innerWidth - width - 8));
+  var top = Math.max(8, Math.min(desired.top, window.innerHeight - height - 8));
+  if (hint && left < hint.right + 8 && left + width > hint.left && top < hint.bottom + 8 && top + height > hint.top) {
+    left = hint.right + 8; width = Math.min(width, window.innerWidth - left - 8);
+  }
+  element.style.setProperty('--contextual-left', left + 'px');
+  element.style.setProperty('--contextual-top', top + 'px');
+  element.style.setProperty('--contextual-width', width + 'px');
+  element.style.setProperty('--contextual-height', height + 'px');
+}
+async function flushSave() {
+  var current = state();
+  if (current.saving || !current.pending) return;
+  var owner = store.get('myUserId'); var value = current.pending;
+  setState({ saving: true, pending: null });
+  try {
+    var response = await fetch(endpoint, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'X-Clay-Settings': '1' }, body: JSON.stringify(value) });
+    if (!response.ok) throw new Error('Could not save popover position and size.');
+    if (store.get('myUserId') === owner) setState({ saved: value });
+  } catch (error) {
+    if (store.get('myUserId') === owner) showToast('Popover position and size could not be saved. Adjust again to retry.', 'error');
+  } finally {
+    if (store.get('myUserId') === owner) { setState({ saving: false }); flushSave(); }
+  }
+}
+function commit(value) {
+  var next = bounded(value);
+  setState({ desired: next, pending: next, revision: (state().revision || 0) + 1 });
+  positionContextualClay(); flushSave();
+}
+function finish(cancel) {
+  var drag = state().interaction;
+  if (!drag) return;
+  var value = state().preview;
+  setState({ interaction: null, preview: null });
+  var element = surface();
+  if (element) {
+    element.classList.remove('contextual-clay-manipulating');
+    var handle = drag.edge ? element.querySelector('[data-clay-resize="' + drag.edge + '"]') : element.querySelector('header');
+    if (handle && handle.hasPointerCapture(drag.pointerId)) handle.releasePointerCapture(drag.pointerId);
+  }
+  if (!cancel && value) {
+    if (!drag.edge && drag.desired) { value.width = drag.desired.width; value.height = drag.desired.height; }
+    commit(value);
+  }
+  else positionContextualClay();
+}
+function move(event) {
+  var drag = state().interaction;
+  if (!drag || event.pointerId !== drag.pointerId) return;
+  var dx = event.clientX - drag.x; var dy = event.clientY - drag.y;
+  if (!state().preview && Math.hypot(dx, dy) < 3) return;
+  var value = Object.assign({}, drag.start);
+  if (drag.edge) {
+    if (drag.edge.indexOf('e') >= 0) value.width = Math.max(340, Math.min(2560, window.innerWidth - value.left - 8, value.width + dx));
+    if (drag.edge.indexOf('s') >= 0) value.height = Math.max(360, Math.min(2160, window.innerHeight - value.top - 8, value.height + dy));
+  } else {
+    value.left = Math.max(8, Math.min(window.innerWidth - value.width - 8, value.left + dx));
+    value.top = Math.max(8, Math.min(window.innerHeight - value.height - 8, value.top + dy));
+  }
+  setState({ preview: value }); positionContextualClay();
+}
+async function loadPreference(owner) {
+  setState({ owner: owner, desired: null, revision: 0, pending: null, saving: false });
+  try {
+    var response = await fetch(endpoint);
+    if (!response.ok) throw new Error('Preference unavailable');
+    var data = await response.json();
+    if (store.get('myUserId') === owner && !state().revision && !state().interaction) {
+      setState({ desired: data.geometry, saved: data.geometry }); positionContextualClay();
+    }
+  } catch (error) { /* Keep the usable anchored default when preferences are unavailable. */ }
+}
+export function attachContextualGeometry(element) {
+  var header = element.querySelector('header');
+  header.tabIndex = 0;
+  header.setAttribute('aria-label', 'Move Clay conversation. Use arrow keys to move; hold Shift for larger steps.');
+  header.title = 'Drag to move · Arrow keys when focused';
+  ['e', 's', 'se'].forEach(function (edge) {
+    var handle = document.createElement('button');
+    handle.type = 'button'; handle.dataset.clayResize = edge;
+    handle.setAttribute('aria-label', 'Resize Clay conversation' + (edge === 'e' ? ' width' : edge === 's' ? ' height' : '') + '. Use arrow keys; hold Shift for larger steps.');
+    handle.title = 'Drag to resize · Arrow keys when focused';
+    element.appendChild(handle);
+  });
+  element.addEventListener('pointerdown', function (event) {
+    var handle = event.target.closest('[data-clay-resize]');
+    var heading = event.target.closest('header');
+    if (narrow() || event.button !== 0 || (!handle && (!heading || event.target.closest('button, details, a, input')))) return;
+    if ((store.get('contextualClay') || {}).mode !== 'popover') return;
+    event.preventDefault();
+    var target = handle || header;
+    setState({ interaction: { pointerId: event.pointerId, x: event.clientX, y: event.clientY, start: rectValue(element.getBoundingClientRect()), desired: state().desired, edge: handle ? handle.dataset.clayResize : null } });
+    element.classList.add('contextual-clay-manipulating');
+    target.setPointerCapture(event.pointerId);
+  });
+  element.addEventListener('pointermove', move);
+  element.addEventListener('pointerup', function (event) { if (state().interaction && event.pointerId === state().interaction.pointerId) { move(event); finish(false); } });
+  element.addEventListener('pointercancel', function () { finish(true); });
+  element.addEventListener('lostpointercapture', function () { finish(true); });
+  element.addEventListener('keydown', function (event) {
+    if (narrow() || ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].indexOf(event.key) < 0) return;
+    var edge = event.target.dataset.clayResize;
+    if (event.target !== header && !edge) return;
+    event.preventDefault();
+    var value = rectValue(element.getBoundingClientRect()); var step = event.shiftKey ? 32 : 8;
+    var horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+    var delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -step : step;
+    if (edge) {
+      if (horizontal && edge.indexOf('e') >= 0) value.width = Math.min(window.innerWidth - value.left - 8, value.width + delta);
+      if (!horizontal && edge.indexOf('s') >= 0) value.height = Math.min(window.innerHeight - value.top - 8, value.height + delta);
+    } else if (horizontal) value.left = Math.max(8, Math.min(window.innerWidth - value.width - 8, value.left + delta));
+    else value.top = Math.max(8, Math.min(window.innerHeight - value.height - 8, value.top + delta));
+    if (!edge && state().desired) { value.width = state().desired.width; value.height = state().desired.height; }
+    commit(value);
+  });
+}
+export function initContextualGeometry() {
+  store.subscribe(function (value, previous) {
+    if (value.myUserId && value.myUserId !== previous.myUserId) { finish(true); loadPreference(value.myUserId); }
+    if ((value.contextualClay || {}).mode !== (previous.contextualClay || {}).mode) finish(true);
+  });
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape' && state().interaction) { event.preventDefault(); event.stopImmediatePropagation(); finish(true); }
+  }, true);
+  window.addEventListener('blur', function () { finish(true); });
+  window.addEventListener('resize', function () { finish(true); positionContextualClay(); });
+  if (store.get('myUserId')) loadPreference(store.get('myUserId'));
+}

package/lib/public/modules/contextual-clay-session.js

@@ -0,0 +1,130 @@
+// Session identity remains pinned across transport recovery and presentation.
+import { autoResize, takeComposerDraft, restoreComposerDraft } from './input.js';
+import { store } from './store.js';
+import { withdrawPaneControlActivity } from './clay-control-activity.js';
+import { initContextualComposer } from './contextual-composer.js';
+import { submitContextualAsk, pauseContextualAsk, stopContextualAsk } from './contextual-ask-session.js';
+
+// Session replay and authenticated account bootstrap complete independently.
+function submissionReady() { var expected = window.frameElement && window.frameElement.dataset.expectedSessionOrigin; return (!expected || expected === store.get('sessionOriginId')) && !!(store.get('contextualSessionReady') && store.get('connected') && store.get('myUserId') && store.get('sessionOriginId') && store.get('activeSessionId') === store.get('paneSessionId')); }
+function enabled() { return store.get('paneMode') && new URLSearchParams(location.search).get('contextual') === '1'; }
+function renderSessionAvailability() {
+  var input = document.getElementById('input');
+  var frame = window.frameElement;
+  var mate = frame && (store.get('cachedMatesList') || []).find(function (item) { return item.id === frame.dataset.mateId; });
+  var name = mate && ((mate.profile || {}).displayName || mate.displayName || mate.name);
+  if (input && name) { input.setAttribute('aria-label', 'Message ' + name); if (name.length > 32) input.placeholder = 'Message this Mate…'; }
+  var wrapper = document.getElementById('input-wrapper');
+  if (wrapper) wrapper.inert = !submissionReady();
+  try {
+    var surface = window.parent.document.getElementById('contextual-clay');
+    var anchor = window.parent.document.querySelector('[aria-describedby="contextual-mate-hint"]') || window.parent.document.querySelector('.icon-strip-brand');
+    if (submissionReady() && surface && surface.dataset.focusEntry === 'true' && !window.frameElement.hidden && !window.frameElement.inert) {
+      delete surface.dataset.focusEntry;
+      if (surface.dataset.mode === 'popover' && window.parent.document.activeElement === anchor) document.getElementById('input').focus({ preventScroll: true });
+    }
+  } catch (error) { /* Cross-origin authentication owns focus. */ }
+  if (store.get('contextualSessionReady') && window.frameElement && !window.frameElement.hidden) {
+    window.frameElement.dataset.sessionId = String(store.get('paneSessionId'));
+    var parentSurface = window.parent.document.getElementById('contextual-clay');
+    if (parentSurface) parentSurface.dispatchEvent(new window.parent.CustomEvent('contextual-clay-ready'));
+  }
+  var warning = document.getElementById('contextual-session-warning');
+  if (!warning && store.get('contextualSessionUnavailable')) {
+    warning = document.createElement('p');
+    warning.id = 'contextual-session-warning'; warning.setAttribute('role', 'status');
+    warning.textContent = 'This Mate conversation is no longer available. Your draft is still here.';
+    document.getElementById('input-area').prepend(warning);
+  }
+  if (warning) warning.hidden = !store.get('contextualSessionUnavailable');
+}
+export function handleContextualSessionMessage(msg) {
+  if (!enabled()) return;
+  if (msg.type === 'session_list' && store.get('paneSessionId') && !(msg.sessions || []).some(function (session) { return session.id === store.get('paneSessionId'); })) {
+    store.set({ contextualSessionReady: false, contextualSessionUnavailable: true });
+  }
+  if (msg.type === 'session_switched') {
+    var pin = store.get('paneSessionId');
+    if (pin && msg.id !== pin) return true;
+    var path = store.get('wsPath').replace(/&session=\d+/g, '');
+    store.set({ contextualSessionReady: false, contextualSessionReceived: true, contextualSessionUnavailable: false, paneSessionId: msg.id, wsPath: path + '&session=' + msg.id });
+  }
+  if (msg.type === 'history_done' && store.get('contextualSessionReceived')) store.set({ contextualSessionReady: true });
+  renderSessionAvailability();
+  return false;
+}
+export function initContextualSession() {
+  if (!enabled()) return;
+  document.body.classList.add('contextual-chat-pane');
+  initContextualComposer();
+  // Bind at app readiness rather than iframe load: slow assets must not leave
+  // an already usable composer without its presentation keyboard handling.
+  document.addEventListener('keydown', function (event) {
+    if (event.key !== 'Escape') return;
+    try {
+      var surface = window.parent.document.getElementById('contextual-clay');
+      if (surface && window.frameElement && surface.contains(window.frameElement)) surface.dispatchEvent(new window.parent.CustomEvent('contextual-clay-keydown', { detail: { source: window, keyboardEvent: event } }));
+    } catch (error) { /* Authentication navigation owns its document. */ }
+  });
+  var surfaceBridge = window.parent.document.getElementById('contextual-clay');
+  if (surfaceBridge && window.frameElement && surfaceBridge.contains(window.frameElement)) window.frameElement.conversation = {
+    source: window, document: document,
+    submitAsk: submitContextualAsk,
+    pauseAsk: pauseContextualAsk,
+    stopAsk: stopContextualAsk,
+    identity: function () { return { mateId: store.get('activeProjectMateId'), viewerRef: store.get('clayControlViewerRef'), sessionId: store.get('paneSessionId'), sessionOriginId: store.get('sessionOriginId'), ownerId: store.get('myUserId'), connected: store.get('connected'), available: !store.get('contextualSessionUnavailable'), ready: submissionReady() }; },
+    suspend: function (value) { store.set({ contextualWriterSuspended: value }); document.getElementById('input').readOnly = value; },
+    checkDraft: function () { var draft = takeComposerDraft(); restoreComposerDraft(draft); },
+    take: function () { var draft = takeComposerDraft(); var drafts = Object.assign({}, store.get('sessionDrafts')); delete drafts[store.get('paneSessionId')]; store.set({ sessionDrafts: drafts }); return draft; },
+    restore: restoreComposerDraft
+  };
+  document.addEventListener('click', function (event) {
+    if (event.target.closest('#generation-stop, #autonomous-run-stop, #send-btn.stop')) {
+      pauseContextualAsk();
+      var askHost = window.parent.document.getElementById('contextual-clay');
+      if (askHost) askHost.dispatchEvent(new window.parent.CustomEvent('contextual-ask-stopped', { detail: { source: window } }));
+    }
+    if (store.get('contextualWriterSuspended') && event.target.closest('#send-btn, #attach-wrap, #contextual-attach-btn, #config-chip-wrap, .ask-user-container')) { event.preventDefault(); event.stopImmediatePropagation(); }
+  }, true);
+  store.set({ contextualSessionReady: false, contextualSessionUnavailable: false });
+  var width = 0;
+  new ResizeObserver(function (entries) {
+    var next = entries[0].contentRect.width;
+    if (next === width || next === 0) return;
+    width = next;
+    autoResize();
+  }).observe(document.getElementById('input-textarea-wrap'));
+  function guardPendingReview(event) {
+    if ((!store.get('contextualSessionReady') || store.get('contextualWriterSuspended')) && event.target.closest('.ask-user-submit, .ask-user-other input') && (event.type === 'click' || event.key === 'Enter')) { event.preventDefault(); event.stopImmediatePropagation(); }
+  }
+  document.addEventListener('click', guardPendingReview, true);
+  document.addEventListener('keydown', guardPendingReview, true);
+  store.subscribe(function (value, previous) {
+    if (value.connected !== previous.connected || value.contextualSessionReady !== previous.contextualSessionReady || value.contextualSessionUnavailable !== previous.contextualSessionUnavailable) {
+      var parentSurface = window.parent.document.getElementById('contextual-clay');
+      if (parentSurface && window.frameElement && !window.frameElement.hidden && parentSurface.contains(window.frameElement)) parentSurface.dispatchEvent(new window.parent.CustomEvent('contextual-clay-availability'));
+    }
+    if (!value.connected && previous.connected) {
+      withdrawPaneControlActivity();
+      var input = document.getElementById('input');
+      var drafts = Object.assign({}, value.sessionDrafts);
+      if (value.paneSessionId && input) drafts[value.paneSessionId] = input.value;
+      store.set({ contextualSessionReady: false, contextualSessionReceived: false, sessionDrafts: drafts });
+    }
+    renderSessionAvailability();
+  });
+  renderSessionAvailability();
+}
+
+// Capture bounded metadata separately from user attachments. This is
+// untrusted reference data, never approval or a target for an existing action.
+export function contextualScreenReference() {
+  if (!enabled() || window.parent === window) return null;
+  try {
+    var surface = window.parent.document.getElementById('contextual-clay');
+    if (!surface || !window.frameElement || window.frameElement.hidden || window.frameElement.dataset.canonical !== 'true' || !surface.contains(window.frameElement)) return null;
+    var reference = JSON.parse(surface.dataset.screenReference || 'null');
+    if (!reference || reference.ownerId !== (store.get('myUserId') || null)) return null;
+    return { version: 1, viewId: typeof reference.viewId === 'string' ? reference.viewId.slice(0, 100) : null, projectTitle: typeof reference.projectTitle === 'string' ? reference.projectTitle.slice(0, 160) : null, conversationTitle: typeof reference.conversationTitle === 'string' ? reference.conversationTitle.slice(0, 160) : null, projectSlug: typeof reference.projectSlug === 'string' ? reference.projectSlug.slice(0, 160) : null, sessionId: Number.isSafeInteger(reference.sessionId) ? reference.sessionId : null, screen: String(reference.screen || '').slice(0, 40) };
+  } catch (error) { return null; }
+}

package/lib/public/modules/contextual-clay-workspace.js

@@ -0,0 +1,157 @@
+import { contextualFrame, contextualMate } from './contextual-mate-identity.js';
+import { store } from './store.js';
+import { openMateWorkspace, returnFromClay } from './project-mate-navigation.js';
+import { takeComposerDraft, restoreComposerDraft, autoResize } from './input.js';
+import { showToast } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { getHomeMateName } from './home-mate-selection.js';
+
+function bridge(mateId, sessionId) {
+  var surface = document.getElementById('contextual-clay');
+  var frame = contextualFrame(mateId, sessionId);
+  var connection = surface && frame && frame.conversation;
+  if (!connection || !contextualMate(frame.dataset.mateId) || connection.source !== frame.contentWindow) return null;
+  var identity = connection.identity();
+  return identity.ownerId === store.get('myUserId') && identity.mateId === frame.dataset.mateId ? connection : null;
+}
+function lockNative(value) {
+  ['messages', 'input-wrapper'].forEach(function (id) { var element = document.getElementById(id); if (element) element.inert = value; });
+}
+// A direct/native Mate entry also lends its composer to one pane at a time.
+export function beginContextualNativeOrigin(mate) {
+  if (store.get('currentSlug') !== 'mate-' + mate.id) return true;
+  var existing = contextualFrame(mate.id);
+  if (existing && existing.dataset.sessionId && Number(existing.dataset.sessionId) !== store.get('activeSessionId')) return true;
+  if (existing && existing.conversation && existing.conversation.identity().sessionId !== store.get('activeSessionId')) return true;
+  try {
+    var draft = takeComposerDraft();
+    store.set({ contextualNativeOrigin: { mateId: mate.id, slug: store.get('currentSlug'), sessionId: store.get('activeSessionId'), draft: draft, stage: 'waiting' } });
+    lockNative(true); return true;
+  } catch (error) { showToast(error.message, 'error'); return false; }
+}
+export function syncContextualNativeOrigin() {
+  var origin = store.get('contextualNativeOrigin'); var connection = origin && bridge(origin.mateId, origin.sessionId);
+  if (!origin || origin.stage !== 'waiting' || !connection || !connection.identity().ready || connection.identity().mateId !== origin.mateId || connection.identity().sessionId !== origin.sessionId) return;
+  store.set({ contextualNativeOrigin: Object.assign({}, origin, { draft: null, stage: 'pane' }) });
+  connection.suspend(false); connection.restore(origin.draft);
+}
+export function abandonContextualNativeOrigin(mateId) {
+  var origin = store.get('contextualNativeOrigin');
+  if (!origin || origin.mateId !== mateId) return;
+  // A removed/revoked identity cannot receive a draft or trap later navigation.
+  store.set({ contextualNativeOrigin: null }); lockNative(false);
+  showToast('This Mate conversation is no longer available.', 'warn');
+}
+export function finishContextualNativeOrigin() {
+  var origin = store.get('contextualNativeOrigin');
+  if (!origin) return true;
+  try {
+    var connection = bridge(origin.mateId, origin.sessionId);
+    var draft = origin.stage === 'waiting' ? origin.draft : connection && connection.take();
+    if (!draft) throw new Error('Wait for this Mate conversation to reconnect.');
+    if (connection) connection.suspend(true);
+    restoreComposerDraft(draft); store.set({ contextualNativeOrigin: null }); lockNative(false); return true;
+  } catch (error) { showToast(error.message, 'error'); return false; }
+}
+export function openContextualWorkspace(clay) {
+  var connection = bridge();
+  var identity = connection && connection.identity();
+  if (!contextualMate(clay.id) || !identity || identity.mateId !== clay.id || !identity.ready) { showToast('Wait for this Mate conversation to reconnect.', 'error'); return; }
+  var origin = store.get('contextualNativeOrigin');
+  if (origin && origin.mateId === clay.id && origin.sessionId === identity.sessionId) {
+    if (!finishContextualNativeOrigin()) return;
+    var existingHandoff = store.get('contextualWorkspace');
+    if (existingHandoff && existingHandoff.slug === origin.slug && existingHandoff.sessionId === origin.sessionId) { store.set({ contextualClay: { mode: 'workspace', mateId: clay.id, sessionId: origin.sessionId } }); return; }
+    var target = store.get('clayReturnTarget');
+    store.set({ contextualWorkspace: { slug: origin.slug, sessionId: origin.sessionId, stage: 'workspace', projectDraft: null, returnSlug: target && target.projectSlug, returnSessionId: target && target.sessionId }, contextualClay: { mode: 'workspace', mateId: clay.id } });
+    return;
+  }
+  if (origin && !finishContextualNativeOrigin()) return;
+  try {
+    var projectDraft = takeComposerDraft();
+    var draft;
+    try { draft = connection.take(); } catch (error) { restoreComposerDraft(projectDraft); throw error; }
+    connection.suspend(true);
+    store.set({ contextualWorkspace: { slug: 'mate-' + clay.id, sessionId: identity.sessionId, draft: draft, projectDraft: projectDraft, stage: 'opening', returnSlug: store.get('currentSlug'), returnSessionId: store.get('activeSessionId'), returnWorkspace: store.get('contextualWorkspace') }, contextualClay: { mode: 'opening', mateId: clay.id } });
+    lockNative(true);
+    openMateWorkspace(clay.id, identity.sessionId);
+  } catch (error) { showToast(error.message, 'error'); }
+}
+
+// Called by the existing return service before it changes the route/session.
+export function finishContextualWorkspace() {
+  var handoff = store.get('contextualWorkspace');
+  if (!handoff || handoff.stage === 'returning') return;
+  var connection = bridge(handoff.slug.slice(5), handoff.sessionId);
+  if (!connection) { store.set({ contextualWorkspace: null, contextualClay: { mode: 'closed' } }); lockNative(false); return true; }
+  try {
+    var draft = handoff.draft;
+    if (handoff.stage === 'workspace' && store.get('currentSlug') === handoff.slug && store.get('activeSessionId') === handoff.sessionId) draft = takeComposerDraft();
+    connection.restore(draft);
+    connection.suspend(false);
+    store.set({ contextualWorkspace: Object.assign({}, handoff, { draft: null, stage: 'returning' }), contextualClay: Object.assign({}, store.get('contextualClay'), { mode: 'closed' }) });
+    lockNative(true);
+    return true;
+  } catch (error) { showToast(error.message, 'error'); return false; }
+}
+
+export function handleContextualWorkspaceMessage(msg) {
+  var handoff = store.get('contextualWorkspace');
+  if (!handoff || store.get('paneMode')) return;
+  if (msg.type === 'session_switched' && handoff.stage.indexOf('workspace') === 0 && store.get('currentSlug') === handoff.slug) {
+    var saved = handoff.draft;
+    if (store.get('activeSessionId') === handoff.sessionId) saved = takeComposerDraft();
+    var exact = msg.id === handoff.sessionId;
+    store.set({ contextualWorkspace: Object.assign({}, handoff, { draft: saved, stage: exact ? 'opening' : 'workspace-other' }) });
+    if (exact) lockNative(true);
+    return;
+  }
+  if (msg.type !== 'history_done') return;
+  if (handoff.stage === 'opening' && store.get('currentSlug') === handoff.slug && store.get('activeSessionId') === handoff.sessionId) {
+    restoreComposerDraft(handoff.draft);
+    store.set({ contextualWorkspace: Object.assign({}, handoff, { draft: null, stage: 'workspace' }), contextualClay: Object.assign({}, store.get('contextualClay'), { mode: 'workspace' }) });
+    lockNative(false);
+  } else if (handoff.stage === 'returning' && (store.get('currentSlug') !== handoff.slug || store.get('activeSessionId') !== handoff.sessionId)) {
+    if (handoff.projectDraft && store.get('currentSlug') === handoff.returnSlug && store.get('activeSessionId') === handoff.returnSessionId) restoreComposerDraft(handoff.projectDraft);
+    var restored = handoff.returnWorkspace && store.get('currentSlug') === handoff.returnSlug && store.get('activeSessionId') === handoff.returnSessionId ? handoff.returnWorkspace : null;
+    store.set({ contextualWorkspace: restored, contextualClay: restored ? { mode: 'workspace', mateId: restored.slug.slice(5), sessionId: restored.sessionId } : store.get('contextualClay') });
+    lockNative(false);
+  }
+}
+export function renderContextualWorkspaceBack() {
+  var handoff = store.get('contextualWorkspace');
+  document.body.classList.toggle('contextual-clay-native', !!handoff && handoff.stage === 'workspace' && store.get('currentSlug') === handoff.slug);
+  var button = document.getElementById('contextual-workspace-back');
+  if (!button) {
+    button = document.createElement('button'); button.id = 'contextual-workspace-back'; button.type = 'button';
+    button.innerHTML = iconHtml('arrow-left') + '<span>Back to project</span>';
+    button.addEventListener('click', returnFromClay);
+    document.getElementById('header-left').prepend(button);
+    refreshIcons();
+  }
+  var returnMate = handoff && handoff.returnSlug && handoff.returnSlug.indexOf('mate-') === 0 && contextualMate(handoff.returnSlug.slice(5));
+  button.querySelector('span').textContent = returnMate ? 'Back to ' + getHomeMateName(returnMate) : 'Back to project';
+  button.hidden = !handoff || handoff.stage.indexOf('workspace') !== 0 || store.get('currentSlug') !== handoff.slug;
+}
+
+export function prepareContextualWorkspaceDeparture(slug) {
+  var origin = store.get('contextualNativeOrigin');
+  if (origin && slug !== origin.slug && !finishContextualNativeOrigin()) return false;
+  var handoff = store.get('contextualWorkspace');
+  if (handoff && handoff.stage.indexOf('workspace') === 0 && slug !== handoff.slug) return finishContextualWorkspace();
+}
+export function initContextualWorkspace() {
+  var width = 0;
+  new ResizeObserver(function (entries) {
+    var next = entries[0].contentRect.width;
+    if (next === width || !next || !store.get('contextualWorkspace')) return;
+    width = next; autoResize();
+  }).observe(document.getElementById('input-textarea-wrap'));
+  store.subscribe(function (value, previous) {
+    var handoff = value.contextualWorkspace;
+    if (!handoff || handoff.stage !== 'workspace' || !previous.connected || value.connected || value.currentSlug !== handoff.slug) return;
+    var draft = takeComposerDraft();
+    store.set({ contextualWorkspace: Object.assign({}, handoff, { draft: draft, stage: 'opening' }), pendingProjectSessionNavigation: { projectSlug: handoff.slug, sessionId: handoff.sessionId } });
+    lockNative(true);
+  });
+}