feat(ui): add sidebar density mode to session list (#764)

Adds compact/detailed toggle for the session list sidebar. Compact is the default (no behavior change for existing users). Detailed mode shows message count and model; profile names only appear when mixing sessions across profiles. Fixes #673 Co-authored-by: franksong2702 <franksong2702@users.noreply.github.com>
2026-04-21 03:43:40 +08:00
parent a8979f74d5
commit 0dd5d6f21c
10 changed files with 277 additions and 14 deletions
--- a/static/boot.js
+++ b/static/boot.js
@@ -757,6 +757,7 @@ function applyBotName(){
    window._showCliSessions=!!s.show_cli_sessions;
    window._soundEnabled=!!s.sound_enabled;
    window._notificationsEnabled=!!s.notifications_enabled;
+    window._sidebarDensity=(s.sidebar_density==='detailed'?'detailed':'compact');
    window._botName=s.bot_name||'Hermes';
    const appearance=_normalizeAppearance(s.theme,s.skin);
    localStorage.setItem('hermes-theme',appearance.theme);
@@ -778,6 +779,7 @@ function applyBotName(){
    window._showCliSessions=false;
    window._soundEnabled=false;
    window._notificationsEnabled=false;
+    window._sidebarDensity='compact';
    window._botName='Hermes';
    _bootSettings={check_for_updates:false};
    document.body.classList.remove('bubble-layout');
--- a/static/i18n.js
+++ b/static/i18n.js
@@ -195,6 +195,7 @@ const LOCALES = {
    settings_label_language: 'Language',
    settings_label_token_usage: 'Show token usage',
    settings_label_bubble_layout: 'Chat bubble layout',
+    settings_label_sidebar_density: 'Sidebar density',
    settings_label_cli_sessions: 'Show agent sessions',
    settings_label_sync_insights: 'Sync to insights',
    settings_label_check_updates: 'Check for updates',
@@ -249,6 +250,7 @@ const LOCALES = {
    personal_memory: 'Personal memory',
    current_task_list: 'Current task list',
    workspace_desc: 'Add and switch workspaces for your sessions.',
+    session_meta_messages: (n) => `${n} msg${n === 1 ? '' : 's'}`,
    new_profile: 'New profile',
    transcript: 'Transcript',
    download_transcript: 'Download as Markdown',
@@ -260,6 +262,9 @@ const LOCALES = {
    settings_desc_notifications: 'Show a system notification when a response completes while the app is in the background.',
    settings_desc_token_usage: 'Displays input/output token count below each assistant reply. Also toggled with /usage.',
    settings_desc_bubble_layout: 'Right-align user messages and left-align assistant replies. Off by default to keep code blocks and tool output full-width.',
+    settings_sidebar_density_compact: 'Compact',
+    settings_sidebar_density_detailed: 'Detailed',
+    settings_desc_sidebar_density: 'Controls how much metadata the session list shows in the left sidebar.',
    settings_desc_cli_sessions: 'Merges sessions from the Hermes CLI (state.db) into the session list. Click a CLI session to import it and continue the conversation.',
    settings_desc_sync_insights: 'Mirrors WebUI token usage to state.db so hermes /insights includes browser session data. Off by default.',
    settings_desc_check_updates: 'Show a banner when newer versions of the WebUI or Agent are available. Runs a background git fetch periodically.',
@@ -623,6 +628,7 @@ const LOCALES = {
    settings_label_language: 'Язык',
    settings_label_token_usage: 'Показывать использование токенов',
    settings_label_bubble_layout: 'Раскладка пузырьков чата',
+    settings_label_sidebar_density: 'Плотность боковой панели',
    settings_label_cli_sessions: 'Показывать сеансы агента',
    settings_label_sync_insights: 'Синхронизировать с Insights',
    settings_label_check_updates: 'Проверять обновления',
@@ -694,6 +700,7 @@ const LOCALES = {
    personal_memory: 'Личная память',
    current_task_list: 'Текущий список задач',
    workspace_desc: 'Добавляйте рабочие пространства и переключайтесь между ними в своих сеансах.',
+    session_meta_messages: (n) => `${n} сообщ.`,
    new_profile: 'Новый профиль',
    transcript: 'Транскрипт',
    download_transcript: 'Скачать как Markdown',
@@ -704,6 +711,9 @@ const LOCALES = {
    settings_desc_notifications: 'Показывать системное уведомление, когда ответ готов, а вкладка находится в фоне.',
    settings_desc_token_usage: 'Показывает количество входных и выходных токенов под каждым ответом помощника. Также переключается через /usage.',
    settings_desc_bubble_layout: 'Выравнивает сообщения пользователя справа, а ответы помощника слева. Выключено по умолчанию, чтобы блоки кода и вывод инструментов занимали всю ширину.',
+    settings_sidebar_density_compact: 'Компактно',
+    settings_sidebar_density_detailed: 'Подробно',
+    settings_desc_sidebar_density: 'Управляет тем, сколько метаданных показывается в списке сеансов на левой панели.',
    settings_desc_cli_sessions: 'Объединяет сеансы из Hermes CLI (state.db) в список сеансов. Нажмите на CLI-сеанс, чтобы импортировать его и продолжить разговор.',
    settings_desc_sync_insights: 'Синхронизирует использование токенов WebUI в state.db, чтобы Hermes /insights включал данные браузерных сеансов. Выключено по умолчанию.',
    settings_desc_check_updates: 'Показывает баннер, когда доступны более новые версии WebUI или Agent. Периодически выполняет git fetch в фоне.',
@@ -1079,6 +1089,7 @@ const LOCALES = {
    settings_label_language: 'Idioma',
    settings_label_token_usage: 'Mostrar uso de tokens',
    settings_label_bubble_layout: 'Disposición en burbujas',
+    settings_label_sidebar_density: 'Densidad de la barra lateral',
    settings_label_cli_sessions: 'Mostrar sesiones de CLI',
    settings_label_sync_insights: 'Sincronizar con insights',
    settings_label_check_updates: 'Buscar actualizaciones',
@@ -1133,6 +1144,7 @@ const LOCALES = {
    personal_memory: 'Memoria personal',
    current_task_list: 'Lista de tareas actual',
    workspace_desc: 'Añade y cambia espacios de trabajo para tus sesiones.',
+    session_meta_messages: (n) => `${n} mens.`,
    new_profile: 'Nuevo perfil',
    transcript: 'Transcripción',
    download_transcript: 'Descargar como Markdown',
@@ -1144,6 +1156,9 @@ const LOCALES = {
    settings_desc_notifications: 'Muestra una notificación del sistema cuando una respuesta termina mientras la pestaña está en segundo plano.',
    settings_desc_token_usage: 'Muestra el conteo de tokens de entrada/salida debajo de cada respuesta del asistente. También se puede alternar con /usage.',
    settings_desc_bubble_layout: 'Alinea los mensajes del usuario a la derecha y las respuestas del asistente a la izquierda. Desactivado por defecto para mantener los bloques de código y la salida de herramientas a ancho completo.',
+    settings_sidebar_density_compact: 'Compacta',
+    settings_sidebar_density_detailed: 'Detallada',
+    settings_desc_sidebar_density: 'Controla cuántos metadatos muestra la lista de sesiones en la barra lateral izquierda.',
    settings_desc_cli_sessions: 'Fusiona las sesiones del CLI de Hermes (state.db) en la lista de sesiones. Haz clic en una sesión de CLI para importarla y continuar la conversación.',
    settings_desc_sync_insights: 'Refleja el uso de tokens de la WebUI en state.db para que hermes /insights incluya datos de sesiones del navegador. Desactivado por defecto.',
    settings_desc_check_updates: 'Muestra un banner cuando haya versiones más nuevas de la WebUI o del Agent. Ejecuta periódicamente un git fetch en segundo plano.',
@@ -1506,6 +1521,8 @@ const LOCALES = {
    settings_label_skin: 'Skin',
    settings_label_language: 'Sprache',
    settings_label_token_usage: 'Token-Verbrauch anzeigen',
+    settings_label_bubble_layout: 'Chat-Bubble-Layout',
+    settings_label_sidebar_density: 'Seitenleistendichte',
    settings_label_cli_sessions: 'Agent-Sitzungen anzeigen',
    settings_label_sync_insights: 'Mit Insights synchronisieren',
    settings_label_check_updates: 'Nach Updates suchen',
@@ -1549,6 +1566,7 @@ const LOCALES = {
    personal_memory: 'Persönliches Gedächtnis',
    current_task_list: 'Aktuelle Aufgabenliste',
    workspace_desc: 'Workspaces hinzufügen und wechseln.',
+    session_meta_messages: (n) => `${n} Nachr.`,
    new_profile: 'Neues Profil',
    transcript: 'Protokoll',
    download_transcript: 'Als Markdown herunterladen',
@@ -1559,6 +1577,10 @@ const LOCALES = {
    settings_label_notifications: 'Browser-Benachrichtigungen',
    settings_desc_notifications: 'Zeigt eine Systembenachrichtigung an, wenn eine Antwort fertiggestellt wird, während der Tab im Hintergrund ist.',
    settings_desc_token_usage: 'Zeigt die Anzahl der Input/Output-Token unter jeder Antwort des Assistenten an. Auch umschaltbar mit /usage.',
+    settings_desc_bubble_layout: 'Richtet Benutzernachrichten rechts und Assistentenantworten links aus. Standardmäßig deaktiviert, damit Codeblöcke und Tool-Ausgaben die volle Breite behalten.',
+    settings_sidebar_density_compact: 'Kompakt',
+    settings_sidebar_density_detailed: 'Detailliert',
+    settings_desc_sidebar_density: 'Steuert, wie viele Metadaten die Sitzungsliste in der linken Seitenleiste anzeigt.',
    settings_desc_cli_sessions: 'Fügt Sitzungen aus der Hermes CLI (state.db) in die Sitzungsliste ein. Klicken Sie auf eine CLI-Sitzung, um sie zu importieren und das Gespräch fortzusetzen.',
    settings_desc_sync_insights: 'Spiegelt den WebUI-Token-Verbrauch in die state.db, sodass hermes /insights Browser-Sitzungsdaten enthält. Standardmäßig aus.',
    settings_desc_check_updates: 'Zeigt ein Banner an, wenn neuere Versionen der WebUI oder des Agenten verfügbar sind. Führt regelmäßig einen Git-Fetch im Hintergrund aus.',
@@ -1734,6 +1756,7 @@ const LOCALES = {
    settings_label_language: '\u8bed\u8a00',
    settings_label_token_usage: '\u663e\u793a token \u7528\u91cf',
    settings_label_bubble_layout: '聊天气泡布局',
+    settings_label_sidebar_density: '侧边栏密度',
    settings_label_cli_sessions: '\u663e\u793a CLI \u4f1a\u8bdd',
    settings_label_sync_insights: '\u540c\u6b65\u5230 insights',
    settings_label_check_updates: '\u68c0\u67e5\u66f4\u65b0',
@@ -1780,6 +1803,7 @@ const LOCALES = {
    personal_memory: '个人记忆',
    current_task_list: '当前任务列表',
    workspace_desc: '为你的会话添加并切换工作区。',
+    session_meta_messages: (n) => `${n} 条消息`,
    new_profile: '新配置',
    transcript: '记录',
    download_transcript: '下载为 Markdown',
@@ -1802,6 +1826,9 @@ const LOCALES = {
    settings_desc_notifications: '当标签页在后台时，回复完成后显示系统通知。',
    settings_desc_token_usage: '在助手每次回复下方显示输入/输出 token 数量。也可以用 /usage 切换。',
    settings_desc_bubble_layout: '开启后将用户消息右对齐、助手消息左对齐。默认关闭，以保持代码块和工具输出为全宽显示。',
+    settings_sidebar_density_compact: '紧凑',
+    settings_sidebar_density_detailed: '详细',
+    settings_desc_sidebar_density: '控制左侧会话列表展示多少元信息。',
    settings_desc_cli_sessions: '将 Hermes CLI（state.db）中的会话合并到会话列表。点击某个 CLI 会话可导入并继续对话。',
    settings_desc_sync_insights: '将 WebUI token 使用情况同步到 state.db，使 hermes /insights 包含浏览器会话数据。默认关闭。',
    settings_desc_check_updates: '当有更新的 WebUI 或助手版本时显示横幅。会在后台定期执行 git fetch。',
@@ -2145,6 +2172,8 @@ const LOCALES = {
    settings_label_skin: '\u76ae\u819a',
    settings_label_language: '\u8a9d\u8a00',
    settings_label_token_usage: '\u986f\u793a token \u7528\u91cf',
+    settings_label_bubble_layout: '聊天泡泡版面',
+    settings_label_sidebar_density: '側邊欄密度',
    settings_label_cli_sessions: '\u986f\u793a CLI \u6703\u8a71',
    settings_label_sync_insights: '\u540c\u6b65\u5230 insights',
    settings_label_check_updates: '\u6aa2\u67e5\u66f4\u65b0',
@@ -2186,6 +2215,7 @@ const LOCALES = {
    save_skill: '\u5132\u5b58\u6280\u80fd',
    personal_memory: '\u500b\u4eba\u8a18\u61b6',
    current_task_list: '\u76ee\u524d\u4efb\u52d9\u6e05\u55ae',
+    session_meta_messages: (n) => `${n} 則訊息`,
    new_profile: '\u65b0\u914d\u7f6e\u6a94',
    transcript: '\u8a18\u9304',
    download_transcript: '\u4e0b\u8f09\u8a18\u9304',
@@ -2207,6 +2237,10 @@ const LOCALES = {
    settings_desc_sound: '\u52a9\u624b\u5b8c\u6210\u56de\u7b54\u6642\u64a9\u653e\u8072\u97f3\u3002',
    settings_desc_notifications: '\u7576\u5206\u9801\u5728\u5f8c\u81ea\u6642\uff0c\u6709\u56de\u7b54\u5b8c\u6210\u6e05\u55ae\u6703\u986f\u793a\u7cfb\u7d71\u901a\u77e5\u3002',
    settings_desc_token_usage: '\u5728\u52a9\u624b\u6bcf\u6b21\u56de\u7b54\u4e0b\u65b9\u986f\u793a Input/Output token \u6578\u91cf\u3002\u4e5f\u53ef\u4ee5\u7528 /usage \u5207\u63db\u3002',
+    settings_desc_bubble_layout: '開啟後將使用者訊息靠右、助理訊息靠左。預設關閉，以保持程式碼區塊與工具輸出為全寬顯示。',
+    settings_sidebar_density_compact: '精簡',
+    settings_sidebar_density_detailed: '詳細',
+    settings_desc_sidebar_density: '控制左側對話清單要顯示多少額外資訊。',
    settings_desc_cli_sessions: '\u5c07 Hermes CLI (\u7684 state.db) \u4e2d\u7684\u6703\u8a71\u6dfb\u52a0\u5230\u6703\u8a71\u6e05\u55ae\u3002\u9ede\u64ca\u4e00\u500b CLI \u6703\u8a71\u5c07\u5c0e\u5165\u5b83\u7a0b\u5f0f\u4e26\u7e7c\u7e8c\u5b58\u5c0d\u8a71\u3002',
    settings_desc_sync_insights: '\u5c07 WebUI token \u4f7f\u7528\u60c5\u6cc1\u540c\u6b65\u5230 state.db\uff0c\u8a93 hermes /insights \u5305\u542b\u700f\u89bd\u5668\u6703\u8a71\u6578\u64da\u3002\u9810\u8a2d\u70b8\u555f\u7528\u3002',
    settings_desc_check_updates: '\u7576\u6709\u66f4\u65b0\u7684 WebUI \u6216\u52a9\u624b\u7248\u672c\u6642\u986f\u793a\u6a19\u8a18\u3002\u5c07\u5728\u5f8c\u81ea\u6b63\u5e38\u57f7\u884c Git-Fetch\u3002',
--- a/static/index.html
+++ b/static/index.html
@@ -561,6 +561,14 @@
              </label>
              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_bubble_layout">Right-align user messages and left-align assistant replies. Off by default to keep code blocks and tool output full-width.</div>
            </div>
+            <div class="settings-field">
+              <label for="settingsSidebarDensity" data-i18n="settings_label_sidebar_density">Sidebar density</label>
+              <select id="settingsSidebarDensity" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px">
+                <option value="compact" data-i18n="settings_sidebar_density_compact">Compact</option>
+                <option value="detailed" data-i18n="settings_sidebar_density_detailed">Detailed</option>
+              </select>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_sidebar_density">Controls how much metadata the session list shows in the left sidebar.</div>
+            </div>
            <div class="settings-field">
              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
                <input type="checkbox" id="settingsShowCliSessions" style="width:15px;height:15px;accent-color:var(--accent)">
--- a/static/panels.js
+++ b/static/panels.js
@@ -1267,6 +1267,11 @@ async function loadSettingsPanel(){
    if(notifCb){notifCb.checked=!!settings.notifications_enabled;notifCb.addEventListener('change',_markSettingsDirty,{once:false});}
    const bubbleCb=$('settingsBubbleLayout');
    if(bubbleCb){bubbleCb.checked=!!settings.bubble_layout;bubbleCb.addEventListener('change',_markSettingsDirty,{once:false});}
+    const sidebarDensitySel=$('settingsSidebarDensity');
+    if(sidebarDensitySel){
+      sidebarDensitySel.value=settings.sidebar_density==='detailed'?'detailed':'compact';
+      sidebarDensitySel.addEventListener('change',_markSettingsDirty,{once:false});
+    }
    // Bot name
    const botNameField=$('settingsBotName');
    if(botNameField){botNameField.value=settings.bot_name||'Hermes';botNameField.addEventListener('input',_markSettingsDirty,{once:false});}
@@ -1293,12 +1298,13 @@ function _setSettingsAuthButtonsVisible(active){
 }

 function _applySavedSettingsUi(saved, body, opts){
-  const {sendKey,showTokenUsage,showCliSessions,theme,skin,language}=opts;
+  const {sendKey,showTokenUsage,showCliSessions,theme,skin,language,sidebarDensity}=opts;
  window._sendKey=sendKey||'enter';
  window._showTokenUsage=showTokenUsage;
  window._showCliSessions=showCliSessions;
  window._soundEnabled=body.sound_enabled;
  window._notificationsEnabled=body.notifications_enabled;
+  window._sidebarDensity=sidebarDensity==='detailed'?'detailed':'compact';
  window._botName=body.bot_name||'Hermes';
  document.body.classList.toggle('bubble-layout', !!body.bubble_layout);
  if(typeof applyBotName==='function') applyBotName();
@@ -1328,6 +1334,7 @@ async function saveSettings(andClose){
  const theme=($('settingsTheme')||{}).value||'dark';
  const skin=($('settingsSkin')||{}).value||'default';
  const language=($('settingsLanguage')||{}).value||'en';
+  const sidebarDensity=($('settingsSidebarDensity')||{}).value==='detailed'?'detailed':'compact';
  const body={};
  if(model) body.default_model=model;

@@ -1342,6 +1349,7 @@ async function saveSettings(andClose){
  body.sound_enabled=!!($('settingsSoundEnabled')||{}).checked;
  body.notifications_enabled=!!($('settingsNotificationsEnabled')||{}).checked;
  body.bubble_layout=!!($('settingsBubbleLayout')||{}).checked;
+  body.sidebar_density=sidebarDensity;
  document.body.classList.toggle('bubble-layout', body.bubble_layout);
  const botName=(($('settingsBotName')||{}).value||'').trim();
  body.bot_name=botName||'Hermes';
@@ -1349,7 +1357,7 @@ async function saveSettings(andClose){
  if(pw && pw.trim()){
    try{
      const saved=await api('/api/settings',{method:'POST',body:JSON.stringify({...body,_set_password:pw.trim()})});
-      _applySavedSettingsUi(saved, body, {sendKey,showTokenUsage,showCliSessions,theme,skin,language});
+      _applySavedSettingsUi(saved, body, {sendKey,showTokenUsage,showCliSessions,theme,skin,language,sidebarDensity});
      showToast(t(saved.auth_just_enabled?'settings_saved_pw':'settings_saved_pw_updated'));
      _hideSettingsPanel();
      return;
@@ -1357,7 +1365,7 @@ async function saveSettings(andClose){
  }
  try{
    const saved=await api('/api/settings',{method:'POST',body:JSON.stringify(body)});
-    _applySavedSettingsUi(saved, body, {sendKey,showTokenUsage,showCliSessions,theme,skin,language});
+    _applySavedSettingsUi(saved, body, {sendKey,showTokenUsage,showCliSessions,theme,skin,language,sidebarDensity});
    showToast(t('settings_saved'));
    _hideSettingsPanel();
  }catch(e){
--- a/static/sessions.js
+++ b/static/sessions.js
@@ -618,6 +618,21 @@ function renderSessionListFromCache(){
    const tsMs=_sessionTimestampMs(s);
    titleRow.appendChild(title);
    sessionText.appendChild(titleRow);
+    const density=(window._sidebarDensity==='detailed'?'detailed':'compact');
+    if(density==='detailed'){
+      const metaBits=[];
+      const msgCount=typeof s.message_count==='number'?s.message_count:0;
+      const msgLabel=(typeof t==='function')
+        ? t('session_meta_messages', msgCount)
+        : `${msgCount} msg${msgCount===1?'':'s'}`;
+      metaBits.push(msgLabel);
+      if(s.model) metaBits.push(s.model);
+      if(_showAllProfiles&&s.profile) metaBits.push(s.profile);
+      const meta=document.createElement('div');
+      meta.className='session-meta';
+      meta.textContent=metaBits.join(' · ');
+      sessionText.appendChild(meta);
+    }
    // Append tag chips after the title text
    for(const tag of tags){
      const chip=document.createElement('span');
--- a/static/style.css
+++ b/static/style.css
@@ -186,6 +186,8 @@
  .session-title-row{display:flex;align-items:center;gap:6px;min-width:0;}
  .session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
  .session-item.active .session-title{color:var(--accent-text);}
+  .session-meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .session-item.active .session-meta{color:var(--accent-text);opacity:.8;}
  .session-time{display:none;}
  /* ── Session action trigger + dropdown ── */
  .session-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease;}