clay-server 5.0.0-beta.3 → 5.0.0-beta.4

package/lib/public/app.js

@@ -287,6 +287,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     sessionFolders: null,
     sessionFoldersSlug: null,
     sessionFolderCreate: null,
+    sidebarCreationEffects: [],
     sessionSearch: null,
     sessionFolderViewMenu: null,
     sessionFolderLayouts: {},
@@ -316,6 +317,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     splitGroupsProjectSlug: null,
     socketPath: null,
     pendingHomeProjectSlug: null,
+    homeProjectEmptyVisible: false,
     projectsHubVisible: false,
     projectsHubMarkup: null,
     projectsHubList: [],

package/lib/public/css/fonts.css

@@ -10,5 +10,11 @@
 }
 
 :root {
+  --font-ui: "Geist", "Twemoji", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Keep the bundled Korean face scoped so other CJK scripts use platform fallback. */
+[lang|="ko"] {
   --font-ui: "Geist", "Noto Sans KR", "Twemoji", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: var(--font-ui);
 }

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

@@ -224,6 +224,55 @@ body.home-surface-boot-pending #connect-overlay.hidden {
   height: 14px;
 }
 
+.home-project-empty {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  padding: 40px 24px;
+  background: var(--bg);
+}
+
+.home-project-empty[hidden] { display: none; }
+
+.home-project-empty-content {
+  width: min(100%, 420px);
+  text-align: center;
+}
+
+.home-project-empty-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 18px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 14px;
+  background: rgba(var(--overlay-rgb), 0.04);
+  color: var(--text-secondary);
+}
+
+.home-project-empty-icon .lucide { width: 20px; height: 20px; }
+.home-project-empty-eyebrow { margin: 0 0 8px; color: var(--text-dimmer); font-size: 10px; font-weight: 650; letter-spacing: 0.13em; }
+.home-project-empty h1 { margin: 0; color: var(--text); font-size: clamp(24px, 4vw, 34px); font-weight: 620; letter-spacing: -0.035em; }
+.home-project-empty-status { max-width: 340px; margin: 12px auto 22px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
+.home-project-empty button {
+  min-height: 40px;
+  padding: 8px 16px;
+  border: 1px solid var(--accent);
+  border-radius: 9px;
+  background: var(--accent);
+  color: var(--accent-text, #fff);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 620;
+  cursor: pointer;
+}
+.home-project-empty button:hover:not(:disabled) { filter: brightness(1.06); }
+.home-project-empty button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.home-project-empty button:disabled { border-color: var(--border-subtle); background: rgba(var(--overlay-rgb), 0.05); color: var(--text-dimmer); cursor: default; }
+
 .home-mate-chat-stage {
   position: relative;
   flex: 1 1 auto;
@@ -982,6 +1031,9 @@ body.home-surface-boot-pending #connect-overlay.hidden {
 }
 
 @media (max-width: 768px) {
+  .home-project-empty { padding: 32px 20px; }
+  .home-project-empty button { min-height: 44px; }
+
   #home-hub:not(.dock-split):not(.dock-focus) .home-mate-chat-stage {
     padding-top: 52px;
   }

package/lib/public/css/session-folders.css

@@ -37,6 +37,13 @@
 .session-folder-flat { margin-top: 4px; }
 .session-folder-flat .session-folder-body { border: 0; }
 .session-folder-empty { padding: 5px 4px 6px; font-size: 10.5px; line-height: 1.4; color: var(--text-muted); opacity: 0.78; }
+.session-folder-body > .session-date-group-header { margin: 7px 4px 2px 6px; min-height: 20px; }
+.session-folder-body > .session-date-group-header:first-child { margin-top: 3px; }
+.session-date-group-count { margin-left: auto; color: var(--text-dimmer); font-size: 9.5px; font-variant-numeric: tabular-nums; }
+.session-date-group-header .session-group-clear-btn { margin-left: 5px; height: 18px; padding-inline: 7px; }
+.session-date-group-header .session-group-clear-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.session-date-group-header.is-mobile { min-height: 44px; margin-top: 4px; font-size: 11px; }
+.session-date-group-header.is-mobile .session-group-clear-btn { min-width: 44px; min-height: 44px; font-size: 11px; }
 
 .session-folder-unit { position: relative; border-radius: 8px; }
 .session-folder-unit.dragging, .session-folder-header.dragging { opacity: 0.45; }
@@ -376,8 +383,20 @@
   .session-folder-new-btn { height: 34px; min-width: 44px; }
   .session-create-row.is-mobile .session-create-picker, .session-create-row.is-mobile .session-create-icon-btn, .session-create-row.is-mobile .session-create-menu-item { min-height: 40px; }
 }
+
+/* A successful local creation keeps its normal geometry and readability while
+   the restrained production Thinking sheen crosses the title twice. */
+.sidebar-creation-shimmer {
+  --creation-shimmer-base: var(--text-secondary);
+  background-image: linear-gradient(100deg, var(--creation-shimmer-base) 40%, var(--text-dimmer) 50%, var(--creation-shimmer-base) 60%);
+  background-repeat: no-repeat; background-size: 300% 100%; background-position: 100% 0;
+  background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
+  animation: thinking-summary-shimmer 2.8s ease-in-out 2 both;
+}
+.session-folder-label.sidebar-creation-shimmer { --creation-shimmer-base: var(--text-muted); }
 @media (prefers-reduced-motion: reduce) {
   .session-folder-new-btn, .session-folder-new-label { transition: none; }
   .session-folder-new-btn.is-label-changing .session-folder-new-label-text,
   .session-folder-new-btn.is-label-changing .session-folder-new-label-previous { animation: none; }
+  .sidebar-creation-shimmer { animation: none; background: none; color: inherit; -webkit-text-fill-color: currentColor; }
 }

package/lib/public/index.html

@@ -137,7 +137,16 @@
         </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" type="button" title="Projects" aria-label="Projects"><i data-lucide="folder" aria-hidden="true"></i><span>Projects</span></button>
+          <button id="home-close-control" class="home-close-control" type="button" title="Return to project" aria-label="Return to project"><i data-lucide="folder" aria-hidden="true"></i><span>Project</span></button>
+          <section id="home-project-empty" class="home-project-empty" aria-labelledby="home-project-empty-title" hidden>
+            <div class="home-project-empty-content">
+              <span class="home-project-empty-icon" aria-hidden="true"><i data-lucide="folder-plus"></i></span>
+              <p class="home-project-empty-eyebrow">PROJECT WORKSPACE</p>
+              <h1 id="home-project-empty-title" tabindex="-1">Start a new project</h1>
+              <p id="home-project-empty-status" class="home-project-empty-status" role="status">Create an empty project, then continue in its workspace.</p>
+              <button id="home-project-empty-create" type="button">Start a new project</button>
+            </div>
+          </section>
           <div id="home-conversation-region" class="home-conversation-region">
             <div id="home-mate-chat" class="home-mate-chat">
               <div class="home-mate-chat-stage">

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

@@ -3,8 +3,8 @@
 import { showProjectsHub, hideProjectsHub } from './projects-hub.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { getCachedProjects, switchProject } from './app-projects.js';
-import { chooseProjectActivationTarget } from './project-activation.js';
+import { getCachedProjects, openAddProjectModal, switchProject } from './app-projects.js';
+import { chooseProjectActivationTarget, homeProjectCreationState } from './project-activation.js';
 import { mateAvatarUrl } from './avatar.js';
 import { exitDmMode } from './app-dm.js';
 import { closeHomeDock, initHomeDock, renderDock, requestHomeDockPreference } from './home-dock.js';
@@ -22,6 +22,7 @@ import { disposeHomeSessionActions } from './home-session-actions.js';
 import { initHomeDebatesArchive, restoreHomeDebatesArchive } from './home-debates-archive.js';
 import { isHomeDebatesSurface } from './home-sub-surface.js';
 import { HOME_CAPSULE_CREATION_EVENT } from './home-capsule-creation-intent.js';
+import { bindHomeProjectEmptyDismissal, setHomeProjectEmptyCoverage } from './home-project-empty-access.js';
 
 var homeHub = null;
 var homeHubVisible = false;
@@ -44,6 +45,13 @@ function syncHomeCloseControl() {
   var close = document.getElementById("home-close-control");
   if (!close) return;
   close.classList.remove("hidden");
+  var loaded = store.get('projectListLoaded') === true;
+  var slug = loaded ? getHomeReturnSlug() : null;
+  var label = close.querySelector("span");
+  close.disabled = !loaded;
+  close.title = !loaded ? "Loading projects" : (slug ? "Return to project" : "Project options");
+  close.setAttribute("aria-label", close.title);
+  if (label) label.textContent = loaded ? "Project" : "Loading…";
 }
 
 function getHomeReturnSlug() {
@@ -53,6 +61,34 @@ function getHomeReturnSlug() {
   );
 }
 
+function syncHomeProjectEmptyState() {
+  var empty = document.getElementById("home-project-empty");
+  if (!empty) return;
+  var requested = store.get('homeProjectEmptyVisible') === true;
+  var loaded = store.get('projectListLoaded') === true;
+  var returnSlug = loaded ? getHomeReturnSlug() : null;
+  var visible = homeHubVisible && requested && loaded && !returnSlug;
+  setHomeProjectEmptyCoverage(document, visible);
+  empty.hidden = !visible;
+  if (requested && loaded && returnSlug) store.set({ homeProjectEmptyVisible: false });
+  if (!visible) return;
+  var availability = homeProjectCreationState(store.snap());
+  var action = document.getElementById("home-project-empty-create");
+  var status = document.getElementById("home-project-empty-status");
+  action.disabled = !availability.enabled;
+  if (status) status.textContent = availability.message;
+}
+
+function dismissHomeProjectEmpty() {
+  if (store.get('homeProjectEmptyVisible')) store.set({ homeProjectEmptyVisible: false });
+}
+
+function openHomeProjectCreation() {
+  var availability = homeProjectCreationState(store.snap());
+  if (!availability.enabled || getHomeReturnSlug()) return;
+  openAddProjectModal("create");
+}
+
 function getVisibleMates() {
   var mates = (store.get('cachedMatesList') || []).filter(function (mate) {
     return !!mate && !mate.archived;
@@ -100,6 +136,7 @@ function isMateBusy(mate, projectStatus, mentionActive) {
 }
 
 function selectHomeMate(mateId) {
+  if (store.get('homeProjectEmptyVisible')) store.set({ homeProjectEmptyVisible: false });
   if (mateId !== store.get('homeChatMateId') || isHomeDebatesSurface()) openHomeChat(mateId);
   closeHomeSidebarAfterSelection();
 }
@@ -246,14 +283,20 @@ export function initHomeHub() {
   initHomeDock();
   initHomeDebatesArchive();
   document.getElementById("home-mate-list").addEventListener("keydown", handleMateListKeydown);
-  document.getElementById("home-close-control").addEventListener("click", function () { showProjectsHub(); });
+  bindHomeProjectEmptyDismissal(document.getElementById("home-sidebar"), dismissHomeProjectEmpty);
+  document.getElementById("home-close-control").addEventListener("click", minimizeHomeHub);
+  document.getElementById("home-project-empty-create").addEventListener("click", openHomeProjectCreation);
   document.getElementById("home-nav-projects").addEventListener("click", function () { showProjectsHub(); });
   window.addEventListener("clay:home-debate", function () { hideHomeHub(); });
   document.addEventListener("visibilitychange", syncHomePresentation);
 
   store.subscribe(function (state, prev) {
     if (state.connected !== prev.connected && state.connected && homeHubVisible) syncHomePresentation();
-    if (state.currentSlug !== prev.currentSlug) syncHomeCloseControl();
+    if (state.currentSlug !== prev.currentSlug || state.homeSurfaceProjectSlug !== prev.homeSurfaceProjectSlug ||
+        state.projectListLoaded !== prev.projectListLoaded || state.projectsHubList !== prev.projectsHubList) syncHomeCloseControl();
+    if (state.homeProjectEmptyVisible !== prev.homeProjectEmptyVisible || state.projectListLoaded !== prev.projectListLoaded ||
+        state.projectsHubList !== prev.projectsHubList || state.projectsAccessLoaded !== prev.projectsAccessLoaded ||
+        state.permissions !== prev.permissions || state.connected !== prev.connected) syncHomeProjectEmptyState();
     if (state.homeChatMateId !== prev.homeChatMateId || state.cachedMatesList !== prev.cachedMatesList) renderHomeMateSwitcher();
     if (state.homeSidebarCollapsed !== prev.homeSidebarCollapsed && !state.homeSidebarCollapsed) {
       requestAnimationFrame(renderHomeMateSwitcher);
@@ -352,7 +395,7 @@ export function updateHomeIconBadge() {
 
 export function showHomeHub(fromHistory) {
   hideProjectsHub();
-  store.set({ pendingHomeProjectSlug: null });
+  store.set({ pendingHomeProjectSlug: null, homeProjectEmptyVisible: false });
   if (store.get('dmMode')) exitDmMode();
   var activeMateId = store.get('homeChatMateId');
   var resume = homeHubSuspended || homeHubVisible;
@@ -363,6 +406,7 @@ export function showHomeHub(fromHistory) {
   rememberHomePrimarySurface("home");
   syncHomePresentation();
   syncHomeCloseControl();
+  syncHomeProjectEmptyState();
   renderHomeMateSwitcher();
   if (activeMateId && !resume && !isHomeDebatesSurface()) openHomeChat(activeMateId);
   if (isHomeDebatesSurface()) restoreHomeDebatesArchive();
@@ -392,6 +436,7 @@ export function hideHomeHub() {
   disposeHomeSessionActions();
   homeHubVisible = false;
   homeHubSuspended = true;
+  if (store.get('homeProjectEmptyVisible')) store.set({ homeProjectEmptyVisible: false });
   hideHomeShell();
   homeHub.classList.add("hidden");
   syncHomePresentation();
@@ -402,9 +447,17 @@ export function hideHomeHub() {
 }
 
 export function minimizeHomeHub() {
-  var slug = getHomeReturnSlug();
   if (!homeHubVisible) return;
-  if (!slug) { showProjectsHub(); return; }
+  if (store.get('projectListLoaded') !== true) return;
+  var slug = getHomeReturnSlug();
+  if (!slug) {
+    store.set({ homeProjectEmptyVisible: true });
+    syncHomeProjectEmptyState();
+    var title = document.getElementById("home-project-empty-title");
+    if (title) title.focus({ preventScroll: true });
+    return;
+  }
+  if (store.get('homeProjectEmptyVisible')) store.set({ homeProjectEmptyVisible: false });
   switchProject(slug);
   var projectInput = document.getElementById("input");
   if (projectInput && !projectInput.disabled) projectInput.focus({ preventScroll: true });

package/lib/public/modules/home-project-empty-access.js

@@ -0,0 +1,44 @@
+// Accessibility boundary for the Home no-project overlay.
+
+var coveredIds = ["home-conversation-region", "home-dock-backdrop", "home-dock-divider", "home-tool-workbench"];
+var priorStates = new WeakMap();
+
+function remember(element) {
+  if (priorStates.has(element)) return;
+  priorStates.set(element, {
+    inert: element.inert === true,
+    inertAttribute: element.hasAttribute("inert"),
+    ariaHidden: element.getAttribute("aria-hidden"),
+  });
+}
+
+function restore(element) {
+  var prior = priorStates.get(element);
+  if (!prior) return;
+  element.inert = prior.inert;
+  if (prior.inertAttribute) element.setAttribute("inert", "");
+  else element.removeAttribute("inert");
+  if (prior.ariaHidden === null) element.removeAttribute("aria-hidden");
+  else element.setAttribute("aria-hidden", prior.ariaHidden);
+  priorStates.delete(element);
+}
+
+export function setHomeProjectEmptyCoverage(doc, covered) {
+  for (var i = 0; i < coveredIds.length; i++) {
+    var element = doc.getElementById(coveredIds[i]);
+    if (!element) continue;
+    if (!covered) { restore(element); continue; }
+    remember(element);
+    element.inert = true;
+    element.setAttribute("inert", "");
+    element.setAttribute("aria-hidden", "true");
+  }
+}
+
+export function bindHomeProjectEmptyDismissal(sidebar, dismiss) {
+  sidebar.addEventListener("click", function (event) {
+    var control = event.target.closest("#home-sidebar-new, #home-sidebar-all, #home-sidebar-debate, #home-tools-btn, .home-mate-list-row, .home-sidebar-recent-list button");
+    if (!control || control.disabled) return;
+    dismiss();
+  }, true);
+}

package/lib/public/modules/project-activation.js

@@ -19,6 +19,17 @@ export function chooseProjectActivationTarget(projects, candidates) {
   return null;
 }
 
+export function homeProjectCreationState(state) {
+  var current = state || {};
+  if (current.projectListLoaded !== true) return { ready: false, enabled: false, message: "Loading projects…" };
+  if (current.projectsAccessLoaded !== true) return { ready: false, enabled: false, message: "Checking project access…" };
+  if (current.permissions && current.permissions.createProject !== true) {
+    return { ready: true, enabled: false, message: "Ask an administrator to create or share a project with you." };
+  }
+  if (current.connected !== true) return { ready: true, enabled: false, message: "Reconnect to start a project." };
+  return { ready: true, enabled: true, message: "Create an empty project, then continue in its workspace." };
+}
+
 export function isProjectActivationPending(state, slug, socket) {
   var target = projectWsPath(slug);
   return !!target

package/lib/public/modules/session-create.js

@@ -17,6 +17,7 @@ import { getWs } from './ws-ref.js';
 import { showToast } from './utils.js';
 import { resolvePreferredVendor } from './default-vendor.js';
 import { sendFolderOp, currentFolderState } from './session-folders.js';
+import { queueSidebarCreationEffect } from './sidebar-creation-effect.js';
 
 // Ids are unique without any module-level counter.
 function nextId(prefix) {
@@ -207,6 +208,7 @@ export function handleNewSessionResult(msg) {
   var destination = msg.folderPlaced === false ? "unfiled" : (msg.folderId || form.folderId || "unfiled");
   if (msg.folderPlaced === false) showToast("The session was created but could not be filed in that folder. It is in Unfiled.", "warn");
   store.set({ sessionCreate: null });
+  queueSidebarCreationEffect('session', msg.requestId, msg.sessionId, destination);
   revealCreatedSession(destination, msg.sessionId);
   return true;
 }

package/lib/public/modules/session-date-group-header.js

@@ -0,0 +1,57 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showConfirm } from './app-misc.js';
+import { describeGroupDelete } from './session-delete-scope.js';
+import { showToast } from './utils.js';
+
+function confirmClear(label, ids, sessions) {
+  if (!ids.length) return;
+  var requestedIds = ids.slice();
+  var originSlug = store.get('currentSlug');
+  var originWs = getWs();
+  showConfirm(describeGroupDelete(label, requestedIds, sessions).message, function () {
+    var ws = getWs();
+    var permissions = store.get('permissions');
+    var valid = store.get('currentSlug') === originSlug && ws === originWs && ws && ws.readyState === 1 &&
+      store.get('connected') && (!permissions || permissions.sessionDelete !== false);
+    if (!valid) {
+      showToast("Clear cancelled because the project, connection, or delete permission changed.", "warn");
+      return;
+    }
+    ws.send(JSON.stringify({ type: "bulk_delete_sessions", sessionIds: requestedIds }));
+  });
+}
+
+export function renderDateGroupHeader(dateLabel, folderLabel, ids, sessions, surface, searching) {
+  var header = document.createElement("div");
+  header.className = "session-group-header session-date-group-header" + (surface === "mobile" ? " is-mobile" : "");
+  header.setAttribute("role", "heading");
+  header.setAttribute("aria-level", "3");
+
+  var label = document.createElement("span");
+  label.className = "session-group-header-label";
+  label.textContent = dateLabel;
+  header.appendChild(label);
+
+  var count = document.createElement("span");
+  count.className = "session-date-group-count";
+  count.textContent = String(ids.length);
+  count.setAttribute("aria-label", ids.length + (ids.length === 1 ? " session" : " sessions"));
+  header.appendChild(count);
+
+  if ((!store.get('permissions') || store.get('permissions').sessionDelete !== false) && ids.length) {
+    var clear = document.createElement("button");
+    clear.type = "button";
+    clear.className = "session-group-clear-btn";
+    clear.textContent = "Clear";
+    clear.setAttribute("aria-label", "Clear " + ids.length + " " + (searching ? "matching " : "") + (ids.length === 1 ? "session" : "sessions") + " from " + dateLabel + " in " + folderLabel);
+    clear.addEventListener("click", function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      var scope = dateLabel + " in " + folderLabel + (searching ? " (matching search)" : "");
+      confirmClear(scope, ids, sessions);
+    });
+    header.appendChild(clear);
+  }
+  return header;
+}

package/lib/public/modules/session-date-groups.js

@@ -0,0 +1,84 @@
+// Pure date subsection projection for units inside a real folder. Calendar
+// boundaries are local-time Date constructors, so midnight and week/month
+// transitions remain correct across DST changes.
+
+var LABELS = ["Today", "Yesterday", "This week", "Earlier this month", "Older"];
+
+export function unitTimestamp(unit, sort) {
+  var value = sort === "created" ? unit.createdAt : unit.lastActivity;
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  var parsed = value ? new Date(value).getTime() : 0;
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+export function localDateBoundaries(nowValue) {
+  var now = nowValue instanceof Date ? nowValue : new Date(nowValue === undefined ? Date.now() : nowValue);
+  var year = now.getFullYear();
+  var month = now.getMonth();
+  var day = now.getDate();
+  var today = new Date(year, month, day).getTime();
+  var yesterday = new Date(year, month, day - 1).getTime();
+  var mondayOffset = (now.getDay() + 6) % 7;
+  var week = new Date(year, month, day - mondayOffset).getTime();
+  var monthStart = new Date(year, month, 1).getTime();
+  return { today: today, yesterday: yesterday, week: week, month: monthStart };
+}
+
+export function dateBucket(timestamp, boundaries) {
+  if (timestamp >= boundaries.today) return "Today";
+  if (timestamp >= boundaries.yesterday) return "Yesterday";
+  if (timestamp >= boundaries.week) return "This week";
+  if (timestamp >= boundaries.month) return "Earlier this month";
+  return "Older";
+}
+
+export function groupUnitsByDate(units, sort, direction, nowValue) {
+  if (sort !== "activity" && sort !== "created") return null;
+  var source = Array.isArray(units) ? units : [];
+  var decorated = source.map(function (unit, index) {
+    return { unit: unit, index: index, timestamp: unitTimestamp(unit, sort) };
+  });
+  var sign = direction === "asc" ? 1 : -1;
+  decorated.sort(function (a, b) {
+    var delta = (a.timestamp - b.timestamp) * sign;
+    return delta || a.index - b.index;
+  });
+  var boundaries = localDateBoundaries(nowValue);
+  var byLabel = {};
+  for (var i = 0; i < decorated.length; i++) {
+    var label = dateBucket(decorated[i].timestamp, boundaries);
+    if (!byLabel[label]) byLabel[label] = [];
+    byLabel[label].push(decorated[i].unit);
+  }
+  var order = direction === "asc" ? LABELS.slice().reverse() : LABELS;
+  var groups = [];
+  for (var j = 0; j < order.length; j++) {
+    if (byLabel[order[j]]) groups.push({ label: order[j], units: byLabel[order[j]] });
+  }
+  return groups;
+}
+
+export function unitRootSessionIds(unit) {
+  var item = unit && unit.item;
+  if (!item) return [];
+  if (item.type === "session" && item.data && typeof item.data.id === "number") return [item.data.id];
+  if (item.type === "driver-hierarchy" && item.root && item.root.driver && typeof item.root.driver.id === "number") return [item.root.driver.id];
+  if (item.type === "orphan-workers" && Array.isArray(item.workers)) return item.workers.map(function (session) { return session.id; });
+  if (item.type === "split-group" && Array.isArray(item.members)) return item.members.map(function (session) { return session.id; });
+  if (item.type === "loop" && Array.isArray(item.children)) return item.children.map(function (session) { return session.id; });
+  return [];
+}
+
+export function groupRootSessionIds(units) {
+  var result = [];
+  var seen = {};
+  for (var i = 0; i < units.length; i++) {
+    var ids = unitRootSessionIds(units[i]);
+    for (var j = 0; j < ids.length; j++) {
+      if (typeof ids[j] !== "number" || seen[ids[j]]) continue;
+      seen[ids[j]] = true;
+      result.push(ids[j]);
+    }
+  }
+  return result;
+}

package/lib/public/modules/session-folder-delete.js

@@ -11,6 +11,7 @@ import { getWs } from './ws-ref.js';
 import { escapeHtml } from './utils.js';
 import { currentFolderState } from './session-folders.js';
 import { createModal, button, closeFolderModal } from './session-folder-dialogs.js';
+import { spawnDustParticles, clearDustParticles } from './sidebar.js';
 
 // The dialog's elements are found through the modal recorded in the store, so
 // nothing here outlives the dialog: closing it drops the store state and the
@@ -52,6 +53,27 @@ function phrase(count, noun) {
   return count + " " + noun + (count === 1 ? "" : "s");
 }
 
+function removalOrigin(folderId) {
+  var sections = document.querySelectorAll('.session-folder[data-folder-id]');
+  for (var i = 0; i < sections.length; i++) {
+    if (sections[i].dataset.folderId !== String(folderId) || sections[i].classList.contains('session-folder-favorites') || sections[i].classList.contains('session-folder-unfiled')) continue;
+    var header = sections[i].querySelector('.session-folder-header');
+    if (!header || !header.getClientRects().length) continue;
+    var icon = header.querySelector('.session-folder-icon') || header;
+    var rect = icon.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2, slug: store.get('currentSlug') };
+  }
+  return null;
+}
+
+function playRemoval(origin) {
+  if (!origin || origin.slug !== store.get('currentSlug')) return;
+  spawnDustParticles(origin.x, origin.y, {
+    count: 12, minDistance: 18, distanceRange: 34, upwardBias: 10,
+    minDuration: 480, durationRange: 340, containerClass: "folder-delete-dust", maxContainers: 3,
+  });
+}
+
 // Other folders a move can target: every custom folder except the source, and
 // Unfiled is the first choice, not a destination here, and Favorites is a tag,
 // never a destination.
@@ -136,7 +158,7 @@ function submit() {
   var message = { type: "session_folders_delete", folderId: current.folderId, mode: current.preview.sessionCount === 0 ? "unfiled" : current.mode, token: current.preview.token, requestId: requestId };
   if (message.mode === "move") message.destinationId = current.destinationId;
   if (message.mode === "delete") message.confirmDelete = true;
-  patch({ phase: "pending", requestId: requestId, error: "" });
+  patch({ phase: "pending", requestId: requestId, error: "", removalOrigin: removalOrigin(current.folderId) });
   if (!send(message)) patch({ phase: "ready", requestId: current.requestId, error: "Not connected. Try again." });
 }
 
@@ -295,7 +317,10 @@ export function handleFolderDeleteState(msg) {
     patch({ phase: current.preview ? "ready" : "error", error: msg.error, confirmDelete: false });
     return true;
   }
-  if (msg.folderDeleted === current.folderId) closeFolderModal();
+  if (msg.folderDeleted === current.folderId) {
+    playRemoval(current.removalOrigin);
+    closeFolderModal();
+  }
   return true;
 }
 
@@ -304,6 +329,7 @@ store.subscribe(function (next, previous) {
   // Retry depends on the connection, so a change in it repaints the dialog.
   else if (next.connected !== previous.connected && next.sessionFolderDelete) paint();
   var current = next.sessionFolderDelete;
+  if (next.currentSlug !== previous.currentSlug || next.dmMode !== previous.dmMode) clearDustParticles("folder-delete-dust");
   if (!current || !previous.connected || next.connected) return;
   if (current.phase === "pending") {
     patch({ phase: "ready", error: "Connection lost. Check the folder before trying again." });

package/lib/public/modules/session-folders.js

@@ -8,6 +8,7 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { showToast } from './utils.js';
 import { defaultFolderState } from './session-folder-layout.js';
+import { queueSidebarCreationEffect } from './sidebar-creation-effect.js';
 
 export function handleSessionFoldersState(msg) {
   var slug = store.get('currentSlug');
@@ -26,6 +27,7 @@ export function handleSessionFoldersState(msg) {
     return;
   }
   store.set({ sessionFolderCreate: null });
+  if (msg.folderId) queueSidebarCreationEffect('folder', msg.requestId, msg.folderId, null);
   if (create.sessionId !== null && msg.folderId) sendFolderOp({ op: "place_session", sessionId: create.sessionId, folderId: msg.folderId });
 }
 

package/lib/public/modules/sidebar-creation-effect.js

@@ -0,0 +1,130 @@
+// A small acknowledgement-only title shimmer for locally created sidebar
+// folders and sessions. The queue lives in the store so list rendering and the
+// acknowledgement may arrive in either order without replaying the effect.
+
+import { store } from './store.js';
+
+var MAX_EFFECTS = 4;
+var MAX_ACTIVE_SHIMMERS = 4;
+var MAX_ATTEMPTS = 40;
+var RETRY_MS = 50;
+var SHIMMER_MS = 5700;
+
+function prefersReducedMotion() {
+  return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function effectKey(effect) {
+  return effect.kind + ':' + effect.requestId;
+}
+
+function visibleElement(nodes) {
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].getClientRects().length > 0) return nodes[i];
+  }
+  return null;
+}
+
+function folderTarget(effect) {
+  var sections = document.querySelectorAll('.session-folder[data-folder-id]');
+  var matches = [];
+  for (var i = 0; i < sections.length; i++) {
+    if (sections[i].dataset.folderId === String(effect.targetId) && !sections[i].classList.contains('session-folder-favorites')) matches.push(sections[i]);
+  }
+  var section = visibleElement(matches);
+  return section ? section.querySelector('.session-folder-label') : null;
+}
+
+function sessionTarget(effect) {
+  var sections = document.querySelectorAll('.session-folder[data-folder-id]');
+  var matches = [];
+  for (var i = 0; i < sections.length; i++) {
+    if (sections[i].dataset.folderId !== String(effect.folderId) || sections[i].classList.contains('session-folder-favorites')) continue;
+    var units = sections[i].querySelectorAll('.session-folder-unit[data-unit-key]');
+    for (var j = 0; j < units.length; j++) {
+      if (units[j].dataset.unitKey !== String(effect.targetId)) continue;
+      var title = units[j].querySelector('.session-item-title, .mobile-session-title');
+      if (title) matches.push(title);
+    }
+  }
+  return visibleElement(matches);
+}
+
+function findTarget(effect) {
+  return effect.kind === 'folder' ? folderTarget(effect) : sessionTarget(effect);
+}
+
+function removeEffectDom() {
+  var targets = document.querySelectorAll('.sidebar-creation-shimmer');
+  for (var i = 0; i < targets.length; i++) {
+    targets[i].classList.remove('sidebar-creation-shimmer');
+    delete targets[i].dataset.creationEffect;
+  }
+}
+
+function playEffect(effect, target) {
+  if (!target.isConnected || prefersReducedMotion()) return;
+  var active = document.querySelectorAll('.sidebar-creation-shimmer');
+  for (var i = 0; i <= active.length - MAX_ACTIVE_SHIMMERS; i++) {
+    active[i].classList.remove('sidebar-creation-shimmer');
+    delete active[i].dataset.creationEffect;
+  }
+  target.classList.remove('sidebar-creation-shimmer');
+  void target.offsetWidth;
+  target.dataset.creationEffect = effectKey(effect);
+  target.classList.add('sidebar-creation-shimmer');
+  setTimeout(function () {
+    if (target.dataset.creationEffect !== effectKey(effect)) return;
+    target.classList.remove('sidebar-creation-shimmer');
+    delete target.dataset.creationEffect;
+  }, SHIMMER_MS);
+}
+
+export function clearSidebarCreationEffects() {
+  if ((store.get('sidebarCreationEffects') || []).length) store.set({ sidebarCreationEffects: [] });
+  removeEffectDom();
+}
+
+export function flushSidebarCreationEffects() {
+  var queue = store.get('sidebarCreationEffects') || [];
+  if (!queue.length) return;
+  if (prefersReducedMotion()) {
+    clearSidebarCreationEffects();
+    return;
+  }
+  var slug = store.get('currentSlug');
+  var pending = [];
+  var ready = [];
+  for (var i = 0; i < queue.length; i++) {
+    var effect = queue[i];
+    if (effect.slug !== slug) continue;
+    var target = findTarget(effect);
+    if (target) {
+      ready.push({ effect: effect, target: target });
+    } else if (effect.attempts < MAX_ATTEMPTS) {
+      pending.push(Object.assign({}, effect, { attempts: effect.attempts + 1 }));
+    }
+  }
+  // Consume before touching the DOM. A render or duplicate acknowledgement can
+  // therefore never play an already resolved effect a second time.
+  store.set({ sidebarCreationEffects: pending });
+  for (var j = 0; j < ready.length; j++) playEffect(ready[j].effect, ready[j].target);
+  if (pending.length) setTimeout(flushSidebarCreationEffects, RETRY_MS);
+}
+
+export function queueSidebarCreationEffect(kind, requestId, targetId, folderId) {
+  if (!requestId || targetId === undefined || targetId === null || prefersReducedMotion()) return false;
+  var queue = (store.get('sidebarCreationEffects') || []).slice();
+  var next = { kind: kind, requestId: requestId, targetId: targetId, folderId: folderId || null, slug: store.get('currentSlug'), attempts: 0 };
+  var key = effectKey(next);
+  for (var i = 0; i < queue.length; i++) if (effectKey(queue[i]) === key) return false;
+  queue.push(next);
+  if (queue.length > MAX_EFFECTS) queue = queue.slice(queue.length - MAX_EFFECTS);
+  store.set({ sidebarCreationEffects: queue });
+  setTimeout(flushSidebarCreationEffects, 0);
+  return true;
+}
+
+store.subscribe(function (state, previous) {
+  if (state.currentSlug !== previous.currentSlug || state.dmMode !== previous.dmMode || (previous.connected && !state.connected)) clearSidebarCreationEffects();
+});

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

@@ -744,6 +744,7 @@ export function renderMobileSessionsInto(container) {
   var folderCtx = {
     surface: "mobile",
     searching: matchIds !== null,
+    sessions: getCachedSessions(),
     renderItem: function (it) {
       if (it.type === "loop") return createMobileLoopGroup(it.loopId, it.children, it.groupKey);
       if (it.type === "driver-hierarchy") return renderMobileDriverHierarchy(it.root, createMobileSessionItem, refreshMobileChatSheet);

package/lib/public/modules/sidebar-session-folders-ui.js

@@ -20,6 +20,8 @@ import { openFolderDelete } from './session-folder-delete.js';
 import { openSessionCreate } from './session-create.js';
 import { renderNewSessionButton, renderCreateRow } from './session-create-form.js';
 import { restoreFolderCollapse, toggleFolderCollapse } from './session-folder-collapse.js';
+import { groupUnitsByDate, groupRootSessionIds } from './session-date-groups.js';
+import { renderDateGroupHeader } from './session-date-group-header.js';
 
 // Mutable UI state (open menu, drag in flight, the layout each surface last
 // rendered) lives in the store; this module only owns the functions.
@@ -65,7 +67,7 @@ export function unitsFromItems(items) {
       key: data && typeof data.id === "number" ? data.id : null,
       title: data ? data.title : (item.type === "split-group" ? (item.group && item.group.name) : (item.type === "loop" ? item.loopId : "")),
       createdAt: data ? data.createdAt || 0 : 0,
-      lastActivity: item.lastActivity || 0,
+      lastActivity: data ? (data.lastActivity || 0) : (item.lastActivity || 0),
       item: item,
     });
   }
@@ -355,7 +357,17 @@ function renderSection(section, ctx, kind) {
       : (kind === "folder" ? "Empty folder" : "Nothing unfiled");
     body.appendChild(empty);
   }
-  for (var i = 0; i < section.units.length; i++) body.appendChild(renderUnit(section.units[i], section.id, ctx));
+  var view = currentFolderState().view;
+  var dateGroups = isFavorites ? null : groupUnitsByDate(section.units, view.sort, view.direction);
+  if (dateGroups) {
+    for (var g = 0; g < dateGroups.length; g++) {
+      var ids = groupRootSessionIds(dateGroups[g].units);
+      body.appendChild(renderDateGroupHeader(dateGroups[g].label, section.label, ids, ctx.sessions || [], surface, !!ctx.searching));
+      for (var gu = 0; gu < dateGroups[g].units.length; gu++) body.appendChild(renderUnit(dateGroups[g].units[gu], section.id, ctx));
+    }
+  } else {
+    for (var i = 0; i < section.units.length; i++) body.appendChild(renderUnit(section.units[i], section.id, ctx));
+  }
   root.appendChild(body);
   restoreFolderCollapse(root, body, toggle, surface, section.id, section.collapsed, !!ctx.searching);
   if (surface === "desktop") wireContainerDrop(root, section.id);

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

@@ -879,7 +879,7 @@ function renderSessionItem(s, options) {
   if (store.get('isMultiUserMode') && s.sessionVisibility === "shared") {
     textHtml += '<span class="session-shared-icon" title="Shared session" aria-label="Shared session">' + iconHtml("users") + '</span>';
   }
-  textHtml += highlightMatch(s.title || "New Session", getListSearchQuery());
+  textHtml += '<span class="session-item-title">' + highlightMatch(s.title || "New Session", getListSearchQuery()) + '</span>';
   textSpan.innerHTML = textHtml;
   el.appendChild(textSpan);
   appendGithubWork(el, s, textSpan);
@@ -1118,6 +1118,7 @@ export function renderSessionList(sessions) {
   var folderCtx = {
     surface: "desktop",
     searching: matchIds !== null,
+    sessions: cachedSessions,
     renderItem: function (it) {
       if (it.type === "loop") return renderLoopGroup(it.loopId, it.children, it.groupKey) || document.createElement("div");
       if (it.type === "split-group") return renderSplitGroupItem(it.group, it.members);

package/lib/public/modules/sidebar.js

@@ -460,10 +460,24 @@ export function initSidebar(_ctx) {
 
 }
 
-export function spawnDustParticles(cx, cy) {
+export function clearDustParticles(containerClass) {
+  var selector = ".dust-particle-container" + (containerClass ? "." + containerClass : "");
+  var containers = document.querySelectorAll(selector);
+  for (var i = 0; i < containers.length; i++) containers[i].remove();
+}
+
+export function spawnDustParticles(cx, cy, options) {
+  var opts = options || {};
+  if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return null;
   var colors = ["#8B7355", "#A0522D", "#D2B48C", "#C4A882", "#9E9E9E", "#B8860B", "#BC8F8F"];
-  var count = 24;
+  var count = Math.max(1, Math.min(opts.count || 24, 24));
+  var containerClass = opts.containerClass || "";
+  var maxContainers = Math.max(1, Math.min(opts.maxContainers || 6, 6));
+  var active = document.querySelectorAll(".dust-particle-container" + (containerClass ? "." + containerClass : ""));
+  for (var ai = 0; ai <= active.length - maxContainers; ai++) active[ai].remove();
   var container = document.createElement("div");
+  container.className = "dust-particle-container" + (containerClass ? " " + containerClass : "");
+  container.setAttribute("aria-hidden", "true");
   container.style.position = "fixed";
   container.style.top = "0";
   container.style.left = "0";
@@ -478,10 +492,10 @@ export function spawnDustParticles(cx, cy) {
     dot.className = "dust-particle";
     var size = 3 + Math.random() * 5;
     var angle = Math.random() * Math.PI * 2;
-    var dist = 30 + Math.random() * 60;
+    var dist = (opts.minDistance || 30) + Math.random() * (opts.distanceRange || 60);
     var dx = Math.cos(angle) * dist;
-    var dy = Math.sin(angle) * dist - 20; // bias upward
-    var duration = 600 + Math.random() * 500;
+    var dy = Math.sin(angle) * dist - (opts.upwardBias === undefined ? 20 : opts.upwardBias);
+    var duration = (opts.minDuration || 600) + Math.random() * (opts.durationRange || 500);
 
     dot.style.width = size + "px";
     dot.style.height = size + "px";
@@ -496,4 +510,5 @@ export function spawnDustParticles(cx, cy) {
   }
 
   setTimeout(function () { container.remove(); }, 1200);
+  return container;
 }

package/package.json

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