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

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

@@ -1,35 +1,108 @@
 /* ==========================================================================
-   Home Chat (Clay) — phablet-style mini chat embedded in the home hub
+   Clay FAB + popover — phablet-style chat reachable from anywhere
    ==========================================================================
-   The home hub is a flex row: this pane sits on the left, the widget
-   column flows to the right. The pane wraps a phone-shaped chat "frame"
-   (rounded card with shadow) so it reads as a discrete surface, not a
-   restyle of the main chat. */
-
-.home-chat-pane {
-  flex: 0 0 auto;
-  width: 50%;
-  min-width: 360px;
-  max-width: 720px;
+   The FAB (#clay-fab) sits at the bottom-right corner over all page
+   content. Clicking it toggles #clay-popover, which contains the
+   .home-chat-frame (rounded card with header / messages / input).
+   Inspired by Vercel's persistent toolbar pattern. */
+
+/* --- 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: 18px;
+  bottom: 18px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg, #fff);
+  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: stretch;
+  align-items: center;
   justify-content: center;
-  padding: 32px 16px 24px;
-  background: var(--bg);
-  border-right: 1px solid var(--border);
+  padding: 0;
+  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 {
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.10);
+}
+.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 */
+  transform: scale(0.6);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.clay-fab-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  object-fit: cover;
+  pointer-events: none;
 }
 
-.home-chat-frame {
+/* Subtle pulse ring to draw the eye on first paint */
+.clay-fab-pulse {
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  opacity: 0;
+  pointer-events: none;
+  animation: clay-fab-pulse 2.4s ease-out 1s 2;
+}
+@keyframes clay-fab-pulse {
+  0%   { opacity: 0;    transform: scale(1);   }
+  20%  { opacity: 0.55; }
+  100% { opacity: 0;    transform: scale(1.6); }
+}
+
+/* --- Popover --- */
+
+.clay-popover {
+  position: fixed;
+  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.18s cubic-bezier(.2,.7,.3,1.05);
+}
+.clay-popover.hidden {
+  display: none;
+}
+@keyframes clay-popover-in {
+  from { transform: translateY(8px) scale(0.96); opacity: 0; }
+  to   { transform: translateY(0)    scale(1);    opacity: 1; }
+}
+
+.clay-popover .home-chat-frame {
   width: 100%;
-  max-width: 480px;
+  height: 100%;
   display: flex;
   flex-direction: column;
   background: var(--bg-alt, var(--bg));
   border: 1px solid var(--border);
-  border-radius: 24px;
-  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
+  border-radius: 18px;
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.10);
   overflow: hidden;
-  height: 100%;
 }
 
 /* --- Header --- */
@@ -37,15 +110,15 @@
 .home-chat-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
+  gap: 10px;
+  padding: 12px 12px 12px 14px;
   border-bottom: 1px solid var(--border);
   background: var(--bg);
 }
 
 .home-chat-avatar-wrap {
-  width: 38px;
-  height: 38px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
   overflow: hidden;
   flex-shrink: 0;
@@ -68,14 +141,14 @@
 }
 
 .home-chat-title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--text);
   line-height: 1.2;
 }
 
 .home-chat-subtitle {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted, var(--text-dimmer));
   line-height: 1.2;
   margin-top: 2px;
@@ -87,8 +160,8 @@
 .home-chat-icon-btn {
   background: none;
   border: none;
-  width: 32px;
-  height: 32px;
+  width: 30px;
+  height: 30px;
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -102,8 +175,8 @@
   color: var(--text);
 }
 .home-chat-icon-btn .lucide {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
 /* --- Messages list --- */
@@ -111,19 +184,19 @@
 .home-chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 16px 14px;
+  padding: 14px 12px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
   background: var(--input-bg, var(--bg));
   scroll-behavior: smooth;
 }
 
 .home-chat-bubble {
   max-width: 88%;
-  padding: 10px 14px;
-  border-radius: 18px;
-  font-size: 14px;
+  padding: 9px 12px;
+  border-radius: 16px;
+  font-size: 13px;
   line-height: 1.5;
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -147,15 +220,15 @@
 
 .home-chat-bubble-system {
   align-self: center;
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted, var(--text-dimmer));
   background: transparent;
   padding: 4px 10px;
   font-style: italic;
+  text-align: center;
+  max-width: 100%;
 }
 
