Phase 007: migrate every remaining view from naive-ui to Arco Design Vue

The project now has exactly one UI library. Every naive-ui component in
packages/client/src is replaced by its Arco equivalent across 24 views and
roughly 80 components, and naive-ui is dropped from package.json along with
its transitive vueuc / @css-render / vdirs / seemly dependencies.

The migration is rendering-layer only. No store logic, no API contract, and
no /chat-run payload was touched.

Three classes of leftover were invisible to `grep naive-ui` and are now
covered by tests/client/no-naive-ui.test.ts, which asserts all three:
  - dead .n-* class names in style blocks
  - dead --n-* custom properties
  - naive-ui in package.json

Notable behavioural traps handled along the way, recorded in
docs/arco-migration-rules.md:
  - a-input-password defaults to masked; passing default-visibility="false"
    would have exposed API keys in clear text
  - a-upload fires a real XHR unless auto-upload is false
  - nested Trigger components fight over the first element child, so the
    group-chat settings dropdown was flattened
  - Arco renders tooltip default-slot text inline, which was silently
    collapsing the chat and group-chat toolbars

tests/client/gateway-auto-start-settings.test.ts

@@ -1,6 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockSettingsStore = vi.hoisted(() => ({
   gatewayAutoStart: { enabled: true, include: ['default'], exclude: [] as string[] },
@@ -30,34 +32,55 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', async () => {
-  const actual = await vi.importActual<any>('naive-ui')
-  return {
-    ...actual,
-    NSwitch: {
-      props: ['value'],
-      emits: ['update:value'],
-      template: `<button class="gateway-enabled" @click="$emit('update:value', !value)"></button>`,
-    },
-    NSelect: {
-      props: {
-        value: [String, Array],
-        multiple: Boolean,
-      },
-      emits: ['update:value'],
-      template: `
-        <button
-          :class="multiple ? 'gateway-profile-select' : 'gateway-mode'"
-          @click="$emit('update:value', multiple ? ['default', 'reviewer', 'default'] : (value === 'include' ? 'all' : 'include'))"
-        ></button>
-      `,
-    },
-    useMessage: () => ({ success: vi.fn(), error: vi.fn() }),
-  }
-})
+vi.mock('@/composables/useMessage', () => ({
+  useMessage: () => ({ success: vi.fn(), error: vi.fn() }),
+}))
 
 import GatewayAutoStartSettings from '@/components/hermes/settings/GatewayAutoStartSettings.vue'
 
+// A single click has to stand in for a full Arco dropdown interaction: the
+// multi-select yields a duplicated name (normalizeProfileList must dedupe it)
+// and the mode select flips between 'include' and 'all'.
+const ASelectStub = defineComponent({
+  name: 'Select',
+  props: {
+    modelValue: { type: [String, Array], default: '' },
+    multiple: Boolean,
+    placeholder: String,
+  },
+  emits: ['update:modelValue'],
+  template: `<button
+    type="button"
+    class="arco-select-stub"
+    :class="multiple ? 'gateway-profile-select' : 'gateway-mode'"
+    @click="onClick"
+  ></button>`,
+  methods: {
+    onClick() {
+      this.$emit(
+        'update:modelValue',
+        this.multiple ? ['default', 'reviewer', 'default'] : this.modelValue === 'include' ? 'all' : 'include',
+      )
+    },
+  },
+})
+
+// `app.use(ArcoVue)` registers components globally, so stubs only match Arco's
+// internal component names, not the kebab-case template tags.
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: { Select: ASelectStub },
+}
+
+/** The SettingRow whose label renders as `label`. */
+function rowByLabel(wrapper: any, label: string) {
+  const row = wrapper
+    .findAll('.setting-row')
+    .find((node: any) => node.get('.setting-row-label').text() === label)
+  if (!row) throw new Error(`no SettingRow labelled "${label}"`)
+  return row
+}
+
 describe('GatewayAutoStartSettings', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -67,7 +90,9 @@ describe('GatewayAutoStartSettings', () => {
   it('saves gateway auto-start enabled and include-list settings through app config section', async () => {
     const wrapper = mount(GatewayAutoStartSettings, {
       global: {
+        plugins: arcoGlobal.plugins,
         stubs: {
+          ...arcoGlobal.stubs,
           SettingRow: {
             props: ['label', 'hint'],
             template: '<div class="setting-row"><span class="setting-row-label">{{ label }}</span><slot /></div>',
@@ -78,14 +103,13 @@ describe('GatewayAutoStartSettings', () => {
 
     expect(wrapper.text()).toContain('settings.gatewayAutoStart.title')
 
-    await wrapper.find('.gateway-enabled').trigger('click')
+    await rowByLabel(wrapper, 'settings.gatewayAutoStart.enabled').get('.arco-switch').trigger('click')
     await Promise.resolve()
     expect(mockSettingsStore.updateLocal).toHaveBeenCalledWith('gatewayAutoStart', { enabled: false })
     expect(mockSettingsStore.saveSection).toHaveBeenCalledWith('gatewayAutoStart', { enabled: false }, { restart: false })
 
-    const profileSelects = wrapper.findAll('.gateway-profile-select')
-    expect(profileSelects.length).toBe(1)
-    await profileSelects[0].trigger('click')
+    const includeSelect = rowByLabel(wrapper, 'settings.gatewayAutoStart.include').get('.gateway-profile-select')
+    await includeSelect.trigger('click')
     await Promise.resolve()
     expect(mockSettingsStore.saveSection).toHaveBeenLastCalledWith(
       'gatewayAutoStart',
@@ -93,7 +117,7 @@ describe('GatewayAutoStartSettings', () => {
       { restart: false },
     )
 
-    await wrapper.find('.gateway-mode').trigger('click')
+    await rowByLabel(wrapper, 'settings.gatewayAutoStart.mode').get('.gateway-mode').trigger('click')
     await Promise.resolve()
     expect(mockSettingsStore.saveSection).toHaveBeenLastCalledWith(
       'gatewayAutoStart',