clay-server 2.38.0-beta.4 → 2.38.0-beta.5

package/lib/public/css/home-chat.css

@@ -6,32 +6,38 @@
    .home-chat-frame (rounded card with header / messages / input).
    Inspired by Vercel's persistent toolbar pattern. */
 
-/* --- FAB --- */
+/* --- FAB ---
+   Draggable. Default position is bottom-right; user position is
+   restored from localStorage. Inline `top`/`left` set by JS override
+   the default `right`/`bottom`. */
 
 .clay-fab {
   position: fixed;
-  right: 20px;
-  bottom: 20px;
-  width: 56px;
-  height: 56px;
+  right: 18px;
+  bottom: 18px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   border: none;
   background: var(--bg, #fff);
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
-  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
+  cursor: grab;
   z-index: 9000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  transition: transform 0.18s cubic-bezier(.2,.7,.3,1.3), box-shadow 0.18s, opacity 0.18s;
+  transition: box-shadow 0.18s, opacity 0.18s, transform 0.18s cubic-bezier(.2,.7,.3,1.3);
+  user-select: none;
+  touch-action: none;
 }
 .clay-fab:hover {
-  transform: translateY(-1px) scale(1.04);
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 3px 6px rgba(0, 0, 0, 0.10);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.10);
 }
-.clay-fab:active {
-  transform: scale(0.96);
+.clay-fab.dragging {
+  cursor: grabbing;
+  transition: none;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26), 0 4px 8px rgba(0, 0, 0, 0.14);
 }
 .clay-fab.open {
   /* Hide while popover is open — the popover X button is the close path */
@@ -41,8 +47,8 @@
 }
 
 .clay-fab-icon {
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   object-fit: cover;
   pointer-events: none;
@@ -68,16 +74,16 @@
 
 .clay-popover {
   position: fixed;
-  right: 20px;
-  bottom: 20px;
-  width: 380px;
-  height: 560px;
+  right: 18px;
+  bottom: 18px;
+  width: 320px;
+  height: 480px;
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 40px);
   z-index: 9001;
   display: flex;
   transform-origin: bottom right;
-  animation: clay-popover-in 0.22s cubic-bezier(.2,.7,.3,1.05);
+  animation: clay-popover-in 0.18s cubic-bezier(.2,.7,.3,1.05);
 }
 .clay-popover.hidden {
   display: none;
@@ -326,16 +332,20 @@
    inset, and the FAB shrinks slightly. */
 
 @media (max-width: 768px) {
-  /* Lift the FAB above the mobile tab bar (56px + safe-bottom). */
-  .clay-fab {
+  /* Lift the FAB above the mobile tab bar (56px + safe-bottom).
+     Only applies when JS hasn't placed the FAB at a custom position
+     (custom positions use inline top/left and override these defaults). */
+  .clay-fab:not(.user-positioned) {
     right: 14px;
     bottom: calc(56px + var(--safe-bottom, 0px) + 14px);
-    width: 50px;
-    height: 50px;
+  }
+  .clay-fab {
+    width: 44px;
+    height: 44px;
   }
   .clay-fab-icon {
-    width: 32px;
-    height: 32px;
+    width: 30px;
+    height: 30px;
   }
 }
 

package/lib/public/modules/home-chat.js

@@ -18,6 +18,11 @@ var typingEl = null;
 var newBtnEl = null;
 var closeBtnEl = null;
 
+// Drag state for the FAB.
+var FAB_POS_KEY = "clay-fab-pos";
+var DRAG_THRESHOLD_PX = 5;
+var dragState = null;
+
 // Per-turn assembly state. Server may emit many delta events for a single
 // assistant turn; we accumulate text and render incrementally into the
 // last bubble.
@@ -40,8 +45,20 @@ export function initHomeChat() {
 
   if (!fabBtn || !popoverEl || !messagesEl || !inputEl || !sendBtn) return;
 
-  // --- FAB toggle ---
-  fabBtn.addEventListener("click", toggleOpen);
+  // --- Restore persisted FAB position ---
+  restoreFabPosition();
+  // Re-clamp on viewport resize so a saved position from a wider window
+  // doesn't strand the FAB off-screen.
+  window.addEventListener("resize", function () {
+    if (fabBtn.classList.contains("user-positioned")) clampFabIntoView();
+  });
+
+  // --- FAB drag + click ---
+  // mousedown/touchstart begins a potential drag. We only treat it as a
+  // click (toggle popover) if the pointer didn't move past DRAG_THRESHOLD_PX.
+  fabBtn.addEventListener("mousedown", onPointerDown);
+  fabBtn.addEventListener("touchstart", onPointerDown, { passive: false });
+
   if (closeBtnEl) closeBtnEl.addEventListener("click", closePopover);
 
   // ESC closes the popover.
@@ -77,9 +94,159 @@ export function initHomeChat() {
   }
 }
 
+// --- FAB drag mechanics ---
+
+function getPointer(e) {
+  if (e.touches && e.touches.length > 0) {
+    return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }
+  return { x: e.clientX, y: e.clientY };
+}
+
+function onPointerDown(e) {
+  // Ignore right-clicks and modifier-clicks.
+  if (e.button && e.button !== 0) return;
+  var p = getPointer(e);
+  var rect = fabBtn.getBoundingClientRect();
+  dragState = {
+    startX: p.x,
+    startY: p.y,
+    offsetX: p.x - rect.left,
+    offsetY: p.y - rect.top,
+    moved: false,
+  };
+  document.addEventListener("mousemove", onPointerMove);
+  document.addEventListener("mouseup", onPointerUp);
+  document.addEventListener("touchmove", onPointerMove, { passive: false });
+  document.addEventListener("touchend", onPointerUp);
+  document.addEventListener("touchcancel", onPointerUp);
+  // Don't preventDefault yet — we let the browser distinguish between a
+  // tap (which should fire click → toggle) and a drag.
+}
+
+function onPointerMove(e) {
+  if (!dragState) return;
+  var p = getPointer(e);
+  var dx = p.x - dragState.startX;
+  var dy = p.y - dragState.startY;
+  if (!dragState.moved && Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD_PX) {
+    return;
+  }
+  dragState.moved = true;
+  fabBtn.classList.add("dragging");
+  // Touch needs explicit prevent so the page doesn't scroll.
+  if (e.cancelable) e.preventDefault();
+  var x = p.x - dragState.offsetX;
+  var y = p.y - dragState.offsetY;
+  setFabPosition(x, y);
+}
+
+function onPointerUp() {
+  document.removeEventListener("mousemove", onPointerMove);
+  document.removeEventListener("mouseup", onPointerUp);
+  document.removeEventListener("touchmove", onPointerMove);
+  document.removeEventListener("touchend", onPointerUp);
+  document.removeEventListener("touchcancel", onPointerUp);
+  if (!dragState) return;
+  if (dragState.moved) {
+    fabBtn.classList.remove("dragging");
+    persistFabPosition();
+    clampFabIntoView();
+  } else {
+    // Pure tap → toggle popover.
+    toggleOpen();
+  }
+  dragState = null;
+}
+
+function setFabPosition(x, y) {
+  // Ensure the FAB stays within the viewport with a small margin.
+  var margin = 4;
+  var w = fabBtn.offsetWidth;
+  var h = fabBtn.offsetHeight;
+  var maxX = window.innerWidth - w - margin;
+  var maxY = window.innerHeight - h - margin;
+  if (x < margin) x = margin;
+  if (y < margin) y = margin;
+  if (x > maxX) x = maxX;
+  if (y > maxY) y = maxY;
+  fabBtn.classList.add("user-positioned");
+  fabBtn.style.left = x + "px";
+  fabBtn.style.top = y + "px";
+  fabBtn.style.right = "auto";
+  fabBtn.style.bottom = "auto";
+  // If the popover is open, keep it anchored to the FAB.
+  if (openState) anchorPopoverToFab();
+}
+
+function clampFabIntoView() {
+  if (!fabBtn) return;
+  var rect = fabBtn.getBoundingClientRect();
+  setFabPosition(rect.left, rect.top);
+}
+
+function persistFabPosition() {
+  if (!fabBtn) return;
+  try {
+    var rect = fabBtn.getBoundingClientRect();
+    localStorage.setItem(FAB_POS_KEY, JSON.stringify({ x: rect.left, y: rect.top }));
+  } catch (e) {}
+}
+
+function restoreFabPosition() {
+  try {
+    var raw = localStorage.getItem(FAB_POS_KEY);
+    if (!raw) return;
+    var pos = JSON.parse(raw);
+    if (pos && typeof pos.x === "number" && typeof pos.y === "number") {
+      setFabPosition(pos.x, pos.y);
+    }
+  } catch (e) {}
+}
+
+// Anchor the popover so its corner sits next to the FAB. We pick the
+// corner that gives the most room — popover opens "into" the screen,
+// not off-screen.
+function anchorPopoverToFab() {
+  if (!fabBtn || !popoverEl) return;
+  var fr = fabBtn.getBoundingClientRect();
+  var pw = popoverEl.offsetWidth || 320;
+  var ph = popoverEl.offsetHeight || 480;
+  var margin = 12;
+  // Decide vertical: open above FAB if there's more room above.
+  var roomAbove = fr.top;
+  var roomBelow = window.innerHeight - fr.bottom;
+  var openUp = roomAbove >= roomBelow;
+  // Decide horizontal: align right edge of popover with right edge of FAB
+  // when the FAB is on the right half of the screen, else left edge.
+  var fabRightSide = (fr.left + fr.width / 2) > window.innerWidth / 2;
+
+  var top, left;
+  if (openUp) {
+    top = Math.max(margin, fr.top - ph - 8);
+    popoverEl.style.transformOrigin = fabRightSide ? "bottom right" : "bottom left";
+  } else {
+    top = Math.min(window.innerHeight - ph - margin, fr.bottom + 8);
+    popoverEl.style.transformOrigin = fabRightSide ? "top right" : "top left";
+  }
+  if (fabRightSide) {
+    left = Math.max(margin, fr.right - pw);
+  } else {
+    left = Math.min(window.innerWidth - pw - margin, fr.left);
+  }
+  popoverEl.style.top = top + "px";
+  popoverEl.style.left = left + "px";
+  popoverEl.style.right = "auto";
+  popoverEl.style.bottom = "auto";
+}
+
 function openPopover() {
   if (!popoverEl || openState) return;
   openState = true;
+  // Anchor BEFORE unhiding so the slide-up animation uses the correct
+  // transform-origin (top vs bottom, left vs right) for the FAB's
+  // current corner.
+  anchorPopoverToFab();
   popoverEl.classList.remove("hidden");
   if (fabBtn) fabBtn.classList.add("open");
   // Pull session history on first open. If WS isn't ready yet, leave

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.38.0-beta.4",
+  "version": "2.38.0-beta.5",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",