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

package/lib/project-connection.js

@@ -157,6 +157,21 @@ function attachConnection(ctx) {
       var _comVal = _comUid ? usersModule.getClaudeOpenMode(_comUid) : "tui";
       sendTo(ws, { type: "claude_open_mode_changed", claudeOpenMode: _comVal || "tui" });
     }
+
+    // What's New: push the full entries list (for the home-page feed)
+    // plus the subset of unseen ids (for the auto-pop carousel). Content
+    // lives in lib/whats-new-content.js so adding an entry doesn't touch
+    // this file.
+    try {
+      var _wn = require("./whats-new");
+      var _wnUid = (wsUser && wsUser.id) || null;
+      var _wnState = _wnUid ? _wn.getStateForUser(_wnUid) : { entries: _wn.listEntries(), unseenIds: [] };
+      if (_wnState.entries.length > 0) {
+        sendTo(ws, { type: "whats_new_state", entries: _wnState.entries, unseenIds: _wnState.unseenIds });
+      }
+    } catch (e) {
+      if (debug) console.error("[project] whats_new send failed:", e && e.message);
+    }
     _loop.sendConnectionState(ws);
     if (_mcp) _mcp.sendConnectionState(ws);
     if (_notifications) _notifications.sendConnectionState(ws, sendTo);

package/lib/project-sessions.js

@@ -1754,6 +1754,24 @@ function attachSessions(ctx) {
       return true;
     }
 
