fix: improve chat scroll behavior and dark mode readability

- 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>

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;