fix: prompt reload for stale Web UI bundle (#641)

2026-05-12 03:03:07 +02:00
parent f78fb2da90
commit c36b320e18
13 changed files with 104 additions and 11 deletions
@@ -43,6 +43,10 @@ async function handleUpdate() {
  }
 }

+function handleReloadClient() {
+  appStore.reloadClient();
+}
+
 function handleLogout() {
  localStorage.clear();
  router.replace({ name: 'login' });
@@ -296,6 +300,9 @@ function openChangelog() {
        <span class="version-text" @click="openChangelog">Web UI v{{ appStore.serverVersion || "0.1.0" }}</span>
        <ThemeSwitch />
      </div>
+      <NButton v-if="appStore.clientOutdated" type="warning" size="tiny" block class="update-btn" @click="handleReloadClient">
+        {{ t('sidebar.reloadClientVersion', { version: appStore.serverVersion }) }}
+      </NButton>
      <NButton v-if="appStore.updateAvailable" type="primary" size="tiny" block class="update-btn" :loading="appStore.updating" @click="handleUpdate">
        {{ appStore.updating ? t('sidebar.updating') : t('sidebar.updateVersion', { version: appStore.latestVersion }) }}
      </NButton>
@@ -89,6 +89,7 @@ export default {
    disconnected: 'Getrennt',
    updateTip: 'Fuhren Sie "hermes-web-ui update" im Terminal aus, um zu aktualisieren',
    updateVersion: 'Aktualisieren auf v{version}',
+    reloadClientVersion: 'Für v{version} neu laden',
    updating: 'Aktualisierung...',
    updateSuccess: 'Aktualisierung abgeschlossen, bitte Server neu starten',
    updateFailed: 'Aktualisierung fehlgeschlagen',
@@ -101,6 +101,7 @@ export default {
    expand: 'Expand menu',
    updateTip: 'Run "hermes-web-ui update" in terminal to update',
    updateVersion: 'Upgrade to v{version}',
+    reloadClientVersion: 'Reload for v{version}',
    updating: 'Updating...',
    updateSuccess: 'Update complete, please restart the server',
    updateFailed: 'Update failed',
@@ -89,6 +89,7 @@ export default {
    disconnected: 'Desconectado',
    updateTip: 'Ejecuta "hermes-web-ui update" en la terminal para actualizar',
    updateVersion: 'Actualizar a v{version}',
+    reloadClientVersion: 'Recargar para v{version}',
    updating: 'Actualizando...',
    updateSuccess: 'Actualizacion completa, por favor reinicia el servidor',
    updateFailed: 'Error al actualizar',
@@ -89,6 +89,7 @@ export default {
    disconnected: 'Deconnecte',
    updateTip: 'Executez "hermes-web-ui update" dans le terminal pour mettre a jour',
    updateVersion: 'Mettre a jour vers v{version}',
+    reloadClientVersion: 'Recharger pour v{version}',
    updating: 'Mise a jour...',
    updateSuccess: 'Mise a jour terminee, veuillez redemarrer le serveur',
    updateFailed: 'Echec de la mise a jour',
@@ -89,6 +89,7 @@ export default {
    disconnected: '未接続',
    updateTip: 'ターミナルで "hermes-web-ui update" を実行して更新してください',
    updateVersion: 'v{version} にアップグレード',
+    reloadClientVersion: 'v{version} に再読み込み',
    updating: '更新中...',
    updateSuccess: '更新が完了しました。サーバーを再起動してください',
    updateFailed: '更新に失敗しました',
@@ -89,6 +89,7 @@ export default {
    disconnected: '연결 끊김',
    updateTip: '터미널에서 "hermes-web-ui update"를 실행하여 업데이트하세요',
    updateVersion: 'v{version}(으)로 업그레이드',
+    reloadClientVersion: 'v{version}(으)로 새로고침',
    updating: '업데이트 중...',
    updateSuccess: '업데이트 완료, 서버를 재시작해 주세요',
    updateFailed: '업데이트 실패',
@@ -89,6 +89,7 @@ export default {
    disconnected: 'Desconectado',
    updateTip: 'Execute "hermes-web-ui update" no terminal para atualizar',
    updateVersion: 'Atualizar para v{version}',
+    reloadClientVersion: 'Recarregar para v{version}',
    updating: 'Atualizando...',
    updateSuccess: 'Atualizacao concluida, por favor reinicie o servidor',
    updateFailed: 'Falha na atualizacao',
@@ -101,6 +101,7 @@ export default {
    expand: '展開選單',
    updateTip: '在終端機執行 "hermes-web-ui update" 即可更新',
    updateVersion: '升級版本 v{version}',
+    reloadClientVersion: '重新整理到 v{version}',
    updating: '正在更新...',
    updateSuccess: '更新完成，請重新啟動服務',
    updateFailed: '更新失敗',
@@ -101,6 +101,7 @@ export default {
    expand: '展开菜单',
    updateTip: '在终端运行 "hermes-web-ui update" 即可更新',
    updateVersion: '升级版本 v{version}',
+    reloadClientVersion: '刷新到 v{version}',
    updating: '正在更新...',
    updateSuccess: '更新完成，请重启服务',
    updateFailed: '更新失败',
@@ -26,6 +26,7 @@ export const useAppStore = defineStore('app', () => {
  const serverVersion = ref(WEB_UI_VERSION)
  const latestVersion = ref('')
  const updateAvailable = ref(false)
+  const clientOutdated = ref(false)
  const updating = ref(false)
  const modelGroups = ref<AvailableModelGroup[]>([])
  const selectedModel = ref('')
@@ -63,11 +64,13 @@ export const useAppStore = defineStore('app', () => {
      const res = await checkHealth()
      connected.value = res.status === 'ok'
      if (res.webui_version) serverVersion.value = res.webui_version
+      clientOutdated.value = !!res.webui_version && res.webui_version !== WEB_UI_VERSION
      if (res.webui_latest) latestVersion.value = res.webui_latest
      updateAvailable.value = !!res.webui_update_available
      if (res.node_version) nodeVersion.value = res.node_version
    } catch {
      connected.value = false
+      clientOutdated.value = false
    }
  }

@@ -231,6 +234,12 @@ export const useAppStore = defineStore('app', () => {
    }
  }

+  function reloadClient() {
+    const url = new URL(window.location.href)
+    url.searchParams.set('__hwui_reload', Date.now().toString())
+    window.location.replace(url.toString())
+  }
+
  function toggleSidebar() {
    sidebarOpen.value = !sidebarOpen.value
  }
@@ -259,8 +268,10 @@ export const useAppStore = defineStore('app', () => {
    latestVersion,
    nodeVersion,
    updateAvailable,
+    clientOutdated,
    updating,
    doUpdate,
+    reloadClient,
    modelGroups,
    customModels,
    modelAliases,
@@ -152,6 +152,38 @@ describe('App Store', () => {
    expect(mockSystemApi.updateDefaultModel).not.toHaveBeenCalled()
  })

+  it('marks the client stale when the served Web UI version changes', async () => {
+    mockSystemApi.checkHealth.mockResolvedValue({
+      status: 'ok',
+      webui_version: '0.5.17',
+      webui_latest: '0.5.17',
+      webui_update_available: false,
+    })
+    const store = useAppStore()
+
+    await store.checkConnection()
+
+    expect(store.connected).toBe(true)
+    expect(store.serverVersion).toBe('0.5.17')
+    expect(store.clientOutdated).toBe(true)
+    expect(store.updateAvailable).toBe(false)
+  })
+
+  it('does not mark the client stale when the served Web UI version matches this bundle', async () => {
+    mockSystemApi.checkHealth.mockResolvedValue({
+      status: 'ok',
+      webui_version: 'test',
+      webui_latest: 'test',
+      webui_update_available: false,
+    })
+    const store = useAppStore()
+
+    await store.checkConnection()
+
+    expect(store.serverVersion).toBe('test')
+    expect(store.clientOutdated).toBe(false)
+  })
+
  it('clears the updating state and reports failure when self-update request fails', async () => {
    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
    mockSystemApi.triggerUpdate.mockRejectedValue(new Error('install failed'))
@@ -3,6 +3,21 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'

 const openSessionSearchMock = vi.hoisted(() => vi.fn())
+const mockAppStore = vi.hoisted(() => ({
+  sidebarOpen: true,
+  sidebarCollapsed: false,
+  connected: true,
+  serverVersion: 'test',
+  latestVersion: '',
+  updateAvailable: false,
+  clientOutdated: false,
+  updating: false,
+  toggleSidebar: vi.fn(),
+  toggleSidebarCollapsed: vi.fn(),
+  closeSidebar: vi.fn(),
+  doUpdate: vi.fn(),
+  reloadClient: vi.fn(),
+}))

 vi.mock('@/composables/useSessionSearch', () => ({
  useSessionSearch: () => ({
@@ -11,16 +26,7 @@ vi.mock('@/composables/useSessionSearch', () => ({
 }))

 vi.mock('@/stores/hermes/app', () => ({
-  useAppStore: () => ({
-    sidebarOpen: true,
-    connected: true,
-    serverVersion: 'test',
-    updateAvailable: false,
-    updating: false,
-    toggleSidebar: vi.fn(),
-    closeSidebar: vi.fn(),
-    doUpdate: vi.fn(),
-  }),
+  useAppStore: () => mockAppStore,
 }))

 vi.mock('vue-router', async (importOriginal) => {
@@ -55,7 +61,7 @@ vi.mock('naive-ui', async () => {
      error: vi.fn(),
    }),
    NButton: {
-      template: '<button><slot /></button>',
+      template: '<button v-bind="$attrs"><slot /></button>',
    },
    NSelect: {
      template: '<div />',
@@ -68,6 +74,12 @@ import AppSidebar from '@/components/layout/AppSidebar.vue'
 describe('AppSidebar search entry', () => {
  beforeEach(() => {
    openSessionSearchMock.mockClear()
+    mockAppStore.serverVersion = 'test'
+    mockAppStore.latestVersion = ''
+    mockAppStore.updateAvailable = false
+    mockAppStore.clientOutdated = false
+    mockAppStore.updating = false
+    mockAppStore.reloadClient.mockClear()
  })

  it('opens the session search modal from the sidebar button', async () => {
@@ -90,4 +102,26 @@ describe('AppSidebar search entry', () => {
    await searchButton!.trigger('click')
    expect(openSessionSearchMock).toHaveBeenCalledTimes(1)
  })
+
+  it('offers a client reload when the server version differs from the loaded bundle', async () => {
+    mockAppStore.clientOutdated = true
+    mockAppStore.serverVersion = '0.5.17'
+    const wrapper = mount(AppSidebar, {
+      global: {
+        stubs: {
+          ProfileSelector: true,
+          ModelSelector: true,
+          LanguageSwitch: true,
+          ThemeSwitch: true,
+        },
+      },
+    })
+
+    const reloadButton = wrapper.findAll('button')
+      .find(node => node.text().includes('sidebar.reloadClientVersion'))
+    expect(reloadButton).toBeTruthy()
+
+    await reloadButton!.trigger('click')
+    expect(mockAppStore.reloadClient).toHaveBeenCalledTimes(1)
+  })
 })