From b4f809d8b5a9b2b378fc534c2def1ebc35cba1da Mon Sep 17 00:00:00 2001
From: ekko <fqsy1416@gmail.com>
Date: Sun, 19 Apr 2026 10:46:33 +0800
Subject: [PATCH] fix: improve chat scroll behavior and dark mode readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Smart auto-scroll: only follow SSE stream when user is near bottom (200px threshold), scroll once on send/switch session
- Brighten dark mode text colors (primary #e0→#f0, secondary #a0→#c0, muted #66→#88)
- Fix tool-call panel height to match thinking video (120px→213px)
- Fix tool-call item background invisible in dark mode
- Fix gateway start button using hardcoded dark color

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .gitignore                                    |  2 +-
 .../components/hermes/chat/MessageList.vue    | 41 ++++++++++++++++---
 packages/client/src/styles/variables.scss     | 12 +++---
 .../client/src/views/hermes/GatewaysView.vue  |  3 +-
 4 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index e617e9c..f225f24 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,7 @@ packages/server/data/
 packages/server/node_modules/
 .hermes-web-ui/
 hermes_data/
-
+hermes-dependencies.md
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
diff --git a/packages/client/src/components/hermes/chat/MessageList.vue b/packages/client/src/components/hermes/chat/MessageList.vue
index 03a177e..49959ac 100644
--- a/packages/client/src/components/hermes/chat/MessageList.vue
+++ b/packages/client/src/components/hermes/chat/MessageList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from "vue";
+import { ref, computed, watch, nextTick, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import MessageItem from "./MessageItem.vue";
 import { useChatStore } from "@/stores/hermes/chat";
@@ -31,6 +31,12 @@ const currentToolCalls = computed(() => {
   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) {
@@ -39,18 +45,37 @@ function scrollToBottom() {
   });
 }
 
-watch(() => chatStore.messages.length, scrollToBottom);
+// Scroll to bottom once when messages are first loaded
 watch(
-  () => chatStore.messages[chatStore.messages.length - 1]?.content,
-  scrollToBottom,
+  () => chatStore.activeSessionId,
+  (id) => {
+    if (id) scrollToBottom();
+  },
+  { immediate: true },
 );
+
+// When a run starts (user just sent a message), always scroll to bottom once
 watch(
   () => chatStore.isRunActive,
   (v) => {
     if (v) scrollToBottom();
   },
 );
-watch(currentToolCalls, scrollToBottom);
+
+// During streaming, only auto-scroll if the user is already near the bottom
+watch(
+  () => chatStore.messages[chatStore.messages.length - 1]?.content,
+  () => {
+    if (!chatStore.isStreaming) { scrollToBottom(); return; }
+    if (!isNearBottom()) return;
+    scrollToBottom();
+  },
+);
+watch(currentToolCalls, () => {
+  if (!chatStore.isStreaming) { scrollToBottom(); return; }
+  if (!isNearBottom()) return;
+  scrollToBottom();
+});
 </script>
 
 <template>
@@ -171,7 +196,7 @@ watch(currentToolCalls, scrollToBottom);
   display: flex;
   flex-direction: column;
   gap: 4px;
-  max-height: 120px;
+  max-height: 213px;
   overflow-y: auto;
   padding-top: 4px;
   scrollbar-width: none;
@@ -191,6 +216,10 @@ watch(currentToolCalls, scrollToBottom);
   background: rgba(0, 0, 0, 0.03);
   border-radius: $radius-sm;
 
+  .dark & {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
   .tool-call-icon {
     flex-shrink: 0;
     color: $text-muted;
diff --git a/packages/client/src/styles/variables.scss b/packages/client/src/styles/variables.scss
index 79b433f..75086d0 100644
--- a/packages/client/src/styles/variables.scss
+++ b/packages/client/src/styles/variables.scss
@@ -75,9 +75,9 @@
   --accent-muted: #888888;
 
   // Text
-  --text-primary: #e0e0e0;
-  --text-secondary: #a0a0a0;
-  --text-muted: #666666;
+  --text-primary: #f0f0f0;
+  --text-secondary: #c0c0c0;
+  --text-muted: #888888;
 
   // Status
   --success: #66bb6a;
@@ -98,10 +98,10 @@
   --accent-info: #6ba3d6;
 
   // RGB components
-  --accent-primary-rgb: 224, 224, 224;
+  --accent-primary-rgb: 240, 240, 240;
   --accent-hover-rgb: 245, 245, 245;
-  --text-primary-rgb: 224, 224, 224;
-  --text-muted-rgb: 102, 102, 102;
+  --text-primary-rgb: 240, 240, 240;
+  --text-muted-rgb: 136, 136, 136;
   --success-rgb: 102, 187, 106;
   --error-rgb: 239, 83, 80;
   --warning-rgb: 255, 183, 77;
diff --git a/packages/client/src/views/hermes/GatewaysView.vue b/packages/client/src/views/hermes/GatewaysView.vue
index b672fad..7ba7e17 100644
--- a/packages/client/src/views/hermes/GatewaysView.vue
+++ b/packages/client/src/views/hermes/GatewaysView.vue
@@ -54,8 +54,7 @@ async function handleToggle(name: string, running: boolean) {
               </NTag>
               <NButton
                 size="small"
-                :type="gw.running ? 'warning' : 'default'"
-                :color="gw.running ? undefined : '#18181b'"
+                :type="gw.running ? 'warning' : 'primary'"
                 round
                 @click="handleToggle(gw.profile, gw.running)"
               >