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

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

@@ -0,0 +1,293 @@
+/* ==========================================================================
+   Home Chat (Clay) — phablet-style mini chat embedded in the home hub
+   ==========================================================================
+   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;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  padding: 32px 16px 24px;
+  background: var(--bg);
+  border-right: 1px solid var(--border);
+}
+
+.home-chat-frame {
+  width: 100%;
+  max-width: 480px;
+  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);
+  overflow: hidden;
+  height: 100%;
+}
+
+/* --- Header --- */
+
+.home-chat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.home-chat-avatar-wrap {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home-chat-avatar {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.home-chat-title-block {
+  flex: 1;
+  min-width: 0;
+}
+
+.home-chat-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.2;
+}
+
+.home-chat-subtitle {
+  font-size: 12px;
+  color: var(--text-muted, var(--text-dimmer));
+  line-height: 1.2;
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.home-chat-icon-btn {
+  background: none;
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-muted, var(--text-dimmer));
+  flex-shrink: 0;
+}
+.home-chat-icon-btn:hover {
+  background: var(--hover-bg, rgba(0,0,0,0.05));
+  color: var(--text);
+}
+.home-chat-icon-btn .lucide {
+  width: 18px;
+  height: 18px;
+}
+
+/* --- Messages list --- */
+
+.home-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: var(--input-bg, var(--bg));
+  scroll-behavior: smooth;
+}
+
+.home-chat-bubble {
+  max-width: 88%;
+  padding: 10px 14px;
+  border-radius: 18px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
+}
+
+.home-chat-bubble-user {
+  align-self: flex-end;
+  background: var(--accent);
+  color: #fff;
+  border-bottom-right-radius: 6px;
+}
+
+.home-chat-bubble-clay {
+  align-self: flex-start;
+  background: var(--bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 6px;
+}
+
+.home-chat-bubble-system {
+  align-self: center;
+  font-size: 12px;
+  color: var(--text-muted, var(--text-dimmer));
+  background: transparent;
+  padding: 4px 10px;
+  font-style: italic;
+}
+
+/* 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);
+  color: var(--accent);
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-family: "Roboto Mono", "Courier New", monospace;
+  font-size: 12px;
+  cursor: pointer;
+  margin: 0 2px;
+  border: 1px solid rgba(124, 58, 237, 0.18);
+}
+.home-chat-ref:hover {
+  background: rgba(124, 58, 237, 0.16);
+}
+
+/* --- Typing indicator --- */
+
+.home-chat-typing {
+  display: flex;
+  gap: 4px;
+  padding: 6px 18px 0;
+  align-items: center;
+}
+.home-chat-typing.hidden { display: none; }
+
+.home-chat-typing-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-dimmer);
+  animation: home-chat-bounce 1.2s infinite ease-in-out;
+}
+.home-chat-typing-dot:nth-child(1) { animation-delay: 0s; }
+.home-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
+.home-chat-typing-dot:nth-child(3) { animation-delay: 0.30s; }
+
+@keyframes home-chat-bounce {
+  0%, 80%, 100% { transform: translateY(0);   opacity: 0.4; }
+  40%           { transform: translateY(-4px); opacity: 1;   }
+}
+
+/* --- Input row --- */
+
+.home-chat-input-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.home-chat-input {
+  flex: 1;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 10px 14px;
+  background: var(--input-bg, var(--bg));
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: inherit;
+  resize: none;
+  max-height: 140px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.home-chat-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
+}
+
+.home-chat-send-btn {
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.1s;
+}
+.home-chat-send-btn:disabled {
+  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 .lucide {
+  width: 18px;
+  height: 18px;
+}
+
+/* --- Right widget pane --- */
+
+.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;
+}
+
+/* --- Mobile / narrow: stack the chat and widgets --- */
+
+@media (max-width: 900px) {
+  #home-hub {
+    flex-direction: column;
+  }
+  .home-chat-pane {
+    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;
+  }
+  .home-hub-inner {
+    flex: 1 1 auto;
+    padding: 24px 16px;
+  }
+}

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

@@ -2,53 +2,22 @@
    Home Hub — Personalized command center & dashboard
    ========================================================================== */
 
-/* Hub covers #main-area (sidebar + chat), sits inside it with absolute */
+/* 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. */
 #home-hub {
   position: absolute;
   inset: 0;
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow-y: auto;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
   background: var(--bg);
   z-index: 200;
