clay-server 5.2.0-beta.1 → 5.2.0-beta.11

package/lib/public/modules/command-palette.js

@@ -1,10 +1,13 @@
+import { forwardContextualSessionCitation, validContextualCitation, contextualCitationLink } from './contextual-session-citations.js';
 import { mateAvatarUrl } from './avatar.js';
 import { escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
 import { openSearch as openSessionSearch } from './session-search.js';
-import { startSearchClayChat, attachSearchClayChat, detachSearchClayChat, getSearchClayChatSummary } from './search-clay-chat.js';
+import { startSearchClayChat, retrySearchClayAsk } from './search-clay-chat.js';
 import { getWs } from './ws-ref.js';
 import { openProjectLog } from './project-logs.js';
+import { store } from './store.js';
+import { disarmStickyBottom } from './chat-render-runtime.js';
 
 function formatRelativeDate(ts) {
   if (!ts) return "";
@@ -27,7 +30,7 @@ var paletteEl = null, inputEl = null, resultsEl = null, footerEl = null;
 var activeIndex = -1, items = [], debounceTimer = null, abortCtrl = null;
 var pendingNav = null, cachedHomeData = [], cachedVersion = null;
 var pendingLogNav = null;
-var searchResults = [], searchQuery = "", searchPending = false, chatMode = false;
+var searchResults = [], searchQuery = "", searchPending = false;
 
 export function initCommandPalette(value) {
   ctx = value;
@@ -60,6 +63,10 @@ function handleClaySessionLinkClick(event) {
     openProjectLog(link.dataset.logRef);
     return;
   }
+  if (link.classList.contains('clayos-session-link') && forwardContextualSessionCitation(link)) return;
+  requestClayRecordLink(link);
+}
+export function requestClayRecordLink(link, citation) {
   var ws = getWs();
   if (!ws || ws.readyState !== 1) {
     link.classList.add("is-error");
@@ -70,6 +77,10 @@ function handleClaySessionLinkClick(event) {
   var requestId = "clayos-" + (isLog ? "log-" : "session-") + Date.now() + "-" + Math.random().toString(36).slice(2, 9);
   if (isLog) link.dataset.logRequest = requestId;
   else link.dataset.sessionRequest = requestId;
+  if (!isLog) store.set({ sessionNavigationRequestId: requestId, sessionNavigationRequestContext: {
+    projectSlug: store.get('currentSlug'),
+    sessionId: store.get('activeSessionId'), citation: citation || null
+  } });
   link.classList.remove("is-error");
   link.classList.add("is-loading");
   var request = { requestId: requestId, surface: link.closest(".search-clay-chat") ? "search" : "home" };
@@ -79,24 +90,50 @@ function handleClaySessionLinkClick(event) {
   } else {
     request.type = "home_clay_session_resolve";
     request.sessionRef = link.dataset.sessionRef;
+    if (citation) request.contextualSource = { mateId: citation.mateId, sessionId: citation.sessionId, sessionOriginId: citation.originId, mateStamp: citation.stamp };
+    if (link.dataset.sessionEntryIndex !== undefined) request.entryIndex = Number(link.dataset.sessionEntryIndex);
   }
   ws.send(JSON.stringify(request));
+  return true;
 }
 
 export function handleClaySessionTarget(msg) {
   if (!msg || (msg.type !== "home_clay_session_target" && msg.type !== "home_clay_log_target")) return false;
   var isLog = msg.type === "home_clay_log_target";
   var links = document.querySelectorAll(isLog ? ".clayos-log-link[data-log-request]" : ".clayos-session-link[data-session-request]");
-  var link = null;
+  var sourceContext = store.get('sessionNavigationRequestContext');
+  var citation = !isLog && sourceContext && sourceContext.citation;
+  var link = !isLog ? contextualCitationLink(citation, msg.requestId) : null;
   for (var i = 0; i < links.length; i++) {
     if ((isLog ? links[i].dataset.logRequest : links[i].dataset.sessionRequest) === msg.requestId) link = links[i];
   }
+  if (!isLog && link && link.ownerDocument !== document && !citation) { link.classList.remove('is-loading'); link.classList.add('is-error'); link.title = 'The view changed. Click again from the current conversation.'; delete link.dataset.sessionRequest; return true; }
+  if (!isLog && store.get('sessionNavigationRequestId') !== msg.requestId) {
+    if (link) {
+      link.classList.remove("is-loading");
+      delete link.dataset.sessionRequest;
+    }
+    return true;
+  }
+  if (!isLog) {
+    var requestContext = store.get('sessionNavigationRequestContext');
+    if (citation && (!validContextualCitation(citation) || msg.sessionRef !== citation.ref)) { if (link) { link.classList.remove('is-loading'); link.classList.add('is-error'); link.title = 'The view changed. Click again from the current conversation.'; delete link.dataset.sessionRequest; } store.set({ pendingSessionEntryNavigation: null, sessionNavigationRequestContext: null }); return true; }
+    if (requestContext && (String(store.get('currentSlug')) !== String(requestContext.projectSlug) || String(store.get('activeSessionId')) !== String(requestContext.sessionId))) {
+      if (link) {
+        link.classList.remove("is-loading");
+        delete link.dataset.sessionRequest;
+      }
+      store.set({ pendingSessionEntryNavigation: null, sessionNavigationRequestContext: null });
+      return true;
+    }
+  }
   if (link) {
     link.classList.remove("is-loading");
     if (isLog) delete link.dataset.logRequest;
     else delete link.dataset.sessionRequest;
   }
   if (msg.status !== "ready" || !msg.target) {
+    if (!isLog) store.set({ pendingSessionEntryNavigation: null });
     if (link) {
       link.classList.add("is-error");
       link.title = msg.error || "Item not available";
@@ -108,7 +145,7 @@ export function handleClaySessionTarget(msg) {
     navigateToLog(msg.target);
     return true;
   }
-  navigateToSession({ projectSlug: msg.target.projectSlug, sessionId: msg.target.sessionId }, null);
+  navigateToSession({ projectSlug: msg.target.projectSlug, sessionId: msg.target.sessionId }, null, msg.target.entryIndex);
   return true;
 }
 
@@ -120,11 +157,6 @@ export function openCommandPalette() {
   var trigger = document.getElementById("cmd-palette-btn");
   if (trigger) trigger.style.visibility = "hidden";
   updateFooter();
-  if (attachSearchClayChat(resultsEl, showSearch, closeCommandPalette)) {
-    chatMode = true;
-    paletteEl.classList.add("is-chatting");
-    return;
-  }
   showSearch();
   fetchHomeData();
 }
@@ -136,24 +168,114 @@ export function closeCommandPalette() {
   if (trigger) trigger.style.visibility = "";
   if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = null; }
   if (abortCtrl) { abortCtrl.abort(); abortCtrl = null; }
-  detachSearchClayChat();
 }
 
 export function setPaletteVersion(version) { cachedVersion = version; }
 
-export function handlePaletteSessionSwitch() {
+export function handlePaletteSessionSwitch(authoritative) {
   if (pendingLogNav && ctx.currentSlug && ctx.currentSlug() === pendingLogNav.projectSlug) {
     var logNav = pendingLogNav;
     pendingLogNav = null;
     openProjectLog(logNav.ref);
   }
-  if (!pendingNav) return;
-  var nav = pendingNav;
-  pendingNav = null;
-  if (ctx.currentSlug && ctx.currentSlug() === nav.slug) {
-    ctx.selectSession(nav.sessionId);
-    if (nav.query) setTimeout(function () { openSessionSearch(nav.query); }, 400);
+  // session_list precedes the connection's authoritative session_switched.
+  // Wait for that identity instead of requesting a duplicate initial replay.
+  if (authoritative === true && pendingNav && store.get('activeSessionId')) {
+    var nav = pendingNav;
+    pendingNav = null;
+    if (ctx.currentSlug && ctx.currentSlug() === nav.slug) {
+      navigateToSession({ projectSlug: nav.slug, sessionId: nav.sessionId }, nav.query, nav.entryIndex);
+    }
   }
+  var pending = store.get('pendingSessionEntryNavigation');
+  if (pending && isActiveEntryNavigation(pending)) pending.awaitingTarget = false;
+  var highlight = store.get('sessionEntryHighlight');
+  if (highlight && !isCurrentEntryHighlight(highlight)) store.set({ sessionEntryHighlight: null });
+}
+
+export function handlePaletteHistoryDone() {
+  var pending = store.get('pendingSessionEntryNavigation');
+  if (!pending) {
+    var highlight = store.get('sessionEntryHighlight');
+    if (highlight && isCurrentEntryHighlight(highlight)) jumpToSessionEntry(highlight.entryIndex, highlight);
+    return;
+  }
+  if (!isActiveEntryNavigation(pending)) {
+    if (pending.awaitingTarget) return;
+    store.set({ pendingSessionEntryNavigation: null });
+    return;
+  }
+  var historyFrom = store.get('historyFrom') || 0;
+  if (pending.entryIndex < historyFrom) {
+    var ws = getWs();
+    if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: "load_more_history", before: historyFrom, target: pending.entryIndex }));
+    return;
+  }
+  jumpToSessionEntry(pending.entryIndex, pending);
+}
+
+export function handlePaletteHistoryPrepended() {
+  var pending = store.get('pendingSessionEntryNavigation');
+  if (!pending) return;
+  if (!isActiveEntryNavigation(pending)) {
+    if (pending.awaitingTarget) return;
+    store.set({ pendingSessionEntryNavigation: null });
+    return;
+  }
+  requestAnimationFrame(function () {
+    if (store.get('pendingSessionEntryNavigation') !== pending) return;
+    // This frame was scheduled for an already active target. A later
+    // navigation cancels it even if its initial awaiting flag was retained.
+    if (!isActiveEntryNavigation(pending)) {
+      store.set({ pendingSessionEntryNavigation: null });
+      return;
+    }
+    handlePaletteHistoryDone();
+  });
+}
+
+function isActiveEntryNavigation(pending) {
+  return String(store.get('currentSlug') || (ctx && ctx.currentSlug ? ctx.currentSlug() : "")) === String(pending.projectSlug) && String(store.get('activeSessionId')) === String(pending.sessionId);
+}
+
+function isCurrentEntryHighlight(highlight) {
+  return highlight.expiresAt > Date.now() && isActiveEntryNavigation(highlight)
+    && highlight.sessionOriginId === (store.get('sessionOriginId') || null);
+}
+
+function jumpToSessionEntry(entryIndex, pending) {
+  if (pending && !isActiveEntryNavigation(pending)) return;
+  var messages = document.querySelectorAll("#messages [data-history-index], #messages [data-history-indexes]");
+  var target = null;
+  for (var i = 0; i < messages.length; i++) {
+    var indexes = (messages[i].dataset.historyIndexes || messages[i].dataset.historyIndex || "").split(",");
+    if (indexes.indexOf(String(entryIndex)) !== -1) { target = messages[i]; break; }
+  }
+  if (!target) return;
+  store.set({ pendingSessionEntryNavigation: null });
+  disarmStickyBottom();
+  var oldTargets = document.querySelectorAll("#messages .session-entry-target");
+  for (var oldIndex = 0; oldIndex < oldTargets.length; oldIndex++) oldTargets[oldIndex].classList.remove("session-entry-target");
+  var reducedMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  // A repeated authoritative replay replaces the DOM after the initial jump.
+  // Retain only this exact origin for the original feedback lifetime.
+  var highlight = pending && pending.expiresAt ? pending : {
+    projectSlug: store.get('currentSlug'), sessionId: store.get('activeSessionId'),
+    sessionOriginId: store.get('sessionOriginId') || null, entryIndex: entryIndex,
+    expiresAt: Date.now() + (reducedMotion ? 700 : 1800),
+  };
+  store.set({ sessionEntryHighlight: highlight });
+  target.scrollIntoView({ behavior: reducedMotion ? "auto" : "smooth", block: "center" });
+  target.classList.remove("session-entry-target");
+  void target.offsetWidth;
+  target.classList.add("session-entry-target");
+  target.sessionEntryHighlight = highlight;
+  setTimeout(function () {
+    if (target.sessionEntryHighlight !== highlight) return;
+    target.classList.remove("session-entry-target");
+    delete target.sessionEntryHighlight;
+    if (store.get('sessionEntryHighlight') === highlight) store.set({ sessionEntryHighlight: null });
+  }, Math.max(0, highlight.expiresAt - Date.now()));
 }
 
 function navigateToLog(target) {
@@ -211,8 +333,6 @@ function buildDOM() {
 }
 
 function showSearch() {
-  chatMode = false;
-  paletteEl.classList.remove("is-chatting");
   inputEl.value = searchQuery;
   inputEl.disabled = false;
   inputEl.focus({ preventScroll: true });
@@ -276,7 +396,6 @@ function sessionIcon(session) {
 }
 
 function renderSearch() {
-  if (chatMode) return;
   var query = searchQuery.toLowerCase();
   var sessions = query ? cachedHomeData.filter(function (item) {
     return (item.sessionTitle || "").toLowerCase().indexOf(query) !== -1 || (item.projectTitle || "").toLowerCase().indexOf(query) !== -1;
@@ -286,11 +405,10 @@ function renderSearch() {
   for (var r = 0; r < searchResults.length; r++) if (!seen[sessionKey(searchResults[r])]) { sessions.push(searchResults[r]); seen[sessionKey(searchResults[r])] = true; }
   items = [];
   var html = "", index = 0;
-  var clayChat = getSearchClayChatSummary();
-  if (clayChat) {
-    items.push({ type: "resume-clay" });
-    html += '<div class="cmd-palette-group-label">Current Clay chat</div>';
-    html += renderItem(index++, '<img src="/clay-studio-symbol.png" width="22" height="22" alt="">', "Return to Clay", escapeHtml(clayChat.processing ? "Clay is responding" : "Continue your current conversation"), clayChat.preview ? escapeHtml(clayChat.preview) : null, clayChat.updatedAt, " is-resume-clay");
+  var pendingAsk = store.get('contextualSearchAsk');
+  if (!query && pendingAsk && pendingAsk.ownerId === store.get('myUserId') && !pendingAsk.clientMessageId && /^(error|stopped)$/.test(pendingAsk.status)) {
+    items.push({ type: 'retry-clay-ask' });
+    html += renderItem(index++, '<img src="/clay-studio-symbol.png" width="22" height="22" alt="">', 'Retry previous question', escapeHtml(pendingAsk.text), null, null, ' is-retry-clay-ask');
   }
   if (sessions.length) {
     html += '<div class="cmd-palette-group-label">' + (query ? "Conversations" : "Recent conversations") + '</div>';
@@ -305,8 +423,8 @@ function renderSearch() {
   if (query) {
     items.push({ type: "ask-clay", query: searchQuery });
     if (!sessions.length && !searchPending) html += '<div class="cmd-palette-exact-empty">No exact matches. Clay can search by meaning.</div>';
-    html += '<div class="cmd-palette-group-label">' + (clayChat ? "New Clay chat" : "Ask Clay") + '</div>';
-    html += renderItem(index, '<img src="/clay-studio-symbol.png" width="22" height="22" alt="">', (clayChat ? 'Start a new Clay chat about “' : 'Ask Clay about “') + escapeHtml(searchQuery) + '”', "Search by meaning across your projects and conversations", null, null, " is-ask-clay");
+    html += '<div class="cmd-palette-group-label">Ask Clay</div>';
+    html += renderItem(index, '<img src="/clay-studio-symbol.png" width="22" height="22" alt="">', 'Ask Clay about “' + escapeHtml(searchQuery) + '”', "Start a new Clay conversation", null, null, " is-ask-clay");
   }
   if (!html) html = '<div class="cmd-palette-empty">No conversations yet.</div>';
   resultsEl.innerHTML = html;
@@ -339,31 +457,35 @@ function setActive(index, skipScroll) {
 }
 
 function beginClayChat(query) {
-  if (chatMode) return;
-  chatMode = true;
-  paletteEl.classList.add("is-chatting");
-  startSearchClayChat(query, resultsEl, showSearch, closeCommandPalette);
-}
-
-function resumeClayChat() {
-  if (!attachSearchClayChat(resultsEl, showSearch, closeCommandPalette)) return;
-  chatMode = true;
-  paletteEl.classList.add("is-chatting");
+  if (!isCommandPaletteOpen()) return;
+  if (startSearchClayChat(query)) closeCommandPalette();
 }
 
 function activateItem(entry) {
-  if (entry.type === "resume-clay") { resumeClayChat(); return; }
+  if (entry.type === 'retry-clay-ask') { if (retrySearchClayAsk()) closeCommandPalette(); return; }
   if (entry.type === "ask-clay") { beginClayChat(entry.query); return; }
   if (entry.type === "mate-session" || entry.type === "session") navigateToSession(entry.data, entry.query);
 }
 
-function navigateToSession(item, query) {
+export function navigateToSession(item, query, entryIndex) {
   closeCommandPalette();
+  pendingNav = null;
+  store.set({ sessionEntryHighlight: null });
+  var hasEntry = entryIndex !== null && entryIndex !== undefined && Number.isSafeInteger(Number(entryIndex)) && Number(entryIndex) >= 0;
+  store.set({ pendingSessionEntryNavigation: hasEntry ? { projectSlug: item.projectSlug, sessionId: item.sessionId, entryIndex: Number(entryIndex), awaitingTarget: true } : null });
   if (ctx.currentSlug && ctx.currentSlug() === item.projectSlug) {
+    var alreadyActive = String(store.get('activeSessionId')) === String(item.sessionId);
+    if (alreadyActive) {
+      if (query) setTimeout(function () { openSessionSearch(query); }, 400);
+      if (hasEntry) requestAnimationFrame(function () {
+        if (!store.get('replayingHistory')) handlePaletteHistoryDone();
+      });
+      return;
+    }
     ctx.selectSession(item.sessionId);
     if (query) setTimeout(function () { openSessionSearch(query); }, 400);
   } else {
-    pendingNav = { slug: item.projectSlug, sessionId: item.sessionId, query: query };
+    pendingNav = { slug: item.projectSlug, sessionId: item.sessionId, query: query, entryIndex: hasEntry ? Number(entryIndex) : null };
     ctx.switchProject(item.projectSlug);
   }
 }

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

@@ -0,0 +1,26 @@
+import { store } from './store.js';
+import { sendTextMessage } from './input.js';
+import { pausePendingMessage } from './message-delivery.js';
+import { stopGeneration } from './generation-stop.js';
+
+export function submitContextualAsk(request) {
+  if (!request || typeof request.requestId !== 'string' || typeof request.text !== 'string') return null;
+  var current = store.get('contextualAskSubmission');
+  if (current && current.requestId === request.requestId) return current;
+  if (!request || request.ownerId !== store.get('myUserId') || request.sessionId !== store.get('paneSessionId') || request.sessionOriginId !== store.get('sessionOriginId') || !store.get('contextualSessionReady') || !store.get('connected') || store.get('contextualWriterSuspended') || !window.frameElement || window.frameElement.dataset.canonical !== 'true') return null;
+  // A fresh session has no user draft to replace. Refuse any ambiguous target.
+  if (document.getElementById('input').value || (store.get('pendingOutboundMessages') || []).length) return null;
+  store.set({ contextualAskSubmission: { requestId: request.requestId, status: 'sending' } });
+  sendTextMessage(request.text);
+  var outbound = (store.get('pendingOutboundMessages') || []).find(function (item) { return item.payload.text === request.text && item.sessionId === request.sessionId; });
+  var submission = { requestId: request.requestId, status: outbound ? 'sent' : 'unconfirmed', clientMessageId: outbound && outbound.payload.clientMessageId };
+  store.set({ contextualAskSubmission: submission });
+  return submission;
+}
+
+export function pauseContextualAsk() {
+  var current = store.get('contextualAskSubmission');
+  if (current && current.clientMessageId) pausePendingMessage(current.clientMessageId);
+  if (current) store.set({ contextualAskSubmission: Object.assign({}, current, { status: 'stopped' }) });
+}
+export function stopContextualAsk() { pauseContextualAsk(); return stopGeneration(); }

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