feat: add sidebar project collapse and search

public/app.js

@@ -7,6 +7,7 @@
   const RENDER_DEBOUNCE = 100;
   const COMPOSER_SUGGESTION_DEBOUNCE = 120;
   const DIVIDER_TIME_STORAGE_KEY = 'cc-web-show-divider-time';
+  const PROJECT_COLLAPSE_STORAGE_KEY = 'cc-web-collapsed-projects';
 
   const SLASH_COMMANDS = [
     { cmd: '/clear', desc: '清除当前会话' },
@@ -166,6 +167,15 @@
   let noteMode = false;
   let noteDraftSeq = 0;
   let isReloadingMcp = false;
+  let sessionSearchQuery = '';
+  const collapsedProjectKeys = (() => {
+    try {
+      const parsed = JSON.parse(localStorage.getItem(PROJECT_COLLAPSE_STORAGE_KEY) || '[]');
+      return new Set(Array.isArray(parsed) ? parsed.filter(Boolean) : []);
+    } catch {
+      return new Set();
+    }
+  })();
   const pendingNotesByTarget = new Map();
   const userMessageIndex = new Map();
   const expandedOldSessionAgents = new Set();
@@ -190,6 +200,8 @@
   const newChatArrow = $('#new-chat-arrow');
   const newChatDropdown = $('#new-chat-dropdown');
   const importSessionBtn = $('#import-session-btn');
+  const sessionSearchInput = $('#session-search-input');
+  const sessionSearchClear = $('#session-search-clear');
   const sessionList = $('#session-list');
   const chatTitle = $('#chat-title');
   const chatSessionIdBtn = $('#chat-session-id-btn');
@@ -2272,6 +2284,61 @@
     return sessions.filter((s) => normalizeAgent(s.agent) === currentAgent);
   }
 
