clay-server 4.7.0-beta.1 → 4.7.0-beta.3

package/lib/project-connection.js

@@ -219,20 +219,6 @@ function attachConnection(ctx) {
       sendTo(ws, { type: "claude_open_mode_changed", claudeOpenMode: _comVal || "gui" });
     }
 
-    // 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

@@ -2200,24 +2200,6 @@ 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

@@ -1,3 +1,4 @@
+import { initGenerationStop } from './modules/generation-stop.js';
 import { initIssueLinks } from './modules/clay-issue-links.js';
 import { initIssues, closeIssues } from './modules/issues.js';
 import { initIssuesContext } from './modules/issues-context.js';
@@ -66,6 +67,7 @@ import { getWs as _getWsRef, setWs as _setWsRef } from './modules/ws-ref.js';
 import { initHomeHub, showHomeHub as _hubShowHomeHub, hideHomeHub as _hubHideHomeHub, isHomeHubVisible, renderHomeMateSwitcher, updateHomeIconBadge } from './modules/app-home-hub.js';
 import { initHomeSidebar } from './modules/home-sidebar.js';
 import { openHomeMateAction } from './modules/home-mate-chat.js';
+import { initProjectsHub, showProjectsHub, hideProjectsHub } from './modules/projects-hub.js';
 import { initHomeSurfaceBoot } from './modules/home-surface-boot.js';
 import { rememberHomePrimarySurface } from './modules/home-surface.js';
 import { initRateLimit, handleRateLimitEvent as _rlHandleRateLimitEvent, updateRateLimitUsage as _rlUpdateRateLimitUsage, handleFastModeState as _rlHandleFastModeState, resetRateLimitState } from './modules/app-rate-limit.js';
@@ -83,8 +85,6 @@ import { initLoopUi, updateLoopInputVisibility as _loopUpdateLoopInputVisibility
 import { initBackgroundTasksUi } from './modules/background-tasks-ui.js';
 import { initPendingMessageQueue } from './modules/pending-message-queue.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 { initHeaderTuiFont } from './modules/header-tui-font.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';
@@ -296,6 +296,15 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     splitGroupsProjectSlug: null,
     socketPath: null,
     pendingHomeProjectSlug: null,
+    projectsHubVisible: false,
+    projectsHubMarkup: null,
+    projectsHubList: [],
+    projectListLoaded: false,
+    projectsAccessLoaded: false,
+    projectsHubRestoreRequested: false,
+    projectsShowGuide: false,
+    onboardingStep: 'welcome',
+    onboardingIntent: null,
     currentProjectOwnerId: null,
     isOsUsers: false,
     skipPermsEnabled: false,
@@ -813,17 +822,7 @@ 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);
-    },
-  });
+  initGenerationStop();
 
   // --- Panels module ---
   initPanels();
