From 4f923da490c5489f6903617365d7ef4408fbe8ef Mon Sep 17 00:00:00 2001
From: ekko <fqsy1416@gmail.com>
Date: Sat, 18 Apr 2026 22:08:34 +0800
Subject: [PATCH 1/4] feat: replace ModelSelector dropdown with modal picker

NSelect dropdown is unusable with providers that have hundreds of models.
Replaced with a modal dialog featuring search filter, collapsible provider
groups, and click-to-select.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/layout/ModelSelector.vue   | 242 ++++++++++++++++--
 packages/client/src/i18n/locales/en.ts        |   1 +
 packages/client/src/i18n/locales/zh.ts        |   1 +
 3 files changed, 220 insertions(+), 24 deletions(-)

diff --git a/packages/client/src/components/layout/ModelSelector.vue b/packages/client/src/components/layout/ModelSelector.vue
index fcdee7a..7861378 100644
--- a/packages/client/src/components/layout/ModelSelector.vue
+++ b/packages/client/src/components/layout/ModelSelector.vue
@@ -1,41 +1,105 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { NSelect } from 'naive-ui'
+import { ref, computed } from 'vue'
+import { NModal, NInput } from 'naive-ui'
 import { useAppStore } from '@/stores/hermes/app'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-
 const appStore = useAppStore()
 
-const options = computed(() =>
-  appStore.modelGroups.map(g => ({
-    label: g.label,
-    type: 'group' as const,
-    key: g.provider,
-    children: g.models.map(m => ({
-      label: m,
-      value: m,
-    })),
-  })),
-)
+const showModal = ref(false)
+const searchQuery = ref('')
+const collapsedGroups = ref<Record<string, boolean>>({})
 
