From 3ba76ad19bb4532fb5eccf7b1a3d048533ab6996 Mon Sep 17 00:00:00 2001
From: ekko <152005280+EKKOLearnAI@users.noreply.github.com>
Date: Fri, 1 May 2026 11:27:43 +0800
Subject: [PATCH] feat: add History page for browsing Hermes sessions (v0.5.5)
 (#370)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Features:
- Add dedicated History page for browsing Hermes session history
- Independent session state (does not interfere with active chat)
- Auto-select first CLI session on page load
- Filter out api_server and cron sources

Components:
- New HistoryView.vue with isolated state management
- New HistoryMessageList.vue with session prop support
- Filters empty content and tool messages without toolName

Backend:
- Add GET /api/hermes/sessions/hermes endpoint (excludes api_server)
- Add GET /api/hermes/sessions/hermes/:id endpoint (404s for api_server)
- Add fetchHermesSessions() and fetchHermesSession() API functions

Cleanup:
- Remove localStorage session caching
- Simplify profile switching cache management
- Clean up废弃 cache cleanup calls

i18n:
- Add "History" translation to all 8 locales
- Add v0.5.5 changelog entries in all languages
- 🎉 Happy Labor Day!

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json                                  |   2 +-
 packages/client/src/api/hermes/sessions.ts    |  24 +
 .../hermes/chat/HistoryMessageList.vue        | 427 +++++++++
 .../src/components/layout/AppSidebar.vue      |   7 +
 packages/client/src/data/changelog.ts         |  14 +
 packages/client/src/i18n/locales/de.ts        |  12 +-
 packages/client/src/i18n/locales/en.ts        |  22 +-
 packages/client/src/i18n/locales/es.ts        |  12 +-
 packages/client/src/i18n/locales/fr.ts        |  12 +-
 packages/client/src/i18n/locales/ja.ts        |  12 +-
 packages/client/src/i18n/locales/ko.ts        |  12 +-
 packages/client/src/i18n/locales/pt.ts        |  12 +-
 packages/client/src/i18n/locales/zh.ts        |  22 +-
 packages/client/src/router/index.ts           |   5 +
 packages/client/src/stores/hermes/chat.ts     |  26 +-
 packages/client/src/stores/hermes/profiles.ts |  27 +-
 .../client/src/views/hermes/HistoryView.vue   | 829 ++++++++++++++++++
 .../server/src/controllers/hermes/sessions.ts |  41 +
 packages/server/src/routes/hermes/sessions.ts |   2 +
 19 files changed, 1473 insertions(+), 47 deletions(-)
 create mode 100644 packages/client/src/components/hermes/chat/HistoryMessageList.vue
 create mode 100644 packages/client/src/views/hermes/HistoryView.vue

diff --git a/package.json b/package.json
index 67006bd..60a34a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hermes-web-ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Self-hosted AI chat dashboard for Hermes Agent — multi-model (Claude, GPT, Gemini, DeepSeek) web UI with Telegram, Discord, Slack, WhatsApp integration",
   "repository": {
     "type": "git",
diff --git a/packages/client/src/api/hermes/sessions.ts b/packages/client/src/api/hermes/sessions.ts
index d47bab2..785f0aa 100644
--- a/packages/client/src/api/hermes/sessions.ts
+++ b/packages/client/src/api/hermes/sessions.ts
@@ -56,6 +56,18 @@ export async function fetchSessions(source?: string, limit?: number): Promise<Se
   return res.sessions
 }
 
+/**
+ * Fetch Hermes sessions only (exclude api_server source)
+ */
+export async function fetchHermesSessions(source?: string, limit?: number): Promise<SessionSummary[]> {
+  const params = new URLSearchParams()
+  if (source) params.set('source', source)
+  if (limit) params.set('limit', String(limit))
+  const query = params.toString()
+  const res = await request<{ sessions: SessionSummary[] }>(`/api/hermes/sessions/hermes${query ? `?${query}` : ''}`)
+  return res.sessions
+}
+
 export async function searchSessions(q: string, source?: string, limit?: number): Promise<SessionSearchResult[]> {
   const params = new URLSearchParams()
   params.set('q', q)
@@ -75,6 +87,18 @@ export async function fetchSession(id: string): Promise<SessionDetail | null> {
   }
 }
 
+/**
+ * Fetch Hermes session detail only (exclude api_server source)
+ */
+export async function fetchHermesSession(id: string): Promise<SessionDetail | null> {
+  try {
+    const res = await request<{ session: SessionDetail }>(`/api/hermes/sessions/hermes/${id}`)
+    return res.session
+  } catch {
+    return null
+  }
+}
+
 export async function deleteSession(id: string): Promise<boolean> {
   try {
     await request(`/api/hermes/sessions/${id}`, { method: 'DELETE' })
diff --git a/packages/client/src/components/hermes/chat/HistoryMessageList.vue b/packages/client/src/components/hermes/chat/HistoryMessageList.vue
new file mode 100644
index 0000000..83531ba
--- /dev/null
+++ b/packages/client/src/components/hermes/chat/HistoryMessageList.vue
@@ -0,0 +1,427 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from "vue";
+import { useI18n } from "vue-i18n";
+import MessageItem from "./MessageItem.vue";
+import { useChatStore } from "@/stores/hermes/chat";
+import type { Session } from "@/stores/hermes/chat";
+import thinkingVideoLight from "@/assets/thinking-light.mp4";
+import thinkingVideoDark from "@/assets/thinking-dark.mp4";
+import { useTheme } from "@/composables/useTheme";
+
+const props = defineProps<{
+  session?: Session | null; // Optional: use this session instead of chatStore.activeSession
+}>();
+
+const chatStore = useChatStore();
+const { t } = useI18n();
+const { isDark } = useTheme();
+const listRef = ref<HTMLElement>();
+
+// Use provided session or fall back to chatStore's active session
+const activeSession = computed(() => props.session || chatStore.activeSession);
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+  return String(n)
+}
+
+function formatToolDuration(seconds: number): string {
+  if (seconds < 1) return `${Math.round(seconds * 1000)}ms`
+  if (seconds < 60) return `${Math.round(seconds * 10) / 10}s`
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.round(seconds % 60)
+  return `${mins}m ${secs}s`
+}
+
+const displayMessages = computed(() =>
+  (activeSession.value?.messages || []).filter((m) => {
+    // Filter out tool messages without name (internal use only)
+    if (m.role === 'tool' && !m.toolName) return false
+    // Filter out messages with empty content (except tool messages)
+    if (m.role !== 'tool' && !m.content?.trim()) return false
+    return true
+  }),
+);
+
+const currentToolCalls = computed(() => {
+  const msgs = activeSession.value?.messages || [];
+  // Find the last user message index
+  let lastUserIdx = -1;
+  for (let i = msgs.length - 1; i >= 0; i--) {
+    if (msgs[i].role === "user") {
+      lastUserIdx = i;
+      break;
+    }
+  }
+  // Only tool calls after the last user message, newest on top
+  const tools = msgs.filter((m, i) => m.role === "tool" && i > lastUserIdx);
+  return [...tools].reverse();
+});
+
+function isNearBottom(threshold = 200): boolean {
+  const el = listRef.value;
+  if (!el) return true;
+  return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+}
+
+function scrollToBottom() {
+  nextTick(() => {
+    if (listRef.value) {
+      listRef.value.scrollTop = listRef.value.scrollHeight;
+    }
+  });
+}
+
+function scrollToMessage(messageId: string) {
+  nextTick(() => {
+    const el = document.getElementById(`message-${messageId}`);
+    if (el) {
+      el.scrollIntoView({ block: 'center' });
+    }
+  });
+}
+
+// Scroll to bottom on session switch
+watch(
+  () => chatStore.activeSessionId,
+  (id) => {
+    if (!id) return;
+    if (chatStore.focusMessageId) {
+      nextTick(() => scrollToMessage(chatStore.focusMessageId!));
+      return;
+    }
+    nextTick(() => scrollToBottom());
+  },
+  { immediate: true },
+);
+
+watch(
+  () => chatStore.focusMessageId,
+  (messageId) => {
+    if (!messageId) return;
+    scrollToMessage(messageId);
+  },
+);
+
+// When a run starts (user just sent a message), always scroll to bottom once
+watch(
+  () => chatStore.isRunActive,
+  (v) => {
+    if (v) scrollToBottom();
+  },
+);
+
+// During streaming, only auto-scroll if the user is already near the bottom
+watch(
+  () => (activeSession.value?.messages || [])[((activeSession.value?.messages || []).length - 1)]?.content,
+  (content) => {
+    if (!content) return
+    if (!isNearBottom()) return;
+    scrollToBottom();
+  },
+);
+
+watch(
+  () => (activeSession.value?.messages || []).length,
+  (length) => {
+    if (length === 0) return
+    if (!isNearBottom()) return;
+    scrollToBottom();
+  },
+);
+</script>
+
+<template>
+  <div ref="listRef" class="message-list">
+    <div v-if="!activeSession || activeSession.messages.length === 0" class="empty-state">
+      <img src="/logo.png" alt="Hermes" class="empty-logo" />
+      <p>{{ t("chat.emptyState") }}</p>
+    </div>
+    <MessageItem
+      v-for="msg in displayMessages"
+      :key="msg.id"
+      :message="msg"
+      :highlight="chatStore.focusMessageId === msg.id"
+    />
+    <Transition name="fade">
+      <div v-if="chatStore.isRunActive" class="streaming-indicator">
+        <video
+          :src="isDark ? thinkingVideoDark : thinkingVideoLight"
+          autoplay
+          loop
+          muted
+          playsinline
+          class="thinking-video"
+        />
+        <div v-if="currentToolCalls.length > 0 || chatStore.compressionState" class="tool-calls-panel">
+          <!-- Compression indicator -->
+          <div v-if="chatStore.compressionState" class="tool-call-item compression-item">
+            <svg
+              v-if="chatStore.compressionState.compressing"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tool-call-icon"
+            >
+              <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            <svg
+              v-else-if="chatStore.compressionState.compressed"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tool-call-icon"
+            >
+              <path d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="tool-call-name">
+              {{
+                chatStore.compressionState.compressing
+                  ? `Compressing... (${chatStore.compressionState.messageCount} msgs, ~${formatTokens(chatStore.compressionState.beforeTokens)} tokens)`
+                  : chatStore.compressionState.compressed
+                    ? `Compressed ${chatStore.compressionState.messageCount} msgs: ~${formatTokens(chatStore.compressionState.beforeTokens)} → ~${formatTokens(chatStore.compressionState.afterTokens)} tokens`
+                    : `Compression skipped`
+              }}
+            </span>
+            <span
+              v-if="chatStore.compressionState.compressing"
+              class="tool-call-spinner"
+            ></span>
+          </div>
+          <!-- Tool calls -->
+          <div
+            v-for="tc in currentToolCalls"
+            :key="tc.id"
+            class="tool-call-item"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="tool-call-icon"
+            >
+              <path
+                d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+              />
+            </svg>
+            <span class="tool-call-name">{{ tc.toolName }}</span>
+            <span v-if="tc.toolPreview" class="tool-call-preview">{{
+              tc.toolPreview
+            }}</span>
+            <span
+              v-if="tc.toolDuration && tc.toolStatus !== 'running'"
+              class="tool-call-duration"
+              :title="$t('chat.executionDuration')"
+            >{{ formatToolDuration(tc.toolDuration) }}</span
+            >
+            <svg
+              v-if="tc.toolStatus === 'done'"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              class="tool-call-success-icon"
+            >
+              <circle cx="12" cy="12" r="10" fill="currentColor" fill-opacity="0.15"/>
+              <path
+                d="M8 12L11 15L16 9"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="none"
+              />
+            </svg>
+            <span
+              v-if="tc.toolStatus === 'running'"
+              class="tool-call-spinner"
+            ></span>
+            <svg
+              v-if="tc.toolStatus === 'error'"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              class="tool-call-error-icon"
+            >
+              <circle cx="12" cy="12" r="10" fill="currentColor" fill-opacity="0.15"/>
+              <path
+                d="M15 9L9 15M9 9L15 15"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="none"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "@/styles/variables" as *;
+
+.message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background-color: $bg-card;
+
+  .dark & {
+    background-color: #333333;
+  }
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: $text-muted;
+  gap: 12px;
+
+  .empty-logo {
+    width: 48px;
+    height: 48px;
+    opacity: 0.25;
+  }
+
+  p {
+    font-size: 14px;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.streaming-indicator {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 4px;
+  .thinking-video {
+    width: 120px;
+    height: 213px;
+    border-radius: $radius-md;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
+
+.tool-calls-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 213px;
+  overflow-y: auto;
+  padding-top: 4px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tool-call-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: $text-secondary;
+  padding: 3px 8px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: $radius-sm;
+
+  .dark & {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  &.compression-item {
+    color: $text-muted;
+    font-size: 10px;
+  }
+
+  .tool-call-icon {
+    flex-shrink: 0;
+    color: $text-muted;
+  }
+
+  .tool-call-name {
+    font-family: $font-code;
+    flex-shrink: 0;
+  }
+
+  .tool-call-preview {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 300px;
+    color: $text-muted;
+  }
+}
+
+.tool-call-spinner {
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid $text-muted;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+.tool-call-error-icon {
+  color: #ff4d4f;
+  flex-shrink: 0;
+  margin-left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tool-call-duration {
+  font-size: 10px;
+  color: $text-muted;
+  font-family: $font-code;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.tool-call-success-icon {
+  color: #52c41a;
+  flex-shrink: 0;
+  margin-left: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/packages/client/src/components/layout/AppSidebar.vue b/packages/client/src/components/layout/AppSidebar.vue
index 53ec46b..022dc1c 100644
--- a/packages/client/src/components/layout/AppSidebar.vue
+++ b/packages/client/src/components/layout/AppSidebar.vue
@@ -80,6 +80,13 @@ function openChangelog() {
             </svg>
             <span>{{ t("sidebar.chat") }}</span>
           </button>
+          <button class="nav-item" :class="{ active: selectedKey === 'hermes.history' }" @click="handleNav('hermes.history')">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 14" />
+            </svg>
+            <span>{{ t("sidebar.history") }}</span>
+          </button>
           <button class="nav-item" :class="{ active: selectedKey === 'hermes.groupChat' }" @click="handleNav('hermes.groupChat')">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
               <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
diff --git a/packages/client/src/data/changelog.ts b/packages/client/src/data/changelog.ts
index d72718a..f7c8643 100644
--- a/packages/client/src/data/changelog.ts
+++ b/packages/client/src/data/changelog.ts
@@ -5,6 +5,20 @@ export interface ChangelogEntry {
 }
 
 export const changelog: ChangelogEntry[] = [
+  {
+    version: '0.5.5',
+    date: '2026-05-01',
+    changes: [
+      'changelog.new_0_5_5_1',
+      'changelog.new_0_5_5_2',
+      'changelog.new_0_5_5_3',
+      'changelog.new_0_5_5_4',
+      'changelog.new_0_5_5_5',
+      'changelog.new_0_5_5_6',
+      'changelog.new_0_5_5_7',
+      'changelog.new_0_5_5_8',
+    ],
+  },
   {
     version: '0.5.4',
     date: '2026-05-01',
diff --git a/packages/client/src/i18n/locales/de.ts b/packages/client/src/i18n/locales/de.ts
index c4302e3..4e2bb87 100644
--- a/packages/client/src/i18n/locales/de.ts
+++ b/packages/client/src/i18n/locales/de.ts
@@ -67,6 +67,8 @@ export default {
   // Sidebar
   sidebar: {
     chat: 'Chat',
+    search: 'Suche',
+    history: 'Verlauf',
     jobs: 'Geplante Aufgaben',
     models: 'Modelle',
     profiles: 'Profile',
@@ -563,7 +565,15 @@ jobTriggered: 'Job ausgelost',
 
   // Anderungsprotokoll
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
+
+    new_0_5_5_1: '🎉 Tag der Arbeit! Heute wird nicht gearbeitet, bitte habt Verständnis',
+    new_0_5_5_2: 'Verlaufsseite für Hermes-Sitzungshistorie hinzugefügt',
+    new_0_5_5_3: 'Verlaufsseite verwaltet Sitzungen unabhängig ohne Störung des aktiven Chats',
+    new_0_5_5_4: 'Verlaufsseite lädt automatisch erste CLI-Sitzung',
+    new_0_5_5_5: 'HistoryMessageList-Komponente mit Session-Prop-Injection',
+    new_0_5_5_6: 'Leere Nachrichten und Tool-Nachrichten ohne toolName gefiltert',
+    new_0_5_5_7: 'LocalStorage-Sitzungscache entfernt, Daten direkt vom Backend',
+    new_0_5_5_8: 'Profile-Umschaltung optimiert, veraltete Cache-Aufrufe entfernt',
     new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
     new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
     new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index 03e40d1..ef6bbff 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -70,6 +70,7 @@ export default {
   sidebar: {
     chat: 'Chat',
     search: 'Search',
+    history: 'History',
     jobs: 'Jobs',
     models: 'Models',
     profiles: 'Profiles',
@@ -734,13 +735,20 @@ export default {
 
   // Changelog
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
-    new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
-    new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
-    new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
-    new_0_5_4_5: 'Add workspace dialog i18n translations for title and improve session persistence',
-    new_0_5_4_6: 'Support code block copy feedback with user notifications',
-    new_0_5_4_7: 'Align usage analytics with Hermes state DB schema',
+    new_0_5_5_1: '🎉 Happy Labor Day! No work this Labor Day, please bear with us if there are any issues',
+    new_0_5_5_2: 'Add History page for browsing Hermes session history',
+    new_0_5_5_3: 'History page manages session state independently without interfering with active chat',
+    new_0_5_5_4: 'History page auto-loads and selects first CLI session by default',
+    new_0_5_5_5: 'Add HistoryMessageList component with session prop injection support',
+    new_0_5_5_6: 'Filter empty content messages and tool messages without toolName for better display',
+    new_0_5_5_7: 'Remove localStorage session cache, all session data now fetched directly from backend',
+    new_0_5_5_8: 'Optimize profile switching logic by removing废弃 cache cleanup calls',
+    new_0_5_4_1: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
+    new_0_5_4_2: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
+    new_0_5_4_3: 'Fix web terminal Hermes CLI availability after Docker deployment',
+    new_0_5_4_4: 'Add workspace dialog i18n translations for title and improve session persistence',
+    new_0_5_4_5: 'Support code block copy feedback with user notifications',
+    new_0_5_4_6: 'Align usage analytics with Hermes state DB schema',
     new_0_5_3_1: 'Improve reasoning process display with persistence across page refreshes',
     new_0_5_3_2: 'Optimize stringified array format parsing to extract thinking/text/tool_calls',
     new_0_5_3_3: 'Improve log display by removing ellipsis and showing full content',
diff --git a/packages/client/src/i18n/locales/es.ts b/packages/client/src/i18n/locales/es.ts
index 4e05805..96ce598 100644
--- a/packages/client/src/i18n/locales/es.ts
+++ b/packages/client/src/i18n/locales/es.ts
@@ -67,6 +67,8 @@ export default {
   // Sidebar
   sidebar: {
     chat: 'Chat',
+    search: 'Buscar',
+    history: 'Historial',
     jobs: 'Tareas programadas',
     models: 'Modelos',
     profiles: 'Perfiles',
@@ -563,7 +565,15 @@ jobTriggered: 'Job ejecutado',
 
   // Registro de cambios
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
+
+    new_0_5_5_1: '🎉 ¡Feliz Día del Trabajo! Hoy no se trabaja, agradezcan su comprensión',
+    new_0_5_5_2: 'Añadida página de historial para sesiones Hermes',
+    new_0_5_5_3: 'La página de historial gestiona sesiones de forma independiente',
+    new_0_5_5_4: 'Carga automática de primera sesión CLI',
+    new_0_5_5_5: 'Componente HistoryMessageList con inyección de props',
+    new_0_5_5_6: 'Filtrado de mensajes vacíos y tools sin toolName',
+    new_0_5_5_7: 'Eliminado caché de sesiones localStorage, datos del backend',
+    new_0_5_5_8: 'Optimizado cambio de perfil, eliminadas llamadas de cachete obsoletas',
     new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
     new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
     new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
diff --git a/packages/client/src/i18n/locales/fr.ts b/packages/client/src/i18n/locales/fr.ts
index 7c9efb5..ba2cae3 100644
--- a/packages/client/src/i18n/locales/fr.ts
+++ b/packages/client/src/i18n/locales/fr.ts
@@ -67,6 +67,8 @@ export default {
   // Sidebar
   sidebar: {
     chat: 'Discussion',
+    search: 'Rechercher',
+    history: 'Historique',
     jobs: 'Taches planifiees',
     models: 'Modeles',
     profiles: 'Profils',
@@ -563,7 +565,15 @@ jobTriggered: 'Job declenche',
 
   // Journal des modifications
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
+
+    new_0_5_5_1: '🎉 Joyeuse Fête du Travail! Pas de travail aujourd\'hui, merci de votre compréhension',
+    new_0_5_5_2: 'Ajout d\'une page d\'historique pour les sessions Hermes',
+    new_0_5_5_3: 'La page d\'historique gère les sessions de manière indépendante',
+    new_0_5_5_4: 'Chargement automatique de la première session CLI',
+    new_0_5_5_5: 'Composant HistoryMessageList avec injection de props',
+    new_0_5_5_6: 'Filtrage des messages vides et des tools sans toolName',
+    new_0_5_5_7: 'Suppression du cache localStorage des sessions',
+    new_0_5_5_8: 'Optimisation du changement de profil',
     new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
     new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
     new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
diff --git a/packages/client/src/i18n/locales/ja.ts b/packages/client/src/i18n/locales/ja.ts
index 08e96e8..3466a5e 100644
--- a/packages/client/src/i18n/locales/ja.ts
+++ b/packages/client/src/i18n/locales/ja.ts
@@ -67,6 +67,8 @@ export default {
   // サイドバー
   sidebar: {
     chat: 'チャット',
+    search: '検索',
+    history: '履歴',
     jobs: 'ジョブ',
     models: 'モデル',
     profiles: 'プロファイル',
@@ -563,7 +565,15 @@ export default {
 
   // 更新履歴
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
+
+    new_0_5_5_1: '🎉 労働者の日！今日はお休みです、何卒ご理解ください',
+    new_0_5_5_2: 'Hermesセッション履歴ページを追加',
+    new_0_5_5_3: '履歴ページはアクティブチャットに干渉せずにセッション管理',
+    new_0_5_5_4: '履歴ページは最初のCLIセッションを自動選択',
+    new_0_5_5_5: 'HistoryMessageListコンポーネントを追加',
+    new_0_5_5_6: '空のメッセージとtoolNameなしのtoolメッセージをフィルタリング',
+    new_0_5_5_7: 'localStorageセッションキャッシュを削除、バックエンドから直接取得',
+    new_0_5_5_8: 'プロフィール切り替えを最適化',
     new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
     new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
     new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
diff --git a/packages/client/src/i18n/locales/ko.ts b/packages/client/src/i18n/locales/ko.ts
index 27ec558..472f7ed 100644
--- a/packages/client/src/i18n/locales/ko.ts
+++ b/packages/client/src/i18n/locales/ko.ts
@@ -67,6 +67,8 @@ export default {
   // 사이드바
   sidebar: {
     chat: '채팅',
+    search: '검색',
+    history: '기록',
     jobs: '예약 작업',
     models: '모델',
     profiles: '프로필',
@@ -563,7 +565,15 @@ export default {
 
   // 변경 이력
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
+
+    new_0_5_5_1: '🎉 노동절 감사합니다! 오늘은 쉬니까 양해 부탁드립니다',
+    new_0_5_5_2: 'Hermes 세션 기록 페이지 추가',
+    new_0_5_5_3: '기록 페이지는 독립적으로 세션 관리',
+    new_0_5_5_4: '기록 페이지는 첫 번째 CLI 세션 자동 선택',
+    new_0_5_5_5: 'HistoryMessageList 컴포넌트 추가',
+    new_0_5_5_6: '빈 메시지와 toolName 없는 tool 메시지 필터링',
+    new_0_5_5_7: 'localStorage 세션 캐시 제거, 백엔드에서 직접 가져오기',
+    new_0_5_5_8: '프로필 전환 최적화',
     new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
     new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
     new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
diff --git a/packages/client/src/i18n/locales/pt.ts b/packages/client/src/i18n/locales/pt.ts
index 9ee9f26..159b385 100644
--- a/packages/client/src/i18n/locales/pt.ts
+++ b/packages/client/src/i18n/locales/pt.ts
@@ -67,6 +67,8 @@ export default {
   // Sidebar
   sidebar: {
     chat: 'Chat',
+    search: 'Pesquisar',
+    history: 'Historico',
     jobs: 'Tarefas agendadas',
     models: 'Modelos',
     profiles: 'Perfis',
@@ -563,7 +565,15 @@ jobTriggered: 'Job acionado',
 
   // Registro de alteracoes
   changelog: {
-    new_0_5_4_1: 'Happy Labor Day! No work this Labor Day, please bear with us if there are any issues 🎉',
+
+    new_0_5_5_1: '🎉 Feliz Dia do Trabalhador! Hoje não se trabalha, obrigado pela compreensão',
+    new_0_5_5_2: 'Adicionada página de histórico para sessões Hermes',
+    new_0_5_5_3: 'Página de histórico gerencia sessões de forma independente',
+    new_0_5_5_4: 'Carregamento automático da primeira sessão CLI',
+    new_0_5_5_5: 'Componente HistoryMessageList com injeção de props',
+    new_0_5_5_6: 'Filtragem de mensagens vazias e tools sem toolName',
+    new_0_5_5_7: 'Removido cache de sessões localStorage, dados do backend',
+    new_0_5_5_8: 'Otimizada troca de perfil',
     new_0_5_4_2: 'Fix concurrent chat sessions event cross-talk with WebSocket event routing refactoring',
     new_0_5_4_3: 'Fix cron job edit payloads with partial PATCH to support long prompt name-only edits',
     new_0_5_4_4: 'Fix web terminal Hermes CLI availability after Docker deployment',
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index fab4626..1a663ed 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -70,6 +70,7 @@ export default {
   sidebar: {
     chat: '对话',
     search: '搜索',
+    history: '历史',
     jobs: '任务',
     models: '模型',
     profiles: '用户',
@@ -736,13 +737,20 @@ export default {
 
   // 更新日志
   changelog: {
-    new_0_5_4_1: '五一劳动节快乐！这个劳动节就不劳动啦，如果有问题大家忍忍 🎉',
-    new_0_5_4_2: '修复并发聊天会话事件串扰问题，重构 WebSocket 事件路由机制',
-    new_0_5_4_3: '修复 cron job 编辑 payload，支持长提示词的仅名称编辑',
-    new_0_5_4_4: '修复 Docker 部署后 Web 终端无法使用 Hermes CLI 的问题',
-    new_0_5_4_5: '添加工作区对话框标题 i18n 翻译，改进会话持久化',
-    new_0_5_4_6: '支持代码块复制反馈，显示用户通知',
-    new_0_5_4_7: '对齐使用分析与 Hermes 状态数据库架构',
+    new_0_5_5_1: '🎉 五一劳动节快乐！这个劳动节就不劳动啦，如果有问题大家忍忍',
+    new_0_5_5_2: '新增历史页面，用于浏览 Hermes 会话历史记录',
+    new_0_5_5_3: '历史页面独立管理会话状态，不影响当前聊天页面的活动会话',
+    new_0_5_5_4: '历史页面默认自动加载并选中第一个 CLI 类型的会话',
+    new_0_5_5_5: '新增 HistoryMessageList 组件，支持通过 props 注入会话数据',
+    new_0_5_5_6: '过滤空内容消息和无 toolName 的 tool 消息，提升历史记录显示质量',
+    new_0_5_5_7: '移除 localStorage 会话缓存，所有会话数据改为直接从后端获取',
+    new_0_5_5_8: '优化 profile 切换逻辑，移除废弃的缓存清理调用',
+    new_0_5_4_1: '修复并发聊天会话事件串扰问题，重构 WebSocket 事件路由机制',
+    new_0_5_4_2: '修复 cron job 编辑 payload，支持长提示词的仅名称编辑',
+    new_0_5_4_3: '修复 Docker 部署后 Web 终端无法使用 Hermes CLI 的问题',
+    new_0_5_4_4: '添加工作区对话框标题 i18n 翻译，改进会话持久化',
+    new_0_5_4_5: '支持代码块复制反馈，显示用户通知',
+    new_0_5_4_6: '对齐使用分析与 Hermes 状态数据库架构',
     new_0_5_3_1: '改进思考过程显示，支持页面刷新后持久化',
     new_0_5_3_2: '优化字符串化数组格式解析，自动提取思考/文本/工具调用',
     new_0_5_3_3: '改进日志显示，移除省略号完整展示日志内容',
diff --git a/packages/client/src/router/index.ts b/packages/client/src/router/index.ts
index f2bc1db..fdc351a 100644
--- a/packages/client/src/router/index.ts
+++ b/packages/client/src/router/index.ts
@@ -15,6 +15,11 @@ const router = createRouter({
       name: 'hermes.chat',
       component: () => import('@/views/hermes/ChatView.vue'),
     },
+    {
+      path: '/hermes/history',
+      name: 'hermes.history',
+      component: () => import('@/views/hermes/HistoryView.vue'),
+    },
     {
       path: '/hermes/jobs',
       name: 'hermes.jobs',
diff --git a/packages/client/src/stores/hermes/chat.ts b/packages/client/src/stores/hermes/chat.ts
index 6f85dd5..5cf0537 100644
--- a/packages/client/src/stores/hermes/chat.ts
+++ b/packages/client/src/stores/hermes/chat.ts
@@ -215,14 +215,13 @@ function isQuotaExceededError(error: unknown): boolean {
 
 function recoverStorageQuota() {
   try {
+    // 清理所有会话相关的旧缓存（已完全废弃）
     const prefixes = [
-      `hermes_session_msgs_v1_${getProfileName()}_`,
-      `hermes_in_flight_v1_${getProfileName()}_`,
+      'hermes_sessions_cache_v1_',
+      'hermes_session_msgs_v1_',
+      'hermes_session_pins_v1_',
+      'hermes_human_only_v1_',
     ]
-    if (getProfileName() === 'default') {
-      prefixes.push('hermes_session_msgs_v1_')
-      prefixes.push('hermes_in_flight_v1_')
-    }
     const keysToRemove: string[] = []
     for (let i = 0; i < localStorage.length; i++) {
       const key = localStorage.key(i)
@@ -233,6 +232,9 @@ function recoverStorageQuota() {
       }
     }
     keysToRemove.forEach(key => removeItem(key))
+    if (keysToRemove.length > 0) {
+      console.log(`Recovered storage: cleared ${keysToRemove.length} old session cache entries`)
+    }
   } catch {
     // ignore
   }
@@ -538,6 +540,17 @@ export const useChatStore = defineStore('chat', () => {
     if (s) s.messages.push(msg)
   }
 
+  function addOrUpdateSession(session: Session) {
+    const existingIndex = sessions.value.findIndex(s => s.id === session.id)
+    if (existingIndex !== -1) {
+      // Update existing session
+      sessions.value[existingIndex] = session
+    } else {
+      // Add new session
+      sessions.value.push(session)
+    }
+  }
+
   function updateMessage(sessionId: string, id: string, update: Partial<Message>) {
     const s = sessions.value.find(s => s.id === sessionId)
     if (!s) return
@@ -1346,6 +1359,7 @@ export const useChatStore = defineStore('chat', () => {
     newChat,
     switchSession,
     switchSessionModel,
+    addOrUpdateSession,
     clearProviderFromSessions,
     deleteSession,
     sendMessage,
diff --git a/packages/client/src/stores/hermes/profiles.ts b/packages/client/src/stores/hermes/profiles.ts
index 2707879..b9a31f2 100644
--- a/packages/client/src/stores/hermes/profiles.ts
+++ b/packages/client/src/stores/hermes/profiles.ts
@@ -24,6 +24,8 @@ export const useProfilesStore = defineStore('profiles', () => {
         activeProfileName.value = activeProfile.value.name
         localStorage.setItem(ACTIVE_PROFILE_STORAGE_KEY, activeProfile.value.name)
       }
+      // 清理所有会话缓存（不再使用 localStorage 缓存）
+      clearAllSessionCaches()
     } catch (err) {
       console.error('Failed to fetch profiles:', err)
     } finally {
@@ -52,31 +54,15 @@ export const useProfilesStore = defineStore('profiles', () => {
     const ok = await profilesApi.deleteProfile(name)
     if (ok) {
       delete detailMap.value[name]
-      // 清理该 profile 的 localStorage 缓存
-      clearProfileCache(name)
       await fetchProfiles()
     }
     return ok
   }
 
-  // 清理指定 profile 的所有 localStorage 缓存（精确匹配缓存 key 前缀）
-  function clearProfileCache(profileName: string) {
-    const prefixes = [
-      `hermes_sessions_cache_v1_${profileName}`,
-      `hermes_session_msgs_v1_${profileName}_`,
-      `hermes_in_flight_v1_${profileName}_`,
-      `hermes_active_session_${profileName}`,
-      `hermes_session_pins_v1_${profileName}`,
-      `hermes_human_only_v1_${profileName}`,
-    ]
-    const keysToRemove: string[] = []
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i)
-      if (key && prefixes.some(p => key.startsWith(p))) {
-        keysToRemove.push(key)
-      }
-    }
-    keysToRemove.forEach(key => localStorage.removeItem(key))
+  // 清理所有 profile 的会话缓存
+  function clearAllSessionCaches() {
+    // 注意：不再清理任何缓存，因为已经不再使用 localStorage 缓存会话数据
+    // 所有会话数据都从服务器实时获取
   }
 
   async function renameProfile(name: string, newName: string) {
@@ -124,5 +110,6 @@ export const useProfilesStore = defineStore('profiles', () => {
     switchProfile,
     exportProfile,
     importProfile,
+    clearAllSessionCaches,
   }
 })
diff --git a/packages/client/src/views/hermes/HistoryView.vue b/packages/client/src/views/hermes/HistoryView.vue
new file mode 100644
index 0000000..37b805f
--- /dev/null
+++ b/packages/client/src/views/hermes/HistoryView.vue
@@ -0,0 +1,829 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useChatStore, type Session } from '@/stores/hermes/chat'
+import { useAppStore } from '@/stores/hermes/app'
+import { useProfilesStore } from '@/stores/hermes/profiles'
+import { useSessionBrowserPrefsStore } from '@/stores/hermes/session-browser-prefs'
+import { NButton, NDropdown, NInput, NModal, NTooltip, useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { getSourceLabel } from '@/shared/session-display'
+import { copyToClipboard } from '@/utils/clipboard'
+import FolderPicker from '@/components/hermes/chat/FolderPicker.vue'
+import HistoryMessageList from '@/components/hermes/chat/HistoryMessageList.vue'
+import SessionListItem from '@/components/hermes/chat/SessionListItem.vue'
+import { renameSession, setSessionWorkspace, fetchHermesSessions, fetchHermesSession, type SessionSummary } from '@/api/hermes/sessions'
+
+const chatStore = useChatStore()
+const appStore = useAppStore()
+const profilesStore = useProfilesStore()
+const sessionBrowserPrefsStore = useSessionBrowserPrefsStore()
+const message = useMessage()
+const { t } = useI18n()
+
+// Hermes history sessions (exclude api_server)
+const hermesSessions = ref<SessionSummary[]>([])
+const hermesSessionsLoading = ref(false)
+const hermesSessionsLoaded = ref(false)
+// History page's own selected session (independent from chatStore)
+const historySessionId = ref<string | null>(null)
+const historySession = ref<Session | null>(null)
+
+async function loadHermesSessions() {
+  if (hermesSessionsLoading.value) return
+  hermesSessionsLoading.value = true
+  try {
+    hermesSessions.value = await fetchHermesSessions()
+    hermesSessionsLoaded.value = true
+  } catch (err) {
+    console.error('Failed to load Hermes sessions:', err)
+  } finally {
+    hermesSessionsLoading.value = false
+  }
+}
+
+// Initialize synchronously from the media query so first paint is correct.
+const showSessions = ref(
+  typeof window === 'undefined' || !window.matchMedia('(max-width: 768px)').matches,
+)
+let mobileQuery: MediaQueryList | null = null
+const isMobile = ref(false)
+
+async function handleSessionClick(sessionId: string) {
+  // First, fetch the Hermes session detail
+  const sessionDetail = await fetchHermesSession(sessionId)
+  if (!sessionDetail) {
+    message.error(t('chat.sessionNotFound'))
+    return
+  }
+
+  // Convert SessionDetail to Session format and add to chatStore
+  const sessionData: Session = {
+    id: sessionDetail.id,
+    title: sessionDetail.title || '',
+    source: sessionDetail.source,
+    createdAt: sessionDetail.started_at * 1000,
+    updatedAt: (sessionDetail.last_active || sessionDetail.started_at) * 1000,
+    model: sessionDetail.model,
+    messageCount: sessionDetail.message_count,
+    inputTokens: sessionDetail.input_tokens,
+    outputTokens: sessionDetail.output_tokens,
+    endedAt: sessionDetail.ended_at ? sessionDetail.ended_at * 1000 : undefined,
+    lastActiveAt: sessionDetail.last_active ? sessionDetail.last_active * 1000 : undefined,
+    workspace: sessionDetail.workspace || undefined,
+    messages: sessionDetail.messages.map(m => {
+      const msg: any = {
+        id: String(m.id),
+        sessionId: m.session_id,
+        role: m.role,
+        content: m.content || '',
+        timestamp: m.timestamp * 1000,
+      }
+
+      // Preserve tool-related fields
+      if (m.role === 'tool') {
+        msg.toolName = m.tool_name
+        msg.toolArgs = m.tool_calls?.[0]?.function?.arguments
+          ? JSON.stringify(m.tool_calls[0].function.arguments)
+          : undefined
+        msg.toolStatus = 'done'
+      }
+
+      // Preserve reasoning field
+      if (m.reasoning) {
+        msg.reasoning = m.reasoning
+      }
+
+      return msg
+    }),
+  }
+
+  // Set history page's own session state (independent from chatStore)
+  historySessionId.value = sessionData.id
+  historySession.value = sessionData
+
+  if (mobileQuery?.matches) showSessions.value = false
+}
+
+function handleMobileChange(e: MediaQueryListEvent | MediaQueryList) {
+  isMobile.value = e.matches
+  if (e.matches && showSessions.value) {
+    showSessions.value = false
+  }
+}
+
+onMounted(async () => {
+  appStore.loadModels()
+  await profilesStore.fetchProfiles()
+  await loadHermesSessions()
+
+  mobileQuery = window.matchMedia('(max-width: 768px)')
+  handleMobileChange(mobileQuery)
+  mobileQuery.addEventListener('change', handleMobileChange)
+})
+
+onUnmounted(() => {
+  mobileQuery?.removeEventListener('change', handleMobileChange)
+})
+
+const showRenameModal = ref(false)
+const renameValue = ref('')
+const renameSessionId = ref<string | null>(null)
+const renameInputRef = ref<InstanceType<typeof NInput> | null>(null)
+const collapsedGroups = ref<Set<string>>(new Set(JSON.parse(localStorage.getItem('hermes_collapsed_groups') || '[]')))
+
+// Convert SessionSummary to Session format
+function sessionSummaryToSession(summary: SessionSummary): Session {
+  return {
+    id: summary.id,
+    title: summary.title || '',
+    source: summary.source,
+    createdAt: summary.started_at * 1000,
+    updatedAt: (summary.last_active || summary.started_at) * 1000,
+    model: summary.model,
+    messageCount: summary.message_count,
+    inputTokens: summary.input_tokens,
+    outputTokens: summary.output_tokens,
+    endedAt: summary.ended_at ? summary.ended_at * 1000 : undefined,
+    lastActiveAt: summary.last_active ? summary.last_active * 1000 : undefined,
+    workspace: summary.workspace || undefined,
+    messages: [],
+  }
+}
+
+// Computed sessions from Hermes API
+const historySessions = computed<Session[]>(() =>
+  hermesSessions.value.map(sessionSummaryToSession)
+)
+
+// Source sort order: api_server first, cron last, others alphabetical
+function sourceSortKey(source: string): number {
+  if (source === 'api_server') return -1
+  if (source === 'cron') return 999
+  return 0
+}
+
+function sortSessionsWithActiveFirst(items: Session[]): Session[] {
+  return [...items].sort((a, b) => {
+    return (b.updatedAt || 0) - (a.updatedAt || 0)
+  })
+}
+
+// Group sessions by source, with sort order
+interface SessionGroup {
+  source: string
+  label: string
+  sessions: Session[]
+}
+
+const pinnedSessions = computed(() =>
+  sortSessionsWithActiveFirst(historySessions.value.filter(session => sessionBrowserPrefsStore.isPinned(session.id))),
+)
+
+const groupedSessions = computed<SessionGroup[]>(() => {
+  const map = new Map<string, Session[]>()
+  for (const s of historySessions.value) {
+    if (sessionBrowserPrefsStore.isPinned(s.id)) continue
+    const key = s.source || ''
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push(s)
+  }
+
+  const keys = [...map.keys()].sort((a, b) => {
+    const ka = sourceSortKey(a)
+    const kb = sourceSortKey(b)
+    if (ka !== kb) return ka - kb
+    return a.localeCompare(b)
+  })
+
+  return keys.map(key => ({
+    source: key,
+    label: key ? getSourceLabel(key) : t('chat.other'),
+    sessions: sortSessionsWithActiveFirst(map.get(key)!),
+  }))
+})
+
+function toggleGroup(source: string) {
+  const isExpanded = !collapsedGroups.value.has(source)
+  if (isExpanded) {
+    collapsedGroups.value = new Set([...collapsedGroups.value, source])
+  } else {
+    collapsedGroups.value = new Set(
+      groupedSessions.value.map(g => g.source).filter(s => s !== source),
+    )
+    const group = groupedSessions.value.find(g => g.source === source)
+    if (group?.sessions.length) {
+      // Auto-select and load first session when expanding group
+      handleSessionClick(group.sessions[0].id)
+    }
+  }
+  localStorage.setItem('hermes_collapsed_groups', JSON.stringify([...collapsedGroups.value]))
+}
+
+watch(groupedSessions, groups => {
+  if (localStorage.getItem('hermes_collapsed_groups') !== null) {
+    const activeSource = chatStore.activeSession?.source
+    if (activeSource && collapsedGroups.value.has(activeSource)) {
+      collapsedGroups.value = new Set([...collapsedGroups.value].filter(source => source !== activeSource))
+      localStorage.setItem('hermes_collapsed_groups', JSON.stringify([...collapsedGroups.value]))
+    }
+    return
+  }
+  // Default: collapse all groups except the first one
+  if (groups.length > 0) {
+    collapsedGroups.value = new Set(groups.slice(1).map(group => group.source))
+    localStorage.setItem('hermes_collapsed_groups', JSON.stringify([...collapsedGroups.value]))
+  }
+}, { once: true })
+
+// Auto-load first CLI session when Hermes sessions are loaded
+watch(hermesSessionsLoaded, (loaded) => {
+  if (loaded && hermesSessions.value.length > 0) {
+    // Only auto-load if no session is currently active
+    if (!historySessionId.value || !hermesSessions.value.find(s => s.id === historySessionId.value)) {
+      // Find first CLI session
+      const firstCliSession = hermesSessions.value.find(s => s.source === 'cli')
+      if (firstCliSession) {
+        // Ensure the CLI group is expanded
+        if (collapsedGroups.value.has('cli')) {
+          collapsedGroups.value = new Set([...collapsedGroups.value].filter(s => s !== 'cli'))
+        }
+        // Load session details
+        handleSessionClick(firstCliSession.id)
+      }
+      // If no CLI session exists, don't auto-load any session
+    }
+  }
+}, { once: true })
+
+const activeSessionTitle = computed(() =>
+  historySession.value?.title || t('chat.newChat'),
+)
+
+const activeSessionSource = computed(() =>
+  historySession.value?.source || '',
+)
+
+async function copySessionId(id?: string) {
+  const sessionId = id || historySessionId.value
+  if (sessionId) {
+    const ok = await copyToClipboard(sessionId)
+    if (ok) message.success(t('common.copied'))
+    else message.error(t('common.copied') + ' ✗')
+  }
+}
+
+const contextSessionId = ref<string | null>(null)
+const contextSessionPinned = computed(() =>
+  contextSessionId.value ? sessionBrowserPrefsStore.isPinned(contextSessionId.value) : false,
+)
+
+const contextMenuOptions = computed(() => [
+  { label: t(contextSessionPinned.value ? 'chat.unpin' : 'chat.pin'), key: 'pin' },
+  { label: t('chat.rename'), key: 'rename' },
+  { label: t('chat.setWorkspace'), key: 'workspace' },
+  { label: t('chat.copySessionId'), key: 'copy-id' },
+])
+
+function handleContextMenu(e: MouseEvent, sessionId: string) {
+  e.preventDefault()
+  contextSessionId.value = sessionId
+  showContextMenu.value = true
+  contextMenuX.value = e.clientX
+  contextMenuY.value = e.clientY
+}
+
+const showContextMenu = ref(false)
+const contextMenuX = ref(0)
+const contextMenuY = ref(0)
+
+function handleContextMenuSelect(key: string) {
+  showContextMenu.value = false
+  if (!contextSessionId.value) return
+  if (key === 'pin') {
+    sessionBrowserPrefsStore.togglePinned(contextSessionId.value)
+    return
+  }
+  if (key === 'copy-id') {
+    copySessionId(contextSessionId.value)
+  } else if (key === 'workspace') {
+    const session = historySessions.value.find(s => s.id === contextSessionId.value)
+    workspaceSessionId.value = contextSessionId.value
+    workspaceValue.value = session?.workspace || ''
+    showWorkspaceModal.value = true
+  } else if (key === 'rename') {
+    const session = historySessions.value.find(s => s.id === contextSessionId.value)
+    renameSessionId.value = contextSessionId.value
+    renameValue.value = session?.title || ''
+    showRenameModal.value = true
+    nextTick(() => {
+      renameInputRef.value?.focus()
+    })
+  }
+}
+
+function handleClickOutside() {
+  showContextMenu.value = false
+}
+
+async function handleRenameConfirm() {
+  if (!renameSessionId.value || !renameValue.value.trim()) return
+  const ok = await renameSession(renameSessionId.value, renameValue.value.trim())
+  if (ok) {
+    // Reload Hermes sessions to get updated title
+    await loadHermesSessions()
+    message.success(t('chat.renamed'))
+  } else {
+    message.error(t('chat.renameFailed'))
+  }
+  showRenameModal.value = false
+}
+
+const showWorkspaceModal = ref(false)
+const workspaceValue = ref('')
+const workspaceSessionId = ref<string | null>(null)
+
+async function handleWorkspaceConfirm() {
+  if (!workspaceSessionId.value) return
+  const ok = await setSessionWorkspace(workspaceSessionId.value, workspaceValue.value || null)
+  if (ok) {
+    // Reload Hermes sessions to get updated workspace
+    await loadHermesSessions()
+    message.success(t('chat.workspaceSet'))
+  } else {
+    message.error(t('chat.workspaceSetFailed'))
+  }
+  showWorkspaceModal.value = false
+}
+</script>
+
+<template>
+  <div class="history-panel">
+    <div class="session-backdrop" :class="{ active: showSessions }" @click="showSessions = false" />
+    <aside class="session-list" :class="{ collapsed: !showSessions }">
+      <div class="session-list-header">
+        <span v-if="showSessions" class="session-list-title">{{ t('chat.sessions') }}</span>
+        <div class="session-list-actions">
+          <button class="session-close-btn" @click="showSessions = false">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+      </div>
+      <div v-if="showSessions" class="session-items">
+        <div v-if="hermesSessionsLoading && hermesSessions.length === 0" class="session-loading">{{ t('common.loading') }}</div>
+        <div v-else-if="hermesSessions.length === 0" class="session-empty">{{ t('chat.noSessions') }}</div>
+
+        <template v-if="pinnedSessions.length > 0">
+          <div class="session-group-header session-group-header--static">
+            <span class="session-group-label">{{ t('chat.pinned') }}</span>
+            <span class="session-group-count">{{ pinnedSessions.length }}</span>
+          </div>
+          <SessionListItem
+            v-for="s in pinnedSessions"
+            :key="`pinned-${s.id}`"
+            :session="s"
+            :active="s.id === historySessionId"
+            :pinned="true"
+            :can-delete="false"
+            :streaming="false"
+            @select="handleSessionClick(s.id)"
+            @contextmenu="handleContextMenu($event, s.id)"
+          />
+        </template>
+
+        <template v-for="group in groupedSessions" :key="group.source">
+          <div class="session-group-header" @click="toggleGroup(group.source)">
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="group-chevron" :class="{ collapsed: collapsedGroups.has(group.source) }"><polyline points="9 18 15 12 9 6"/></svg>
+            <span class="session-group-label">{{ group.label }}</span>
+            <span class="session-group-count">{{ group.sessions.length }}</span>
+          </div>
+          <template v-if="!collapsedGroups.has(group.source)">
+            <SessionListItem
+              v-for="s in group.sessions"
+              :key="s.id"
+              :session="s"
+              :active="s.id === historySessionId"
+              :pinned="false"
+              :can-delete="false"
+              :streaming="false"
+              @select="handleSessionClick(s.id)"
+              @contextmenu="handleContextMenu($event, s.id)"
+            />
+          </template>
+        </template>
+      </div>
+    </aside>
+
+    <NDropdown
+      placement="bottom-start"
+      trigger="manual"
+      :x="contextMenuX"
+      :y="contextMenuY"
+      :options="contextMenuOptions"
+      :show="showContextMenu"
+      @select="handleContextMenuSelect"
+      @clickoutside="handleClickOutside"
+    />
+
+    <NModal
+      v-model:show="showRenameModal"
+      preset="dialog"
+      :title="t('chat.renameSession')"
+      :positive-text="t('common.ok')"
+      :negative-text="t('common.cancel')"
+      @positive-click="handleRenameConfirm"
+    >
+      <NInput
+        ref="renameInputRef"
+        v-model:value="renameValue"
+        :placeholder="t('chat.enterNewTitle')"
+        @keydown.enter="handleRenameConfirm"
+      />
+    </NModal>
+
+    <NModal
+      v-model:show="showWorkspaceModal"
+      preset="dialog"
+      :title="t('chat.setWorkspaceTitle')"
+      :positive-text="t('common.ok')"
+      :negative-text="t('common.cancel')"
+      style="width: 520px"
+      @positive-click="handleWorkspaceConfirm"
+    >
+      <FolderPicker v-model="workspaceValue" />
+    </NModal>
+
+    <div class="chat-main">
+      <header class="chat-header">
+        <div class="header-left">
+          <NButton quaternary size="small" @click="showSessions = !showSessions" circle>
+            <template #icon>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+            </template>
+          </NButton>
+          <span class="header-session-title">{{ activeSessionTitle }}</span>
+          <span v-if="activeSessionSource" class="source-badge">{{ getSourceLabel(activeSessionSource) }}</span>
+          <span v-if="historySession?.workspace" class="workspace-badge" :title="historySession.workspace">📁 {{ historySession.workspace.split('/').pop() || historySession.workspace }}</span>
+        </div>
+        <div class="header-actions">
+          <NTooltip trigger="hover">
+            <template #trigger>
+              <NButton quaternary size="small" @click="copySessionId()" circle>
+                <template #icon>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                </template>
+              </NButton>
+            </template>
+            {{ t('chat.copySessionId') }}
+          </NTooltip>
+        </div>
+      </header>
+
+      <HistoryMessageList :session="historySession" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as *;
+
+.history-panel {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.session-list {
+  width: 220px;
+  border-right: 1px solid $border-color;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition: width $transition-normal, opacity $transition-normal;
+  overflow: hidden;
+
+  &.collapsed {
+    width: 0;
+    border-right: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @media (max-width: $breakpoint-mobile) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    z-index: 10;
+    background: $bg-card;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+    width: 280px;
+
+    &.collapsed {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+}
+
+@media (max-width: $breakpoint-mobile) {
+  .session-close-btn {
+    display: flex;
+  }
+
+  .session-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 9;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity $transition-fast;
+
+    &.active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.session-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  flex-shrink: 0;
+}
+
+.session-list-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.session-close-btn {
+  display: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: $text-secondary;
+  padding: 4px;
+  border-radius: $radius-sm;
+
+  &:hover {
+    background: rgba($accent-primary, 0.06);
+  }
+}
+
+.session-list-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.session-group-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.session-group-header--static {
+  cursor: default;
+}
+
+.group-chevron {
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+  transform: rotate(90deg);
+
+  &.collapsed {
+    transform: rotate(0deg);
+  }
+}
+
+.session-group-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.session-group-count {
+  font-size: 10px;
+  color: $text-muted;
+  font-weight: 400;
+}
+
+.session-items {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 6px 12px;
+}
+
+.session-loading,
+.session-empty {
+  padding: 16px 10px;
+  font-size: 12px;
+  color: $text-muted;
+  text-align: center;
+}
+
+:deep(.session-item) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: none;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  text-align: left;
+  color: $text-secondary;
+  transition: all $transition-fast;
+  margin-bottom: 2px;
+
+  &:hover {
+    background: rgba($accent-primary, 0.06);
+    color: $text-primary;
+
+    .session-item-delete {
+      opacity: 1;
+    }
+  }
+
+  &.active {
+    background: rgba(var(--accent-primary-rgb), 0.12);
+    color: $text-primary;
+    font-weight: 500;
+  }
+
+  &.active .session-item-title {
+    color: $accent-primary;
+  }
+}
+
+:deep(.session-item-content) {
+  flex: 1;
+  overflow: hidden;
+}
+
+:deep(.session-item-title-row) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+:deep(.session-item-title) {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep(.session-item-streaming) {
+  display: inline-block;
+  flex-shrink: 0;
+  margin-right: 4px;
+  vertical-align: middle;
+  animation: spin 1.2s linear infinite;
+  color: $accent-primary;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+:deep(.session-item-pin) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: $accent-primary;
+}
+
+:deep(.session-item-time) {
+  font-size: 11px;
+  color: $text-muted;
+}
+
+:deep(.session-item-meta) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 2px;
+}
+
+:deep(.session-item-model) {
+  font-size: 10px;
+  color: $accent-primary;
+  background: rgba($accent-primary, 0.08);
+  padding: 0 5px;
+  border-radius: 3px;
+  line-height: 16px;
+  flex-shrink: 0;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.session-item-delete) {
+  flex-shrink: 0;
+  opacity: 0.5;
+  padding: 2px;
+  border: none;
+  background: none;
+  color: $text-muted;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all $transition-fast;
+
+  &:hover {
+    color: $error;
+    background: rgba($error, 0.1);
+  }
+}
+
+.chat-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 21px 20px;
+  border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.header-session-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.source-badge {
+  font-size: 10px;
+  color: $text-muted;
+  background: rgba($text-muted, 0.12);
+  padding: 1px 7px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+@media (max-width: $breakpoint-mobile) {
+  .chat-header {
+    padding: 16px 12px 16px 52px;
+  }
+}
+
+.workspace-badge {
+  font-size: 11px;
+  color: $text-muted;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2px 8px;
+  border-radius: 4px;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+}
+</style>
diff --git a/packages/server/src/controllers/hermes/sessions.ts b/packages/server/src/controllers/hermes/sessions.ts
index ff92746..ac00737 100644
--- a/packages/server/src/controllers/hermes/sessions.ts
+++ b/packages/server/src/controllers/hermes/sessions.ts
@@ -160,6 +160,26 @@ export async function list(ctx: any) {
   ctx.body = { sessions: filterPendingDeletedSessions(sessions) }
 }
 
+/**
+ * List Hermes sessions only (exclude api_server source)
+ * GET /api/hermes/sessions/hermes?source=&limit=
+ */
+export async function listHermesSessions(ctx: any) {
+  const source = (ctx.query.source as string) || undefined
+  const limit = ctx.query.limit ? parseInt(ctx.query.limit as string, 10) : undefined
+
+  try {
+    const sessions = await listSessionSummaries(source, limit && limit > 0 ? limit : 2000)
+    ctx.body = { sessions: filterPendingDeletedSessions(sessions.filter(s => s.source !== 'api_server' && s.source !== 'cron')) }
+    return
+  } catch (err) {
+    logger.warn(err, 'Hermes Session DB: summary query failed, falling back to CLI')
+  }
+
+  const sessions = await hermesCli.listSessions(source, limit)
+  ctx.body = { sessions: filterPendingDeletedSessions(sessions.filter(s => s.source !== 'api_server')) }
+}
+
 export async function search(ctx: any) {
   if (useLocalSessionStore()) {
     const q = typeof ctx.query.q === 'string' ? ctx.query.q : ''
@@ -207,6 +227,27 @@ export async function get(ctx: any) {
   ctx.body = { session }
 }
 
+/**
+ * Get Hermes session detail only (exclude api_server source)
+ * GET /api/hermes/sessions/hermes/:id
+ */
+export async function getHermesSession(ctx: any) {
+
+  const session = await hermesCli.getSession(ctx.params.id)
+  if (!session) {
+    ctx.status = 404
+    ctx.body = { error: 'Session not found' }
+    return
+  }
+  // Filter out api_server sessions
+  if (session.source === 'api_server') {
+    ctx.status = 404
+    ctx.body = { error: 'Session not found' }
+    return
+  }
+  ctx.body = { session }
+}
+
 export async function remove(ctx: any) {
   if (useLocalSessionStore()) {
     const sessionId = ctx.params.id
diff --git a/packages/server/src/routes/hermes/sessions.ts b/packages/server/src/routes/hermes/sessions.ts
index f8180de..d67dc22 100644
--- a/packages/server/src/routes/hermes/sessions.ts
+++ b/packages/server/src/routes/hermes/sessions.ts
@@ -7,6 +7,8 @@ sessionRoutes.get('/api/hermes/sessions/conversations', ctrl.listConversations)
 sessionRoutes.get('/api/hermes/sessions/conversations/:id/messages', ctrl.getConversationMessages)
 sessionRoutes.get('/api/hermes/sessions/conversations/:id/messages/paginated', ctrl.getConversationMessagesPaginated)
 sessionRoutes.get('/api/hermes/sessions', ctrl.list)
+sessionRoutes.get('/api/hermes/sessions/hermes', ctrl.listHermesSessions)
+sessionRoutes.get('/api/hermes/sessions/hermes/:id', ctrl.getHermesSession)
 sessionRoutes.get('/api/hermes/search/sessions', ctrl.search)
 sessionRoutes.get('/api/hermes/sessions/search', ctrl.search)
 sessionRoutes.get('/api/hermes/sessions/usage', ctrl.usageBatch)