-/* Inline session reference: [project/sess_id — 2026-04-22]. Rendered as
-   a subtle chip when the home-chat renderer detects the pattern. */
 .home-chat-ref {
   display: inline-block;
   background: rgba(124, 58, 237, 0.08);
@@ -163,7 +236,7 @@
   padding: 1px 8px;
   border-radius: 10px;
   font-family: "Roboto Mono", "Courier New", monospace;
-  font-size: 12px;
+  font-size: 11px;
   cursor: pointer;
   margin: 0 2px;
   border: 1px solid rgba(124, 58, 237, 0.18);
@@ -177,14 +250,14 @@
 .home-chat-typing {
   display: flex;
   gap: 4px;
-  padding: 6px 18px 0;
+  padding: 4px 16px 0;
   align-items: center;
 }
 .home-chat-typing.hidden { display: none; }
 
 .home-chat-typing-dot {
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   background: var(--text-dimmer);
   animation: home-chat-bounce 1.2s infinite ease-in-out;
@@ -204,7 +277,7 @@
   display: flex;
   align-items: flex-end;
   gap: 8px;
-  padding: 10px 12px 12px;
+  padding: 10px 10px 12px;
   border-top: 1px solid var(--border);
   background: var(--bg);
 }
@@ -212,15 +285,15 @@
 .home-chat-input {
   flex: 1;
   border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 10px 14px;
+  border-radius: 16px;
+  padding: 9px 12px;
   background: var(--input-bg, var(--bg));
   color: var(--text);
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.5;
   font-family: inherit;
   resize: none;
-  max-height: 140px;
+  max-height: 120px;
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
@@ -231,8 +304,8 @@
 
 .home-chat-send-btn {
   flex-shrink: 0;
-  width: 38px;
-  height: 38px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
   border: none;
   background: var(--accent);
@@ -247,47 +320,61 @@
   opacity: 0.4;
   cursor: default;
 }
-.home-chat-send-btn:not(:disabled):hover {
-  opacity: 0.9;
-}
-.home-chat-send-btn:not(:disabled):active {
-  transform: scale(0.95);
-}
+.home-chat-send-btn:not(:disabled):hover { opacity: 0.9; }
+.home-chat-send-btn:not(:disabled):active { transform: scale(0.95); }
 .home-chat-send-btn .lucide {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 
-/* --- Right widget pane --- */
+/* --- Mobile / narrow ---
+   On phones the popover fills the screen edge-to-edge with a small
+   inset, and the FAB shrinks slightly. */
 
-.home-hub-inner {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: 48px 24px 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-width: 0;
+@media (max-width: 768px) {
+  /* 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);
+  }
+  .clay-fab {
+    width: 44px;
+    height: 44px;
+  }
+  .clay-fab-icon {
+    width: 30px;
+    height: 30px;
+  }
 }
 
-/* --- Mobile / narrow: stack the chat and widgets --- */
-
-@media (max-width: 900px) {
-  #home-hub {
-    flex-direction: column;
-  }
-  .home-chat-pane {
+@media (max-width: 600px) {
+  .clay-popover {
+    right: 8px;
+    bottom: calc(56px + var(--safe-bottom, 0px) + 8px);
+    left: 8px;
     width: auto;
-    max-width: none;
-    min-width: 0;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-    flex: 0 0 auto;
-    height: 60vh;
-    padding: 16px 12px;
+    height: 70vh;
+    max-height: calc(100vh - 80px - var(--safe-bottom, 0px));
+  }
+  .clay-popover .home-chat-frame {
+    border-radius: 16px;
   }
-  .home-hub-inner {
-    flex: 1 1 auto;
-    padding: 24px 16px;
+}
+
+/* When the mobile tab bar is hidden by the keyboard, drop the FAB back
+   down so it doesn't float in dead space. */
+@media (max-width: 768px) {
+  #mobile-tab-bar.keyboard-hidden ~ .clay-fab,
+  body:has(#mobile-tab-bar.keyboard-hidden) .clay-fab {
+    bottom: 14px;
   }
 }
+
+/* Hide FAB while user is on auth/setup pages or any modal-heavy screens.
+   Add the class .clay-fab-suppressed on <body> when needed. */
+body.clay-fab-suppressed .clay-fab,
+body.clay-fab-suppressed .clay-popover {
+  display: none !important;
+}

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

@@ -3,18 +3,18 @@
    ========================================================================== */
 
 /* Hub covers #main-area (sidebar + chat), sits inside it with absolute.
-   Internally it splits into a Clay chat panel on the left and the
-   existing widget column on the right. See home-chat.css for the chat
-   panel styling. */
+   Pure widget surface — Clay chat is reachable via the global FAB
+   instead of being embedded here. */
 #home-hub {
   position: absolute;
   inset: 0;
   display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  overflow: hidden;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
   background: var(--bg);
   z-index: 200;
+  padding: 48px 24px 40px;
   border-top-left-radius: 8px;
   animation: hubFadeIn 0.35s ease;
 }

package/lib/public/index.html

@@ -115,39 +115,6 @@
   <!-- === Main Area (sidebar + resize-handle + main-column) === -->
   <div id="main-area">
     <div id="home-hub" class="hidden">
-      <!-- Clay chat panel: phablet-style, self-contained. Talks to the
-           user's Clay mate via dedicated WS messages (home_clay_*) and
-           does not interfere with the active project session. -->
-      <div id="home-chat-pane" class="home-chat-pane">
-        <div class="home-chat-frame">
-          <div class="home-chat-header">
-            <div class="home-chat-avatar-wrap">
-              <img class="home-chat-avatar" src="/icon-banded-76.png" alt="Clay">
-            </div>
-            <div class="home-chat-title-block">
-              <div class="home-chat-title">Clay</div>
-              <div class="home-chat-subtitle">Your workspace memory</div>
-            </div>
-            <button id="home-chat-new-btn" class="home-chat-icon-btn" title="Start a new conversation" aria-label="New conversation">
-              <i data-lucide="plus"></i>
-            </button>
-          </div>
-          <div id="home-chat-messages" class="home-chat-messages">
-            <!-- messages rendered by home-chat.js -->
-          </div>
-          <div class="home-chat-typing hidden" id="home-chat-typing">
-            <span class="home-chat-typing-dot"></span>
-            <span class="home-chat-typing-dot"></span>
-            <span class="home-chat-typing-dot"></span>
-          </div>
-          <div class="home-chat-input-row">
-            <textarea id="home-chat-input" class="home-chat-input" rows="1" placeholder="Ask Clay…" autocomplete="off"></textarea>
-            <button id="home-chat-send-btn" class="home-chat-send-btn" disabled aria-label="Send">
-              <i data-lucide="arrow-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
       <button id="home-hub-close" class="home-hub-close-btn hidden">
         <i data-lucide="x"></i>
         <span>ESC</span>
@@ -2326,5 +2293,49 @@
     </div>
   </div>
 </div>
+
+<!-- === Clay FAB + Popover ===
+     Persistent floating-action button (bottom-right) that opens a
+     phablet-style chat with Clay (the host agent). The popover overlays
+     the page content and does NOT interfere with the active project
+     session — talks via dedicated home_clay_* WS messages. -->
+<button id="clay-fab" class="clay-fab" type="button" aria-label="Open Clay" title="Ask Clay">
+  <img class="clay-fab-icon" src="/icon-banded-76.png" alt="Clay">
+  <span class="clay-fab-pulse"></span>
+</button>
+
+<div id="clay-popover" class="clay-popover hidden" role="dialog" aria-modal="false" aria-labelledby="home-chat-title-text">
+  <div class="home-chat-frame">
+    <div class="home-chat-header">
+      <div class="home-chat-avatar-wrap">
+        <img class="home-chat-avatar" src="/icon-banded-76.png" alt="Clay">
+      </div>
+      <div class="home-chat-title-block">
+        <div class="home-chat-title" id="home-chat-title-text">Clay</div>
+        <div class="home-chat-subtitle">Your workspace memory</div>
+      </div>
+      <button id="home-chat-new-btn" class="home-chat-icon-btn" title="Start a new conversation" aria-label="New conversation">
+        <i data-lucide="plus"></i>
+      </button>
+      <button id="home-chat-close-btn" class="home-chat-icon-btn" title="Close" aria-label="Close">
+        <i data-lucide="x"></i>
+      </button>
+    </div>
+    <div id="home-chat-messages" class="home-chat-messages">
+      <!-- messages rendered by home-chat.js -->
+    </div>
+    <div class="home-chat-typing hidden" id="home-chat-typing">
+      <span class="home-chat-typing-dot"></span>
+      <span class="home-chat-typing-dot"></span>
+      <span class="home-chat-typing-dot"></span>
+    </div>
+    <div class="home-chat-input-row">
+      <textarea id="home-chat-input" class="home-chat-input" rows="1" placeholder="Ask Clay…" autocomplete="off"></textarea>
+      <button id="home-chat-send-btn" class="home-chat-send-btn" disabled aria-label="Send">
+        <i data-lucide="arrow-up"></i>
+      </button>
+    </div>
+  </div>
+</div>
 </body>
 </html>

package/lib/public/modules/app-home-hub.js

@@ -574,18 +574,11 @@ function renderHomeHubMates() {
 }
 
 export function showHomeHub() {
-  // Home hub hosts its own Clay chat panel on the left (see home-chat.js)
-  // and the existing widgets on the right. The chat is a self-contained
-  // surface with its own renderer and its own WS protocol — it does NOT
-  // hijack the user's main project session. Any active DM stays open
-  // underneath; we just exit it visually so the hub layer is clean.
+  // Home hub is a pure widget surface. Clay chat is reachable from
+  // anywhere via the persistent FAB (#clay-fab), not embedded here.
   if (store.get('dmMode')) exitDmMode();
   homeHubVisible = true;
   homeHub.classList.remove("hidden");
-  // Mount/refresh the in-hub Clay chat panel.
-  try {
-    if (typeof window.__initHomeChat === "function") window.__initHomeChat();
-  } catch (e) {}
   // Show close button only if there's a project to return to
   if (hubCloseBtn) {
     if (store.get('currentSlug')) hubCloseBtn.classList.remove("hidden");

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

@@ -1,46 +1,72 @@
-// Home Chat (Clay) — phablet-style chat embedded in the home hub.
-// Self-contained: own DOM, own renderer, own WS protocol.
-// Talks to the user's Clay mate session via home_clay_* messages.
+// Clay FAB + popover chat — phablet-style, persistent across the app.
+// Self-contained: own DOM, own renderer, own WS protocol (home_clay_*).
 // Does not interfere with the active project session.
 
 import { escapeHtml } from './utils.js';
 import { getWs } from './ws-ref.js';
 import { renderMarkdown } from './markdown.js';
-import { refreshIcons } from './icons.js';
 import { switchProject } from './app-projects.js';
 
 var initialized = false;
+var openState = false;
+var fabBtn = null;
+var popoverEl = null;
 var messagesEl = null;
 var inputEl = null;
 var sendBtn = null;
 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.
 var currentAssistantBubble = null;
 var currentAssistantText = "";
-var lastSenderWasUser = false;
+var openedOnce = false;  // gate the initial home_clay_open request
 
-// Initialize on first showHomeHub. The init function is exposed on
-// window.__initHomeChat so app-home-hub.js (which already imports too
-// many things) can call it without adding another import edge.
 export function initHomeChat() {
-  if (initialized) {
-    // Re-mount idempotent: just ensure the WS subscription is open.
-    requestSession();
-    return;
-  }
+  if (initialized) return;
   initialized = true;
 
+  fabBtn = document.getElementById("clay-fab");
+  popoverEl = document.getElementById("clay-popover");
   messagesEl = document.getElementById("home-chat-messages");
   inputEl = document.getElementById("home-chat-input");
   sendBtn = document.getElementById("home-chat-send-btn");
   typingEl = document.getElementById("home-chat-typing");
   newBtnEl = document.getElementById("home-chat-new-btn");
+  closeBtnEl = document.getElementById("home-chat-close-btn");
+
+  if (!fabBtn || !popoverEl || !messagesEl || !inputEl || !sendBtn) return;
+
+  // --- 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 (!messagesEl || !inputEl || !sendBtn) return;
+  if (closeBtnEl) closeBtnEl.addEventListener("click", closePopover);
+
+  // ESC closes the popover.
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && openState) {
+      closePopover();
+    }
+  });
 
   // --- Input handling ---
   inputEl.addEventListener("input", function () {
@@ -62,19 +88,199 @@ export function initHomeChat() {
       messagesEl.innerHTML = "";
       currentAssistantBubble = null;
       currentAssistantText = "";
-      lastSenderWasUser = false;
       hideTyping();
       addSystemBubble("New conversation started.");
     });
   }
+}
+
+// --- FAB drag mechanics ---
 
-  // --- Initial state pull ---
-  requestSession();
+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
+  // openedOnce false so the next open retries.
+  if (!openedOnce) {
+    var ws = getWs();
+    if (ws && ws.readyState === 1) {
+      openedOnce = true;
+      requestSession();
+    } else {
+      addSystemBubble("Connecting…");
+    }
+  }
+  // Focus the input so the user can start typing immediately.
+  setTimeout(function () { if (inputEl) inputEl.focus(); }, 60);
+}
+
+function closePopover() {
+  if (!openState) return;
+  openState = false;
+  if (popoverEl) popoverEl.classList.add("hidden");
+  if (fabBtn) {
+    fabBtn.classList.remove("open");
+    fabBtn.focus();
+  }
+}
+
+function toggleOpen() {
+  if (openState) closePopover(); else openPopover();
 }
 
 function autoResize() {
   inputEl.style.height = "auto";
-  inputEl.style.height = Math.min(140, inputEl.scrollHeight) + "px";
+  inputEl.style.height = Math.min(120, inputEl.scrollHeight) + "px";
 }
 
 function requestSession() {
@@ -102,14 +308,12 @@ function doSend() {
 // --- Rendering ---
 
 function addUserBubble(text) {
-  // Finalize any open assistant bubble before adding the next user turn.
   finalizeAssistant();
   var bubble = document.createElement("div");
   bubble.className = "home-chat-bubble home-chat-bubble-user";
   bubble.textContent = text;
   messagesEl.appendChild(bubble);
   scrollToBottom();
-  lastSenderWasUser = true;
 }
 
 function ensureAssistantBubble() {
@@ -119,21 +323,18 @@ function ensureAssistantBubble() {
   messagesEl.appendChild(bubble);
   currentAssistantBubble = bubble;
   currentAssistantText = "";
-  lastSenderWasUser = false;
   return bubble;
 }
 
 function appendAssistantText(text) {
   var bubble = ensureAssistantBubble();
   currentAssistantText += text;
-  // Render markdown + linkify session refs after sanitization.
   bubble.innerHTML = linkifyRefs(renderMarkdown(currentAssistantText));
   scrollToBottom();
 }
 
 function finalizeAssistant() {
   if (currentAssistantBubble && !currentAssistantText) {
-    // Empty assistant turn (no text produced). Drop the empty bubble.
     currentAssistantBubble.remove();
   }
   currentAssistantBubble = null;
@@ -148,11 +349,9 @@ function addSystemBubble(text) {
   scrollToBottom();
 }
 
-// Convert [project-slug/sess_xxx — date] tokens in the rendered HTML
-// into clickable chips. Server-side Clay is instructed to emit these.
 function linkifyRefs(html) {
-  // Match [slug/sess_id - date] inside text but not inside HTML attributes.
-  // Conservative: the slug is alphanumeric/-/_, sess id starts with sess_.
+  // Match [slug/sess_id - date]. Conservative: slug is alphanumeric/-/_,
+  // sess id starts with sess_.
   var re = /\[([a-zA-Z0-9_\-]+)\/(sess_[a-zA-Z0-9_\-]+)(?:\s+[—-]\s+([0-9]{4}-[0-9]{2}-[0-9]{2}))?\]/g;
   return html.replace(re, function (_full, slug, sessId, date) {
     var label = slug + "/" + sessId.substring(0, 14) + (date ? " · " + date : "");
@@ -162,18 +361,13 @@ function linkifyRefs(html) {
 
 function scrollToBottom() {
   if (!messagesEl) return;
-  // Always pin: home chat is short, no need for scroll-up detection.
   requestAnimationFrame(function () {
     messagesEl.scrollTop = messagesEl.scrollHeight;
   });
 }
 
-function showTyping() {
-  if (typingEl) typingEl.classList.remove("hidden");
-}
-function hideTyping() {
-  if (typingEl) typingEl.classList.add("hidden");
-}
+function showTyping() { if (typingEl) typingEl.classList.remove("hidden"); }
+function hideTyping() { if (typingEl) typingEl.classList.add("hidden"); }
 
 // --- Server message handlers (called from app-messages.js dispatcher) ---
 
@@ -193,7 +387,6 @@ export function handleHomeClayHistory(msg) {
     if (e.role === "user") {
       addUserBubble(e.text || "");
     } else if (e.role === "assistant") {
-      // Replay finalized assistant text in one shot.
       appendAssistantText(e.text || "");
       finalizeAssistant();
     }
@@ -223,17 +416,18 @@ document.addEventListener("click", function (e) {
   if (!chip) return;
   var slug = chip.dataset.slug;
   if (!slug) return;
-  // Clicking a chip jumps the user out of the home hub into the source
-  // project. Session selection inside that project is up to the existing
-  // session restore mechanism.
+  closePopover();
   if (typeof switchProject === "function") {
-    var hubBtn = document.getElementById("home-hub-close");
-    if (hubBtn) hubBtn.click();
     switchProject(slug);
   }
 });
 
-// Expose init for app-home-hub.js without adding an import edge.
-if (typeof window !== "undefined") {
-  window.__initHomeChat = initHomeChat;
+// --- Initialize on DOM ready ---
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initHomeChat);
+  } else {
+    initHomeChat();
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.38.0-beta.3",
+  "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",