-function handleChange(value: string | number | Array<string | number>) {
-  if (typeof value === 'string') {
-    appStore.switchModel(value)
-  }
+const filteredGroups = computed(() => {
+  const q = searchQuery.value.toLowerCase().trim()
+  if (!q) return appStore.modelGroups
+  return appStore.modelGroups
+    .map(g => ({
+      ...g,
+      models: g.models.filter(m => m.toLowerCase().includes(q)),
+    }))
+    .filter(g => g.models.length > 0 || g.label.toLowerCase().includes(q))
+})
+
+function toggleGroup(provider: string) {
+  collapsedGroups.value[provider] = !collapsedGroups.value[provider]
+}
+
+function isGroupCollapsed(provider: string) {
+  return !!collapsedGroups.value[provider]
+}
+
+function handleSelect(model: string) {
+  appStore.switchModel(model)
+  showModal.value = false
+  searchQuery.value = ''
+}
+
+function openModal() {
+  collapsedGroups.value = {}
+  searchQuery.value = ''
+  showModal.value = true
 }
 </script>
 
 <template>
   <div class="model-selector">
     <div class="model-label">{{ t('models.title') }}</div>
-    <NSelect
-      :value="appStore.selectedModel"
-      :options="options"
-      size="small"
-      @update:value="handleChange"
-    />
+    <button class="model-trigger" @click="openModal">
+      <span class="model-name" :title="appStore.selectedModel">{{ appStore.selectedModel || '—' }}</span>
+      <svg class="model-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+
+    <NModal
+      v-model:show="showModal"
+      preset="card"
+      :title="t('models.title')"
+      :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+      :mask-closable="true"
+    >
+      <NInput
+        v-model:value="searchQuery"
+        :placeholder="t('models.searchPlaceholder')"
+        clearable
+        size="small"
+        class="model-search"
+      />
+      <div class="model-list">
+        <div v-for="group in filteredGroups" :key="group.provider" class="model-group">
+          <div class="model-group-header" @click="toggleGroup(group.provider)">
+            <svg
+              class="model-group-arrow"
+              :class="{ collapsed: isGroupCollapsed(group.provider) }"
+              width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            <span class="model-group-label">{{ group.label }}</span>
+            <span class="model-group-count">{{ group.models.length }}</span>
+          </div>
+          <div v-show="!isGroupCollapsed(group.provider)" class="model-group-items">
+            <div
+              v-for="model in group.models"
+              :key="model"
+              class="model-item"
+              :class="{ active: model === appStore.selectedModel }"
+              @click="handleSelect(model)"
+            >
+              <span class="model-item-name">{{ model }}</span>
+              <svg v-if="model === appStore.selectedModel" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div v-if="filteredGroups.length === 0" class="model-empty">
+          {{ searchQuery ? 'No results' : 'No models' }}
+        </div>
+      </div>
+    </NModal>
   </div>
 </template>
 
@@ -55,4 +119,134 @@ function handleChange(value: string | number | Array<string | number>) {
   letter-spacing: 0.5px;
   margin-bottom: 6px;
 }
+
+.model-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 8px;
+  background: $bg-input;
+  border: 1px solid $border-color;
+  border-radius: $radius-sm;
+  color: $text-primary;
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color $transition-fast;
+
+  &:hover {
+    border-color: $accent-muted;
+  }
+}
+
+.model-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.model-arrow {
+  flex-shrink: 0;
+  color: $text-muted;
+}
+
+.model-search {
+  margin-bottom: 12px;
+}
+
+.model-list {
+  max-height: 50vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.model-group {
+  margin-bottom: 4px;
+}
+
+.model-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-secondary;
+  cursor: pointer;
+  border-radius: $radius-sm;
+  user-select: none;
+  transition: background-color $transition-fast;
+
+  &:hover {
+    background-color: $bg-secondary;
+  }
+}
+
+.model-group-arrow {
+  flex-shrink: 0;
+  transition: transform $transition-fast;
+
+  &.collapsed {
+    transform: rotate(-90deg);
+  }
+}
+
+.model-group-label {
+  flex: 1;
+}
+
+.model-group-count {
+  font-size: 11px;
+  color: $text-muted;
+  font-weight: 400;
+}
+
+.model-group-items {
+  padding-left: 8px;
+}
+
+.model-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  font-size: 13px;
+  color: $text-secondary;
+  border-radius: $radius-sm;
+  cursor: pointer;
+  transition: all $transition-fast;
+
+  &:hover {
+    background-color: rgba(var(--accent-primary-rgb), 0.06);
+    color: $text-primary;
+  }
+
+  &.active {
+    color: $accent-primary;
+    font-weight: 500;
+  }
+}
+
+.model-item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: $font-code;
+  font-size: 12px;
+}
+
+.model-check {
+  flex-shrink: 0;
+  color: $accent-primary;
+}
+
+.model-empty {
+  padding: 24px 0;
+  text-align: center;
+  font-size: 13px;
+  color: $text-muted;
+}
 </style>
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index 337fcb6..1de19d7 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -190,6 +190,7 @@ export default {
   // Models
   models: {
     title: 'Models',
+    searchPlaceholder: 'Search models...',
     addProvider: 'Add Provider',
     providerType: 'Provider Type',
     preset: 'Preset',
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index 6fa017a..94e88c1 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -190,6 +190,7 @@ export default {
   // 模型
   models: {
     title: '模型',
+    searchPlaceholder: '搜索模型...',
     addProvider: '添加 Provider',
     providerType: 'Provider 类型',
     preset: '预设',

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 2/4] 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)"
               >

From 8a4ab2d69df8f0279da5e3ecb867a0e516688dd3 Mon Sep 17 00:00:00 2001
From: ekko <fqsy1416@gmail.com>
Date: Sun, 19 Apr 2026 15:05:05 +0800
Subject: [PATCH 3/4] fix: provider-aware model selection to prevent
 cross-provider conflicts

When multiple providers share the same model name, the selector now
uses both model ID and provider as the unique identifier instead of
model name alone. Backend returns default_provider alongside default
model, and model switching sends provider to the config.

Fixes #52

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/client/src/api/hermes/system.ts               |  1 +
 .../client/src/components/layout/ModelSelector.vue     | 10 +++++-----
 packages/client/src/stores/hermes/app.ts               |  4 ++++
 packages/server/src/routes/hermes/filesystem.ts        |  4 +++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/api/hermes/system.ts b/packages/client/src/api/hermes/system.ts
index 1eeddab..4835202 100644
--- a/packages/client/src/api/hermes/system.ts
+++ b/packages/client/src/api/hermes/system.ts
@@ -33,6 +33,7 @@ export interface AvailableModelGroup {
 
 export interface AvailableModelsResponse {
   default: string
+  default_provider: string
   groups: AvailableModelGroup[]
 }
 
diff --git a/packages/client/src/components/layout/ModelSelector.vue b/packages/client/src/components/layout/ModelSelector.vue
index 7861378..91c5ee3 100644
--- a/packages/client/src/components/layout/ModelSelector.vue
+++ b/packages/client/src/components/layout/ModelSelector.vue
@@ -30,8 +30,8 @@ function isGroupCollapsed(provider: string) {
   return !!collapsedGroups.value[provider]
 }
 
-function handleSelect(model: string) {
-  appStore.switchModel(model)
+function handleSelect(model: string, provider: string) {
+  appStore.switchModel(model, provider)
   showModal.value = false
   searchQuery.value = ''
 }
@@ -85,11 +85,11 @@ function openModal() {
               v-for="model in group.models"
               :key="model"
               class="model-item"
-              :class="{ active: model === appStore.selectedModel }"
-              @click="handleSelect(model)"
+              :class="{ active: model === appStore.selectedModel && group.provider === appStore.selectedProvider }"
+              @click="handleSelect(model, group.provider)"
             >
               <span class="model-item-name">{{ model }}</span>
-              <svg v-if="model === appStore.selectedModel" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <svg v-if="model === appStore.selectedModel && group.provider === appStore.selectedProvider" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                 <polyline points="20 6 9 17 4 12" />
               </svg>
             </div>
diff --git a/packages/client/src/stores/hermes/app.ts b/packages/client/src/stores/hermes/app.ts
index 3206dec..9267417 100644
--- a/packages/client/src/stores/hermes/app.ts
+++ b/packages/client/src/stores/hermes/app.ts
@@ -18,6 +18,7 @@ export const useAppStore = defineStore('app', () => {
   const updating = ref(false)
   const modelGroups = ref<AvailableModelGroup[]>([])
   const selectedModel = ref('')
+  const selectedProvider = ref('')
   const healthPollTimer = ref<ReturnType<typeof setInterval>>()
 
   // Settings
@@ -56,6 +57,7 @@ export const useAppStore = defineStore('app', () => {
       const res = await fetchAvailableModels()
       modelGroups.value = res.groups
       selectedModel.value = res.default
+      selectedProvider.value = res.default_provider || ''
     } catch {
       // ignore
     }
@@ -68,6 +70,7 @@ export const useAppStore = defineStore('app', () => {
       const provider = providerOverride || group?.provider || ''
       await updateDefaultModel({ default: modelId, provider })
       selectedModel.value = modelId
+      selectedProvider.value = provider || ''
     } catch (err: any) {
       console.error('Failed to switch model:', err)
     }
@@ -117,6 +120,7 @@ export const useAppStore = defineStore('app', () => {
     doUpdate,
     modelGroups,
     selectedModel,
+    selectedProvider,
     streamEnabled,
     sessionPersistence,
     maxTokens,
diff --git a/packages/server/src/routes/hermes/filesystem.ts b/packages/server/src/routes/hermes/filesystem.ts
index f0e007b..1b1812c 100644
--- a/packages/server/src/routes/hermes/filesystem.ts
+++ b/packages/server/src/routes/hermes/filesystem.ts
@@ -466,8 +466,10 @@ fsRoutes.get('/api/hermes/available-models', async (ctx) => {
     const config = await readConfigYaml()
     const modelSection = config.model
     let currentDefault = ''
+    let currentDefaultProvider = ''
     if (typeof modelSection === 'object' && modelSection !== null) {
       currentDefault = String(modelSection.default || '').trim()
+      currentDefaultProvider = String(modelSection.provider || '').trim()
     } else if (typeof modelSection === 'string') {
       currentDefault = modelSection.trim()
     }
@@ -592,7 +594,7 @@ fsRoutes.get('/api/hermes/available-models', async (ctx) => {
       return
     }
 
-    ctx.body = { default: currentDefault, groups: dedupedGroups }
+    ctx.body = { default: currentDefault, default_provider: currentDefaultProvider, groups: dedupedGroups }
   } catch (err: any) {
     ctx.status = 500
     ctx.body = { error: err.message }

From e7e4c386c3d3d130ed5ab0869ca6c3fbbe9bf0d5 Mon Sep 17 00:00:00 2001
From: ekko <fqsy1416@gmail.com>
Date: Sun, 19 Apr 2026 15:07:59 +0800
Subject: [PATCH 4/4] chore: bump version to 0.3.6 and fix unused import

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                                               | 2 +-
 packages/client/src/components/hermes/chat/MessageList.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 86abf14..c9bce05 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hermes-web-ui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Web dashboard for Hermes Agent — multi-platform AI chat, session management, scheduled jobs, usage analytics & channel configuration (Telegram, Discord, Slack, WhatsApp)",
   "repository": {
     "type": "git",
diff --git a/packages/client/src/components/hermes/chat/MessageList.vue b/packages/client/src/components/hermes/chat/MessageList.vue
index 49959ac..f75f595 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, onMounted } from "vue";
+import { ref, computed, watch, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
 import MessageItem from "./MessageItem.vue";
 import { useChatStore } from "@/stores/hermes/chat";