@@ -902,6 +901,8 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   function switchProject(slug) { _projSwitchProject(slug); }
 
   window.addEventListener("popstate", function () {
+    if (/^\/projects\/?$/.test(location.pathname)) { showProjectsHub(true); return; }
+    hideProjectsHub();
     var m = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
     var newSlug = m ? m[1] : null;
     if (!newSlug) {
@@ -1053,7 +1054,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
       if (document.body) document.body.classList.add('is-multi-user');
     }
     if (d.user && d.user.id) { store.set({ myUserId: d.user.id }); requestDefaultVendor(); }
-    if (d.permissions) store.set({ permissions: d.permissions });
+    store.set({ permissions: d.permissions || null, projectsAccessLoaded: true });
     if (d.mustChangePin) showForceChangePinOverlay();
     // Single-user mode: clear user strip skeletons immediately (no presence message will arrive)
     if (!store.get('isMultiUserMode')) {
@@ -1378,6 +1379,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   // --- Home Hub module ---
   initHomeHub();
   initHomeSidebar();
+  initProjectsHub();
   initHomeSurfaceBoot();
 
   // Mates live on the home hub now, so keep that pane and the C button

package/lib/public/css/input.css

@@ -1717,3 +1717,30 @@ body.tui-composer-active #config-chip-wrap {
   font-weight: 600;
   color: inherit;
 }
+
+/* Stop remains available when Send is occupied by a draft or Worker lock. */
+#generation-stop-row {
+  max-width: var(--content-width);
+  margin: 6px auto 0;
+  display: flex;
+  justify-content: flex-end;
+}
+#generation-stop-row.hidden { display: none; }
+body:not(.worker-pane-locked) #input-area:has(#send-btn.stop:not(:disabled)) #generation-stop-row { display: none; }
+#generation-stop {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 6px 12px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--sidebar-bg);
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+#generation-stop:hover:not(:disabled) { color: var(--text); background: var(--code-bg); }
+#generation-stop:disabled { opacity: 0.5; cursor: default; }
+#generation-stop .lucide { width: 12px; height: 12px; }

package/lib/public/css/pane.css

@@ -8,7 +8,6 @@ body.pane-mode #sidebar-resize-handle,
 body.pane-mode #mate-sidebar-resize-handle,
 body.pane-mode #sidebar-overlay,
 body.pane-mode #home-hub,
-body.pane-mode #whats-new-article,
 body.pane-mode .title-bar-content,
 body.pane-mode .dm-header-bar,
 body.pane-mode #mobile-tab-bar,

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

@@ -0,0 +1,75 @@
+body.projects-active #top-bar,
+body.projects-active #icon-strip,
+body.projects-active #sidebar-column,
+body.projects-active #mate-sidebar-column,
+body.projects-active #sidebar-resize-handle,
+body.projects-active #mate-sidebar-resize-handle,
+body.projects-active #sidebar-overlay,
+body.projects-active #mobile-tab-bar,
+body.projects-active .title-bar-content,
+body.projects-active #user-island,
+body.projects-active #main-area > :not(#projects-hub) { display: none !important; }
+body.projects-active #main-area { border: 0; margin: 0; border-radius: 0; }
+#projects-hub { position: absolute; inset: 0; overflow-y: auto; background: var(--bg); color: var(--text); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
+#projects-hub.hidden { display: none; }
+.projects-header { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: auto; padding: 24px 40px; gap: 20px; }
+.projects-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.6px; color: var(--text); text-decoration: none; }
+.projects-brand img { width: 28px; height: 28px; }
+.projects-header nav { display: flex; gap: 6px; }
+.projects-main { width: min(100%, 1040px); margin: auto; padding: 48px 40px 64px; }
+.projects-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; color: var(--brand-clay); margin-bottom: 22px; }
+#projects-title { font-size: clamp(32px, 4vw, 48px); letter-spacing: -1.7px; line-height: 1.1; font-weight: 500; outline: none; }
+.projects-welcome #projects-title { font-size: clamp(44px, 6.5vw, 76px); letter-spacing: -3px; line-height: 1.02; }
+.projects-lead { margin-top: 20px; font-size: 16px; line-height: 1.7; color: var(--text-muted); }
+.projects-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; border-top: 1px solid var(--border); margin: 42px 0 32px; padding-top: 24px; max-width: 760px; }
+.projects-intro-grid span { font-size: 10px; font-weight: 600; letter-spacing: 1.3px; color: var(--text-dimmer); }
+.projects-intro-grid h2 { font-size: 17px; font-weight: 500; margin: 12px 0 8px; letter-spacing: -.3px; }
+.projects-intro-grid p { font-size: 13px; line-height: 1.75; color: var(--text-muted); max-width: 330px; }
+.projects-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; font: inherit; font-size: 13px; font-weight: 500; padding: 11px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); color: var(--text); cursor: pointer; }
+.projects-button .lucide { width: 16px; height: 16px; }
+.projects-button:hover { background: var(--border-subtle); }
+.projects-button-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
+.projects-button-primary:hover { background: var(--text-secondary); }
+.projects-button-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
+.projects-welcome-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+.projects-footnote { font-size: 11px; color: var(--text-dimmer); margin-top: 18px; }
+.projects-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
+.projects-heading .projects-eyebrow { margin-bottom: 14px; }
+.projects-heading .projects-lead { font-size: 14px; margin-top: 12px; }
+.projects-setup-actions { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
+.projects-setup-action, .projects-list-item { display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; padding: 23px 24px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
+.projects-setup-action + .projects-setup-action { border-top: 1px solid var(--border-subtle); }
+.projects-setup-action:hover, .projects-list-item:hover { background: var(--bg-alt); }
+.projects-setup-action strong, .projects-list-item strong { display: block; font-size: 15px; font-weight: 500; }
+.projects-setup-action span span, .projects-list-item span span { display: block; color: var(--text-muted); font-size: 12px; margin-top: 6px; line-height: 1.5; overflow-wrap: anywhere; }
+.projects-setup-action > .lucide, .projects-list-item > .lucide { margin-left: auto; width: 17px; height: 17px; flex-shrink: 0; color: var(--text-dimmer); }
+.projects-action-icon { display: inline-flex; padding: 10px; border-radius: 10px; background: var(--bg-alt); color: var(--brand-clay); }
+.projects-action-icon .lucide { width: 22px; height: 22px; }
+.projects-next-step { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-top: 28px; max-width: 560px; }
+.projects-next-step span { display: block; margin-bottom: 8px; font-size: 10px; letter-spacing: 1.4px; color: var(--text-dimmer); }
+.projects-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
+.projects-list-item { border: 1px solid var(--border); border-radius: 12px; padding: 18px; min-width: 0; }
+.projects-list-item > span:nth-child(2) { min-width: 0; }
+.projects-section-title { font-size: 13px; font-weight: 500; margin-bottom: 14px; }
+.projects-status, .projects-loading p { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 20px 0; }
+.projects-footer { max-width: 1040px; margin: auto; padding: 0 40px 28px; font-size: 11px; color: var(--text-dimmer); }
+#projects-hub button:disabled { opacity: .5; cursor: default; }
+#projects-hub button:focus-visible, #projects-hub a:focus-visible { outline: 2px solid var(--brand-clay); outline-offset: 3px; }
+@media (max-width: 600px) {
+  .projects-header { padding: 20px; gap: 10px; }
+  .projects-brand { font-size: 14px; }
+  .projects-header .projects-button { padding: 9px; }
+  .projects-main { padding: 28px 22px 40px; }
+  .projects-welcome #projects-title { letter-spacing: -2px; }
+  .projects-intro-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 30px; }
+  .projects-heading { flex-direction: column; gap: 12px; }
+  .projects-heading > .projects-button { padding-left: 0; }
+  .projects-list { grid-template-columns: 1fr; }
+  .projects-setup-action { padding: 20px 16px; gap: 12px; }
+  .projects-footer { padding: 0 22px 24px; }
+}
+@media (min-width: 601px) and (max-height: 760px) {
+  .projects-main { padding-top: 24px; }
+  .projects-welcome #projects-title { font-size: 60px; }
+  .projects-intro-grid { margin-top: 28px; margin-bottom: 24px; }
+}

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

@@ -49,141 +49,6 @@ body.tui-suspended #tui-resume-bar {
   .tui-resume-hint { display: none; }
 }
 