-  padding: 48px 24px 40px;
   border-top-left-radius: 8px;
   animation: hubFadeIn 0.35s ease;
 }
-
-/* Clay home: split layout. The hub sits on the right half as a side panel,
-   the chat (Clay DM) occupies the left. The body class is toggled by
-   showHomeHub / hideHomeHub when a Clay mate exists for the user. */
-body.clay-home-split #home-hub {
-  inset: 0 0 0 auto;
-  width: 50%;
-  min-width: 360px;
-  max-width: 720px;
-  border-left: 1px solid var(--border);
-  z-index: 5;          /* sit alongside the chat, not over it */
-  padding: 32px 20px 32px;
-  border-top-left-radius: 0;
-  animation: hubSlideInRight 0.25s ease;
-}
-@media (max-width: 900px) {
-  /* Below 900px there isn't room for a meaningful split; collapse back
-     to the legacy full-overlay hub for narrow viewports. */
-  body.clay-home-split #home-hub {
-    inset: 0;
-    width: auto;
-    max-width: none;
-    min-width: 0;
-    border-left: none;
-    z-index: 200;
-    padding: 48px 24px 40px;
-    border-top-left-radius: 8px;
-  }
-}
-@keyframes hubSlideInRight {
-  from { transform: translateX(8px); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-}
 /* Close button (X / ESC) */
 .home-hub-close-btn {
   position: absolute;

package/lib/public/index.html

@@ -115,6 +115,39 @@
   <!-- === 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>

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

@@ -574,29 +574,18 @@ function renderHomeHubMates() {
 }
 
 export function showHomeHub() {
-  // Open Clay DM (the host agent) on the left while showing widgets on
-  // the right. The body class drives a split layout — see home-hub.css.
-  // Existing users without a Clay mate yet (cachedMatesList not yet
-  // delivered, or syncArchivedBuiltinMates hasn't run) fall back to the
-  // legacy full-screen hub so the home button never feels broken.
-  var clayMate = findClayMate();
-  if (clayMate) {
-    document.body.classList.add("clay-home-split");
-    var dmTarget = store.get('dmTargetUser');
-    var inClayDm = store.get('dmMode') && dmTarget && dmTarget.id === clayMate.id;
-    if (!inClayDm) {
-      // Open Clay DM. Skip the generic mate-onboarding modal — Clay is
-      // the host agent, not a learn-about-Mates moment; that intro
-      // fires the first time the user opens a regular Mate.
-      openDm(clayMate.id, { skipOnboarding: true });
-    }
-  } else {
-    // Fallback: legacy behavior (full overlay, exit any DM).
-    document.body.classList.remove("clay-home-split");
-    if (store.get('dmMode')) exitDmMode();
-  }
+  // 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.
+  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");
@@ -630,19 +619,7 @@ export function hideHomeHub() {
   if (!homeHubVisible) return;
   homeHubVisible = false;
   homeHub.classList.add("hidden");
-  document.body.classList.remove("clay-home-split");
   stopTipRotation();
   var mobileHome = document.getElementById("mobile-home-btn");
   if (mobileHome) mobileHome.classList.remove("active");
 }
-
-// Locate the user's Clay (host agent) mate from the cached list. Returns
-// null if cachedMatesList hasn't arrived yet or the user predates Clay.
-function findClayMate() {
-  var list = store.get('cachedMatesList');
-  if (!list || !list.length) return null;
-  for (var i = 0; i < list.length; i++) {
-    if (list[i] && list[i].builtinKey === "clay") return list[i];
-  }
-  return null;
-}

package/lib/public/modules/app-messages.js

@@ -15,6 +15,7 @@ import { updateDmBadge, renderSidebarPresence, setMentionActive, renderUserStrip
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
 import { renderMateSessionList, handleMateSearchResults, updateMateSidebarProfile } from './mate-sidebar.js';
 import { handleMateDatastoreTablesResult, handleMateDatastoreDescribeResult, handleMateDatastoreQueryResult, handleMateDatastoreError, handleMateDatastoreChange } from './mate-datastore-ui.js';
+import { handleHomeClayHistory, handleHomeClayDelta, handleHomeClayDone, handleHomeClayError } from './home-chat.js';
 import { renderKnowledgeList, handleKnowledgeContent } from './mate-knowledge.js';
 import { renderMemoryList } from './mate-memory.js';
 import { handlePaletteSessionSwitch, setPaletteVersion } from './command-palette.js';
@@ -379,6 +380,22 @@ export function processMessage(msg) {
         connectOverlay.classList.remove("hidden");
         break;
 
+      case "home_clay_history":
+        handleHomeClayHistory(msg);
+        break;
+
+      case "home_clay_delta":
+        handleHomeClayDelta(msg);
+        break;
+
+      case "home_clay_done":
+        handleHomeClayDone();
+        break;
+
+      case "home_clay_error":
+        handleHomeClayError(msg);
+        break;
+
       case "slash_commands":
         var reserved = new Set(builtinCommands.map(function (c) { return c.name; }));
         store.set({ slashCommands: (msg.commands || []).filter(function (name) {

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

@@ -0,0 +1,239 @@
+// 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.
+// 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 messagesEl = null;
+var inputEl = null;
+var sendBtn = null;
+var typingEl = null;
+var newBtnEl = 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;
+
+// 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;
+  }
+  initialized = true;
+
+  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");
+
+  if (!messagesEl || !inputEl || !sendBtn) return;
+
+  // --- Input handling ---
+  inputEl.addEventListener("input", function () {
+    autoResize();
+    sendBtn.disabled = inputEl.value.trim().length === 0;
+  });
+  inputEl.addEventListener("keydown", function (e) {
+    if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      doSend();
+    }
+  });
+  sendBtn.addEventListener("click", doSend);
+  if (newBtnEl) {
+    newBtnEl.addEventListener("click", function () {
+      var ws = getWs();
+      if (!ws || ws.readyState !== 1) return;
+      ws.send(JSON.stringify({ type: "home_clay_new_session" }));
+      messagesEl.innerHTML = "";
+      currentAssistantBubble = null;
+      currentAssistantText = "";
+      lastSenderWasUser = false;
+      hideTyping();
+      addSystemBubble("New conversation started.");
+    });
+  }
+
+  // --- Initial state pull ---
+  requestSession();
+}
+
+function autoResize() {
+  inputEl.style.height = "auto";
+  inputEl.style.height = Math.min(140, inputEl.scrollHeight) + "px";
+}
+
+function requestSession() {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+  ws.send(JSON.stringify({ type: "home_clay_open" }));
+}
+
+function doSend() {
+  var text = inputEl.value.trim();
+  if (!text) return;
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+
+  // Optimistic render of the user's message.
+  addUserBubble(text);
+  inputEl.value = "";
+  autoResize();
+  sendBtn.disabled = true;
+
+  ws.send(JSON.stringify({ type: "home_clay_send", text: text }));
+  showTyping();
+}
+
+// --- 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() {
+  if (currentAssistantBubble) return currentAssistantBubble;
+  var bubble = document.createElement("div");
+  bubble.className = "home-chat-bubble home-chat-bubble-clay";
+  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;
+  currentAssistantText = "";
+}
+
+function addSystemBubble(text) {
+  var bubble = document.createElement("div");
+  bubble.className = "home-chat-bubble home-chat-bubble-system";
+  bubble.textContent = text;
+  messagesEl.appendChild(bubble);
+  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_.
+  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 : "");
+    return '<span class="home-chat-ref" data-slug="' + escapeHtml(slug) + '" data-session="' + escapeHtml(sessId) + '">' + escapeHtml(label) + '</span>';
+  });
+}
+
+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");
+}
+
+// --- Server message handlers (called from app-messages.js dispatcher) ---
+
+export function handleHomeClayHistory(msg) {
+  if (!messagesEl) return;
+  messagesEl.innerHTML = "";
+  currentAssistantBubble = null;
+  currentAssistantText = "";
+  hideTyping();
+  var entries = msg.messages || [];
+  if (entries.length === 0) {
+    addSystemBubble("Hi — I'm Clay. I can search every session, project, and decision in your workspace. What are you trying to find?");
+    return;
+  }
+  for (var i = 0; i < entries.length; i++) {
+    var e = entries[i];
+    if (e.role === "user") {
+      addUserBubble(e.text || "");
+    } else if (e.role === "assistant") {
+      // Replay finalized assistant text in one shot.
+      appendAssistantText(e.text || "");
+      finalizeAssistant();
+    }
+  }
+}
+
+export function handleHomeClayDelta(msg) {
+  hideTyping();
+  if (typeof msg.text === "string") appendAssistantText(msg.text);
+}
+
+export function handleHomeClayDone() {
+  hideTyping();
+  finalizeAssistant();
+}
+
+export function handleHomeClayError(msg) {
+  hideTyping();
+  finalizeAssistant();
+  addSystemBubble("Error: " + (msg.text || "unknown"));
+}
+
+// --- Click delegation for session ref chips ---
+
+document.addEventListener("click", function (e) {
+  var chip = e.target && e.target.closest && e.target.closest(".home-chat-ref");
+  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.
+  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;
+}

package/lib/public/modules/sidebar-mates.js

@@ -385,16 +385,15 @@ export function renderUserStrip(allUsers, onlineUserIds, myUserId, dmFavorites,
   // mate list is still reachable from the DM picker.
   var favoriteMates = cachedMates.filter(function (m) {
     if (m.archived) return false;
+    // Clay is the host agent reachable only via the Home button — never
+    // shown alongside regular mates in the sidebar list.
+    if (m.builtinKey === "clay") return false;
     if (cachedDmRemovedUsers[m.id]) return false;
     if (cachedDmFavorites.indexOf(m.id) !== -1) return true;
     if (cachedDmUnread[m.id] && cachedDmUnread[m.id] > 0) return true;
     return false;
   });
   var sortedMates = favoriteMates.sort(function (a, b) {
-    // Clay (host agent) pins to the top, then other built-ins, then user mates.
-    var aClay = a.builtinKey === "clay" ? 1 : 0;
-    var bClay = b.builtinKey === "clay" ? 1 : 0;
-    if (aClay !== bClay) return bClay - aClay;
     var aBuiltin = a.builtinKey ? 1 : 0;
     var bBuiltin = b.builtinKey ? 1 : 0;
     if (aBuiltin !== bBuiltin) return bBuiltin - aBuiltin;

package/lib/public/style.css

@@ -18,6 +18,7 @@
 @import url("css/scheduler.css");
 @import url("css/scheduler-modal.css");
 @import url("css/home-hub.css");
+@import url("css/home-chat.css");
 @import url("css/playbook.css");
 @import url("css/stt.css");
 @import url("css/profile.css");

package/lib/server-clay-home.js

@@ -0,0 +1,245 @@
+// Home Chat (Clay) — server-side handler.
+// Routes home_clay_* WS messages to the user's Clay (host agent) mate
+// project session, independent of which project the WS is currently
+// bound to. Mirrors session events back to the WS as home_clay_* so the
+// client renders into its own home-chat panel without disturbing the
+// active project view.
+
+function attachClayHome(deps) {
+  var users = deps.users;
+  var mates = deps.mates;
+  var projects = deps.projects;
+  var addProject = deps.addProject;
+
+  // Per-WS subscription state.
+  // ws._homeClayTap = { unsubscribe, sessionId, claySlug }
+  // Stored on the ws itself rather than a side map so it's GC'd with the
+  // socket and so handleDisconnection sees it without a registry lookup.
+
+  function findClayProject(userId, ensureRegistered) {
+    var mateCtx = mates.buildMateCtx(userId);
+    var allMates = mates.getAllMates(mateCtx);
+    var clay = null;
+    for (var i = 0; i < allMates.length; i++) {
+      if (allMates[i] && allMates[i].builtinKey === "clay") { clay = allMates[i]; break; }
+    }
+    if (!clay) return null;
+    var slug = "mate-" + clay.id;
+    if (!projects.has(slug)) {
+      if (!ensureRegistered) return null;
+      var dir = mates.getMateDir(mateCtx, clay.id);
+      var fs = require("fs");
+      try { fs.mkdirSync(dir, { recursive: true }); } catch (e) {}
+      var name = (clay.profile && clay.profile.displayName) || clay.name || "Clay";
+      addProject(dir, slug, name, null, clay.createdBy || userId, null, { isMate: true, mateDisplayName: name, isHostAgent: true });
+    }
+    var ctx = projects.get(slug);
+    return ctx ? { ctx: ctx, slug: slug, mate: clay } : null;
+  }
+
+  // Pick the most recent visible session in Clay's project owned by this
+  // user. Create one if none exists. The home chat is "single thread per
+  // user" by default; home_clay_new_session forks a fresh one on demand.
+  function getOrCreateHomeSession(found, userId) {
+    var sm = found.ctx.getSessionManager();
+    if (!sm) return null;
+    var best = null;
+    sm.sessions.forEach(function (s) {
+      if (s.hidden) return;
+      if (s.ownerId && s.ownerId !== userId) return;
+      if (!best || (s.lastActivity || 0) > (best.lastActivity || 0)) best = s;
+    });
+    if (best) return best;
+    var sess = sm.createSession({ ownerId: userId, vendor: "claude" }, null);
+    return sess;
+  }
+
+  // Convert a session.history entry stream into the simplified home-chat
+  // shape (alternating user / assistant turns, assistant text coalesced
+  // across deltas). Tool calls and intermediate events are dropped — the
+  // home chat surface intentionally hides them.
+  function historyToHomeChat(history) {
+    var msgs = [];
+    var pending = "";
+    function flushAssistant() {
+      if (pending) {
+        msgs.push({ role: "assistant", text: pending });
+        pending = "";
+      }
+    }
+    for (var i = 0; i < history.length; i++) {
+      var e = history[i];
+      if (!e) continue;
+      if (e.type === "user_message" && e.text) {
+        flushAssistant();
+        msgs.push({ role: "user", text: e.text });
+      } else if (e.type === "delta" && typeof e.text === "string") {
+        pending += e.text;
+      } else if (e.type === "result" || e.type === "done") {
+        flushAssistant();
+      } else if (e.type === "error" && e.text) {
+        flushAssistant();
+        msgs.push({ role: "assistant", text: "[error] " + e.text });
+      }
+    }
+    flushAssistant();
+    return msgs;
+  }
+
+  function transformEvent(obj) {
+    if (!obj || typeof obj.type !== "string") return null;
+    if (obj.type === "delta" && typeof obj.text === "string") {
+      return { type: "home_clay_delta", text: obj.text };
+    }
+    if (obj.type === "result" || obj.type === "done") {
+      return { type: "home_clay_done" };
+    }
+    if (obj.type === "error") {
+      return { type: "home_clay_error", text: obj.text || "Unknown error" };
+    }
+    // intentionally skip: tool_*, thinking_*, status, plan_*, debate, etc.
+    return null;
+  }
+
+  function teardownTap(ws) {
+    if (ws && ws._homeClayTap && typeof ws._homeClayTap.unsubscribe === "function") {
+      try { ws._homeClayTap.unsubscribe(); } catch (e) {}
+    }
+    if (ws) ws._homeClayTap = null;
+  }
+
+  function setupTap(ws, ctx, sessionId) {
+    teardownTap(ws);
+    var sm = ctx.getSessionManager();
+    if (!sm || typeof sm.subscribeSession !== "function") return;
+    var unsubscribe = sm.subscribeSession(sessionId, function (obj) {
+      if (ws.readyState !== 1) return;
+      var transformed = transformEvent(obj);
+      if (!transformed) return;
+      try { ws.send(JSON.stringify(transformed)); } catch (e) {}
+    });
+    if (!unsubscribe) return;
+    ws._homeClayTap = { unsubscribe: unsubscribe, sessionId: sessionId, claySlug: ctx.slug || "" };
+  }
+
+  function sendError(ws, text) {
+    if (ws.readyState !== 1) return;
+    try {
+      ws.send(JSON.stringify({ type: "home_clay_error", text: text }));
+    } catch (e) {}
+  }
+
+  function handleMessage(ws, msg) {
+    if (!msg || typeof msg.type !== "string") return false;
+    if (msg.type !== "home_clay_open" && msg.type !== "home_clay_send" && msg.type !== "home_clay_new_session" && msg.type !== "home_clay_close") {
+      return false;
+    }
+
+    if (msg.type === "home_clay_close") {
+      teardownTap(ws);
+      return true;
+    }
+
+    var userId = ws._clayUser ? ws._clayUser.id : null;
+    if (users.isMultiUser() && !userId) {
+      sendError(ws, "Not authenticated.");
+      return true;
+    }
+
+    var found = findClayProject(userId, true);
+    if (!found) {
+      sendError(ws, "Clay mate not available yet — open the Mates panel once to seed.");
+      return true;
+    }
+
+    if (msg.type === "home_clay_open") {
+      var session = getOrCreateHomeSession(found, userId);
+      if (!session) {
+        sendError(ws, "Could not open Clay session.");
+        return true;
+      }
+      setupTap(ws, found.ctx, session.localId);
+      try {
+        ws.send(JSON.stringify({
+          type: "home_clay_history",
+          sessionId: session.localId,
+          messages: historyToHomeChat(session.history || []),
+        }));
+      } catch (e) {}
+      return true;
+    }
+
+    if (msg.type === "home_clay_new_session") {
+      var sm = found.ctx.getSessionManager();
+      if (!sm) { sendError(ws, "Session manager unavailable."); return true; }
+      var fresh = sm.createSession({ ownerId: userId, vendor: "claude" }, null);
+      setupTap(ws, found.ctx, fresh.localId);
+      try {
+        ws.send(JSON.stringify({
+          type: "home_clay_history",
+          sessionId: fresh.localId,
+          messages: [],
+        }));
+      } catch (e) {}
+      return true;
+    }
+
+    if (msg.type === "home_clay_send") {
+      var text = (msg.text || "").trim();
+      if (!text) return true;
+
+      var sm2 = found.ctx.getSessionManager();
+      if (!sm2) { sendError(ws, "Session manager unavailable."); return true; }
+
+      // Resume the tap if the WS reconnected since open.
+      var tap = ws._homeClayTap;
+      var sessionId = tap ? tap.sessionId : null;
+      if (!sessionId) {
+        var s2 = getOrCreateHomeSession(found, userId);
+        if (!s2) { sendError(ws, "Could not open Clay session."); return true; }
+        sessionId = s2.localId;
+        setupTap(ws, found.ctx, sessionId);
+      }
+      var session2 = sm2.sessions.get(sessionId);
+      if (!session2) {
+        sendError(ws, "Session not found: " + sessionId);
+        return true;
+      }
+
+      // Drive the SDK exactly the way the regular project user-message
+      // path does. The session's own subscriber forwards events back as
+      // home_clay_* via the tap installed above.
+      var sdk = found.ctx.sdk;
+      if (!sdk) {
+        sendError(ws, "Clay SDK bridge unavailable.");
+        return true;
+      }
+      try {
+        if (!session2.isProcessing) {
+          session2.isProcessing = true;
+          session2.sentToolResults = {};
+          if (!session2.queryInstance && (!session2.worker || session2.messageQueue !== "worker")) {
+            sdk.startQuery(session2, text, null, null);
+          } else {
+            sdk.pushMessage(session2, text, null);
+          }
+        } else {
+          sdk.pushMessage(session2, text, null);
+        }
+      } catch (e) {
+        sendError(ws, "Failed to dispatch: " + (e.message || String(e)));
+      }
+      return true;
+    }
+
+    return false;
+  }
+
+  function handleDisconnection(ws) {
+    teardownTap(ws);
+  }
+
+  return { handleMessage: handleMessage, handleDisconnection: handleDisconnection };
+}
+
+module.exports = { attachClayHome: attachClayHome };

package/lib/server-mates.js

@@ -116,8 +116,9 @@ function attachMates(ctx) {
       // Auto-archive Ally and any other archived built-ins for existing users
       try { mates.syncArchivedBuiltinMates(mateCtx5); } catch (e) {}
       // Ensure core built-in mates are in favorites (unless user explicitly removed them)
-      // Auto-favorites: Clay (host agent), Arch (architect), Buzz (marketer)
-      var coreMateKeys = ["clay", "arch", "buzz"];
+      // Clay is reachable via Home, not via the mate sidebar, so it is
+      // intentionally NOT in this list.
+      var coreMateKeys = ["arch", "buzz"];
       var mateList = mates.getAllMates(mateCtx5);
       var currentFavs = users.getDmFavorites(userId);
       var hiddenIds = users.getDmHidden(userId);

package/lib/server.js

@@ -12,6 +12,7 @@ var serverAuth = require("./server-auth");
 var serverSkills = require("./server-skills");
 var serverDm = require("./server-dm");
 var serverMates = require("./server-mates");
+var serverClayHome = require("./server-clay-home");
 var serverAdmin = require("./server-admin");
 var serverSettings = require("./server-settings");
 var serverPalette = require("./server-palette");
@@ -793,6 +794,11 @@ function createServer(opts) {
         unreadMap[wsSlug] = 0;
       }
       ctx.handleConnection(ws, wsUser);
+      // Tear down the home-chat subscription (if any) on socket close so
+      // we don't leak callbacks against Clay's session manager.
+      ws.on("close", function () {
+        try { clayHomeHandler.handleDisconnection(ws); } catch (e) {}
+      });
     });
   });
 
@@ -1075,6 +1081,14 @@ function createServer(opts) {
   // --- Email account handler (per-user email account management) ---
   var emailHandler = serverEmail.attachEmail({ users: users });
 
+  // --- Clay home chat handler (host agent chat embedded in home hub) ---
+  var clayHomeHandler = serverClayHome.attachClayHome({
+    users: users,
+    mates: mates,
+    projects: projects,
+    addProject: addProject,
+  });
+
   // --- Mate handler ---
   // Forward reference: mateHandler is set up after removeProject is defined
   var mateHandler = null;
@@ -1086,6 +1100,7 @@ function createServer(opts) {
     if (dmHandler.handleMessage(ws, msg)) return;
     if (mateHandler && mateHandler.handleMessage(ws, msg)) return;
     if (emailHandler.handleMessage(ws, msg)) return;
+    if (clayHomeHandler.handleMessage(ws, msg)) return;
   }
 
   function removeProject(slug) {

package/lib/sessions.js

@@ -584,6 +584,15 @@ function createSessionManager(opts) {
     if (!obj._ts) obj._ts = Date.now();
     session.history.push(obj);
     appendToSessionFile(session, obj);
+    // Per-session out-of-band subscribers (used by home-chat to mirror
+    // Clay session events into a parallel UI without joining the project's
+    // ws clients set). Subscribers receive the same obj that goes to ws
+    // clients; they are responsible for any transform + dispatch.
+    if (session._subscribers && session._subscribers.size > 0) {
+      for (var sub of session._subscribers) {
+        try { sub(obj); } catch (e) { /* swallow — subscriber is optional */ }
+      }
+    }
     if (sendEach) {
       // Multi-user: send to clients whose active session matches this one
       var data = JSON.stringify(obj);
@@ -901,6 +910,15 @@ function createSessionManager(opts) {
     saveSessionFile: saveSessionFile,
     appendToSessionFile: appendToSessionFile,
     sendAndRecord: doSendAndRecord,
+    subscribeSession: function (localId, cb) {
+      var session = sessions.get(localId);
+      if (!session) return null;
+      if (!session._subscribers) session._subscribers = new Set();
+      session._subscribers.add(cb);
+      return function unsubscribe() {
+        if (session._subscribers) session._subscribers.delete(cb);
+      };
+    },
     sendToSession: doSendToSession,
     findTurnBoundary: findTurnBoundary,
     replayHistory: replayHistory,

package/lib/ws-schema.js

@@ -521,7 +521,19 @@ var schema = {
   "ralph_phase":              { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Current ralph wizard phase" },
   "ralph_crafting_started":   { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "File crafting session started" },
   "ralph_files_status":       { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Prompt/judge file readiness status" },
-  "ralph_files_content":      { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Loop file contents (prompt and judge)" }
+  "ralph_files_content":      { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Loop file contents (prompt and judge)" },
+
+  // -----------------------------------------------------------------------
+  // Home Chat (Clay host agent)
+  // -----------------------------------------------------------------------
+  "home_clay_open":           { direction: "c2s", handler: "lib/server-clay-home.js", description: "Open/restore the user's Clay home chat session" },
+  "home_clay_send":           { direction: "c2s", handler: "lib/server-clay-home.js", description: "Send a message to Clay from the home chat" },
+  "home_clay_new_session":    { direction: "c2s", handler: "lib/server-clay-home.js", description: "Start a fresh Clay home chat session" },
+  "home_clay_close":          { direction: "c2s", handler: "lib/server-clay-home.js", description: "Tear down the home-chat tap on the user's WS" },
+  "home_clay_history":        { direction: "s2c", handler: "lib/public/modules/home-chat.js", description: "Initial / refreshed Clay home chat history" },
+  "home_clay_delta":          { direction: "s2c", handler: "lib/public/modules/home-chat.js", description: "Streaming assistant text delta for home chat" },
+  "home_clay_done":           { direction: "s2c", handler: "lib/public/modules/home-chat.js", description: "Clay turn finished" },
+  "home_clay_error":          { direction: "s2c", handler: "lib/public/modules/home-chat.js", description: "Home chat error" }
 };
 
 module.exports = { schema: schema };

package/package.json

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