+    if (msg.type === "whats_new_seen") {
+      // Persist that the current user dismissed a What's New entry so it
+      // is not shown again on future connects.
+      var wnUserId = ws._clayUser ? ws._clayUser.id : null;
+      if (!wnUserId) {
+        sendTo(ws, { type: "whats_new_seen_result", ok: false, error: "no_user" });
+        return true;
+      }
+      var wnSvc = require("./whats-new");
+      var wnResult = wnSvc.markSeen(wnUserId, msg.id);
+      if (wnResult && wnResult.ok) {
+        sendTo(ws, { type: "whats_new_seen_result", ok: true, id: msg.id });
+      } else {
+        sendTo(ws, { type: "whats_new_seen_result", ok: false, error: (wnResult && wnResult.error) || "unknown" });
+      }
+      return true;
+    }
+
     if (msg.type === "set_claude_open_mode") {
       // Per-user preference: when Clay opens a Claude session, render it as
       // the SDK-driven custom chat ("gui") or as an embedded `claude` TUI

package/lib/public/app.js

@@ -63,6 +63,8 @@ import { initDebateUi, showDebateConcludeConfirm as _debShowDebateConcludeConfir
 import { initLoopUi, updateLoopInputVisibility as _loopUpdateLoopInputVisibility, updateLoopButton as _loopUpdateLoopButton, showLoopBanner as _loopShowLoopBanner, updateLoopBanner as _loopUpdateLoopBanner, updateRalphBars as _loopUpdateRalphBars, showRalphCraftingBar as _loopShowRalphCraftingBar, showRalphApprovalBar as _loopShowRalphApprovalBar, updateRalphApprovalStatus as _loopUpdateRalphApprovalStatus, openRalphPreviewModal as _loopOpenRalphPreviewModal, showExecModal as _loopShowExecModal, closeExecModal as _loopCloseExecModal, updateExecModalStatus as _loopUpdateExecModalStatus } from './modules/app-loop-ui.js';
 import { initLoopWizard, openRalphWizard as _loopOpenRalphWizard, closeRalphWizard as _loopCloseRalphWizard, getWizardSource as _loopGetWizardSource } from './modules/app-loop-wizard.js';
 import { initAppNotifications, handleNotificationsState as _notifHandleState, handleNotificationCreated as _notifHandleCreated, handleNotificationDismissed as _notifHandleDismissed, handleNotificationDismissedAll as _notifHandleDismissedAll } from './modules/app-notifications.js';
+import { initWhatsNew, handleWhatsNewState as _wnHandleState, handleWhatsNewSeenResult as _wnHandleSeenResult } from './modules/whats-new.js';
+import { initWhatsNewArticle, openArticle as openWhatsNewArticle } from './modules/whats-new-article.js';
 import { createStore, store } from './modules/store.js';
 import { initPanels, updateConfigChip as _panUpdateConfigChip, getModelEffortLevels as _panGetModelEffortLevels, accumulateUsage as _panAccumulateUsage, updateUsagePanel as _panUpdateUsagePanel, resetUsage as _panResetUsage, toggleUsagePanel as _panToggleUsagePanel, formatTokens as _panFormatTokens, updateStatusPanel as _panUpdateStatusPanel, requestProcessStats as _panRequestProcessStats, toggleStatusPanel as _panToggleStatusPanel, accumulateContext as _panAccumulateContext, updateContextPanel as _panUpdateContextPanel, resetContext as _panResetContext, resetContextData as _panResetContextData, minimizeContext as _panMinimizeContext, expandContext as _panExpandContext, toggleContextPanel as _panToggleContextPanel, getContextView as _panGetContextView, renderCtxPopover as _panRenderCtxPopover, hideCtxPopover as _panHideCtxPopover, formatBytes as _panFormatBytes, formatUptime as _panFormatUptime, getModelSupportsEffort as _panGetModelSupportsEffort, getSessionUsage, setSessionUsage, getContextData, setContextData, setContextView as _panSetContextView, applyContextView as _panApplyContextView } from './modules/app-panels.js';
 import { initProjects, updateProjectList as _projUpdateProjectList, renderProjectList as _projRenderProjectList, renderTopbarPresence as _projRenderTopbarPresence, switchProject as _projSwitchProject, resetClientState as _projResetClientState, confirmRemoveProject as _projConfirmRemoveProject, handleRemoveProjectCheckResult as _projHandleRemoveProjectCheckResult, handleRemoveProjectResult as _projHandleRemoveProjectResult, openAddProjectModal as _projOpenAddProjectModal, closeAddProjectModal as _projCloseAddProjectModal, handleBrowseDirResult as _projHandleBrowseDirResult, handleAddProjectResult as _projHandleAddProjectResult, handleCloneProgress as _projHandleCloneProgress, showUpdateAvailable as _projShowUpdateAvailable, getCachedProjects, setCachedProjects, getCachedProjectCount, getCachedRemovedProjects, setCachedRemovedProjects } from './modules/app-projects.js';
@@ -590,6 +592,17 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   // --- Notifications module ---
   initAppNotifications();
 
+  // --- What's New viewer ---
+  initWhatsNewArticle();
+  initWhatsNew({
+    // "Read more" in the carousel opens the dedicated article viewer
+    // for the chosen entry, jumping straight to the body content
+    // (skipping the home list).
+    onReadMore: function (entryId) {
+      if (entryId) openWhatsNewArticle(entryId);
+    },
+  });
+
   // --- Panels module ---
   initPanels();
 

package/lib/public/css/tui-attention.css

@@ -369,3 +369,320 @@
   padding: 4px;
   background: #000;
 }
+
+/* ============================================================
+   What's New carousel
+   ============================================================ */
+.whats-new-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9600;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+.whats-new-backdrop.show { opacity: 1; }
+.whats-new-card {
+  position: relative;
+  width: min(440px, 100%);
+  max-height: min(80vh, 640px);
+  background: var(--sidebar-bg);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 12px 48px rgba(var(--shadow-rgb), 0.4);
+  color: var(--text);
+}
+.whats-new-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text-dimmer);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+.whats-new-close:hover {
+  background: rgba(var(--overlay-rgb), 0.15);
+  color: var(--text);
+}
+.whats-new-image-slot {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2, var(--accent)) 100%);
+  flex-shrink: 0;
+  overflow: hidden;
+  display: block;
+}
+.whats-new-image-slot img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.whats-new-image-slot.empty {
+  aspect-ratio: 16 / 6;
+}
+.whats-new-body {
+  padding: 18px 20px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+.whats-new-eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dimmer);
+}
+.whats-new-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text);
+}
+.whats-new-summary {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+.whats-new-read-more {
+  align-self: flex-start;
+  margin-top: 6px;
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 7px;
+  background: var(--accent);
+  color: var(--accent-contrast, #fff);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+.whats-new-read-more:hover {
+  filter: brightness(1.08);
+}
+.whats-new-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px 14px;
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.whats-new-nav.hidden { display: none; }
+.whats-new-prev,
+.whats-new-next {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.whats-new-prev:hover,
+.whats-new-next:hover {
+  background: rgba(var(--overlay-rgb), 0.08);
+  color: var(--text);
+}
+.whats-new-prev:disabled,
+.whats-new-next:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.whats-new-dots {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.whats-new-dot {
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--text-dimmer);
+  opacity: 0.35;
+  cursor: pointer;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+.whats-new-dot.active {
+  opacity: 1;
+  background: var(--accent);
+  transform: scale(1.2);
+}
+
+/* ============================================================
+   Home page "What's New" index (title-only list, blog-style)
+   ============================================================ */
+.hub-whats-new {
+  display: flex;
+  flex-direction: column;
+}
+.hub-whats-new-item {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 10px 4px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  color: var(--text);
+  border-bottom: 1px solid var(--border);
+  transition: background 120ms ease;
+  width: 100%;
+}
+.hub-whats-new-item:last-child {
+  border-bottom: none;
+}
+.hub-whats-new-item:hover {
+  background: rgba(var(--overlay-rgb), 0.04);
+}
+.hub-whats-new-item-date {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  flex-shrink: 0;
+  width: 84px;
+  font-variant-numeric: tabular-nums;
+}
+.hub-whats-new-item-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--text);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* ============================================================
+   Whats New article (blog-style reading view)
+   ============================================================
+   Mirrors #home-hub positioning: absolute inset:0 inside
+   #main-area so the icon strip, top bar, and any other chrome
+   outside #main-area stay visible. Sidebar-column (inside
+   main-area) is covered, same as home-hub. */
+#whats-new-article {
+  position: absolute;
+  inset: 0;
+  z-index: 210;
+  background: var(--bg);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 8px;
+}
+#whats-new-article.hidden { display: none; }
+.wna-toolbar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  z-index: 1;
+}
+.wna-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+}
+.wna-back:hover {
+  background: rgba(var(--overlay-rgb), 0.06);
+  color: var(--text);
+}
+.wna-content {
+  width: 100%;
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 56px 32px 96px;
+  box-sizing: border-box;
+}
+.wna-date {
+  font-size: 12px;
+  color: var(--text-dimmer);
+  letter-spacing: 0.04em;
+  margin-bottom: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.wna-title {
+  margin: 0 0 32px;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text);
+  letter-spacing: -0.01em;
+}
+.wna-body {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--text);
+}
+.wna-body p {
+  margin: 0 0 18px;
+}
+.wna-body p:last-child { margin-bottom: 0; }
+.wna-body h3 {
+  margin: 36px 0 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.005em;
+}
+.wna-body ul, .wna-body ol {
+  margin: 0 0 18px;
+  padding-left: 22px;
+}
+.wna-body li {
+  margin-bottom: 8px;
+}
+.wna-body code {
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--code-bg);
+  color: var(--accent);
+  font-size: 13px;
+  font-family: "Roboto Mono", monospace;
+}
+.wna-body strong { color: var(--text); font-weight: 600; }
+.wna-body em { color: var(--text-secondary); }
+.wna-body a { color: var(--accent2); }
+.wna-body a:hover { text-decoration: underline; }
+@media (max-width: 640px) {
+  .wna-content { padding: 32px 20px 80px; }
+  .wna-title { font-size: 26px; }
+}
+