-/* Policy info modal. Themed via CSS vars so it follows light/dark.
-   The modal itself is gone; .tui-policy-modal-* rules stay because
-   What's New article bodies (lib/whats-new-content.js) still use the
-   -links class for their footer links. */
-.tui-policy-modal-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;
-}
-.tui-policy-modal-backdrop.hidden { display: none; }
-.tui-policy-modal {
-  width: min(560px, 100%);
-  max-height: min(80vh, 720px);
-  background: var(--sidebar-bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 12px 48px rgba(var(--shadow-rgb), 0.4);
-  color: var(--text);
-}
-.tui-policy-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.tui-policy-modal-header h2 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text);
-}
-.tui-policy-modal-close {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-dimmer);
-  font-size: 20px;
-  cursor: pointer;
-}
-.tui-policy-modal-close:hover {
-  background: rgba(var(--overlay-rgb), 0.05);
-  color: var(--text);
-}
-.tui-policy-modal-body {
-  padding: 16px 18px 20px;
-  overflow-y: auto;
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--text-secondary);
-}
-.tui-policy-modal-body p {
-  margin: 0 0 12px;
-}
-.tui-policy-modal-body ul {
-  margin: 0 0 12px;
-  padding-left: 20px;
-}
-.tui-policy-modal-body li {
-  margin-bottom: 6px;
-}
-.tui-policy-modal-body code {
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: var(--code-bg);
-  color: var(--accent);
-  font-size: 12px;
-  font-family: "Roboto Mono", monospace;
-}
-.tui-policy-modal-body strong {
-  color: var(--text);
-}
-.tui-policy-modal-body h3 {
-  margin: 18px 0 6px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text);
-}
-.tui-policy-modal-body ol {
-  margin: 0 0 12px;
-  padding-left: 20px;
-}
-.tui-policy-modal-body ol li {
-  margin-bottom: 6px;
-}
-.tui-policy-modal-body a {
-  color: var(--accent2);
-}
-.tui-policy-modal-body a:hover {
-  text-decoration: underline;
-}
-.tui-policy-modal-links {
-  margin-top: 16px;
-  font-size: 12px;
-  color: var(--text-dimmer);
-}
-
-/* Maintainer note: visually distinct from the technical explanation
-   above so it reads as a personal aside, not just more documentation. */
-.tui-policy-maintainer-note {
-  margin-top: 18px;
-  padding: 14px 16px;
-  border-left: 3px solid var(--accent);
-  background: rgba(var(--overlay-rgb), 0.04);
-  border-radius: 0 8px 8px 0;
-}
-.tui-policy-maintainer-note h3 {
-  margin-top: 0;
-}
-.tui-policy-maintainer-note p {
-  margin-bottom: 10px;
-  color: var(--text-secondary);
-}
-.tui-policy-maintainer-note p:last-of-type {
-  margin-bottom: 0;
-}
-.tui-policy-signature {
-  margin-top: 12px !important;
-  color: var(--text-dimmer) !important;
-  font-style: italic;
-  font-size: 12px;
-}
-
 /* tui-attention.css
    Banner + modal for "claude TUI session needs your input" notifications.
    The banner sits at the top of the viewport above any project content;
@@ -367,275 +232,3 @@ body.tui-suspended #tui-resume-bar {
   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);
-}
-
-/* ============================================================
-   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; }
-}