Add session-level bridge model settings (#811)

2026-05-17 12:20:53 +08:00
parent fa035f348e
commit 5e8f8bd4a1
35 changed files with 697 additions and 60 deletions
@@ -16,6 +16,8 @@ export interface StartRunRequest {
  instructions?: string
  session_id?: string
  model?: string
+  provider?: string
+  model_groups?: Array<{ provider: string; models: string[] }>
  queue_id?: string
  source?: 'api_server' | 'cli'
 }
@@ -4,6 +4,7 @@ export interface ConversationSummary {
  id: string
  source: string
  model: string
+  provider?: string
  title: string | null
  started_at: number
  ended_at: number | null
@@ -4,6 +4,7 @@ export interface SessionSummary {
  id: string
  source: string
  model: string
+  provider?: string
  title: string | null
  preview?: string
  started_at: number
@@ -147,6 +148,18 @@ export async function setSessionWorkspace(id: string, workspace: string | null):
  }
 }

+export async function setSessionModel(id: string, model: string, provider: string): Promise<boolean> {
+  try {
+    await request(`/api/hermes/sessions/${id}/model`, {
+      method: 'POST',
+      body: JSON.stringify({ model, provider }),
+    })
+    return true
+  } catch {
+    return false
+  }
+}
+
 export async function exportSession(id: string, mode: 'full' | 'compressed' = 'full', ext: 'json' | 'txt' = 'json'): Promise<void> {
  const baseUrl = getBaseUrlValue()
  const token = getApiKey()
@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { renameSession, setSessionWorkspace, batchDeleteSessions, exportSession } from "@/api/hermes/sessions";
 import { useChatStore, type Session } from "@/stores/hermes/chat";
+import { useAppStore } from "@/stores/hermes/app";
 import { useSessionBrowserPrefsStore } from "@/stores/hermes/session-browser-prefs";
 import {
  NButton,
  NDropdown,
  NInput,
  NModal,
+  NSelect,
  NTooltip,
  NPopconfirm,
  useMessage,
+  type DropdownOption,
 } from "naive-ui";
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
@@ -23,6 +26,7 @@ import SessionListItem from "./SessionListItem.vue";
 import DrawerPanel from "./DrawerPanel.vue";

 const chatStore = useChatStore();
+const appStore = useAppStore();
 const sessionBrowserPrefsStore = useSessionBrowserPrefsStore();
 const message = useMessage();
 const { t } = useI18n();
@@ -331,15 +335,25 @@ const contextSessionPinned = computed(() =>
    ? sessionBrowserPrefsStore.isPinned(contextSessionId.value)
    : false,
 );
+const contextSession = computed(() =>
+  contextSessionId.value
+    ? chatStore.sessions.find((session) => session.id === contextSessionId.value) || null
+    : null,
+);

-const contextMenuOptions = computed(() => [
-  {
+const contextMenuOptions = computed(() => {
+  const options: DropdownOption[] = [{
    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.setWorkspace"), key: "workspace" }]
+
+  if (contextSession.value?.source === "cli") {
+    options.push({ label: t("chat.setModel"), key: "model" })
+  }
+
+  options.push({
    label: t("chat.export"),
    key: "export",
    children: [
@@ -360,9 +374,10 @@ const contextMenuOptions = computed(() => [
        ],
      },
    ],
-  },
-  { label: t("chat.copySessionId"), key: "copy-id" },
-]);
+  })
+  options.push({ label: t("chat.copySessionId"), key: "copy-id" })
+  return options
+});

 function handleContextMenu(e: MouseEvent, sessionId: string) {
  e.preventDefault();
@@ -411,6 +426,8 @@ async function handleContextMenuSelect(key: string) {
    workspaceSessionId.value = contextSessionId.value;
    workspaceValue.value = session?.workspace || "";
    showWorkspaceModal.value = true;
+  } else if (key === "model") {
+    openSessionModelModal(contextSessionId.value);
  } else if (key === "rename") {
    const session = chatStore.sessions.find(
      (s) => s.id === contextSessionId.value,
@@ -473,6 +490,98 @@ async function handleWorkspaceConfirm() {
  }
  showWorkspaceModal.value = false;
 }
+
+const showSessionModelModal = ref(false);
+const sessionModelSessionId = ref<string | null>(null);
+const sessionModelSearch = ref("");
+const sessionModelCollapsedGroups = ref<Record<string, boolean>>({});
+const sessionModelValue = ref("");
+const sessionModelProvider = ref("");
+const sessionModelCustomInput = ref("");
+const sessionModelCustomProvider = ref("");
+
+const sessionModelProviderOptions = computed(() =>
+  appStore.modelGroups.map((group) => ({ label: group.label, value: group.provider })),
+);
+
+const sessionModelGroupsWithCustom = computed(() =>
+  appStore.modelGroups.map((group) => ({
+    ...group,
+    models: [
+      ...group.models,
+      ...(appStore.customModels[group.provider] || []).filter(
+        (model) => !group.models.includes(model),
+      ),
+    ],
+  })),
+);
+
+const filteredSessionModelGroups = computed(() => {
+  const query = sessionModelSearch.value.trim().toLowerCase();
+  if (!query) return sessionModelGroupsWithCustom.value;
+  return sessionModelGroupsWithCustom.value
+    .map((group) => ({
+      ...group,
+      models: group.models.filter((model) => {
+        const displayName = appStore.displayModelName(model, group.provider);
+        return model.toLowerCase().includes(query) || displayName.toLowerCase().includes(query);
+      }),
+    }))
+    .filter((group) => group.models.length > 0 || group.label.toLowerCase().includes(query));
+});
+
+function openSessionModelModal(sessionId: string) {
+  const session = chatStore.sessions.find((s) => s.id === sessionId);
+  sessionModelSessionId.value = sessionId;
+  sessionModelValue.value = session?.model || appStore.selectedModel || "";
+  sessionModelProvider.value = session?.provider || appStore.selectedProvider || "";
+  sessionModelCustomProvider.value = sessionModelProvider.value;
+  sessionModelSearch.value = "";
+  sessionModelCustomInput.value = "";
+  sessionModelCollapsedGroups.value = {};
+  showSessionModelModal.value = true;
+}
+
+function isSessionModelGroupCollapsed(provider: string) {
+  return !!sessionModelCollapsedGroups.value[provider];
+}
+
+function toggleSessionModelGroup(provider: string) {
+  sessionModelCollapsedGroups.value[provider] = !sessionModelCollapsedGroups.value[provider];
+}
+
+function isCustomSessionModel(model: string, provider: string) {
+  return (appStore.customModels[provider] || []).includes(model);
+}
+
+function sessionModelDisplayName(model: string, provider: string) {
+  return appStore.displayModelName(model, provider);
+}
+
+function sessionModelAlias(model: string, provider: string) {
+  return appStore.getModelAlias(model, provider);
+}
+
+async function selectSessionModel(model: string, provider: string) {
+  const meta = appStore.modelGroups.find((group) => group.provider === provider)?.model_meta?.[model];
+  if (meta?.disabled || !sessionModelSessionId.value) return;
+  const ok = await chatStore.switchSessionModel(model, provider, sessionModelSessionId.value);
+  if (ok) {
+    sessionModelValue.value = model;
+    sessionModelProvider.value = provider;
+    showSessionModelModal.value = false;
+    message.success(t("chat.modelSet"));
+  } else {
+    message.error(t("chat.modelSetFailed"));
+  }
+}
+
+async function handleSessionModelCustomSubmit() {
+  const model = sessionModelCustomInput.value.trim();
+  const provider = sessionModelCustomProvider.value;
+  if (!model || !provider) return;
+  await selectSessionModel(model, provider);
+}
 </script>

 <template>
@@ -737,6 +846,104 @@ async function handleWorkspaceConfirm() {
      <FolderPicker v-model="workspaceValue" />
    </NModal>

+    <NModal
+      v-model:show="showSessionModelModal"
+      preset="card"
+      :title="t('chat.setModelTitle')"
+      :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+      :mask-closable="true"
+    >
+      <NInput
+        v-model:value="sessionModelSearch"
+        :placeholder="t('models.searchPlaceholder')"
+        clearable
+        size="small"
+        class="session-model-search"
+      />
+      <div class="session-model-list">
+        <div v-for="group in filteredSessionModelGroups" :key="group.provider" class="session-model-group">
+          <div class="session-model-group-header" @click="toggleSessionModelGroup(group.provider)">
+            <svg
+              class="session-model-group-arrow"
+              :class="{ collapsed: isSessionModelGroupCollapsed(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="session-model-group-label">{{ group.label }}</span>
+            <span class="session-model-group-count">{{ group.models.length }}</span>
+          </div>
+          <div v-show="!isSessionModelGroupCollapsed(group.provider)" class="session-model-group-items">
+            <div
+              v-for="model in group.models"
+              :key="model"
+              class="session-model-item"
+              :class="{
+                active: model === sessionModelValue && group.provider === sessionModelProvider,
+                disabled: !!group.model_meta?.[model]?.disabled,
+              }"
+              :title="group.model_meta?.[model]?.disabled ? t('models.disabledTooltip') : ''"
+              @click="selectSessionModel(model, group.provider)"
+            >
+              <span class="session-model-item-label">
+                <span class="session-model-item-name">{{ sessionModelDisplayName(model, group.provider) }}</span>
+                <span v-if="sessionModelAlias(model, group.provider)" class="session-model-item-id">
+                  {{ t('models.aliasCanonical', { model }) }}
+                </span>
+              </span>
+              <span v-if="group.model_meta?.[model]?.preview" class="session-model-badge-preview">{{ t('models.previewBadge') }}</span>
+              <span v-if="group.model_meta?.[model]?.disabled" class="session-model-badge-disabled">{{ t('models.disabledBadge') }}</span>
+              <span v-if="isCustomSessionModel(model, group.provider)" class="session-model-badge-custom">{{ t('models.customBadge') }}</span>
+              <svg
+                v-if="model === sessionModelValue && group.provider === sessionModelProvider"
+                class="session-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="filteredSessionModelGroups.length === 0" class="session-model-empty">
+          {{ sessionModelSearch ? 'No results' : 'No models' }}
+        </div>
+        <div class="session-model-custom">
+          <div class="session-model-custom-row">
+            <NSelect
+              v-model:value="sessionModelCustomProvider"
+              :options="sessionModelProviderOptions"
+              size="small"
+              class="session-model-custom-provider"
+            />
+            <NInput
+              v-model:value="sessionModelCustomInput"
+              :placeholder="t('models.customModelPlaceholder')"
+              size="small"
+              class="session-model-custom-input"
+              @keydown.enter="handleSessionModelCustomSubmit"
+            />
+          </div>
+          <div class="session-model-custom-hint">
+            {{ t('models.customModelHint') }}
+          </div>
+        </div>
+      </div>
+    </NModal>
+
    <div class="chat-main">
      <header class="chat-header">
        <div class="header-left">
@@ -935,6 +1142,186 @@ async function handleWorkspaceConfirm() {
  position: relative;
 }

+.session-model-search {
+  margin-bottom: 12px;
+}
+
+.session-model-list {
+  max-height: 50vh;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.session-model-group {
+  margin-bottom: 4px;
+}
+
+.session-model-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 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;
+  }
+}
+
+.session-model-group-arrow {
+  flex-shrink: 0;
+  transition: transform $transition-fast;
+
+  &.collapsed {
+    transform: rotate(-90deg);
+  }
+}
+
+.session-model-group-label {
+  flex: 1;
+}
+
+.session-model-group-count {
+  font-size: 11px;
+  color: $text-muted;
+  font-weight: 400;
+}
+
+.session-model-group-items {
+  padding-left: 8px;
+}
+
+.session-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;
+  }
+
+  &.disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+      color: $text-secondary;
+    }
+  }
+}
+
+.session-model-item-label {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.session-model-item-name,
+.session-model-item-id {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: $font-code;
+}
+
+.session-model-item-name {
+  font-size: 12px;
+}
+
+.session-model-item-id {
+  color: $text-muted;
+  font-size: 10px;
+  font-weight: 400;
+}
+
+.session-model-check {
+  flex-shrink: 0;
+  color: $accent-primary;
+}
+
+.session-model-badge-preview,
+.session-model-badge-custom,
+.session-model-badge-disabled {
+  flex-shrink: 0;
+  font-size: 9px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  letter-spacing: 0.03em;
+}
+
+.session-model-badge-preview {
+  color: #fff;
+  background: #d97706;
+}
+
+.session-model-badge-custom {
+  color: #fff;
+  background: $accent-primary;
+}
+
+.session-model-badge-disabled {
+  color: $text-muted;
+  background: transparent;
+  border: 1px solid $border-color;
+  padding: 0 5px;
+}
+
+.session-model-empty {
+  padding: 24px 0;
+  text-align: center;
+  font-size: 13px;
+  color: $text-muted;
+}
+
+.session-model-custom {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid $border-color;
+}
+
+.session-model-custom-row {
+  display: flex;
+  gap: 8px;
+}
+
+.session-model-custom-provider {
+  width: 160px;
+  flex-shrink: 0;
+}
+
+.session-model-custom-input {
+  flex: 1;
+}
+
+.session-model-custom-hint {
+  margin-top: 6px;
+  font-size: 11px;
+  color: $text-muted;
+}
+
 .session-list {
  width: 220px;
  border-right: 1px solid $border-color;
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { fetchConversationDetail, fetchConversationSummaries, type ConversationDetail, type ConversationSummary } from '@/api/hermes/conversations'
 import { formatTimestampSeconds, getSourceLabel } from '@/shared/session-display'
+import { useAppStore } from '@/stores/hermes/app'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

 const props = defineProps<{ humanOnly: boolean }>()
 const { t } = useI18n()
+const appStore = useAppStore()

 const POLL_INTERVAL_MS = 15000

@@ -20,6 +22,11 @@ let sessionsRequestId = 0
 let detailRequestId = 0

 const selectedSession = computed(() => sessions.value.find(session => session.id === selectedSessionId.value) || null)
+const selectedSessionModelName = computed(() =>
+  selectedSession.value?.model
+    ? appStore.displayModelName(selectedSession.value.model, selectedSession.value.provider)
+    : '',
+)

 function roleLabel(role: string): string {
  return role === 'user' ? t('chat.monitorRoleUser') : t('chat.monitorRoleAssistant')
@@ -153,7 +160,7 @@ onUnmounted(() => {
        <div class="conversation-monitor__detail-meta">
          <span>{{ getSourceLabel(selectedSession.source) }}</span>
          <span>·</span>
-          <span>{{ selectedSession.model }}</span>
+          <span :title="selectedSession.model">{{ selectedSessionModelName }}</span>
          <span>·</span>
          <span>{{ linkedSessionsLabel(selectedSession.thread_session_count) }}</span>
        </div>
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, onUnmounted } from 'vue'
+import { computed, ref, onUnmounted } from 'vue'
 import { NPopconfirm, NCheckbox } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import type { Session } from '@/stores/hermes/chat'
+import { useAppStore } from '@/stores/hermes/app'
 import { formatTimestampMs } from '@/shared/session-display'

 const props = defineProps<{
@@ -23,6 +24,12 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
+const appStore = useAppStore()
+const sessionModelName = computed(() =>
+  props.session.model
+    ? appStore.displayModelName(props.session.model, props.session.provider)
+    : '',
+)

 let longPressTimer: ReturnType<typeof setTimeout> | null = null
 const longPressTriggered = ref(false)
@@ -97,7 +104,7 @@ onUnmounted(() => {
        </span>
      </span>
      <span class="session-item-meta">
-        <span v-if="session.model" class="session-item-model">{{ session.model }}</span>
+        <span v-if="sessionModelName" class="session-item-model" :title="session.model">{{ sessionModelName }}</span>
        <span class="session-item-time">{{ formatTimestampMs(session.createdAt) }}</span>
      </span>
    </div>
@@ -130,7 +130,7 @@ async function handleDelete() {
          // 服务端会在默认模型属于 copilot 时清掉 model.default，这里再清理本地
          // 会话级 model/provider，避免 Chat 页继续显示已下架的 copilot 模型。
          chatStore.clearProviderFromSessions('copilot')
-          await Promise.all([modelsStore.fetchProviders(), appStore.loadModels()])
+          await modelsStore.fetchProviders()
        } else {
          await modelsStore.removeProvider(props.provider.provider)
        }
@@ -5,6 +5,16 @@ export interface ChangelogEntry {
 }

 export const changelog: ChangelogEntry[] = [
+  {
+    version: '0.5.27',
+    date: '2026-05-17',
+    changes: [
+      'changelog.new_0_5_27_1',
+      'changelog.new_0_5_27_2',
+      'changelog.new_0_5_27_3',
+      'changelog.new_0_5_27_4',
+    ],
+  },
  {
    version: '0.5.26',
    date: '2026-05-17',
@@ -932,6 +932,10 @@ jobTriggered: 'Job ausgelost',
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',
    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',
@@ -226,6 +226,10 @@ export default {
    workspacePlaceholder: 'Enter project path, e.g. /home/user/project',
    workspaceSet: 'Workspace set',
    workspaceSetFailed: 'Failed to set workspace',
+    setModel: 'Set Model',
+    setModelTitle: 'Set Session Model',
+    modelSet: 'Model set',
+    modelSetFailed: 'Failed to set model',
    other: 'Other',
    runFailed: 'Run failed',
    error: 'Error',
@@ -1224,6 +1228,10 @@ export default {
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',

    new_0_5_6_1: 'Add voice playback feature with Web Speech API: manual button, auto-play toggle, rainbow border animation, and mobile optimization',
    new_0_5_6_2: 'Add robust LLM JSON parser with tolerance for Python format and extract text from streaming events',
@@ -928,6 +928,10 @@ jobTriggered: 'Job ejecutado',
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',
    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',
@@ -927,6 +927,10 @@ jobTriggered: 'Job declenche',
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',
    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',
@@ -928,6 +928,10 @@ export default {
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',
    new_0_5_5_1: '🎉 労働者の日！今日はお休みです、何卒ご理解ください',
    new_0_5_5_2: 'Hermesセッション履歴ページを追加',
    new_0_5_5_3: '履歴ページはアクティブチャットに干渉せずにセッション管理',
@@ -928,6 +928,10 @@ export default {
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',
    new_0_5_5_1: '🎉 노동절 감사합니다! 오늘은 쉬니까 양해 부탁드립니다',
    new_0_5_5_2: 'Hermes 세션 기록 페이지 추가',
    new_0_5_5_3: '기록 페이지는 독립적으로 세션 관리',
@@ -928,6 +928,10 @@ jobTriggered: 'Job acionado',
    new_0_5_26_10: 'Support Hermes Agent package installs when no source checkout is available',
    new_0_5_26_11: 'Add xAI Grok OAuth login for SuperGrok subscription users and update Grok model presets',
    new_0_5_26_12: 'Expand browser, chat streaming, provider, gateway, config, plugin, and Bridge test coverage',
+    new_0_5_27_1: 'Add session-level model settings for Bridge chats, with independent provider and model saved per session',
+    new_0_5_27_2: 'Right-click a Bridge session and choose Set Model to switch the model for that session',
+    new_0_5_27_3: 'Runs now validate the session model and fall back to the current default model when the saved model is unavailable',
+    new_0_5_27_4: 'Context compression now follows the current Profile default selected model by default',
    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',
@@ -1221,6 +1221,10 @@ export default {
    new_0_5_26_10: '支援未找到原始碼目錄時使用套件安裝的 Hermes Agent',
    new_0_5_26_11: '新增 xAI Grok OAuth 登入，支援 SuperGrok 訂閱使用者授權，並更新 Grok 模型預設',
    new_0_5_26_12: '擴展瀏覽器、聊天串流、Provider、Gateway、設定、外掛和 Bridge 測試覆蓋',
+    new_0_5_27_1: '新增 Bridge 工作階段級模型設定，每個工作階段可獨立保存 provider 和 model',
+    new_0_5_27_2: '在 Bridge 工作階段列表中右鍵工作階段，選擇「設定模型」即可為目前工作階段切換模型',
+    new_0_5_27_3: '執行時會自動校驗工作階段模型是否可用；不可用時回退到目前預設模型並更新工作階段',
+    new_0_5_27_4: '上下文壓縮預設跟隨目前 Profile 的預設選中模型',
    new_0_5_6_1: '新增語音播放功能：使用 Web Speech API，支援手動播放按鈕、自動播放開關、彩虹邊框動畫和行動端最佳化',
    new_0_5_6_2: '新增強健的 LLM JSON 解析器，相容 Python 格式並從串流事件中擷取文字',
    new_0_5_6_3: 'Skills 功能增強：使用統計、來源過濾、封存技能、來源追溯和釘選切換',
@@ -226,6 +226,10 @@ export default {
    workspacePlaceholder: '输入项目路径，例如 /home/user/project',
    workspaceSet: '工作区已设置',
    workspaceSetFailed: '设置工作区失败',
+    setModel: '设置模型',
+    setModelTitle: '设置会话模型',
+    modelSet: '模型已设置',
+    modelSetFailed: '设置模型失败',
    other: '其他',
    runFailed: '运行失败',
    error: '错误',
@@ -1226,6 +1230,10 @@ export default {
    new_0_5_26_10: '支持未找到源码目录时使用包安装的 Hermes Agent',
    new_0_5_26_11: '新增 xAI Grok OAuth 登录，支持 SuperGrok 订阅用户授权，并更新 Grok 模型预设',
    new_0_5_26_12: '扩展浏览器、聊天流式、Provider、Gateway、配置、插件和 Bridge 测试覆盖',
+    new_0_5_27_1: '新增 Bridge 会话级模型设置，每个会话可以独立保存 provider 和 model',
+    new_0_5_27_2: '在 Bridge 会话列表中右键会话，选择“设置模型”即可为当前会话切换模型',
+    new_0_5_27_3: '运行时会自动校验会话模型是否可用；不可用时回退到当前默认模型并更新会话',
+    new_0_5_27_4: '上下文压缩默认跟随当前 Profile 的默认选中模型',

    new_0_5_6_1: '新增语音播放功能：使用 Web Speech API，支持手动播放按钮、自动播放开关、彩虹边框动画和移动端优化',
    new_0_5_6_2: '新增健壮的 LLM JSON 解析器，兼容 Python 格式并从流式事件中提取文本',
@@ -17,6 +17,7 @@ import { hasApiKey } from '@/api/client'
 const WEB_UI_VERSION = __APP_VERSION__

 const SIDEBAR_COLLAPSED_KEY = 'hermes_sidebar_collapsed'
+const MODELS_CACHE_TTL_MS = 30000

 export const useAppStore = defineStore('app', () => {
  const sidebarOpen = ref(false)
@@ -42,6 +43,8 @@ export const useAppStore = defineStore('app', () => {
  const streamEnabled = ref(true)
  const sessionPersistence = ref(true)
  const maxTokens = ref(4096)
+  let modelsLoadPromise: Promise<void> | null = null
+  let modelsLoadedAt = 0

  async function doUpdate(): Promise<boolean> {
    updating.value = true
@@ -128,14 +131,26 @@ export const useAppStore = defineStore('app', () => {
    }
  }

-  async function loadModels() {
+  async function loadModels(force = false) {
    if (!hasApiKey()) return
-    try {
-      const res = await fetchAvailableModels()
-      applyAvailableModelsResponse(res)
-    } catch {
-      // ignore
-    }
+    if (!force && modelsLoadPromise) return modelsLoadPromise
+    if (!force && modelGroups.value.length > 0 && Date.now() - modelsLoadedAt < MODELS_CACHE_TTL_MS) return
+    modelsLoadPromise = (async () => {
+      try {
+        const res = await fetchAvailableModels()
+        applyAvailableModelsResponse(res)
+        modelsLoadedAt = Date.now()
+      } catch {
+        // ignore
+      } finally {
+        modelsLoadPromise = null
+      }
+    })()
+    return modelsLoadPromise
+  }
+
+  async function reloadModels() {
+    return loadModels(true)
  }

  function getModelAlias(modelId: string, provider?: string): string {
@@ -220,7 +235,7 @@ export const useAppStore = defineStore('app', () => {
  async function setModelVisibility(provider: string, rule: ModelVisibilityRule) {
    const res = await updateModelVisibility({ provider, mode: rule.mode, models: rule.models })
    modelVisibility.value = res.model_visibility || {}
-    await loadModels()
+    await reloadModels()
  }

  function startHealthPolling(interval = 30000) {
@@ -285,6 +300,7 @@ export const useAppStore = defineStore('app', () => {
    maxTokens,
    checkConnection,
    loadModels,
+    reloadModels,
    applyAvailableModelsResponse,
    switchModel,
    removeCustomModel,
@@ -1,5 +1,5 @@
 import { startRunViaSocket, resumeSession, registerSessionHandlers, unregisterSessionHandlers, getChatRunSocket, respondToolApproval, type RunEvent, type ContentBlock as ContentBlockImport } from '@/api/hermes/chat'
-import { deleteSession as deleteSessionApi, fetchSession, fetchSessions, type HermesMessage, type SessionSummary } from '@/api/hermes/sessions'
+import { deleteSession as deleteSessionApi, fetchSession, fetchSessions, setSessionModel, type HermesMessage, type SessionSummary } from '@/api/hermes/sessions'
 import { getApiKey } from '@/api/client'
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
@@ -238,7 +238,7 @@ function mapHermesSession(s: SessionSummary): Session {
    createdAt: Math.round(s.started_at * 1000),
    updatedAt: Math.round((s.last_active || s.ended_at || s.started_at) * 1000),
    model: s.model,
-    provider: (s as any).billing_provider || '',
+    provider: s.provider || (s as any).billing_provider || '',
    messageCount: s.message_count,
    endedAt: s.ended_at != null ? Math.round(s.ended_at * 1000) : null,
    lastActiveAt: s.last_active != null ? Math.round(s.last_active * 1000) : undefined,
@@ -611,18 +611,25 @@ export const useChatStore = defineStore('chat', () => {
    // Inherit current global model
    const appStore = useAppStore()
    session.model = appStore.selectedModel || undefined
+    session.provider = appStore.selectedProvider || ''
    switchSession(session.id)
  }

-  async function switchSessionModel(modelId: string, provider?: string) {
-    if (!activeSession.value) return
-    activeSession.value.model = modelId
-    activeSession.value.provider = provider || ''
-    // If provider changed, update global config too (Hermes requires it)
-    if (provider) {
-      const { useAppStore } = await import('./app')
-      await useAppStore().switchModel(modelId, provider)
+  async function switchSessionModel(modelId: string, provider?: string, sessionId?: string): Promise<boolean> {
+    const targetId = sessionId || activeSession.value?.id
+    if (!targetId) return false
+    const ok = await setSessionModel(targetId, modelId, provider || '')
+    if (!ok) return false
+    const target = sessions.value.find(s => s.id === targetId)
+    if (target) {
+      target.model = modelId
+      target.provider = provider || ''
    }
+    if (activeSession.value?.id === targetId) {
+      activeSession.value.model = modelId
+      activeSession.value.provider = provider || ''
+    }
+    return true
  }

  async function deleteSession(sessionId: string) {
@@ -903,13 +910,21 @@ export const useChatStore = defineStore('chat', () => {
      }

      const appStore = useAppStore()
+      await appStore.loadModels()
      const sessionModel = activeSession.value?.model || appStore.selectedModel
+      const isBridgeSource = activeSession.value?.source === 'cli'
+      const sessionProvider = activeSession.value?.provider || appStore.selectedProvider
      const runPayload = {
        input,
        session_id: sid,
-        model: sessionModel || undefined,
+        model: isBridgeSource ? undefined : sessionModel || undefined,
+        provider: isBridgeSource ? undefined : sessionProvider || undefined,
+        model_groups: appStore.modelGroups.map(group => ({
+          provider: group.provider,
+          models: group.models,
+        })),
        queue_id: userMsg.id,
-        source: (activeSession.value?.source === 'cli' ? 'cli' : 'api_server') as 'cli' | 'api_server',
+        source: (isBridgeSource ? 'cli' : 'api_server') as 'cli' | 'api_server',
      }

      if (shouldQueue) {
@@ -52,21 +52,17 @@ export const useModelsStore = defineStore('models', () => {
    await systemApi.updateDefaultModel({ default: modelId, provider })
    defaultModel.value = modelId
    const appStore = useAppStore()
-    appStore.loadModels()
+    appStore.reloadModels()
  }

  async function addProvider(data: CustomProvider) {
    await systemApi.addCustomProvider(data)
    await fetchProviders()
-    const appStore = useAppStore()
-    appStore.loadModels()
  }

  async function removeProvider(name: string) {
    await systemApi.removeCustomProvider(name)
    await fetchProviders()
-    const appStore = useAppStore()
-    appStore.loadModels()
  }

  return {
@@ -5,19 +5,17 @@ import { useI18n } from 'vue-i18n'
 import ProvidersPanel from '@/components/hermes/models/ProvidersPanel.vue'
 import ProviderFormModal from '@/components/hermes/models/ProviderFormModal.vue'
 import { useModelsStore } from '@/stores/hermes/models'
-import { useAppStore } from '@/stores/hermes/app'
 import { checkCopilotToken } from '@/api/hermes/copilot-auth'

 const { t } = useI18n()
 const modelsStore = useModelsStore()
-const appStore = useAppStore()
 const showModal = ref(false)

 onMounted(async () => {
  // 先 invalidate 后端 copilot 缓存（gh logout / VS Code 退出后下一次 list 立刻反映），
  // 再拉 providers 与 appStore 的模型显示名配置。check-token 失败不阻断。
  try { await checkCopilotToken() } catch { /* ignore */ }
-  await Promise.all([modelsStore.fetchProviders(), appStore.loadModels()])
+  await modelsStore.fetchProviders()
 })

 function openCreateModal() {
@@ -30,7 +28,6 @@ function handleModalClose() {

 async function handleSaved() {
  await modelsStore.fetchProviders()
-  appStore.loadModels()
  handleModalClose()
 }
 </script>