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

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

@@ -66,6 +66,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 +84,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 +295,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,
@@ -814,17 +822,6 @@ 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();
 
@@ -902,6 +899,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 +1052,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 +1377,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/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; }
-}

package/lib/public/index.html

@@ -124,6 +124,7 @@
 
   <!-- === Main Area (sidebar + resize-handle + main-column) === -->
   <div id="main-area">
+    <section id="projects-hub" class="hidden" aria-label="Projects"></section>
     <div id="home-hub" class="hidden">
       <div class="home-hub-inner">
         <button id="home-sidebar-backdrop" class="home-sidebar-backdrop" type="button" aria-label="Close Home navigation"></button>
@@ -136,6 +137,7 @@
             </div>
           </div>
           <nav class="home-sidebar-primary-actions" aria-label="Home actions">
+            <button id="home-nav-projects" class="home-sidebar-action" type="button" title="Projects" aria-label="Projects"><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="folder"></i></span><span>Projects</span></button>
             <button id="home-sidebar-new" class="home-sidebar-action home-sidebar-new" type="button" title="New Chat" aria-label="Start a new chat with the current Mate" disabled><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="message-square-plus"></i></span><span>New Chat</span></button>
             <button id="home-sidebar-debate" class="home-sidebar-action" type="button" title="Browse debates" aria-label="Browse debates" aria-pressed="false"><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="messages-square"></i></span><span>Debates</span></button>
             <button id="home-tools-btn" class="home-sidebar-action" type="button" title="Capsules" aria-label="Capsules" aria-expanded="false" aria-controls="home-tool-workbench"><span class="home-sidebar-action-icon" aria-hidden="true"><i data-lucide="box"></i></span><span id="home-tools-label">Capsules</span><span id="home-tools-activity" class="home-tools-activity" aria-hidden="true"></span></button>
@@ -157,7 +159,7 @@
         </aside>
         <div id="home-workspace" class="home-workspace">
           <button id="home-sidebar-expand" class="home-sidebar-expand" type="button" title="Show sidebar" aria-label="Show Home sidebar" aria-describedby="home-sidebar-expand-brand-label"><i data-lucide="panel-left-open"></i><span id="home-sidebar-expand-brand-label" class="home-sidebar-brand-wordmark home-sidebar-expand-wordmark">Clay Studio</span></button>
-          <button id="home-close-control" class="home-close-control hidden" type="button" title="Close Home" aria-label="Close Home"><i data-lucide="x" aria-hidden="true"></i><span>Close</span></button>
+          <button id="home-close-control" class="home-close-control" type="button" title="Projects" aria-label="Projects"><i data-lucide="folder" aria-hidden="true"></i><span>Projects</span></button>
           <div id="home-conversation-region" class="home-conversation-region">
             <div id="home-mate-chat" class="home-mate-chat">
               <div class="home-mate-chat-stage">
@@ -216,19 +218,6 @@
       </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">