package/lib/public/index.html

@@ -150,6 +150,13 @@
           <div class="hub-week-strip" id="hub-week-strip"></div>
         </div>
 
+        <div class="hub-card hub-whats-new-card" id="hub-whats-new-card">
+          <div class="hub-card-header">
+            <span class="hub-card-title">What's New</span>
+          </div>
+          <div class="hub-whats-new" id="hub-whats-new"></div>
+        </div>
+
         <div class="hub-card hub-playbooks" id="hub-playbooks">
           <div class="hub-card-header">
             <span class="hub-card-title">Quick Start</span>
@@ -175,6 +182,20 @@
         </div>
       </div>
     </div>
+
+    <div id="whats-new-article" class="hidden">
+      <header class="wna-toolbar">
+        <button type="button" class="wna-back" id="wna-back">
+          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+          <span>Back</span>
+        </button>
+      </header>
+      <article class="wna-content">
+        <div class="wna-date" id="wna-date"></div>
+        <h1 class="wna-title" id="wna-title"></h1>
+        <div class="wna-body" id="wna-body"></div>
+      </article>
+    </div>
     <div id="sidebar-column">
       <div class="title-bar-sidebar">
         <button class="title-bar-project-dropdown" id="title-bar-project-dropdown">

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

@@ -9,6 +9,8 @@ import { openSchedulerToTab } from './scheduler.js';
 import { getPlaybooks, openPlaybook, getPlaybookForTip } from './playbook.js';
 import { mateAvatarUrl } from './avatar.js';
 import { openDm, exitDmMode } from './app-dm.js';
