clay-server 5.0.0-beta.2 → 5.0.0-beta.3

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

@@ -0,0 +1,338 @@
+// Inline session creation for the project sidebar.
+//
+// Every real folder header (custom folders and Unfiled, not the Favorites tag) has a quiet
+// "+ New session" button that opens one draft row directly under that header:
+// provider icon, a compact provider picker and icon Cancel; the same header
+// action that opened the draft becomes Create. Only the
+// provider is chosen; the model and effort stay whatever that provider's
+// existing defaults produce. The installed providers and the project default
+// come from the server; the saved project default is preselected, and a
+// default changes only through the explicit action beside an available
+// provider. All mutable state lives in the store (sessionCreate,
+// sessionCreateOptions, sessionCreateLocks, sessionCreateReveal); the DOM is
+// built in session-create-form.js.
+
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { resolvePreferredVendor } from './default-vendor.js';
+import { sendFolderOp, currentFolderState } from './session-folders.js';
+
+// Ids are unique without any module-level counter.
+function nextId(prefix) {
+  return prefix + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
+}
+
+var PENDING_TIMEOUT_MS = 30000;
+
+function send(message) {
+  var ws = getWs();
+  if (!ws || !store.get('connected')) return false;
+  try {
+    ws.send(JSON.stringify(Object.assign({ slug: store.get('currentSlug') }, message)));
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
+export function createState() {
+  return store.get('sessionCreate') || null;
+}
+
+function patch(change) {
+  var current = createState();
+  if (current) store.set({ sessionCreate: Object.assign({}, current, change) });
+}
+
+export function createOptions() {
+  return store.get('sessionCreateOptions') || { loaded: false, vendors: [], projectDefault: null, canSetProjectDefault: false, error: "", requestId: null };
+}
+
+export function installedVendorIds() {
+  return createOptions().vendors.filter(function (v) { return v.installed; }).map(function (v) { return v.id; });
+}
+
+// --- Opening and closing ---
+
+export function openSessionCreate(folderId) {
+  var current = createState();
+  // A creation in flight keeps its row: its outcome must always find it.
+  if (current && current.phase === "pending") return;
+  if (current && current.folderId === folderId) {
+    patch({ wantFocus: true, focusKey: "vendor", scroll: true });
+    return;
+  }
+  var options = createOptions();
+  store.set({ sessionCreate: {
+    folderId: folderId, vendor: options.loaded ? preferredVendor(options) : "", phase: "ready", requestId: null, timer: null, error: "", notice: "",
+    defaultRequestId: null, defaultSaving: false, defaultVendor: null, focusKey: "vendor", wantFocus: false, scroll: true, restoreFocusKey: null,
+    openedAt: Date.now(),
+  } });
+  requestOptions();
+}
+
+export function closeSessionCreate() {
+  var current = createState();
+  if (!current || current.phase === "pending") return;
+  store.set({ sessionCreate: null });
+}
+
+// --- Providers ---
+
+function requestOptions() {
+  var requestId = nextId("sco-");
+  store.set({ sessionCreateOptions: Object.assign({}, createOptions(), { requestId: requestId, error: "" }) });
+  if (!send({ type: "new_session_options_get", requestId: requestId })) {
+    store.set({ sessionCreateOptions: Object.assign({}, createOptions(), { requestId: null, error: "Not connected. Reconnect to choose a provider." }) });
+  }
+}
+
+export function retryOptions() {
+  requestOptions();
+}
+
+function preferredVendor(options) {
+  var installed = options.vendors.filter(function (v) { return v.installed; }).map(function (v) { return v.id; });
+  if (options.projectDefault && installed.indexOf(options.projectDefault) !== -1) return options.projectDefault;
+  return resolvePreferredVendor(installed) || "";
+}
+
+function handleOptions(msg) {
+  var current = createOptions();
+  // Only the newest outstanding request is accepted; anything older or
+  // unsolicited is ignored.
+  if (!msg.requestId || msg.requestId !== current.requestId) return;
+  if (msg.slug && msg.slug !== store.get('currentSlug')) return;
+  var next = Object.assign({}, current, {
+    loaded: true, requestId: null, error: msg.error || "",
+    vendors: Array.isArray(msg.vendors) ? msg.vendors : current.vendors,
+    projectDefault: msg.projectDefault || null,
+    canSetProjectDefault: msg.canSetProjectDefault === true,
+  });
+  store.set({ sessionCreateOptions: next });
+  var form = createState();
+  if (form && (!form.vendor || installedVendorIds().indexOf(form.vendor) === -1)) patch({ vendor: preferredVendor(next) });
+}
+
+export function chooseVendor(vendor) {
+  var form = createState();
+  if (!form || form.phase === "pending") return;
+  if (installedVendorIds().indexOf(vendor) === -1) return;
+  patch({ vendor: vendor, notice: "", error: "", menuOpen: false });
+}
+
+// The provider dropdown's open state and highlighted item live in the store.
+export function setCreateMenu(open, index) {
+  var form = createState();
+  if (!form || form.phase === "pending") return;
+  patch({ menuOpen: open === true, menuIndex: typeof index === "number" ? index : (form.menuIndex || 0), menuFocus: open === true });
+}
+
+// --- Create ---
+
+var LOCKED_KEYS = ["lastVendor", "currentVendor", "currentModel", "currentModels", "vendorSelectionLocked", "sessionVendorBound"];
+var MAX_LOCKS = 4;
+
+// The composer state a creation overwrote optimistically, kept in the store so
+// a failed creation can put it back. Bounded, and dropped on disconnect, close
+// and project or DM switches.
+function rememberLock(requestId, optimisticVendor) {
+  var saved = { activeSessionId: store.get('activeSessionId'), optimisticVendor: optimisticVendor, values: {} };
+  for (var i = 0; i < LOCKED_KEYS.length; i++) saved.values[LOCKED_KEYS[i]] = store.get(LOCKED_KEYS[i]);
+  var locks = Object.assign({}, store.get('sessionCreateLocks') || {});
+  var ids = Object.keys(locks);
+  while (ids.length >= MAX_LOCKS) delete locks[ids.shift()];
+  locks[requestId] = saved;
+  store.set({ sessionCreateLocks: locks });
+}
+
+function forgetLock(requestId) {
+  var locks = Object.assign({}, store.get('sessionCreateLocks') || {});
+  if (!locks[requestId]) return null;
+  var saved = locks[requestId];
+  delete locks[requestId];
+  store.set({ sessionCreateLocks: locks });
+  return saved;
+}
+
+export function submitSessionCreate(startNewSession) {
+  var form = createState();
+  if (!form || form.phase === "pending") return false;
+  if (!form.vendor || installedVendorIds().indexOf(form.vendor) === -1) {
+    patch({ error: "Choose an installed provider first.", focusKey: "vendor", wantFocus: true });
+    return false;
+  }
+  var requestId = nextId("scn-");
+  var extra = { forceNew: true, requestId: requestId, folderSlug: store.get('currentSlug'), folderId: form.folderId === "unfiled" ? null : form.folderId };
+  rememberLock(requestId, form.vendor);
+  var timer = setTimeout(function () { onPendingTimeout(requestId); }, PENDING_TIMEOUT_MS);
+  patch({ phase: "pending", requestId: requestId, error: "", notice: "", timer: timer });
+  if (!startNewSession(form.vendor, extra)) {
+    clearTimeout(timer);
+    forgetLock(requestId);
+    patch({ phase: "ready", requestId: null, timer: null, error: "Not connected. Reconnect and try again." });
+    return false;
+  }
+  return true;
+}
+
+function onPendingTimeout(requestId) {
+  var form = createState();
+  if (!form || form.requestId !== requestId || form.phase !== "pending") return;
+  forgetLock(requestId);
+  patch({ phase: "ready", requestId: null, timer: null, error: "No response yet. The session may already have been created; check the list first." });
+}
+
+// Puts the composer back only while it still reflects this creation; if the
+// user has since moved to another session, that session's state wins.
+function restoreLock(requestId) {
+  var saved = forgetLock(requestId);
+  if (!saved) return;
+  if (store.get('activeSessionId') !== saved.activeSessionId || store.get('currentVendor') !== saved.optimisticVendor) return;
+  store.set(saved.values);
+}
+
+export function handleNewSessionResult(msg) {
+  var form = createState();
+  if (!form || !msg.requestId || msg.requestId !== form.requestId) return false;
+  clearTimeout(form.timer);
+  if (!msg.ok) {
+    restoreLock(msg.requestId);
+    patch({ phase: "ready", requestId: null, timer: null, error: msg.error || "The session could not be created.", focusKey: "create", wantFocus: true });
+    return true;
+  }
+  forgetLock(msg.requestId);
+  // When filing failed the session really is in Unfiled, so that is what to reveal.
+  var destination = msg.folderPlaced === false ? "unfiled" : (msg.folderId || form.folderId || "unfiled");
+  if (msg.folderPlaced === false) showToast("The session was created but could not be filed in that folder. It is in Unfiled.", "warn");
+  store.set({ sessionCreate: null });
+  revealCreatedSession(destination, msg.sessionId);
+  return true;
+}
+
+// --- Revealing the new session ---
+
+// Called for every project-sidebar creation (including ones without a folder,
+// such as the /clear command): the destination is expanded and the new session
+// scrolled into view once the server acknowledges it or it becomes active.
+export function expectCreatedSession(folderId) {
+  store.set({ sessionCreateReveal: { folderId: folderId || "unfiled", sessionId: null, until: Date.now() + 15000, attempts: 0 } });
+}
+
+export function revealCreatedSession(folderId, sessionId) {
+  var reveal = store.get('sessionCreateReveal') || {};
+  store.set({ sessionCreateReveal: { folderId: folderId || reveal.folderId || "unfiled", sessionId: sessionId, until: Date.now() + 15000, attempts: 0 } });
+  expandDestination(folderId || reveal.folderId || "unfiled");
+  scheduleReveal();
+}
+
+function expandDestination(folderId) {
+  var state = currentFolderState();
+  if (state.collapsed && state.collapsed[folderId] === true) sendFolderOp({ op: "set_collapsed", containerKey: folderId, collapsed: false });
+}
+
+function visibleRow(sessionId) {
+  var rows = document.querySelectorAll('.session-item[data-session-id="' + sessionId + '"]');
+  for (var i = 0; i < rows.length; i++) if (rows[i].getClientRects().length) return rows[i];
+  return null;
+}
+
+function scheduleReveal() {
+  setTimeout(tryReveal, 0);
+}
+
+function tryReveal() {
+  var reveal = store.get('sessionCreateReveal');
+  if (!reveal || !reveal.sessionId) return;
+  if (Date.now() > reveal.until || reveal.attempts > 40) { store.set({ sessionCreateReveal: null }); return; }
+  var row = visibleRow(reveal.sessionId);
+  if (row) {
+    if (row.scrollIntoView) row.scrollIntoView({ block: "nearest" });
+    store.set({ sessionCreateReveal: null });
+    return;
+  }
+  store.set({ sessionCreateReveal: Object.assign({}, reveal, { attempts: reveal.attempts + 1 }) });
+  setTimeout(tryReveal, 60);
+}
+
+// --- Project default (provider only) ---
+
+export function saveProjectDefault(vendor) {
+  var form = createState();
+  if (!form || form.phase === "pending" || form.defaultSaving || installedVendorIds().indexOf(vendor) === -1) return false;
+  var requestId = nextId("scd-");
+  patch({ defaultSaving: true, defaultRequestId: requestId, defaultVendor: vendor, error: "", notice: "" });
+  if (!send({ type: "new_session_default_set", requestId: requestId, vendor: vendor })) {
+    patch({ defaultSaving: false, defaultRequestId: null, defaultVendor: null, error: "Not connected. Reconnect and try again." });
+    return false;
+  }
+  return true;
+}
+
+function handleDefaultResult(msg) {
+  var form = createState();
+  if (!form || !msg.requestId || msg.requestId !== form.defaultRequestId) return;
+  if (!msg.ok) { patch({ defaultSaving: false, defaultRequestId: null, defaultVendor: null, error: msg.error || "The project default could not be saved." }); return; }
+  store.set({ sessionCreateOptions: Object.assign({}, createOptions(), { projectDefault: msg.projectDefault || null }) });
+  patch({ defaultSaving: false, defaultRequestId: null, defaultVendor: null, error: "", notice: "Saved as this project's default." });
+}
+
+// --- Messages and lifecycle ---
+
+export function handleSessionCreateMessage(msg) {
+  if (msg.type === "new_session_options") { handleOptions(msg); return true; }
+  if (msg.type === "new_session_default_result") { handleDefaultResult(msg); return true; }
+  if (msg.type === "new_session_project_default") {
+    if (!msg.slug || msg.slug === store.get('currentSlug')) store.set({ sessionCreateOptions: Object.assign({}, createOptions(), { projectDefault: msg.projectDefault || null }) });
+    return true;
+  }
+  return false;
+}
+
+// Requests that were in flight are gone; nothing may stay waiting forever.
+function onDisconnect(form) {
+  store.set({ sessionCreateLocks: {} });
+  var options = createOptions();
+  if (options.requestId) store.set({ sessionCreateOptions: Object.assign({}, options, { requestId: null, error: "Connection lost. Reconnect to load providers." }) });
+  if (!form) return;
+  if (form.timer) clearTimeout(form.timer);
+  if (form.phase === "pending") {
+    patch({ phase: "ready", requestId: null, timer: null, error: "Connection lost. The session may already have been created; check the list first." });
+  }
+  if (form.defaultSaving) patch({ defaultSaving: false, defaultRequestId: null, defaultVendor: null, error: "Connection lost before the project default was confirmed." });
+}
+
+function clearAll() {
+  var form = createState();
+  if (form && form.timer) clearTimeout(form.timer);
+  store.set({ sessionCreateLocks: {}, sessionCreate: null, sessionCreateOptions: null, sessionCreateReveal: null });
+}
+
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.dmMode !== previous.dmMode) {
+    if (state.sessionCreate || state.sessionCreateOptions || state.sessionCreateReveal) clearAll();
+    return;
+  }
+  var form = state.sessionCreate;
+  if (previous.connected && !state.connected) onDisconnect(form);
+  // The providers are requested again after a reconnect.
+  if (!previous.connected && state.connected && form) requestOptions();
+  // Folder removed while its row was open: say so instead of letting a later
+  // create fail, and never silently file the session elsewhere.
+  if (form && state.sessionFolders !== previous.sessionFolders && form.folderId !== "unfiled") {
+    var folders = currentFolderState().folders;
+    var known = false;
+    for (var i = 0; i < folders.length; i++) if (folders[i].id === form.folderId) known = true;
+    if (!known && state.sessionFolders && form.phase !== "pending") {
+      store.set({ sessionCreate: null });
+      showToast("That folder was removed, so the new session row was closed.", "warn");
+    }
+  }
+  var reveal = state.sessionCreateReveal;
+  if (reveal && !reveal.sessionId && state.activeSessionId !== previous.activeSessionId && state.activeSessionId != null && Date.now() < reveal.until) {
+    revealCreatedSession(reveal.folderId, state.activeSessionId);
+  } else if (reveal && reveal.sessionId && state.sessionFolderLayouts !== previous.sessionFolderLayouts) {
+    scheduleReveal();
+  }
+});

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