+  function normalizeSessionSearchQuery(query) {
+    return String(query || '').trim().toLowerCase();
+  }
+
+  function syncSessionSearchUi() {
+    if (!sessionSearchInput) return;
+    if (sessionSearchInput.value !== sessionSearchQuery) {
+      sessionSearchInput.value = sessionSearchQuery;
+    }
+    const hasQuery = !!normalizeSessionSearchQuery(sessionSearchQuery);
+    sessionSearchInput.classList.toggle('has-value', hasQuery);
+    if (sessionSearchClear) {
+      sessionSearchClear.hidden = !hasQuery;
+      sessionSearchClear.disabled = !hasQuery;
+    }
+  }
+
+  function getSessionSearchText(session) {
+    const cwd = getSessionEffectiveCwd(session);
+    return [
+      session?.title,
+      getSessionProjectName(session),
+      cwd,
+      session?.id,
+      shortSessionId(session?.id),
+    ].filter(Boolean).join('\n').toLowerCase();
+  }
+
+  function sessionMatchesSearch(session, normalizedQuery) {
+    if (!normalizedQuery) return true;
+    return getSessionSearchText(session).includes(normalizedQuery);
+  }
+
+  function getProjectCollapseKey(group) {
+    const rawKey = group?.cwd || group?.name || '';
+    return `${normalizeAgent(currentAgent)}:${rawKey}`;
+  }
+
+  function persistCollapsedProjectKeys() {
+    try {
+      localStorage.setItem(PROJECT_COLLAPSE_STORAGE_KEY, JSON.stringify([...collapsedProjectKeys]));
+    } catch {}
+  }
+
+  function setProjectCollapsed(groupKey, collapsed) {
+    if (!groupKey) return;
+    if (collapsed) {
+      collapsedProjectKeys.add(groupKey);
+    } else {
+      collapsedProjectKeys.delete(groupKey);
+    }
+    persistCollapsedProjectKeys();
+    renderSessionList();
+  }
+
   function getSessionCwdFromCache(sessionId) {
     if (!sessionId) return '';
     const cachedCwd = sessionCache.get(sessionId)?.snapshot?.cwd;
@@ -5361,17 +5428,32 @@
 
   function renderSessionList() {
     sessionList.innerHTML = '';
-    const visibleSessions = getVisibleSessions();
+    syncSessionSearchUi();
-    if (visibleSessions.length === 0) {
+    const allVisibleSessions = getVisibleSessions();
+    const normalizedSearchQuery = normalizeSessionSearchQuery(sessionSearchQuery);
+    const isSearchingSessions = !!normalizedSearchQuery;
+    const visibleSessions = isSearchingSessions
+      ? allVisibleSessions.filter((session) => sessionMatchesSearch(session, normalizedSearchQuery))
+      : allVisibleSessions;
+    if (allVisibleSessions.length === 0) {
       const empty = document.createElement('div');
       empty.className = 'session-list-empty';
       empty.textContent = `暂无 ${AGENT_LABELS[currentAgent]} 会话，点击“新会话”开始。`;
       sessionList.appendChild(empty);
       return;
     }
+    if (visibleSessions.length === 0) {
+      const empty = document.createElement('div');
+      empty.className = 'session-list-empty';
+      empty.textContent = '没有匹配的会话或项目。';
+      sessionList.appendChild(empty);
+      return;
+    }
 
     const { pinnedSessions, regularSessions } = splitPinnedSessions(visibleSessions);
-    const { visibleRegularSessions, hiddenOldSessions } = splitCollapsedOldSessions(regularSessions, pinnedSessions.length);
+    const { visibleRegularSessions, hiddenOldSessions } = isSearchingSessions
+      ? { visibleRegularSessions: regularSessions, hiddenOldSessions: [] }
+      : splitCollapsedOldSessions(regularSessions, pinnedSessions.length);
     if (pinnedSessions.length > 0) {
       const pinnedGroupEl = document.createElement('section');
       pinnedGroupEl.className = 'session-project-group session-pinned-group';
@@ -5391,15 +5473,24 @@
     }
 
     const { groups: projectGroups, ungroupedSessions } = groupSessionsByProject(visibleRegularSessions);
-    for (const group of projectGroups) {
+    projectGroups.forEach((group, groupIndex) => {
+      const groupKey = getProjectCollapseKey(group);
+      const isCollapsed = !isSearchingSessions && collapsedProjectKeys.has(groupKey);
+      const hasActiveSession = group.sessions.some((session) => session.id === currentSessionId);
+      const hasUnreadSession = group.sessions.some((session) => session.hasUnread);
+      const hasRunningSession = group.sessions.some((session) => session.isRunning);
+      const groupBodyId = `session-project-body-${groupIndex}`;
       const groupEl = document.createElement('section');
-      groupEl.className = 'session-project-group';
+      groupEl.className = `session-project-group${isCollapsed ? ' collapsed' : ''}${hasActiveSession ? ' has-active-session' : ''}${hasUnreadSession ? ' has-unread-session' : ''}${hasRunningSession ? ' has-running-session' : ''}`;
 
       const header = document.createElement('div');
       header.className = 'session-project-header';
       header.title = group.cwd || group.name;
       header.innerHTML = `
-        <span class="session-project-name">${escapeHtml(group.name)}</span>
+        <button class="session-project-toggle" type="button" aria-expanded="${isCollapsed ? 'false' : 'true'}" aria-controls="${groupBodyId}" title="${isCollapsed ? '展开项目' : '折叠项目'}">
+          <span class="session-project-chevron" aria-hidden="true">${isCollapsed ? '▸' : '▾'}</span>
+          <span class="session-project-name">${escapeHtml(group.name)}</span>
+        </button>
         <span class="session-project-header-actions">
           <span class="session-project-count">${group.sessions.length}</span>
           <button class="session-project-create" type="button" title="在此项目新建会话" aria-label="在此项目新建会话">+</button>
@@ -5407,9 +5498,18 @@
       `;
       groupEl.appendChild(header);
 
+      const groupBody = document.createElement('div');
+      groupBody.id = groupBodyId;
+      groupBody.className = 'session-project-sessions';
+      groupBody.hidden = isCollapsed;
       for (const s of group.sessions) {
-        groupEl.appendChild(createSessionListItem(s));
+        groupBody.appendChild(createSessionListItem(s));
       }
+      groupEl.appendChild(groupBody);
+
+      header.querySelector('.session-project-toggle').addEventListener('click', () => {
+        setProjectCollapsed(groupKey, !isCollapsed);
+      });
 
       header.querySelector('.session-project-create').addEventListener('click', (e) => {
         e.stopPropagation();
@@ -5417,7 +5517,7 @@
       });
 
       sessionList.appendChild(groupEl);
-    }
+    });
 
     for (const s of ungroupedSessions) {
       sessionList.appendChild(createSessionListItem(s));
@@ -6083,6 +6183,29 @@
     });
   }
 
+  if (sessionSearchInput) {
+    sessionSearchInput.addEventListener('input', () => {
+      sessionSearchQuery = sessionSearchInput.value;
+      renderSessionList();
+    });
+    sessionSearchInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && normalizeSessionSearchQuery(sessionSearchQuery)) {
+        e.stopPropagation();
+        sessionSearchQuery = '';
+        renderSessionList();
+        sessionSearchInput.focus();
+      }
+    });
+  }
+
+  if (sessionSearchClear) {
+    sessionSearchClear.addEventListener('click', () => {
+      sessionSearchQuery = '';
+      renderSessionList();
+      sessionSearchInput?.focus();
+    });
+  }
+
   // Split new-chat button
   newChatBtn.addEventListener('click', () => showNewSessionModal());
   newChatArrow.addEventListener('click', (e) => {

public/index.html

@@ -47,6 +47,10 @@
         <div id="new-chat-dropdown" class="new-chat-dropdown" hidden>
           <button id="import-session-btn">导入本地 CLI 会话</button>
         </div>
+        <div class="session-search">
+          <input id="session-search-input" class="session-search-input" type="search" placeholder="检索会话 / 项目" autocomplete="off" aria-label="检索会话或项目">
+          <button id="session-search-clear" class="session-search-clear" type="button" title="清空检索" aria-label="清空检索" hidden>×</button>
+        </div>
       </div>
       <div id="session-list" class="session-list"></div>
       <div class="sidebar-footer">

public/style.css

@@ -178,6 +178,26 @@ html[data-theme='coolvibe'] .attachment-tray-note {
   border-color: rgba(191, 220, 228, 0.96);
 }
 
+html[data-theme='coolvibe'] .session-search-input {
+  background: rgba(249, 253, 254, 0.86);
+  border-color: rgba(191, 220, 228, 0.96);
+}
+
+html[data-theme='coolvibe'] .session-search::before {
+  color: #6d8d95;
+}
+
+html[data-theme='coolvibe'] .session-search-input:focus {
+  border-color: rgba(8, 145, 178, 0.36);
+  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
+}
+
+html[data-theme='coolvibe'] .session-search-clear:hover,
+html[data-theme='coolvibe'] .session-search-clear:focus-visible {
+  background: rgba(8, 145, 178, 0.12);
+  color: #0a6d83;
+}
+
 html[data-theme='coolvibe'] .session-project-header {
   background: linear-gradient(180deg, rgba(247, 251, 252, 0.94), rgba(239, 248, 250, 0.88));
   color: #5f7f87;
@@ -1021,6 +1041,68 @@ body.session-loading-active {
   justify-content: center;
 }
 .new-chat-btn:hover { background: var(--accent-hover); }
+.session-search {
+  position: relative;
+  margin-top: 10px;
+}
+.session-search::before {
+  content: '⌕';
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  z-index: 1;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1;
+  pointer-events: none;
+}
+.session-search-input {
+  width: 100%;
+  height: 34px;
+  padding: 0 34px 0 30px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  background: rgba(255, 249, 242, 0.74);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
+}
+.session-search-input::placeholder {
+  color: var(--text-muted);
+}
+.session-search-input:focus {
+  background: var(--bg-primary);
+  border-color: rgba(192, 85, 58, 0.34);
+  box-shadow: 0 0 0 3px rgba(192, 85, 58, 0.1);
+}
+.session-search-clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+.session-search-clear:hover,
+.session-search-clear:focus-visible {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  outline: none;
+}
 .session-list {
   flex: 1;
   overflow-y: auto;
@@ -1069,6 +1151,41 @@ body.session-loading-active {
   white-space: nowrap;
   flex: 1;
 }
+.session-project-toggle {
+  min-width: 0;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  text-transform: inherit;
+}
+.session-project-toggle:hover,
+.session-project-toggle:focus-visible {
+  color: var(--text-secondary);
+  outline: none;
+}
+.session-project-toggle:focus-visible .session-project-name {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.session-project-chevron {
+  width: 12px;
+  flex-shrink: 0;
+  color: var(--text-muted);
+  font-size: 10px;
+  line-height: 1;
+  text-align: center;
+  transform: translateY(-0.5px);
+}
 .session-project-header-actions {
   display: inline-flex;
   align-items: center;
@@ -1115,6 +1232,34 @@ body.session-loading-active {
 .session-pinned-header {
   color: var(--accent);
 }
+.session-project-sessions[hidden] {
+  display: none;
+}
+.session-project-group.collapsed {
+  margin-bottom: 8px;
+}
+.session-project-group.collapsed .session-project-header {
+  margin-bottom: 0;
+}
+.session-project-group.has-active-session.collapsed .session-project-header {
+  color: var(--accent);
+}
+.session-project-group.has-active-session.collapsed .session-project-count {
+  background: var(--accent-light);
+  color: var(--accent);
+}
+.session-project-group.has-unread-session.collapsed .session-project-count::after,
+.session-project-group.has-running-session.collapsed .session-project-count::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-left: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.session-project-group.has-running-session.collapsed .session-project-count::after {
+  animation: pulse 1.1s infinite;
+}
 .session-item {
   display: flex;
   align-items: center;
@@ -5007,6 +5152,8 @@ html[data-theme='coolvibe'] .settings-back:hover {
 }
 
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .agent-switch,
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-input,
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-clear,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-list-empty,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-header,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-create,
@@ -5077,6 +5224,15 @@ html[data-theme='coolvibe'] .settings-back:hover {
   color: var(--accent);
 }
 
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search::before {
+  color: var(--text-muted);
+}
+
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(94, 205, 245, 0.12);
+}
+
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .file-browser-item.directory .file-browser-item-icon {
   background: var(--note-bg);
   border-color: var(--note-border);
@@ -5085,6 +5241,10 @@ html[data-theme='coolvibe'] .settings-back:hover {
 
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-item:hover,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-item-btn:hover,
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-clear:hover,
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-search-clear:focus-visible,
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-toggle:hover,
+:is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .session-project-toggle:focus-visible,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .chat-title:hover,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .menu-btn:hover,
 :is(html[data-theme='carbon'], html[data-theme='nocturne'], html[data-theme='cinder']) .settings-btn:hover,