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/display-settings.test.ts

@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
-import { defineComponent, h } from 'vue'
+import { defineComponent } from 'vue'
+import ArcoVue from '@arco-design/web-vue'
 import { MAX_CHAT_INPUT_HEIGHT, MIN_CHAT_INPUT_HEIGHT } from '@/utils/chat-input-height'
 
 const mockSettingsStore = vi.hoisted(() => ({
@@ -36,44 +37,62 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', async () => {
-  const actual = await vi.importActual<any>('naive-ui')
-  return {
-    ...actual,
-    NInputNumber: defineComponent({
-      props: {
-        value: { type: Number, required: false, default: null },
-        min: { type: Number, required: false, default: 0 },
-        max: { type: Number, required: false, default: 1000 },
-      },
-      emits: ['update:value'],
-      setup(props, { emit }) {
-        return () => h('input', {
-          class: 'n-input-number',
-          type: 'number',
-          value: props.value ?? '',
-          onInput: (event: Event) => {
-            const value = (event.target as HTMLInputElement).value
-            emit('update:value', value === '' ? null : Number(value))
-          },
-        })
-      },
-    }),
-    NButton: defineComponent({
-      emits: ['click'],
-      setup(_props, { emit, slots }) {
-        return () => h('button', { type: 'button', onClick: () => emit('click') }, slots.default?.())
-      },
-    }),
-    useMessage: () => ({
-      success: vi.fn(),
-      error: vi.fn(),
-    }),
-  }
-})
+vi.mock('@/composables/useMessage', () => ({
+  useMessage: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+  }),
+}))
 
 import DisplaySettings from '@/components/hermes/settings/DisplaySettings.vue'
 
+// Arco's InputNumber clamps through its own handlers; a plain number input keeps
+// the assertion on the component-level clamping in handleChatInputHeightChange.
+const AInputNumberStub = defineComponent({
+  name: 'InputNumber',
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Number, default: undefined },
+    min: { type: Number, default: undefined },
+    max: { type: Number, default: undefined },
+    size: String,
+  },
+  emits: ['update:modelValue'],
+  template: `<input
+    class="arco-input-number-stub"
+    type="number"
+    :value="modelValue"
+    :min="min"
+    :max="max"
+    @input="onInput"
+  />`,
+  methods: {
+    onInput(event: Event) {
+      const raw = (event.target as HTMLInputElement).value
+      this.$emit('update:modelValue', raw === '' ? undefined : Number(raw))
+    },
+  },
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: {
+    SettingRow: {
+      props: ['label', 'hint'],
+      template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><div class="setting-row-hint">{{ hint }}</div><slot /></div>',
+    },
+    Select: true,
+    Switch: true,
+    InputNumber: AInputNumberStub,
+  },
+}
+
+function buttonByText(wrapper: any, text: string) {
+  const button = wrapper.findAll('button').find((node: any) => node.text() === text)
+  if (!button) throw new Error(`no button labelled "${text}"`)
+  return button
+}
+
 describe('DisplaySettings', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -82,40 +101,18 @@ describe('DisplaySettings', () => {
   })
 
   it('does not expose the unwired busy input mode toggle', () => {
-    const wrapper = mount(DisplaySettings, {
-      global: {
-        stubs: {
-          SettingRow: {
-            props: ['label', 'hint'],
-            template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><div class="setting-row-hint">{{ hint }}</div><slot /></div>',
-          },
-          NSelect: true,
-          NSwitch: true,
-        },
-      },
-    })
+    const wrapper = mount(DisplaySettings, { global: arcoGlobal })
 
     expect(wrapper.text()).not.toContain('settings.display.busyInputMode')
     expect(wrapper.text()).not.toContain('settings.display.busyInputModeHint')
   })
 
   it('saves a clamped chat input height and can reset back to automatic height', async () => {
-    const wrapper = mount(DisplaySettings, {
-      global: {
-        stubs: {
-          SettingRow: {
-            props: ['label', 'hint'],
-            template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><div class="setting-row-hint">{{ hint }}</div><slot /></div>',
-          },
-          NSelect: true,
-          NSwitch: true,
-        },
-      },
-    })
+    const wrapper = mount(DisplaySettings, { global: arcoGlobal })
 
     expect(wrapper.text()).toContain('settings.display.chatInputHeight')
 
-    const input = wrapper.get('.n-input-number')
+    const input = wrapper.get('.chat-input-height-controls .arco-input-number-stub')
     await input.setValue(String(MAX_CHAT_INPUT_HEIGHT + 100))
     await flushPromises()
 
@@ -126,9 +123,7 @@ describe('DisplaySettings', () => {
 
     expect(mockSettingsStore.saveSection).toHaveBeenCalledWith('display', { chat_input_height: MIN_CHAT_INPUT_HEIGHT })
 
-    const resetButton = wrapper.findAll('button').find(button => button.text() === 'common.reset')
-    expect(resetButton).toBeTruthy()
-    await resetButton!.trigger('click')
+    await buttonByText(wrapper, 'common.reset').trigger('click')
     await flushPromises()
 
     expect(mockSettingsStore.saveSection).toHaveBeenCalledWith('display', { chat_input_height: null })