@@ -0,0 +1,192 @@
+// Measured folder-body expand/collapse motion. Only direct user toggles create
+// animation records; initial snapshots and ordinary rerenders settle instantly.
+
+import { store } from './store.js';
+
+var MIN_DURATION_MS = 180;
+var MAX_DURATION_MS = 480;
+var LONG_DISTANCE_START_PX = 120;
+var MS_PER_EXTRA_PX = 0.32;
+var EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+
+function keyFor(surface, folderId) {
+  return surface + ":" + folderId;
+}
+
+function records() {
+  return store.get('sessionFolderCollapseAnimations') || {};
+}
+
+function putRecord(key, record) {
+  var next = Object.assign({}, records());
+  if (record) next[key] = record;
+  else delete next[key];
+  store.set({ sessionFolderCollapseAnimations: next });
+}
+
+function currentRecord(key, token) {
+  var record = records()[key];
+  return record && (!token || record.token === token) ? record : null;
+}
+
+function reducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function cancelBodyAnimation(body) {
+  var animations = body.getAnimations ? body.getAnimations() : [];
+  for (var i = 0; i < animations.length; i++) animations[i].cancel();
+}
+
+function durationForDistance(distance) {
+  var extra = Math.max(0, distance - LONG_DISTANCE_START_PX) * MS_PER_EXTRA_PX;
+  return Math.round(Math.min(MAX_DURATION_MS, MIN_DURATION_MS + extra));
+}
+
+function scrollContainerFor(element) {
+  var node = element && element.parentElement;
+  while (node && node !== document.body) {
+    var style = window.getComputedStyle(node);
+    if (/(auto|scroll|overlay)/.test(style.overflowY) && node.scrollHeight > node.clientHeight) return node;
+    node = node.parentElement;
+  }
+  return document.scrollingElement;
+}
+
+function captureScrollPosition(element) {
+  var scroller = scrollContainerFor(element);
+  return scroller ? scroller.scrollTop : null;
+}
+
+function restoreScrollPosition(record, element) {
+  if (typeof record.scrollTop !== "number") return;
+  var scroller = scrollContainerFor(element);
+  if (scroller) scroller.scrollTop = record.scrollTop;
+}
+
+function cleanBody(body) {
+  cancelBodyAnimation(body);
+  body.classList.remove("folder-collapse-animating");
+  body.style.height = "";
+  body.style.overflow = "";
+}
+
+function setAccessibleState(root, body, toggle, open) {
+  toggle.setAttribute("aria-expanded", String(open));
+  root.classList.toggle("collapsed", !open);
+  if (open) {
+    body.hidden = false;
+    body.removeAttribute("aria-hidden");
+    body.removeAttribute("inert");
+    body.inert = false;
+  } else {
+    if (body.contains(document.activeElement)) toggle.focus({ preventScroll: true });
+    body.setAttribute("aria-hidden", "true");
+    body.setAttribute("inert", "");
+    body.inert = true;
+  }
+}
+
+function finish(key, token, root, body, toggle, open) {
+  if (currentRecord(key, token)) putRecord(key, null);
+  cleanBody(body);
+  setAccessibleState(root, body, toggle, open);
+  body.hidden = !open;
+}
+
+function animateRecord(key, record, root, body, toggle) {
+  if (!body.isConnected || !currentRecord(key, record.token)) return;
+  cleanBody(body);
+  body.hidden = false;
+  var start = typeof record.height === "number" ? record.height : body.getBoundingClientRect().height;
+  body.style.height = "";
+  var end = record.open ? body.getBoundingClientRect().height : 0;
+  body.style.height = start + "px";
+  body.style.overflow = "hidden";
+  body.classList.add("folder-collapse-animating");
+  setAccessibleState(root, body, toggle, record.open);
+  var distance = Math.abs(end - start);
+  if (!record.endsAt) {
+    record = Object.assign({}, record, { endsAt: Date.now() + durationForDistance(distance) });
+    putRecord(key, record);
+  }
+  var remaining = Math.max(1, record.endsAt - Date.now());
+  if (reducedMotion() || !body.animate || Math.abs(end - start) < 0.5) {
+    finish(key, record.token, root, body, toggle, record.open);
+    return;
+  }
+  var animation = body.animate(
+    [{ height: start + "px" }, { height: end + "px" }],
+    { duration: remaining, easing: EASING, fill: "forwards" }
+  );
+  animation.finished.then(function () {
+    finish(key, record.token, root, body, toggle, record.open);
+  }).catch(function () {});
+}
+
+export function toggleFolderCollapse(root, body, toggle, surface, folderId, commit) {
+  var key = keyFor(surface, folderId);
+  var open = toggle.getAttribute("aria-expanded") !== "true";
+  var start = body.hidden ? 0 : body.getBoundingClientRect().height;
+  cancelBodyAnimation(body);
+  if (open) body.hidden = false;
+  var record = {
+    token: Date.now() + ":" + Math.random(),
+    open: open,
+    height: start,
+    endsAt: 0,
+    scrollTop: captureScrollPosition(toggle),
+  };
+  putRecord(key, record);
+  commit(!open);
+  animateRecord(key, record, root, body, toggle);
+}
+
+export function restoreFolderCollapse(root, body, toggle, surface, folderId, collapsed, forceOpen) {
+  var key = keyFor(surface, folderId);
+  var record = currentRecord(key);
+  cleanBody(body);
+  if (forceOpen) {
+    if (record) putRecord(key, null);
+    setAccessibleState(root, body, toggle, true);
+    return;
+  }
+  if (!record) {
+    setAccessibleState(root, body, toggle, !collapsed);
+    body.hidden = collapsed;
+    return;
+  }
+  setAccessibleState(root, body, toggle, record.open);
+  body.style.height = record.height + "px";
+  body.style.overflow = "hidden";
+  body.classList.add("folder-collapse-animating");
+  queueMicrotask(function () {
+    var live = currentRecord(key, record.token);
+    if (live) {
+      restoreScrollPosition(live, toggle);
+      animateRecord(key, live, root, body, toggle);
+    }
+  });
+}
+
+export function captureFolderCollapseAnimations(root) {
+  if (!root || !root.querySelectorAll) return;
+  var bodies = root.querySelectorAll(".session-folder-body.folder-collapse-animating");
+  var next = Object.assign({}, records());
+  var changed = false;
+  for (var i = 0; i < bodies.length; i++) {
+    var body = bodies[i];
+    var folder = body.closest(".session-folder");
+    if (!folder) continue;
+    var surface = folder.classList.contains("is-mobile") ? "mobile" : "desktop";
+    var key = keyFor(surface, folder.dataset.folderId);
+    if (!next[key]) continue;
+    next[key] = Object.assign({}, next[key], {
+      height: body.getBoundingClientRect().height,
+      scrollTop: captureScrollPosition(body),
+    });
+    changed = true;
+  }
+  if (changed) store.set({ sessionFolderCollapseAnimations: next });
+}