+import { getKnownEntries as getWhatsNewEntries } from './whats-new.js';
+import { openArticle as openWhatsNewArticle } from './whats-new-article.js';
 
 function $hub(id) { return document.getElementById(id); }
 
@@ -489,6 +491,45 @@ export function renderHomeHub(projects) {
 
   // Render twemoji for all emoji in the hub
 
+  // --- What's New feed ---
+  renderHomeWhatsNew();
+}
+
+function renderHomeWhatsNew() {
+  var list = $hub("hub-whats-new");
+  var card = $hub("hub-whats-new-card");
+  if (!list || !card) return;
+  var entries = getWhatsNewEntries();
+  // Sort newest first by publishedAt (YYYY-MM-DD string compare).
+  entries = entries.slice().sort(function (a, b) {
+    return (b.publishedAt || "").localeCompare(a.publishedAt || "");
+  });
+  if (entries.length === 0) {
+    card.classList.add("hidden");
+    list.innerHTML = "";
+    return;
+  }
+  card.classList.remove("hidden");
+  list.innerHTML = "";
+  for (var i = 0; i < entries.length; i++) {
+    var e = entries[i];
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "hub-whats-new-item";
+    btn.setAttribute("data-whats-new-id", e.id);
+    var dateEl = document.createElement("div");
+    dateEl.className = "hub-whats-new-item-date";
+    dateEl.textContent = e.publishedAt || "";
+    var titleEl = document.createElement("h3");
+    titleEl.className = "hub-whats-new-item-title";
+    titleEl.textContent = e.title || "";
+    btn.appendChild(dateEl);
+    btn.appendChild(titleEl);
+    (function (id) {
+      btn.addEventListener("click", function () { openWhatsNewArticle(id); });
+    })(e.id);
+    list.appendChild(btn);
+  }
 }
 
 export function handleHubSchedules(msg) {

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

@@ -44,6 +44,8 @@ import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunF
 import { scrollToBottom, addToMessages, addUserMessage, addSystemMessage, removeMatePreThinking, appendDelta, finalizeAssistantBlock, addConflictMessage, addContextOverflowMessage, showSuggestionChips, armStickyBottom } from './app-rendering.js';
 import { setActivity, startUrgentBlink, stopUrgentBlink, blinkSessionDot, updateCrossProjectBlink } from './app-favicon.js';
 import { setStatus } from './app-connection.js';
+import { handleWhatsNewState, handleWhatsNewSeenResult, setKnownEntries as setWhatsNewKnownEntries } from './whats-new.js';
+import { closeArticle as closeWhatsNewArticle } from './whats-new-article.js';
 import { getModelEffortLevels, accumulateUsage, updateUsagePanel, accumulateContext, updateContextPanel, renderCtxPopover, updateStatusPanel } from './app-panels.js';
 import { updateProjectList, resetClientState, showUpdateAvailable, handleRemoveProjectCheckResult, handleRemoveProjectResult, handleBrowseDirResult, handleAddProjectResult, handleCloneProgress } from './app-projects.js';
 import { updateHistorySentinel, prependOlderHistory } from './app-header.js';
@@ -589,6 +591,7 @@ export function processMessage(msg) {
 
       case "session_switched":
         hideHomeHub();
+        closeWhatsNewArticle();
         // Save draft from outgoing session
         var _prevSid = store.get('activeSessionId');
         if (_prevSid && inputEl.value) {
@@ -1694,6 +1697,18 @@ export function processMessage(msg) {
         handleAutoContinueChanged(msg);
         break;
 
+      case "whats_new_state":
+        // Keep a known-entries cache for the home page feed (which shows
+        // both seen and unseen entries), then queue unseen ones for the
+        // carousel.
+        if (msg && Array.isArray(msg.entries)) setWhatsNewKnownEntries(msg.entries);
+        handleWhatsNewState(msg);
+        break;
+
+      case "whats_new_seen_result":
+        handleWhatsNewSeenResult(msg);
+        break;
+
       case "set_claude_open_mode_result":
       case "claude_open_mode_changed":
         if (msg.claudeOpenMode === "tui" || msg.claudeOpenMode === "gui") {

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

@@ -640,9 +640,17 @@ export function showUpdateBanner(msg) {
   pendingUpdateMsg = msg;
   if (!bannerContainer) return;
 
-  // Remove any existing update banner
+  // If an update banner is already showing for the same version, skip the
+  // re-render. The server pushes update_available every hour but we don't
+  // want to flash/refresh the banner if the user already sees it.
   var existing = bannerContainer.querySelector('[data-notif-id="_update"]');
-  if (existing) removeBanner(existing);
+  if (existing) {
+    var existingVersion = existing.getAttribute("data-update-version");
+    if (existingVersion === msg.version) return;
+    // Version changed (e.g. a newer release came in while old banner was
+    // still up): tear down and re-render with the new version.
+    removeBanner(existing);
+  }
 
   var isHeadless = store.get('isHeadlessMode');
   var updTag = msg.version.indexOf("-beta") !== -1 ? "beta" : "latest";
@@ -650,6 +658,7 @@ export function showUpdateBanner(msg) {
   var banner = document.createElement("div");
   banner.className = "notif-banner notif-banner-update";
   banner.setAttribute("data-notif-id", "_update");
+  banner.setAttribute("data-update-version", msg.version);
 
   var actionsHtml = '';
   if (!isHeadless) {

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

@@ -16,6 +16,7 @@ import { spawnDustParticles } from './sidebar.js';
 import { isSearchOpen, closeSearch } from './session-search.js';
 import { exitDmMode } from './app-dm.js';
 import { isHomeHubVisible, hideHomeHub, showHomeHub } from './app-home-hub.js';
+import { closeArticle as closeWhatsNewArticle } from './whats-new-article.js';
 import { resetFileBrowser } from './filebrowser.js';
 import { closeArchive } from './sticky-notes.js';
 import { hideMemory } from './mate-memory.js';
@@ -411,6 +412,7 @@ export function switchProject(slug) {
   var wasDm = st.dmMode;
   var wasMate = st.dmMode && st.dmTargetUser && st.dmTargetUser.isMate;
   if (st.dmMode) exitDmMode(wasMate);
+  closeWhatsNewArticle();
   if (isHomeHubVisible()) {
     hideHomeHub();
     if (slug === store.get('currentSlug')) return;