From 836d0228d25ece235a5bc7f04b7755bb90e4a23b Mon Sep 17 00:00:00 2001
From: Jack <jack0210_@hotmail.com>
Date: Sun, 18 Oct 2026 22:57:25 +0800
Subject: [PATCH] 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
---
 docs/arco-migration-rules.md                  | 101 ++++
 ...2026-10-18-phase007-arco-full-migration.md |  73 +++
 package-lock.json                             | 204 --------
 package.json                                  |   1 -
 .../auth/DefaultCredentialPrompt.vue          |  18 +-
 .../src/components/hermes/chat/ChatPanel.vue  |   6 +-
 .../hermes/files/FileBreadcrumb.vue           |  13 +-
 .../hermes/files/FileContextMenu.vue          |  65 ++-
 .../components/hermes/files/FileEditor.vue    |  13 +-
 .../src/components/hermes/files/FileList.vue  |  13 +-
 .../components/hermes/files/FilePreview.vue   |   7 +-
 .../hermes/files/FileRenameModal.vue          |  36 +-
 .../components/hermes/files/FileToolbar.vue   |  26 +-
 .../src/components/hermes/files/FileTree.vue  |  45 +-
 .../hermes/files/FileUploadModal.vue          |  33 +-
 .../hermes/group-chat/CreateRoomForm.vue      |  44 +-
 .../hermes/group-chat/GroupChatInput.vue      | 123 ++---
 .../hermes/group-chat/GroupChatPanel.vue      | 272 +++++-----
 .../src/components/hermes/jobs/JobCard.vue    |  32 +-
 .../components/hermes/jobs/JobFormModal.vue   | 120 +++--
 .../components/hermes/jobs/JobRunHistory.vue  |  25 +-
 .../components/hermes/kanban/KanbanColumn.vue |  22 +-
 .../hermes/kanban/KanbanCreateForm.vue        | 145 ++++--
 .../hermes/kanban/KanbanTaskCard.vue          |  28 +-
 .../hermes/kanban/KanbanTaskDrawer.vue        |  81 +--
 .../components/hermes/mcp/McpServerCard.vue   |  27 +-
 .../hermes/models/AnthropicLoginModal.vue     |  41 +-
 .../hermes/models/AuxiliaryModelsPanel.vue    |  62 ++-
 .../hermes/models/CodexLoginModal.vue         |  34 +-
 .../hermes/models/CombinationModelsPanel.vue  |  88 ++--
 .../hermes/models/CopilotLoginModal.vue       |  34 +-
 .../hermes/models/GeminiLoginModal.vue        |  30 +-
 .../hermes/models/NousLoginModal.vue          |  34 +-
 .../components/hermes/models/ProviderCard.vue |  94 ++--
 .../hermes/models/ProviderFormModal.vue       | 122 +++--
 .../hermes/models/XaiOAuthLoginModal.vue      |  30 +-
 .../hermes/profiles/ProfileCard.vue           |  36 +-
 .../hermes/profiles/ProfileCreateModal.vue    |  62 ++-
 .../hermes/profiles/ProfileImportModal.vue    |  34 +-
 .../hermes/profiles/ProfileRenameModal.vue    |  52 +-
 .../hermes/settings/AccountSettings.vue       |  93 ++--
 .../hermes/settings/AgentSettings.vue         |  27 +-
 .../hermes/settings/CompressionSettings.vue   |  31 +-
 .../hermes/settings/DisplaySettings.vue       |  35 +-
 .../settings/GatewayAutoStartSettings.vue     |  27 +-
 .../hermes/settings/GithubPreviewSettings.vue |  87 ++--
 .../hermes/settings/MemorySettings.vue        |  17 +-
 .../hermes/settings/ModelSettings.vue         |  33 +-
 .../hermes/settings/PlatformCard.vue          |   9 +-
 .../hermes/settings/PlatformSettings.vue      | 119 +++--
 .../hermes/settings/PrivacySettings.vue       |   3 +-
 .../hermes/settings/ProxySettings.vue         |  13 +-
 .../hermes/settings/SessionSettings.vue       |  41 +-
 .../settings/UserManagementSettings.vue       | 156 +++---
 .../hermes/settings/VoiceSettings.vue         |  29 +-
 .../hermes/settings/voice/VoiceApiCard.vue    |  68 ++-
 .../settings/voice/VoiceApiConfigurator.vue   | 308 +++++------
 .../settings/voice/VoiceApiFormModal.vue      | 112 ++--
 .../hermes/skills/PendingWriteApprovals.vue   |  36 +-
 .../hermes/skills/SkillExternalDirsModal.vue  |  28 +-
 .../hermes/skills/SkillImportModal.vue        |  51 +-
 .../components/hermes/skills/SkillList.vue    |  11 +-
 .../hermes/workflow/WorkflowAgentNode.vue     |  67 ++-
 .../hermes/workflow/WorkflowModelSelector.vue |  15 +-
 .../src/components/hermes/workflow/types.ts   |   4 +-
 .../src/components/layout/LanguageSwitch.vue  |  15 +-
 .../src/components/layout/ModelSelector.vue   |  27 +-
 .../src/components/layout/PageSidebarNav.vue  | 114 ++---
 .../src/components/layout/ProfileSelector.vue |  81 ++-
 .../layout/SettingsCircuitBadge.vue           | 183 +++----
 packages/client/src/styles/global.scss        |   8 +-
 packages/client/src/styles/theme.ts           | 176 -------
 .../client/src/views/hermes/ChannelsView.vue  |   5 +-
 .../client/src/views/hermes/DevicesView.vue   | 212 ++++----
 .../client/src/views/hermes/HistoryView.vue   | 157 +++---
 packages/client/src/views/hermes/JobsView.vue |  55 +-
 .../client/src/views/hermes/JourneyView.vue   |  57 +--
 .../client/src/views/hermes/KanbanView.vue    |  64 ++-
 packages/client/src/views/hermes/LogsView.vue |  30 +-
 .../src/views/hermes/McpManagerView.vue       | 113 +++--
 .../client/src/views/hermes/MemoryView.vue    |  29 +-
 .../client/src/views/hermes/ModelsView.vue    |  43 +-
 .../src/views/hermes/PerformanceView.vue      |  11 +-
 .../client/src/views/hermes/PetdexView.vue    |  40 +-
 .../client/src/views/hermes/PluginsView.vue   |  61 ++-
 .../client/src/views/hermes/ProfilesView.vue  |  13 +-
 .../client/src/views/hermes/SettingsView.vue  |  64 ++-
 .../src/views/hermes/SkillsUsageView.vue      |  13 +-
 .../client/src/views/hermes/SkillsView.vue    |  53 +-
 .../client/src/views/hermes/TerminalView.vue  |  94 ++--
 .../client/src/views/hermes/UsageView.vue     |  13 +-
 .../client/src/views/hermes/WorkflowView.vue  | 477 +++++++++---------
 .../client/default-credential-prompt.test.ts  |  47 +-
 tests/client/display-settings.test.ts         | 123 +++--
 tests/client/file-context-menu.test.ts        |  97 ++--
 .../gateway-auto-start-settings.test.ts       |  84 +--
 tests/client/job-form-modal.test.ts           | 164 ++++--
 tests/client/kanban-create-form.test.ts       | 208 +++++---
 tests/client/kanban-task-card.test.ts         |  23 +-
 tests/client/kanban-task-drawer.test.ts       | 133 ++---
 tests/client/kanban-view.test.ts              | 165 +++---
 tests/client/no-naive-ui.test.ts              |  77 +++
 tests/client/pending-write-approvals.test.ts  |  49 +-
 tests/client/plugins-view.test.ts             |  44 +-
 tests/client/profile-card-config-edit.test.ts |  31 +-
 .../provider-card-built-in-action.test.ts     | 108 ++--
 tests/client/session-settings.test.ts         | 129 ++---
 tests/client/skills-usage-view.test.ts        |  72 ++-
 tests/client/stt-settings-ui.test.ts          | 291 +++++------
 tests/client/style-system.test.ts             |  36 +-
 tests/client/usage-view-period.test.ts        |  26 +-
 tests/client/workspace-long-names.test.ts     |  47 +-
 tests/e2e/fixtures.ts                         |  33 ++
 tests/e2e/provider-models.spec.ts             |   7 +-
 vite.config.ts                                |  10 +-
 115 files changed, 4067 insertions(+), 3891 deletions(-)
 create mode 100644 docs/arco-migration-rules.md
 create mode 100644 docs/chat-chain-changes/2026-10-18-phase007-arco-full-migration.md
 delete mode 100644 packages/client/src/styles/theme.ts
 create mode 100644 tests/client/no-naive-ui.test.ts

diff --git a/docs/arco-migration-rules.md b/docs/arco-migration-rules.md
new file mode 100644
index 0000000..9336b49
--- /dev/null
+++ b/docs/arco-migration-rules.md
@@ -0,0 +1,101 @@
+# Phase 007 迁移规约（每个 agent 必读）
+
+目标：`grep -rn "naive-ui\|vueuc\|@css-render" packages/client/src` 零命中，
+且项目里只有 Arco 一个 UI 库。`tests/client/no-naive-ui.test.ts` 会卡住回归。
+
+## 铁律
+
+1. **只换渲染层。** 不改业务逻辑、不改 store、不改 API 调用、不改事件语义。
+   看到逻辑 bug 记下来但不要动手。
+2. **不引入新依赖。** Arco 已在 `main.ts` 全量 `app.use(ArcoVue)`，
+   模板里直接写 `<a-button>` 等 kebab-case 标签即可，**不要** import Arco 组件。
+3. **Arco 不会对拼错的 prop 报错** —— 未声明的 prop 会作为普通 attribute 落到根元素上。
+   所以「弹层能打开但内容是空的」几乎总是 prop 写错了。改完每个弹层都要确认
+   prop 在 `node_modules/@arco-design/web-vue/es/<组件>/` 的 props 定义里存在。
+4. **`grep naive-ui` 匹配不到 CSS 里的类名。** 必须另外用这个命令自查：
+   ```bash
+   grep -n "\.n-[a-z]\|:deep(\.n-" <你改过的每个文件>
+   ```
+   这些是死样式，在 Arco 下静默失效。**这是最容易漏、且测试测不出来的一类改动。**
+
+## 组件映射（Arco 全局已注册，直接用 kebab-case 标签）
+
+| Naive | Arco | 必须改的差异 |
+|---|---|---|
+| `NButton` | `a-button` | `block`→`long`；`size="tiny"`→`size="mini"`；`quaternary`/`secondary`→`type="text"` / `type="secondary"`；`type="warning"`→`type="primary" status="warning"`；`circle`/`round` 形状用 `shape` prop |
+| `NInput` | `a-input` | `type="textarea"` → 独立 `a-textarea`；`a-input` 不透传 attrs，`autofocus` 无效，要用 `ref` + `focus()` |
+| `NInputPassword` / `show-password-on` | `a-input-password` | **不要传 `default-visibility`**。它的默认值 `true` 表示"处于可见状态"，而 `input-password.js:77` 是 `type: mergedVisible ? "password" : "text"` —— 所以默认就是**遮蔽**显示。传 `:default-visibility="false"` 反而会让 API Key **明文显示**。不传即可 |
+| `NModal` | `a-modal` | `v-model:show`→`v-model:visible`；`preset="dialog"`/`preset="card"` 无对应 → `:footer="false"`；**`#action` 插槽要改名 `#footer`**（Arco 只有 `#footer`）；`positive-text`→`ok-text`；`@positive-click`→`@ok` |
+| `NDrawer`/`NDrawerContent` | `a-drawer` | Arco 没有独立 content 组件，`NDrawerContent` 的 `:title` 直接给 `a-drawer`；`v-model:show`→`v-model:visible`；`placement` 保留 |
+| `NForm` | `a-form` | **本仓库 `:rules` 全仓零使用，校验都是手写 `if`，直接替换即可，不需要写规则适配** |
+| `NFormItem` | `a-form-item` | `label-placement="top"`→`layout="vertical"`；`NFormItem` 没有 `feedback` prop，错误文案自己渲染一个元素 |
+| `NSelect` | `a-select` | `options` 的 `{label,value,disabled}` 语义一致；`consistent-menu-width` 等无对应，删掉 |
+| `NSpin` | `a-spin` | `show`→`loading` |
+| `NTooltip` | `a-tooltip` | `placement`→`position`；**`#trigger` 模板插槽必须拆掉**，触发元素放默认插槽 |
+| `NPopconfirm` | `a-popconfirm` | `positive-text`→`ok-text`；`@positive-click`→`@ok`；**`#trigger` 必须改默认插槽** |
+| `NDropdown` | `a-dropdown` | **Arco 没有 `droplist` prop**，菜单必须写进 `#content` 插槽用 `a-doption`；`@select` 的 key 结构一致 |
+| `NTag` | `a-tag` | `type="info"`→`color="arcoblue"` 等内建色；`bordered` 存在；**naive 的 `round` 没有对应 prop**（Arco `a-tag` 只有 `color/size/bordered/visible/loading/closable/checkable/checked/nowrap`），传 `shape="round"` 会静默失效，要圆角就自己写 `border-radius: 999px` |
+| `NSwitch` | `a-switch` | `value`/`v-model:value` 一致 |
+| `NSpace` | `a-space` | `size` 语义一致 |
+| `NInputNumber` | `a-input-number` | 一致 |
+| `NAlert` | `a-alert` | `type` 一致 |
+| `NEmpty` | `a-empty` | 一致 |
+| `NTabs`/`NTabPane` | `a-tabs`/`a-tab-pane` | `NTabPane` 的 `name`+`:tab` → `a-tab-pane` 的 `key`+`title`；`animated` 无对应，删；`v-model:value`→`v-model:active-key`，`@update:value`→`@change` |
+| `NCollapse`/`NCollapseItem` | `a-collapse`/`a-collapse-item` | `arrow` 语义不同 |
+| `NRadioGroup`/`NRadio`/`NRadioButton` | `a-radio-group`/`a-radio` | `NRadioButton` → `<a-radio type="button">`。**注意是 `"button"` 不是 `"radio-button"`**（`radio.js:115` 判 `mergedType === "button"`，写错会静默失效） |
+| `NCheckbox`/`NCheckboxGroup` | `a-checkbox`/`a-checkbox-group` | `options` 一致 |
+| `NUpload` | `a-upload` | `file-list` 结构不同；`UploadFileInfo` 类型是 naive 专有 → 改成原生 `File[]` 或 Arco 的 `FileItem`；`directory-dnd` 无对应，删 |
+| `NDataTable` | `a-table` | **列定义 API 差异最大**：`columns` 的 `title/key/render/width/minWidth/ellipsis` 要逐个对；naive 的 `render(row)` 返回 vnode，Arco 用 `#columns` 插槽或同样的 `render` |
+| `NBreadcrumb`/`NBreadcrumbItem` | `a-breadcrumb`/`a-breadcrumb-item` | 一致 |
+| `NDescriptions`/`NDescriptionsItem` | `a-descriptions`/`a-descriptions-item` | 一致 |
+| `NPopover` | `a-popover` | `placement`→`position` |
+| `NBadge` | `a-badge` | `value`→`count` |
+| `NScrollbar` | `a-scrollbar` | Arco 的 `a-scrollbar` 需要显式 `height`，用 `max-height` 会高度塌陷 |
+| `NIcon` | `<icon-xxx>` | Arco 图标是独立组件，`import { IconXxx } from '@arco-design/web-vue/es/icon'` |
+| `NText` | 原生 `span` / `a-typography` | 多数场景直接换原生元素 + 原有 class |
+| `NTree` | `a-tree` | **懒加载语义不同**：naive `:on-load="fn"` 直接改 `node.children`；Arco 是 `@load="(node, done) => ..."`，改写回调 |
+
+## 类型导入
+
+```ts
+import type { SelectOption } from 'naive-ui'      // 删
+export interface X extends SelectOption {}         // 改成本地 interface：
+                                                   // { label: string; value: string; disabled?: boolean }
+```
+
+## CSS 类名对照（`:deep()` 里也要改）
+
+`.n-button`→`.arco-btn` / `.n-input`→`.arco-input` / `.n-input__*`→`.arco-input-inner`
+/ `.n-switch`→`.arco-switch` / `.n-tag`→`.arco-tag` / `.n-spin-container`→`.arco-spin-container`
+/ `.n-spin-content`→`.arco-spin` / `.n-collapse`→`.arco-collapse`
+/ `.n-drawer-body-content-wrapper`→`.arco-drawer-body` / `.n-modal-body-wrapper`→`.arco-modal`
+/ `.n-data-table*`→`.arco-table*`
+
+**结构差异（Arco 没有的 naive 嵌套层）**：
+- `a-button` **没有** content 包裹层 → `gap`/`min-width` 直接写在 button 上
+- `a-modal` 没有 `body-wrapper` 分层 → 用 `.arco-modal` / `.arco-modal-body`
+- `a-drawer` 没有 `content` / `body-content-wrapper` 分层 → 用 `.arco-drawer` / `.arco-drawer-body`
+- Arco **Trigger 不能嵌套**：`a-tooltip`/`a-dropdown`/`a-popconfirm` 内部都用
+  `mergeFirstChild` 接管首个元素的��件，互相嵌套时菜单**点不开**。
+  同一元素既要 tooltip 又要 dropdown 时，tooltip 改用原生 `:title`。
+- **tooltip/dropdown 的默认插槽必须只含一个元素**。尾随的纯文本会被当可见内容
+  渲染进布局流（变成 0 宽的 flex item），文案要放 `content` prop。
+
+## 红线
+
+- 消息气泡 / 群聊气泡内部**禁用任何 Arco 组件**（流式性能），
+  由 `tests/e2e/chat-rendering-smoke.spec.ts` 卡住
+- `/chat-run` Socket.IO 事件契约：事件名、字段名、字段类型、发射时机都不许改（只允许加可选字段）
+- `packages/server/src/services/hermes/agent-bridge/python/` 只读
+- 不要重排 `<template>` 的结构来"顺便整理"，只做等价替换，减少 diff 噪音
+
+## 自查（每个 agent 收尾必做）
+
+```bash
+# 你负责的文件必须全部通过
+grep -n "naive-ui\|\.n-[a-z]\|:deep(\.n-" <你的文件列表>   # 期望零命中
+npm run build                                              # 期望成功
+```
+
+如果 build 报类型错误，说明有 naive 类型没解开（多半是 `SelectOption` /
+`UploadFileInfo` / `DropdownOption` / `TreeOption` / `DataTableColumns`）。
diff --git a/docs/chat-chain-changes/2026-10-18-phase007-arco-full-migration.md b/docs/chat-chain-changes/2026-10-18-phase007-arco-full-migration.md
new file mode 100644
index 0000000..4213544
--- /dev/null
+++ b/docs/chat-chain-changes/2026-10-18-phase007-arco-full-migration.md
@@ -0,0 +1,73 @@
+---
+date: 2026-10-18
+pr: pending
+feature: Phase 007 - full naive-ui to Arco Design Vue migration across all remaining views
+impact: Rendering-layer only. Every naive-ui component in packages/client/src is replaced by its Arco Design Vue equivalent across 24 views and roughly 80 components, and the naive-ui dependency is removed from package.json and package-lock.json. No chat store logic, no /chat-run payload, and no message rendering path is touched. Three chat-chain files changed as a consequence of that rendering-only sweep, listed below with the specific reason each needed a change.
+---
+
+# Phase 007 — full Arco migration
+
+Phase 006 moved the chat page. Phase 007 finished the job: `grep -rn "naive-ui\|vueuc\|@css-render" packages/client/src` is now empty, and the project has exactly one UI library.
+
+Batches 7a-7g each shipped independently per `docs/phases/phase_007.md`. `docs/arco-migration-rules.md` holds the component mapping table the whole sweep followed.
+
+## Why chat-chain files changed
+
+Four files under the chat chain were caught by the sweep. None of the changes touch logic.
+
+### `chat/ChatPanel.vue`
+
+- Three leftover naive CSS custom properties were still referenced: `--n-text-color-3` (twice)
+  and `--n-color-hover` (once). These were dead after Phase 006 — the variables no longer
+  resolve, so the rules silently did nothing. Rewritten to the project's own tokens
+  (`--text-muted`, `--bg-card-hover`).
+- `:native-scrollbar="false"` on the workspace dropdown had no Arco counterpart and was
+  dropped.
+
+### `group-chat/GroupChatInput.vue`
+
+- Eighteen dead naive rules under `.tool-trace-toggle`, `.input-settings-button` and
+  `.send-button` targeted `.n-button__content`, `.n-button__icon`, `.n-button__border`,
+  `.n-button__state-border`, `.n-button__ripple` and `.n-base-wave`. Arco's `a-button` has
+  no content wrapper and none of the ripple internals, so `gap` now lives on the button
+  itself and the ripple rules were deleted rather than renamed.
+- The settings button was `NDropdown > NTooltip > NButton` — a three-deep Trigger nest.
+  Arco's Trigger components each claim the first element child via `mergeFirstChild`, so
+  nested popups fight over it and the menu never opens. Flattened to `a-dropdown > a-button`
+  with the description moved to a native `:title`, which is the same approach Phase 006
+  already took in `ChatInput.vue`.
+- The attach tooltip carried its label as trailing default-slot text. Arco renders the
+  default slot inline, so that text became a zero-width flex item in the toolbar. Moved to
+  the `content` prop.
+
+### `group-chat/CreateRoomForm.vue`
+
+- Straight component swap. `InputLikeInstance = { focus: () => void }` was kept because
+  Arco's `a-input` still exposes `focus()` (`es/input/input.js:315`), so the existing
+  `nextTick` focus calls still work.
+
+### `group-chat/GroupChatPanel.vue`
+
+- The room context menu was `NDropdown` in `trigger="manual"` mode driven by `:x` / `:y` /
+  `:show` / `@clickoutside`. Arco has no manual trigger, so it became
+  `a-trigger trigger="contextMenu"` with `:popup-style` for coordinates, matching the
+  pattern already used by `FileContextMenu.vue` and `WorkflowView.vue`. Arco's
+  `clickOutsideToClose` defaults to true, which replaces the hand-written clickoutside
+  handler.
+- `NPopover`'s `placement="bottom-end"` maps to Arco `position="br"` (bottom-right).
+  Arco's `a-popover` has no `width` prop and its `Trigger` sets `inheritAttrs: false`, so a
+  `:width` would be dropped silently; the width moved to `:content-style`.
+
+## Verification
+
+`packages/client/src` has zero naive references by three independent checks — `naive-ui`
+imports, `.n-*` class names in style blocks, and `--n-*` custom properties. The last two
+matter because `grep naive-ui` cannot see them; `tests/client/no-naive-ui.test.ts` now
+guards all three so the patterns cannot come back.
+
+## Behavior impact
+
+Rendering-layer only. No chat store logic, no `/chat-run` payload, and no message rendering
+path was touched. The group-chat message bubbles already used plain HTML and were left
+untouched, so the "no Arco components inside bubbles" rule still holds — `a-tree`, `a-select`
+and the other components appear only outside the bubble.
diff --git a/package-lock.json b/package-lock.json
index 8f3a498..9e4a6f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,7 +72,6 @@
         "markdown-it": "^14.1.1",
         "mermaid": "^11.14.0",
         "monaco-editor": "^0.55.1",
-        "naive-ui": "^2.44.1",
         "nodemon": "^3.1.14",
         "pinia": "^3.0.4",
         "pino": "^10.3.1",
@@ -308,26 +307,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
-    "node_modules/@css-render/plugin-bem": {
-      "version": "0.15.14",
-      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz",
-      "integrity": "sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "css-render": "~0.15.14"
-      }
-    },
-    "node_modules/@css-render/vue3-ssr": {
-      "version": "0.15.14",
-      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz",
-      "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "^3.0.11"
-      }
-    },
     "node_modules/@csstools/color-helpers": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
@@ -502,13 +481,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@epic-web/invariant": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
@@ -1490,13 +1462,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@juggle/resize-observer": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/@koa/bodyparser": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@koa/bodyparser/-/bodyparser-5.1.2.tgz",
@@ -3225,23 +3190,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/lodash": {
-      "version": "4.17.24",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
-      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/lodash-es": {
-      "version": "4.17.12",
-      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
-      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/lodash": "*"
-      }
-    },
     "node_modules/@types/markdown-it": {
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
@@ -4148,13 +4096,6 @@
         "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/async-validator": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
-      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -4886,24 +4827,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-render": {
-      "version": "0.15.14",
-      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.14.tgz",
-      "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "~0.8.0",
-        "csstype": "~3.0.5"
-      }
-    },
-    "node_modules/css-render/node_modules/csstype": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
-      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/css-tree": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
@@ -5506,27 +5429,6 @@
         "node": ">=20"
       }
     },
-    "node_modules/date-fns": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.3.0.tgz",
-      "integrity": "sha512-OYcL+3N/jyWbYdFGqoMAhytDgxP9pbYPUUiRCOgn4Fewaadk9l/Wam4Avciiyp2BgkpfQyBV9B+ehnVJych+eQ==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
-    "node_modules/date-fns-tz": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz",
-      "integrity": "sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "date-fns": "^3.0.0 || ^4.0.0"
-      }
-    },
     "node_modules/dateformat": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz",
@@ -6023,13 +5925,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/evtd": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.4.tgz",
-      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/expect-type": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
@@ -7660,13 +7555,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
-      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lodash-es": {
       "version": "4.18.1",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
@@ -8099,39 +7987,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/naive-ui": {
-      "version": "2.44.1",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.44.1.tgz",
-      "integrity": "sha512-reo8Esw0p58liZwbUutC7meW24Xbn3EwNv91zReWKm2W4JPu+zfgJRn/F7aO0BFmvN+h2brA2M5lRvYqLq4kuA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@css-render/plugin-bem": "^0.15.14",
-        "@css-render/vue3-ssr": "^0.15.14",
-        "@types/lodash": "^4.17.20",
-        "@types/lodash-es": "^4.17.12",
-        "async-validator": "^4.2.5",
-        "css-render": "^0.15.14",
-        "csstype": "^3.1.3",
-        "date-fns": "^4.1.0",
-        "date-fns-tz": "^3.2.0",
-        "evtd": "^0.2.4",
-        "highlight.js": "^11.8.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "seemly": "^0.3.10",
-        "treemate": "^0.3.11",
-        "vdirs": "^0.1.8",
-        "vooks": "^0.2.12",
-        "vueuc": "^0.4.65"
-      },
-      "engines": {
-        "node": ">=20"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.12",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
@@ -9576,13 +9431,6 @@
       ],
       "license": "BSD-3-Clause"
     },
-    "node_modules/seemly": {
-      "version": "0.3.10",
-      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.10.tgz",
-      "integrity": "sha512-2+SMxtG1PcsL0uyhkumlOU6Qo9TAQ/WyH7tthnPIOQB05/12jz9naq6GZ6iZ6ApVsO3rr2gsnTf3++OV63kE1Q==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/semver": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
@@ -10491,13 +10339,6 @@
         "tree-kill": "cli.js"
       }
     },
-    "node_modules/treemate": {
-      "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.3.11.tgz",
-      "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/ts-dedent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
@@ -10787,19 +10628,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/vdirs": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.8.tgz",
-      "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "evtd": "^0.2.2"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.11"
-      }
-    },
     "node_modules/vite": {
       "version": "8.0.14",
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.14.tgz",
@@ -11243,19 +11071,6 @@
         }
       }
     },
-    "node_modules/vooks": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.12.tgz",
-      "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "evtd": "^0.2.2"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
@@ -11370,25 +11185,6 @@
         "vue": "^3.3.0"
       }
     },
-    "node_modules/vueuc": {
-      "version": "0.4.65",
-      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.65.tgz",
-      "integrity": "sha512-lXuMl+8gsBmruudfxnMF9HW4be8rFziylXFu1VHVNbLVhRTXXV4njvpRuJapD/8q+oFEMSfQMH16E/85VoWRyQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@css-render/vue3-ssr": "^0.15.10",
-        "@juggle/resize-observer": "^3.3.1",
-        "css-render": "^0.15.10",
-        "evtd": "^0.2.4",
-        "seemly": "^0.3.6",
-        "vdirs": "^0.1.4",
-        "vooks": "^0.2.4"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.11"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index 8a5e6ac..c2c280c 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,6 @@
     "markdown-it": "^14.1.1",
     "mermaid": "^11.14.0",
     "monaco-editor": "^0.55.1",
-    "naive-ui": "^2.44.1",
     "nodemon": "^3.1.14",
     "pinia": "^3.0.4",
     "pino": "^10.3.1",
diff --git a/packages/client/src/components/auth/DefaultCredentialPrompt.vue b/packages/client/src/components/auth/DefaultCredentialPrompt.vue
index e85b0b4..98ef1f2 100644
--- a/packages/client/src/components/auth/DefaultCredentialPrompt.vue
+++ b/packages/client/src/components/auth/DefaultCredentialPrompt.vue
@@ -2,7 +2,6 @@
 import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { NButton, NModal } from "naive-ui";
 import { fetchCurrentUser } from "@/api/auth";
 import { getApiKey } from "@/api/client";
 
@@ -60,24 +59,23 @@ watch(() => route.fullPath, () => {
 </script>
 
 <template>
-  <NModal
-    v-model:show="show"
-    preset="dialog"
+  <a-modal
+    v-model:visible="show"
     :title="t('login.defaultCredentialTitle')"
     :mask-closable="false"
   >
     <p class="credential-warning-text">
       {{ t("login.defaultCredentialMessage") }}
     </p>
-    <template #action>
-      <NButton :disabled="loading" @click="remindLater">
+    <template #footer>
+      <a-button :disabled="loading" @click="remindLater">
         {{ t("login.defaultCredentialLater") }}
-      </NButton>
-      <NButton type="primary" :loading="loading" @click="goToAccountSettings">
+      </a-button>
+      <a-button type="primary" :loading="loading" @click="goToAccountSettings">
         {{ t("login.defaultCredentialAction") }}
-      </NButton>
+      </a-button>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/chat/ChatPanel.vue b/packages/client/src/components/hermes/chat/ChatPanel.vue
index 6bb91b7..21bf176 100644
--- a/packages/client/src/components/hermes/chat/ChatPanel.vue
+++ b/packages/client/src/components/hermes/chat/ChatPanel.vue
@@ -2614,7 +2614,7 @@ async function handleSessionModelCustomSubmit() {
 
 .default-workspace-label {
   font-size: 13px;
-  color: var(--n-text-color-3);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -2655,7 +2655,7 @@ async function handleSessionModelCustomSubmit() {
 }
 
 .workspace-chip-separator {
-  color: var(--n-text-color-3);
+  color: var(--text-muted);
   font-size: 13px;
   user-select: none;
 }
@@ -2711,7 +2711,7 @@ async function handleSessionModelCustomSubmit() {
 }
 
 .workspace-dropdown-item:hover {
-  background: var(--n-color-hover);
+  background: var(--bg-card-hover);
 }
 
 .workspace-default-badge {
diff --git a/packages/client/src/components/hermes/files/FileBreadcrumb.vue b/packages/client/src/components/hermes/files/FileBreadcrumb.vue
index dacd1b5..febcacc 100644
--- a/packages/client/src/components/hermes/files/FileBreadcrumb.vue
+++ b/packages/client/src/components/hermes/files/FileBreadcrumb.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
 import { useFilesStore } from '@/stores/hermes/files'
 
 const { t } = useI18n()
@@ -18,18 +17,18 @@ function handleClick(index: number) {
 
 <template>
   <div class="file-breadcrumb">
-    <NBreadcrumb>
-      <NBreadcrumbItem @click="handleClick(-1)">
+    <a-breadcrumb>
+      <a-breadcrumb-item @click="handleClick(-1)">
         {{ t('files.breadcrumbRoot') }}
-      </NBreadcrumbItem>
-      <NBreadcrumbItem
+      </a-breadcrumb-item>
+      <a-breadcrumb-item
         v-for="(segment, index) in filesStore.pathSegments"
         :key="index"
         @click="handleClick(index)"
       >
         {{ segment }}
-      </NBreadcrumbItem>
-    </NBreadcrumb>
+      </a-breadcrumb-item>
+    </a-breadcrumb>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/files/FileContextMenu.vue b/packages/client/src/components/hermes/files/FileContextMenu.vue
index 58ade9c..8d41ece 100644
--- a/packages/client/src/components/hermes/files/FileContextMenu.vue
+++ b/packages/client/src/components/hermes/files/FileContextMenu.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
-import { NDropdown } from 'naive-ui'
+import { ref, nextTick, computed } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
 import { useI18n } from 'vue-i18n'
@@ -25,10 +24,18 @@ const emit = defineEmits<{
   (e: 'newFolder', entry: FileEntry): void
 }>()
 
+// Arco's a-trigger has no x/y props. The popup is teleported to body with
+// position:absolute, so page coordinates are the right basis here; the
+// computed style overrides whatever getPopupStyle() derived from the anchor.
+const menuStyle = computed(() => ({
+  left: `${menuX.value}px`,
+  top: `${menuY.value}px`,
+}))
+
 function show(e: MouseEvent, entry: FileEntry) {
   targetEntry.value = entry
-  menuX.value = e.clientX
-  menuY.value = e.clientY
+  menuX.value = e.pageX
+  menuY.value = e.pageY
   showMenu.value = false
   nextTick(() => {
     showMenu.value = true
@@ -115,22 +122,44 @@ async function handleSelect(key: string) {
   }
 }
 
-function handleClickOutside() {
-  showMenu.value = false
-}
-
 defineExpose({ show })
 </script>
 
 <template>
-  <NDropdown
-    :show="showMenu"
-    :x="menuX"
-    :y="menuY"
-    :options="getOptions()"
-    placement="bottom-start"
-    trigger="manual"
-    @select="handleSelect"
-    @clickoutside="handleClickOutside"
-  />
+  <a-trigger
+    trigger="contextMenu"
+    position="bl"
+    v-model:popup-visible="showMenu"
+    :popup-style="menuStyle"
+    :auto-fit-position="false"
+  >
+    <span class="file-context-menu-anchor" />
+    <template #content>
+      <div class="file-context-menu">
+        <template v-for="option in getOptions()" :key="option.key">
+          <div v-if="option.type === 'divider'" class="file-context-divider" />
+          <a-doption v-else @click="handleSelect(option.key)">
+            {{ option.label }}
+          </a-doption>
+        </template>
+      </div>
+    </template>
+  </a-trigger>
 </template>
+
+<style scoped>
+.file-context-menu-anchor {
+  display: none;
+}
+
+.file-context-menu {
+  min-width: 140px;
+  padding: 4px 0;
+}
+
+.file-context-divider {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--border-color);
+}
+</style>
diff --git a/packages/client/src/components/hermes/files/FileEditor.vue b/packages/client/src/components/hermes/files/FileEditor.vue
index 651e4e3..a1b78f8 100644
--- a/packages/client/src/components/hermes/files/FileEditor.vue
+++ b/packages/client/src/components/hermes/files/FileEditor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { NButton, NSpace } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
 import { useI18n } from 'vue-i18n'
@@ -97,14 +96,14 @@ function handleClose() {
   <div class="file-editor">
     <div class="editor-header">
       <span class="editor-filename">{{ filesStore.editingFile?.path }}</span>
-      <NSpace>
-        <NButton size="small" type="primary" :loading="saving" @click="handleSave">
+      <a-space>
+        <a-button size="small" type="primary" :loading="saving" @click="handleSave">
           {{ t('files.saveFile') }}
-        </NButton>
-        <NButton size="small" @click="handleClose">
+        </a-button>
+        <a-button size="small" @click="handleClose">
           {{ t('files.closeEditor') }}
-        </NButton>
-      </NSpace>
+        </a-button>
+      </a-space>
     </div>
     <div ref="editorContainer" class="editor-container" />
   </div>
diff --git a/packages/client/src/components/hermes/files/FileList.vue b/packages/client/src/components/hermes/files/FileList.vue
index d3115ad..fa03ca6 100644
--- a/packages/client/src/components/hermes/files/FileList.vue
+++ b/packages/client/src/components/hermes/files/FileList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NButton, NSpin, NEmpty } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useFilesStore, isPreviewableFile, isTextFile } from '@/stores/hermes/files'
@@ -80,8 +79,8 @@ async function handleDownload(entry: FileEntry) {
 
 <template>
   <div class="file-list">
-    <NSpin :show="filesStore.loading">
-      <NEmpty v-if="!filesStore.loading && filesStore.sortedEntries.length === 0" :description="t('files.emptyDir')" />
+    <a-spin :loading="filesStore.loading">
+      <a-empty v-if="!filesStore.loading && filesStore.sortedEntries.length === 0" :description="t('files.emptyDir')" />
       <div v-else class="file-list-items">
         <div class="file-list-header file-list-grid">
           <div class="file-name sort-header" @click="filesStore.setSort('name')">
@@ -112,13 +111,13 @@ async function handleDownload(entry: FileEntry) {
           <div class="file-size">{{ entry.isDir ? '—' : formatSize(entry.size) }}</div>
           <div class="file-date">{{ formatDate(entry.modTime) }}</div>
           <div class="file-actions">
-            <NButton v-if="isPreviewableFile(entry.name) && !entry.isDir" size="tiny" quaternary @click.stop="handlePreview(entry)" :title="t('files.preview')">👁️</NButton>
-            <NButton v-if="isTextFile(entry.name) && !entry.isDir" size="tiny" quaternary @click.stop="filesStore.openEditor(entry.path)" :title="t('files.edit')">✏️</NButton>
-            <NButton v-if="!filesStore.currentWorkspaceSessionId && !entry.isDir" size="tiny" quaternary @click.stop="handleDownload(entry)" :title="t('files.download')">⬇️</NButton>
+            <a-button v-if="isPreviewableFile(entry.name) && !entry.isDir" size="mini" type="text" @click.stop="handlePreview(entry)" :title="t('files.preview')">👁️</a-button>
+            <a-button v-if="isTextFile(entry.name) && !entry.isDir" size="mini" type="text" @click.stop="filesStore.openEditor(entry.path)" :title="t('files.edit')">✏️</a-button>
+            <a-button v-if="!filesStore.currentWorkspaceSessionId && !entry.isDir" size="mini" type="text" @click.stop="handleDownload(entry)" :title="t('files.download')">⬇️</a-button>
           </div>
         </div>
       </div>
-    </NSpin>
+    </a-spin>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/files/FilePreview.vue b/packages/client/src/components/hermes/files/FilePreview.vue
index c961fa8..a6edd47 100644
--- a/packages/client/src/components/hermes/files/FilePreview.vue
+++ b/packages/client/src/components/hermes/files/FilePreview.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, h } from 'vue'
-import { NButton, NIcon } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useFilesStore } from '@/stores/hermes/files'
@@ -46,12 +45,12 @@ const CloseIcon = () =>
   <div class="file-preview" v-if="filesStore.previewFile">
     <div class="preview-header">
       <span class="preview-filename">{{ filesStore.previewFile.path }}</span>
-      <NButton size="small" quaternary @click="filesStore.closePreview()">
+      <a-button size="small" type="text" @click="filesStore.closePreview()">
         <template #icon>
-          <NIcon><CloseIcon /></NIcon>
+          <CloseIcon />
         </template>
         {{ t('files.closePreview') }}
-      </NButton>
+      </a-button>
     </div>
     <div class="preview-content">
       <img
diff --git a/packages/client/src/components/hermes/files/FileRenameModal.vue b/packages/client/src/components/hermes/files/FileRenameModal.vue
index b575cb8..b1b36b0 100644
--- a/packages/client/src/components/hermes/files/FileRenameModal.vue
+++ b/packages/client/src/components/hermes/files/FileRenameModal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { NModal, NInput, NButton, NSpace } from 'naive-ui'
+import { ref, watch, computed, nextTick } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useFilesStore } from '@/stores/hermes/files'
 import type { FileEntry } from '@/api/hermes/files'
+import type { InputInstance } from '@arco-design/web-vue'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -23,6 +23,7 @@ const emit = defineEmits<{
 
 const inputValue = ref('')
 const submitting = ref(false)
+const inputRef = ref<InputInstance | null>(null)
 
 watch(() => props.show, (val) => {
   if (val) {
@@ -31,6 +32,9 @@ watch(() => props.show, (val) => {
     } else {
       inputValue.value = ''
     }
+    nextTick(() => {
+      inputRef.value?.focus()
+    })
   }
 })
 
@@ -81,20 +85,26 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <NModal :show="props.show" preset="dialog" :title="title" @update:show="emit('update:show', false)" style="width: 400px;">
-    <NInput
-      v-model:value="inputValue"
+  <a-modal
+    :visible="props.show"
+    :title="title"
+    :width="400"
+    unmount-on-close
+    @update:visible="emit('update:show', false)"
+  >
+    <a-input
+      ref="inputRef"
+      v-model="inputValue"
       :placeholder="placeholder"
       @keydown.enter="handleSubmit"
-      autofocus
     />
-    <template #action>
-      <NSpace>
-        <NButton @click="emit('update:show', false)">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="submitting" :disabled="!inputValue.trim()" @click="handleSubmit">
+    <template #footer>
+      <a-space>
+        <a-button @click="emit('update:show', false)">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="submitting" :disabled="!inputValue.trim()" @click="handleSubmit">
           {{ t('common.ok') }}
-        </NButton>
-      </NSpace>
+        </a-button>
+      </a-space>
     </template>
-  </NModal>
+  </a-modal>
 </template>
diff --git a/packages/client/src/components/hermes/files/FileToolbar.vue b/packages/client/src/components/hermes/files/FileToolbar.vue
index b6bcc2b..22c0ee5 100644
--- a/packages/client/src/components/hermes/files/FileToolbar.vue
+++ b/packages/client/src/components/hermes/files/FileToolbar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NButton, NSpace } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useFilesStore } from '@/stores/hermes/files'
@@ -31,20 +30,20 @@ async function handleRefresh() {
 
 <template>
   <div class="file-toolbar">
-    <NSpace :size="8" :wrap="true" class="toolbar-space">
-      <NButton size="small" @click="emit('showNewFile')" class="toolbar-btn">
+    <a-space :size="8" :wrap="true" class="toolbar-space">
+      <a-button size="small" @click="emit('showNewFile')" class="toolbar-btn">
         {{ t('files.newFile') }}
-      </NButton>
-      <NButton size="small" @click="emit('showNewFolder')" class="toolbar-btn">
+      </a-button>
+      <a-button size="small" @click="emit('showNewFolder')" class="toolbar-btn">
         {{ t('files.newFolder') }}
-      </NButton>
-      <NButton v-if="allowUpload" size="small" @click="emit('showUpload')" class="toolbar-btn">
+      </a-button>
+      <a-button v-if="allowUpload" size="small" @click="emit('showUpload')" class="toolbar-btn">
         {{ t('files.upload') }}
-      </NButton>
-      <NButton size="small" @click="handleRefresh" class="toolbar-btn">
+      </a-button>
+      <a-button size="small" @click="handleRefresh" class="toolbar-btn">
         {{ t('files.refresh') }}
-      </NButton>
-    </NSpace>
+      </a-button>
+    </a-space>
   </div>
 </template>
 
@@ -61,9 +60,8 @@ async function handleRefresh() {
 
 .toolbar-space {
   @media (max-width: $breakpoint-mobile) {
-    :deep(.n-space) {
-      gap: 4px !important;
-    }
+    column-gap: 4px !important;
+    row-gap: 4px !important;
   }
 }
 
diff --git a/packages/client/src/components/hermes/files/FileTree.vue b/packages/client/src/components/hermes/files/FileTree.vue
index e128dd5..41ec029 100644
--- a/packages/client/src/components/hermes/files/FileTree.vue
+++ b/packages/client/src/components/hermes/files/FileTree.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, watch, h } from 'vue'
-import { NTree } from 'naive-ui'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useFilesStore } from '@/stores/hermes/files'
-import type { TreeOption } from 'naive-ui'
+import type { TreeNodeData } from '@arco-design/web-vue'
 
 const { t } = useI18n()
 const filesStore = useFilesStore()
@@ -14,12 +13,12 @@ const props = defineProps<{
 
 const effectiveProfile = computed(() => props.profile === undefined ? filesStore.currentProfile : props.profile)
 
-const treeData = ref<TreeOption[]>([])
+const treeData = ref<TreeNodeData[]>([])
 const selectedKeys = ref<string[]>([])
 const treeInstanceKey = ref(0)
 let rootLoadSeq = 0
 
-async function loadChildren(path: string): Promise<TreeOption[]> {
+async function loadChildren(path: string): Promise<TreeNodeData[]> {
   try {
     const result = filesStore.currentWorkspaceSessionId
       ? await filesStore.listEntries(path)
@@ -29,7 +28,7 @@ async function loadChildren(path: string): Promise<TreeOption[]> {
       .sort((a, b) => a.name.localeCompare(b.name))
       .map(e => ({
         key: e.path,
-        label: e.name,
+        title: e.name,
         isLeaf: false,
       }))
   } catch {
@@ -37,16 +36,16 @@ async function loadChildren(path: string): Promise<TreeOption[]> {
   }
 }
 
-async function handleLoad(node: TreeOption): Promise<void> {
+async function handleLoad(node: TreeNodeData): Promise<void> {
   const seq = rootLoadSeq
-  const children = await loadChildren(node.key as string)
+  const children = await loadChildren(String(node.key ?? ''))
   if (seq === rootLoadSeq) node.children = children
 }
 
-function handleSelect(keys: string[]) {
+function handleSelect(keys: (string | number)[]) {
   if (keys.length > 0) {
-    selectedKeys.value = keys
-    filesStore.navigateTo(keys[0], { profile: effectiveProfile.value })
+    selectedKeys.value = keys.map(String)
+    filesStore.navigateTo(String(keys[0]), { profile: effectiveProfile.value })
   }
 }
 
@@ -55,11 +54,6 @@ function handleRootClick() {
   filesStore.navigateTo('', { profile: effectiveProfile.value })
 }
 
-function renderLabel({ option }: { option: TreeOption }) {
-  const label = String(option.label || '')
-  return h('span', { class: 'tree-node-label', title: label }, label)
-}
-
 watch([effectiveProfile, () => filesStore.currentWorkspaceSessionId, () => props.workspaceKey], async () => {
   const seq = ++rootLoadSeq
   selectedKeys.value = []
@@ -78,16 +72,21 @@ watch([effectiveProfile, () => filesStore.currentWorkspaceSessionId, () => props
       </svg>
       <span>{{ t('files.breadcrumbRoot') }}</span>
     </div>
-    <NTree
+    <a-tree
       :key="treeInstanceKey"
       :data="treeData"
       :selected-keys="selectedKeys"
-      :on-load="handleLoad"
-      :render-label="renderLabel"
-      expand-on-click
-      block-line
-      @update:selected-keys="handleSelect"
-    />
+      :load-more="handleLoad"
+      :default-expand-all="false"
+      action-on-node-click="expand"
+      block-node
+      show-line
+      @select="handleSelect"
+    >
+      <template #title="node">
+        <span class="tree-node-label" :title="node.title">{{ node.title }}</span>
+      </template>
+    </a-tree>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/files/FileUploadModal.vue b/packages/client/src/components/hermes/files/FileUploadModal.vue
index 8a175f9..8b778d6 100644
--- a/packages/client/src/components/hermes/files/FileUploadModal.vue
+++ b/packages/client/src/components/hermes/files/FileUploadModal.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { NModal, NButton, NUpload, NSpace } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
-import type { UploadFileInfo } from 'naive-ui'
+import type { FileItem } from '@arco-design/web-vue/es/upload/interfaces'
 import { useI18n } from 'vue-i18n'
 import { useFilesStore } from '@/stores/hermes/files'
 
@@ -16,9 +15,10 @@ const emit = defineEmits<{ (e: 'update:show', value: boolean): void }>()
 const uploading = ref(false)
 const fileList = ref<File[]>([])
 
-function handleFileChange(data: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
-  fileList.value = data.fileList
-    .map((f: UploadFileInfo) => f.file)
+// Arco's change event passes (fileList, fileItem); naive passed { file, fileList }.
+function handleFileChange(list: FileItem[]) {
+  fileList.value = list
+    .map((f: FileItem) => f.file)
     .filter((f): f is File => f != null)
 }
 
@@ -44,26 +44,25 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal :show="props.show" preset="dialog" :title="t('files.upload')" @update:show="handleClose" style="width: 500px;">
-    <NUpload
+  <a-modal :visible="props.show" :title="t('files.upload')" :width="500" @update:visible="handleClose">
+    <a-upload
       multiple
-      directory-dnd
-      :default-upload="false"
+      :auto-upload="false"
       @change="handleFileChange"
     >
       <div class="upload-dragger">
         <p>{{ t('files.dragDropHint') }}</p>
       </div>
-    </NUpload>
-    <template #action>
-      <NSpace>
-        <NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="uploading" :disabled="fileList.length === 0" @click="handleUpload">
+    </a-upload>
+    <template #footer>
+      <a-space>
+        <a-button @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="uploading" :disabled="fileList.length === 0" @click="handleUpload">
           {{ t('files.upload') }} ({{ fileList.length }})
-        </NButton>
-      </NSpace>
+        </a-button>
+      </a-space>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped>
diff --git a/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue b/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue
index 2f42dad..abc7c08 100644
--- a/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue
+++ b/packages/client/src/components/hermes/group-chat/CreateRoomForm.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NInput, NButton, NSpace, NInputNumber, NCollapse, NCollapseItem } from 'naive-ui'
 import { getStoredUsername } from '@/api/client'
 import FolderPicker from '@/components/hermes/chat/FolderPicker.vue'
 
@@ -54,26 +53,25 @@ function focusRoomInput() {
     <div class="create-form">
         <div class="form-group">
             <label class="form-label">{{ t('groupChat.yourName') }}</label>
-            <NInput
-                v-model:value="userName"
+            <a-input
+                v-model="userName"
                 :placeholder="t('groupChat.yourNamePlaceholder')"
                 @keyup.enter="focusRoomInput"
             />
         </div>
         <div class="form-group">
             <label class="form-label">{{ t('groupChat.yourDescription') }}</label>
-            <NInput
-                v-model:value="description"
-                type="textarea"
+            <a-textarea
+                v-model="description"
                 :rows="2"
                 :placeholder="t('groupChat.yourDescriptionPlaceholder')"
             />
         </div>
         <div class="form-group">
             <label class="form-label">{{ t('groupChat.roomName') }}</label>
-            <NInput
+            <a-input
                 ref="roomInput"
-                v-model:value="roomName"
+                v-model="roomName"
                 :placeholder="t('groupChat.roomNamePlaceholder')"
                 @keyup.enter="handleCreate"
             />
@@ -81,15 +79,15 @@ function focusRoomInput() {
         <div class="form-group">
             <label class="form-label">{{ t('groupChat.inviteCode') }}</label>
             <div class="code-row">
-                <NInput
-                    v-model:value="inviteCode"
+                <a-input
+                    v-model="inviteCode"
                     :placeholder="t('groupChat.autoGenerate')"
                 />
-                <NButton size="small" @click="inviteCode = generateCode()">
+                <a-button size="small" @click="inviteCode = generateCode()">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                         <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
                     </svg>
-                </NButton>
+                </a-button>
             </div>
         </div>
 
@@ -98,33 +96,33 @@ function focusRoomInput() {
             <FolderPicker v-model="workspace" />
         </div>
 
-        <NCollapse class="compression-collapse">
-            <NCollapseItem :title="t('groupChat.compressionSettings')" name="compression">
+        <a-collapse class="compression-collapse">
+            <a-collapse-item :header="t('groupChat.compressionSettings')" key="compression">
                 <div class="compression-fields">
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.triggerTokens') }}</label>
-                        <NInputNumber v-model:value="compression.triggerTokens" :min="1000" :step="1000" style="width: 100%" />
+                        <a-input-number v-model="compression.triggerTokens" :min="1000" :step="1000" style="width: 100%" />
                         <p class="form-hint">{{ t('groupChat.triggerTokensDesc') }}</p>
                     </div>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.maxHistoryTokens') }}</label>
-                        <NInputNumber v-model:value="compression.maxHistoryTokens" :min="1000" :step="1000" style="width: 100%" />
+                        <a-input-number v-model="compression.maxHistoryTokens" :min="1000" :step="1000" style="width: 100%" />
                         <p class="form-hint">{{ t('groupChat.maxHistoryTokensDesc') }}</p>
                     </div>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.tailMessageCount') }}</label>
-                        <NInputNumber v-model:value="compression.tailMessageCount" :min="1" :step="5" style="width: 100%" />
+                        <a-input-number v-model="compression.tailMessageCount" :min="1" :step="5" style="width: 100%" />
                         <p class="form-hint">{{ t('groupChat.tailMessageCountDesc') }}</p>
                     </div>
                 </div>
-            </NCollapseItem>
-        </NCollapse>
+            </a-collapse-item>
+        </a-collapse>
 
         <div class="modal-actions">
-            <NSpace justify="end">
-                <NButton @click="emit('cancel')">{{ t('common.cancel') }}</NButton>
-                <NButton type="primary" :disabled="!roomName.trim() || !userName.trim()" @click="handleCreate">{{ t('common.create') }}</NButton>
-            </NSpace>
+            <a-space justify="end">
+                <a-button @click="emit('cancel')">{{ t('common.cancel') }}</a-button>
+                <a-button type="primary" :disabled="!roomName.trim() || !userName.trim()" @click="handleCreate">{{ t('common.create') }}</a-button>
+            </a-space>
         </div>
     </div>
 </template>
diff --git a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
index 064468d..f13cd45 100644
--- a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, nextTick, onMounted, onUnmounted, watch, h } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NButton, NDropdown, NTooltip, type DropdownOption } from 'naive-ui'
 import { useGroupChatStore } from '@/stores/hermes/group-chat'
 import { useSettingsStore } from '@/stores/hermes/settings'
 import { useToolTraceVisibility } from '@/composables/useToolTraceVisibility'
@@ -24,7 +23,9 @@ const isDragging = ref(false)
 const dragCounter = ref(0)
 const isComposing = ref(false)
 const autoPlaySpeech = ref(false)
-const inputSettingsOptions = computed<DropdownOption[]>(() => [
+type InputSettingsOption = { label: string; key: string; icon: () => unknown }
+
+const inputSettingsOptions = computed<InputSettingsOption[]>(() => [
     {
         label: t('chat.autoPlaySpeech'),
         key: 'autoPlaySpeech',
@@ -66,7 +67,8 @@ watch(autoPlaySpeech, (value) => {
     store.setAutoPlaySpeech(value)
 })
 
-function handleInputSettingsSelect(key: string | number) {
+function handleInputSettingsSelect(selected: string | number | Record<string, any> | undefined) {
+    const key = typeof selected === 'object' ? selected?.key : selected
     if (key === 'autoPlaySpeech') {
         autoPlaySpeech.value = !autoPlaySpeech.value
         return
@@ -270,7 +272,7 @@ function selectMention(name: string) {
 // ─── Event Handlers ──────────────────────────────────────
 
 function handleKeydown(e: KeyboardEvent) {
-    // Mention navigation — fully custom, no NDropdown interference
+    // Mention navigation — fully custom, no dropdown interference
     if (mentionActive.value && filteredMentionOptions.value.length > 0) {
         if (e.key === 'ArrowDown') {
             e.preventDefault()
@@ -493,44 +495,52 @@ function isImage(type: string): boolean {
             />
             <div class="input-toolbar">
                 <div class="input-top-bar">
-                    <NTooltip trigger="hover" :disabled="isMobileViewport">
-                        <template #trigger>
-                            <NButton quaternary size="tiny" circle class="toolbar-icon-button" @click="handleAttachClick">
-                                <template #icon>
-                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
-                                </template>
-                            </NButton>
-                        </template>
-                        {{ t('chat.attachFiles') }}
-                    </NTooltip>
-                    <NDropdown
+                    <a-tooltip trigger="hover" :disabled="isMobileViewport" :content="t('chat.attachFiles')">
+                        <a-button type="secondary" size="mini" shape="circle" class="toolbar-icon-button" @click="handleAttachClick">
+                            <template #icon>
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown
                         trigger="click"
-                        :options="inputSettingsOptions"
-                        :show-arrow="true"
                         @select="handleInputSettingsSelect"
                     >
-                        <NTooltip trigger="hover" :disabled="isMobileViewport">
-                            <template #trigger>
-                                <NButton quaternary size="tiny" class="input-settings-button" :aria-label="t('sidebar.settings')">
-                                    <template #icon>
-                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
-                                            <circle cx="12" cy="12" r="3"/>
-                                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.04 4.3l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.08a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.2.6.77 1 1.4 1H21a2 2 0 1 1 0 4h-.09c-.63 0-1.2.4-1.51 1Z"/>
-                                        </svg>
-                                    </template>
-                                    <span class="input-settings-label">{{ t('sidebar.settings') }}</span>
-                                    <svg class="toolbar-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
-                                </NButton>
+                        <a-button
+                            type="secondary"
+                            size="mini"
+                            class="input-settings-button"
+                            :title="isMobileViewport ? undefined : t('sidebar.settings')"
+                            :aria-label="t('sidebar.settings')"
+                        >
+                            <template #icon>
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="12" cy="12" r="3"/>
+                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06A2 2 0 1 1 7.04 4.3l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.08a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.2.6.77 1 1.4 1H21a2 2 0 1 1 0 4h-.09c-.63 0-1.2.4-1.51 1Z"/>
+                                </svg>
                             </template>
-                            {{ t('sidebar.settings') }}
-                        </NTooltip>
-                    </NDropdown>
+                            <span class="input-settings-label">{{ t('sidebar.settings') }}</span>
+                            <svg class="toolbar-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
+                        </a-button>
+                        <template #content>
+                            <a-doption
+                                v-for="option in inputSettingsOptions"
+                                :key="option.key"
+                                :value="option.key"
+                            >
+                                <span class="settings-option">
+                                    <component :is="option.icon" />
+                                    {{ option.label }}
+                                </span>
+                            </a-doption>
+                        </template>
+                    </a-dropdown>
                 </div>
                 <div class="input-actions">
-                    <NButton
+                    <a-button
                         size="medium"
                         type="primary"
-                        circle
+                        shape="circle"
                         class="send-button"
                         :disabled="!canSend"
                         :aria-label="t('chat.send')"
@@ -540,7 +550,7 @@ function isImage(type: string): boolean {
                             <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                         </template>
                         <span class="visually-hidden">{{ t('chat.send') }}</span>
-                    </NButton>
+                    </a-button>
                 </div>
             </div>
         </div>
@@ -620,12 +630,6 @@ function isImage(type: string): boolean {
     padding: 0;
     background: transparent !important;
 
-    :deep(.n-button__state-border),
-    :deep(.n-button__border),
-    :deep(.n-button__ripple) {
-        display: none;
-    }
-
     .tool-trace-icon {
         display: block;
         width: 16px;
@@ -637,16 +641,8 @@ function isImage(type: string): boolean {
     color: $text-secondary;
     border-radius: 999px;
     padding: 0 7px 0 6px;
-
-    :deep(.n-button__content) {
-        gap: 4px;
-    }
-
-    :deep(.n-button__state-border),
-    :deep(.n-button__border),
-    :deep(.n-button__ripple) {
-        display: none;
-    }
+    gap: 4px;
+    border-color: transparent;
 }
 
 .toolbar-chevron {
@@ -856,22 +852,12 @@ function isImage(type: string): boolean {
     padding: 0 !important;
     border: 0 !important;
     box-shadow: none !important;
+    gap: 0;
 
-    :deep(.n-button__icon) {
+    :deep(.arco-btn-icon) {
         margin: 0 !important;
     }
 
-    :deep(.n-button__content) {
-        display: none;
-    }
-
-    :deep(.n-button__border),
-    :deep(.n-button__state-border),
-    :deep(.n-button__ripple),
-    :deep(.n-base-wave) {
-        display: none;
-    }
-
     &:disabled {
         color: var(--text-on-overlay);
         background-color: #9f9f9f;
@@ -905,7 +891,7 @@ function isImage(type: string): boolean {
     }
 }
 
-/* ── Custom mention dropdown (replaces NDropdown) ── */
+/* ── Custom mention dropdown (replaces the library dropdown) ── */
 
 .mention-dropdown {
     position: fixed;
@@ -952,7 +938,7 @@ function isImage(type: string): boolean {
     }
 }
 
-/* ── Dropdown fade/scale animation (matching NDropdown) ── */
+/* ── Dropdown fade/scale animation ── */
 
 .dropdown-fade-enter-active {
     transition: opacity 0.2s cubic-bezier(0, 0, .2, 1), transform 0.2s cubic-bezier(0, 0, .2, 1);
@@ -980,12 +966,9 @@ function isImage(type: string): boolean {
     .input-settings-button {
         min-width: 36px;
         padding: 0 4px 0 6px;
+        gap: 2px;
 
-        :deep(.n-button__content) {
-            gap: 2px;
-        }
-
-        :deep(.n-button__icon) {
+        :deep(.arco-btn-icon) {
             margin: 0;
         }
     }
diff --git a/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue b/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue
index 59855e2..c72a3b9 100644
--- a/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupChatPanel.vue
@@ -2,7 +2,6 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { NInput, NButton, NSpace, NSelect, NPopover, NPopconfirm, NInputNumber, NDropdown, NModal, type DropdownOption } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useGroupChatStore } from '@/stores/hermes/group-chat'
 import { useProfilesStore } from '@/stores/hermes/profiles'
@@ -214,8 +213,10 @@ async function copyRoomLink(roomId: string) {
     else message.error(t('common.copied') + ' ✗')
 }
 
-const roomContextMenuOptions = computed<DropdownOption[]>(() => {
-    const options: DropdownOption[] = [{ label: t('groupChat.copyRoomLink'), key: 'copy-link' }]
+type RoomContextMenuOption = { label: string; key: string }
+
+const roomContextMenuOptions = computed<RoomContextMenuOption[]>(() => {
+    const options: RoomContextMenuOption[] = [{ label: t('groupChat.copyRoomLink'), key: 'copy-link' }]
     if (canManageRoom(contextRoom.value)) {
         options.push({ label: t('chat.setWorkspace'), key: 'set-workspace' })
         options.push({ label: t('groupChat.cloneRoom'), key: 'clone-room' })
@@ -223,6 +224,15 @@ const roomContextMenuOptions = computed<DropdownOption[]>(() => {
     return options
 })
 
+// Arco's a-trigger has no x/y props. The popup is teleported to body with
+// position:absolute, so page coordinates are the right basis here; the computed
+// style overrides whatever getPopupStyle() derived from the anchor. Callers keep
+// storing clientX/clientY, so the scroll offset is added at style-build time.
+const roomContextMenuStyle = computed(() => ({
+    left: `${roomContextMenuX.value + window.scrollX}px`,
+    top: `${roomContextMenuY.value + window.scrollY}px`,
+}))
+
 function handleRoomContextMenu(event: MouseEvent, roomId: string) {
     event.preventDefault()
     contextRoomId.value = roomId
@@ -231,10 +241,6 @@ function handleRoomContextMenu(event: MouseEvent, roomId: string) {
     showRoomContextMenu.value = true
 }
 
-function handleRoomContextClickOutside() {
-    showRoomContextMenu.value = false
-}
-
 function handleRoomContextSelect(key: string) {
     showRoomContextMenu.value = false
     const roomId = contextRoomId.value
@@ -488,14 +494,11 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                         <span v-if="room.inviteCode" class="room-code">{{ room.inviteCode }}</span>
                         <span class="room-tokens">{{ formatTokens(room.totalTokens || 0) }}</span>
                     </div>
-                    <NPopconfirm v-if="canManageRoom(room)" @positive-click="handleDeleteRoom(room.id)">
-                        <template #trigger>
-                            <button class="room-action-btn danger" @click.stop>
-                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                            </button>
-                        </template>
-                        {{ t('groupChat.deleteRoomConfirm') }}
-                    </NPopconfirm>
+                    <a-popconfirm v-if="canManageRoom(room)" :content="t('groupChat.deleteRoomConfirm')" @ok="handleDeleteRoom(room.id)">
+                        <button class="room-action-btn danger" @click.stop>
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                        </button>
+                    </a-popconfirm>
                 </div>
                 <div v-if="store.rooms.length === 0" class="empty-rooms">
                     {{ t('groupChat.noRooms') }}
@@ -513,16 +516,26 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
             </div>
         </div>
 
-        <NDropdown
-            placement="bottom-start"
-            trigger="manual"
-            :x="roomContextMenuX"
-            :y="roomContextMenuY"
-            :options="roomContextMenuOptions"
-            :show="showRoomContextMenu"
-            @select="handleRoomContextSelect"
-            @clickoutside="handleRoomContextClickOutside"
-        />
+        <a-trigger
+            position="bl"
+            trigger="contextMenu"
+            v-model:popup-visible="showRoomContextMenu"
+            :popup-style="roomContextMenuStyle"
+            :auto-fit-position="false"
+        >
+            <span class="room-context-menu-anchor" />
+            <template #content>
+                <div class="room-context-menu">
+                    <a-doption
+                        v-for="option in roomContextMenuOptions"
+                        :key="option.key"
+                        @click="handleRoomContextSelect(option.key)"
+                    >
+                        {{ option.label }}
+                    </a-doption>
+                </div>
+            </template>
+        </a-trigger>
 
         <!-- Main chat area -->
         <div
@@ -555,45 +568,45 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                 </div>
                 <div class="header-info">
                     <!-- Stacked avatars (user + agents) -->
-                    <NPopover v-if="store.agents.length" trigger="click" placement="bottom-end" :width="220">
-                        <template #trigger>
-                            <div class="avatar-stack-inner">
-                                <!-- User avatar first -->
-                                <span class="avatar-stack-item" :style="{ zIndex: store.agents.length + 1 }">
-                                    <ProfileAvatar class="agent-avatar" :name="store.userName || store.userId" :avatar="userMemberAvatar" :size="24" />
-                                </span>
-                                <span
-                                    v-for="(agent, index) in store.agents.slice(-4)"
-                                    :key="agent.id"
-                                    class="avatar-stack-item"
-                                    :style="{ zIndex: store.agents.length - index }"
-                                >
-                                    <ProfileAvatar class="agent-avatar" :name="agentAvatarName(agent)" :avatar="profileAvatarFor(agent.profile)" :size="24" />
-                                </span>
-                                <span v-if="store.agents.length > 4" class="avatar-stack-more">+{{ store.agents.length - 4 }}</span>
+                    <a-popover v-if="store.agents.length" trigger="click" position="br" :content-style="{ width: '220px' }">
+                        <div class="avatar-stack-inner">
+                            <!-- User avatar first -->
+                            <span class="avatar-stack-item" :style="{ zIndex: store.agents.length + 1 }">
+                                <ProfileAvatar class="agent-avatar" :name="store.userName || store.userId" :avatar="userMemberAvatar" :size="24" />
+                            </span>
+                            <span
+                                v-for="(agent, index) in store.agents.slice(-4)"
+                                :key="agent.id"
+                                class="avatar-stack-item"
+                                :style="{ zIndex: store.agents.length - index }"
+                            >
+                                <ProfileAvatar class="agent-avatar" :name="agentAvatarName(agent)" :avatar="profileAvatarFor(agent.profile)" :size="24" />
+                            </span>
+                            <span v-if="store.agents.length > 4" class="avatar-stack-more">+{{ store.agents.length - 4 }}</span>
+                        </div>
+                        <template #content>
+                            <div class="agent-popover">
+                                <div class="agent-popover-item" style="margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color, #efeff5);">
+                                    <ProfileAvatar class="agent-avatar" :name="store.userName || store.userId" :avatar="userMemberAvatar" :size="28" />
+                                    <div class="agent-popover-info">
+                                        <span class="agent-popover-name">{{ store.userName || 'You' }}</span>
+                                        <span class="agent-popover-profile">{{ t('groupChat.you') }}</span>
+                                    </div>
+                                </div>
+                                <div class="agent-popover-title">{{ t('groupChat.agents') }} ({{ store.agents.length }})</div>
+                                <div v-for="agent in store.agents" :key="agent.id" class="agent-popover-item">
+                                    <ProfileAvatar class="agent-avatar" :name="agentAvatarName(agent)" :avatar="profileAvatarFor(agent.profile)" :size="28" />
+                                    <div class="agent-popover-info">
+                                        <span class="agent-popover-name">{{ agent.name }}</span>
+                                        <span class="agent-popover-profile">{{ agent.profile }}</span>
+                                    </div>
+                                    <button v-if="currentRoomCanManage" class="agent-popover-remove" @click="handleRemoveAgent(agent.id)">
+                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                                    </button>
+                                </div>
                             </div>
                         </template>
-                        <div class="agent-popover">
-                            <div class="agent-popover-item" style="margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--n-border-color, #efeff5);">
-                                <ProfileAvatar class="agent-avatar" :name="store.userName || store.userId" :avatar="userMemberAvatar" :size="28" />
-                                <div class="agent-popover-info">
-                                    <span class="agent-popover-name">{{ store.userName || 'You' }}</span>
-                                    <span class="agent-popover-profile">{{ t('groupChat.you') }}</span>
-                                </div>
-                            </div>
-                            <div class="agent-popover-title">{{ t('groupChat.agents') }} ({{ store.agents.length }})</div>
-                            <div v-for="agent in store.agents" :key="agent.id" class="agent-popover-item">
-                                <ProfileAvatar class="agent-avatar" :name="agentAvatarName(agent)" :avatar="profileAvatarFor(agent.profile)" :size="28" />
-                                <div class="agent-popover-info">
-                                    <span class="agent-popover-name">{{ agent.name }}</span>
-                                    <span class="agent-popover-profile">{{ agent.profile }}</span>
-                                </div>
-                                <button v-if="currentRoomCanManage" class="agent-popover-remove" @click="handleRemoveAgent(agent.id)">
-                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                                </button>
-                            </div>
-                        </div>
-                    </NPopover>
+                    </a-popover>
                     <!-- Only user avatar, no agents -->
                     <div v-else-if="store.userName" class="avatar-stack-inner">
                         <span class="avatar-stack-item">
@@ -606,16 +619,17 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                     <button v-if="currentRoomCanManage" class="icon-btn" :title="t('groupChat.compressionConfig')" @click="handleOpenCompressionConfig">
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 4.6a1.65 1.65 0 0 0 1.51 1V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1.51 1z"/></svg>
                     </button>
-                    <NPopconfirm v-if="currentRoomCanManage" @positive-click="handleClearRoomContext">
-                        <template #trigger>
-                            <button class="icon-btn" :title="t('groupChat.clearContext')">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                                    <path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="M19 6l-1 14H6L5 6" /><path d="M10 11v5" /><path d="M14 11v5" />
-                                </svg>
-                            </button>
-                        </template>
-                        {{ t('groupChat.clearContextConfirm') }}
-                    </NPopconfirm>
+                    <a-popconfirm
+                        v-if="currentRoomCanManage"
+                        :content="t('groupChat.clearContextConfirm')"
+                        @ok="handleClearRoomContext"
+                    >
+                        <button class="icon-btn" :title="t('groupChat.clearContext')">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                <path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="M19 6l-1 14H6L5 6" /><path d="M10 11v5" /><path d="M14 11v5" />
+                            </svg>
+                        </button>
+                    </a-popconfirm>
                     <span v-if="store.members.length" class="member-count">
                         {{ store.members.length }} {{ t('groupChat.members') }}
                     </span>
@@ -648,21 +662,21 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                                 <div class="approval-float-desc">{{ visibleApproval.description }}</div>
                                 <code class="approval-float-command">{{ visibleApproval.command }}</code>
                                 <div class="approval-float-actions">
-                                    <NButton v-if="visibleApproval.isMemoryWrite" size="small" type="primary" @click="handleApproval('once')">
+                                    <a-button v-if="visibleApproval.isMemoryWrite" size="small" type="primary" @click="handleApproval('once')">
                                         {{ t('chat.approvalAgree') }}
-                                    </NButton>
-                                    <NButton v-if="!visibleApproval.isMemoryWrite && visibleApproval.choices.includes('once')" size="small" type="primary" @click="handleApproval('once')">
+                                    </a-button>
+                                    <a-button v-if="!visibleApproval.isMemoryWrite && visibleApproval.choices.includes('once')" size="small" type="primary" @click="handleApproval('once')">
                                         {{ t('chat.approvalAllowOnce') }}
-                                    </NButton>
-                                    <NButton v-if="!visibleApproval.isMemoryWrite && visibleApproval.choices.includes('session')" size="small" secondary @click="handleApproval('session')">
+                                    </a-button>
+                                    <a-button v-if="!visibleApproval.isMemoryWrite && visibleApproval.choices.includes('session')" size="small" type="secondary" @click="handleApproval('session')">
                                         {{ t('chat.approvalAllowSession') }}
-                                    </NButton>
-                                    <NButton v-if="!visibleApproval.isMemoryWrite && visibleApproval.choices.includes('always')" size="small" secondary @click="handleApproval('always')">
+                                    </a-button>
+                                    <a-button v-if="!visibleApproval.isMemoryWrite && visibleApproval.choices.includes('always')" size="small" type="secondary" @click="handleApproval('always')">
                                         {{ t('chat.approvalAlways') }}
-                                    </NButton>
-                                    <NButton v-if="visibleApproval.isMemoryWrite || visibleApproval.choices.includes('deny')" size="small" type="error" secondary @click="handleApproval('deny')">
+                                    </a-button>
+                                    <a-button v-if="visibleApproval.isMemoryWrite || visibleApproval.choices.includes('deny')" size="small" type="secondary" status="danger" @click="handleApproval('deny')">
                                         {{ t('chat.approvalDeny') }}
-                                    </NButton>
+                                    </a-button>
                                 </div>
                             </div>
                         </Transition>
@@ -723,34 +737,34 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                 <div class="modal">
                     <h3>{{ t('groupChat.addAgent') }}</h3>
                     <div class="form-group">
-                        <NSelect
-                            v-model:value="selectedProfile"
+                        <a-select
+                            :model-value="selectedProfile ?? undefined"
                             :options="profileOptions"
                             :placeholder="t('groupChat.selectProfile')"
-                            filterable
+                            allow-search
+                            @update:model-value="(v: any) => { selectedProfile = (v as string) ?? null }"
                         />
                     </div>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.agentName') }}</label>
-                        <NInput
-                            v-model:value="agentName"
+                        <a-input
+                            v-model="agentName"
                             :placeholder="t('groupChat.agentNamePlaceholder')"
                         />
                     </div>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.agentDesc') }}</label>
-                        <NInput
-                            v-model:value="agentDescription"
-                            type="textarea"
+                        <a-textarea
+                            v-model="agentDescription"
                             :rows="2"
                             :placeholder="t('groupChat.agentDescPlaceholder')"
                         />
                     </div>
                     <div class="modal-actions">
-                        <NSpace justify="end">
-                            <NButton @click="showAddAgentModal = false">{{ t('common.cancel') }}</NButton>
-                            <NButton type="primary" :disabled="!selectedProfile" @click="confirmAddAgent">{{ t('common.add') }}</NButton>
-                        </NSpace>
+                        <a-space justify="end">
+                            <a-button @click="showAddAgentModal = false">{{ t('common.cancel') }}</a-button>
+                            <a-button type="primary" :disabled="!selectedProfile" @click="confirmAddAgent">{{ t('common.add') }}</a-button>
+                        </a-space>
                     </div>
                 </div>
             </div>
@@ -759,8 +773,8 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                     <h3>{{ t('groupChat.cloneRoom') }}</h3>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.roomName') }}</label>
-                        <NInput
-                            v-model:value="cloneRoomName"
+                        <a-input
+                            v-model="cloneRoomName"
                             :placeholder="t('groupChat.roomNamePlaceholder')"
                             @keyup.enter="confirmCloneRoom"
                         />
@@ -768,75 +782,74 @@ async function handleApproval(choice: 'once' | 'session' | 'always' | 'deny') {
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.inviteCode') }}</label>
                         <div class="code-row">
-                            <NInput
-                                v-model:value="cloneInviteCode"
+                            <a-input
+                                v-model="cloneInviteCode"
                                 :placeholder="t('groupChat.autoGenerate')"
                                 @keyup.enter="confirmCloneRoom"
                             />
-                            <NButton size="small" @click="cloneInviteCode = generateCode()">
+                            <a-button size="small" @click="cloneInviteCode = generateCode()">
                                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                     <polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
                                 </svg>
-                            </NButton>
+                            </a-button>
                         </div>
                     </div>
                     <div class="modal-actions">
-                        <NSpace justify="end">
-                            <NButton @click="showCloneModal = false">{{ t('common.cancel') }}</NButton>
-                            <NButton type="primary" :disabled="!cloneRoomName.trim()" @click="confirmCloneRoom">{{ t('groupChat.cloneRoom') }}</NButton>
-                        </NSpace>
+                        <a-space justify="end">
+                            <a-button @click="showCloneModal = false">{{ t('common.cancel') }}</a-button>
+                            <a-button type="primary" :disabled="!cloneRoomName.trim()" @click="confirmCloneRoom">{{ t('groupChat.cloneRoom') }}</a-button>
+                        </a-space>
                     </div>
                 </div>
             </div>
-            <NModal
-                v-model:show="showWorkspaceModal"
-                preset="dialog"
+            <a-modal
+                v-model:visible="showWorkspaceModal"
                 :title="t('chat.setWorkspaceTitle')"
                 class="workspace-modal"
                 style="width: 520px; max-width: 92vw"
             >
                 <FolderPicker v-model="workspaceValue" />
-                <template #action>
-                    <NSpace justify="end">
-                        <NButton @click="showWorkspaceModal = false">{{ t('common.cancel') }}</NButton>
-                        <NButton @click="handleClearWorkspace">{{ t('workflow.workspace.clear') }}</NButton>
-                        <NButton type="primary" @click="handleSaveWorkspace">{{ t('common.save') }}</NButton>
-                    </NSpace>
+                <template #footer>
+                    <a-space justify="end">
+                        <a-button @click="showWorkspaceModal = false">{{ t('common.cancel') }}</a-button>
+                        <a-button @click="handleClearWorkspace">{{ t('workflow.workspace.clear') }}</a-button>
+                        <a-button type="primary" @click="handleSaveWorkspace">{{ t('common.save') }}</a-button>
+                    </a-space>
                 </template>
-            </NModal>
+            </a-modal>
             <div v-if="showCompressionModal" class="modal-backdrop" @click.self="showCompressionModal = false">
                 <div class="modal">
                     <h3>{{ t('groupChat.compressionConfig') }}</h3>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.triggerTokens') }}</label>
-                        <NInputNumber v-model:value="compressionConfig.triggerTokens" :min="1000" :step="10000" style="width: 100%" />
+                        <a-input-number v-model="compressionConfig.triggerTokens" :min="1000" :step="10000" style="width: 100%" />
                         <p class="form-hint">{{ t('groupChat.triggerTokensDesc') }}</p>
                     </div>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.maxHistoryTokens') }}</label>
-                        <NInputNumber v-model:value="compressionConfig.maxHistoryTokens" :min="1000" :step="1000" style="width: 100%" />
+                        <a-input-number v-model="compressionConfig.maxHistoryTokens" :min="1000" :step="1000" style="width: 100%" />
                         <p class="form-hint">{{ t('groupChat.maxHistoryTokensDesc') }}</p>
                     </div>
                     <div class="form-group">
                         <label class="form-label">{{ t('groupChat.tailMessageCount') }}</label>
-                        <NInputNumber v-model:value="compressionConfig.tailMessageCount" :min="1" :step="5" style="width: 100%" />
+                        <a-input-number v-model="compressionConfig.tailMessageCount" :min="1" :step="5" style="width: 100%" />
                         <p class="form-hint">{{ t('groupChat.tailMessageCountDesc') }}</p>
                     </div>
                     <div style="margin-top: 8px">
-                        <NButton
-                            block
+                        <a-button
+                            long
                             :disabled="isCompressing || store.contextStatuses.size > 0"
                             :loading="isCompressing"
                             @click="handleForceCompress"
                         >
                             {{ isCompressing ? t('groupChat.compressingInProgress') : t('groupChat.compressNow') }}
-                        </NButton>
+                        </a-button>
                     </div>
                     <div class="modal-actions">
-                        <NSpace justify="end">
-                            <NButton @click="showCompressionModal = false">{{ t('common.cancel') }}</NButton>
-                            <NButton type="primary" @click="handleSaveCompressionConfig">{{ t('common.save') }}</NButton>
-                        </NSpace>
+                        <a-space justify="end">
+                            <a-button @click="showCompressionModal = false">{{ t('common.cancel') }}</a-button>
+                            <a-button type="primary" @click="handleSaveCompressionConfig">{{ t('common.save') }}</a-button>
+                        </a-space>
                     </div>
                 </div>
             </div>
@@ -1053,7 +1066,7 @@ export default defineComponent({ components: { CreateRoomForm } })
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
-    .approval-float-actions :deep(.n-button) {
+    .approval-float-actions :deep(.arco-btn) {
         width: 100%;
     }
 }
@@ -1280,6 +1293,15 @@ export default defineComponent({ components: { CreateRoomForm } })
     color: $text-muted;
 }
 
+.room-context-menu-anchor {
+    display: none;
+}
+
+.room-context-menu {
+    min-width: 160px;
+    padding: 4px 0;
+}
+
 .page-sidebar-bottom {
     flex-shrink: 0;
     padding: 10px 12px;
diff --git a/packages/client/src/components/hermes/jobs/JobCard.vue b/packages/client/src/components/hermes/jobs/JobCard.vue
index 783f8ef..d9658f8 100644
--- a/packages/client/src/components/hermes/jobs/JobCard.vue
+++ b/packages/client/src/components/hermes/jobs/JobCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NButton, NTooltip } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import type { Job } from '@/api/hermes/jobs'
 import { scheduleToDisplayText } from '@/api/hermes/jobs'
@@ -136,26 +135,17 @@ function handleCardClick(e: MouseEvent) {
     </div>
 
     <div class="card-actions">
-      <NTooltip v-if="job.state !== 'paused' && job.enabled">
-        <template #trigger>
-          <NButton size="tiny" quaternary @click.stop="handlePause">{{ t('jobs.action.pause') }}</NButton>
-        </template>
-        {{ t('jobs.action.pauseJob') }}
-      </NTooltip>
-      <NTooltip v-else-if="job.state === 'paused'">
-        <template #trigger>
-          <NButton size="tiny" quaternary @click.stop="handleResume">{{ t('jobs.action.resume') }}</NButton>
-        </template>
-        {{ t('jobs.action.resumeJob') }}
-      </NTooltip>
-      <NTooltip>
-        <template #trigger>
-          <NButton size="tiny" quaternary @click.stop="handleRun">{{ t('jobs.action.runNow') }}</NButton>
-        </template>
-        {{ t('jobs.action.triggerImmediately') }}
-      </NTooltip>
-      <NButton size="tiny" quaternary @click.stop="emit('edit', jobId)">{{ t('common.edit') }}</NButton>
-      <NButton size="tiny" quaternary type="error" @click.stop="handleDelete">{{ t('common.delete') }}</NButton>
+      <a-tooltip v-if="job.state !== 'paused' && job.enabled" :content="t('jobs.action.pauseJob')">
+        <a-button size="mini" type="text" @click.stop="handlePause">{{ t('jobs.action.pause') }}</a-button>
+      </a-tooltip>
+      <a-tooltip v-else-if="job.state === 'paused'" :content="t('jobs.action.resumeJob')">
+        <a-button size="mini" type="text" @click.stop="handleResume">{{ t('jobs.action.resume') }}</a-button>
+      </a-tooltip>
+      <a-tooltip :content="t('jobs.action.triggerImmediately')">
+        <a-button size="mini" type="text" @click.stop="handleRun">{{ t('jobs.action.runNow') }}</a-button>
+      </a-tooltip>
+      <a-button size="mini" type="text" @click.stop="emit('edit', jobId)">{{ t('common.edit') }}</a-button>
+      <a-button size="mini" type="text" status="danger" @click.stop="handleDelete">{{ t('common.delete') }}</a-button>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/components/hermes/jobs/JobFormModal.vue b/packages/client/src/components/hermes/jobs/JobFormModal.vue
index 1796a8a..62abcf9 100644
--- a/packages/client/src/components/hermes/jobs/JobFormModal.vue
+++ b/packages/client/src/components/hermes/jobs/JobFormModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NButton, NSelect, NInputNumber } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useJobsStore } from '@/stores/hermes/jobs'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -48,7 +47,7 @@ const formData = ref({
   model: '',
 })
 
-const presetValue = ref<string | null>(null)
+const presetValue = ref<string | undefined>(undefined)
 
 const isEdit = computed(() => !!props.jobId)
 
@@ -267,110 +266,109 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="isEdit ? t('jobs.editJob') : t('jobs.createJob')"
     :style="{ width: 'min(520px, calc(100vw - 32px))' }"
     :mask-closable="!loading"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
-    <NForm label-placement="top">
-      <NFormItem :label="t('jobs.name')" required>
-        <NInput
-          v-model:value="formData.name"
+    <a-form :model="formData" layout="vertical">
+      <a-form-item :label="t('jobs.name')" required>
+        <a-input
+          v-model="formData.name"
           :placeholder="t('jobs.namePlaceholder')"
-          maxlength="200"
-          show-count
+          :max-length="200"
+          show-word-limit
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.schedule')" required>
-        <NInput
-          v-model:value="formData.schedule"
+      <a-form-item :label="t('jobs.schedule')" required>
+        <a-input
+          v-model="formData.schedule"
           :placeholder="t('jobs.schedulePlaceholder')"
         />
-      </NFormItem>
+      </a-form-item>
 
 
-      <NFormItem :label="t('jobs.provider')">
-        <NSelect
-          :value="formData.provider"
+      <a-form-item :label="t('jobs.provider')">
+        <a-select
+          :model-value="formData.provider"
           :options="providerOptions"
-          @update:value="handleProviderChange"
+          @change="value => handleProviderChange(value as string)"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.model')">
-        <NSelect
-          v-model:value="formData.model"
-          filterable
-          clearable
+      <a-form-item :label="t('jobs.model')">
+        <a-select
+          v-model="formData.model"
+          allow-search
+          allow-clear
           :disabled="!formData.provider"
           :options="modelOptions"
           :placeholder="t('jobs.modelPlaceholder')"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.quickPresets')">
-        <NSelect
-          v-model:value="presetValue"
+      <a-form-item :label="t('jobs.quickPresets')">
+        <a-select
+          v-model="presetValue"
           :options="schedulePresets"
           :placeholder="t('jobs.selectPreset')"
-          @update:value="v => formData.schedule = v"
+          @change="v => formData.schedule = v as string"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.prompt')" required>
-        <NInput
-          v-model:value="formData.prompt"
-          type="textarea"
+      <a-form-item :label="t('jobs.prompt')" required>
+        <a-textarea
+          v-model="formData.prompt"
           :placeholder="t('jobs.promptPlaceholder')"
-          :rows="4"
-          maxlength="5000"
-          show-count
+          :textarea-attrs="{ rows: 4 }"
+          :max-length="5000"
+          show-word-limit
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.skills')">
-        <NSelect
-          v-model:value="formData.skills"
+      <a-form-item :label="t('jobs.skills')">
+        <a-select
+          v-model="formData.skills"
           multiple
-          filterable
-          clearable
+          allow-search
+          allow-clear
           :loading="skillsLoading"
           :options="skillOptions"
           :placeholder="t('jobs.skillsPlaceholder')"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.deliverTarget')">
-        <NSelect
-          v-model:value="formData.deliver"
+      <a-form-item :label="t('jobs.deliverTarget')">
+        <a-select
+          v-model="formData.deliver"
           :options="targetOptions"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('jobs.repeatCount')">
-        <NInputNumber
-          v-model:value="formData.repeat_times"
+      <a-form-item :label="t('jobs.repeatCount')">
+        <a-input-number
+          :model-value="formData.repeat_times ?? undefined"
           :min="1"
           :placeholder="t('jobs.repeatPlaceholder')"
-          clearable
+          allow-clear
           style="width: 100%"
+          @change="value => formData.repeat_times = value ?? null"
         />
-      </NFormItem>
-    </NForm>
+      </a-form-item>
+    </a-form>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" @click="handleSave">
+        <a-button @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleSave">
           {{ isEdit ? t('common.update') : t('common.create') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/jobs/JobRunHistory.vue b/packages/client/src/components/hermes/jobs/JobRunHistory.vue
index 90be26d..ae51ce2 100644
--- a/packages/client/src/components/hermes/jobs/JobRunHistory.vue
+++ b/packages/client/src/components/hermes/jobs/JobRunHistory.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import { NSpin, NEmpty, NCollapse, NCollapseItem } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { listCronRuns, readCronRun } from '@/api/hermes/cron-history'
 import type { RunEntry, RunDetail } from '@/api/hermes/cron-history'
@@ -81,29 +80,29 @@ watch(() => [props.selectedJobId, props.profileKey], () => {
     </div>
 
     <div class="history-body">
-      <NSpin :show="loading">
-        <NEmpty v-if="!loading && filteredRuns.length === 0" :description="t('jobs.runHistory.noRuns')" />
+      <a-spin :loading="loading">
+        <a-empty v-if="!loading && filteredRuns.length === 0" :description="t('jobs.runHistory.noRuns')" />
 
-        <NCollapse
+        <a-collapse
           v-else
           accordion
-          @update:expanded-names="handleExpand"
+          :bordered="false"
+          @change="handleExpand"
         >
-          <NCollapseItem
+          <a-collapse-item
             v-for="run in filteredRuns"
             :key="`${run.jobId}/${run.fileName}`"
-            :title="`${getJobName(run.jobId)} — ${run.runTime}`"
-            :name="`${run.jobId}/${run.fileName}`"
+            :header="`${getJobName(run.jobId)} — ${run.runTime}`"
           >
-            <template #header-extra>
+            <template #extra>
               <span class="run-meta">{{ formatSize(run.size) }}</span>
             </template>
 
-            <NSpin v-if="loadingContent[`${run.jobId}/${run.fileName}`]" size="small" />
+            <a-spin v-if="loadingContent[`${run.jobId}/${run.fileName}`]" :size="12" />
             <MarkdownRenderer v-else-if="expandedContent[`${run.jobId}/${run.fileName}`]" :content="expandedContent[`${run.jobId}/${run.fileName}`]" />
-          </NCollapseItem>
-        </NCollapse>
-      </NSpin>
+          </a-collapse-item>
+        </a-collapse>
+      </a-spin>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/components/hermes/kanban/KanbanColumn.vue b/packages/client/src/components/hermes/kanban/KanbanColumn.vue
index bd0b727..7680e93 100644
--- a/packages/client/src/components/hermes/kanban/KanbanColumn.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanColumn.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NCollapse, NCollapseItem } from 'naive-ui'
 import KanbanTaskCard from './KanbanTaskCard.vue'
 import type { KanbanTask, KanbanTaskStatus } from '@/api/hermes/kanban'
 
@@ -35,8 +34,8 @@ const headerTitle = computed(() => `${statusIcon.value}  ${statusLabel.value}  (
 
 <template>
   <div class="kanban-column">
-    <NCollapse :default-expanded-names="[status]" display-directive="show">
-      <NCollapseItem :title="headerTitle" :name="status">
+    <a-collapse :default-active-key="[status]" :bordered="false">
+      <a-collapse-item :key="status" :header="headerTitle">
         <KanbanTaskCard
           v-for="task in tasks"
           :key="task.id"
@@ -46,8 +45,8 @@ const headerTitle = computed(() => `${statusIcon.value}  ${statusLabel.value}  (
         <div v-if="tasks.length === 0" class="column-empty">
           {{ t('kanban.noTasks') }}
         </div>
-      </NCollapseItem>
-    </NCollapse>
+      </a-collapse-item>
+    </a-collapse>
   </div>
 </template>
 
@@ -61,20 +60,17 @@ const headerTitle = computed(() => `${statusIcon.value}  ${statusLabel.value}  (
   border-radius: $radius-md;
   border: 1px solid $border-light;
 
-  :deep(.n-collapse) {
-    --n-title-font-size: 13px;
-    --n-title-font-weight: 600;
-  }
-
-  :deep(.n-collapse-item__header-main) {
+  :deep(.arco-collapse-item-header-title) {
+    font-size: 13px;
+    font-weight: 600;
     color: $text-primary;
   }
 
-  :deep(.n-collapse-item__content-wrapper) {
+  :deep(.arco-collapse-item-content-box) {
     padding: 0 10px 10px;
   }
 
-  :deep(.n-collapse-item) {
+  :deep(.arco-collapse-item) {
     display: flex;
     flex-direction: column;
   }
diff --git a/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue b/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue
index 564566c..48fc2d2 100644
--- a/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanCreateForm.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NSelect, NButton, NCheckbox } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useKanbanStore } from '@/stores/hermes/kanban'
@@ -35,6 +34,23 @@ const saving = ref(false)
 const skillsLoading = ref(false)
 const skillOptions = ref<Array<{ label: string; value: string }>>([])
 
+// a-form 的 model 是必填 prop；这里的字段本来就各自是独立的 ref，
+// 收集成一个对象只是为了满足 Arco 的类型要求，不改变任何提交逻辑。
+const formModel = computed(() => ({
+  title: title.value,
+  body: body.value,
+  assignee: assignee.value,
+  priority: priority.value,
+  tenant: tenant.value,
+  workspaceKind: workspaceKind.value,
+  workspacePath: workspacePath.value,
+  branch: branch.value,
+  skills: skills.value,
+  maxRuntime: maxRuntime.value,
+  maxRetries: maxRetries.value,
+  goalMaxTurns: goalMaxTurns.value,
+}))
+
 const priorityOptions = computed(() => [
   { label: t('kanban.card.priority.low'), value: 1 },
   { label: t('kanban.card.priority.medium'), value: 2 },
@@ -128,78 +144,101 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <NModal :show="true" preset="dialog" :title="t('kanban.createTask')" style="width: 480px;" @close="emit('close')">
-    <NForm label-placement="top">
-      <NFormItem :label="t('kanban.form.title')">
-        <NInput v-model:value="title" :placeholder="t('kanban.form.titlePlaceholder')" />
-      </NFormItem>
-      <NFormItem :label="t('kanban.form.body')">
-        <NInput v-model:value="body" type="textarea" :rows="3" :placeholder="t('kanban.form.bodyPlaceholder')" />
-      </NFormItem>
-      <NFormItem :label="t('kanban.form.assignee')">
-        <NSelect v-model:value="assignee" :options="assigneeOptions" :placeholder="t('kanban.form.selectAssignee')" clearable />
-      </NFormItem>
-      <NFormItem :label="t('kanban.form.priority')">
-        <NSelect v-model:value="priority" :options="priorityOptions" :placeholder="t('kanban.form.selectPriority')" clearable />
-      </NFormItem>
-      <NFormItem :label="t('kanban.form.tenant')">
-        <NInput v-model:value="tenant" :placeholder="t('kanban.form.tenantPlaceholder')" />
-      </NFormItem>
-      <NFormItem :label="t('kanban.form.workspace')">
-        <NSelect v-model:value="workspaceKind" :options="workspaceOptions" />
-      </NFormItem>
-      <NFormItem v-if="workspaceKind !== 'scratch'" :label="t('kanban.form.workspacePath')">
-        <NInput v-model:value="workspacePath" :placeholder="t('kanban.form.workspacePathPlaceholder')" />
-      </NFormItem>
-      <NFormItem v-if="workspaceKind === 'worktree'" :label="t('kanban.form.branch')">
-        <NInput v-model:value="branch" :placeholder="t('kanban.form.branchPlaceholder')" />
-      </NFormItem>
-      <NFormItem :label="t('kanban.form.skills')">
-        <NSelect
-          v-model:value="skills"
+  <a-modal
+    :visible="true"
+    :title="t('kanban.createTask')"
+    :style="{ width: '480px' }"
+    :mask-closable="false"
+    :esc-to-close="false"
+    @cancel="emit('close')"
+  >
+    <a-form :model="formModel" layout="vertical">
+      <a-form-item :label="t('kanban.form.title')">
+        <a-input v-model="title" :placeholder="t('kanban.form.titlePlaceholder')" />
+      </a-form-item>
+      <a-form-item :label="t('kanban.form.body')">
+        <a-textarea v-model="body" :textarea-attrs="{ rows: 3 }" :placeholder="t('kanban.form.bodyPlaceholder')" />
+      </a-form-item>
+      <a-form-item :label="t('kanban.form.assignee')">
+        <a-select
+          :model-value="assignee ?? undefined"
+          :options="assigneeOptions"
+          :placeholder="t('kanban.form.selectAssignee')"
+          allow-clear
+          @change="value => assignee = (value as string) ?? null"
+        />
+      </a-form-item>
+      <a-form-item :label="t('kanban.form.priority')">
+        <a-select
+          :model-value="priority ?? undefined"
+          :options="priorityOptions"
+          :placeholder="t('kanban.form.selectPriority')"
+          allow-clear
+          @change="value => priority = (value as number) ?? null"
+        />
+      </a-form-item>
+      <a-form-item :label="t('kanban.form.tenant')">
+        <a-input v-model="tenant" :placeholder="t('kanban.form.tenantPlaceholder')" />
+      </a-form-item>
+      <a-form-item :label="t('kanban.form.workspace')">
+        <a-select v-model="workspaceKind" :options="workspaceOptions" />
+      </a-form-item>
+      <a-form-item v-if="workspaceKind !== 'scratch'" :label="t('kanban.form.workspacePath')">
+        <a-input v-model="workspacePath" :placeholder="t('kanban.form.workspacePathPlaceholder')" />
+      </a-form-item>
+      <a-form-item v-if="workspaceKind === 'worktree'" :label="t('kanban.form.branch')">
+        <a-input v-model="branch" :placeholder="t('kanban.form.branchPlaceholder')" />
+      </a-form-item>
+      <a-form-item :label="t('kanban.form.skills')">
+        <a-select
+          v-model="skills"
           multiple
-          filterable
-          clearable
+          allow-search
+          allow-clear
           :loading="skillsLoading"
           :options="skillOptions"
           :placeholder="t('kanban.form.skillsPlaceholder')"
         />
-      </NFormItem>
+      </a-form-item>
       <div class="advanced-row">
-        <NCheckbox v-model:checked="triage">{{ t('kanban.form.triage') }}</NCheckbox>
-        <NCheckbox v-model:checked="goalMode">{{ t('kanban.form.goalMode') }}</NCheckbox>
+        <a-checkbox v-model="triage">{{ t('kanban.form.triage') }}</a-checkbox>
+        <a-checkbox v-model="goalMode">{{ t('kanban.form.goalMode') }}</a-checkbox>
       </div>
       <div class="advanced-grid">
-        <NFormItem :label="t('kanban.form.maxRuntime')">
-          <NInput v-model:value="maxRuntime" :placeholder="t('kanban.form.maxRuntimePlaceholder')" />
-        </NFormItem>
-        <NFormItem :label="t('kanban.form.maxRetries')">
-          <NInputNumber
-            v-model:value="maxRetries"
+        <a-form-item :label="t('kanban.form.maxRuntime')">
+          <a-input v-model="maxRuntime" :placeholder="t('kanban.form.maxRuntimePlaceholder')" />
+        </a-form-item>
+        <a-form-item :label="t('kanban.form.maxRetries')">
+          <a-input-number
+            :model-value="maxRetries ?? undefined"
             :min="1"
             :max="100"
             :precision="0"
             :placeholder="t('kanban.form.maxRetriesPlaceholder')"
-            clearable
+            allow-clear
+            style="width: 100%"
+            @change="value => maxRetries = value ?? null"
           />
-        </NFormItem>
-        <NFormItem v-if="goalMode" :label="t('kanban.form.goalMaxTurns')">
-          <NInputNumber
-            v-model:value="goalMaxTurns"
+        </a-form-item>
+        <a-form-item v-if="goalMode" :label="t('kanban.form.goalMaxTurns')">
+          <a-input-number
+            :model-value="goalMaxTurns ?? undefined"
             :min="1"
             :max="100"
             :precision="0"
             :placeholder="t('kanban.form.goalMaxTurnsPlaceholder')"
-            clearable
+            allow-clear
+            style="width: 100%"
+            @change="value => goalMaxTurns = value ?? null"
           />
-        </NFormItem>
+        </a-form-item>
       </div>
-    </NForm>
-    <template #action>
-      <NButton @click="emit('close')">{{ t('common.cancel') }}</NButton>
-      <NButton type="primary" :loading="saving" @click="handleSubmit">{{ t('common.create') }}</NButton>
+    </a-form>
+    <template #footer>
+      <a-button @click="emit('close')">{{ t('common.cancel') }}</a-button>
+      <a-button type="primary" :loading="saving" @click="handleSubmit">{{ t('common.create') }}</a-button>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue b/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue
index 600857b..08af41f 100644
--- a/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanTaskCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import ProfileAvatar from '@/components/hermes/profiles/ProfileAvatar.vue'
 import type { KanbanTask } from '@/api/hermes/kanban'
@@ -40,21 +39,18 @@ const priorityText = computed(() => {
   <div class="kanban-task-card" :class="`status-${task.status}`" @click="emit('click', task.id)">
     <div class="card-title">{{ task.title }}</div>
     <div class="card-meta">
-      <NTooltip v-if="task.assignee" trigger="hover">
-        <template #trigger>
-          <span class="meta-tag assignee-tag">
-            <ProfileAvatar
-              class="assignee-profile-avatar"
-              :name="task.assignee"
-              :avatar="assigneeAvatar"
-              :size="18"
-              aria-hidden="true"
-            />
-            <span>{{ task.assignee }}</span>
-          </span>
-        </template>
-        {{ t('kanban.card.assigneeTooltip') }}
-      </NTooltip>
+      <a-tooltip v-if="task.assignee" :content="t('kanban.card.assigneeTooltip')">
+        <span class="meta-tag assignee-tag">
+          <ProfileAvatar
+            class="assignee-profile-avatar"
+            :name="task.assignee"
+            :avatar="assigneeAvatar"
+            :size="18"
+            aria-hidden="true"
+          />
+          <span>{{ task.assignee }}</span>
+        </span>
+      </a-tooltip>
       <span v-if="task.priority >= 2" class="meta-tag priority-tag" :class="priorityLabel">{{ priorityText }}</span>
       <span class="meta-time">{{ timeAgo }}</span>
     </div>
diff --git a/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue b/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue
index e330d48..1710a20 100644
--- a/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue
+++ b/packages/client/src/components/hermes/kanban/KanbanTaskDrawer.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { NDrawer, NDrawerContent, NButton, NSelect, NInput, NSpin, NModal } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -367,9 +366,14 @@ function handleNavigateTask(taskId: string) {
 </script>
 
 <template>
-  <NDrawer :show="!!taskId" :width="420" placement="right" @update:show="(v: boolean) => { if (!v) emit('close') }">
-    <NDrawerContent :title="detail?.task.title || ''" closable>
-      <NSpin :show="loading">
+  <a-drawer
+    :visible="!!taskId"
+    :width="420"
+    placement="right"
+    :title="detail?.task.title || ''"
+    @cancel="emit('close')"
+  >
+      <a-spin :loading="loading">
         <template v-if="detail">
           <!-- Metadata -->
           <div class="detail-section">
@@ -436,35 +440,42 @@ function handleNavigateTask(taskId: string) {
             <div class="section-title">{{ t('kanban.action.title') }}</div>
             <div class="action-group">
               <template v-if="!showCompleteInput">
-                <NButton size="small" @click="showCompleteInput = true">
+                <a-button size="small" @click="showCompleteInput = true">
                   {{ t('kanban.action.complete') }}
-                </NButton>
+                </a-button>
               </template>
               <div v-else class="complete-input">
-                <NInput v-model:value="completeSummary" size="small" :placeholder="t('kanban.action.completeSummary')" />
-                <NButton size="small" type="primary" @click="handleComplete">{{ t('common.ok') }}</NButton>
-                <NButton size="small" @click="showCompleteInput = false; completeSummary = ''">{{ t('common.cancel') }}</NButton>
+                <a-input v-model="completeSummary" size="small" :placeholder="t('kanban.action.completeSummary')" />
+                <a-button size="small" type="primary" @click="handleComplete">{{ t('common.ok') }}</a-button>
+                <a-button size="small" @click="showCompleteInput = false; completeSummary = ''">{{ t('common.cancel') }}</a-button>
               </div>
               <template v-if="detail.task.status === 'blocked'">
-                <NButton size="small" @click="handleUnblock">{{ t('kanban.action.unblock') }}</NButton>
+                <a-button size="small" @click="handleUnblock">{{ t('kanban.action.unblock') }}</a-button>
               </template>
               <template v-else>
-                <NButton v-if="!showBlockInput" size="small" @click="showBlockInput = true">{{ t('kanban.action.block') }}</NButton>
+                <a-button v-if="!showBlockInput" size="small" @click="showBlockInput = true">{{ t('kanban.action.block') }}</a-button>
                 <div v-else class="block-input">
-                  <NInput v-model:value="blockReason" size="small" :placeholder="t('kanban.action.blockReason')" />
-                  <NButton size="small" type="primary" @click="handleBlock">{{ t('common.ok') }}</NButton>
+                  <a-input v-model="blockReason" size="small" :placeholder="t('kanban.action.blockReason')" />
+                  <a-button size="small" type="primary" @click="handleBlock">{{ t('common.ok') }}</a-button>
                 </div>
               </template>
             </div>
             <div v-if="detail.task.status !== 'running'" class="assign-group">
-              <NSelect v-model:value="assignProfile" :options="assigneeOptions" size="small" :placeholder="t('kanban.action.assignTo')" style="flex: 1;" />
-              <NButton size="small" :disabled="!assignProfile" @click="handleAssign">{{ t('kanban.action.assign') }}</NButton>
+              <a-select
+                :model-value="assignProfile ?? undefined"
+                :options="assigneeOptions"
+                size="small"
+                :placeholder="t('kanban.action.assignTo')"
+                style="flex: 1;"
+                @change="value => assignProfile = (value as string) ?? null"
+              />
+              <a-button size="small" :disabled="!assignProfile" @click="handleAssign">{{ t('kanban.action.assign') }}</a-button>
             </div>
             <div class="recovery-group">
-              <NInput v-model:value="recoveryReason" size="small" :placeholder="t('kanban.action.recoveryReason')" />
-              <NButton size="small" secondary @click="handleReclaim">{{ t('kanban.action.reclaim') }}</NButton>
-              <NButton size="small" secondary :disabled="!assignProfile" @click="handleReassign">{{ t('kanban.action.reassign') }}</NButton>
-              <NButton v-if="detail.task.status === 'triage'" size="small" secondary @click="handleSpecify">{{ t('kanban.action.specify') }}</NButton>
+              <a-input v-model="recoveryReason" size="small" :placeholder="t('kanban.action.recoveryReason')" />
+              <a-button size="small" type="secondary" @click="handleReclaim">{{ t('kanban.action.reclaim') }}</a-button>
+              <a-button size="small" type="secondary" :disabled="!assignProfile" @click="handleReassign">{{ t('kanban.action.reassign') }}</a-button>
+              <a-button v-if="detail.task.status === 'triage'" size="small" type="secondary" @click="handleSpecify">{{ t('kanban.action.specify') }}</a-button>
             </div>
           </div>
 
@@ -472,7 +483,7 @@ function handleNavigateTask(taskId: string) {
           <div v-if="detail.runs.length > 0" class="detail-section">
             <div class="section-title" style="cursor: pointer;" @click="searchTaskSessions">
               {{ t('kanban.detail.sessions') }}
-              <NSpin v-if="sessionLoading" :size="12" style="margin-left: 6px;" />
+              <a-spin v-if="sessionLoading" :size="12" style="margin-left: 6px;" />
             </div>
             <div v-if="showSessions && sessionResults.length > 0" class="session-list">
               <div v-for="session in sessionResults" :key="session.id" class="session-item" @click="router.push({ name: 'hermes.chat', query: { session: session.id } })">
@@ -493,8 +504,8 @@ function handleNavigateTask(taskId: string) {
               <span>{{ t('kanban.detail.runs') }}</span>
               <span class="run-history-range">{{ runHistoryRange }}</span>
               <div v-if="runHistoryPageCount > 1" class="run-history-controls">
-                <NButton size="tiny" secondary :disabled="runHistoryPage <= 1" @click="runHistoryPage -= 1">‹</NButton>
-                <NButton size="tiny" secondary :disabled="runHistoryPage >= runHistoryPageCount" @click="runHistoryPage += 1">›</NButton>
+                <a-button size="mini" type="secondary" :disabled="runHistoryPage <= 1" @click="runHistoryPage -= 1">‹</a-button>
+                <a-button size="mini" type="secondary" :disabled="runHistoryPage >= runHistoryPageCount" @click="runHistoryPage += 1">›</a-button>
               </div>
             </div>
             <div v-for="run in visibleRuns" :key="run.id" class="run-item">
@@ -522,16 +533,16 @@ function handleNavigateTask(taskId: string) {
           <div v-if="canMutateTask" class="detail-section">
             <div class="section-title">{{ t('kanban.detail.addComment') }}</div>
             <div class="comment-input">
-              <NInput v-model:value="commentBody" type="textarea" :rows="3" :placeholder="t('kanban.detail.commentPlaceholder')" />
-              <NButton size="small" type="primary" :disabled="!commentBody.trim()" @click="handleAddComment">{{ t('common.add') }}</NButton>
+              <a-textarea v-model="commentBody" :textarea-attrs="{ rows: 3 }" :placeholder="t('kanban.detail.commentPlaceholder')" />
+              <a-button size="small" type="primary" :disabled="!commentBody.trim()" @click="handleAddComment">{{ t('common.add') }}</a-button>
             </div>
           </div>
 
           <div class="detail-section">
             <div class="section-title">{{ t('kanban.detail.operations') }}</div>
             <div class="action-group">
-              <NButton size="small" secondary :loading="taskLogLoading" @click="handleLoadLog">{{ t('kanban.action.loadLog') }}</NButton>
-              <NButton size="small" secondary :loading="diagnosticsLoading" @click="handleLoadDiagnostics">{{ t('kanban.action.loadDiagnostics') }}</NButton>
+              <a-button size="small" type="secondary" :loading="taskLogLoading" @click="handleLoadLog">{{ t('kanban.action.loadLog') }}</a-button>
+              <a-button size="small" type="secondary" :loading="diagnosticsLoading" @click="handleLoadDiagnostics">{{ t('kanban.action.loadDiagnostics') }}</a-button>
             </div>
             <pre v-if="taskLog !== null" class="log-output">{{ taskLog }}</pre>
             <pre v-if="diagnostics !== null" class="log-output">{{ JSON.stringify(diagnostics, null, 2) }}</pre>
@@ -546,16 +557,22 @@ function handleNavigateTask(taskId: string) {
             </div>
           </div>
         </template>
-      </NSpin>
-    </NDrawerContent>
-  </NDrawer>
+      </a-spin>
+  </a-drawer>
 
   <!-- Session messages modal (click result summary) -->
-  <NModal v-if="historySession" :show="showMessagesModal" preset="card" :title="detail?.task.title || ''" :style="{ width: '900px', maxWidth: 'calc(100vw - 48px)' }" @close="showMessagesModal = false">
+  <a-modal
+    v-if="historySession"
+    v-model:visible="showMessagesModal"
+    :title="detail?.task.title || ''"
+    :style="{ width: '900px', maxWidth: 'calc(100vw - 48px)' }"
+    :footer="false"
+    @close="showMessagesModal = false"
+  >
     <div class="messages-modal-body">
       <HistoryMessageList :session="historySession" />
     </div>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -943,7 +960,7 @@ function handleNavigateTask(taskId: string) {
   align-items: flex-start;
 }
 
-.comment-input :deep(.n-input) {
+.comment-input :deep(.arco-textarea-wrapper) {
   flex: 1;
   min-width: 220px;
 }
diff --git a/packages/client/src/components/hermes/mcp/McpServerCard.vue b/packages/client/src/components/hermes/mcp/McpServerCard.vue
index 49a9455..013bc5c 100644
--- a/packages/client/src/components/hermes/mcp/McpServerCard.vue
+++ b/packages/client/src/components/hermes/mcp/McpServerCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NButton, NSwitch, NPopconfirm } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import type { McpServerInfo } from '@/api/hermes/mcp'
 
@@ -80,21 +79,21 @@ const MAX_VISIBLE_TOOLS = 20
     <!-- 底部：按钮 + 开关 -->
     <div class="card-footer">
       <div class="card-actions">
-        <NButton size="tiny" quaternary @click="emit('edit', server)">{{ t('mcp.edit') }}</NButton>
-        <NButton size="tiny" quaternary :disabled="!server.connected" @click="emit('manageTools', server)">{{ t('mcp.manageTools') }}</NButton>
-        <NButton size="tiny" quaternary @click="emit('test', server)">{{ t('mcp.test') }}</NButton>
-        <NButton size="tiny" quaternary @click="emit('reload', server.name)">{{ t('mcp.reload') }}</NButton>
-        <NPopconfirm @positive-click="emit('remove', server)">
-          <template #trigger>
-            <NButton size="tiny" quaternary type="error">{{ t('mcp.remove') }}</NButton>
-          </template>
-          {{ t('mcp.confirmRemove', { name: server.name }) }}
-        </NPopconfirm>
+        <a-button size="mini" type="text" @click="emit('edit', server)">{{ t('mcp.edit') }}</a-button>
+        <a-button size="mini" type="text" :disabled="!server.connected" @click="emit('manageTools', server)">{{ t('mcp.manageTools') }}</a-button>
+        <a-button size="mini" type="text" @click="emit('test', server)">{{ t('mcp.test') }}</a-button>
+        <a-button size="mini" type="text" @click="emit('reload', server.name)">{{ t('mcp.reload') }}</a-button>
+        <a-popconfirm
+          :content="t('mcp.confirmRemove', { name: server.name })"
+          @ok="emit('remove', server)"
+        >
+          <a-button size="mini" type="text" status="danger">{{ t('mcp.remove') }}</a-button>
+        </a-popconfirm>
       </div>
-      <NSwitch
-        :value="server.raw_config.enabled !== false"
+      <a-switch
+        :model-value="server.raw_config.enabled !== false"
         size="small"
-        @update:value="() => emit('toggleEnabled', server)"
+        @update:model-value="() => emit('toggleEnabled', server)"
       />
     </div>
   </div>
diff --git a/packages/client/src/components/hermes/models/AnthropicLoginModal.vue b/packages/client/src/components/hermes/models/AnthropicLoginModal.vue
index 6861120..94935b1 100644
--- a/packages/client/src/components/hermes/models/AnthropicLoginModal.vue
+++ b/packages/client/src/components/hermes/models/AnthropicLoginModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { NModal, NButton, NInput, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { startAnthropicLogin, submitAnthropicLogin } from '@/api/hermes/anthropic-auth'
@@ -86,36 +85,34 @@ startLogin()
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.anthropicLoginTitle')"
-    :style="{ width: 'min(460px, calc(100vw - 32px))' }"
+    width="min(460px, calc(100vw - 32px))"
     :mask-closable="status !== 'submitting'"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="oauth-login">
       <div v-if="status === 'idle' || status === 'loading'" class="oauth-login__state">
-        <NSpin size="small" />
+        <a-spin />
       </div>
 
       <div v-else-if="status === 'waiting' || status === 'submitting'" class="oauth-login__state">
         <p class="oauth-login__hint">{{ t('models.anthropicWaiting') }}</p>
-        <NButton type="primary" block @click="openLink">
+        <a-button type="primary" long @click="openLink">
           {{ t('models.anthropicOpenLink') }}
-        </NButton>
-        <NButton block @click="copyLink">
+        </a-button>
+        <a-button long @click="copyLink">
           {{ t('models.anthropicCopyLink') }}
-        </NButton>
-        <NInput
-          v-model:value="code"
-          type="textarea"
+        </a-button>
+        <a-textarea
+          v-model="code"
           :placeholder="t('models.anthropicCodePlaceholder')"
-          :autosize="{ minRows: 2, maxRows: 4 }"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
         />
-        <NButton type="primary" block :loading="status === 'submitting'" :disabled="!code.trim()" @click="submitCode">
+        <a-button type="primary" long :loading="status === 'submitting'" :disabled="!code.trim()" @click="submitCode">
           {{ t('models.anthropicSubmitCode') }}
-        </NButton>
+        </a-button>
       </div>
 
       <div v-else-if="status === 'approved'" class="oauth-login__state oauth-login__state--success">
@@ -125,21 +122,21 @@ startLogin()
 
       <div v-else-if="status === 'expired'" class="oauth-login__state">
         <p class="oauth-login__error">{{ t('models.anthropicExpired') }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
 
       <div v-else-if="status === 'error'" class="oauth-login__state">
         <p class="oauth-login__error">{{ errorMessage }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
     </div>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="status === 'submitting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+        <a-button :disabled="status === 'submitting'" @click="handleClose">{{ t('common.cancel') }}</a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -162,7 +159,7 @@ startLogin()
 
 .oauth-login__hint {
   font-size: 14px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-2, inherit);
   text-align: center;
   line-height: 1.6;
 }
diff --git a/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue b/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue
index 4ac3df6..63c273a 100644
--- a/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue
+++ b/packages/client/src/components/hermes/models/AuxiliaryModelsPanel.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { NButton, NInput, NInputNumber, NModal, NSelect, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchAuxiliaryModels, saveAuxiliaryModels, type AuxiliaryModelSettings, type AuxiliaryModelTask, type AuxiliaryModelsConfig } from '@/api/hermes/config'
@@ -240,12 +239,12 @@ watch(() => form.value.provider, (provider) => {
         <h3>{{ t('models.auxiliaryTitle') }}</h3>
         <p>{{ t('models.auxiliarySubtitle') }}</p>
       </div>
-      <NButton size="small" quaternary :loading="loading" @click="loadAuxiliaryModels">
+      <a-button size="small" type="text" :loading="loading" @click="loadAuxiliaryModels">
         {{ t('models.auxiliaryRefresh') }}
-      </NButton>
+      </a-button>
     </div>
 
-    <NSpin :show="loading">
+    <a-spin :loading="loading">
       <div class="auxiliary-table">
         <div class="auxiliary-row auxiliary-row-head">
           <span>{{ t('models.auxiliaryTask') }}</span>
@@ -258,69 +257,78 @@ watch(() => form.value.provider, (provider) => {
           <span class="task-config">{{ configuredLabel(auxiliary[task.key]) }}</span>
           <span class="task-timeout">{{ timeoutLabel(task, auxiliary[task.key]) }}</span>
           <span class="task-actions">
-            <NButton size="tiny" quaternary @click="openEditor(task)">
+            <a-button size="mini" type="text" @click="openEditor(task)">
               {{ t('common.edit') }}
-            </NButton>
-            <NButton
-              size="tiny"
-              quaternary
+            </a-button>
+            <a-button
+              size="mini"
+              type="text"
               :disabled="saving"
               @click="clearTask(task)"
             >
               {{ t('models.auxiliaryClear') }}
-            </NButton>
+            </a-button>
           </span>
         </div>
       </div>
-    </NSpin>
+    </a-spin>
 
-    <NModal
-      v-model:show="showEditor"
-      preset="card"
+    <a-modal
+      v-model:visible="showEditor"
       :title="editingTask ? taskLabel(editingTask) : t('models.auxiliaryTitle')"
-      :style="{ width: 'min(620px, calc(100vw - 32px))' }"
+      width="min(620px, calc(100vw - 32px))"
       :mask-closable="!saving"
     >
       <div class="auxiliary-form">
         <label>
           <span>{{ t('models.provider') }}</span>
-          <NSelect
-            v-model:value="form.provider"
+          <a-select
+            v-model="form.provider"
             :options="providerOptions"
             :placeholder="t('models.chooseProvider')"
-            filterable
+            allow-search
           />
         </label>
         <label>
           <span>{{ t('models.defaultModel') }}</span>
-          <NSelect
-            v-model:value="form.model"
+          <a-select
+            v-model="form.model"
             :options="modelOptions"
             :placeholder="t('models.selectModel')"
             :disabled="!form.provider || form.provider === 'auto' || form.provider === 'main'"
-            filterable
+            allow-search
           />
         </label>
         <label>
           <span>{{ t('models.auxiliaryTimeout') }}</span>
-          <NInputNumber v-model:value="form.timeout" :min="1" :precision="0" />
+          <a-input-number
+            :model-value="form.timeout ?? undefined"
+            :min="1"
+            :precision="0"
+            @update:model-value="form.timeout = $event ?? null"
+          />
         </label>
         <label v-if="isEditingVision">
           <span>{{ t('models.auxiliaryDownloadTimeout') }}</span>
-          <NInputNumber v-model:value="form.download_timeout" :min="1" :precision="0" />
+          <a-input-number
+            :model-value="form.download_timeout ?? undefined"
+            :min="1"
+            :precision="0"
+            @update:model-value="form.download_timeout = $event ?? null"
+          />
         </label>
         <label class="extra-body-field">
           <span>{{ t('models.auxiliaryExtraBody') }}</span>
-          <NInput v-model:value="form.extra_body" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" />
+          <a-textarea v-model="form.extra_body" :auto-size="{ minRows: 4, maxRows: 8 }" />
         </label>
       </div>
       <template #footer>
         <div class="auxiliary-modal-actions">
-          <NButton :disabled="saving" @click="showEditor = false">{{ t('common.cancel') }}</NButton>
-          <NButton type="primary" :loading="saving" @click="saveTask">{{ t('common.save') }}</NButton>
+          <a-button :disabled="saving" @click="showEditor = false">{{ t('common.cancel') }}</a-button>
+          <a-button type="primary" :loading="saving" @click="saveTask">{{ t('common.save') }}</a-button>
         </div>
       </template>
-    </NModal>
+    </a-modal>
   </section>
 </template>
 
diff --git a/packages/client/src/components/hermes/models/CodexLoginModal.vue b/packages/client/src/components/hermes/models/CodexLoginModal.vue
index 4b9e91e..8dbb3ed 100644
--- a/packages/client/src/components/hermes/models/CodexLoginModal.vue
+++ b/packages/client/src/components/hermes/models/CodexLoginModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
-import { NModal, NButton } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { startCodexLogin, pollCodexLogin } from '@/api/hermes/codex-auth'
@@ -115,18 +114,17 @@ startLogin()
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.codexLoginTitle')"
-    :style="{ width: 'min(440px, calc(100vw - 32px))' }"
+    width="min(440px, calc(100vw - 32px))"
     :mask-closable="status !== 'waiting'"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="codex-login">
       <!-- Idle / Loading -->
       <div v-if="status === 'idle' || status === 'loading'" class="codex-login__state">
-        <NSpin size="small" />
+        <a-spin />
       </div>
 
       <!-- Waiting for authorization -->
@@ -136,12 +134,12 @@ startLogin()
           <span class="codex-login__code-text">{{ userCode }}</span>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
         </div>
-        <NButton type="primary" block @click="openLink">
+        <a-button type="primary" long @click="openLink">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
           </template>
           {{ t('models.codexOpenLink') }}
-        </NButton>
+        </a-button>
       </div>
 
       <!-- Approved -->
@@ -153,22 +151,22 @@ startLogin()
       <!-- Expired -->
       <div v-else-if="status === 'expired'" class="codex-login__state">
         <p class="codex-login__error">{{ t('models.codexExpired') }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
 
       <!-- Error -->
       <div v-else-if="status === 'error'" class="codex-login__state">
         <p class="codex-login__error">{{ errorMessage }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
     </div>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+        <a-button :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -191,7 +189,7 @@ startLogin()
 
 .codex-login__hint {
   font-size: 14px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-2, inherit);
   text-align: center;
   line-height: 1.6;
 }
@@ -201,14 +199,14 @@ startLogin()
   align-items: center;
   gap: 12px;
   padding: 12px 20px;
-  border: 1px solid var(--n-border-color, #e0e0e6);
+  border: 1px solid var(--color-border-2, #e0e0e6);
   border-radius: 8px;
   cursor: pointer;
   transition: border-color 0.2s;
-  background: var(--n-color, #fafafa);
+  background: var(--color-fill-2, #fafafa);
 
   &:hover {
-    border-color: var(--n-primary-color, #18a058);
+    border-color: var(--arcoblue-6, #165dff);
   }
 }
 
@@ -217,7 +215,7 @@ startLogin()
   font-weight: 700;
   font-family: monospace;
   letter-spacing: 4px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-1, inherit);
 }
 
 .codex-login__state--success {
diff --git a/packages/client/src/components/hermes/models/CombinationModelsPanel.vue b/packages/client/src/components/hermes/models/CombinationModelsPanel.vue
index 96b0c0c..df43c9e 100644
--- a/packages/client/src/components/hermes/models/CombinationModelsPanel.vue
+++ b/packages/client/src/components/hermes/models/CombinationModelsPanel.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { NButton, NInput, NInputNumber, NModal, NSelect, NSpin, NSwitch } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchMoaConfig, saveMoaConfig, type MoaConfig, type MoaModelSlot, type MoaPreset } from '@/api/hermes/config'
@@ -283,16 +282,16 @@ watch(() => profilesStore.activeProfileName, () => {
         <p>{{ t('models.combinationSubtitle') }}</p>
       </div>
       <div class="combination-header-actions">
-        <NButton size="small" quaternary :loading="loading" @click="loadMoaConfig">
+        <a-button size="small" type="text" :loading="loading" @click="loadMoaConfig">
           {{ t('models.auxiliaryRefresh') }}
-        </NButton>
-        <NButton size="small" type="primary" :disabled="!moa" @click="openCreateModal">
+        </a-button>
+        <a-button size="small" type="primary" :disabled="!moa" @click="openCreateModal">
           {{ t('models.combinationAddModel') }}
-        </NButton>
+        </a-button>
       </div>
     </div>
 
-    <NSpin :show="loading">
+    <a-spin :loading="loading">
       <div class="combination-table">
         <div class="combination-row combination-row-head">
           <span>{{ t('models.combinationName') }}</span>
@@ -308,64 +307,63 @@ watch(() => profilesStore.activeProfileName, () => {
           <span class="slot-summary">{{ preset.reference_models.map(slotLabel).join(', ') }}</span>
           <span class="slot-summary">{{ slotLabel(preset.aggregator) }}</span>
           <span class="row-actions">
-            <NButton size="tiny" quaternary @click="openEditModal(name)">{{ t('common.edit') }}</NButton>
-            <NButton size="tiny" quaternary :disabled="moa?.default_preset === name" @click="setDefaultPreset(name)">
+            <a-button size="mini" type="text" @click="openEditModal(name)">{{ t('common.edit') }}</a-button>
+            <a-button size="mini" type="text" :disabled="moa?.default_preset === name" @click="setDefaultPreset(name)">
               {{ t('models.combinationSetDefault') }}
-            </NButton>
-            <NButton size="tiny" quaternary :disabled="presetRows.length <= 1" @click="deletePreset(name)">
+            </a-button>
+            <a-button size="mini" type="text" :disabled="presetRows.length <= 1" @click="deletePreset(name)">
               {{ t('common.delete') }}
-            </NButton>
+            </a-button>
           </span>
         </div>
       </div>
-    </NSpin>
+    </a-spin>
 
-    <NModal
-      v-model:show="showEditor"
-      preset="card"
+    <a-modal
+      v-model:visible="showEditor"
       :title="editingName ? t('models.combinationEditModel') : t('models.combinationAddModel')"
-      :style="{ width: 'min(760px, calc(100vw - 32px))' }"
+      width="min(760px, calc(100vw - 32px))"
       :mask-closable="!saving"
     >
       <div class="combination-form">
         <label>
           <span>{{ t('models.combinationName') }}</span>
-          <NInput v-model:value="formName" :placeholder="t('models.combinationPresetPlaceholder')" />
+          <a-input v-model="formName" :placeholder="t('models.combinationPresetPlaceholder')" />
         </label>
         <label class="switch-row">
           <span>{{ t('models.combinationEnabled') }}</span>
-          <NSwitch v-model:value="formPreset.enabled" />
+          <a-switch v-model="formPreset.enabled" />
         </label>
         <label>
           <span>{{ t('models.combinationReferenceTemperature') }}</span>
-          <NInputNumber v-model:value="formPreset.reference_temperature" :min="0" :max="2" :step="0.1" />
+          <a-input-number v-model="formPreset.reference_temperature" :min="0" :max="2" :step="0.1" />
         </label>
         <label>
           <span>{{ t('models.combinationAggregatorTemperature') }}</span>
-          <NInputNumber v-model:value="formPreset.aggregator_temperature" :min="0" :max="2" :step="0.1" />
+          <a-input-number v-model="formPreset.aggregator_temperature" :min="0" :max="2" :step="0.1" />
         </label>
         <label>
           <span>{{ t('models.combinationMaxTokens') }}</span>
-          <NInputNumber v-model:value="formPreset.max_tokens" :min="1" :precision="0" />
+          <a-input-number v-model="formPreset.max_tokens" :min="1" :precision="0" />
         </label>
 
         <div class="slot-section">
           <div class="slot-section-header">
             <h4>{{ t('models.combinationReferenceModels') }}</h4>
-            <NButton size="tiny" type="primary" secondary @click="addReference">
+            <a-button size="mini" type="primary" @click="addReference">
               {{ t('models.combinationAddReference') }}
-            </NButton>
+            </a-button>
           </div>
           <div class="slot-editor-list">
             <div v-for="(slot, index) in formPreset.reference_models" :key="index" class="slot-editor-row">
               <span class="slot-pair">{{ slotLabel(slot) }}</span>
               <span class="slot-row-actions">
-                <NButton size="small" quaternary @click="openModelPicker('reference', index)">
+                <a-button size="small" type="text" @click="openModelPicker('reference', index)">
                   {{ t('common.edit') }}
-                </NButton>
-                <NButton size="small" quaternary @click="removeReference(index)">
+                </a-button>
+                <a-button size="small" type="text" @click="removeReference(index)">
                   {{ t('common.delete') }}
-                </NButton>
+                </a-button>
               </span>
             </div>
           </div>
@@ -378,32 +376,32 @@ watch(() => profilesStore.activeProfileName, () => {
           <div class="slot-editor-row aggregator-row">
             <span class="slot-pair">{{ slotLabel(formPreset.aggregator) }}</span>
             <span class="slot-row-actions">
-              <NButton size="small" quaternary @click="openModelPicker('aggregator')">
+              <a-button size="small" type="text" @click="openModelPicker('aggregator')">
                 {{ t('common.edit') }}
-              </NButton>
+              </a-button>
             </span>
           </div>
         </div>
       </div>
       <template #footer>
         <div class="modal-actions">
-          <NButton :disabled="saving" @click="showEditor = false">{{ t('common.cancel') }}</NButton>
-          <NButton type="primary" :loading="saving" @click="saveEditor">{{ t('common.save') }}</NButton>
+          <a-button :disabled="saving" @click="showEditor = false">{{ t('common.cancel') }}</a-button>
+          <a-button type="primary" :loading="saving" @click="saveEditor">{{ t('common.save') }}</a-button>
         </div>
       </template>
-    </NModal>
+    </a-modal>
 
-    <NModal
-      v-model:show="showModelPicker"
-      preset="card"
+    <a-modal
+      v-model:visible="showModelPicker"
+      :footer="false"
       :title="t('models.selectModel')"
-      :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+      width="min(480px, calc(100vw - 32px))"
       :mask-closable="true"
     >
-      <NInput
-        v-model:value="pickerSearch"
+      <a-input
+        v-model="pickerSearch"
         :placeholder="t('models.searchPlaceholder')"
-        clearable
+        allow-clear
         size="small"
         class="model-search"
       />
@@ -462,14 +460,14 @@ watch(() => profilesStore.activeProfileName, () => {
         </div>
         <div class="model-custom">
           <div class="model-custom-row">
-            <NSelect
-              v-model:value="customProvider"
+            <a-select
+              v-model="customProvider"
               :options="providerOptions"
               size="small"
               class="model-custom-provider"
             />
-            <NInput
-              v-model:value="customInput"
+            <a-input
+              v-model="customInput"
               :placeholder="t('models.customModelPlaceholder')"
               size="small"
               class="model-custom-input"
@@ -481,7 +479,7 @@ watch(() => profilesStore.activeProfileName, () => {
           </div>
         </div>
       </div>
-    </NModal>
+    </a-modal>
   </section>
 </template>
 
@@ -614,7 +612,7 @@ watch(() => profilesStore.activeProfileName, () => {
   scrollbar-width: thin;
 }
 
-.slot-section :deep(.n-button) {
+.slot-section :deep(.arco-btn) {
   white-space: nowrap;
 }
 
diff --git a/packages/client/src/components/hermes/models/CopilotLoginModal.vue b/packages/client/src/components/hermes/models/CopilotLoginModal.vue
index 007bae2..08e8fa4 100644
--- a/packages/client/src/components/hermes/models/CopilotLoginModal.vue
+++ b/packages/client/src/components/hermes/models/CopilotLoginModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
-import { NModal, NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { startCopilotLogin, pollCopilotLogin } from '@/api/hermes/copilot-auth'
@@ -117,18 +116,17 @@ startLogin()
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.copilotLoginTitle')"
-    :style="{ width: 'min(440px, calc(100vw - 32px))' }"
+    width="min(440px, calc(100vw - 32px))"
     :mask-closable="status !== 'waiting'"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="copilot-login">
       <!-- Idle / Loading -->
       <div v-if="status === 'idle' || status === 'loading'" class="copilot-login__state">
-        <NSpin size="small" />
+        <a-spin />
       </div>
 
       <!-- Waiting for authorization -->
@@ -138,12 +136,12 @@ startLogin()
           <span class="copilot-login__code-text">{{ userCode }}</span>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
         </div>
-        <NButton type="primary" block @click="openLink">
+        <a-button type="primary" long @click="openLink">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
           </template>
           {{ t('models.copilotOpenLink') }}
-        </NButton>
+        </a-button>
       </div>
 
       <!-- Approved -->
@@ -155,22 +153,22 @@ startLogin()
       <!-- Expired -->
       <div v-else-if="status === 'expired'" class="copilot-login__state">
         <p class="copilot-login__error">{{ t('models.copilotExpired') }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
 
       <!-- Error -->
       <div v-else-if="status === 'error'" class="copilot-login__state">
         <p class="copilot-login__error">{{ errorMessage }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
     </div>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+        <a-button :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -193,7 +191,7 @@ startLogin()
 
 .copilot-login__hint {
   font-size: 14px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-2, inherit);
   text-align: center;
   line-height: 1.6;
 }
@@ -203,14 +201,14 @@ startLogin()
   align-items: center;
   gap: 12px;
   padding: 12px 20px;
-  border: 1px solid var(--n-border-color, #e0e0e6);
+  border: 1px solid var(--color-border-2, #e0e0e6);
   border-radius: 8px;
   cursor: pointer;
   transition: border-color 0.2s;
-  background: var(--n-color, #fafafa);
+  background: var(--color-fill-2, #fafafa);
 
   &:hover {
-    border-color: var(--n-primary-color, #18a058);
+    border-color: var(--arcoblue-6, #165dff);
   }
 }
 
@@ -219,7 +217,7 @@ startLogin()
   font-weight: 700;
   font-family: monospace;
   letter-spacing: 4px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-1, inherit);
 }
 
 .copilot-login__state--success {
diff --git a/packages/client/src/components/hermes/models/GeminiLoginModal.vue b/packages/client/src/components/hermes/models/GeminiLoginModal.vue
index 0e319cc..3239e5f 100644
--- a/packages/client/src/components/hermes/models/GeminiLoginModal.vue
+++ b/packages/client/src/components/hermes/models/GeminiLoginModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
-import { NModal, NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { startGeminiLogin, pollGeminiLogin } from '@/api/hermes/gemini-auth'
@@ -93,27 +92,26 @@ startLogin()
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.geminiLoginTitle')"
-    :style="{ width: 'min(440px, calc(100vw - 32px))' }"
+    width="min(440px, calc(100vw - 32px))"
     :mask-closable="status !== 'waiting'"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="oauth-login">
       <div v-if="status === 'idle' || status === 'loading'" class="oauth-login__state">
-        <NSpin size="small" />
+        <a-spin />
       </div>
 
       <div v-else-if="status === 'waiting'" class="oauth-login__state">
         <p class="oauth-login__hint">{{ t('models.geminiWaiting') }}</p>
-        <NButton type="primary" block @click="openLink">
+        <a-button type="primary" long @click="openLink">
           {{ t('models.geminiOpenLink') }}
-        </NButton>
-        <NButton block @click="copyLink">
+        </a-button>
+        <a-button long @click="copyLink">
           {{ t('models.geminiCopyLink') }}
-        </NButton>
+        </a-button>
       </div>
 
       <div v-else-if="status === 'approved'" class="oauth-login__state oauth-login__state--success">
@@ -123,21 +121,21 @@ startLogin()
 
       <div v-else-if="status === 'expired'" class="oauth-login__state">
         <p class="oauth-login__error">{{ t('models.geminiExpired') }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
 
       <div v-else-if="status === 'error'" class="oauth-login__state">
         <p class="oauth-login__error">{{ errorMessage }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
     </div>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+        <a-button :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -160,7 +158,7 @@ startLogin()
 
 .oauth-login__hint {
   font-size: 14px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-2, inherit);
   text-align: center;
   line-height: 1.6;
 }
diff --git a/packages/client/src/components/hermes/models/NousLoginModal.vue b/packages/client/src/components/hermes/models/NousLoginModal.vue
index 6f4d7e9..295a542 100644
--- a/packages/client/src/components/hermes/models/NousLoginModal.vue
+++ b/packages/client/src/components/hermes/models/NousLoginModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
-import { NModal, NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { startNousLogin, pollNousLogin } from '@/api/hermes/nous-auth'
@@ -117,18 +116,17 @@ startLogin()
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.nousLoginTitle')"
-    :style="{ width: 'min(440px, calc(100vw - 32px))' }"
+    width="min(440px, calc(100vw - 32px))"
     :mask-closable="status !== 'waiting'"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="nous-login">
       <!-- Idle / Loading -->
       <div v-if="status === 'idle' || status === 'loading'" class="nous-login__state">
-        <NSpin size="small" />
+        <a-spin />
       </div>
 
       <!-- Waiting for authorization -->
@@ -138,12 +136,12 @@ startLogin()
           <span class="nous-login__code-text">{{ userCode }}</span>
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
         </div>
-        <NButton type="primary" block @click="openLink">
+        <a-button type="primary" long @click="openLink">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
           </template>
           {{ t('models.nousOpenLink') }}
-        </NButton>
+        </a-button>
       </div>
 
       <!-- Approved -->
@@ -155,22 +153,22 @@ startLogin()
       <!-- Expired -->
       <div v-else-if="status === 'expired'" class="nous-login__state">
         <p class="nous-login__error">{{ t('models.nousExpired') }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
 
       <!-- Error -->
       <div v-else-if="status === 'error'" class="nous-login__state">
         <p class="nous-login__error">{{ errorMessage }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
     </div>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+        <a-button :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -193,7 +191,7 @@ startLogin()
 
 .nous-login__hint {
   font-size: 14px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-2, inherit);
   text-align: center;
   line-height: 1.6;
 }
@@ -203,14 +201,14 @@ startLogin()
   align-items: center;
   gap: 12px;
   padding: 12px 20px;
-  border: 1px solid var(--n-border-color, #e0e0e6);
+  border: 1px solid var(--color-border-2, #e0e0e6);
   border-radius: 8px;
   cursor: pointer;
   transition: border-color 0.2s;
-  background: var(--n-color, #fafafa);
+  background: var(--color-fill-2, #fafafa);
 
   &:hover {
-    border-color: var(--n-primary-color, #18a058);
+    border-color: var(--arcoblue-6, #165dff);
   }
 }
 
@@ -219,7 +217,7 @@ startLogin()
   font-weight: 700;
   font-family: monospace;
   letter-spacing: 4px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-1, inherit);
 }
 
 .nous-login__state--success {
diff --git a/packages/client/src/components/hermes/models/ProviderCard.vue b/packages/client/src/components/hermes/models/ProviderCard.vue
index 74fa190..bbcb56e 100644
--- a/packages/client/src/components/hermes/models/ProviderCard.vue
+++ b/packages/client/src/components/hermes/models/ProviderCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { NButton, NCheckbox, NCheckboxGroup, NModal, NInput, NSelect } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
 import type { AvailableModelGroup } from '@/api/hermes/system'
@@ -260,16 +259,16 @@ async function handleDelete() {
       </div>
       <div class="default-model-row">
         <span class="info-label">{{ t('models.defaultModel') }}</span>
-        <NSelect
+        <a-select
           class="default-model-select"
-          size="tiny"
-          filterable
-          :value="defaultModelSelectValue"
+          size="mini"
+          allow-search
+          :model-value="defaultModelSelectValue ?? undefined"
           :options="defaultModelOptions"
           :placeholder="t('models.selectModel')"
           :disabled="provider.models.length === 0"
           :loading="defaultingModel !== null"
-          @update:value="handleSetDefaultModel"
+          @change="handleSetDefaultModel($event as string | null)"
         />
       </div>
       <div class="models-list">
@@ -293,25 +292,25 @@ async function handleDelete() {
     </div>
 
     <div class="card-actions">
-      <NButton
-        size="tiny"
-        quaternary
+      <a-button
+        size="mini"
+        type="text"
         :disabled="isDefaultProvider"
         :loading="defaultingProvider"
         @click="handleSetDefaultProvider"
       >
         {{ isDefaultProvider ? t('models.currentDefault') : t('models.setDefaultProvider') }}
-      </NButton>
-      <NButton size="tiny" quaternary @click="showAliasListModal = true">{{ t('models.aliasManage') }}</NButton>
-      <NButton size="tiny" quaternary @click="openVisibilityModal">{{ t('models.manageVisibleModels') }}</NButton>
-      <NButton size="tiny" quaternary type="error" :loading="deleting" @click="handleDelete">{{ destructiveActionLabel }}</NButton>
+      </a-button>
+      <a-button size="mini" type="text" @click="showAliasListModal = true">{{ t('models.aliasManage') }}</a-button>
+      <a-button size="mini" type="text" @click="openVisibilityModal">{{ t('models.manageVisibleModels') }}</a-button>
+      <a-button size="mini" type="text" status="danger" :loading="deleting" @click="handleDelete">{{ destructiveActionLabel }}</a-button>
     </div>
 
-    <NModal
-      v-model:show="showAliasListModal"
-      preset="card"
+    <a-modal
+      v-model:visible="showAliasListModal"
+      :footer="false"
       :title="t('models.aliasManageFor', { provider: displayName })"
-      :style="{ width: 'min(560px, calc(100vw - 32px))' }"
+      width="min(560px, calc(100vw - 32px))"
       :mask-closable="true"
     >
       <div class="alias-list-hint">{{ t('models.aliasHint') }}</div>
@@ -322,22 +321,21 @@ async function handleDelete() {
             <span v-if="isDefaultModel(model)" class="alias-row-default">{{ t('models.defaultShort') }}</span>
             <code class="alias-row-id">{{ model }}</code>
           </div>
-          <NButton size="tiny" quaternary @click="openAliasEditor(model)">{{ t('models.aliasEdit') }}</NButton>
+          <a-button size="mini" type="text" @click="openAliasEditor(model)">{{ t('models.aliasEdit') }}</a-button>
         </div>
       </div>
-    </NModal>
+    </a-modal>
 
-    <NModal
-      v-model:show="showAliasModal"
-      preset="card"
+    <a-modal
+      v-model:visible="showAliasModal"
       :title="aliasModel ? t('models.aliasTitleFor', { model: aliasModel }) : t('models.aliasTitle')"
-      :style="{ width: 'min(420px, calc(100vw - 32px))' }"
+      width="min(420px, calc(100vw - 32px))"
       :mask-closable="true"
     >
-      <NInput
-        v-model:value="aliasInput"
+      <a-input
+        v-model="aliasInput"
         :placeholder="t('models.aliasPlaceholder')"
-        clearable
+        allow-clear
         @keydown.enter="saveAlias"
       />
       <div v-if="aliasModel" class="model-alias-canonical">
@@ -346,21 +344,21 @@ async function handleDelete() {
       <div class="model-alias-hint">{{ t('models.aliasHint') }}</div>
       <template #footer>
         <div class="model-alias-actions">
-          <NButton quaternary :disabled="!appStore.getModelAlias(aliasModel, aliasProvider)" @click="clearAlias">
+          <a-button type="text" :disabled="!appStore.getModelAlias(aliasModel, aliasProvider)" @click="clearAlias">
             {{ t('models.aliasUseOriginal') }}
-          </NButton>
+          </a-button>
           <div class="model-alias-spacer" />
-          <NButton @click="showAliasModal = false">{{ t('common.cancel') }}</NButton>
-          <NButton type="primary" @click="saveAlias">{{ t('common.save') }}</NButton>
+          <a-button @click="showAliasModal = false">{{ t('common.cancel') }}</a-button>
+          <a-button type="primary" @click="saveAlias">{{ t('common.save') }}</a-button>
         </div>
       </template>
-    </NModal>
+    </a-modal>
 
-    <NModal
-      v-model:show="showVisibilityModal"
-      preset="card"
+    <a-modal
+      v-model:visible="showVisibilityModal"
+      :footer="false"
       :title="t('models.manageVisibleModelsFor', { name: displayName })"
-      :style="{ width: 'min(560px, calc(100vw - 32px))' }"
+      width="min(560px, calc(100vw - 32px))"
       :mask-closable="!visibilitySaving"
     >
       <p class="visibility-hint">{{ t('models.visibilityHint') }}</p>
@@ -368,8 +366,8 @@ async function handleDelete() {
         {{ selectedVisibleModels.length }}/{{ allModels.length }} {{ t('models.count') }}
       </div>
       <div class="visibility-list">
-        <NCheckboxGroup v-model:value="selectedVisibleModels">
-          <NCheckbox
+        <a-checkbox-group v-model="selectedVisibleModels">
+          <a-checkbox
             v-for="model in allModels"
             :key="model"
             :value="model"
@@ -377,25 +375,25 @@ async function handleDelete() {
           >
             <code>{{ modelDisplayName(model) }}</code>
             <code v-if="modelAlias(model)" class="visibility-model-id">{{ model }}</code>
-          </NCheckbox>
-        </NCheckboxGroup>
+          </a-checkbox>
+        </a-checkbox-group>
       </div>
       <div class="visibility-actions">
-        <NButton size="small" quaternary :disabled="visibilitySaving" @click="resetVisibility">
+        <a-button size="small" type="text" :disabled="visibilitySaving" @click="resetVisibility">
           {{ t('models.showAllModels') }}
-        </NButton>
-        <NButton size="small" quaternary :disabled="visibilitySaving" @click="clearVisibility">
+        </a-button>
+        <a-button size="small" type="text" :disabled="visibilitySaving" @click="clearVisibility">
           {{ t('models.clearVisibleModels') }}
-        </NButton>
+        </a-button>
         <div class="visibility-action-spacer" />
-        <NButton size="small" :disabled="visibilitySaving" @click="showVisibilityModal = false">
+        <a-button size="small" :disabled="visibilitySaving" @click="showVisibilityModal = false">
           {{ t('common.cancel') }}
-        </NButton>
-        <NButton size="small" type="primary" :loading="visibilitySaving" @click="handleVisibilitySave">
+        </a-button>
+        <a-button size="small" type="primary" :loading="visibilitySaving" @click="handleVisibilitySave">
           {{ t('common.save') }}
-        </NButton>
+        </a-button>
       </div>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/models/ProviderFormModal.vue b/packages/client/src/components/hermes/models/ProviderFormModal.vue
index b308e38..5f57ec9 100644
--- a/packages/client/src/components/hermes/models/ProviderFormModal.vue
+++ b/packages/client/src/components/hermes/models/ProviderFormModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted, nextTick } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NButton, NSelect, NRadioGroup, NRadioButton } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
 import { useModelsStore } from '@/stores/hermes/models'
@@ -438,40 +437,40 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.addProvider')"
-    :style="{ width: 'min(520px, calc(100vw - 32px))' }"
+    width="min(520px, calc(100vw - 32px))"
     :mask-closable="!loading && !showCodexLogin && !showNousLogin && !showCopilotLogin && !showXaiLogin && !showAnthropicLogin && !showGeminiLogin"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
-    <NForm label-placement="top">
-      <NFormItem :label="t('models.providerType')">
+    <a-form :model="formData" layout="vertical">
+      <a-form-item :label="t('models.providerType')">
         <div style="display: flex; gap: 12px">
-          <NButton
-            :type="providerType === 'preset' ? 'primary' : 'default'"
+          <a-button
+            :type="providerType === 'preset' ? 'primary' : 'secondary'"
             size="small"
             @click="providerType = 'preset'"
           >
             {{ t('models.preset') }}
-          </NButton>
-          <NButton
-            :type="providerType === 'custom' ? 'primary' : 'default'"
+          </a-button>
+          <a-button
+            :type="providerType === 'custom' ? 'primary' : 'secondary'"
             size="small"
             @click="providerType = 'custom'"
           >
             {{ t('models.custom') }}
-          </NButton>
+          </a-button>
         </div>
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem v-if="providerType === 'preset'" :label="t('models.selectProvider')" required>
-        <NSelect
-          v-model:value="selectedPreset"
+      <a-form-item v-if="providerType === 'preset'" :label="t('models.selectProvider')" required>
+        <a-select
+          :model-value="selectedPreset ?? undefined"
           :options="presetOptions"
           :placeholder="t('models.chooseProvider')"
-          filterable
+          allow-search
+          @change="selectedPreset = $event as string | null"
         />
         <div v-if="selectedPreset && funProviderLink" class="fun-provider-hint">
           <a :href="funProviderLink" target="_blank" rel="noopener noreferrer">
@@ -479,84 +478,83 @@ function handleClose() {
             {{ t('models.getApiKey') }}
           </a>
         </div>
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem v-if="providerType === 'custom'" :label="t('models.name')">
-        <NInput
-          v-model:value="formData.name"
+      <a-form-item v-if="providerType === 'custom'" :label="t('models.name')">
+        <a-input
+          v-model="formData.name"
           :placeholder="t('models.autoGeneratedName')"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem v-if="isAlibabaCoding" :label="t('models.region')">
-        <NRadioGroup v-model:value="alibabaCodingRegion">
-          <NRadioButton value="intl">{{ t('models.regionIntl') }}</NRadioButton>
-          <NRadioButton value="cn">{{ t('models.regionCn') }}</NRadioButton>
-        </NRadioGroup>
-      </NFormItem>
+      <a-form-item v-if="isAlibabaCoding" :label="t('models.region')">
+        <a-radio-group v-model="alibabaCodingRegion">
+          <a-radio value="intl" type="button">{{ t('models.regionIntl') }}</a-radio>
+          <a-radio value="cn" type="button">{{ t('models.regionCn') }}</a-radio>
+        </a-radio-group>
+      </a-form-item>
 
-      <NFormItem v-if="!isCodex && !isNous" :label="t('models.baseUrl')" required>
-        <NInput
-          v-model:value="formData.base_url"
+      <a-form-item v-if="!isCodex && !isNous" :label="t('models.baseUrl')" required>
+        <a-input
+          v-model="formData.base_url"
           :placeholder="t('models.baseUrlPlaceholder')"
           :disabled="providerType === 'preset' && !canEditPresetBaseUrl"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem v-if="!isCodex && !isNous && !isClaudeOAuth && !isGeminiOAuth" :label="t('models.apiKey')" :required="!isCliproxyApi && !isXaiOAuth">
-        <NInput
-          v-model:value="formData.api_key"
-          type="password"
-          show-password-on="click"
+      <a-form-item v-if="!isCodex && !isNous && !isClaudeOAuth && !isGeminiOAuth" :label="t('models.apiKey')" :required="!isCliproxyApi && !isXaiOAuth">
+        <a-input-password
+          v-model="formData.api_key"
           :placeholder="t('models.apiKeyPlaceholder')"
           autocomplete="off"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem :label="t('models.defaultModel')" required>
+      <a-form-item :label="t('models.defaultModel')" required>
         <div style="display: flex; gap: 8px; width: 100%">
-          <NSelect
-            v-model:value="formData.model"
+          <a-select
+            v-model="formData.model"
             :options="modelOptions"
-            filterable
-            tag
+            allow-search
+            allow-create
             :placeholder="t('models.selectOrInput')"
             style="flex: 1"
           />
-          <NButton
+          <a-button
             v-if="canFetchProviderCatalog"
             :loading="fetchingModels"
             @click="fetchModels"
           >
             {{ t('common.fetch') }}
-          </NButton>
+          </a-button>
         </div>
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem v-if="providerType === 'custom'" :label="t('models.contextLength')">
-        <NInputNumber
-          v-model:value="formData.context_length as number | null"
+      <a-form-item v-if="providerType === 'custom'" :label="t('models.contextLength')">
+        <a-input-number
+          :model-value="formData.context_length ?? undefined"
           :placeholder="t('models.contextLengthPlaceholder')"
           :min="0"
-          clearable
+          allow-clear
           style="width: 100%"
+          @update:model-value="formData.context_length = $event ?? null"
         />
-      </NFormItem>
+      </a-form-item>
 
-      <NFormItem v-if="providerType === 'custom'" :label="t('models.apiMode')">
-        <NSelect
-          v-model:value="formData.api_mode"
+      <a-form-item v-if="providerType === 'custom'" :label="t('models.apiMode')">
+        <a-select
+          v-model="formData.api_mode"
           :options="apiModeOptions"
         />
-      </NFormItem>
-    </NForm>
+      </a-form-item>
+    </a-form>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" @click="handleSave">
+        <a-button @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleSave">
           {{ t('common.add') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
 
@@ -595,7 +593,7 @@ function handleClose() {
       @close="handleGeminiClose"
       @success="handleGeminiSuccess"
     />
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue b/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue
index 0ec8877..db9f765 100644
--- a/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue
+++ b/packages/client/src/components/hermes/models/XaiOAuthLoginModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onUnmounted } from 'vue'
-import { NModal, NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { startXaiLogin, pollXaiLogin } from '@/api/hermes/xai-auth'
@@ -94,27 +93,26 @@ startLogin()
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('models.xaiLoginTitle')"
-    :style="{ width: 'min(440px, calc(100vw - 32px))' }"
+    width="min(440px, calc(100vw - 32px))"
     :mask-closable="status !== 'waiting'"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="xai-login">
       <div v-if="status === 'idle' || status === 'loading'" class="xai-login__state">
-        <NSpin size="small" />
+        <a-spin />
       </div>
 
       <div v-else-if="status === 'waiting'" class="xai-login__state">
         <p class="xai-login__hint">{{ t('models.xaiWaiting') }}</p>
-        <NButton type="primary" block @click="openLink">
+        <a-button type="primary" long @click="openLink">
           {{ t('models.xaiOpenLink') }}
-        </NButton>
-        <NButton block @click="copyLink">
+        </a-button>
+        <a-button long @click="copyLink">
           {{ t('models.xaiCopyLink') }}
-        </NButton>
+        </a-button>
       </div>
 
       <div v-else-if="status === 'approved'" class="xai-login__state xai-login__state--success">
@@ -124,21 +122,21 @@ startLogin()
 
       <div v-else-if="status === 'expired'" class="xai-login__state">
         <p class="xai-login__error">{{ t('models.xaiExpired') }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
 
       <div v-else-if="status === 'error'" class="xai-login__state">
         <p class="xai-login__error">{{ errorMessage }}</p>
-        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+        <a-button size="small" @click="retry">{{ t('common.retry') }}</a-button>
       </div>
     </div>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+        <a-button :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
@@ -161,7 +159,7 @@ startLogin()
 
 .xai-login__hint {
   font-size: 14px;
-  color: var(--n-text-color, inherit);
+  color: var(--color-text-2, inherit);
   text-align: center;
   line-height: 1.6;
 }
diff --git a/packages/client/src/components/hermes/profiles/ProfileCard.vue b/packages/client/src/components/hermes/profiles/ProfileCard.vue
index 19a8b77..cd35865 100644
--- a/packages/client/src/components/hermes/profiles/ProfileCard.vue
+++ b/packages/client/src/components/hermes/profiles/ProfileCard.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { NButton, NTag, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
 import type { HermesProfile, HermesProfileDetail } from '@/api/hermes/profiles'
@@ -115,9 +114,9 @@ function handleEditConfig() {
         <ProfileAvatar :name="profile.name" :avatar="profile.avatar" :size="28" />
         <h3 class="profile-name">{{ profile.name }}</h3>
       </div>
-      <NTag v-if="profile.active" size="tiny" type="success" :bordered="false">
+      <a-tag v-if="profile.active" size="small" color="green" :bordered="false">
         {{ t('profiles.active') }}
-      </NTag>
+      </a-tag>
     </div>
 
     <div class="card-body">
@@ -140,7 +139,7 @@ function handleEditConfig() {
     </div>
 
     <div v-if="expanded" class="card-detail">
-      <NSpin :show="detailLoading" size="small">
+      <a-spin :loading="detailLoading" :size="28">
         <template v-if="detail">
           <div class="info-row">
             <span class="info-label">{{ t('profiles.provider') }}</span>
@@ -163,35 +162,34 @@ function handleEditConfig() {
             <span class="info-value">{{ detail.hasSoulMd ? 'Yes' : 'No' }}</span>
           </div>
         </template>
-      </NSpin>
+      </a-spin>
     </div>
 
     <div class="card-actions">
-      <NButton size="tiny" quaternary @click="handleEditConfig">
+      <a-button size="mini" type="text" @click="handleEditConfig">
         {{ t('profiles.editConfig') }}
-      </NButton>
-      <NButton
+      </a-button>
+      <a-button
         v-if="!profile.active"
-        size="tiny"
+        size="mini"
         :loading="switching"
-        quaternary
-        type="primary"
+        type="text"
         @click="handleSwitch"
       >
         {{ t('profiles.switchTo') }}
-      </NButton>
-      <NButton
-        size="tiny"
-        quaternary
-        type="error"
+      </a-button>
+      <a-button
+        size="mini"
+        type="text"
+        status="danger"
         :disabled="isDefault || profile.active"
         @click="handleDelete"
       >
         {{ t('common.delete') }}
-      </NButton>
-      <NButton size="tiny" quaternary :loading="exporting" @click="handleExport">
+      </a-button>
+      <a-button size="mini" type="text" :loading="exporting" @click="handleExport">
         {{ t('profiles.export') }}
-      </NButton>
+      </a-button>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue b/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue
index 8061189..ebeff61 100644
--- a/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue
+++ b/packages/client/src/components/hermes/profiles/ProfileCreateModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NButton, NSwitch, NText } from 'naive-ui'
+import { ref, reactive } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { useI18n } from 'vue-i18n'
@@ -20,6 +19,10 @@ const name = ref('')
 const clone = ref(false)
 const nameValidationMessage = ref('')
 
+// Arco's a-form requires a `model` object; this repo does hand-written `if`
+// validation (no :rules anywhere), so the model is only a required shape.
+const form = reactive({})
+
 function handleNameInput(value: string) {
   // 过滤掉不符合规则的字符，只保留小写字母、数字、下划线和连字符
   const filtered = value.toLowerCase().replace(/[^a-z0-9_-]/g, '')
@@ -75,51 +78,62 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('profiles.create')"
-    :style="{ width: 'min(420px, calc(100vw - 32px))' }"
+    width="min(420px, calc(100vw - 32px))"
     :mask-closable="!loading"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
-    <NForm label-placement="top">
-      <NFormItem :label="t('profiles.name')" required>
-        <NInput
-          v-model:value="name"
+    <a-form :model="form" layout="vertical">
+      <a-form-item :label="t('profiles.name')" required>
+        <a-input
+          v-model="name"
           :placeholder="t('profiles.namePlaceholder')"
           @input="handleNameInput"
         />
-      </NFormItem>
-      <NText v-if="nameValidationMessage" depth="3" type="warning" style="font-size: 12px;">
+      </a-form-item>
+      <span v-if="nameValidationMessage" class="form-hint form-hint--warning">
         {{ nameValidationMessage }}
-      </NText>
+      </span>
 
-      <NFormItem :label="t('profiles.cloneFromCurrent')">
-        <NSwitch v-model:value="clone" />
-      </NFormItem>
-      <NText v-if="clone" depth="3" style="font-size: 12px;">
+      <a-form-item :label="t('profiles.cloneFromCurrent')">
+        <a-switch v-model="clone" />
+      </a-form-item>
+      <span v-if="clone" class="form-hint">
         {{ t('profiles.cloneCleanupNotice') }}
-      </NText>
-    </NForm>
+      </span>
+    </a-form>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" @click="handleSave">
+        <a-button @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleSave">
           {{ t('common.create') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
+@use '@/styles/variables' as *;
+
 .modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }
+
+.form-hint {
+  display: block;
+  font-size: 12px;
+  color: $text-muted;
+
+  &--warning {
+    color: $warning;
+  }
+}
 </style>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/profiles/ProfileImportModal.vue b/packages/client/src/components/hermes/profiles/ProfileImportModal.vue
index 55922c3..3d3bfd5 100644
--- a/packages/client/src/components/hermes/profiles/ProfileImportModal.vue
+++ b/packages/client/src/components/hermes/profiles/ProfileImportModal.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { NModal, NUpload, NButton } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
-import type { UploadFileInfo } from 'naive-ui'
+import type { FileItem } from '@arco-design/web-vue/es/upload/interfaces'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { useI18n } from 'vue-i18n'
 
@@ -17,7 +16,7 @@ const message = useMessage()
 
 const showModal = ref(true)
 const loading = ref(false)
-const fileList = ref<UploadFileInfo[]>([])
+const fileList = ref<FileItem[]>([])
 
 const ACCEPT_TYPES = [
   '.tar.gz',
@@ -26,7 +25,8 @@ const ACCEPT_TYPES = [
   '.zip',
 ]
 
-function beforeUpload({ file }: { file: UploadFileInfo }) {
+// Arco's before-upload receives the raw File (naive passed { file }).
+function beforeUpload(file: File) {
   const name = file.name?.toLowerCase() || ''
   const valid = ACCEPT_TYPES.some(ext => name.endsWith(ext))
   if (!valid) {
@@ -68,33 +68,33 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('profiles.import')"
-    :style="{ width: 'min(420px, calc(100vw - 32px))' }"
+    width="min(420px, calc(100vw - 32px))"
     :mask-closable="!loading"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
-    <NUpload
+    <a-upload
       v-model:file-list="fileList"
-      :max="1"
+      :limit="1"
+      :auto-upload="false"
       :accept="ACCEPT_TYPES.join(',')"
       :disabled="loading"
       @before-upload="beforeUpload"
     >
-      <NButton>{{ t('profiles.importSelectFile') }}</NButton>
-    </NUpload>
+      <a-button>{{ t('profiles.importSelectFile') }}</a-button>
+    </a-upload>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" :disabled="!fileList.length" @click="handleSave">
+        <a-button @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" :disabled="!fileList.length" @click="handleSave">
           {{ t('common.confirm') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/profiles/ProfileRenameModal.vue b/packages/client/src/components/hermes/profiles/ProfileRenameModal.vue
index c5273a1..c0ef14c 100644
--- a/packages/client/src/components/hermes/profiles/ProfileRenameModal.vue
+++ b/packages/client/src/components/hermes/profiles/ProfileRenameModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NButton, NText } from 'naive-ui'
+import { ref, reactive } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { useI18n } from 'vue-i18n'
@@ -20,6 +19,10 @@ const loading = ref(false)
 const newName = ref('')
 const nameValidationMessage = ref('')
 
+// Arco's a-form requires a `model` object; this repo does hand-written `if`
+// validation (no :rules anywhere), so the model is only a required shape.
+const form = reactive({})
+
 function handleNameInput(value: string) {
   // 过滤掉不符合规则的字符，只保留小写字母、数字、下划线和连字符
   const filtered = value.toLowerCase().replace(/[^a-z0-9_-]/g, '')
@@ -63,42 +66,53 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('profiles.rename')"
-    :style="{ width: 'min(420px, calc(100vw - 32px))' }"
+    width="min(420px, calc(100vw - 32px))"
     :mask-closable="!loading"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
-    <NForm label-placement="top">
-      <NFormItem :label="t('profiles.newName')" required>
-        <NInput
-          v-model:value="newName"
+    <a-form :model="form" layout="vertical">
+      <a-form-item :label="t('profiles.newName')" required>
+        <a-input
+          v-model="newName"
           :placeholder="t('profiles.newNamePlaceholder')"
           @input="handleNameInput"
         />
-      </NFormItem>
-      <NText v-if="nameValidationMessage" depth="3" type="warning" style="font-size: 12px;">
+      </a-form-item>
+      <span v-if="nameValidationMessage" class="form-hint form-hint--warning">
         {{ nameValidationMessage }}
-      </NText>
-    </NForm>
+      </span>
+    </a-form>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" @click="handleSave">
+        <a-button @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleSave">
           {{ t('common.confirm') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
+@use '@/styles/variables' as *;
+
 .modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }
+
+.form-hint {
+  display: block;
+  font-size: 12px;
+  color: $text-muted;
+
+  &--warning {
+    color: $warning;
+  }
+}
 </style>
diff --git a/packages/client/src/components/hermes/settings/AccountSettings.vue b/packages/client/src/components/hermes/settings/AccountSettings.vue
index c6369c0..c251dc6 100644
--- a/packages/client/src/components/hermes/settings/AccountSettings.vue
+++ b/packages/client/src/components/hermes/settings/AccountSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { NButton, NInput, NModal, NForm, NFormItem, NPopconfirm } from "naive-ui";
+import { ref, onMounted, reactive } from "vue";
 import { useMessage } from "@/composables/useMessage";
 import { useI18n } from "vue-i18n";
 import { changePassword, changeUsername, fetchCurrentUser, fetchLockedIps, unlockSpecificIp, unlockAllIps, fetchMyAvatar, updateMyAvatar, resetMyAvatar } from "@/api/auth";
@@ -126,6 +125,11 @@ const showChangeUsernameModal = ref(false);
 const currentPasswordForName = ref("");
 const newUsernameVal = ref("");
 
+// Arco's a-form requires a `model` object; this repo does hand-written `if`
+// validation (no :rules anywhere), so the model is only a required shape.
+const changePasswordForm = reactive({});
+const changeUsernameForm = reactive({});
+
 onMounted(async () => {
   try {
     const user = await fetchCurrentUser();
@@ -258,9 +262,9 @@ onMounted(() => { loadLockedIps(); });
         <div class="avatar-actions">
           <p class="avatar-hint">{{ t('settings.userAvatar.hint') }}</p>
           <div class="action-buttons">
-            <NButton @click="avatarFileInput?.click()">{{ t('settings.userAvatar.upload') }}</NButton>
-            <NButton @click="handleRandomAvatar" :loading="avatarSaving">{{ t('settings.userAvatar.random') }}</NButton>
-            <NButton @click="handleResetAvatar" :loading="avatarSaving">{{ t('settings.userAvatar.reset') }}</NButton>
+            <a-button @click="avatarFileInput?.click()">{{ t('settings.userAvatar.upload') }}</a-button>
+            <a-button @click="handleRandomAvatar" :loading="avatarSaving">{{ t('settings.userAvatar.random') }}</a-button>
+            <a-button @click="handleResetAvatar" :loading="avatarSaving">{{ t('settings.userAvatar.reset') }}</a-button>
           </div>
           <input
             ref="avatarFileInput"
@@ -277,8 +281,8 @@ onMounted(() => { loadLockedIps(); });
       <div class="action-row">
         <span class="action-label">{{ t("login.passwordLoginConfigured", { username }) }}</span>
         <div class="action-buttons">
-          <NButton @click="openChangePasswordModal">{{ t("login.changePassword") }}</NButton>
-          <NButton @click="openChangeUsernameModal">{{ t("login.changeUsername") }}</NButton>
+          <a-button @click="openChangePasswordModal">{{ t("login.changePassword") }}</a-button>
+          <a-button @click="openChangeUsernameModal">{{ t("login.changeUsername") }}</a-button>
         </div>
       </div>
     </div>
@@ -289,13 +293,14 @@ onMounted(() => { loadLockedIps(); });
       <div class="action-row" style="margin-bottom: 12px;">
         <span class="action-label">{{ t("settings.lockedIps.count", { count: lockedIps.length }) }}</span>
         <div class="action-buttons">
-          <NButton size="small" :loading="loadingLocks" @click="loadLockedIps">{{ t("common.retry") }}</NButton>
-          <NPopconfirm v-if="lockedIps.length > 0" @positive-click="handleUnlockAll">
-            <template #trigger>
-              <NButton size="small" type="warning">{{ t("settings.lockedIps.unlockAll") }}</NButton>
-            </template>
-            {{ t("settings.lockedIps.unlockAllConfirm") }}
-          </NPopconfirm>
+          <a-button size="small" :loading="loadingLocks" @click="loadLockedIps">{{ t("common.retry") }}</a-button>
+          <a-popconfirm
+            v-if="lockedIps.length > 0"
+            :content="t('settings.lockedIps.unlockAllConfirm')"
+            @ok="handleUnlockAll"
+          >
+            <a-button size="small" type="primary" status="warning">{{ t("settings.lockedIps.unlockAll") }}</a-button>
+          </a-popconfirm>
         </div>
       </div>
       <div v-if="lockedIps.length > 0" class="locked-list">
@@ -305,46 +310,46 @@ onMounted(() => { loadLockedIps(); });
             <span class="locked-badge">{{ lockedIpTypeLabel(lock.type) }}</span>
             <span class="locked-ttl">{{ formatTime(lock.lockedUntil) }}</span>
           </div>
-          <NButton size="tiny" type="error" ghost @click="handleUnlockIp(lock.ip)">{{ t("settings.lockedIps.unlock") }}</NButton>
+          <a-button size="mini" type="outline" status="danger" @click="handleUnlockIp(lock.ip)">{{ t("settings.lockedIps.unlock") }}</a-button>
         </div>
       </div>
       <p v-else class="empty-hint">{{ t("settings.lockedIps.empty") }}</p>
     </div>
 
     <!-- Change password modal -->
-    <NModal v-model:show="showChangePasswordModal" preset="dialog" :title="t('login.changePassword')">
-      <NForm label-placement="top">
-        <NFormItem :label="t('login.currentPassword')">
-          <NInput v-model:value="currentPasswordForPwd" type="password" show-password-on="click" :placeholder="t('login.currentPassword')" />
-        </NFormItem>
-        <NFormItem :label="t('login.newPassword')">
-          <NInput v-model:value="newPasswordVal" type="password" show-password-on="click" :placeholder="t('login.newPassword')" />
-        </NFormItem>
-        <NFormItem :label="t('login.confirmPassword')">
-          <NInput v-model:value="newPasswordConfirm" type="password" show-password-on="click" :placeholder="t('login.confirmPassword')" @keyup.enter="handleChangePassword" />
-        </NFormItem>
-      </NForm>
-      <template #action>
-        <NButton @click="showChangePasswordModal = false">{{ t("common.cancel") }}</NButton>
-        <NButton type="primary" :loading="loading" @click="handleChangePassword">{{ t("common.save") }}</NButton>
+    <a-modal v-model:visible="showChangePasswordModal" :title="t('login.changePassword')">
+      <a-form :model="changePasswordForm" layout="vertical">
+        <a-form-item :label="t('login.currentPassword')">
+          <a-input-password v-model="currentPasswordForPwd" :placeholder="t('login.currentPassword')" />
+        </a-form-item>
+        <a-form-item :label="t('login.newPassword')">
+          <a-input-password v-model="newPasswordVal" :placeholder="t('login.newPassword')" />
+        </a-form-item>
+        <a-form-item :label="t('login.confirmPassword')">
+          <a-input-password v-model="newPasswordConfirm" :placeholder="t('login.confirmPassword')" @press-enter="handleChangePassword" />
+        </a-form-item>
+      </a-form>
+      <template #footer>
+        <a-button @click="showChangePasswordModal = false">{{ t("common.cancel") }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleChangePassword">{{ t("common.save") }}</a-button>
       </template>
-    </NModal>
+    </a-modal>
 
     <!-- Change username modal -->
-    <NModal v-model:show="showChangeUsernameModal" preset="dialog" :title="t('login.changeUsername')">
-      <NForm label-placement="top">
-        <NFormItem :label="t('login.currentPassword')">
-          <NInput v-model:value="currentPasswordForName" type="password" show-password-on="click" :placeholder="t('login.currentPassword')" />
-        </NFormItem>
-        <NFormItem :label="t('login.newUsername')">
-          <NInput v-model:value="newUsernameVal" :placeholder="t('login.usernamePlaceholder')" @keyup.enter="handleChangeUsername" />
-        </NFormItem>
-      </NForm>
-      <template #action>
-        <NButton @click="showChangeUsernameModal = false">{{ t("common.cancel") }}</NButton>
-        <NButton type="primary" :loading="loading" @click="handleChangeUsername">{{ t("common.save") }}</NButton>
+    <a-modal v-model:visible="showChangeUsernameModal" :title="t('login.changeUsername')">
+      <a-form :model="changeUsernameForm" layout="vertical">
+        <a-form-item :label="t('login.currentPassword')">
+          <a-input-password v-model="currentPasswordForName" :placeholder="t('login.currentPassword')" />
+        </a-form-item>
+        <a-form-item :label="t('login.newUsername')">
+          <a-input v-model="newUsernameVal" :placeholder="t('login.usernamePlaceholder')" @press-enter="handleChangeUsername" />
+        </a-form-item>
+      </a-form>
+      <template #footer>
+        <a-button @click="showChangeUsernameModal = false">{{ t("common.cancel") }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleChangeUsername">{{ t("common.save") }}</a-button>
       </template>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/settings/AgentSettings.vue b/packages/client/src/components/hermes/settings/AgentSettings.vue
index 5e70f97..e60d115 100644
--- a/packages/client/src/components/hermes/settings/AgentSettings.vue
+++ b/packages/client/src/components/hermes/settings/AgentSettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NInputNumber, NSelect } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -13,7 +12,7 @@ const { t } = useI18n()
 const debounceTimers: Record<string, ReturnType<typeof setTimeout>> = {}
 
 function save(values: Record<string, any>) {
-  // NSelect 等一次性操作，直接保存，不需要防抖
+  // 下拉选择等一次性操作，直接保存，不需要防抖
   settingsStore.updateLocal('agent', values)
   settingsStore.saveSection('agent', values).then(() => {
     message.success(t('settings.saved'))
@@ -41,39 +40,39 @@ function debouncedSave(key: string, value: any) {
 <template>
   <section class="settings-section">
     <SettingRow :label="t('settings.agent.maxTurns')" :hint="t('settings.agent.maxTurnsHint')">
-      <NInputNumber
-        :value="settingsStore.agent.max_turns"
+      <a-input-number
+        :model-value="settingsStore.agent.max_turns"
         :min="1" :max="200" :step="5"
         size="small" class="input-sm"
-        @update:value="v => v != null && debouncedSave('max_turns', v)"
+        @update:model-value="v => v != null && debouncedSave('max_turns', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.agent.gatewayTimeout')" :hint="t('settings.agent.gatewayTimeoutHint')">
-      <NInputNumber
-        :value="settingsStore.agent.gateway_timeout"
+      <a-input-number
+        :model-value="settingsStore.agent.gateway_timeout"
         :min="60" :max="7200" :step="60"
         size="small" class="input-sm"
-        @update:value="v => v != null && debouncedSave('gateway_timeout', v)"
+        @update:model-value="v => v != null && debouncedSave('gateway_timeout', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.agent.restartDrainTimeout')" :hint="t('settings.agent.restartDrainTimeoutHint')">
-      <NInputNumber
-        :value="settingsStore.agent.restart_drain_timeout"
+      <a-input-number
+        :model-value="settingsStore.agent.restart_drain_timeout"
         :min="10" :max="300" :step="10"
         size="small" class="input-sm"
-        @update:value="v => v != null && debouncedSave('restart_drain_timeout', v)"
+        @update:model-value="v => v != null && debouncedSave('restart_drain_timeout', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.agent.toolEnforcement')" :hint="t('settings.agent.toolEnforcementHint')">
-      <NSelect
-        :value="settingsStore.agent.tool_use_enforcement || 'auto'"
+      <a-select
+        :model-value="settingsStore.agent.tool_use_enforcement || 'auto'"
         :options="[
           { label: t('settings.agent.auto'), value: 'auto' },
           { label: t('settings.agent.always'), value: 'always' },
           { label: t('settings.agent.never'), value: 'never' },
         ]"
         size="small" class="input-sm"
-        @update:value="v => save({ tool_use_enforcement: v })"
+        @update:model-value="v => save({ tool_use_enforcement: v })"
       />
     </SettingRow>
   </section>
diff --git a/packages/client/src/components/hermes/settings/CompressionSettings.vue b/packages/client/src/components/hermes/settings/CompressionSettings.vue
index ac4600b..af9991f 100644
--- a/packages/client/src/components/hermes/settings/CompressionSettings.vue
+++ b/packages/client/src/components/hermes/settings/CompressionSettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NInputNumber, NSwitch } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -45,54 +44,54 @@ function debouncedSave(key: string, value: any) {
 <template>
   <section class="settings-section">
     <SettingRow :label="t('settings.compression.enabled')" :hint="t('settings.compression.enabledHint')">
-      <NSwitch
-        :value="settingsStore.compression.enabled ?? defaults.enabled"
+      <a-switch
+        :model-value="settingsStore.compression.enabled ?? defaults.enabled"
         size="small"
-        @update:value="v => save({ enabled: v })"
+        @update:model-value="v => save({ enabled: v })"
       />
     </SettingRow>
     <SettingRow :label="t('settings.compression.threshold')" :hint="t('settings.compression.thresholdHint')">
-      <NInputNumber
-        :value="settingsStore.compression.threshold ?? defaults.threshold"
+      <a-input-number
+        :model-value="settingsStore.compression.threshold ?? defaults.threshold"
         :min="0.1"
         :max="0.95"
         :step="0.05"
         size="small"
         class="input-sm"
-        @update:value="v => v != null && debouncedSave('threshold', v)"
+        @update:model-value="v => v != null && debouncedSave('threshold', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.compression.targetRatio')" :hint="t('settings.compression.targetRatioHint')">
-      <NInputNumber
-        :value="settingsStore.compression.target_ratio ?? defaults.target_ratio"
+      <a-input-number
+        :model-value="settingsStore.compression.target_ratio ?? defaults.target_ratio"
         :min="0.05"
         :max="0.8"
         :step="0.05"
         size="small"
         class="input-sm"
-        @update:value="v => v != null && debouncedSave('target_ratio', v)"
+        @update:model-value="v => v != null && debouncedSave('target_ratio', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.compression.protectLastN')" :hint="t('settings.compression.protectLastNHint')">
-      <NInputNumber
-        :value="settingsStore.compression.protect_last_n ?? defaults.protect_last_n"
+      <a-input-number
+        :model-value="settingsStore.compression.protect_last_n ?? defaults.protect_last_n"
         :min="0"
         :max="200"
         :step="1"
         size="small"
         class="input-sm"
-        @update:value="v => v != null && debouncedSave('protect_last_n', v)"
+        @update:model-value="v => v != null && debouncedSave('protect_last_n', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.compression.protectFirstN')" :hint="t('settings.compression.protectFirstNHint')">
-      <NInputNumber
-        :value="settingsStore.compression.protect_first_n ?? defaults.protect_first_n"
+      <a-input-number
+        :model-value="settingsStore.compression.protect_first_n ?? defaults.protect_first_n"
         :min="0"
         :max="50"
         :step="1"
         size="small"
         class="input-sm"
-        @update:value="v => v != null && debouncedSave('protect_first_n', v)"
+        @update:model-value="v => v != null && debouncedSave('protect_first_n', v)"
       />
     </SettingRow>
   </section>
diff --git a/packages/client/src/components/hermes/settings/DisplaySettings.vue b/packages/client/src/components/hermes/settings/DisplaySettings.vue
index 969583e..cda6968 100644
--- a/packages/client/src/components/hermes/settings/DisplaySettings.vue
+++ b/packages/client/src/components/hermes/settings/DisplaySettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NButton, NSwitch, NSelect, NInputNumber } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -92,51 +91,51 @@ async function testCompletionNotification() {
 <template>
   <section class="settings-section">
     <SettingRow :label="t('settings.display.theme')" :hint="t('settings.display.themeHint')">
-      <NSelect :value="brightness" :options="themeOptions" size="small" :consistent-menu-width="false" class="input-sm" @update:value="handleThemeChange" />
+      <a-select :model-value="brightness" :options="themeOptions" size="small" class="input-sm" @update:model-value="v => handleThemeChange(String(v))" />
     </SettingRow>
     <SettingRow :label="t('settings.display.streaming')" :hint="t('settings.display.streamingHint')">
-      <NSwitch :value="settingsStore.display.streaming" @update:value="v => save({ streaming: v })" />
+      <a-switch :model-value="settingsStore.display.streaming" @update:model-value="v => save({ streaming: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.display.compact')" :hint="t('settings.display.compactHint')">
-      <NSwitch :value="settingsStore.display.compact" @update:value="v => save({ compact: v })" />
+      <a-switch :model-value="settingsStore.display.compact" @update:model-value="v => save({ compact: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.display.showReasoning')" :hint="t('settings.display.showReasoningHint')">
-      <NSwitch :value="settingsStore.display.show_reasoning" @update:value="v => save({ show_reasoning: v })" />
+      <a-switch :model-value="settingsStore.display.show_reasoning" @update:model-value="v => save({ show_reasoning: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.display.showCost')" :hint="t('settings.display.showCostHint')">
-      <NSwitch :value="settingsStore.display.show_cost" @update:value="v => save({ show_cost: v })" />
+      <a-switch :model-value="settingsStore.display.show_cost" @update:model-value="v => save({ show_cost: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.display.inlineDiffs')" :hint="t('settings.display.inlineDiffsHint')">
-      <NSwitch :value="settingsStore.display.inline_diffs" @update:value="v => save({ inline_diffs: v })" />
+      <a-switch :model-value="settingsStore.display.inline_diffs" @update:model-value="v => save({ inline_diffs: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.display.bellOnComplete')" :hint="t('settings.display.bellOnCompleteHint')">
-      <NSwitch :value="settingsStore.display.bell_on_complete" @update:value="v => save({ bell_on_complete: v })" />
+      <a-switch :model-value="settingsStore.display.bell_on_complete" @update:model-value="v => save({ bell_on_complete: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.display.notifyOnComplete')" :hint="`${t('settings.display.notifyOnCompleteHint')} ${t('settings.display.notifyOnCompleteMacHint')}`">
       <div class="notify-controls">
-        <NSwitch :value="settingsStore.display.notify_on_complete" @update:value="handleNotifyOnCompleteChange" />
-        <NButton size="tiny" secondary @click="testCompletionNotification">
+        <a-switch :model-value="settingsStore.display.notify_on_complete" @update:model-value="v => handleNotifyOnCompleteChange(v as boolean)" />
+        <a-button size="mini" type="secondary" @click="testCompletionNotification">
           {{ t('settings.display.notifyOnCompleteTestButton') }}
-        </NButton>
+        </a-button>
       </div>
     </SettingRow>
     <SettingRow :label="t('settings.display.chatInputHeight')" :hint="t('settings.display.chatInputHeightHint')">
       <div class="chat-input-height-controls">
-        <NInputNumber
-          :value="chatInputHeight"
+        <a-input-number
+          :model-value="chatInputHeight ?? undefined"
           :min="MIN_CHAT_INPUT_HEIGHT"
           :max="MAX_CHAT_INPUT_HEIGHT"
           :step="8"
-          :show-button="false"
+          hide-button
           size="small"
           class="input-sm"
-          @update:value="handleChatInputHeightChange"
+          @update:model-value="v => handleChatInputHeightChange(v ?? null)"
         >
           <template #suffix>px</template>
-        </NInputNumber>
-        <NButton size="tiny" secondary @click="resetChatInputHeight">
+        </a-input-number>
+        <a-button size="mini" type="secondary" @click="resetChatInputHeight">
           {{ t('common.reset') }}
-        </NButton>
+        </a-button>
       </div>
     </SettingRow>
   </section>
diff --git a/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue b/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue
index 551603d..3a76d84 100644
--- a/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue
+++ b/packages/client/src/components/hermes/settings/GatewayAutoStartSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NSelect, NSwitch } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -78,7 +77,7 @@ function saveExclude(value: string[]) {
     <p class="section-hint">{{ t('settings.gatewayAutoStart.description') }}</p>
 
     <SettingRow :label="t('settings.gatewayAutoStart.enabled')" :hint="t('settings.gatewayAutoStart.enabledHint')">
-      <NSwitch :value="enabled" @update:value="value => save({ enabled: value })" />
+      <a-switch :model-value="enabled" @update:model-value="value => save({ enabled: value })" />
     </SettingRow>
 
     <SettingRow
@@ -86,16 +85,16 @@ function saveExclude(value: string[]) {
       :label="t('settings.gatewayAutoStart.management')"
       :hint="t('settings.gatewayAutoStart.managementHint')"
     >
-      <NSwitch :value="managementEnabled" @update:value="saveManagement" />
+      <a-switch :model-value="managementEnabled" @update:model-value="v => saveManagement(v as boolean)" />
     </SettingRow>
 
     <SettingRow :label="t('settings.gatewayAutoStart.mode')" :hint="t('settings.gatewayAutoStart.modeHint')">
-      <NSelect
-        :value="mode"
+      <a-select
+        :model-value="mode"
         :options="modeOptions"
         size="small"
         class="input-md"
-        @update:value="saveMode"
+        @update:model-value="v => saveMode(String(v))"
       />
     </SettingRow>
 
@@ -104,15 +103,15 @@ function saveExclude(value: string[]) {
       :label="t('settings.gatewayAutoStart.include')"
       :hint="t('settings.gatewayAutoStart.includeHint')"
     >
-      <NSelect
+      <a-select
         multiple
-        filterable
-        :value="includeProfiles"
+        allow-search
+        :model-value="includeProfiles"
         :options="profileOptions"
         size="small"
         class="input-md"
         :placeholder="t('settings.gatewayAutoStart.profileListPlaceholder')"
-        @update:value="saveInclude"
+        @update:model-value="v => saveInclude((v ?? []) as string[])"
       />
     </SettingRow>
 
@@ -121,15 +120,15 @@ function saveExclude(value: string[]) {
       :label="t('settings.gatewayAutoStart.exclude')"
       :hint="t('settings.gatewayAutoStart.excludeHint')"
     >
-      <NSelect
+      <a-select
         multiple
-        filterable
-        :value="excludeProfiles"
+        allow-search
+        :model-value="excludeProfiles"
         :options="profileOptions"
         size="small"
         class="input-md"
         :placeholder="t('settings.gatewayAutoStart.profileListPlaceholder')"
-        @update:value="saveExclude"
+        @update:model-value="v => saveExclude((v ?? []) as string[])"
       />
     </SettingRow>
   </section>
diff --git a/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue b/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue
index 24e6c9e..5bfc3e7 100644
--- a/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue
+++ b/packages/client/src/components/hermes/settings/GithubPreviewSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { NAlert, NButton, NDescriptions, NDescriptionsItem, NSelect, NSpace, NTag } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import {
@@ -220,74 +219,74 @@ watch(
   <div class="github-preview-settings">
     <div class="settings-section">
       <div class="control-row">
-        <NSelect
-          v-model:value="selectedTag"
+        <a-select
+          v-model="selectedTag"
           class="tag-select"
-          filterable
+          allow-search
           :loading="tagsLoading"
           :options="tagOptions"
           :placeholder="t('githubPreview.selectTag')"
         />
-        <NSpace>
-          <NButton type="primary" :loading="activeAction === 'prepare'" :disabled="hasActiveAction || !selectedTag" @click="handlePrepare">
+        <a-space>
+          <a-button type="primary" :loading="activeAction === 'prepare'" :disabled="hasActiveAction || !selectedTag" @click="handlePrepare">
             {{ t('githubPreview.prepare') }}
-          </NButton>
-          <NButton :loading="activeAction === 'install'" :disabled="hasActiveAction || !status?.has_package" @click="handleInstall">
+          </a-button>
+          <a-button :loading="activeAction === 'install'" :disabled="hasActiveAction || !status?.has_package" @click="handleInstall">
             {{ t('githubPreview.install') }}
-          </NButton>
-          <NButton type="success" :loading="activeAction === 'start'" :disabled="hasActiveAction || !status?.installed" @click="handleStart">
+          </a-button>
+          <a-button type="primary" status="success" :loading="activeAction === 'start'" :disabled="hasActiveAction || !status?.installed" @click="handleStart">
             {{ t('githubPreview.start') }}
-          </NButton>
-          <NButton :loading="activeAction === 'stop'" :disabled="hasActiveAction || !status?.running" @click="handleStop">
+          </a-button>
+          <a-button :loading="activeAction === 'stop'" :disabled="hasActiveAction || !status?.running" @click="handleStop">
             {{ t('githubPreview.stop') }}
-          </NButton>
-          <NButton :loading="loading || tagsLoading" @click="handleRefresh">
+          </a-button>
+          <a-button :loading="loading || tagsLoading" @click="handleRefresh">
             {{ t('githubPreview.refresh') }}
-          </NButton>
-        </NSpace>
+          </a-button>
+        </a-space>
       </div>
 
       <p class="section-description">{{ t('githubPreview.description') }}</p>
 
-      <NAlert type="info" :bordered="false" class="preview-note">
+      <a-alert type="info" class="preview-note">
         {{ t('githubPreview.note') }}
-      </NAlert>
+      </a-alert>
 
-      <NDescriptions v-if="status" :column="1" bordered size="small" class="status-table">
-        <NDescriptionsItem :label="t('githubPreview.path')">
+      <a-descriptions v-if="status" :column="1" bordered size="small" class="status-table">
+        <a-descriptions-item :label="t('githubPreview.path')">
           <code>{{ status.preview_dir }}</code>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.webuiHome')">
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.webuiHome')">
           <code>{{ status.webui_home }}</code>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.currentTag')">
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.currentTag')">
           {{ status.current_tag || '-' }}
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.repoReady')">
-          <NTag size="small" :type="status.has_package ? 'success' : 'default'">
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.repoReady')">
+          <a-tag size="small" :color="status.has_package ? 'green' : 'gray'">
             {{ status.has_package ? t('githubPreview.yes') : t('githubPreview.no') }}
-          </NTag>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.dependencies')">
-          <NTag size="small" :type="status.installed ? 'success' : 'warning'">
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.dependencies')">
+          <a-tag size="small" :color="status.installed ? 'green' : 'orange'">
             {{ status.installed ? t('githubPreview.yes') : t('githubPreview.no') }}
-          </NTag>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.running')">
-          <NTag size="small" :type="status.running ? 'success' : 'default'">
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.running')">
+          <a-tag size="small" :color="status.running ? 'green' : 'gray'">
             {{ status.running ? `PID ${status.pid}` : t('githubPreview.notRunning') }}
-          </NTag>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.open')">
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.open')">
           <a :href="status.frontend_url" target="_blank" rel="noopener noreferrer">{{ status.frontend_url }}</a>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.log')">
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.log')">
           <code>{{ status.action_log_path }}</code>
-        </NDescriptionsItem>
-        <NDescriptionsItem :label="t('githubPreview.devLog')">
+        </a-descriptions-item>
+        <a-descriptions-item :label="t('githubPreview.devLog')">
           <code>{{ status.dev_log_path }}</code>
-        </NDescriptionsItem>
-      </NDescriptions>
+        </a-descriptions-item>
+      </a-descriptions>
 
       <div class="log-output">
         <div class="log-output-header">{{ t('githubPreview.logOutput') }}</div>
diff --git a/packages/client/src/components/hermes/settings/MemorySettings.vue b/packages/client/src/components/hermes/settings/MemorySettings.vue
index fe8fdea..7cfc81d 100644
--- a/packages/client/src/components/hermes/settings/MemorySettings.vue
+++ b/packages/client/src/components/hermes/settings/MemorySettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NSwitch, NInputNumber } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -41,25 +40,25 @@ function debouncedSave(key: string, value: any) {
 <template>
   <section class="settings-section">
     <SettingRow :label="t('settings.memory.enabled')" :hint="t('settings.memory.enabledHint')">
-      <NSwitch :value="settingsStore.memory.memory_enabled" @update:value="v => save({ memory_enabled: v })" />
+      <a-switch :model-value="settingsStore.memory.memory_enabled" @update:model-value="v => save({ memory_enabled: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.memory.userProfile')" :hint="t('settings.memory.userProfileHint')">
-      <NSwitch :value="settingsStore.memory.user_profile_enabled" @update:value="v => save({ user_profile_enabled: v })" />
+      <a-switch :model-value="settingsStore.memory.user_profile_enabled" @update:model-value="v => save({ user_profile_enabled: v })" />
     </SettingRow>
     <SettingRow :label="t('settings.memory.charLimit')" :hint="t('settings.memory.charLimitHint')">
-      <NInputNumber
-        :value="settingsStore.memory.memory_char_limit"
+      <a-input-number
+        :model-value="settingsStore.memory.memory_char_limit"
         :min="100" :max="10000" :step="100"
         size="small" class="input-sm"
-        @update:value="v => v != null && debouncedSave('memory_char_limit', v)"
+        @update:model-value="v => v != null && debouncedSave('memory_char_limit', v)"
       />
     </SettingRow>
     <SettingRow :label="t('settings.memory.userCharLimit')" :hint="t('settings.memory.userCharLimitHint')">
-      <NInputNumber
-        :value="settingsStore.memory.user_char_limit"
+      <a-input-number
+        :model-value="settingsStore.memory.user_char_limit"
         :min="100" :max="10000" :step="100"
         size="small" class="input-sm"
-        @update:value="v => v != null && debouncedSave('user_char_limit', v)"
+        @update:model-value="v => v != null && debouncedSave('user_char_limit', v)"
       />
     </SettingRow>
   </section>
diff --git a/packages/client/src/components/hermes/settings/ModelSettings.vue b/packages/client/src/components/hermes/settings/ModelSettings.vue
index 8c71c27..693d1ce 100644
--- a/packages/client/src/components/hermes/settings/ModelSettings.vue
+++ b/packages/client/src/components/hermes/settings/ModelSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { NInput, NButton, NSpin, NEmpty } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useModelsStore } from '@/stores/hermes/models'
 import { updateProvider } from '@/api/hermes/system'
@@ -67,9 +66,9 @@ async function handleSaveCustom(providerKey: string) {
 
 <template>
   <section class="settings-section">
-    <NSpin :show="modelsStore.loading">
+    <a-spin :loading="modelsStore.loading">
       <div v-if="modelsStore.providers.length === 0" class="empty-hint">
-        <NEmpty :description="t('settings.models.noProviders')" />
+        <a-empty :description="t('settings.models.noProviders')" />
       </div>
 
       <div v-for="g in modelsStore.providers" :key="g.provider" class="provider-section">
@@ -83,48 +82,44 @@ async function handleSaveCustom(providerKey: string) {
         <!-- Built-in provider: only API key -->
         <div v-if="!isCustom(g.provider)" class="provider-fields">
           <div class="field-row">
-            <NInput
-              :value="getEditKey(g.provider)"
-              type="password"
-              show-password-on="click"
+            <a-input-password
+              :model-value="getEditKey(g.provider)"
               :placeholder="t('settings.models.apiKeyPlaceholder')"
               autocomplete="off"
-              @update:value="v => editKeys[g.provider] = v"
+              @update:model-value="(v: string) => editKeys[g.provider] = v"
             />
-            <NButton
+            <a-button
               type="primary"
               size="small"
               :loading="savingKey === g.provider"
               @click="handleSaveApiKey(g.provider)"
             >
               {{ t('settings.models.save') }}
-            </NButton>
+            </a-button>
           </div>
         </div>
 
         <!-- Custom provider: API key -->
         <div v-else class="provider-fields">
           <div class="field-row">
-            <NInput
-              :value="getEditKey(g.provider)"
-              type="password"
-              show-password-on="click"
+            <a-input-password
+              :model-value="getEditKey(g.provider)"
               :placeholder="t('settings.models.apiKeyPlaceholder')"
               autocomplete="off"
-              @update:value="v => editKeys[g.provider] = v"
+              @update:model-value="(v: string) => editKeys[g.provider] = v"
             />
-            <NButton
+            <a-button
               type="primary"
               size="small"
               :loading="savingKey === g.provider"
               @click="handleSaveCustom(g.provider)"
             >
               {{ t('settings.models.save') }}
-            </NButton>
+            </a-button>
           </div>
         </div>
       </div>
-    </NSpin>
+    </a-spin>
   </section>
 </template>
 
@@ -189,7 +184,7 @@ async function handleSaveCustom(providerKey: string) {
   align-items: center;
   gap: 10px;
 
-  .n-input {
+  :deep(.arco-input-wrapper) {
     flex: 1;
   }
 }
diff --git a/packages/client/src/components/hermes/settings/PlatformCard.vue b/packages/client/src/components/hermes/settings/PlatformCard.vue
index bbbdf83..7d64a99 100644
--- a/packages/client/src/components/hermes/settings/PlatformCard.vue
+++ b/packages/client/src/components/hermes/settings/PlatformCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { NTag, NAlert } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
@@ -44,16 +43,16 @@ const configured = computed(() => {
       <div class="platform-info">
         <span class="platform-icon" v-html="icon" />
         <span class="platform-name">{{ name }}</span>
-        <NTag :type="configured ? 'success' : 'default'" size="small" round>
+        <a-tag :color="configured ? 'green' : 'gray'" size="small">
           {{ configured ? t('common.configured') : t('common.notConfigured') }}
-        </NTag>
+        </a-tag>
       </div>
       <span class="expand-icon" :class="{ expanded }">&#9662;</span>
     </div>
     <div v-if="expanded" class="platform-card-body">
-      <NAlert v-if="exclusive" type="warning" :show-icon="true" class="exclusive-alert">
+      <a-alert v-if="exclusive" type="warning" :show-icon="true" class="exclusive-alert">
         {{ t('platform.exclusiveTokenWarning') }}
-      </NAlert>
+      </a-alert>
       <slot />
     </div>
   </div>
diff --git a/packages/client/src/components/hermes/settings/PlatformSettings.vue b/packages/client/src/components/hermes/settings/PlatformSettings.vue
index 4369209..39f9a22 100644
--- a/packages/client/src/components/hermes/settings/PlatformSettings.vue
+++ b/packages/client/src/components/hermes/settings/PlatformSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, reactive, onUnmounted, watch } from 'vue'
-import { NSwitch, NInput, NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -267,198 +266,198 @@ watch(
       <!-- Telegram -->
       <template v-if="p.key === 'telegram'">
         <SettingRow :label="t('platform.botToken')" :hint="t('platform.botTokenHint')">
-          <NInput :value="credentialDraft('telegram').token || ''" :loading="isSavingPlatform('telegram')" clearable size="small" class="input-lg" placeholder="123456:ABC-DEF..." @update:value="v => setCredentialDraft('telegram', { token: v })" />
+          <a-input :model-value="credentialDraft('telegram').token || ''" allow-clear size="small" class="input-lg" placeholder="123456:ABC-DEF..." @update:model-value="v => setCredentialDraft('telegram', { token: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.proxyUrl')" :hint="t('platform.proxyUrlHint')">
-          <NInput :value="credentialDraft('telegram').proxy || ''" :loading="isSavingPlatform('telegram')" clearable size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" @update:value="v => setCredentialDraft('telegram', { proxy: v })" />
+          <a-input :model-value="credentialDraft('telegram').proxy || ''" allow-clear size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" @update:model-value="v => setCredentialDraft('telegram', { proxy: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionGroup')">
-          <NSwitch :value="configDraft('telegram').require_mention" :loading="isSavingPlatform('telegram')" @update:value="v => setConfigDraft('telegram', { require_mention: v })" />
+          <a-switch :model-value="configDraft('telegram').require_mention" :loading="isSavingPlatform('telegram')" @update:model-value="v => setConfigDraft('telegram', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.reactions')" :hint="t('platform.reactionsHint')">
-          <NSwitch :value="configDraft('telegram').reactions" :loading="isSavingPlatform('telegram')" @update:value="v => setConfigDraft('telegram', { reactions: v })" />
+          <a-switch :model-value="configDraft('telegram').reactions" :loading="isSavingPlatform('telegram')" @update:model-value="v => setConfigDraft('telegram', { reactions: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseChats')" :hint="t('platform.freeResponseChatsHint')">
-          <NInput :value="configDraft('telegram').free_response_chats || ''" :loading="isSavingPlatform('telegram')" size="small" placeholder="chat_id1,chat_id2" @update:value="v => setConfigDraft('telegram', { free_response_chats: v })" />
+          <a-input :model-value="configDraft('telegram').free_response_chats || ''" size="small" placeholder="chat_id1,chat_id2" @update:model-value="v => setConfigDraft('telegram', { free_response_chats: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.mentionPatterns')" :hint="t('platform.mentionPatternsHint')">
-          <NInput :value="(configDraft('telegram').mention_patterns || []).join(', ')" :loading="isSavingPlatform('telegram')" size="small" placeholder="pattern1, pattern2" @update:value="v => setConfigDraft('telegram', { mention_patterns: v ? v.split(',').map(s => s.trim()) : [] })" />
+          <a-input :model-value="(configDraft('telegram').mention_patterns || []).join(', ')" size="small" placeholder="pattern1, pattern2" @update:model-value="v => setConfigDraft('telegram', { mention_patterns: v ? v.split(',').map(s => s.trim()) : [] })" />
         </SettingRow>
       </template>
 
       <!-- Discord -->
       <template v-if="p.key === 'discord'">
         <SettingRow :label="t('platform.botToken')" :hint="t('platform.botTokenHint')">
-          <NInput :value="credentialDraft('discord').token || ''" :loading="isSavingPlatform('discord')" clearable size="small" class="input-lg" placeholder="Bot token..." @update:value="v => setCredentialDraft('discord', { token: v })" />
+          <a-input :model-value="credentialDraft('discord').token || ''" allow-clear size="small" class="input-lg" placeholder="Bot token..." @update:model-value="v => setCredentialDraft('discord', { token: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.proxyUrl')" :hint="t('platform.proxyUrlHint')">
-          <NInput :value="credentialDraft('discord').proxy || ''" :loading="isSavingPlatform('discord')" clearable size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" @update:value="v => setCredentialDraft('discord', { proxy: v })" />
+          <a-input :model-value="credentialDraft('discord').proxy || ''" allow-clear size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" @update:model-value="v => setCredentialDraft('discord', { proxy: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionChannel')">
-          <NSwitch :value="configDraft('discord').require_mention" :loading="isSavingPlatform('discord')" @update:value="v => setConfigDraft('discord', { require_mention: v })" />
+          <a-switch :model-value="configDraft('discord').require_mention" :loading="isSavingPlatform('discord')" @update:model-value="v => setConfigDraft('discord', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.autoThread')" :hint="t('platform.autoThreadHint')">
-          <NSwitch :value="configDraft('discord').auto_thread" :loading="isSavingPlatform('discord')" @update:value="v => setConfigDraft('discord', { auto_thread: v })" />
+          <a-switch :model-value="configDraft('discord').auto_thread" :loading="isSavingPlatform('discord')" @update:model-value="v => setConfigDraft('discord', { auto_thread: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.reactions')" :hint="t('platform.reactionsHint')">
-          <NSwitch :value="configDraft('discord').reactions" :loading="isSavingPlatform('discord')" @update:value="v => setConfigDraft('discord', { reactions: v })" />
+          <a-switch :model-value="configDraft('discord').reactions" :loading="isSavingPlatform('discord')" @update:model-value="v => setConfigDraft('discord', { reactions: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseChannels')" :hint="t('platform.freeResponseChannelsHint')">
-          <NInput :value="configDraft('discord').free_response_channels || ''" :loading="isSavingPlatform('discord')" size="small" placeholder="channel_id1,channel_id2" @update:value="v => setConfigDraft('discord', { free_response_channels: v })" />
+          <a-input :model-value="configDraft('discord').free_response_channels || ''" size="small" placeholder="channel_id1,channel_id2" @update:model-value="v => setConfigDraft('discord', { free_response_channels: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.allowedChannels')" :hint="t('platform.allowedChannelsHint')">
-          <NInput :value="configDraft('discord').allowed_channels || ''" :loading="isSavingPlatform('discord')" size="small" placeholder="channel_id1,channel_id2" @update:value="v => setConfigDraft('discord', { allowed_channels: v })" />
+          <a-input :model-value="configDraft('discord').allowed_channels || ''" size="small" placeholder="channel_id1,channel_id2" @update:model-value="v => setConfigDraft('discord', { allowed_channels: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.ignoredChannels')" :hint="t('platform.ignoredChannelsHint')">
-          <NInput :value="configDraft('discord').ignored_channels || ''" :loading="isSavingPlatform('discord')" size="small" placeholder="channel_id1,channel_id2" @update:value="v => setConfigDraft('discord', { ignored_channels: v })" />
+          <a-input :model-value="configDraft('discord').ignored_channels || ''" size="small" placeholder="channel_id1,channel_id2" @update:model-value="v => setConfigDraft('discord', { ignored_channels: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.noThreadChannels')" :hint="t('platform.noThreadChannelsHint')">
-          <NInput :value="configDraft('discord').no_thread_channels || ''" :loading="isSavingPlatform('discord')" size="small" placeholder="channel_id1,channel_id2" @update:value="v => setConfigDraft('discord', { no_thread_channels: v })" />
+          <a-input :model-value="configDraft('discord').no_thread_channels || ''" size="small" placeholder="channel_id1,channel_id2" @update:model-value="v => setConfigDraft('discord', { no_thread_channels: v })" />
         </SettingRow>
       </template>
 
       <!-- Slack -->
       <template v-if="p.key === 'slack'">
         <SettingRow :label="t('platform.botToken')" :hint="t('platform.botTokenHint')">
-          <NInput :value="credentialDraft('slack').token || ''" :loading="isSavingPlatform('slack')" clearable size="small" class="input-lg" placeholder="xoxb-..." @update:value="v => setCredentialDraft('slack', { token: v })" />
+          <a-input :model-value="credentialDraft('slack').token || ''" allow-clear size="small" class="input-lg" placeholder="xoxb-..." @update:model-value="v => setCredentialDraft('slack', { token: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionChannel')">
-          <NSwitch :value="configDraft('slack').require_mention" :loading="isSavingPlatform('slack')" @update:value="v => setConfigDraft('slack', { require_mention: v })" />
+          <a-switch :model-value="configDraft('slack').require_mention" :loading="isSavingPlatform('slack')" @update:model-value="v => setConfigDraft('slack', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.allowBots')" :hint="t('platform.allowBotsHint')">
-          <NSwitch :value="configDraft('slack').allow_bots" :loading="isSavingPlatform('slack')" @update:value="v => setConfigDraft('slack', { allow_bots: v })" />
+          <a-switch :model-value="configDraft('slack').allow_bots" :loading="isSavingPlatform('slack')" @update:model-value="v => setConfigDraft('slack', { allow_bots: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseChannels')" :hint="t('platform.freeResponseChannelsHint')">
-          <NInput :value="configDraft('slack').free_response_channels || ''" :loading="isSavingPlatform('slack')" size="small" placeholder="channel_id1,channel_id2" @update:value="v => setConfigDraft('slack', { free_response_channels: v })" />
+          <a-input :model-value="configDraft('slack').free_response_channels || ''" size="small" placeholder="channel_id1,channel_id2" @update:model-value="v => setConfigDraft('slack', { free_response_channels: v })" />
         </SettingRow>
       </template>
 
       <!-- WhatsApp -->
       <template v-if="p.key === 'whatsapp'">
         <SettingRow :label="t('platform.waEnabled')" :hint="t('platform.waEnabledHint')">
-          <NSwitch :value="credentialDraft('whatsapp').enabled" :loading="isSavingPlatform('whatsapp')" @update:value="v => setCredentialDraft('whatsapp', { enabled: v })" />
+          <a-switch :model-value="credentialDraft('whatsapp').enabled" :loading="isSavingPlatform('whatsapp')" @update:model-value="v => setCredentialDraft('whatsapp', { enabled: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionGroup')">
-          <NSwitch :value="configDraft('whatsapp').require_mention" :loading="isSavingPlatform('whatsapp')" @update:value="v => setConfigDraft('whatsapp', { require_mention: v })" />
+          <a-switch :model-value="configDraft('whatsapp').require_mention" :loading="isSavingPlatform('whatsapp')" @update:model-value="v => setConfigDraft('whatsapp', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseChats')" :hint="t('platform.freeResponseChatsHint')">
-          <NInput :value="configDraft('whatsapp').free_response_chats || ''" :loading="isSavingPlatform('whatsapp')" size="small" placeholder="chat_id1,chat_id2" @update:value="v => setConfigDraft('whatsapp', { free_response_chats: v })" />
+          <a-input :model-value="configDraft('whatsapp').free_response_chats || ''" size="small" placeholder="chat_id1,chat_id2" @update:model-value="v => setConfigDraft('whatsapp', { free_response_chats: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.mentionPatterns')" :hint="t('platform.mentionPatternsHint')">
-          <NInput :value="(configDraft('whatsapp').mention_patterns || []).join(', ')" :loading="isSavingPlatform('whatsapp')" size="small" placeholder="pattern1, pattern2" @update:value="v => setConfigDraft('whatsapp', { mention_patterns: v ? v.split(',').map(s => s.trim()) : [] })" />
+          <a-input :model-value="(configDraft('whatsapp').mention_patterns || []).join(', ')" size="small" placeholder="pattern1, pattern2" @update:model-value="v => setConfigDraft('whatsapp', { mention_patterns: v ? v.split(',').map(s => s.trim()) : [] })" />
         </SettingRow>
       </template>
 
       <!-- Matrix -->
       <template v-if="p.key === 'matrix'">
         <SettingRow :label="t('platform.accessToken')" :hint="t('platform.accessTokenHint')">
-          <NInput :value="credentialDraft('matrix').token || ''" :loading="isSavingPlatform('matrix')" clearable size="small" class="input-lg" placeholder="syt_..." @update:value="v => setCredentialDraft('matrix', { token: v })" />
+          <a-input :model-value="credentialDraft('matrix').token || ''" allow-clear size="small" class="input-lg" placeholder="syt_..." @update:model-value="v => setCredentialDraft('matrix', { token: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.matrixUserId')" :hint="t('platform.matrixUserIdHint')">
-          <NInput :value="credentialDraft('matrix').extra?.user_id || ''" :loading="isSavingPlatform('matrix')" clearable size="small" class="input-lg" placeholder="@hermes:example.org" @update:value="v => setCredentialDraft('matrix', { extra: { ...credentialDraft('matrix').extra, user_id: v } })" />
+          <a-input :model-value="credentialDraft('matrix').extra?.user_id || ''" allow-clear size="small" class="input-lg" placeholder="@hermes:example.org" @update:model-value="v => setCredentialDraft('matrix', { extra: { ...credentialDraft('matrix').extra, user_id: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.matrixPassword')" :hint="t('platform.matrixPasswordHint')">
-          <NInput :value="credentialDraft('matrix').extra?.password || ''" :loading="isSavingPlatform('matrix')" type="password" show-password-on="click" clearable size="small" class="input-lg" placeholder="Matrix password" @update:value="v => setCredentialDraft('matrix', { extra: { ...credentialDraft('matrix').extra, password: v } })" />
+          <a-input-password :model-value="credentialDraft('matrix').extra?.password || ''" allow-clear size="small" class="input-lg" placeholder="Matrix password" @update:model-value="(v: string) => setCredentialDraft('matrix', { extra: { ...credentialDraft('matrix').extra, password: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.homeserver')" :hint="t('platform.homeserverHint')">
-          <NInput :value="credentialDraft('matrix').extra?.homeserver || ''" :loading="isSavingPlatform('matrix')" clearable size="small" class="input-lg" placeholder="https://matrix.org" @update:value="v => setCredentialDraft('matrix', { extra: { ...credentialDraft('matrix').extra, homeserver: v } })" />
+          <a-input :model-value="credentialDraft('matrix').extra?.homeserver || ''" allow-clear size="small" class="input-lg" placeholder="https://matrix.org" @update:model-value="v => setCredentialDraft('matrix', { extra: { ...credentialDraft('matrix').extra, homeserver: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.proxyUrl')" :hint="t('platform.proxyUrlHint')">
-          <NInput :value="credentialDraft('matrix').proxy || ''" :loading="isSavingPlatform('matrix')" clearable size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" @update:value="v => setCredentialDraft('matrix', { proxy: v })" />
+          <a-input :model-value="credentialDraft('matrix').proxy || ''" allow-clear size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" @update:model-value="v => setCredentialDraft('matrix', { proxy: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionRoom')">
-          <NSwitch :value="configDraft('matrix').require_mention" :loading="isSavingPlatform('matrix')" @update:value="v => setConfigDraft('matrix', { require_mention: v })" />
+          <a-switch :model-value="configDraft('matrix').require_mention" :loading="isSavingPlatform('matrix')" @update:model-value="v => setConfigDraft('matrix', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.autoThread')" :hint="t('platform.autoThreadHintRoom')">
-          <NSwitch :value="configDraft('matrix').auto_thread" :loading="isSavingPlatform('matrix')" @update:value="v => setConfigDraft('matrix', { auto_thread: v })" />
+          <a-switch :model-value="configDraft('matrix').auto_thread" :loading="isSavingPlatform('matrix')" @update:model-value="v => setConfigDraft('matrix', { auto_thread: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.dmMentionThreads')" :hint="t('platform.dmMentionThreadsHint')">
-          <NSwitch :value="configDraft('matrix').dm_mention_threads" :loading="isSavingPlatform('matrix')" @update:value="v => setConfigDraft('matrix', { dm_mention_threads: v })" />
+          <a-switch :model-value="configDraft('matrix').dm_mention_threads" :loading="isSavingPlatform('matrix')" @update:model-value="v => setConfigDraft('matrix', { dm_mention_threads: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseRooms')" :hint="t('platform.freeResponseRoomsHint')">
-          <NInput :value="configDraft('matrix').free_response_rooms || ''" :loading="isSavingPlatform('matrix')" size="small" placeholder="room_id1,room_id2" @update:value="v => setConfigDraft('matrix', { free_response_rooms: v })" />
+          <a-input :model-value="configDraft('matrix').free_response_rooms || ''" size="small" placeholder="room_id1,room_id2" @update:model-value="v => setConfigDraft('matrix', { free_response_rooms: v })" />
         </SettingRow>
       </template>
 
       <!-- Feishu -->
       <template v-if="p.key === 'feishu'">
         <SettingRow :label="t('platform.appId')" :hint="t('platform.appIdHint')">
-          <NInput :value="credentialDraft('feishu').extra?.app_id || ''" :loading="isSavingPlatform('feishu')" clearable size="small" class="input-lg" placeholder="cli_..." @update:value="v => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, app_id: v } })" />
+          <a-input :model-value="credentialDraft('feishu').extra?.app_id || ''" allow-clear size="small" class="input-lg" placeholder="cli_..." @update:model-value="v => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, app_id: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.appSecret')" :hint="t('platform.appSecretHint')">
-          <NInput :value="credentialDraft('feishu').extra?.app_secret || ''" :loading="isSavingPlatform('feishu')" type="password" show-password-on="click" clearable size="small" class="input-lg" placeholder="App Secret" @update:value="v => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, app_secret: v } })" />
+          <a-input-password :model-value="credentialDraft('feishu').extra?.app_secret || ''" allow-clear size="small" class="input-lg" placeholder="App Secret" @update:model-value="(v: string) => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, app_secret: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.encryptKey')" :hint="t('platform.encryptKeyHint')">
-          <NInput :value="credentialDraft('feishu').extra?.encrypt_key || ''" :loading="isSavingPlatform('feishu')" type="password" show-password-on="click" clearable size="small" class="input-lg" placeholder="Encrypt Key" @update:value="v => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, encrypt_key: v } })" />
+          <a-input-password :model-value="credentialDraft('feishu').extra?.encrypt_key || ''" allow-clear size="small" class="input-lg" placeholder="Encrypt Key" @update:model-value="(v: string) => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, encrypt_key: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.verificationToken')" :hint="t('platform.verificationTokenHint')">
-          <NInput :value="credentialDraft('feishu').extra?.verification_token || ''" :loading="isSavingPlatform('feishu')" type="password" show-password-on="click" clearable size="small" class="input-lg" placeholder="Verification Token" @update:value="v => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, verification_token: v } })" />
+          <a-input-password :model-value="credentialDraft('feishu').extra?.verification_token || ''" allow-clear size="small" class="input-lg" placeholder="Verification Token" @update:model-value="(v: string) => setCredentialDraft('feishu', { extra: { ...credentialDraft('feishu').extra, verification_token: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionGroup')">
-          <NSwitch :value="configDraft('feishu').require_mention" :loading="isSavingPlatform('feishu')" @update:value="v => setConfigDraft('feishu', { require_mention: v })" />
+          <a-switch :model-value="configDraft('feishu').require_mention" :loading="isSavingPlatform('feishu')" @update:model-value="v => setConfigDraft('feishu', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseChats')" :hint="t('platform.freeResponseChatsHint')">
-          <NInput :value="configDraft('feishu').free_response_chats || ''" :loading="isSavingPlatform('feishu')" size="small" placeholder="chat_id1,chat_id2" @update:value="v => setConfigDraft('feishu', { free_response_chats: v })" />
+          <a-input :model-value="configDraft('feishu').free_response_chats || ''" size="small" placeholder="chat_id1,chat_id2" @update:model-value="v => setConfigDraft('feishu', { free_response_chats: v })" />
         </SettingRow>
       </template>
 
       <!-- DingTalk -->
       <template v-if="p.key === 'dingtalk'">
         <SettingRow :label="t('platform.clientId')" :hint="t('platform.clientIdHint')">
-          <NInput :value="credentialDraft('dingtalk').extra?.client_id || ''" :loading="isSavingPlatform('dingtalk')" clearable size="small" class="input-lg" placeholder="Client ID" @update:value="v => setCredentialDraft('dingtalk', { extra: { ...credentialDraft('dingtalk').extra, client_id: v } })" />
+          <a-input :model-value="credentialDraft('dingtalk').extra?.client_id || ''" allow-clear size="small" class="input-lg" placeholder="Client ID" @update:model-value="v => setCredentialDraft('dingtalk', { extra: { ...credentialDraft('dingtalk').extra, client_id: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.clientSecret')" :hint="t('platform.clientSecretHint')">
-          <NInput :value="credentialDraft('dingtalk').extra?.client_secret || ''" :loading="isSavingPlatform('dingtalk')" clearable size="small" class="input-lg" placeholder="Client Secret" @update:value="v => setCredentialDraft('dingtalk', { extra: { ...credentialDraft('dingtalk').extra, client_secret: v } })" />
+          <a-input :model-value="credentialDraft('dingtalk').extra?.client_secret || ''" allow-clear size="small" class="input-lg" placeholder="Client Secret" @update:model-value="v => setCredentialDraft('dingtalk', { extra: { ...credentialDraft('dingtalk').extra, client_secret: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.cardTemplateId')" :hint="t('platform.cardTemplateIdHint')">
-          <NInput :value="credentialDraft('dingtalk').extra?.card_template_id || ''" :loading="isSavingPlatform('dingtalk')" clearable size="small" class="input-lg" placeholder="AI Card Template ID" @update:value="v => setCredentialDraft('dingtalk', { extra: { ...credentialDraft('dingtalk').extra, card_template_id: v } })" />
+          <a-input :model-value="credentialDraft('dingtalk').extra?.card_template_id || ''" allow-clear size="small" class="input-lg" placeholder="AI Card Template ID" @update:model-value="v => setCredentialDraft('dingtalk', { extra: { ...credentialDraft('dingtalk').extra, card_template_id: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.allowAllUsers')" :hint="t('platform.allowAllUsersHint')">
-          <NSwitch :value="boolValue(credentialDraft('dingtalk').allow_all_users)" :loading="isSavingPlatform('dingtalk')" @update:value="v => setCredentialDraft('dingtalk', { allow_all_users: v })" />
+          <a-switch :model-value="boolValue(credentialDraft('dingtalk').allow_all_users)" :loading="isSavingPlatform('dingtalk')" @update:model-value="v => setCredentialDraft('dingtalk', { allow_all_users: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.allowedUsers')" :hint="t('platform.allowedUsersHint')">
-          <NInput :value="credentialDraft('dingtalk').allowed_users || ''" :loading="isSavingPlatform('dingtalk')" clearable size="small" class="input-lg" placeholder="user_id1,user_id2" @update:value="v => setCredentialDraft('dingtalk', { allowed_users: v })" />
+          <a-input :model-value="credentialDraft('dingtalk').allowed_users || ''" allow-clear size="small" class="input-lg" placeholder="user_id1,user_id2" @update:model-value="v => setCredentialDraft('dingtalk', { allowed_users: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.requireMention')" :hint="t('platform.requireMentionGroup')">
-          <NSwitch :value="configDraft('dingtalk').require_mention" :loading="isSavingPlatform('dingtalk')" @update:value="v => setConfigDraft('dingtalk', { require_mention: v })" />
+          <a-switch :model-value="configDraft('dingtalk').require_mention" :loading="isSavingPlatform('dingtalk')" @update:model-value="v => setConfigDraft('dingtalk', { require_mention: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.freeResponseChats')" :hint="t('platform.freeResponseChatsHint')">
-          <NInput :value="configDraft('dingtalk').free_response_chats || ''" :loading="isSavingPlatform('dingtalk')" size="small" placeholder="chat_id1,chat_id2" @update:value="v => setConfigDraft('dingtalk', { free_response_chats: v })" />
+          <a-input :model-value="configDraft('dingtalk').free_response_chats || ''" size="small" placeholder="chat_id1,chat_id2" @update:model-value="v => setConfigDraft('dingtalk', { free_response_chats: v })" />
         </SettingRow>
       </template>
 
       <!-- QQBot -->
       <template v-if="p.key === 'qqbot'">
         <SettingRow :label="t('platform.qqAppId')" :hint="t('platform.qqAppIdHint')">
-          <NInput :value="credentialDraft('qqbot').extra?.app_id || ''" :loading="isSavingPlatform('qqbot')" clearable size="small" class="input-lg" placeholder="App ID" @update:value="v => setCredentialDraft('qqbot', { extra: { ...credentialDraft('qqbot').extra, app_id: v } })" />
+          <a-input :model-value="credentialDraft('qqbot').extra?.app_id || ''" allow-clear size="small" class="input-lg" placeholder="App ID" @update:model-value="v => setCredentialDraft('qqbot', { extra: { ...credentialDraft('qqbot').extra, app_id: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.qqAppSecret')" :hint="t('platform.qqAppSecretHint')">
-          <NInput :value="credentialDraft('qqbot').extra?.client_secret || ''" :loading="isSavingPlatform('qqbot')" clearable size="small" class="input-lg" placeholder="App Secret" @update:value="v => setCredentialDraft('qqbot', { extra: { ...credentialDraft('qqbot').extra, client_secret: v } })" />
+          <a-input :model-value="credentialDraft('qqbot').extra?.client_secret || ''" allow-clear size="small" class="input-lg" placeholder="App Secret" @update:model-value="v => setCredentialDraft('qqbot', { extra: { ...credentialDraft('qqbot').extra, client_secret: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.allowedUsers')" :hint="t('platform.allowedUsersHint')">
-          <NInput :value="credentialDraft('qqbot').allowed_users || ''" :loading="isSavingPlatform('qqbot')" clearable size="small" class="input-lg" placeholder="openid1,openid2" @update:value="v => setCredentialDraft('qqbot', { allowed_users: v })" />
+          <a-input :model-value="credentialDraft('qqbot').allowed_users || ''" allow-clear size="small" class="input-lg" placeholder="openid1,openid2" @update:model-value="v => setCredentialDraft('qqbot', { allowed_users: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.allowAllUsers')" :hint="t('platform.allowAllUsersHint')">
-          <NSwitch :value="boolValue(credentialDraft('qqbot').allow_all_users)" :loading="isSavingPlatform('qqbot')" @update:value="v => setCredentialDraft('qqbot', { allow_all_users: v })" />
+          <a-switch :model-value="boolValue(credentialDraft('qqbot').allow_all_users)" :loading="isSavingPlatform('qqbot')" @update:model-value="v => setCredentialDraft('qqbot', { allow_all_users: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.qqMarkdown')" :hint="t('platform.qqMarkdownHint')">
-          <NSwitch :value="configDraft('qqbot').extra?.markdown_support ?? true" :loading="isSavingPlatform('qqbot')" @update:value="v => setConfigDraft('qqbot', { extra: { ...configDraft('qqbot').extra, markdown_support: v } })" />
+          <a-switch :model-value="configDraft('qqbot').extra?.markdown_support ?? true" :loading="isSavingPlatform('qqbot')" @update:model-value="v => setConfigDraft('qqbot', { extra: { ...configDraft('qqbot').extra, markdown_support: v } })" />
         </SettingRow>
       </template>
 
       <!-- Weixin -->
       <template v-if="p.key === 'weixin'">
         <div class="weixin-qr-section">
-          <NButton
+          <a-button
             v-if="wxQrStatus === 'idle' || wxQrStatus === 'error' || wxQrStatus === 'expired' || wxQrStatus === 'confirmed'"
             type="primary"
             size="small"
             @click="startWeixinQrLogin"
           >
             {{ wxQrStatus === 'confirmed' ? t('platform.qrRelogin') : t('platform.qrLogin') }}
-          </NButton>
+          </a-button>
           <div v-if="wxQrStatus === 'loading'" class="weixin-qr-loading">
-            <NSpin size="small" />
+            <a-spin :size="16" />
             <span>{{ t('platform.qrFetching') }}</span>
           </div>
           <div v-if="wxQrStatus === 'waiting' || wxQrStatus === 'scaned'" class="weixin-qr-hint">
@@ -466,25 +465,25 @@ watch(
           </div>
         </div>
         <SettingRow :label="t('platform.weixinToken')" :hint="t('platform.weixinTokenHint')">
-          <NInput :value="credentialDraft('weixin').token || ''" :loading="isSavingPlatform('weixin')" clearable size="small" class="input-lg" placeholder="Token" @update:value="v => setCredentialDraft('weixin', { token: v })" />
+          <a-input :model-value="credentialDraft('weixin').token || ''" allow-clear size="small" class="input-lg" placeholder="Token" @update:model-value="v => setCredentialDraft('weixin', { token: v })" />
         </SettingRow>
         <SettingRow :label="t('platform.accountId')" :hint="t('platform.accountIdHint')">
-          <NInput :value="credentialDraft('weixin').extra?.account_id || ''" :loading="isSavingPlatform('weixin')" clearable size="small" class="input-lg" placeholder="Account ID" @update:value="v => setCredentialDraft('weixin', { extra: { ...credentialDraft('weixin').extra, account_id: v } })" />
+          <a-input :model-value="credentialDraft('weixin').extra?.account_id || ''" allow-clear size="small" class="input-lg" placeholder="Account ID" @update:model-value="v => setCredentialDraft('weixin', { extra: { ...credentialDraft('weixin').extra, account_id: v } })" />
         </SettingRow>
       </template>
 
       <!-- WeCom -->
       <template v-if="p.key === 'wecom'">
         <SettingRow :label="t('platform.botId')" :hint="t('platform.botIdHint')">
-          <NInput :value="credentialDraft('wecom').extra?.bot_id || ''" :loading="isSavingPlatform('wecom')" clearable size="small" class="input-lg" placeholder="Bot ID" @update:value="v => setCredentialDraft('wecom', { extra: { ...credentialDraft('wecom').extra, bot_id: v } })" />
+          <a-input :model-value="credentialDraft('wecom').extra?.bot_id || ''" allow-clear size="small" class="input-lg" placeholder="Bot ID" @update:model-value="v => setCredentialDraft('wecom', { extra: { ...credentialDraft('wecom').extra, bot_id: v } })" />
         </SettingRow>
         <SettingRow :label="t('platform.appSecret')" :hint="t('platform.wecomSecretHint')">
-          <NInput :value="credentialDraft('wecom').extra?.secret || ''" :loading="isSavingPlatform('wecom')" clearable size="small" class="input-lg" placeholder="Secret" @update:value="v => setCredentialDraft('wecom', { extra: { ...credentialDraft('wecom').extra, secret: v } })" />
+          <a-input :model-value="credentialDraft('wecom').extra?.secret || ''" allow-clear size="small" class="input-lg" placeholder="Secret" @update:model-value="v => setCredentialDraft('wecom', { extra: { ...credentialDraft('wecom').extra, secret: v } })" />
         </SettingRow>
       </template>
 
       <div class="platform-actions">
-        <NButton
+        <a-button
           type="primary"
           size="small"
           :loading="isSavingPlatform(p.key)"
@@ -492,7 +491,7 @@ watch(
           @click="savePlatform(p.key)"
         >
           {{ t('common.save') }}
-        </NButton>
+        </a-button>
       </div>
     </PlatformCard>
   </section>
diff --git a/packages/client/src/components/hermes/settings/PrivacySettings.vue b/packages/client/src/components/hermes/settings/PrivacySettings.vue
index 95389c7..6e0b2df 100644
--- a/packages/client/src/components/hermes/settings/PrivacySettings.vue
+++ b/packages/client/src/components/hermes/settings/PrivacySettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NSwitch } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -22,7 +21,7 @@ async function save(values: Record<string, any>) {
 <template>
   <section class="settings-section">
     <SettingRow :label="t('settings.privacy.redactPii')" :hint="t('settings.privacy.redactPiiHint')">
-      <NSwitch :value="settingsStore.privacy.redact_pii" @update:value="v => save({ redact_pii: v })" />
+      <a-switch :model-value="settingsStore.privacy.redact_pii" @update:model-value="v => save({ redact_pii: v })" />
     </SettingRow>
   </section>
 </template>
diff --git a/packages/client/src/components/hermes/settings/ProxySettings.vue b/packages/client/src/components/hermes/settings/ProxySettings.vue
index 1a707b6..05d65e4 100644
--- a/packages/client/src/components/hermes/settings/ProxySettings.vue
+++ b/packages/client/src/components/hermes/settings/ProxySettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { reactive, watch } from 'vue'
-import { NButton, NInput } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
@@ -45,25 +44,25 @@ async function save() {
     <p class="section-hint">{{ t('settings.proxy.description') }}</p>
 
     <SettingRow :label="t('settings.proxy.httpsProxy')" :hint="t('settings.proxy.httpsProxyHint')">
-      <NInput v-model:value="draft.HTTPS_PROXY" clearable size="small" class="input-lg" placeholder="http://127.0.0.1:7890" />
+      <a-input v-model="draft.HTTPS_PROXY" allow-clear size="small" class="input-lg" placeholder="http://127.0.0.1:7890" />
     </SettingRow>
 
     <SettingRow :label="t('settings.proxy.httpProxy')" :hint="t('settings.proxy.httpProxyHint')">
-      <NInput v-model:value="draft.HTTP_PROXY" clearable size="small" class="input-lg" placeholder="http://127.0.0.1:7890" />
+      <a-input v-model="draft.HTTP_PROXY" allow-clear size="small" class="input-lg" placeholder="http://127.0.0.1:7890" />
     </SettingRow>
 
     <SettingRow :label="t('settings.proxy.allProxy')" :hint="t('settings.proxy.allProxyHint')">
-      <NInput v-model:value="draft.ALL_PROXY" clearable size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" />
+      <a-input v-model="draft.ALL_PROXY" allow-clear size="small" class="input-lg" placeholder="socks5://127.0.0.1:7890" />
     </SettingRow>
 
     <SettingRow :label="t('settings.proxy.noProxy')" :hint="t('settings.proxy.noProxyHint')">
-      <NInput v-model:value="draft.NO_PROXY" clearable size="small" class="input-lg" placeholder="localhost,127.0.0.1,.local" />
+      <a-input v-model="draft.NO_PROXY" allow-clear size="small" class="input-lg" placeholder="localhost,127.0.0.1,.local" />
     </SettingRow>
 
     <div class="settings-actions">
-      <NButton type="primary" :loading="settingsStore.saving" @click="save">
+      <a-button type="primary" :loading="settingsStore.saving" @click="save">
         {{ t('settings.proxy.save') }}
-      </NButton>
+      </a-button>
     </div>
   </section>
 </template>
diff --git a/packages/client/src/components/hermes/settings/SessionSettings.vue b/packages/client/src/components/hermes/settings/SessionSettings.vue
index acbbd35..75e6e32 100644
--- a/packages/client/src/components/hermes/settings/SessionSettings.vue
+++ b/packages/client/src/components/hermes/settings/SessionSettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NInputNumber, NSelect, NSwitch } from "naive-ui";
 import { useMessage } from "@/composables/useMessage";
 import { useI18n } from "vue-i18n";
 import { useSettingsStore } from "@/stores/hermes/settings";
@@ -15,7 +14,7 @@ const { t } = useI18n();
 const debounceTimers: Record<string, ReturnType<typeof setTimeout>> = {};
 
 function save(values: Record<string, any>) {
-  // NSelect/NSwitch 等一次性操作，直接保存，不需要防抖
+  // 下拉/开关等一次性操作，直接保存，不需要防抖
   settingsStore.updateLocal('session_reset', values)
   settingsStore.saveSection('session_reset', values).then(() => {
     message.success(t("settings.saved"));
@@ -66,32 +65,32 @@ async function toggleWriteApproval(section: "memory" | "skills", value: boolean)
       :label="t('settings.session.requireAuth')"
       :hint="t('settings.session.requireAuthHint')"
     >
-      <NSwitch :value="settingsStore.approvals.mode === 'manual'" @update:value="toggleRequireAuth" />
+      <a-switch :model-value="settingsStore.approvals.mode === 'manual'" @update:model-value="(v) => toggleRequireAuth(v as boolean)" />
     </SettingRow>
     <SettingRow
       :label="t('settings.session.memoryWriteApproval')"
       :hint="t('settings.session.memoryWriteApprovalHint')"
     >
-      <NSwitch
-        :value="settingsStore.memory.write_approval === true"
-        @update:value="(value) => toggleWriteApproval('memory', value)"
+      <a-switch
+        :model-value="settingsStore.memory.write_approval === true"
+        @update:model-value="(value) => toggleWriteApproval('memory', value as boolean)"
       />
     </SettingRow>
     <SettingRow
       :label="t('settings.session.skillsWriteApproval')"
       :hint="t('settings.session.skillsWriteApprovalHint')"
     >
-      <NSwitch
-        :value="settingsStore.skills.write_approval === true"
-        @update:value="(value) => toggleWriteApproval('skills', value)"
+      <a-switch
+        :model-value="settingsStore.skills.write_approval === true"
+        @update:model-value="(value) => toggleWriteApproval('skills', value as boolean)"
       />
     </SettingRow>
     <SettingRow
       :label="t('settings.session.mode')"
       :hint="t('settings.session.modeHint')"
     >
-      <NSelect
-        :value="settingsStore.sessionReset.mode || 'both'"
+      <a-select
+        :model-value="settingsStore.sessionReset.mode || 'both'"
         :options="[
           { label: t('settings.session.modeBoth'), value: 'both' },
           { label: t('settings.session.modeIdle'), value: 'idle' },
@@ -100,44 +99,44 @@ async function toggleWriteApproval(section: "memory" | "skills", value: boolean)
         ]"
         size="small"
         class="input-md"
-        @update:value="(v) => save({ mode: v })"
+        @update:model-value="(v) => save({ mode: v })"
       />
     </SettingRow>
     <SettingRow
       :label="t('settings.session.idleMinutes')"
       :hint="t('settings.session.idleMinutesHint')"
     >
-      <NInputNumber
-        :value="settingsStore.sessionReset.idle_minutes"
+      <a-input-number
+        :model-value="settingsStore.sessionReset.idle_minutes"
         :min="10"
         :max="10080"
         :step="30"
         size="small"
         class="input-sm"
-        @update:value="(v) => v != null && debouncedSave('idle_minutes', v)"
+        @update:model-value="(v) => v != null && debouncedSave('idle_minutes', v)"
       />
     </SettingRow>
     <SettingRow
       :label="t('settings.session.atHour')"
       :hint="t('settings.session.atHourHint')"
     >
-      <NInputNumber
-        :value="settingsStore.sessionReset.at_hour"
+      <a-input-number
+        :model-value="settingsStore.sessionReset.at_hour"
         :min="0"
         :max="23"
         :step="1"
         size="small"
         class="input-sm"
-        @update:value="(v) => v != null && debouncedSave('at_hour', v)"
+        @update:model-value="(v) => v != null && debouncedSave('at_hour', v)"
       />
     </SettingRow>
     <SettingRow
       :label="t('settings.session.liveMonitorHumanOnly')"
       :hint="t('settings.session.liveMonitorHumanOnlyHint')"
     >
-      <NSwitch
-        :value="sessionBrowserPrefsStore.humanOnly"
-        @update:value="(value) => sessionBrowserPrefsStore.setHumanOnly(value)"
+      <a-switch
+        :model-value="sessionBrowserPrefsStore.humanOnly"
+        @update:model-value="(value) => sessionBrowserPrefsStore.setHumanOnly(value as boolean)"
       />
     </SettingRow>
   </section>
diff --git a/packages/client/src/components/hermes/settings/UserManagementSettings.vue b/packages/client/src/components/hermes/settings/UserManagementSettings.vue
index 1c2abae..9c1bed8 100644
--- a/packages/client/src/components/hermes/settings/UserManagementSettings.vue
+++ b/packages/client/src/components/hermes/settings/UserManagementSettings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, h, onMounted, reactive, ref } from 'vue'
-import { NButton, NDataTable, NForm, NFormItem, NInput, NModal, NPopconfirm, NSelect, NSpace, NTag, type DataTableColumns } from 'naive-ui'
+import { computed, h, onMounted, reactive, ref, resolveComponent } from 'vue'
 import { useMessage } from '@/composables/useMessage'
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
 import { useI18n } from 'vue-i18n'
 import {
   createManagedUser,
@@ -13,6 +13,13 @@ import {
   type UserStatus,
 } from '@/api/auth'
 
+// a-table 的 column.render 里不能用 kebab-case 标签（h('a-tag') 只会生成
+// 同名原生元素，不会解析全局注册的组件），必须走 resolveComponent。
+const Tag = resolveComponent('a-tag')
+const Button = resolveComponent('a-button')
+const Space = resolveComponent('a-space')
+const Popconfirm = resolveComponent('a-popconfirm')
+
 const { t } = useI18n()
 const message = useMessage()
 
@@ -152,66 +159,84 @@ function formatTime(value: number | null): string {
   return new Date(value).toLocaleString()
 }
 
-const columns = computed<DataTableColumns<ManagedUser>>(() => [
+const columns = computed<TableColumnData[]>(() => [
   {
     title: t('users.username'),
-    key: 'username',
+    dataIndex: 'username',
     minWidth: 140,
   },
   {
     title: t('users.role'),
-    key: 'role',
+    dataIndex: 'role',
     width: 130,
-    render: (row) => h(NTag, { size: 'small', type: row.role === 'super_admin' ? 'warning' : 'default' }, {
-      default: () => row.role === 'super_admin' ? t('users.roles.superAdmin') : t('users.roles.admin'),
-    }),
+    render({ record }) {
+      const row = record as ManagedUser
+      return h(Tag, {
+        size: 'small',
+        color: row.role === 'super_admin' ? 'orange' : 'gray',
+      }, { default: () => row.role === 'super_admin' ? t('users.roles.superAdmin') : t('users.roles.admin') })
+    },
   },
   {
     title: t('users.statusLabel'),
-    key: 'status',
+    dataIndex: 'status',
     width: 110,
-    render: (row) => h(NTag, { size: 'small', type: row.status === 'active' ? 'success' : 'error' }, {
-      default: () => row.status === 'active' ? t('users.status.active') : t('users.status.disabled'),
-    }),
+    render({ record }) {
+      const row = record as ManagedUser
+      return h(Tag, {
+        size: 'small',
+        color: row.status === 'active' ? 'green' : 'red',
+      }, { default: () => row.status === 'active' ? t('users.status.active') : t('users.status.disabled') })
+    },
   },
   {
     title: t('users.profiles'),
-    key: 'profiles',
+    dataIndex: 'profiles',
     minWidth: 200,
-    render: (row) => row.role === 'super_admin'
-      ? h('span', { class: 'muted' }, t('users.allProfiles'))
-      : h(NSpace, { size: 4 }, {
-        default: () => row.profiles.length
-          ? row.profiles.map(profile => h(NTag, { size: 'small', bordered: false }, { default: () => profile }))
-          : h('span', { class: 'muted' }, t('users.noProfiles')),
-      }),
+    render({ record }) {
+      const row = record as ManagedUser
+      return row.role === 'super_admin'
+        ? h('span', { class: 'muted' }, t('users.allProfiles'))
+        : h(Space, { size: 4 }, {
+          default: () => row.profiles.length
+            ? row.profiles.map(profile => h(Tag, { size: 'small', bordered: false }, { default: () => profile }))
+            : h('span', { class: 'muted' }, t('users.noProfiles')),
+        })
+    },
   },
   {
     title: t('users.lastLogin'),
-    key: 'last_login_at',
+    dataIndex: 'last_login_at',
     minWidth: 170,
-    render: (row) => formatTime(row.last_login_at),
+    render({ record }) {
+      return formatTime((record as ManagedUser).last_login_at)
+    },
   },
   {
     title: t('common.edit'),
-    key: 'actions',
+    dataIndex: 'actions',
     width: 280,
-    render: (row) => h(NSpace, { size: 8 }, {
-      default: () => [
-        h(NButton, { size: 'small', onClick: () => openEdit(row) }, { default: () => t('common.edit') }),
-        h(NButton, {
-          size: 'small',
-          type: row.status === 'active' ? 'warning' : 'primary',
-          ghost: true,
-          loading: saving.value,
-          onClick: () => setStatus(row, row.status === 'active' ? 'disabled' : 'active'),
-        }, { default: () => row.status === 'active' ? t('users.disable') : t('users.enable') }),
-        h(NPopconfirm, { onPositiveClick: () => removeUser(row) }, {
-          trigger: () => h(NButton, { size: 'small', type: 'error', ghost: true, loading: saving.value }, { default: () => t('common.delete') }),
-          default: () => t('users.deleteConfirm'),
-        }),
-      ],
-    }),
+    render({ record }) {
+      const row = record as ManagedUser
+      return h(Space, { size: 8 }, {
+        default: () => [
+          h(Button, { size: 'small', onClick: () => openEdit(row) }, { default: () => t('common.edit') }),
+          h(Button, {
+            size: 'small',
+            type: row.status === 'active' ? 'outline' : 'primary',
+            status: row.status === 'active' ? 'warning' : 'normal',
+            loading: saving.value,
+            onClick: () => setStatus(row, row.status === 'active' ? 'disabled' : 'active'),
+          }, { default: () => row.status === 'active' ? t('users.disable') : t('users.enable') }),
+          h(Popconfirm, {
+            content: t('users.deleteConfirm'),
+            onOk: () => removeUser(row),
+          }, {
+            default: () => h(Button, { size: 'small', type: 'outline', status: 'danger', loading: saving.value }, { default: () => t('common.delete') }),
+          }),
+        ],
+      })
+    },
   },
 ])
 
@@ -225,47 +250,46 @@ onMounted(loadUsers)
         <h3 class="section-title">{{ t('users.title') }}</h3>
         <p class="section-desc">{{ t('users.description') }}</p>
       </div>
-      <NButton type="primary" @click="openCreate">{{ t('users.create') }}</NButton>
+      <a-button type="primary" @click="openCreate">{{ t('users.create') }}</a-button>
     </div>
 
-    <NDataTable
+    <a-table
       :columns="columns"
       :data="users"
       :loading="loading"
       :bordered="false"
-      :single-line="false"
       size="small"
     />
 
-    <NModal v-model:show="showModal" preset="dialog" :title="editingUser ? t('users.edit') : t('users.create')">
-      <NForm label-placement="top">
-        <NFormItem :label="t('users.username')">
-          <NInput v-model:value="form.username" :placeholder="t('login.usernamePlaceholder')" />
-        </NFormItem>
-        <NFormItem :label="editingUser ? t('users.newPasswordOptional') : t('login.newPassword')">
-          <NInput v-model:value="form.password" type="password" show-password-on="click" :placeholder="t('login.passwordPlaceholder')" />
-        </NFormItem>
-        <NFormItem :label="t('users.role')">
-          <NSelect v-model:value="form.role" :options="roleOptions" />
-        </NFormItem>
-        <NFormItem :label="t('users.statusLabel')">
-          <NSelect v-model:value="form.status" :options="statusOptions" />
-        </NFormItem>
-        <NFormItem v-if="form.role !== 'super_admin'" :label="t('users.profiles')">
-          <NSelect
-            v-model:value="form.profiles"
+    <a-modal v-model:visible="showModal" :title="editingUser ? t('users.edit') : t('users.create')">
+      <a-form :model="form" layout="vertical">
+        <a-form-item :label="t('users.username')">
+          <a-input v-model="form.username" :placeholder="t('login.usernamePlaceholder')" />
+        </a-form-item>
+        <a-form-item :label="editingUser ? t('users.newPasswordOptional') : t('login.newPassword')">
+          <a-input-password v-model="form.password" :placeholder="t('login.passwordPlaceholder')" />
+        </a-form-item>
+        <a-form-item :label="t('users.role')">
+          <a-select v-model="form.role" :options="roleOptions" />
+        </a-form-item>
+        <a-form-item :label="t('users.statusLabel')">
+          <a-select v-model="form.status" :options="statusOptions" />
+        </a-form-item>
+        <a-form-item v-if="form.role !== 'super_admin'" :label="t('users.profiles')">
+          <a-select
+            v-model="form.profiles"
             multiple
-            filterable
+            allow-search
             :options="profileOptions"
             :placeholder="t('users.profilesPlaceholder')"
           />
-        </NFormItem>
-      </NForm>
-      <template #action>
-        <NButton @click="showModal = false">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="saving" @click="submit">{{ t('common.save') }}</NButton>
+        </a-form-item>
+      </a-form>
+      <template #footer>
+        <a-button @click="showModal = false">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="saving" @click="submit">{{ t('common.save') }}</a-button>
       </template>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/settings/VoiceSettings.vue b/packages/client/src/components/hermes/settings/VoiceSettings.vue
index fcefa07..9d2455d 100644
--- a/packages/client/src/components/hermes/settings/VoiceSettings.vue
+++ b/packages/client/src/components/hermes/settings/VoiceSettings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { NButton, NInput, NSelect } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useSpeech, type MimoTtsOptions, type OpenaiTtsOptions } from '@/composables/useSpeech'
@@ -250,24 +249,24 @@ async function handleCardTest(connection: VoiceApiConnection) {
         <div class="section-controls">
           <div class="active-select">
             <span class="active-label">{{ t('settings.voice.activeTtsApi') }}</span>
-            <NSelect
-              :value="voiceApi.activeTtsId.value"
+            <a-select
+              :model-value="voiceApi.activeTtsId.value"
               :options="voiceApi.ttsConnectionOptions.value"
               size="small"
               :aria-label="t('settings.voice.activeTtsApi')"
-              @update:value="handleActiveTtsUpdate"
+              @update:model-value="value => handleActiveTtsUpdate(String(value))"
             />
             <span class="active-summary">{{ activeTtsDescription }}</span>
           </div>
-          <NButton size="small" secondary @click="openAddModal('tts')">
+          <a-button size="small" type="secondary" @click="openAddModal('tts')">
             {{ t('settings.voice.addTtsApi') }}
-          </NButton>
+          </a-button>
         </div>
       </header>
 
       <div class="test-copy-row">
-        <NInput
-          v-model:value="testText"
+        <a-input
+          v-model="testText"
           size="small"
           :placeholder="t('settings.voice.testTextPlaceholder')"
           data-testid="tts-test-text"
@@ -298,18 +297,18 @@ async function handleCardTest(connection: VoiceApiConnection) {
         <div class="section-controls">
           <div class="active-select">
             <span class="active-label">{{ t('settings.voice.activeSttApi') }}</span>
-            <NSelect
-              :value="voiceApi.activeSttId.value"
+            <a-select
+              :model-value="voiceApi.activeSttId.value"
               :options="voiceApi.sttConnectionOptions.value"
               size="small"
               :aria-label="t('settings.voice.activeSttApi')"
-              @update:value="handleActiveSttUpdate"
+              @update:model-value="value => handleActiveSttUpdate(String(value))"
             />
             <span class="active-summary">{{ activeSttDescription }}</span>
           </div>
-          <NButton size="small" secondary @click="openAddModal('stt')">
+          <a-button size="small" type="secondary" @click="openAddModal('stt')">
             {{ t('settings.voice.addSttApi') }}
-          </NButton>
+          </a-button>
         </div>
       </header>
 
@@ -395,7 +394,7 @@ async function handleCardTest(connection: VoiceApiConnection) {
   gap: 10px;
   flex-shrink: 0;
 
-  > .n-button {
+  > .arco-btn {
     width: 112px;
   }
 }
@@ -439,7 +438,7 @@ async function handleCardTest(connection: VoiceApiConnection) {
     align-items: stretch;
   }
 
-  .section-controls > .n-button,
+  .section-controls > .arco-btn,
   .active-select {
     width: 100%;
   }
diff --git a/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue b/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue
index 893c237..15e4842 100644
--- a/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue
+++ b/packages/client/src/components/hermes/settings/voice/VoiceApiCard.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { NButton, NDropdown, NTag } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import ProviderMetaItem from './ProviderMetaItem.vue'
 import type { VoiceApiConnection } from '@/types/voice-api'
@@ -41,10 +40,10 @@ const providerTypeLabel = computed(() => props.connection.isBuiltin
   ? t('settings.voice.builtin')
   : t('settings.voice.customApi'))
 
-const statusType = computed(() => {
-  if (props.connection.active) return 'success'
-  if (requiresKey.value && !props.connection.hasSecret) return 'warning'
-  return 'default'
+const statusColor = computed(() => {
+  if (props.connection.active) return 'green'
+  if (requiresKey.value && !props.connection.hasSecret) return 'orange'
+  return 'gray'
 })
 
 const statusLabel = computed(() => {
@@ -132,14 +131,6 @@ const showDetailsToggle = computed(() => {
   return raw.length > 0 && raw !== friendlyErrorMessage.value
 })
 
-const moreOptions = computed(() => [
-  {
-    label: t('settings.voice.remove'),
-    key: 'remove',
-    disabled: props.connection.isBuiltin,
-  },
-])
-
 function handleEditAction() {
   if (requiresKey.value && !props.connection.hasSecret) {
     emit('connect', props.connection)
@@ -148,7 +139,7 @@ function handleEditAction() {
   emit('edit', props.connection)
 }
 
-function handleMoreSelect(key: string | number) {
+function handleMoreSelect(key: string | number | Record<string, any> | undefined) {
   if (key === 'remove' && !props.connection.isBuiltin) {
     emit('remove', props.connection)
   }
@@ -183,44 +174,47 @@ function handleMoreSelect(key: string | number) {
       </dl>
 
       <div class="provider-control">
-        <NTag class="status-badge" size="small" :type="statusType" round :bordered="false">
+        <a-tag class="status-badge" size="small" :color="statusColor" :bordered="false">
           {{ statusLabel }}
-        </NTag>
+        </a-tag>
         <div class="card-actions" :aria-label="`${connection.label} actions`">
-          <NButton
+          <a-button
             v-if="!connection.active"
-            size="tiny"
-            secondary
+            size="mini"
+            type="secondary"
             @click="emit('setActive', connection)"
           >
             {{ t('settings.voice.setActive') }}
-          </NButton>
-          <NButton
-            size="tiny"
+          </a-button>
+          <a-button
+            size="mini"
             :loading="testState?.status === 'loading'"
             :data-testid="`voice-card-test-${connection.id}`"
             @click="emit('test', connection)"
           >
             {{ testActionLabel }}
-          </NButton>
-          <NButton
+          </a-button>
+          <a-button
             v-if="canEdit"
-            size="tiny"
+            size="mini"
             @click="handleEditAction"
           >
             {{ actionLabel }}
-          </NButton>
-          <NDropdown
+          </a-button>
+          <a-dropdown
             v-if="requiresKey"
             trigger="click"
-            size="small"
-            :options="moreOptions"
             @select="handleMoreSelect"
           >
-            <NButton size="tiny" :aria-label="t('settings.voice.moreActionsFor', { provider: connection.label })">
+            <template #content>
+              <a-doption value="remove" :disabled="connection.isBuiltin">
+                {{ t('settings.voice.remove') }}
+              </a-doption>
+            </template>
+            <a-button size="mini" :aria-label="t('settings.voice.moreActionsFor', { provider: connection.label })">
               {{ t('settings.voice.moreActions') }}
-            </NButton>
-          </NDropdown>
+            </a-button>
+          </a-dropdown>
         </div>
       </div>
     </div>
@@ -231,15 +225,15 @@ function handleMoreSelect(key: string | number) {
 
     <div v-if="hasError" class="feedback-row error" role="alert">
       <div class="error-summary">{{ friendlyErrorMessage }}</div>
-      <NButton
+      <a-button
         v-if="showDetailsToggle"
         class="details-toggle"
-        text
-        size="tiny"
+        type="text"
+        size="mini"
         @click="showErrorDetails = !showErrorDetails"
       >
         {{ showErrorDetails ? t('settings.voice.hideDetails') : t('settings.voice.showDetails') }}
-      </NButton>
+      </a-button>
       <pre v-if="showErrorDetails" class="error-details">{{ rawErrorMessage }}</pre>
     </div>
   </article>
@@ -360,7 +354,7 @@ function handleMoreSelect(key: string | number) {
   gap: 6px;
   width: 100%;
 
-  :deep(.n-button) {
+  :deep(.arco-btn) {
     min-width: 82px;
   }
 }
diff --git a/packages/client/src/components/hermes/settings/voice/VoiceApiConfigurator.vue b/packages/client/src/components/hermes/settings/voice/VoiceApiConfigurator.vue
index 53cf45a..f77b8b6 100644
--- a/packages/client/src/components/hermes/settings/voice/VoiceApiConfigurator.vue
+++ b/packages/client/src/components/hermes/settings/voice/VoiceApiConfigurator.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { NDrawer, NDrawerContent, NForm, NFormItem, NInput, NSelect, NSlider, NButton, NSpace } from 'naive-ui'
+import { ref, computed, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { VoiceApiConnection, VoiceApiSavePayload } from '@/types/voice-api'
 import { VOICE_API_PRESETS } from '@/constants/voiceApiPresets'
@@ -8,6 +7,10 @@ import { DOUBAO_TTS_2_RESOURCE_ID, DOUBAO_TTS_VOICE_OPTIONS, doubaoTtsResourceFo
 import { speedToEdgeRate, hzToEdgePitch } from '@/utils/ttsHelpers'
 import { useVoiceSettings } from '@/composables/useVoiceSettings'
 
+// Arco's a-form requires a `model` object; this repo does hand-written `if`
+// validation (no :rules anywhere), so the model is only a required shape.
+const form = reactive({})
+
 const props = defineProps<{
   connection: VoiceApiConnection | null
   show: boolean
@@ -216,159 +219,160 @@ function handleDoubaoVoiceUpdate(value: string) {
 </script>
 
 <template>
-  <NDrawer :show="show" :width="400" @update:show="emit('close')">
-    <NDrawerContent :title="connection?.label" closable>
-      <NForm label-placement="top" v-if="connection">
-        <NFormItem v-if="!connection.isBuiltin" :label="t('settings.voice.apiKey')">
-          <NInput
-            v-model:value="apiKeyInput"
-            type="password"
-            show-password-on="click"
-            autocomplete="off"
-            :placeholder="connection.hasSecret ? t('settings.voice.keepStoredKeyPlaceholder') : t('settings.voice.apiKeyPlaceholder')"
-          />
-        </NFormItem>
+  <a-drawer
+    :visible="show"
+    :title="connection?.label"
+    :width="400"
+    @cancel="emit('close')"
+  >
+    <a-form :model="form" layout="vertical" v-if="connection">
+      <a-form-item v-if="!connection.isBuiltin" :label="t('settings.voice.apiKey')">
+        <a-input-password
+          v-model="apiKeyInput"
+          autocomplete="off"
+          :placeholder="connection.hasSecret ? t('settings.voice.keepStoredKeyPlaceholder') : t('settings.voice.apiKeyPlaceholder')"
+        />
+      </a-form-item>
 
-        <NFormItem :label="t('settings.voice.model')" v-if="capabilities.models">
-          <NSelect
-            v-if="connection.provider === 'mimo'"
-            :value="stringField('model')"
-            :options="mimoModelOptions"
-            @update:value="value => setField('model', value)"
-          />
-          <NSelect
-            v-else-if="connection.provider === 'doubao'"
-            :value="stringField('model') || DOUBAO_TTS_2_RESOURCE_ID"
-            :options="doubaoModelOptions"
-            tag
-            filterable
-            @update:value="value => setField('model', value)"
-          />
-          <NInput
-            v-else
-            :value="stringField('model')"
-            :placeholder="t('models.selectOrInput')"
-            @update:value="value => setField('model', value)"
-          />
-        </NFormItem>
+      <a-form-item :label="t('settings.voice.model')" v-if="capabilities.models">
+        <a-select
+          v-if="connection.provider === 'mimo'"
+          :model-value="stringField('model')"
+          :options="mimoModelOptions"
+          @update:model-value="value => setField('model', value as string)"
+        />
+        <a-select
+          v-else-if="connection.provider === 'doubao'"
+          :model-value="stringField('model') || DOUBAO_TTS_2_RESOURCE_ID"
+          :options="doubaoModelOptions"
+          allow-create
+          allow-search
+          @update:model-value="value => setField('model', value as string)"
+        />
+        <a-input
+          v-else
+          :model-value="stringField('model')"
+          :placeholder="t('models.selectOrInput')"
+          @update:model-value="value => setField('model', value)"
+        />
+      </a-form-item>
 
-        <NFormItem :label="t('settings.voice.voice')" v-if="capabilities.voices">
-          <NSelect
-            v-if="connection.provider === 'edge'"
-            :value="stringField('voice')"
-            :options="edgeVoiceOptions"
-            filterable
-            @update:value="value => setField('voice', value)"
-          />
-          <NSelect
-            v-else-if="connection.provider === 'openai'"
-            :value="stringField('voice')"
-            :options="openaiVoiceOptions"
-            @update:value="value => setField('voice', value)"
-          />
-          <NSelect
-            v-else-if="connection.provider === 'mimo' && stringField('model') === 'mimo-v2.5-tts'"
-            :value="stringField('voice')"
-            :options="mimoVoiceOptions"
-            @update:value="value => setField('voice', value)"
-          />
-          <NSelect
-            v-else-if="connection.provider === 'doubao'"
-            :value="stringField('voice')"
-            :options="doubaoVoiceOptions"
-            tag
-            filterable
-            @update:value="handleDoubaoVoiceUpdate"
-          />
-          <NInput
-            v-else
-            :value="stringField('voice')"
-            @update:value="value => setField('voice', value)"
-          />
-        </NFormItem>
+      <a-form-item :label="t('settings.voice.voice')" v-if="capabilities.voices">
+        <a-select
+          v-if="connection.provider === 'edge'"
+          :model-value="stringField('voice')"
+          :options="edgeVoiceOptions"
+          allow-search
+          @update:model-value="value => setField('voice', value as string)"
+        />
+        <a-select
+          v-else-if="connection.provider === 'openai'"
+          :model-value="stringField('voice')"
+          :options="openaiVoiceOptions"
+          @update:model-value="value => setField('voice', value as string)"
+        />
+        <a-select
+          v-else-if="connection.provider === 'mimo' && stringField('model') === 'mimo-v2.5-tts'"
+          :model-value="stringField('voice')"
+          :options="mimoVoiceOptions"
+          @update:model-value="value => setField('voice', value as string)"
+        />
+        <a-select
+          v-else-if="connection.provider === 'doubao'"
+          :model-value="stringField('voice')"
+          :options="doubaoVoiceOptions"
+          allow-create
+          allow-search
+          @update:model-value="value => handleDoubaoVoiceUpdate(value as string)"
+        />
+        <a-input
+          v-else
+          :model-value="stringField('voice')"
+          @update:model-value="value => setField('voice', value)"
+        />
+      </a-form-item>
 
-        <template v-if="connection.provider === 'edge'">
-          <NFormItem :label="t('settings.voice.edgeRate')">
-            <NSpace vertical style="width: 100%">
-              <NSlider
-                :value="numberField('rate', 1)"
-                :min="0.5"
-                :max="2.0"
-                :step="0.05"
-                @update:value="value => setField('rate', Array.isArray(value) ? value[0] : value)"
-              />
-              <span style="font-size: 12px; opacity: 0.6">{{ numberField('rate', 1).toFixed(2) }}x ({{ speedToEdgeRate(numberField('rate', 1)) }})</span>
-            </NSpace>
-          </NFormItem>
-          <NFormItem :label="t('settings.voice.edgePitch')">
-            <NSpace vertical style="width: 100%">
-              <NSlider
-                :value="numberField('pitch', 0)"
-                :min="-20"
-                :max="20"
-                :step="1"
-                @update:value="value => setField('pitch', Array.isArray(value) ? value[0] : value)"
-              />
-              <span style="font-size: 12px; opacity: 0.6">{{ numberField('pitch', 0) > 0 ? '+' : '' }}{{ numberField('pitch', 0) }} Hz ({{ hzToEdgePitch(numberField('pitch', 0)) }})</span>
-            </NSpace>
-          </NFormItem>
-        </template>
-
-        <template v-if="connection.provider === 'mimo'">
-          <NFormItem :label="t('settings.voice.mimoStylePrompt')" v-if="capabilities.stylePrompt">
-            <NInput :value="stringField('stylePrompt')" type="textarea" :rows="2" @update:value="value => setField('stylePrompt', value)" />
-          </NFormItem>
-          <NFormItem :label="t('settings.voice.mimoVoiceDesignPrompt')" v-if="stringField('model') === 'mimo-v2.5-tts-voicedesign'">
-            <NInput :value="stringField('voiceDesignDesc')" type="textarea" :rows="3" @update:value="value => setField('voiceDesignDesc', value)" />
-          </NFormItem>
-          <NFormItem :label="t('settings.voice.mimoCloneAudio')" v-if="stringField('model') === 'mimo-v2.5-tts-voiceclone'">
-            <NSpace vertical style="width: 100%">
-              <input
-                ref="mimoCloneAudioInput"
-                type="file"
-                :accept="MIMO_CLONE_AUDIO_ACCEPT"
-                style="display: none"
-                @change="handleMimoCloneAudioChange"
-              />
-              <NSpace align="center">
-                <NButton size="small" @click="mimoCloneAudioInput?.click()">
-                  {{ t('settings.voice.mimoCloneAudioUpload') }}
-                </NButton>
-                <span v-if="mimoCloneFileName" style="font-size: 12px; opacity: 0.7">
-                  {{ mimoCloneFileName }} · {{ mimoCloneFormat }}
-                </span>
-                <NButton v-if="mimoCloneDataUri" size="small" tertiary @click="clearMimoCloneAudio">
-                  {{ t('settings.voice.mimoCloneAudioClear') }}
-                </NButton>
-              </NSpace>
-              <span style="font-size: 12px; opacity: 0.6">{{ t('settings.voice.mimoCloneAudioHint') }}</span>
-            </NSpace>
-          </NFormItem>
-        </template>
-
-        <template v-if="connection.kind === 'stt' && connection.provider !== 'browser'">
-          <NFormItem :label="t('settings.voice.sttAudioTranscode')">
-            <NSelect
-              :value="stringField('audioTranscode') || 'none'"
-              :options="sttAudioTranscodeOptions"
-              @update:value="value => setField('audioTranscode', value)"
+      <template v-if="connection.provider === 'edge'">
+        <a-form-item :label="t('settings.voice.edgeRate')">
+          <a-space direction="vertical" style="width: 100%">
+            <a-slider
+              :model-value="numberField('rate', 1)"
+              :min="0.5"
+              :max="2.0"
+              :step="0.05"
+              @update:model-value="value => setField('rate', Array.isArray(value) ? value[0] : value)"
             />
-          </NFormItem>
-          <NFormItem :label="t('settings.voice.sttLanguage')">
-            <NInput :value="stringField('language')" @update:value="value => setField('language', value)" />
-          </NFormItem>
-          <NFormItem :label="t('settings.voice.sttPrompt')">
-            <NInput :value="stringField('prompt')" type="textarea" :rows="2" @update:value="value => setField('prompt', value)" />
-          </NFormItem>
-        </template>
-      </NForm>
-
-      <template #footer>
-        <NSpace justify="end">
-          <NButton @click="emit('close')">{{ t('common.cancel') }}</NButton>
-          <NButton type="primary" :loading="loading" @click="handleSave">{{ t('common.save') }}</NButton>
-        </NSpace>
+            <span style="font-size: 12px; opacity: 0.6">{{ numberField('rate', 1).toFixed(2) }}x ({{ speedToEdgeRate(numberField('rate', 1)) }})</span>
+          </a-space>
+        </a-form-item>
+        <a-form-item :label="t('settings.voice.edgePitch')">
+          <a-space direction="vertical" style="width: 100%">
+            <a-slider
+              :model-value="numberField('pitch', 0)"
+              :min="-20"
+              :max="20"
+              :step="1"
+              @update:model-value="value => setField('pitch', Array.isArray(value) ? value[0] : value)"
+            />
+            <span style="font-size: 12px; opacity: 0.6">{{ numberField('pitch', 0) > 0 ? '+' : '' }}{{ numberField('pitch', 0) }} Hz ({{ hzToEdgePitch(numberField('pitch', 0)) }})</span>
+          </a-space>
+        </a-form-item>
       </template>
-    </NDrawerContent>
-  </NDrawer>
+
+      <template v-if="connection.provider === 'mimo'">
+        <a-form-item :label="t('settings.voice.mimoStylePrompt')" v-if="capabilities.stylePrompt">
+          <a-textarea :model-value="stringField('stylePrompt')" :auto-size="{ minRows: 2 }" @update:model-value="value => setField('stylePrompt', value)" />
+        </a-form-item>
+        <a-form-item :label="t('settings.voice.mimoVoiceDesignPrompt')" v-if="stringField('model') === 'mimo-v2.5-tts-voicedesign'">
+          <a-textarea :model-value="stringField('voiceDesignDesc')" :auto-size="{ minRows: 3 }" @update:model-value="value => setField('voiceDesignDesc', value)" />
+        </a-form-item>
+        <a-form-item :label="t('settings.voice.mimoCloneAudio')" v-if="stringField('model') === 'mimo-v2.5-tts-voiceclone'">
+          <a-space direction="vertical" style="width: 100%">
+            <input
+              ref="mimoCloneAudioInput"
+              type="file"
+              :accept="MIMO_CLONE_AUDIO_ACCEPT"
+              style="display: none"
+              @change="handleMimoCloneAudioChange"
+            />
+            <a-space align="center">
+              <a-button size="small" @click="mimoCloneAudioInput?.click()">
+                {{ t('settings.voice.mimoCloneAudioUpload') }}
+              </a-button>
+              <span v-if="mimoCloneFileName" style="font-size: 12px; opacity: 0.7">
+                {{ mimoCloneFileName }} · {{ mimoCloneFormat }}
+              </span>
+              <a-button v-if="mimoCloneDataUri" size="small" type="text" @click="clearMimoCloneAudio">
+                {{ t('settings.voice.mimoCloneAudioClear') }}
+              </a-button>
+            </a-space>
+            <span style="font-size: 12px; opacity: 0.6">{{ t('settings.voice.mimoCloneAudioHint') }}</span>
+          </a-space>
+        </a-form-item>
+      </template>
+
+      <template v-if="connection.kind === 'stt' && connection.provider !== 'browser'">
+        <a-form-item :label="t('settings.voice.sttAudioTranscode')">
+          <a-select
+            :model-value="stringField('audioTranscode') || 'none'"
+            :options="sttAudioTranscodeOptions"
+            @update:model-value="value => setField('audioTranscode', value as string)"
+          />
+        </a-form-item>
+        <a-form-item :label="t('settings.voice.sttLanguage')">
+          <a-input :model-value="stringField('language')" @update:model-value="value => setField('language', value)" />
+        </a-form-item>
+        <a-form-item :label="t('settings.voice.sttPrompt')">
+          <a-textarea :model-value="stringField('prompt')" :auto-size="{ minRows: 2 }" @update:model-value="value => setField('prompt', value)" />
+        </a-form-item>
+      </template>
+    </a-form>
+
+    <template #footer>
+      <a-space style="justify-content: flex-end">
+        <a-button @click="emit('close')">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" @click="handleSave">{{ t('common.save') }}</a-button>
+      </a-space>
+    </template>
+  </a-drawer>
 </template>
diff --git a/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue b/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue
index 74c72ef..1705c01 100644
--- a/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue
+++ b/packages/client/src/components/hermes/settings/voice/VoiceApiFormModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NButton, NSelect } from 'naive-ui'
+import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { probeVoiceProvider, type VoiceProviderProbeModel } from '@/api/hermes/voice-provider-probe'
@@ -8,6 +7,10 @@ import { VOICE_API_PRESETS } from '@/constants/voiceApiPresets'
 import { DOUBAO_TTS_2_RESOURCE_ID, DOUBAO_TTS_DEFAULT_VOICE, DOUBAO_TTS_VOICE_OPTIONS, doubaoTtsResourceForVoice } from '@/constants/doubaoTtsVoices'
 import type { VoiceApiKind, VoiceApiProviderCompatibility } from '@/types/voice-api'
 
+// Arco's a-form requires a `model` object; this repo does hand-written `if`
+// validation (no :rules anywhere), so the model is only a required shape.
+const form = reactive({})
+
 const props = defineProps<{
   kind: VoiceApiKind
   show: boolean
@@ -357,35 +360,34 @@ async function handleSave() {
 </script>
 
 <template>
-  <NModal
-    :show="show"
-    preset="card"
+  <a-modal
+    :visible="show"
     :title="kind === 'tts' ? t('settings.voice.addTtsApi') : t('settings.voice.addSttApi')"
-    :style="{ width: 'min(540px, calc(100vw - 32px))' }"
-    @update:show="emit('close')"
+    width="min(540px, calc(100vw - 32px))"
+    @cancel="emit('close')"
   >
-    <NForm label-placement="top" class="provider-form">
+    <a-form :model="form" layout="vertical" class="provider-form">
       <section class="form-section">
-        <NFormItem :label="t('models.selectProvider')" required>
-          <NSelect
-            v-model:value="selectedPresetId"
+        <a-form-item :label="t('models.selectProvider')" required>
+          <a-select
+            :model-value="selectedPresetId ?? undefined"
             :options="presetOptions"
             :placeholder="t('models.chooseProvider')"
             data-testid="voice-provider-select"
-            @update:value="handlePresetChange"
+            @update:model-value="value => handlePresetChange(value as string)"
           />
-        </NFormItem>
+        </a-form-item>
 
-        <NFormItem v-if="selectedPreset && isCustomProvider" :label="t('settings.voice.apiCompatibility')" required>
-          <NSelect
-            v-model:value="compatibility"
+        <a-form-item v-if="selectedPreset && isCustomProvider" :label="t('settings.voice.apiCompatibility')" required>
+          <a-select
+            v-model="compatibility"
             :options="[
               { label: t('settings.voice.openaiCompatible'), value: 'openai-compatible' },
               { label: t('settings.voice.manualCustomEndpoint'), value: 'manual' },
             ]"
             data-testid="voice-provider-compatibility"
           />
-        </NFormItem>
+        </a-form-item>
       </section>
 
       <template v-if="selectedPreset">
@@ -395,30 +397,28 @@ async function handleSave() {
             <small>{{ connectHelpText }}</small>
           </div>
 
-          <NFormItem :label="t('models.baseUrl')" :required="selectedPreset.isSecretRequired" :feedback="baseUrlError">
-            <NInput
-              v-model:value="formData.baseUrl"
+          <a-form-item :label="t('models.baseUrl')" :required="selectedPreset.isSecretRequired" :help="baseUrlError" :validate-status="baseUrlError ? 'error' : undefined">
+            <a-input
+              v-model="formData.baseUrl"
               :placeholder="t('models.baseUrlPlaceholder')"
               :disabled="!!selectedPreset.baseUrl && selectedPreset.provider !== 'custom'"
               data-testid="voice-provider-base-url"
               @blur="updateBaseUrlOnBlur"
             />
-          </NFormItem>
+          </a-form-item>
 
-          <NFormItem :label="t('models.apiKey')" :required="selectedPreset.isSecretRequired" :feedback="apiKeyError">
-            <NInput
-              v-model:value="formData.apiKey"
-              type="password"
-              show-password-on="click"
+          <a-form-item :label="t('models.apiKey')" :required="selectedPreset.isSecretRequired" :help="apiKeyError" :validate-status="apiKeyError ? 'error' : undefined">
+            <a-input-password
+              v-model="formData.apiKey"
               autocomplete="off"
               :placeholder="selectedPreset.isSecretRequired ? t('settings.voice.apiKeyConnectPlaceholder') : t('models.apiKeyPlaceholder')"
               data-testid="voice-provider-api-key"
               @blur="maybeProbeOnApiKeyBlur"
             />
-          </NFormItem>
+          </a-form-item>
 
           <div v-if="canProbeModels" class="connection-actions">
-            <NButton
+            <a-button
               size="small"
               :loading="probeLoading"
               :disabled="!canConnect"
@@ -426,7 +426,7 @@ async function handleSave() {
               @click="handleProbe"
             >
               {{ t('settings.voice.connectFetchModels') }}
-            </NButton>
+            </a-button>
           </div>
 
           <div v-if="probeErrorSummary" class="inline-error" data-testid="voice-provider-probe-error">
@@ -444,18 +444,18 @@ async function handleSave() {
             <small>{{ t('settings.voice.modelConnectManualHint') }}</small>
           </div>
 
-          <NFormItem :label="t('models.defaultModel')" :feedback="modelError">
-            <NSelect
-              :value="formData.model"
+          <a-form-item :label="t('models.defaultModel')" :help="modelError" :validate-status="modelError ? 'error' : undefined">
+            <a-select
+              :model-value="formData.model"
               :options="modelOptions"
-              tag
-              filterable
+              allow-create
+              allow-search
               :loading="probeLoading"
               :placeholder="t('settings.voice.modelConnectManualHint')"
               data-testid="voice-provider-model"
-              @update:value="handleModelUpdate"
+              @update:model-value="value => handleModelUpdate(value as string)"
             />
-          </NFormItem>
+          </a-form-item>
 
           <div v-if="probeLoading" class="helper-text">{{ t('settings.voice.fetchingModels') }}</div>
           <div v-else-if="probeRecommendedModel && modelManuallyEdited && formData.model !== probeRecommendedModel" class="helper-text">
@@ -472,39 +472,39 @@ async function handleSave() {
             <small>{{ t('settings.voice.doubaoVoiceHint') }}</small>
           </div>
 
-          <NFormItem :label="t('settings.voice.voice')">
-            <NSelect
-              v-model:value="formData.voice"
+          <a-form-item :label="t('settings.voice.voice')">
+            <a-select
+              v-model="formData.voice"
               :options="doubaoVoiceOptions"
-              tag
-              filterable
+              allow-create
+              allow-search
               data-testid="voice-provider-voice"
-              @update:value="handleDoubaoVoiceUpdate"
+              @update:model-value="value => handleDoubaoVoiceUpdate(value as string)"
             />
-          </NFormItem>
+          </a-form-item>
         </section>
 
         <section v-if="kind === 'stt'" class="form-section">
-          <NFormItem :label="t('settings.voice.sttAudioTranscode')">
-            <NSelect
-              v-model:value="formData.audioTranscode"
+          <a-form-item :label="t('settings.voice.sttAudioTranscode')">
+            <a-select
+              v-model="formData.audioTranscode"
               :options="sttAudioTranscodeOptions"
               data-testid="voice-provider-audio-transcode"
             />
-          </NFormItem>
+          </a-form-item>
         </section>
       </template>
-    </NForm>
+    </a-form>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton @click="emit('close')">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" :disabled="!canSave" data-testid="voice-provider-save" @click="handleSave">
+        <a-button @click="emit('close')">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" :disabled="!canSave" data-testid="voice-provider-save" @click="handleSave">
           {{ t('common.add') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped>
@@ -520,7 +520,7 @@ async function handleSave() {
 
 .form-section + .form-section {
   padding-top: 12px;
-  border-top: 1px solid var(--n-border-color, rgba(0, 0, 0, 0.08));
+  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
 }
 
 .section-heading {
@@ -531,7 +531,7 @@ async function handleSave() {
 
 .section-heading small,
 .helper-text {
-  color: var(--n-text-color-3, #8a8f98);
+  color: var(--color-text-3, #8a8f98);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.4;
@@ -545,7 +545,7 @@ async function handleSave() {
 .inline-error {
   display: grid;
   gap: 6px;
-  color: var(--n-error-color, #d03050);
+  color: var(--danger-6, #d03050);
   font-size: 12px;
   line-height: 1.4;
 }
@@ -563,7 +563,7 @@ async function handleSave() {
 
 .link-button {
   padding: 0;
-  color: var(--n-primary-color, #18a058);
+  color: var(--primary-6, #18a058);
   background: transparent;
   border: 0;
   cursor: pointer;
diff --git a/packages/client/src/components/hermes/skills/PendingWriteApprovals.vue b/packages/client/src/components/hermes/skills/PendingWriteApprovals.vue
index dbc4004..e1d4815 100644
--- a/packages/client/src/components/hermes/skills/PendingWriteApprovals.vue
+++ b/packages/client/src/components/hermes/skills/PendingWriteApprovals.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { NButton, NTag } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import MarkdownRenderer from '@/components/hermes/chat/MarkdownRenderer.vue'
@@ -161,9 +160,9 @@ onMounted(() => {
         <h3>{{ t('skills.writeApprovalTitle') }}</h3>
         <p>{{ t('skills.writeApprovalDescription') }}</p>
       </div>
-      <NButton size="small" quaternary :loading="pendingLoading" @click="loadPendingWrites">
+      <a-button size="small" type="text" :loading="pendingLoading" @click="loadPendingWrites">
         {{ t('skills.writeApprovalRefresh') }}
-      </NButton>
+      </a-button>
     </div>
     <div v-if="!writeGateSupported" class="write-approval-state">
       {{ t('skills.writeApprovalUnsupported') }}
@@ -178,9 +177,9 @@ onMounted(() => {
       <div v-for="record in pendingWrites" :key="pendingKey(record)" class="write-approval-item">
         <div class="write-approval-main">
           <div class="write-approval-meta">
-            <NTag size="small" :type="record.subsystem === 'memory' ? 'info' : 'warning'">
+            <a-tag size="small" :color="record.subsystem === 'memory' ? 'arcoblue' : 'orange'">
               {{ record.subsystem === 'memory' ? t('skills.writeApprovalMemory') : t('skills.writeApprovalSkills') }}
-            </NTag>
+            </a-tag>
             <span>{{ record.action || '-' }}</span>
             <span>{{ record.origin }}</span>
             <span v-if="record.created_at">{{ formatPendingTime(record.created_at) }}</span>
@@ -188,31 +187,32 @@ onMounted(() => {
           <div class="write-approval-summary">{{ record.summary || record.id }}</div>
         </div>
         <div class="write-approval-actions">
-          <NButton
-            size="tiny"
-            quaternary
+          <a-button
+            size="mini"
+            type="text"
             :loading="pendingAction === `${pendingKey(record)}:diff`"
             @click="toggleDiff(record)"
           >
             {{ expandedReviews[pendingKey(record)] ? t('skills.writeApprovalHideDiff') : t('skills.writeApprovalViewDiff') }}
-          </NButton>
-          <NButton
-            size="tiny"
-            type="success"
+          </a-button>
+          <a-button
+            size="mini"
+            type="primary"
+            status="success"
             :loading="pendingAction === `${pendingKey(record)}:approve`"
             @click="resolvePendingWrite(record, 'approve')"
           >
             {{ t('skills.writeApprovalApprove') }}
-          </NButton>
-          <NButton
-            size="tiny"
-            quaternary
-            type="error"
+          </a-button>
+          <a-button
+            size="mini"
+            type="text"
+            status="danger"
             :loading="pendingAction === `${pendingKey(record)}:reject`"
             @click="resolvePendingWrite(record, 'reject')"
           >
             {{ t('skills.writeApprovalReject') }}
-          </NButton>
+          </a-button>
         </div>
         <div v-if="expandedReviews[pendingKey(record)]" class="write-approval-review">
           <MarkdownRenderer :content="expandedReviews[pendingKey(record)]" />
diff --git a/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue b/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue
index 13cc9ea..b645572 100644
--- a/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue
+++ b/packages/client/src/components/hermes/skills/SkillExternalDirsModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { NModal, NButton, NInput } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchExternalDirs, saveExternalDirs, type ExternalDirEntry } from '@/api/hermes/skills'
@@ -87,13 +86,12 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('skills.externalDirs.title')"
-    :style="{ width: 'min(560px, calc(100vw - 32px))' }"
+    width="min(560px, calc(100vw - 32px))"
     :mask-closable="!loading"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <p class="hint">{{ t('skills.externalDirs.hint') }}</p>
 
@@ -103,12 +101,12 @@ function handleClose() {
     <ul v-else class="dir-list">
       <li v-for="(row, idx) in rows" :key="idx" class="dir-row">
         <div class="dir-input-wrap">
-          <NInput
-            v-model:value="row.raw"
+          <a-input
+            v-model="row.raw"
             size="small"
             :placeholder="t('skills.externalDirs.placeholder')"
             :disabled="loading"
-            @update:value="onRowEdit(idx)"
+            @update:model-value="onRowEdit(idx)"
           />
           <span v-if="row.hint === 'missing'" class="hint-tag broken">
             {{ t('skills.externalDirs.missing') }}
@@ -128,7 +126,7 @@ function handleClose() {
       </li>
     </ul>
 
-    <NButton size="small" :disabled="loading" @click="addRow">
+    <a-button size="small" :disabled="loading" @click="addRow">
       <template #icon>
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -137,17 +135,17 @@ function handleClose() {
         </svg>
       </template>
       {{ t('skills.externalDirs.add') }}
-    </NButton>
+    </a-button>
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="loading" @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" :disabled="initializing" @click="handleSave">
+        <a-button :disabled="loading" @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" :disabled="initializing" @click="handleSave">
           {{ t('common.save') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/skills/SkillImportModal.vue b/packages/client/src/components/hermes/skills/SkillImportModal.vue
index 128f76a..82d7579 100644
--- a/packages/client/src/components/hermes/skills/SkillImportModal.vue
+++ b/packages/client/src/components/hermes/skills/SkillImportModal.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { NModal, NUpload, NButton, NInput, NRadioGroup, NRadio } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
-import type { UploadFileInfo } from 'naive-ui'
+import type { FileItem } from '@arco-design/web-vue/es/upload/interfaces'
 import { importSkill } from '@/api/hermes/skills'
 import { useI18n } from 'vue-i18n'
 
@@ -17,7 +16,7 @@ const message = useMessage()
 const showModal = ref(true)
 const loading = ref(false)
 const mode = ref<'zip' | 'folder'>('folder')
-const zipFiles = ref<UploadFileInfo[]>([])
+const zipFiles = ref<FileItem[]>([])
 const folderFiles = ref<File[]>([])
 const folderName = ref('')
 const category = ref('')
@@ -33,7 +32,8 @@ function onModeChange() {
   folderName.value = ''
 }
 
-function beforeUpload({ file }: { file: UploadFileInfo }) {
+// Arco 的 before-upload 直接收到原生 File（naive 传的是 { file }）。
+function beforeUpload(file: File) {
   const name = file.name?.toLowerCase() || ''
   if (!name.endsWith('.zip')) {
     message.warning(t('skills.importInvalidFile'))
@@ -98,26 +98,25 @@ function handleClose() {
 </script>
 
 <template>
-  <NModal
-    v-model:show="showModal"
-    preset="card"
+  <a-modal
+    v-model:visible="showModal"
     :title="t('skills.importTitle')"
-    :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+    width="min(480px, calc(100vw - 32px))"
     :mask-closable="!loading"
-    @after-leave="emit('close')"
+    @close="emit('close')"
   >
     <div class="form-row">
-      <NRadioGroup v-model:value="mode" size="small" :disabled="loading" @update:value="onModeChange">
-        <NRadio value="folder">{{ t('skills.importModeFolder') }}</NRadio>
-        <NRadio value="zip">{{ t('skills.importModeZip') }}</NRadio>
-      </NRadioGroup>
+      <a-radio-group v-model="mode" size="small" :disabled="loading" @change="onModeChange">
+        <a-radio value="folder">{{ t('skills.importModeFolder') }}</a-radio>
+        <a-radio value="zip">{{ t('skills.importModeZip') }}</a-radio>
+      </a-radio-group>
       <p class="hint">{{ mode === 'zip' ? t('skills.importHintZip') : t('skills.importHintFolder') }}</p>
     </div>
 
     <div class="form-row">
       <label class="field-label">{{ t('skills.importTargetCategory') }}</label>
-      <NInput
-        v-model:value="category"
+      <a-input
+        v-model="category"
         size="small"
         :placeholder="t('skills.importTargetCategoryPlaceholder')"
         :disabled="loading"
@@ -125,17 +124,17 @@ function handleClose() {
     </div>
 
     <div class="form-row">
-      <NUpload
+      <a-upload
         v-if="mode === 'zip'"
         v-model:file-list="zipFiles"
-        :max="1"
+        :limit="1"
         accept=".zip"
-        :default-upload="false"
+        :auto-upload="false"
         :disabled="loading"
         @before-upload="beforeUpload"
       >
-        <NButton :disabled="loading">{{ t('skills.importSelectFile') }}</NButton>
-      </NUpload>
+        <a-button :disabled="loading">{{ t('skills.importSelectFile') }}</a-button>
+      </a-upload>
 
       <div v-else class="folder-picker">
         <input
@@ -146,9 +145,9 @@ function handleClose() {
           style="display: none"
           @change="onFolderSelected"
         />
-        <NButton :disabled="loading" @click="pickFolder">
+        <a-button :disabled="loading" @click="pickFolder">
           {{ t('skills.importSelectFolder') }}
-        </NButton>
+        </a-button>
         <span v-if="folderName" class="folder-info">
           {{ folderName }} ({{ folderFiles.length }} {{ t('skills.importFileCount') }})
         </span>
@@ -157,13 +156,13 @@ function handleClose() {
 
     <template #footer>
       <div class="modal-footer">
-        <NButton :disabled="loading" @click="handleClose">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="loading" :disabled="!hasSelection" @click="handleSave">
+        <a-button :disabled="loading" @click="handleClose">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="loading" :disabled="!hasSelection" @click="handleSave">
           {{ t('common.confirm') }}
-        </NButton>
+        </a-button>
       </div>
     </template>
-  </NModal>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/client/src/components/hermes/skills/SkillList.vue b/packages/client/src/components/hermes/skills/SkillList.vue
index 60615ab..345d9fa 100644
--- a/packages/client/src/components/hermes/skills/SkillList.vue
+++ b/packages/client/src/components/hermes/skills/SkillList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { NSwitch } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useDialog } from '@/composables/useDialog'
 import type { SkillCategory, SkillSource, SkillInfo } from '@/api/hermes/skills'
@@ -243,9 +242,10 @@ function confirmDelete(category: string, skillName: string) {
                                     </span>
                                     <span v-if="skill.description" class="skill-desc">{{ skill.description }}</span>
                                 </div>
-                                <NSwitch v-if="!readonly" size="small" :value="skill.enabled !== false"
+                                <a-switch v-if="!readonly" size="small" :model-value="skill.enabled !== false"
                                     :loading="togglingSkills.has(skill.name)"
-                                    @update:value="handleToggle(cat.name, skill.name, $event)" @click.stop />
+                                    @update:model-value="(val) => handleToggle(cat.name, skill.name, val as boolean)"
+                                    @click.stop />
                             </button>
                         </div>
                     </div>
@@ -291,9 +291,10 @@ function confirmDelete(category: string, skillName: string) {
                                 <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
                             </svg>
                         </button>
-                        <NSwitch v-if="!readonly" size="small" :value="skill.enabled !== false"
+                        <a-switch v-if="!readonly" size="small" :model-value="skill.enabled !== false"
                             :loading="togglingSkills.has(skill.name)"
-                            @update:value="handleToggle(cat.name, skill.name, $event)" @click.stop />
+                            @update:model-value="(val) => handleToggle(cat.name, skill.name, val as boolean)"
+                            @click.stop />
                     </button>
                 </div>
             </div>
diff --git a/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue b/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue
index e0e89ac..ccc3c24 100644
--- a/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue
+++ b/packages/client/src/components/hermes/workflow/WorkflowAgentNode.vue
@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue'
 import { Handle, Position, type NodeProps } from '@vue-flow/core'
 import { NodeResizer } from '@vue-flow/node-resizer'
-import { NInput, NSelect, NSwitch, NTooltip } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import WorkflowModelSelector from './WorkflowModelSelector.vue'
@@ -105,15 +104,15 @@ async function uploadImages(files: File[]) {
     <Handle id="input" type="target" :position="Position.Left" class="workflow-handle input-handle" />
 
     <div class="node-header">
-      <NTooltip v-if="statusTip" trigger="hover" placement="top">
-        <template #trigger>
-          <span class="node-status-with-tip">
-            <span class="node-status-dot" />
-            <span class="node-status-label">{{ statusLabel }}</span>
-          </span>
+      <a-tooltip v-if="statusTip" position="top">
+        <template #content>
+          <span class="node-status-tip">{{ statusTip }}</span>
         </template>
-        <span class="node-status-tip">{{ statusTip }}</span>
-      </NTooltip>
+        <span class="node-status-with-tip">
+          <span class="node-status-dot" />
+          <span class="node-status-label">{{ statusLabel }}</span>
+        </span>
+      </a-tooltip>
       <span v-else class="node-status-with-tip">
         <span class="node-status-dot" />
         <span class="node-status-label">{{ statusLabel }}</span>
@@ -130,20 +129,20 @@ async function uploadImages(files: File[]) {
       @touchstart="handleControlEvent"
       @touchend="handleControlEvent"
     >
-      <NInput
-        :value="data.title"
+      <a-input
+        :model-value="data.title"
         size="small"
         :disabled="data.readonly"
         :placeholder="t('workflow.node.title')"
-        @update:value="value => updateField('title', value)"
+        @change="value => updateField('title', value)"
       />
-      <NSelect
-        :value="data.agent"
+      <a-select
+        :model-value="data.agent"
         :options="data.agentOptions"
         size="small"
         :disabled="data.readonly"
         :placeholder="t('workflow.node.agent')"
-        @update:value="value => updateField('agent', value as string)"
+        @change="value => updateField('agent', value as string)"
       />
       <WorkflowModelSelector
         :provider="data.provider"
@@ -154,35 +153,32 @@ async function uploadImages(files: File[]) {
       />
       <label class="node-toggle-row">
         <span>{{ t('workflow.node.approvalRequired') }}</span>
-        <NSwitch
-          :value="data.approvalRequired === true"
+        <a-switch
+          :model-value="data.approvalRequired === true"
           size="small"
           :disabled="data.readonly"
-          @update:value="value => updateField('approvalRequired', value)"
+          @change="value => updateField('approvalRequired', value === true)"
         />
       </label>
-      <NSelect
-        :value="data.skills"
+      <a-select
+        :model-value="data.skills"
         :options="data.skillOptions"
         :loading="data.skillsLoading"
         multiple
-        tag
-        filterable
+        allow-create
+        allow-search
+        allow-clear
         size="small"
         :disabled="data.readonly"
         :placeholder="t('workflow.node.skillsPlaceholder')"
-        @update:value="value => updateField('skills', value as string[])"
+        @change="value => updateField('skills', value as string[])"
       />
-      <NInput
+      <a-textarea
         class="node-prompt-input"
-        :value="data.input"
-        type="textarea"
-        size="small"
-        :resizable="false"
+        :model-value="data.input"
         :disabled="data.readonly"
-        :input-props="{ style: { height: '100%', resize: 'none' } }"
         :placeholder="t('workflow.node.promptPlaceholder')"
-        @update:value="value => updateField('input', value)"
+        @change="value => updateField('input', value)"
       />
       <div class="node-images">
         <input
@@ -427,14 +423,15 @@ async function uploadImages(files: File[]) {
 .node-prompt-input {
   flex: 1;
   min-height: 96px;
+  display: flex;
 
-  :deep(.n-input-wrapper),
-  :deep(.n-input__textarea) {
-    height: 100%;
-    resize: none !important;
+  // a-textarea 没有 size prop（naive 的 size="small" 是 13px），
+  // .arco-textarea-wrapper 自身写死了 14px，只能在这里显式还原。
+  :deep(.arco-textarea-wrapper) {
+    font-size: 13px;
   }
 
-  :deep(.n-input__textarea-el) {
+  :deep(.arco-textarea) {
     height: 100% !important;
     min-height: 84px;
     resize: none !important;
diff --git a/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue b/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue
index aed1bea..8b98548 100644
--- a/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue
+++ b/packages/client/src/components/hermes/workflow/WorkflowModelSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { NInput, NModal } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/hermes/app'
 import type { AvailableModelGroup, ProviderApiMode } from '@/api/hermes/system'
@@ -96,17 +95,17 @@ function handleSelect(group: AvailableModelGroup, model: string) {
       </svg>
     </button>
 
-    <NModal
-      v-model:show="showModal"
-      preset="card"
+    <a-modal
+      v-model:visible="showModal"
       :title="t('models.title')"
       :style="{ width: 'min(480px, calc(100vw - 32px))' }"
       :mask-closable="true"
+      :footer="false"
     >
-      <NInput
-        v-model:value="searchQuery"
+      <a-input
+        v-model="searchQuery"
         :placeholder="t('models.searchPlaceholder')"
-        clearable
+        allow-clear
         size="small"
         class="model-search"
       />
@@ -157,7 +156,7 @@ function handleSelect(group: AvailableModelGroup, model: string) {
           {{ searchQuery ? t('models.noResults') : t('models.noModels') }}
         </div>
       </div>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
diff --git a/packages/client/src/components/hermes/workflow/types.ts b/packages/client/src/components/hermes/workflow/types.ts
index e5368e2..dfc2fb9 100644
--- a/packages/client/src/components/hermes/workflow/types.ts
+++ b/packages/client/src/components/hermes/workflow/types.ts
@@ -1,9 +1,9 @@
-import type { SelectOption } from 'naive-ui'
 import type { AvailableModelGroup } from '@/api/hermes/system'
 
-export interface WorkflowSelectOption extends SelectOption {
+export interface WorkflowSelectOption {
   label: string
   value: string
+  disabled?: boolean
 }
 
 export type WorkflowNodeStatus = 'idle' | 'queued' | 'running' | 'pending_approval' | 'completed' | 'failed' | 'approval_rejected' | 'canceled'
diff --git a/packages/client/src/components/layout/LanguageSwitch.vue b/packages/client/src/components/layout/LanguageSwitch.vue
index 2eb5041..ff1a4d5 100644
--- a/packages/client/src/components/layout/LanguageSwitch.vue
+++ b/packages/client/src/components/layout/LanguageSwitch.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { NSelect } from 'naive-ui'
 import { switchLocale } from '@/i18n'
 
 const { locale } = useI18n()
@@ -10,19 +9,19 @@ const options = [
   { label: 'English', value: 'en' },
 ]
 
-function handleChange(val: string) {
-  switchLocale(val)
-  localStorage.setItem('hermes_locale', val)
+function handleChange(val: unknown) {
+  const next = String(val)
+  switchLocale(next)
+  localStorage.setItem('hermes_locale', next)
 }
 </script>
 
 <template>
-  <NSelect
+  <a-select
     :value="locale"
     :options="options"
-    size="tiny"
-    :consistent-menu-width="false"
+    size="mini"
     class="language-switch input-sm"
-    @update:value="handleChange"
+    @change="handleChange"
   />
 </template>
diff --git a/packages/client/src/components/layout/ModelSelector.vue b/packages/client/src/components/layout/ModelSelector.vue
index a15a6ed..ecc9c66 100644
--- a/packages/client/src/components/layout/ModelSelector.vue
+++ b/packages/client/src/components/layout/ModelSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { NModal, NInput, NSelect } from 'naive-ui'
 import { useAppStore } from '@/stores/hermes/app'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { useI18n } from 'vue-i18n'
@@ -179,18 +178,18 @@ async function handleRefresh() {
       </svg>
     </button>
 
-    <NModal
-      :show="showModal"
-      preset="card"
+    <a-modal
+      :visible="showModal"
       :title="t('models.title')"
-      :style="{ width: 'min(480px, calc(100vw - 32px))' }"
+      :width="'min(480px, calc(100vw - 32px))'"
+      :footer="false"
       :mask-closable="true"
-      @update:show="handleModalShowChange"
+      @update:visible="handleModalShowChange"
     >
-      <NInput
-        v-model:value="searchQuery"
+      <a-input
+        v-model="searchQuery"
         :placeholder="t('models.searchPlaceholder')"
-        clearable
+        allow-clear
         size="small"
         class="model-search"
       />
@@ -248,14 +247,14 @@ async function handleRefresh() {
         </div>
         <div class="model-custom">
           <div class="model-custom-row">
-            <NSelect
-              v-model:value="customProvider"
+            <a-select
+              v-model="customProvider"
               :options="providerOptions"
               size="small"
               class="model-custom-provider"
             />
-            <NInput
-              v-model:value="customInput"
+            <a-input
+              v-model="customInput"
               :placeholder="t('models.customModelPlaceholder')"
               size="small"
               class="model-custom-input"
@@ -267,7 +266,7 @@ async function handleRefresh() {
           </div>
         </div>
       </div>
-    </NModal>
+    </a-modal>
 
   </div>
 </template>
diff --git a/packages/client/src/components/layout/PageSidebarNav.vue b/packages/client/src/components/layout/PageSidebarNav.vue
index 58751c5..c9fec4a 100644
--- a/packages/client/src/components/layout/PageSidebarNav.vue
+++ b/packages/client/src/components/layout/PageSidebarNav.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useSessionSearch } from '@/composables/useSessionSearch'
@@ -142,67 +141,58 @@ function openApiRelay() {
       </button>
     </div>
     <div v-if="showModeSwitch" class="conversation-switch conversation-switch--three" role="tablist" aria-label="Conversation type">
-      <NTooltip trigger="hover" placement="top">
-        <template #trigger>
-          <button
-            class="conversation-switch-tab"
-            :class="{ active: active === 'chat' || active === 'history' }"
-            type="button"
-            role="tab"
-            :aria-label="t('sidebar.singleChat')"
-            :aria-selected="active === 'chat' || active === 'history'"
-            @click="openChat"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-            </svg>
-          </button>
-        </template>
-        {{ t('sidebar.singleChat') }}
-      </NTooltip>
-      <NTooltip trigger="hover" placement="top">
-        <template #trigger>
-          <button
-            class="conversation-switch-tab"
-            :class="{ active: active === 'group' }"
-            type="button"
-            role="tab"
-            :aria-label="t('sidebar.groupChat')"
-            :aria-selected="active === 'group'"
-            @click="openGroupChat"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-              <circle cx="9" cy="7" r="4" />
-              <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
-              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-            </svg>
-          </button>
-        </template>
-        {{ t('sidebar.groupChat') }}
-      </NTooltip>
-      <NTooltip trigger="hover" placement="top">
-        <template #trigger>
-          <button
-            class="conversation-switch-tab"
-            :class="{ active: active === 'workflow' }"
-            type="button"
-            role="tab"
-            :aria-label="t('sidebar.workflow')"
-            :aria-selected="active === 'workflow'"
-            @click="openWorkflow"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="5" cy="12" r="3" />
-              <circle cx="19" cy="6" r="3" />
-              <circle cx="19" cy="18" r="3" />
-              <path d="M8 12h3a4 4 0 0 0 4-4V6" />
-              <path d="M8 12h3a4 4 0 0 1 4 4v2" />
-            </svg>
-          </button>
-        </template>
-        {{ t('sidebar.workflow') }}
-      </NTooltip>
+      <a-tooltip trigger="hover" position="top" :content="t('sidebar.singleChat')">
+        <button
+          class="conversation-switch-tab"
+          :class="{ active: active === 'chat' || active === 'history' }"
+          type="button"
+          role="tab"
+          :aria-label="t('sidebar.singleChat')"
+          :aria-selected="active === 'chat' || active === 'history'"
+          @click="openChat"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+        </button>
+      </a-tooltip>
+      <a-tooltip trigger="hover" position="top" :content="t('sidebar.groupChat')">
+        <button
+          class="conversation-switch-tab"
+          :class="{ active: active === 'group' }"
+          type="button"
+          role="tab"
+          :aria-label="t('sidebar.groupChat')"
+          :aria-selected="active === 'group'"
+          @click="openGroupChat"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+            <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+          </svg>
+        </button>
+      </a-tooltip>
+      <a-tooltip trigger="hover" position="top" :content="t('sidebar.workflow')">
+        <button
+          class="conversation-switch-tab"
+          :class="{ active: active === 'workflow' }"
+          type="button"
+          role="tab"
+          :aria-label="t('sidebar.workflow')"
+          :aria-selected="active === 'workflow'"
+          @click="openWorkflow"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="5" cy="12" r="3" />
+            <circle cx="19" cy="6" r="3" />
+            <circle cx="19" cy="18" r="3" />
+            <path d="M8 12h3a4 4 0 0 0 4-4V6" />
+            <path d="M8 12h3a4 4 0 0 1 4 4v2" />
+          </svg>
+        </button>
+      </a-tooltip>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/components/layout/ProfileSelector.vue b/packages/client/src/components/layout/ProfileSelector.vue
index d3b9544..7502d01 100644
--- a/packages/client/src/components/layout/ProfileSelector.vue
+++ b/packages/client/src/components/layout/ProfileSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { NButton, NModal, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import {
@@ -224,15 +223,15 @@ onMounted(() => {
       <span class="profile-name">{{ displayName }}</span>
     </div>
 
-    <NModal
-      :show="showProfileModal"
-      preset="card"
-      :bordered="false"
-      :style="{ width: '720px', maxWidth: 'calc(100vw - 32px)' }"
-      class="profile-manager-modal"
-      @update:show="handleProfileModalShowChange"
+    <a-modal
+      :visible="showProfileModal"
+      :footer="false"
+      :width="720"
+      :modal-style="{ maxWidth: 'calc(100vw - 32px)' }"
+      modal-class="profile-manager-modal"
+      @update:visible="handleProfileModalShowChange"
     >
-      <template #header>
+      <template #title>
         <div class="profile-modal-header">
           <div class="profile-popover-title">
             <span class="profile-popover-name">{{ t('sidebar.profiles') }}</span>
@@ -241,7 +240,7 @@ onMounted(() => {
         </div>
       </template>
 
-      <NSpin :show="runtimeLoading" size="small">
+      <a-spin :loading="runtimeLoading" :size="14">
         <div class="profile-runtime-list">
           <div
             v-for="profile in profilesStore.profiles"
@@ -281,30 +280,30 @@ onMounted(() => {
               </div>
             </div>
             <div class="profile-runtime-actions">
-              <NButton
+              <a-button
                 size="small"
                 type="primary"
                 @click="openAvatarModal(profile)"
               >
                 {{ t('profiles.avatar.customize') }}
-              </NButton>
-              <NButton
+              </a-button>
+              <a-button
                 size="small"
                 type="primary"
                 :loading="gatewayRestarting[profile.name]"
                 @click="handleRestartGateway(profile.name)"
               >
                 {{ t('profiles.runtime.restartGateway') }}
-              </NButton>
-              <NButton
+              </a-button>
+              <a-button
                 size="small"
                 type="primary"
                 :loading="profileRestarting[profile.name]"
                 @click="handleRestartProfile(profile.name)"
               >
                 {{ t('profiles.runtime.restartProfile') }}
-              </NButton>
-              <NButton
+              </a-button>
+              <a-button
                 size="small"
                 type="primary"
                 :disabled="profile.name === displayName"
@@ -312,19 +311,19 @@ onMounted(() => {
                 @click="handleSwitchProfile(profile.name)"
               >
                 {{ t('profiles.runtime.switchProfile') }}
-              </NButton>
+              </a-button>
             </div>
           </div>
         </div>
-      </NSpin>
-    </NModal>
+      </a-spin>
+    </a-modal>
 
-    <NModal
-      v-model:show="showAvatarModal"
-      preset="card"
+    <a-modal
+      v-model:visible="showAvatarModal"
+      :footer="false"
       :title="t('profiles.avatar.title')"
-      :bordered="false"
-      :style="{ width: '420px', maxWidth: 'calc(100vw - 32px)' }"
+      :width="420"
+      :modal-style="{ maxWidth: 'calc(100vw - 32px)' }"
     >
       <div v-if="editingProfile" class="avatar-editor">
         <ProfileAvatarView :name="editingProfile.name" :avatar="editingProfile.avatar" :size="72" />
@@ -340,18 +339,18 @@ onMounted(() => {
           @change="handleAvatarFileChange"
         >
         <div class="avatar-editor-actions">
-          <NButton type="primary" :loading="avatarSaving" @click="triggerAvatarUpload">
+          <a-button type="primary" :loading="avatarSaving" @click="triggerAvatarUpload">
             {{ t('profiles.avatar.upload') }}
-          </NButton>
-          <NButton type="primary" :loading="avatarSaving" @click="handleRandomAvatar">
+          </a-button>
+          <a-button type="primary" :loading="avatarSaving" @click="handleRandomAvatar">
             {{ t('profiles.avatar.random') }}
-          </NButton>
-          <NButton :loading="avatarSaving" @click="handleResetAvatar">
+          </a-button>
+          <a-button :loading="avatarSaving" @click="handleResetAvatar">
             {{ t('profiles.avatar.reset') }}
-          </NButton>
+          </a-button>
         </div>
       </div>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
@@ -533,7 +532,7 @@ onMounted(() => {
   justify-content: flex-end;
   gap: 6px;
 
-  :deep(.n-button) {
+  :deep(.arco-btn) {
     min-width: 88px;
   }
 }
@@ -625,21 +624,21 @@ onMounted(() => {
     justify-content: flex-start;
     gap: 5px;
 
-    :deep(.n-button) {
+    :deep(.arco-btn) {
       min-width: 0;
-      --n-height: 26px !important;
-      --n-font-size: 12px !important;
-      --n-padding: 0 8px !important;
+      height: 26px !important;
+      font-size: 12px !important;
+      padding: 0 8px !important;
     }
   }
 
   .avatar-editor-actions {
     gap: 6px;
 
-    :deep(.n-button) {
-      --n-height: 28px !important;
-      --n-font-size: 12px !important;
-      --n-padding: 0 9px !important;
+    :deep(.arco-btn) {
+      height: 28px !important;
+      font-size: 12px !important;
+      padding: 0 9px !important;
     }
   }
 }
diff --git a/packages/client/src/components/layout/SettingsCircuitBadge.vue b/packages/client/src/components/layout/SettingsCircuitBadge.vue
index 7dd67e4..f37860a 100644
--- a/packages/client/src/components/layout/SettingsCircuitBadge.vue
+++ b/packages/client/src/components/layout/SettingsCircuitBadge.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
-import { NButton, NDataTable, NForm, NFormItem, NInput, NModal, NSpace, NTag, NTooltip } from 'naive-ui'
+import { computed, h, ref, resolveComponent } from 'vue'
 import { useDialog } from '@/composables/useDialog'
 import { useMessage } from '@/composables/useMessage'
-import type { DataTableColumns } from 'naive-ui'
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
 import { useI18n } from 'vue-i18n'
 import { connectMcuDeviceRemote, createMcuDevice, deleteMcuDevice, disconnectMcuDeviceRemote, fetchMcuDevices, updateMcuDeviceName, type McuDevice } from '@/api/hermes/mcu-devices'
 
+// a-table 的 column.render 里不能用 kebab-case 标签（h('a-tag') 只会生成
+// 同名原生元素，不会解析全局注册的组件），必须走 resolveComponent。
+const Tag = resolveComponent('a-tag')
+const Button = resolveComponent('a-button')
+const Space = resolveComponent('a-space')
+
 const { t } = useI18n()
 const message = useMessage()
 const dialog = useDialog()
@@ -28,76 +33,80 @@ const editForm = ref({
 })
 
 function renderConnectionStatus(connected: boolean | undefined) {
-  return h(NTag, {
+  return h(Tag, {
     size: 'small',
-    type: connected ? 'success' : 'default',
+    color: connected ? 'green' : 'gray',
     bordered: false,
   }, { default: () => connected ? t('mcuDevices.connected') : t('mcuDevices.disconnected') })
 }
 
-const columns = computed<DataTableColumns<McuDevice>>(() => [
+const columns = computed<TableColumnData[]>(() => [
   {
     title: t('mcuDevices.name'),
-    key: 'name',
-    ellipsis: { tooltip: true },
+    dataIndex: 'name',
+    ellipsis: true,
+    tooltip: true,
   },
   {
     title: t('mcuDevices.deviceCode'),
-    key: 'device_code',
-    ellipsis: { tooltip: true },
+    dataIndex: 'device_code',
+    ellipsis: true,
+    tooltip: true,
   },
   {
     title: t('mcuDevices.channel'),
-    key: 'is_official',
+    dataIndex: 'is_official',
     width: 96,
-    render(row) {
-      return h(NTag, {
+    render({ record }) {
+      const row = record as McuDevice
+      return h(Tag, {
         size: 'small',
-        type: row.is_official ? 'success' : 'warning',
+        color: row.is_official ? 'green' : 'orange',
         bordered: false,
       }, { default: () => row.is_official ? t('mcuDevices.official') : t('mcuDevices.unofficial') })
     },
   },
   {
     title: t('mcuDevices.lanStatus'),
-    key: 'lan_connected',
+    dataIndex: 'lan_connected',
     width: 96,
-    render(row) {
-      return renderConnectionStatus(row.lan_connected)
+    render({ record }) {
+      return renderConnectionStatus((record as McuDevice).lan_connected)
     },
   },
   {
     title: t('mcuDevices.remoteStatus'),
-    key: 'remote_connected',
+    dataIndex: 'remote_connected',
     width: 96,
-    render(row) {
-      return renderConnectionStatus(row.remote_connected)
+    render({ record }) {
+      return renderConnectionStatus((record as McuDevice).remote_connected)
     },
   },
   {
     title: t('mcuDevices.actions'),
-    key: 'actions',
+    dataIndex: 'actions',
     width: 220,
-    render(row) {
-      return h(NSpace, { size: 4 }, {
+    render({ record }) {
+      const row = record as McuDevice
+      return h(Space, { size: 4 }, {
         default: () => [
-          h(NButton, {
-            size: 'tiny',
-            quaternary: true,
+          h(Button, {
+            size: 'mini',
+            type: 'text',
             onClick: () => openEditModal(row),
           }, { default: () => t('mcuDevices.edit') }),
-          h(NButton, {
-            size: 'tiny',
-            quaternary: true,
-            type: row.remote_connected ? 'warning' : 'primary',
+          h(Button, {
+            size: 'mini',
+            type: 'text',
+            status: row.remote_connected ? 'warning' : 'normal',
             loading: connectingDeviceId.value === row.id,
             disabled: connectingDeviceId.value !== 0 || (!row.is_official && !row.remote_connected),
             onClick: () => toggleRemoteDevice(row),
           }, { default: () => row.remote_connected ? t('mcuDevices.remoteDisconnect') : t('mcuDevices.remoteConnect') }),
-          h(NButton, {
-            size: 'tiny',
-            quaternary: true,
-            type: 'error',
+          h(Button, {
+            size: 'mini',
+            type: 'text',
+            status: 'danger',
             onClick: () => confirmDeleteDevice(row),
           }, { default: () => t('mcuDevices.delete') }),
         ],
@@ -246,9 +255,8 @@ function confirmDeleteDevice(device: McuDevice) {
     <circle class="settings-circuit-node" cx="27" cy="16" r="0.9" />
   </svg>
   -->
-  <NTooltip trigger="hover" placement="top">
-    <template #trigger>
-      <button class="settings-circuit-link" type="button" :aria-label="t('mcuDevices.title')" @click.stop="openModal">
+  <a-tooltip trigger="hover" position="top" :content="t('mcuDevices.title')">
+    <button class="settings-circuit-link" type="button" :aria-label="t('mcuDevices.title')" @click.stop="openModal">
         <svg class="settings-circuit-badge settings-circuit-badge--pcb" viewBox="0 0 36 22" fill="none" aria-hidden="true">
           <rect class="settings-pcb-board" x="3" y="3" width="30" height="16" rx="3" />
           <path class="settings-pcb-copper" d="M7 7h6v4h7v-3h9" />
@@ -268,11 +276,9 @@ function confirmDeleteDevice(device: McuDevice) {
           <circle class="settings-pcb-via" cx="20" cy="5" r="0.8" />
           <circle class="settings-pcb-via" cx="29" cy="17" r="0.8" />
         </svg>
-      </button>
-    </template>
-    {{ t('mcuDevices.title') }}
-  </NTooltip>
-  <NModal v-model:show="showModal" :show-icon="false">
+    </button>
+  </a-tooltip>
+  <a-modal v-model:visible="showModal" :footer="false" :closable="false">
     <div class="mcu-device-dialog">
       <div class="mcu-device-header">
         <div>
@@ -287,63 +293,61 @@ function confirmDeleteDevice(device: McuDevice) {
         </button>
       </div>
       <div class="mcu-device-table">
-        <NDataTable
+        <a-table
           style="height: 100%;"
           size="small"
           :columns="columns"
           :data="devices"
           :loading="loading"
           :bordered="false"
-          :single-line="false"
-          :row-key="(row: McuDevice) => row.id"
-          flex-height
+          :pagination="false"
+          row-key="id"
+          :scroll="{ y: '100%' }"
         />
       </div>
       <div class="mcu-device-actions">
-        <NButton type="primary" @click="openAddModal">{{ t('mcuDevices.add') }}</NButton>
-        <NButton secondary @click="openPurchasePage">{{ t('mcuDevices.purchase') }}</NButton>
+        <a-button type="primary" @click="openAddModal">{{ t('mcuDevices.add') }}</a-button>
+        <a-button type="secondary" @click="openPurchasePage">{{ t('mcuDevices.purchase') }}</a-button>
       </div>
     </div>
-  </NModal>
-  <NModal
-    v-model:show="showAddModal"
-    preset="dialog"
+  </a-modal>
+  <a-modal
+    v-model:visible="showAddModal"
     :title="t('mcuDevices.addTitle')"
-    :positive-text="t('mcuDevices.add')"
-    :negative-text="t('common.cancel')"
-    :positive-button-props="{ loading: saving }"
-    @positive-click="submitDevice"
+    :ok-text="t('mcuDevices.add')"
+    :cancel-text="t('common.cancel')"
+    :ok-loading="saving"
+    @before-ok="submitDevice"
   >
-    <NForm label-placement="top">
-      <NFormItem :label="t('mcuDevices.name')">
-        <NInput v-model:value="form.name" :placeholder="t('mcuDevices.nameOptional')" :disabled="saving" />
-      </NFormItem>
-      <NFormItem :label="t('mcuDevices.deviceCode')" required>
-        <NInput
-          v-model:value="form.device_code"
+    <a-form :model="form" layout="vertical">
+      <a-form-item :label="t('mcuDevices.name')">
+        <a-input v-model="form.name" :placeholder="t('mcuDevices.nameOptional')" :disabled="saving" />
+      </a-form-item>
+      <a-form-item :label="t('mcuDevices.deviceCode')" required>
+        <a-input
+          v-model="form.device_code"
           :placeholder="t('mcuDevices.deviceCodePlaceholder')"
           :disabled="saving"
           @keydown.enter.prevent="submitDevice"
         />
-      </NFormItem>
-    </NForm>
-  </NModal>
-  <NModal
-    v-model:show="editing"
-    preset="dialog"
+      </a-form-item>
+    </a-form>
+  </a-modal>
+  <a-modal
+    v-model:visible="editing"
     :title="t('mcuDevices.editNameTitle')"
-    :positive-text="t('common.save')"
-    :negative-text="t('common.cancel')"
-    :positive-button-props="{ loading: saving }"
-    @positive-click="submitEdit"
+    :ok-text="t('common.save')"
+    :cancel-text="t('common.cancel')"
+    :ok-loading="saving"
+    @before-ok="submitEdit"
   >
-    <NInput
-      v-model:value="editForm.name"
+    <a-input
+      v-model="editForm.name"
       :placeholder="t('mcuDevices.nameOptional')"
       :disabled="saving"
       @keydown.enter.prevent="submitEdit"
     />
-  </NModal>
+  </a-modal>
   <!-- Style 3: current scan line
   <svg class="settings-circuit-badge settings-circuit-badge--scan" viewBox="0 0 36 20" fill="none" aria-hidden="true">
     <path class="settings-scan-track" d="M3 10h6l3-5h7l3 10h5l3-5h3" />
@@ -463,22 +467,25 @@ function confirmDeleteDevice(device: McuDevice) {
   padding: 12px 18px;
   overflow: hidden;
 
-  :deep(.n-data-table) {
-    height: 100%;
-    --n-td-color: var(--bg-card);
-    --n-th-color: var(--bg-secondary);
-    --n-border-color: var(--border-color);
-    --n-td-text-color: var(--text-primary);
-    --n-th-text-color: var(--text-secondary);
-  }
-
-  :deep(.n-data-table-base-table) {
+  :deep(.arco-table-container) {
     height: 100%;
   }
 
-  :deep(.n-data-table-base-table-body) {
+  :deep(.arco-table-body) {
     overflow-y: auto;
   }
+
+  :deep(.arco-table-th) {
+    background-color: var(--bg-secondary);
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  :deep(.arco-table-td) {
+    background-color: var(--bg-card);
+    color: var(--text-primary);
+    border-bottom-color: var(--border-color);
+  }
 }
 
 @media (max-width: 640px) {
@@ -490,7 +497,7 @@ function confirmDeleteDevice(device: McuDevice) {
   .mcu-device-actions {
     justify-content: stretch;
 
-    :deep(.n-button) {
+    :deep(.arco-btn) {
       flex: 1;
     }
   }
diff --git a/packages/client/src/styles/global.scss b/packages/client/src/styles/global.scss
index 2c56594..e4ff928 100644
--- a/packages/client/src/styles/global.scss
+++ b/packages/client/src/styles/global.scss
@@ -259,14 +259,14 @@ a {
 }
 
 // Prevent iOS Safari auto-zoom on input focus by ensuring font-size is at least 16px
+// Arco 的 a-input 渲染原生 <input>，已被上面的元素选择器覆盖；
+// 需要额外兜住的是 a-textarea（渲染 textarea，字体继承自容器）与 Arco 包装层。
 @media (max-width: 768px) {
   input,
   textarea,
   select,
-  .n-input,
-  .n-input__input-element,
-  .n-input__textarea-el,
-  .n-input__textarea-element {
+  .arco-input,
+  .arco-textarea {
     font-size: 16px !important;
   }
 }
diff --git a/packages/client/src/styles/theme.ts b/packages/client/src/styles/theme.ts
deleted file mode 100644
index 28b9f21..0000000
--- a/packages/client/src/styles/theme.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import type { GlobalThemeOverrides } from 'naive-ui'
-
-export const lightThemeOverrides: GlobalThemeOverrides = {
-  common: {
-    primaryColor: '#333333',
-    primaryColorHover: '#1a1a1a',
-    primaryColorPressed: '#000000',
-    primaryColorSuppl: '#333333',
-    bodyColor: '#fafafa',
-    cardColor: '#ffffff',
-    modalColor: '#ffffff',
-    popoverColor: '#ffffff',
-    tableColor: '#ffffff',
-    inputColor: '#ffffff',
-    actionColor: '#f0f0f0',
-    textColorBase: '#1a1a1a',
-    textColor1: '#1a1a1a',
-    textColor2: '#666666',
-    textColor3: '#999999',
-    dividerColor: '#e0e0e0',
-    borderColor: '#e0e0e0',
-    hoverColor: 'rgba(0, 0, 0, 0.04)',
-    borderRadius: '8px',
-    borderRadiusSmall: '6px',
-    fontSize: '14px',
-    fontSizeMedium: '14px',
-    heightMedium: '36px',
-    fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
-    fontFamilyMono: 'JetBrains Mono, Fira Code, Consolas, monospace',
-  },
-  Layout: {
-    color: '#fafafa',
-    siderColor: '#f5f5f5',
-    headerColor: '#fafafa',
-  },
-  Menu: {
-    itemTextColorActive: '#1a1a1a',
-    itemTextColorActiveHover: '#1a1a1a',
-    itemTextColorChildActive: '#1a1a1a',
-    itemIconColorActive: '#1a1a1a',
-    itemIconColorActiveHover: '#000000',
-    itemColorActive: 'rgba(0, 0, 0, 0.06)',
-    itemColorActiveHover: 'rgba(0, 0, 0, 0.1)',
-    arrowColorActive: '#1a1a1a',
-  },
-  Button: {
-    textColorPrimary: '#ffffff',
-    colorPrimary: '#333333',
-    colorHoverPrimary: '#1a1a1a',
-    colorPressedPrimary: '#000000',
-  },
-  Input: {
-    color: '#ffffff',
-    colorFocus: '#ffffff',
-    border: '1px solid #e0e0e0',
-    borderHover: '1px solid #999999',
-    borderFocus: '1px solid #333333',
-    borderDisabled: '1px solid #ebebeb',
-    groupLabelBorder: '1px solid #e0e0e0',
-    placeholderColor: '#999999',
-    caretColor: '#1a1a1a',
-  },
-  InternalSelection: {
-    border: '1px solid #e0e0e0',
-    borderHover: '1px solid #999999',
-    borderActive: '1px solid #333333',
-    borderFocus: '1px solid #333333',
-  },
-  Card: {
-    color: '#ffffff',
-    borderColor: '#e0e0e0',
-  },
-  Modal: {
-    color: '#ffffff',
-  },
-  Tag: {
-    borderRadius: '6px',
-  },
-}
-
-export const darkThemeOverrides: GlobalThemeOverrides = {
-  common: {
-    primaryColor: '#e0e0e0',
-    primaryColorHover: '#f5f5f5',
-    primaryColorPressed: '#ffffff',
-    primaryColorSuppl: '#e0e0e0',
-    bodyColor: '#1a1a1a',
-    cardColor: '#2a2a2a',
-    modalColor: '#2a2a2a',
-    popoverColor: '#2a2a2a',
-    tableColor: '#2a2a2a',
-    inputColor: '#2a2a2a',
-    actionColor: '#252525',
-    textColorBase: '#e0e0e0',
-    textColor1: '#e0e0e0',
-    textColor2: '#a0a0a0',
-    textColor3: '#666666',
-    dividerColor: '#3a3a3a',
-    borderColor: '#3a3a3a',
-    hoverColor: 'rgba(255, 255, 255, 0.06)',
-    borderRadius: '8px',
-    borderRadiusSmall: '6px',
-    fontSize: '14px',
-    fontSizeMedium: '14px',
-    heightMedium: '36px',
-    fontFamily: 'Inter, system-ui, -apple-system, sans-serif',
-    fontFamilyMono: 'JetBrains Mono, Fira Code, Consolas, monospace',
-  },
-  Layout: {
-    color: '#1a1a1a',
-    siderColor: '#202020',
-    headerColor: '#1a1a1a',
-  },
-  Menu: {
-    itemTextColorActive: '#e0e0e0',
-    itemTextColorActiveHover: '#e0e0e0',
-    itemTextColorChildActive: '#e0e0e0',
-    itemIconColorActive: '#e0e0e0',
-    itemIconColorActiveHover: '#ffffff',
-    itemColorActive: 'rgba(255, 255, 255, 0.08)',
-    itemColorActiveHover: 'rgba(255, 255, 255, 0.12)',
-    arrowColorActive: '#e0e0e0',
-  },
-  Button: {
-    textColorPrimary: '#1a1a1a',
-    colorPrimary: '#e0e0e0',
-    colorHoverPrimary: '#f5f5f5',
-    colorPressedPrimary: '#ffffff',
-  },
-  Input: {
-    color: '#2a2a2a',
-    colorFocus: '#2a2a2a',
-    border: '1px solid #555555',
-    borderHover: '1px solid #777777',
-    borderFocus: '1px solid #e0e0e0',
-    borderDisabled: '1px solid #3a3a3a',
-    groupLabelBorder: '1px solid #555555',
-    placeholderColor: '#666666',
-    caretColor: '#e0e0e0',
-  },
-  InternalSelection: {
-    border: '1px solid #555555',
-    borderHover: '1px solid #777777',
-    borderActive: '1px solid #e0e0e0',
-    borderFocus: '1px solid #e0e0e0',
-  },
-  Card: {
-    color: '#2a2a2a',
-    borderColor: '#3a3a3a',
-  },
-  Modal: {
-    color: '#2a2a2a',
-  },
-  Tag: {
-    borderRadius: '6px',
-  },
-  Switch: {
-    railColor: '#3a3a3a',
-    railColorActive: '#66bb6a',
-    loadingColor: '#e0e0e0',
-    opacityDisabled: 0.4,
-  },
-}
-
-export function getThemeOverrides(isDark: boolean, isComic?: boolean): GlobalThemeOverrides {
-  const base = isDark ? darkThemeOverrides : lightThemeOverrides
-  if (!isComic) return base
-  const comicFont = "'Comic Neue', 'ZCOOL KuaiLe', 'Zen Maru Gothic', 'Gaegu', cursive, sans-serif"
-  return {
-    ...base,
-    common: {
-      ...base.common!,
-      fontFamily: comicFont,
-    },
-  }
-}
diff --git a/packages/client/src/views/hermes/ChannelsView.vue b/packages/client/src/views/hermes/ChannelsView.vue
index a688146..af02261 100644
--- a/packages/client/src/views/hermes/ChannelsView.vue
+++ b/packages/client/src/views/hermes/ChannelsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { NSpin } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
 import { useProfilesStore } from '@/stores/hermes/profiles'
@@ -29,9 +28,9 @@ onMounted(() => {
     </header>
 
     <div class="channels-content">
-      <NSpin :show="settingsStore.loading || settingsStore.saving" size="large" :description="t('common.loading')">
+      <a-spin :loading="settingsStore.loading || settingsStore.saving" :tip="t('common.loading')">
         <PlatformSettings v-if="!settingsStore.loading" />
-      </NSpin>
+      </a-spin>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/views/hermes/DevicesView.vue b/packages/client/src/views/hermes/DevicesView.vue
index 62ff885..2b2dbca 100644
--- a/packages/client/src/views/hermes/DevicesView.vue
+++ b/packages/client/src/views/hermes/DevicesView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { NButton, NDrawer, NDrawerContent, NInput, NModal, NPopconfirm, NSpin, NTag } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { copyToClipboard } from '@/utils/clipboard'
@@ -65,9 +64,11 @@ function endpointLabel(kind: LanEndpointKind): string {
   return t(`devices.endpoint.${kind}`)
 }
 
-function endpointTagType(kind: LanEndpointKind) {
-  if (kind === 'web') return 'info'
-  return 'default'
+// Arco 的 a-tag 用 color 而不是 naive 的 type，且没有 round/shape prop，
+// 圆角靠 CSS 还原（见 .device-tag）。
+function endpointTagColor(kind: LanEndpointKind) {
+  if (kind === 'web') return 'arcoblue'
+  return 'gray'
 }
 
 function inboundStatusLabel(status: DeviceInboundStatus): string {
@@ -82,20 +83,20 @@ function pairedLabel(device: LanDeviceInfo): string {
   return device.outbound_status === 'approved' ? t('devices.paired') : outboundStatusLabel(device.outbound_status)
 }
 
-function pairedTagType(device: LanDeviceInfo) {
-  if (device.outbound_status === 'approved') return 'success'
-  if (device.outbound_status === 'pending') return 'info'
-  if (device.outbound_status === 'blocked') return 'error'
-  if (device.outbound_status === 'rejected') return 'warning'
-  return 'default'
+function pairedTagColor(device: LanDeviceInfo) {
+  if (device.outbound_status === 'approved') return 'green'
+  if (device.outbound_status === 'pending') return 'arcoblue'
+  if (device.outbound_status === 'blocked') return 'red'
+  if (device.outbound_status === 'rejected') return 'orange'
+  return 'gray'
 }
 
 function onlineLabel(device: LanDeviceInfo): string {
   return device.online ? t('devices.online') : t('devices.offline')
 }
 
-function onlineTagType(device: LanDeviceInfo) {
-  return device.online ? 'success' : 'default'
+function onlineTagColor(device: LanDeviceInfo) {
+  return device.online ? 'green' : 'gray'
 }
 
 function canRequestPairing(device: LanDeviceInfo): boolean {
@@ -120,8 +121,8 @@ function requestProcessLabel(device: LanDeviceInfo): string {
   return requestProcessed(device) ? t('devices.processed') : t('devices.unprocessed')
 }
 
-function requestProcessTagType(device: LanDeviceInfo) {
-  return requestProcessed(device) ? 'success' : 'warning'
+function requestProcessTagColor(device: LanDeviceInfo) {
+  return requestProcessed(device) ? 'green' : 'orange'
 }
 
 function formatOs(device: LanDeviceInfo): string {
@@ -279,41 +280,41 @@ onMounted(() => {
     <header class="page-header">
       <h2 class="header-title">{{ t('devices.title') }}</h2>
       <div class="header-actions">
-        <NInput
-          v-model:value="manualPairingUrl"
+        <a-input
+          v-model="manualPairingUrl"
           class="manual-pairing-input"
           size="small"
-          clearable
+          allow-clear
           :placeholder="t('devices.manualUrlPlaceholder')"
           :disabled="manualPairing"
-          @keyup.enter="requestManualPairing"
+          @press-enter="requestManualPairing"
         />
-        <NButton size="small" :loading="manualPairing" @click="requestManualPairing">
+        <a-button size="small" :loading="manualPairing" @click="requestManualPairing">
           {{ t('devices.manualPairing') }}
-        </NButton>
-        <NButton size="small" :loading="copyingPairingLink" @click="copyPairingLink">
+        </a-button>
+        <a-button size="small" :loading="copyingPairingLink" @click="copyPairingLink">
           {{ t('devices.copyPairingLink') }}
-        </NButton>
+        </a-button>
         <div class="header-meta">
           <span>{{ t('devices.count', { count: devices.length }) }}</span>
           <span>{{ t('devices.lastScanned', { time: formatTime(state.last_scanned_at) }) }}</span>
         </div>
-        <NButton size="small" @click="showRequests = true">
+        <a-button size="small" @click="showRequests = true">
           {{ requestCountLabel() }}
-        </NButton>
-        <NButton size="small" type="primary" :loading="scanning || state.scanning" @click="refreshDevices">
+        </a-button>
+        <a-button size="small" type="primary" :loading="scanning || state.scanning" @click="refreshDevices">
           {{ t('devices.refresh') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
-    <NSpin :show="loading" class="devices-spin">
+    <a-spin :loading="loading" class="devices-spin">
       <div class="devices-content">
         <div v-if="devices.length === 0 && !loading" class="empty-state">
           <div class="empty-title">{{ t('devices.empty') }}</div>
-          <NButton size="small" :loading="scanning || state.scanning" @click="refreshDevices">
+          <a-button size="small" :loading="scanning || state.scanning" @click="refreshDevices">
             {{ t('devices.refresh') }}
-          </NButton>
+          </a-button>
         </div>
 
         <div v-else class="device-grid">
@@ -326,21 +327,21 @@ onMounted(() => {
                 </a>
                 <span v-else class="device-link">{{ device.ip }}:{{ device.http_port }}</span>
               </div>
-              <NTag size="small" :type="endpointTagType(device.endpoint_kind)" round>
-                    {{ endpointLabel(device.endpoint_kind) }}
-              </NTag>
+              <a-tag size="small" class="device-tag" :color="endpointTagColor(device.endpoint_kind)">
+                {{ endpointLabel(device.endpoint_kind) }}
+              </a-tag>
             </div>
 
             <div class="device-status-row">
-              <NTag size="small" :type="onlineTagType(device)" round>
+              <a-tag size="small" class="device-tag" :color="onlineTagColor(device)">
                 {{ onlineLabel(device) }}
-              </NTag>
-              <NTag size="small" :type="pairedTagType(device)" round>
+              </a-tag>
+              <a-tag size="small" class="device-tag" :color="pairedTagColor(device)">
                 {{ pairedLabel(device) }}
-              </NTag>
-              <NTag v-if="device.inbound_status === 'blocked'" size="small" type="error" round>
+              </a-tag>
+              <a-tag v-if="device.inbound_status === 'blocked'" size="small" class="device-tag" color="red">
                 {{ inboundStatusLabel(device.inbound_status) }}
-              </NTag>
+              </a-tag>
             </div>
 
             <dl class="device-meta-list">
@@ -363,102 +364,97 @@ onMounted(() => {
             </dl>
 
             <div class="device-actions">
-              <NButton v-if="canRequestPairing(device)" size="tiny" type="primary" :loading="updatingDeviceId === device.id" @click="openPairingCodeModal(device)">
+              <a-button v-if="canRequestPairing(device)" size="mini" type="primary" :loading="updatingDeviceId === device.id" @click="openPairingCodeModal(device)">
                 {{ t('devices.requestPairing') }}
-              </NButton>
-              <NButton
+              </a-button>
+              <a-button
                 v-if="canBlock(device)"
-                size="tiny"
-                quaternary
-                type="error"
+                size="mini"
+                type="text"
+                status="danger"
                 :loading="updatingDeviceId === device.id"
                 @click="updateDevice(device, 'block')"
               >
                 {{ t('devices.block') }}
-              </NButton>
-              <NButton
+              </a-button>
+              <a-button
                 v-else
-                size="tiny"
-                quaternary
+                size="mini"
+                type="text"
                 :loading="updatingDeviceId === device.id"
                 @click="updateDevice(device, 'unblock')"
               >
                 {{ t('devices.unblock') }}
-              </NButton>
+              </a-button>
             </div>
           </article>
         </div>
       </div>
-    </NSpin>
+    </a-spin>
 
-    <NDrawer v-model:show="showRequests" width="min(420px, 100vw)" placement="right">
-      <NDrawerContent :title="t('devices.requests')" closable>
-        <div v-if="state.requests.length === 0" class="request-empty">
-          {{ t('devices.noRequests') }}
-        </div>
-        <div v-else class="request-list">
-          <article v-for="requestDevice in state.requests" :key="requestDevice.id" class="request-item">
-            <div>
-              <div class="request-name">{{ requestDevice.computer_name || requestDevice.ip }}</div>
-              <div class="request-meta">{{ requestDevice.ip }}:{{ requestDevice.http_port }}</div>
-              <div class="request-status-row">
-                <NTag size="small" :type="requestProcessTagType(requestDevice)" round>
-                  {{ requestProcessLabel(requestDevice) }}
-                </NTag>
-                <NTag size="small" :type="requestDevice.inbound_status === 'blocked' ? 'error' : requestDevice.inbound_status === 'rejected' ? 'warning' : requestDevice.inbound_status === 'approved' ? 'success' : 'info'" round>
-                  {{ inboundStatusLabel(requestDevice.inbound_status) }}
-                </NTag>
-              </div>
+    <a-drawer v-model:visible="showRequests" width="min(420px, 100vw)" placement="right" :footer="false" :title="t('devices.requests')">
+      <div v-if="state.requests.length === 0" class="request-empty">
+        {{ t('devices.noRequests') }}
+      </div>
+      <div v-else class="request-list">
+        <article v-for="requestDevice in state.requests" :key="requestDevice.id" class="request-item">
+          <div>
+            <div class="request-name">{{ requestDevice.computer_name || requestDevice.ip }}</div>
+            <div class="request-meta">{{ requestDevice.ip }}:{{ requestDevice.http_port }}</div>
+            <div class="request-status-row">
+              <a-tag size="small" class="device-tag" :color="requestProcessTagColor(requestDevice)">
+                {{ requestProcessLabel(requestDevice) }}
+              </a-tag>
+              <a-tag size="small" class="device-tag" :color="requestDevice.inbound_status === 'blocked' ? 'red' : requestDevice.inbound_status === 'rejected' ? 'orange' : requestDevice.inbound_status === 'approved' ? 'green' : 'arcoblue'">
+                {{ inboundStatusLabel(requestDevice.inbound_status) }}
+              </a-tag>
             </div>
-            <div class="request-actions">
-              <NButton v-if="requestDevice.inbound_status === 'pending'" size="tiny" type="success" :loading="updatingDeviceId === requestDevice.id" @click="updateDevice(requestDevice, 'approve')">
-                {{ t('devices.approve') }}
-              </NButton>
-              <NButton v-if="requestDevice.inbound_status === 'pending'" size="tiny" quaternary type="warning" :loading="updatingDeviceId === requestDevice.id" @click="updateDevice(requestDevice, 'reject')">
-                {{ t('devices.reject') }}
-              </NButton>
-              <NButton v-if="requestDevice.inbound_status === 'pending'" size="tiny" quaternary type="error" :loading="updatingDeviceId === requestDevice.id" @click="updateDevice(requestDevice, 'block')">
-                {{ t('devices.block') }}
-              </NButton>
-              <NPopconfirm @positive-click="updateDevice(requestDevice, 'deleteHistory')">
-                <template #trigger>
-                  <NButton size="tiny" quaternary type="error" :loading="updatingDeviceId === requestDevice.id">
-                    {{ t('devices.deleteHistory') }}
-                  </NButton>
-                </template>
-                {{ t('devices.deleteHistoryConfirm') }}
-              </NPopconfirm>
-            </div>
-          </article>
-        </div>
-      </NDrawerContent>
-    </NDrawer>
+          </div>
+          <div class="request-actions">
+            <a-button v-if="requestDevice.inbound_status === 'pending'" size="mini" type="primary" status="success" :loading="updatingDeviceId === requestDevice.id" @click="updateDevice(requestDevice, 'approve')">
+              {{ t('devices.approve') }}
+            </a-button>
+            <a-button v-if="requestDevice.inbound_status === 'pending'" size="mini" type="text" status="warning" :loading="updatingDeviceId === requestDevice.id" @click="updateDevice(requestDevice, 'reject')">
+              {{ t('devices.reject') }}
+            </a-button>
+            <a-button v-if="requestDevice.inbound_status === 'pending'" size="mini" type="text" status="danger" :loading="updatingDeviceId === requestDevice.id" @click="updateDevice(requestDevice, 'block')">
+              {{ t('devices.block') }}
+            </a-button>
+            <a-popconfirm :content="t('devices.deleteHistoryConfirm')" @ok="updateDevice(requestDevice, 'deleteHistory')">
+              <a-button size="mini" type="text" status="danger" :loading="updatingDeviceId === requestDevice.id">
+                {{ t('devices.deleteHistory') }}
+              </a-button>
+            </a-popconfirm>
+          </div>
+        </article>
+      </div>
+    </a-drawer>
 
-    <NModal v-model:show="showPairingCodeModal" :mask-closable="!pairingRequesting" @esc="closePairingCodeModal">
+    <a-modal v-model:visible="showPairingCodeModal" :footer="false" :closable="false" :mask-closable="!pairingRequesting" :esc-to-close="!pairingRequesting" @cancel="closePairingCodeModal">
       <div class="pairing-code-dialog">
         <div class="pairing-code-title">{{ t('devices.pairingCodeTitle') }}</div>
-        <NInput
-          v-model:value="pairingCodeInput"
-          clearable
+        <a-input
+          v-model="pairingCodeInput"
+          allow-clear
           :placeholder="t('devices.pairingCodePlaceholder')"
           :disabled="pairingRequesting"
-          @keyup.enter="confirmPairingRequest"
+          @press-enter="confirmPairingRequest"
         />
         <div class="pairing-code-actions">
-          <NButton :disabled="pairingRequesting" @click="closePairingCodeModal">
+          <a-button :disabled="pairingRequesting" @click="closePairingCodeModal">
             {{ t('common.cancel') }}
-          </NButton>
-          <NButton
+          </a-button>
+          <a-button
             type="primary"
             :loading="pairingRequesting"
             :disabled="!pairingCodeInput.trim()"
             @click="confirmPairingRequest"
           >
             {{ t('devices.submitPairingRequest') }}
-          </NButton>
+          </a-button>
         </div>
       </div>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
@@ -494,14 +490,12 @@ onMounted(() => {
   line-height: 1.2;
 }
 
+// Arco 的 a-spin 没有 naive 的两层包裹节点，.devices-content 就是 .arco-spin
+// 的直接子节点，因此不需要 :deep() 穿透。
 .devices-spin {
   flex: 1;
+  height: 100%;
   min-height: 0;
-
-  :deep(.n-spin-container),
-  :deep(.n-spin-content) {
-    height: 100%;
-  }
 }
 
 .devices-content {
@@ -608,6 +602,12 @@ onMounted(() => {
   margin-top: auto;
 }
 
+// naive 的圆角标签是 border-radius: calc(height / 2)，Arco 的 a-tag 没有
+// shape/round prop，只能用同等圆角还原。
+.device-tag {
+  border-radius: 999px;
+}
+
 .request-empty {
   padding: 40px 0;
   color: $text-muted;
diff --git a/packages/client/src/views/hermes/HistoryView.vue b/packages/client/src/views/hermes/HistoryView.vue
index b04250c..8f0b430 100644
--- a/packages/client/src/views/hermes/HistoryView.vue
+++ b/packages/client/src/views/hermes/HistoryView.vue
@@ -5,7 +5,6 @@ import { type Session } from '@/stores/hermes/chat'
 import { useAppStore } from '@/stores/hermes/app'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import { useSessionBrowserPrefsStore } from '@/stores/hermes/session-browser-prefs'
-import { NButton, NDropdown, NPopconfirm, NTooltip, type DropdownOption } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { getSourceLabel } from '@/shared/session-display'
@@ -54,6 +53,16 @@ const contextSessionId = ref<string | null>(null)
 const showContextMenu = ref(false)
 const contextMenuX = ref(0)
 const contextMenuY = ref(0)
+
+// Arco's a-trigger has no x/y props. The popup is teleported to body with
+// position:absolute, so page coordinates are the right basis here; the computed
+// style overrides whatever getPopupStyle() derived from the anchor. Callers keep
+// storing clientX/clientY, so the scroll offset is added at style-build time.
+const contextMenuStyle = computed(() => ({
+  left: `${contextMenuX.value + window.scrollX}px`,
+  top: `${contextMenuY.value + window.scrollY}px`,
+}))
+
 let hermesSessionsRequestId = 0
 
 const HISTORY_PAGE_SIZE = 150
@@ -103,8 +112,10 @@ const contextSessionPinned = computed(() =>
   contextSessionId.value ? sessionBrowserPrefsStore.isPinned(contextSessionId.value) : false,
 )
 
-const contextMenuOptions = computed<DropdownOption[]>(() => {
-  const options: DropdownOption[] = [
+type HistoryContextMenuOption = { label: string; key: string; disabled?: boolean }
+
+const contextMenuOptions = computed<HistoryContextMenuOption[]>(() => {
+  const options: HistoryContextMenuOption[] = [
     {
       label: t('chat.importToWebUi'),
       key: 'import-webui',
@@ -608,10 +619,6 @@ function handleContextMenu(e: MouseEvent, sessionId: string) {
   contextMenuY.value = e.clientY
 }
 
-function handleClickOutside() {
-  showContextMenu.value = false
-}
-
 async function handleImportToWebUi(sessionId: string) {
   const summary = findHistorySession(sessionId)
   try {
@@ -751,10 +758,10 @@ function handleBatchDeleteConfirm() {
             <button class="session-close-btn" @click="showSessions = false">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
-            <NButton
+            <a-button
               v-if="!isBatchMode"
-              quaternary
-              size="tiny"
+              type="text"
+              size="mini"
               :disabled="hermesSessions.length === 0"
               :title="t('chat.toggleBatchMode')"
               @click="toggleBatchMode"
@@ -765,11 +772,11 @@ function handleBatchDeleteConfirm() {
                   <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
                 </svg>
               </template>
-            </NButton>
-            <NButton
+            </a-button>
+            <a-button
               v-if="isBatchMode"
-              quaternary
-              size="tiny"
+              type="text"
+              size="mini"
               :disabled="!canSelectAll || isBatchDeleting"
               :title="allSessionsSelected ? t('common.cancel') : t('chat.selectAll')"
               @click="toggleSelectAllSessions"
@@ -780,37 +787,35 @@ function handleBatchDeleteConfirm() {
                   <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
                 </svg>
               </template>
-            </NButton>
-            <NPopconfirm
+            </a-button>
+            <a-popconfirm
               v-if="isBatchMode && selectedCount > 0"
-              v-model:show="showBatchDeleteConfirm"
-              :positive-button-props="{ loading: isBatchDeleting, disabled: isBatchDeleting }"
-              :negative-button-props="{ disabled: isBatchDeleting }"
-              @positive-click="handleBatchDeleteConfirm"
+              v-model:visible="showBatchDeleteConfirm"
+              :content="t('chat.confirmBatchDelete', { count: selectedCount })"
+              :ok-button-props="{ loading: isBatchDeleting, disabled: isBatchDeleting }"
+              :cancel-button-props="{ disabled: isBatchDeleting }"
+              @ok="handleBatchDeleteConfirm"
             >
-              <template #trigger>
-                <NButton quaternary size="tiny" type="error" :loading="isBatchDeleting" :disabled="isBatchDeleting">
-                  <template #icon>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <polyline points="3 6 5 6 21 6" />
-                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                    </svg>
-                  </template>
-                </NButton>
-              </template>
-              {{ t('chat.confirmBatchDelete', { count: selectedCount }) }}
-            </NPopconfirm>
-            <NButton
+              <a-button type="text" size="mini" status="danger" :loading="isBatchDeleting" :disabled="isBatchDeleting">
+                <template #icon>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                  </svg>
+                </template>
+              </a-button>
+            </a-popconfirm>
+            <a-button
               v-if="isBatchMode"
-              quaternary
-              size="tiny"
+              type="text"
+              size="mini"
               :disabled="isBatchDeleting"
               @click="toggleBatchMode"
             >
               <template #icon>
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
               </template>
-            </NButton>
+            </a-button>
           </div>
         </div>
       </div>
@@ -870,50 +875,55 @@ function handleBatchDeleteConfirm() {
       <PageSidebarFooter v-if="showSessions" />
     </aside>
 
-    <NDropdown
-      placement="bottom-start"
-      trigger="manual"
-      :x="contextMenuX"
-      :y="contextMenuY"
-      :options="contextMenuOptions"
-      :show="showContextMenu"
-      @select="handleContextMenuSelect"
-      @clickoutside="handleClickOutside"
-    />
+    <a-trigger
+      position="bl"
+      trigger="contextMenu"
+      v-model:popup-visible="showContextMenu"
+      :popup-style="contextMenuStyle"
+      :auto-fit-position="false"
+    >
+      <span class="history-context-menu-anchor" />
+      <template #content>
+        <div class="history-context-menu">
+          <a-doption
+            v-for="option in contextMenuOptions"
+            :key="option.key"
+            :disabled="option.disabled"
+            @click="handleContextMenuSelect(option.key)"
+          >
+            {{ option.label }}
+          </a-doption>
+        </div>
+      </template>
+    </a-trigger>
 
     <div class="chat-main">
       <header class="chat-header">
         <div class="header-left">
-          <NButton class="history-sidebar-toggle" quaternary size="small" @click="showSessions = !showSessions" circle>
+          <a-button class="history-sidebar-toggle" type="text" size="small" shape="circle" @click="showSessions = !showSessions">
             <template #icon>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
             </template>
-          </NButton>
+          </a-button>
           <span class="header-session-title">{{ activeSessionTitle }}</span>
           <span v-if="activeSessionSource" class="source-badge">{{ getSourceLabel(activeSessionSource) }}</span>
           <span v-if="historySession?.workspace" class="workspace-badge" :title="historySession.workspace">📁 {{ historySession.workspace.split('/').pop() || historySession.workspace }}</span>
         </div>
         <div class="header-actions">
-          <NTooltip trigger="hover">
-            <template #trigger>
-              <NButton quaternary size="small" @click="showOutline = !showOutline" circle>
-                <template #icon>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
-                </template>
-              </NButton>
-            </template>
-            {{ t('chat.outlineTitle') }}
-          </NTooltip>
-          <NTooltip trigger="hover">
-            <template #trigger>
-              <NButton quaternary size="small" @click="copySessionId()" circle>
-                <template #icon>
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                </template>
-              </NButton>
-            </template>
-            {{ t('chat.copySessionId') }}
-          </NTooltip>
+          <a-tooltip trigger="hover" :content="t('chat.outlineTitle')">
+            <a-button type="text" size="small" shape="circle" @click="showOutline = !showOutline">
+              <template #icon>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
+              </template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip trigger="hover" :content="t('chat.copySessionId')">
+            <a-button type="text" size="small" shape="circle" @click="copySessionId()">
+              <template #icon>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+              </template>
+            </a-button>
+          </a-tooltip>
         </div>
       </header>
 
@@ -1122,6 +1132,15 @@ function handleBatchDeleteConfirm() {
   min-width: 0;
 }
 
+.history-context-menu-anchor {
+  display: none;
+}
+
+.history-context-menu {
+  min-width: 160px;
+  padding: 4px 0;
+}
+
 .chat-header {
   display: flex;
   align-items: center;
@@ -1140,7 +1159,7 @@ function handleBatchDeleteConfirm() {
   min-width: 0;
 }
 
-.header-left :deep(.n-button) {
+.header-left :deep(.arco-btn) {
   flex: 0 0 auto;
 }
 
diff --git a/packages/client/src/views/hermes/JobsView.vue b/packages/client/src/views/hermes/JobsView.vue
index 71be8b5..e241829 100644
--- a/packages/client/src/views/hermes/JobsView.vue
+++ b/packages/client/src/views/hermes/JobsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { NButton, NSpin, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import JobsPanel from '@/components/hermes/jobs/JobsPanel.vue'
 import JobRunHistory from '@/components/hermes/jobs/JobRunHistory.vue'
@@ -89,44 +88,42 @@ function arrowIcon(field: 'time' | 'name'): string {
       <h2 class="header-title">{{ t('jobs.title') }}</h2>
       <div class="header-actions">
         <div class="sort-toggle">
-          <NTooltip>
-            <template #trigger>
-              <NButton
-                size="tiny"
-                :type="sortBy === 'name' ? 'primary' : 'default'"
-                @click="toggleSort('name')"
-              >
-                {{ t('jobs.sortByName') }} <span class="sort-arrow">{{ arrowIcon('name') }}</span>
-              </NButton>
-            </template>
-            {{ sortBy === 'name' ? (sortAsc ? t('jobs.sortAsc') : t('jobs.sortDesc')) : t('jobs.sortByNameHint') }}
-          </NTooltip>
-          <NTooltip>
-            <template #trigger>
-              <NButton
-                size="tiny"
-                :type="sortBy === 'time' ? 'primary' : 'default'"
-                @click="toggleSort('time')"
-              >
-                {{ t('jobs.sortByTime') }} <span class="sort-arrow">{{ arrowIcon('time') }}</span>
-              </NButton>
-            </template>
-            {{ sortBy === 'time' ? (sortAsc ? t('jobs.sortAsc') : t('jobs.sortDesc')) : t('jobs.sortByTimeHint') }}
-          </NTooltip>
+          <a-tooltip
+            :content="sortBy === 'name' ? (sortAsc ? t('jobs.sortAsc') : t('jobs.sortDesc')) : t('jobs.sortByNameHint')"
+          >
+            <a-button
+              size="mini"
+              :type="sortBy === 'name' ? 'primary' : 'secondary'"
+              @click="toggleSort('name')"
+            >
+              {{ t('jobs.sortByName') }} <span class="sort-arrow">{{ arrowIcon('name') }}</span>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip
+            :content="sortBy === 'time' ? (sortAsc ? t('jobs.sortAsc') : t('jobs.sortDesc')) : t('jobs.sortByTimeHint')"
+          >
+            <a-button
+              size="mini"
+              :type="sortBy === 'time' ? 'primary' : 'secondary'"
+              @click="toggleSort('time')"
+            >
+              {{ t('jobs.sortByTime') }} <span class="sort-arrow">{{ arrowIcon('time') }}</span>
+            </a-button>
+          </a-tooltip>
         </div>
         <span class="sort-divider"></span>
-        <NButton type="primary" size="small" @click="openCreateModal">
+        <a-button type="primary" size="small" @click="openCreateModal">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           </template>
           {{ t('jobs.createJob') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
     <div class="jobs-split">
       <div class="jobs-top">
-        <NSpin :show="jobsStore.loading && jobsStore.jobs.length === 0">
+        <a-spin :loading="jobsStore.loading && jobsStore.jobs.length === 0">
           <JobsPanel
             :selected-job-id="selectedJobId"
             :sort-by="sortBy"
@@ -134,7 +131,7 @@ function arrowIcon(field: 'time' | 'name'): string {
             @edit="openEditModal"
             @select="handleSelectJob"
           />
-        </NSpin>
+        </a-spin>
       </div>
 
       <div class="splitter" />
diff --git a/packages/client/src/views/hermes/JourneyView.vue b/packages/client/src/views/hermes/JourneyView.vue
index fc138e9..92e85dd 100644
--- a/packages/client/src/views/hermes/JourneyView.vue
+++ b/packages/client/src/views/hermes/JourneyView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { NButton, NDrawer, NDrawerContent, NSpin, NTag } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchJourneyGraph, type JourneyGraphResponse, type JourneyMemory, type JourneyNode } from '@/api/hermes/journey'
@@ -646,7 +645,7 @@ watch(sceneNodes, () => {
         <h2 class="header-title">{{ t('journey.title') }}</h2>
       </div>
       <div class="header-actions">
-        <NButton
+        <a-button
           size="small"
           :disabled="!nodes.length"
           :aria-label="playing ? t('journey.pause') : t('journey.play')"
@@ -654,12 +653,12 @@ watch(sceneNodes, () => {
           @click="togglePlayback"
         >
           <span class="playback-icon" :class="{ playing }" aria-hidden="true" />
-        </NButton>
-        <NButton size="small" :loading="loading" @click="loadJourney">{{ t('journey.refresh') }}</NButton>
+        </a-button>
+        <a-button size="small" :loading="loading" @click="loadJourney">{{ t('journey.refresh') }}</a-button>
       </div>
     </header>
 
-    <NSpin :show="loading && !data" class="journey-spin">
+    <a-spin :loading="loading && !data" class="journey-spin">
       <main class="galaxy-layout">
         <section ref="canvasWrapRef" class="galaxy-canvas-wrap">
           <canvas
@@ -703,19 +702,19 @@ watch(sceneNodes, () => {
           </div>
         </section>
       </main>
-    </NSpin>
+    </a-spin>
 
-    <NDrawer v-model:show="detailDrawerOpen" :width="drawerWidth" placement="right">
-      <NDrawerContent v-if="selectedNode" class="journey-detail-drawer" :native-scrollbar="false" closable>
-        <template #header>
-          <div class="drawer-title-row">
-            <span>{{ detailTitle(selectedNode) }}</span>
-            <NTag size="small" :type="selectedNode.kind === 'memory' ? 'info' : 'success'" :bordered="false">
-              {{ selectedNode.kind }}
-            </NTag>
-          </div>
-        </template>
+    <a-drawer v-model:visible="detailDrawerOpen" :width="drawerWidth" placement="right" :footer="false" body-class="journey-detail-drawer">
+      <template #title>
+        <div v-if="selectedNode" class="drawer-title-row">
+          <span>{{ detailTitle(selectedNode) }}</span>
+          <a-tag size="small" :color="selectedNode.kind === 'memory' ? 'arcoblue' : 'green'" :bordered="false">
+            {{ selectedNode.kind }}
+          </a-tag>
+        </div>
+      </template>
 
+      <template v-if="selectedNode">
         <div v-if="isMemoryNode(selectedNode) && memoryText(selectedNode)" class="memory-card">
           <span class="detail-card-label">{{ t('journey.memories') }}</span>
           <p>{{ memoryText(selectedNode) }}</p>
@@ -745,9 +744,9 @@ watch(sceneNodes, () => {
           </div>
         </div>
 
-        <NTag v-if="selectedNode.pinned" size="small" type="warning" :bordered="false">{{ t('journey.pinned') }}</NTag>
-      </NDrawerContent>
-    </NDrawer>
+        <a-tag v-if="selectedNode.pinned" size="small" color="orange" :bordered="false">{{ t('journey.pinned') }}</a-tag>
+      </template>
+    </a-drawer>
   </div>
 </template>
 
@@ -785,16 +784,12 @@ watch(sceneNodes, () => {
   }
 }
 
+// Arco 的 a-spin 没有 naive 的两层包裹节点，插槽内容（.galaxy-layout）就是
+// .arco-spin 的直接子节点，且自带 height/min-height，因此不需要 :deep() 穿透。
 .journey-spin {
   flex: 1;
   height: 100%;
   min-height: 0;
-
-  :deep(.n-spin-container),
-  :deep(.n-spin-content) {
-    height: 100%;
-    min-height: 0;
-  }
 }
 
 .galaxy-layout {
@@ -925,12 +920,12 @@ watch(sceneNodes, () => {
   }
 }
 
-.journey-detail-drawer {
-  :deep(.n-drawer-body-content-wrapper) {
-    display: grid;
-    align-content: start;
-    gap: 14px;
-  }
+// a-drawer 的 body-class 直接落在 .arco-drawer-body 上；drawer 渲染在 body 下，
+// 所以选择器必须 :global()，否则 scoped 的 data-v 属性匹配不到。
+:global(.journey-detail-drawer) {
+  display: grid;
+  align-content: start;
+  gap: 14px;
 }
 
 .detail-card {
diff --git a/packages/client/src/views/hermes/KanbanView.vue b/packages/client/src/views/hermes/KanbanView.vue
index 3063b14..66469bc 100644
--- a/packages/client/src/views/hermes/KanbanView.vue
+++ b/packages/client/src/views/hermes/KanbanView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-import { NButton, NSelect, NSpin, NCollapse, NCollapseItem, NModal, NInput } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -237,48 +236,48 @@ async function handleDispatch() {
     <header class="page-header">
       <h2 class="header-title">{{ t('kanban.title') }}</h2>
       <div class="header-actions">
-        <NSelect
-          v-model:value="selectedBoardValue"
+        <a-select
+          v-model="selectedBoardValue"
           :options="boardOptions"
           :loading="kanbanStore.boardsLoading"
           size="small"
           style="width: 260px;"
         />
-        <NButton size="small" :loading="boardActionLoading" @click="showCreateBoardForm = true">
+        <a-button size="small" :loading="boardActionLoading" @click="showCreateBoardForm = true">
           {{ t('common.add') }}
-        </NButton>
-        <NButton
+        </a-button>
+        <a-button
           size="small"
-          secondary
+          type="secondary"
           :disabled="kanbanStore.selectedBoard === DEFAULT_KANBAN_BOARD"
           :loading="boardActionLoading"
           @click="handleArchiveSelectedBoard"
         >
           {{ t('kanban.board.archive') }}
-        </NButton>
-        <NButton size="small" secondary :loading="boardActionLoading" @click="handleDispatch">
+        </a-button>
+        <a-button size="small" type="secondary" :loading="boardActionLoading" @click="handleDispatch">
           {{ t('kanban.action.dispatch') }}
-        </NButton>
-        <NSelect
-          v-model:value="filterStatusValue"
+        </a-button>
+        <a-select
+          v-model="filterStatusValue"
           :options="statusFilterOptions"
           size="small"
           style="width: 150px;"
-          @update:value="handleApplyFilter"
+          @change="handleApplyFilter"
         />
-        <NSelect
-          v-model:value="filterAssigneeValue"
+        <a-select
+          v-model="filterAssigneeValue"
           :options="assigneeFilterOptions"
           size="small"
           style="width: 170px;"
-          @update:value="handleApplyFilter"
+          @change="handleApplyFilter"
         />
-        <NButton type="primary" size="small" @click="showCreateForm = true">
+        <a-button type="primary" size="small" @click="showCreateForm = true">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           </template>
           {{ t('kanban.createTask') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
@@ -309,14 +308,13 @@ async function handleDispatch() {
     </div>
 
     <!-- Board -->
-    <NSpin :show="kanbanStore.loading && kanbanStore.tasks.length === 0">
+    <a-spin :loading="kanbanStore.loading && kanbanStore.tasks.length === 0">
       <div class="kanban-board">
-        <NCollapse v-model:expanded-names="expandedStatusNames">
-          <NCollapseItem
+        <a-collapse v-model:active-key="expandedStatusNames" :bordered="false">
+          <a-collapse-item
             v-for="status in visibleBoardStatuses"
             :key="status"
-            :title="`${t(`kanban.columns.${status}`, status)} (${tasksByStatus[status].length})`"
-            :name="status"
+            :header="`${t(`kanban.columns.${status}`, status)} (${tasksByStatus[status].length})`"
             :class="['kanban-column', `status-${status}`]"
           >
             <template #header>
@@ -337,10 +335,10 @@ async function handleDispatch() {
                 {{ t('kanban.noTasks') }}
               </div>
             </div>
-          </NCollapseItem>
-        </NCollapse>
+          </a-collapse-item>
+        </a-collapse>
       </div>
-    </NSpin>
+    </a-spin>
 
     <!-- Task detail drawer -->
     <KanbanTaskDrawer
@@ -351,16 +349,16 @@ async function handleDispatch() {
     />
 
     <!-- Board management -->
-    <NModal v-model:show="showCreateBoardForm" preset="dialog" :title="t('kanban.board.create')" style="width: 420px;">
+    <a-modal v-model:visible="showCreateBoardForm" :title="t('kanban.board.create')" :style="{ width: '420px' }">
       <div class="board-form">
-        <NInput v-model:value="newBoardSlug" :placeholder="t('kanban.board.slugPlaceholder')" />
-        <NInput v-model:value="newBoardName" :placeholder="t('kanban.board.namePlaceholder')" />
+        <a-input v-model="newBoardSlug" :placeholder="t('kanban.board.slugPlaceholder')" />
+        <a-input v-model="newBoardName" :placeholder="t('kanban.board.namePlaceholder')" />
       </div>
-      <template #action>
-        <NButton @click="showCreateBoardForm = false">{{ t('common.cancel') }}</NButton>
-        <NButton type="primary" :loading="boardActionLoading" @click="handleCreateBoard">{{ t('common.create') }}</NButton>
+      <template #footer>
+        <a-button @click="showCreateBoardForm = false">{{ t('common.cancel') }}</a-button>
+        <a-button type="primary" :loading="boardActionLoading" @click="handleCreateBoard">{{ t('common.create') }}</a-button>
       </template>
-    </NModal>
+    </a-modal>
 
     <!-- Create form -->
     <KanbanCreateForm
diff --git a/packages/client/src/views/hermes/LogsView.vue b/packages/client/src/views/hermes/LogsView.vue
index 6368646..32d6e6c 100644
--- a/packages/client/src/views/hermes/LogsView.vue
+++ b/packages/client/src/views/hermes/LogsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { NSelect, NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchLogFiles, fetchLogs, type LogEntry } from '@/api/hermes/logs'
@@ -90,38 +89,38 @@ onMounted(async () => {
     <header class="page-header">
       <h2 class="header-title">{{ t('logs.title') }}</h2>
       <div class="header-actions">
-        <NSelect
-          v-model:value="selectedLog"
+        <a-select
+          v-model="selectedLog"
           :options="logOptions"
           size="small"
           class="input-md"
-          @update:value="loadLogs"
+          @change="loadLogs"
         />
-        <NSelect
-          :value="levelFilter"
+        <a-select
+          :model-value="levelFilter"
           :options="levelOptions"
           size="small"
           class="input-sm"
-          @update:value="(v: string) => { levelFilter = v; loadLogs() }"
+          @change="(v: any) => { levelFilter = v; loadLogs() }"
         />
-        <NSelect
-          :value="lineCount"
+        <a-select
+          :model-value="lineCount"
           :options="lineOptions"
           size="small"
           class="input-sm"
-          @update:value="(v: number) => { lineCount = v; loadLogs() }"
+          @change="(v: any) => { lineCount = v; loadLogs() }"
         />
         <input
           v-model="searchQuery"
           class="search-input"
           :placeholder="t('logs.searchPlaceholder')"
         />
-        <NButton size="small" :loading="loading" @click="loadLogs">{{ t('logs.refresh') }}</NButton>
+        <a-button size="small" :loading="loading" @click="loadLogs">{{ t('logs.refresh') }}</a-button>
       </div>
     </header>
 
     <div class="logs-body">
-      <NSpin :show="loading" class="logs-spin">
+      <a-spin :loading="loading" class="logs-spin">
         <div v-if="filteredEntries.length === 0 && !loading" class="logs-empty">
           {{ t('logs.noEntries') }}
         </div>
@@ -145,7 +144,7 @@ onMounted(async () => {
             <span v-else class="log-message">{{ entry.message }}</span>
           </div>
         </div>
-      </NSpin>
+      </a-spin>
     </div>
   </div>
 </template>
@@ -196,8 +195,9 @@ onMounted(async () => {
   min-height: 100%;
   display: block;
 
-  :deep(.n-spin-container),
-  :deep(.n-spin-content) {
+  // The previous library wrapped the default slot in two extra divs; a-spin
+  // renders the slot content as direct children instead.
+  > * {
     min-height: 100%;
   }
 }
diff --git a/packages/client/src/views/hermes/McpManagerView.vue b/packages/client/src/views/hermes/McpManagerView.vue
index cf98555..3689912 100644
--- a/packages/client/src/views/hermes/McpManagerView.vue
+++ b/packages/client/src/views/hermes/McpManagerView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, onUnmounted, ref } from 'vue'
 import yaml from 'js-yaml'
-import { NAlert, NButton, NEmpty, NInput, NModal, NSpin, NRadioGroup, NRadioButton, NCheckbox, NScrollbar } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import McpServerCard from '@/components/hermes/mcp/McpServerCard.vue'
@@ -488,20 +487,20 @@ async function saveToolsVisibility() {
     <header class="page-header">
       <h2 class="header-title">{{ t('mcp.title') }}</h2>
       <div class="header-actions">
-        <NButton size="small" quaternary :loading="loading" @click="_autoRetryCount = 0; loadServers()">
+        <a-button size="small" type="text" :loading="loading" @click="_autoRetryCount = 0; loadServers()">
           {{ t('mcp.refresh') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
     <div class="mcp-content" :class="{ 'is-loading': loading && servers.length === 0 }">
       <div v-if="loading && servers.length === 0" class="mcp-loading-state">
-        <NSpin />
+        <a-spin />
       </div>
       <template v-else>
-        <NAlert v-if="error" type="error" class="mcp-notice">
+        <a-alert v-if="error" type="error" class="mcp-notice">
           {{ error }}
-        </NAlert>
+        </a-alert>
 
         <div class="summary-grid">
           <div class="summary-card">
@@ -523,20 +522,20 @@ async function saveToolsVisibility() {
         </div>
 
         <div class="toolbar-row">
-          <NInput
-            v-model:value="searchQuery"
+          <a-input
+            v-model="searchQuery"
             :placeholder="t('mcp.searchPlaceholder')"
-            clearable
+            allow-clear
             size="small"
             class="search-input"
           />
           <div class="btn-group">
-            <NButton size="small" type="primary" @click="handleReload()">
+            <a-button size="small" type="primary" @click="handleReload()">
               {{ t('mcp.reloadAll') }}
-            </NButton>
-            <NButton type="primary" size="small" @click="openAddModal">
+            </a-button>
+            <a-button type="primary" size="small" @click="openAddModal">
               {{ t('mcp.addServer') }}
-            </NButton>
+            </a-button>
           </div>
         </div>
 
@@ -554,73 +553,82 @@ async function saveToolsVisibility() {
             @manage-tools="openToolsModal"
           />
         </div>
-        <NEmpty v-else :description="t('mcp.empty')" />
+        <a-empty v-else :description="t('mcp.empty')" />
       </template>
     </div>
 
-    <NModal v-model:show="showModal" :title="modalMode === 'add' ? t('mcp.addTitle') : t('mcp.editTitle')" preset="card" :style="{ width: 'min(520px, calc(100vw - 32px))' }">
+    <a-modal
+      v-model:visible="showModal"
+      :title="modalMode === 'add' ? t('mcp.addTitle') : t('mcp.editTitle')"
+      :footer="false"
+      width="min(520px, calc(100vw - 32px))"
+    >
       <div class="mode-switch-row">
-        <NRadioGroup v-model:value="inputMode" size="small" @update:value="handleModeChange">
-          <NRadioButton value="json">JSON</NRadioButton>
-          <NRadioButton value="yaml">YAML</NRadioButton>
-        </NRadioGroup>
+        <a-radio-group v-model="inputMode" size="small" @change="(v) => handleModeChange(v as 'json' | 'yaml')">
+          <a-radio value="json" type="button">JSON</a-radio>
+          <a-radio value="yaml" type="button">YAML</a-radio>
+        </a-radio-group>
       </div>
-      <NInput
-        v-model:value="jsonText"
-        type="textarea"
-        :rows="16"
+      <a-textarea
+        v-model="jsonText"
+        :auto-size="{ minRows: 16 }"
         class="config-textarea"
         :placeholder="placeholder"
-        :status="jsonError ? 'error' : undefined"
+        :error="!!jsonError"
         @input="handleInput"
       />
       <div v-if="jsonError" class="config-error">{{ jsonError }}</div>
       <div class="modal-actions">
-        <NButton @click="showModal = false">{{ t('mcp.cancel') }}</NButton>
-        <NButton type="primary" :loading="saving" @click="saveServer">
+        <a-button @click="showModal = false">{{ t('mcp.cancel') }}</a-button>
+        <a-button type="primary" :loading="saving" @click="saveServer">
           {{ modalMode === 'add' ? t('mcp.add') : t('mcp.save') }}
-        </NButton>
+        </a-button>
       </div>
-    </NModal>
+    </a-modal>
 
     <!-- Tools Visibility Modal -->
-    <NModal v-model:show="showToolsModal" :title="t('mcp.toolsVisibilityTitle')" preset="card" :style="{ width: 'min(480px, calc(100vw - 32px))' }">
+    <a-modal
+      v-model:visible="showToolsModal"
+      :title="t('mcp.toolsVisibilityTitle')"
+      :footer="false"
+      width="min(480px, calc(100vw - 32px))"
+    >
       <div v-if="toolsModalServer" class="tools-modal-content">
         <div class="tools-modal-header">
           <span class="server-name-label">{{ toolsModalServer.name }}</span>
-          <NButton size="small" :loading="fetchingTools" @click="fetchToolsList">
+          <a-button size="small" :loading="fetchingTools" @click="fetchToolsList">
             {{ t('mcp.fetchTools') }}
-          </NButton>
+          </a-button>
         </div>
 
         <div class="tools-mode-selector">
           <span class="mode-label">{{ t('mcp.toolsMode') }}</span>
-          <NRadioGroup v-model:value="toolsMode" size="small" @update:value="handleToolsModeChange">
-            <NRadioButton value="all">{{ t('mcp.toolsModeAll') }}</NRadioButton>
-            <NRadioButton value="include">{{ t('mcp.toolsModeInclude') }}</NRadioButton>
-            <NRadioButton value="exclude">{{ t('mcp.toolsModeExclude') }}</NRadioButton>
-          </NRadioGroup>
+          <a-radio-group v-model="toolsMode" size="small" @change="(v) => handleToolsModeChange(v as 'all' | 'include' | 'exclude')">
+            <a-radio value="all" type="button">{{ t('mcp.toolsModeAll') }}</a-radio>
+            <a-radio value="include" type="button">{{ t('mcp.toolsModeInclude') }}</a-radio>
+            <a-radio value="exclude" type="button">{{ t('mcp.toolsModeExclude') }}</a-radio>
+          </a-radio-group>
         </div>
 
         <div class="tools-list-container">
           <div class="tools-list-header">
             <span>{{ t('mcp.toolsListHeader') }}</span>
             <div v-if="toolsMode !== 'all'" class="tools-list-actions">
-              <NButton size="tiny" quaternary @click="selectAllTools">
+              <a-button size="mini" type="text" @click="selectAllTools">
                 {{ toolsMode === 'exclude' ? t('mcp.toolsExcludeAll') : t('mcp.toolsSelectAll') }}
-              </NButton>
-              <NButton size="tiny" quaternary @click="clearSelectedTools">
+              </a-button>
+              <a-button size="mini" type="text" @click="clearSelectedTools">
                 {{ toolsMode === 'exclude' ? t('mcp.toolsClearExcluded') : t('mcp.toolsClearSelection') }}
-              </NButton>
+              </a-button>
             </div>
           </div>
-          <NScrollbar style="max-height: 300px;">
+          <a-scrollbar style="height: 300px;">
             <div v-if="allTools.length" class="tools-checkbox-list">
               <div v-for="tool in allTools" :key="tool" class="tool-checkbox-item" :class="{ disabled: toolsMode === 'all' }">
-                <NCheckbox
-                  :checked="selectedTools.includes(tool)"
+                <a-checkbox
+                  :model-value="selectedTools.includes(tool)"
                   :disabled="toolsMode === 'all'"
-                  @update:checked="(val: boolean) => handleToolCheck(tool, val)"
+                  @update:model-value="(val) => handleToolCheck(tool, val as boolean)"
                 />
                 <span class="tool-name" :title="tool">{{ tool }}</span>
               </div>
@@ -628,7 +636,7 @@ async function saveToolsVisibility() {
             <div v-else class="tools-empty">
               <span class="muted">{{ t('mcp.toolsEmpty') }}</span>
             </div>
-          </NScrollbar>
+          </a-scrollbar>
         </div>
 
         <div class="tools-summary">
@@ -638,11 +646,11 @@ async function saveToolsVisibility() {
         </div>
 
         <div class="modal-actions">
-          <NButton @click="showToolsModal = false">{{ t('mcp.cancel') }}</NButton>
-          <NButton type="primary" @click="saveToolsVisibility">{{ t('mcp.save') }}</NButton>
+          <a-button @click="showToolsModal = false">{{ t('mcp.cancel') }}</a-button>
+          <a-button type="primary" @click="saveToolsVisibility">{{ t('mcp.save') }}</a-button>
         </div>
       </div>
-    </NModal>
+    </a-modal>
   </div>
 </template>
 
@@ -738,7 +746,7 @@ async function saveToolsVisibility() {
   flex-shrink: 1;
   min-width: 0;
 
-  .n-button {
+  .arco-btn {
     flex: 1;
     white-space: nowrap;
   }
@@ -759,10 +767,15 @@ async function saveToolsVisibility() {
 .config-textarea {
   font-family: monospace;
   font-size: 13px;
+
+  :deep(.arco-textarea) {
+    font-family: inherit;
+    font-size: inherit;
+  }
 }
 
 .config-error {
-  color: var(--n-error-color);
+  color: $error;
   font-size: 12px;
   margin-top: 4px;
 }
diff --git a/packages/client/src/views/hermes/MemoryView.vue b/packages/client/src/views/hermes/MemoryView.vue
index 149ee42..86f5330 100644
--- a/packages/client/src/views/hermes/MemoryView.vue
+++ b/packages/client/src/views/hermes/MemoryView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { NButton } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import MarkdownRenderer from '@/components/hermes/chat/MarkdownRenderer.vue'
@@ -82,7 +81,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
   <div class="memory-view">
     <header class="page-header">
       <h2 class="header-title">{{ t('memory.title') }}</h2>
-      <NButton size="small" quaternary @click="loadMemory">
+      <a-button size="small" type="text" @click="loadMemory">
         <template #icon>
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polyline points="23 4 23 10 17 10" />
@@ -90,7 +89,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
           </svg>
         </template>
         {{ t('memory.refresh') }}
-      </NButton>
+      </a-button>
     </header>
 
     <div class="memory-content">
@@ -111,7 +110,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                 <span class="section-title">{{ t('memory.myNotes') }}</span>
                 <span v-if="data?.memory_mtime" class="section-mtime">{{ formatTime(data.memory_mtime) }}</span>
               </div>
-              <NButton v-if="editingSection !== 'memory'" size="tiny" quaternary @click="startEdit('memory')">
+              <a-button v-if="editingSection !== 'memory'" size="mini" type="text" @click="startEdit('memory')">
                 <template #icon>
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                     <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
@@ -119,7 +118,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                   </svg>
                 </template>
                 {{ t('common.edit') }}
-              </NButton>
+              </a-button>
             </div>
 
             <!-- View mode -->
@@ -137,8 +136,8 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                 spellcheck="false"
               ></textarea>
               <div class="edit-actions">
-                <NButton size="small" @click="cancelEdit">{{ t('common.cancel') }}</NButton>
-                <NButton size="small" type="primary" :loading="saving" @click="handleSave">{{ t('common.save') }}</NButton>
+                <a-button size="small" @click="cancelEdit">{{ t('common.cancel') }}</a-button>
+                <a-button size="small" type="primary" :loading="saving" @click="handleSave">{{ t('common.save') }}</a-button>
               </div>
             </div>
           </div>
@@ -156,7 +155,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                 <span class="section-title">{{ t('memory.userProfile') }}</span>
                 <span v-if="data?.user_mtime" class="section-mtime">{{ formatTime(data.user_mtime) }}</span>
               </div>
-              <NButton v-if="editingSection !== 'user'" size="tiny" quaternary @click="startEdit('user')">
+              <a-button v-if="editingSection !== 'user'" size="mini" type="text" @click="startEdit('user')">
                 <template #icon>
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                     <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
@@ -164,7 +163,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                   </svg>
                 </template>
                 {{ t('common.edit') }}
-              </NButton>
+              </a-button>
             </div>
 
             <!-- View mode -->
@@ -182,8 +181,8 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                 spellcheck="false"
               ></textarea>
               <div class="edit-actions">
-                <NButton size="small" @click="cancelEdit">{{ t('common.cancel') }}</NButton>
-                <NButton size="small" type="primary" :loading="saving" @click="handleSave">{{ t('common.save') }}</NButton>
+                <a-button size="small" @click="cancelEdit">{{ t('common.cancel') }}</a-button>
+                <a-button size="small" type="primary" :loading="saving" @click="handleSave">{{ t('common.save') }}</a-button>
               </div>
             </div>
           </div>
@@ -203,7 +202,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                 <span class="section-title">{{ t('memory.soul') }}</span>
                 <span v-if="data?.soul_mtime" class="section-mtime">{{ formatTime(data.soul_mtime) }}</span>
               </div>
-              <NButton v-if="editingSection !== 'soul'" size="tiny" quaternary @click="startEdit('soul')">
+              <a-button v-if="editingSection !== 'soul'" size="mini" type="text" @click="startEdit('soul')">
                 <template #icon>
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                     <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
@@ -211,7 +210,7 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                   </svg>
                 </template>
                 {{ t('common.edit') }}
-              </NButton>
+              </a-button>
             </div>
 
             <!-- View mode -->
@@ -229,8 +228,8 @@ const displaySoul = computed(() => (data.value?.soul || '').replace(/§/g, '\n\n
                 spellcheck="false"
               ></textarea>
               <div class="edit-actions">
-                <NButton size="small" @click="cancelEdit">{{ t('common.cancel') }}</NButton>
-                <NButton size="small" type="primary" :loading="saving" @click="handleSave">{{ t('common.save') }}</NButton>
+                <a-button size="small" @click="cancelEdit">{{ t('common.cancel') }}</a-button>
+                <a-button size="small" type="primary" :loading="saving" @click="handleSave">{{ t('common.save') }}</a-button>
               </div>
             </div>
           </div>
diff --git a/packages/client/src/views/hermes/ModelsView.vue b/packages/client/src/views/hermes/ModelsView.vue
index 9573885..651129c 100644
--- a/packages/client/src/views/hermes/ModelsView.vue
+++ b/packages/client/src/views/hermes/ModelsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { NButton, NSpin, NTabPane, NTabs } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import AuxiliaryModelsPanel from '@/components/hermes/models/AuxiliaryModelsPanel.vue'
@@ -58,13 +57,13 @@ async function handleRefreshModelCache() {
 <template>
   <div class="models-view">
     <div v-if="modelsStore.refreshingModelCache" class="model-cache-overlay">
-      <NSpin size="large" :description="t('models.refreshModelCacheLoading')" />
+      <a-spin :loading="true" :tip="t('models.refreshModelCacheLoading')" />
     </div>
 
     <header class="page-header">
       <h2 class="header-title">{{ t('models.title') }}</h2>
       <div v-if="activeTab === 'general'" class="header-actions">
-        <NButton
+        <a-button
           size="small"
           :loading="modelsStore.refreshingModelCache"
           :disabled="modelsStore.loading"
@@ -76,8 +75,8 @@ async function handleRefreshModelCache() {
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9 9.7 9.7 0 0 1-6.7-2.7"/><path d="M3 12a9 9 0 0 1 9-9 9.7 9.7 0 0 1 6.7 2.7"/><path d="M21 3v6h-6"/><path d="M3 21v-6h6"/></svg>
           </template>
           <span class="header-action-label">{{ t('models.refreshModelCache') }}</span>
-        </NButton>
-        <NButton
+        </a-button>
+        <a-button
           type="primary"
           size="small"
           :aria-label="t('models.addProvider')"
@@ -88,24 +87,24 @@ async function handleRefreshModelCache() {
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           </template>
           <span class="header-action-label">{{ t('models.addProvider') }}</span>
-        </NButton>
+        </a-button>
       </div>
     </header>
 
     <div class="models-content">
-      <NTabs v-model:value="activeTab" type="line" animated>
-        <NTabPane name="general" :tab="t('models.generalTitle')">
-          <NSpin :show="modelsStore.loading && modelsStore.providers.length === 0">
+      <a-tabs v-model:active-key="activeTab" type="line">
+        <a-tab-pane key="general" :title="t('models.generalTitle')">
+          <a-spin :loading="modelsStore.loading && modelsStore.providers.length === 0">
             <ProvidersPanel />
-          </NSpin>
-        </NTabPane>
-        <NTabPane name="auxiliary" :tab="t('models.auxiliaryTitle')">
+          </a-spin>
+        </a-tab-pane>
+        <a-tab-pane key="auxiliary" :title="t('models.auxiliaryTitle')">
           <AuxiliaryModelsPanel />
-        </NTabPane>
-        <NTabPane name="combination" :tab="t('models.combinationTitle')">
+        </a-tab-pane>
+        <a-tab-pane key="combination" :title="t('models.combinationTitle')">
           <CombinationModelsPanel />
-        </NTabPane>
-      </NTabs>
+        </a-tab-pane>
+      </a-tabs>
     </div>
 
     <ProviderFormModal
@@ -159,21 +158,13 @@ async function handleRefreshModelCache() {
     display: none;
   }
 
-  .header-actions :deep(.n-button) {
+  .header-actions :deep(.arco-btn) {
     width: 32px;
     height: 32px;
     padding: 0;
   }
 
-  .header-actions :deep(.n-button__content),
-  .header-actions :deep(.n-button__icon),
-  .header-actions :deep(.n-icon-slot) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .header-actions :deep(.n-button__icon) {
+  .header-actions :deep(.arco-btn-icon) {
     margin: 0;
   }
 }
diff --git a/packages/client/src/views/hermes/PerformanceView.vue b/packages/client/src/views/hermes/PerformanceView.vue
index f012af2..310c93b 100644
--- a/packages/client/src/views/hermes/PerformanceView.vue
+++ b/packages/client/src/views/hermes/PerformanceView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import { NButton, NSpin } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchPerformanceRuntime, type PerformanceRuntimeSnapshot } from '@/api/hermes/performance-monitor'
@@ -89,14 +88,14 @@ onBeforeUnmount(() => {
     <header class="page-header">
       <h2 class="header-title">{{ t('performance.title') }}</h2>
       <div class="header-actions">
-        <NButton size="small" :type="autoRefresh ? 'primary' : 'default'" secondary @click="setAutoRefresh(!autoRefresh)">
+        <a-button size="small" :type="autoRefresh ? 'secondary' : undefined" @click="setAutoRefresh(!autoRefresh)">
           {{ autoRefresh ? t('performance.autoRefreshOn') : t('performance.autoRefreshOff') }}
-        </NButton>
-        <NButton size="small" :loading="loading" @click="loadRuntime()">{{ t('performance.refresh') }}</NButton>
+        </a-button>
+        <a-button size="small" :loading="loading" @click="loadRuntime()">{{ t('performance.refresh') }}</a-button>
       </div>
     </header>
 
-    <NSpin :show="loading && !snapshot" class="performance-spin">
+    <a-spin :loading="loading && !snapshot" class="performance-spin">
       <main v-if="snapshot" class="performance-content">
         <section class="summary-grid">
           <div class="summary-item">
@@ -203,7 +202,7 @@ onBeforeUnmount(() => {
           </div>
         </section>
       </main>
-    </NSpin>
+    </a-spin>
   </div>
 </template>
 
diff --git a/packages/client/src/views/hermes/PetdexView.vue b/packages/client/src/views/hermes/PetdexView.vue
index 0a56d45..b5e2632 100644
--- a/packages/client/src/views/hermes/PetdexView.vue
+++ b/packages/client/src/views/hermes/PetdexView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { NAlert, NButton, NEmpty, NInput, NSelect, NSpin, NTag } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchPetdexManifest, type PetdexManifest, type PetdexPet } from '@/api/hermes/petdex'
@@ -15,7 +14,7 @@ const loading = ref(false)
 const adoptingSlug = ref('')
 const error = ref('')
 const searchQuery = ref('')
-const kindFilter = ref<string | null>(null)
+const kindFilter = ref<string | undefined>(undefined)
 const visibleLimit = ref(96)
 
 const pets = computed(() => manifest.value?.pets ?? [])
@@ -99,20 +98,20 @@ onMounted(() => {
   <div class="petdex-view">
     <header class="page-header">
       <h2 class="header-title">{{ t('petdex.title') }}</h2>
-      <NButton size="small" quaternary :loading="loading" @click="loadManifest(true)">
+      <a-button size="small" type="text" :loading="loading" @click="loadManifest(true)">
         {{ t('petdex.refresh') }}
-      </NButton>
+      </a-button>
     </header>
 
     <div class="petdex-content" :class="{ 'is-loading': loading && !manifest }">
       <div v-if="loading && !manifest" class="loading-state">
-        <NSpin />
+        <a-spin />
       </div>
 
       <template v-else>
-        <NAlert v-if="error" type="error" class="notice">
+        <a-alert v-if="error" type="error" class="notice">
           {{ error }}
-        </NAlert>
+        </a-alert>
 
         <div v-if="manifest" class="summary-grid">
           <div class="summary-card">
@@ -134,8 +133,8 @@ onMounted(() => {
         </div>
 
         <div class="filter-row">
-          <NInput v-model:value="searchQuery" :placeholder="t('petdex.searchPlaceholder')" clearable />
-          <NSelect v-model:value="kindFilter" :options="kindOptions" :placeholder="t('petdex.kindFilter')" clearable />
+          <a-input v-model="searchQuery" :placeholder="t('petdex.searchPlaceholder')" allow-clear />
+          <a-select v-model="kindFilter" :options="kindOptions" :placeholder="t('petdex.kindFilter')" allow-clear />
         </div>
 
         <div v-if="visiblePets.length" class="pet-grid">
@@ -146,7 +145,7 @@ onMounted(() => {
             <div class="pet-body">
               <div class="pet-title-row">
                 <h3>{{ pet.displayName }}</h3>
-                <NTag size="small" round>{{ pet.kind }}</NTag>
+                <a-tag size="small" class="pet-kind-tag">{{ pet.kind }}</a-tag>
               </div>
               <div class="pet-slug">{{ pet.slug }}</div>
               <div v-if="pet.submittedBy" class="pet-meta">
@@ -158,28 +157,27 @@ onMounted(() => {
                 </a>
               </div>
               <div class="pet-actions">
-                <NButton
+                <a-button
                   size="small"
-                  type="primary"
-                  block
-                  :secondary="petsStore.activePet?.slug === pet.slug"
+                  :type="petsStore.activePet?.slug === pet.slug ? 'secondary' : 'primary'"
+                  long
                   :loading="adoptingSlug === pet.slug"
                   :disabled="!!adoptingSlug"
                   @click="adopt(pet)"
                 >
                   {{ petsStore.activePet?.slug === pet.slug ? t('petdex.active') : t('petdex.adopt') }}
-                </NButton>
+                </a-button>
               </div>
             </div>
           </article>
         </div>
 
-        <NEmpty v-else :description="t('petdex.empty')" />
+        <a-empty v-else :description="t('petdex.empty')" />
 
         <div v-if="canShowMore" class="load-more">
-          <NButton :disabled="loading" @click="showMore">
+          <a-button :disabled="loading" @click="showMore">
             {{ t('petdex.showMore', { count: Math.min(96, filteredPets.length - visiblePets.length) }) }}
-          </NButton>
+          </a-button>
         </div>
       </template>
     </div>
@@ -342,6 +340,12 @@ onMounted(() => {
   margin-top: 12px;
 }
 
+// naive 的圆角标签是 border-radius: calc(height / 2)，Arco 的 a-tag 没有
+// shape/round prop，只能用同等圆角还原。
+.pet-kind-tag {
+  border-radius: 999px;
+}
+
 .load-more {
   display: flex;
   justify-content: center;
diff --git a/packages/client/src/views/hermes/PluginsView.vue b/packages/client/src/views/hermes/PluginsView.vue
index c849079..f4d4c8b 100644
--- a/packages/client/src/views/hermes/PluginsView.vue
+++ b/packages/client/src/views/hermes/PluginsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { NAlert, NButton, NEmpty, NInput, NSelect, NSpin, NTag } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import { useI18n } from 'vue-i18n'
 import { fetchPlugins, setPluginEnabled, type HermesPluginInfo, type HermesPluginsMetadata } from '@/api/hermes/plugins'
@@ -18,9 +17,9 @@ const error = ref('')
 const actionLoading = ref<Record<string, boolean>>({})
 
 const searchQuery = ref('')
-const sourceFilter = ref<string | null>(null)
-const kindFilter = ref<string | null>(null)
-const statusFilter = ref<string | null>(null)
+const sourceFilter = ref<string | undefined>(undefined)
+const kindFilter = ref<string | undefined>(undefined)
+const statusFilter = ref<string | undefined>(undefined)
 
 const statusValues = ['enabled', 'auto-active', 'inactive', 'disabled', 'provider-managed'] as const
 const statusOptions = computed(() => statusValues.map(value => ({
@@ -86,17 +85,17 @@ function configStatusLabel(plugin: HermesPluginInfo) {
   return te(key) ? t(key) : plugin.configStatus
 }
 
-function statusTagType(plugin: HermesPluginInfo): 'success' | 'warning' | 'error' | 'info' | 'default' {
+function statusTagColor(plugin: HermesPluginInfo): 'green' | 'orange' | 'red' | 'arcoblue' {
   switch (plugin.effectiveStatus) {
     case 'enabled':
     case 'auto-active':
-      return 'success'
+      return 'green'
     case 'disabled':
-      return 'error'
+      return 'red'
     case 'provider-managed':
-      return 'info'
+      return 'arcoblue'
     default:
-      return 'warning'
+      return 'orange'
   }
 }
 
@@ -135,27 +134,27 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
   <div class="plugins-view">
     <header class="page-header">
       <h2 class="header-title">{{ t('plugins.title') }}</h2>
-      <NButton size="small" quaternary :loading="loading" @click="loadPlugins">
+      <a-button size="small" type="text" :loading="loading" @click="loadPlugins">
         {{ t('plugins.refresh') }}
-      </NButton>
+      </a-button>
     </header>
 
     <div class="plugins-content" :class="{ 'is-loading': loading && plugins.length === 0 }">
       <div v-if="loading && plugins.length === 0" class="plugins-loading-state">
-        <NSpin />
+        <a-spin />
       </div>
       <template v-else>
-        <NAlert type="info" :bordered="false" class="plugins-notice">
+        <a-alert type="info" class="plugins-notice">
           {{ t('plugins.notice') }}
-        </NAlert>
+        </a-alert>
 
-        <NAlert v-if="error" type="error" class="plugins-notice">
+        <a-alert v-if="error" type="error" class="plugins-notice">
           {{ error }}
-        </NAlert>
+        </a-alert>
 
-        <NAlert v-for="warning in warnings" :key="warning" type="warning" class="plugins-notice">
+        <a-alert v-for="warning in warnings" :key="warning" type="warning" class="plugins-notice">
           {{ warning }}
-        </NAlert>
+        </a-alert>
 
         <div class="summary-grid">
           <div class="summary-card">
@@ -181,10 +180,10 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
         </div>
 
         <div class="filter-row">
-          <NInput v-model:value="searchQuery" :placeholder="t('plugins.searchPlaceholder')" clearable />
-          <NSelect v-model:value="sourceFilter" :options="sourceOptions" :placeholder="t('plugins.source')" clearable />
-          <NSelect v-model:value="kindFilter" :options="kindOptions" :placeholder="t('plugins.kind')" clearable />
-          <NSelect v-model:value="statusFilter" :options="statusOptions" :placeholder="t('plugins.statusTitle')" clearable />
+          <a-input v-model="searchQuery" :placeholder="t('plugins.searchPlaceholder')" allow-clear />
+          <a-select v-model="sourceFilter" :options="sourceOptions" :placeholder="t('plugins.source')" allow-clear />
+          <a-select v-model="kindFilter" :options="kindOptions" :placeholder="t('plugins.kind')" allow-clear />
+          <a-select v-model="statusFilter" :options="statusOptions" :placeholder="t('plugins.statusTitle')" allow-clear />
         </div>
 
         <div v-if="filteredPlugins.length" class="plugins-table-wrap">
@@ -214,11 +213,11 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
                   </div>
                 </td>
                 <td>
-                  <NTag size="small" :type="statusTagType(plugin)">{{ statusLabel(plugin) }}</NTag>
+                  <a-tag size="small" :color="statusTagColor(plugin)">{{ statusLabel(plugin) }}</a-tag>
                   <div class="config-status">{{ t('plugins.configStatus', { status: configStatusLabel(plugin) }) }}</div>
                 </td>
-                <td><NTag size="small" round>{{ plugin.source }}</NTag></td>
-                <td><NTag size="small" round>{{ plugin.kind }}</NTag></td>
+                <td><a-tag size="small">{{ plugin.source }}</a-tag></td>
+                <td><a-tag size="small">{{ plugin.kind }}</a-tag></td>
                 <td>
                   <div class="capability-list">
                     <span>{{ t('plugins.capabilities.tools', { count: plugin.providesTools.length }) }}</span>
@@ -228,23 +227,23 @@ watch(() => profilesStore.activeProfileName || 'default', () => {
                 </td>
                 <td><code class="path-cell">{{ plugin.path || t('plugins.notAvailable') }}</code></td>
                 <td>
-                  <NButton
+                  <a-button
                     v-if="canManagePlugin(plugin)"
-                    size="tiny"
-                    secondary
-                    :type="pluginIsEnabled(plugin) ? 'warning' : 'primary'"
+                    size="mini"
+                    type="secondary"
+                    :status="pluginIsEnabled(plugin) ? 'warning' : 'normal'"
                     :loading="!!actionLoading[plugin.key]"
                     @click="updatePlugin(plugin, !pluginIsEnabled(plugin))"
                   >
                     {{ pluginIsEnabled(plugin) ? t('common.disable') : t('common.enable') }}
-                  </NButton>
+                  </a-button>
                   <span v-else class="muted">{{ t('plugins.managedElsewhere') }}</span>
                 </td>
               </tr>
             </tbody>
           </table>
         </div>
-        <NEmpty v-else :description="t('plugins.noMatch')" />
+        <a-empty v-else :description="t('plugins.noMatch')" />
 
         <div v-if="metadata" class="metadata-panel">
           <span>{{ t('plugins.metadata.agentRoot') }}: <code>{{ metadata.hermesAgentRoot }}</code></span>
diff --git a/packages/client/src/views/hermes/ProfilesView.vue b/packages/client/src/views/hermes/ProfilesView.vue
index de3bd72..254d5f8 100644
--- a/packages/client/src/views/hermes/ProfilesView.vue
+++ b/packages/client/src/views/hermes/ProfilesView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { NButton, NSpin } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import ProfilesPanel from '@/components/hermes/profiles/ProfilesPanel.vue'
 import ProfileCreateModal from '@/components/hermes/profiles/ProfileCreateModal.vue'
@@ -37,7 +36,7 @@ function handleImported() {
     <header class="page-header">
       <h2 class="header-title">{{ t('profiles.title') }}</h2>
       <div class="header-actions">
-        <NButton size="small" @click="showImportModal = true">
+        <a-button size="small" @click="showImportModal = true">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
@@ -46,8 +45,8 @@ function handleImported() {
             </svg>
           </template>
           {{ t('profiles.import') }}
-        </NButton>
-        <NButton type="primary" size="small" @click="showCreateModal = true">
+        </a-button>
+        <a-button type="primary" size="small" @click="showCreateModal = true">
           <template #icon>
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <line x1="12" y1="5" x2="12" y2="19" />
@@ -55,14 +54,14 @@ function handleImported() {
             </svg>
           </template>
           {{ t('profiles.create') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
     <div class="profiles-content">
-      <NSpin :show="profilesStore.loading && profilesStore.profiles.length === 0">
+      <a-spin :loading="profilesStore.loading && profilesStore.profiles.length === 0">
         <ProfilesPanel @rename="renamingProfile = $event" />
-      </NSpin>
+      </a-spin>
     </div>
 
     <ProfileCreateModal
diff --git a/packages/client/src/views/hermes/SettingsView.vue b/packages/client/src/views/hermes/SettingsView.vue
index 213be1c..cf54d08 100644
--- a/packages/client/src/views/hermes/SettingsView.vue
+++ b/packages/client/src/views/hermes/SettingsView.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import {
-  NTabs,
-  NTabPane,
-  NSpin,
-} from "naive-ui";
 import { useI18n } from "vue-i18n";
 import { useSettingsStore } from "@/stores/hermes/settings";
 import DisplaySettings from "@/components/hermes/settings/DisplaySettings.vue";
@@ -50,7 +45,7 @@ function normalizeTab(value: unknown): string {
   return validTabs.value.has(tab) ? tab : "account";
 }
 
-function handleTabUpdate(tab: string) {
+function handleTabUpdate(tab: string | number) {
   activeTab.value = normalizeTab(tab);
   router.replace({
     query: {
@@ -83,48 +78,47 @@ onMounted(() => {
     </header>
 
     <div class="settings-content">
-      <NSpin
-        :show="settingsStore.loading || settingsStore.saving"
-        size="large"
-        :description="t('common.loading')"
+      <a-spin
+        :loading="settingsStore.loading || settingsStore.saving"
+        :tip="t('common.loading')"
       >
-        <NTabs v-model:value="activeTab" type="line" animated @update:value="handleTabUpdate">
-          <NTabPane name="account" :tab="t('settings.tabs.account')">
+        <a-tabs v-model:active-key="activeTab" type="line" @change="handleTabUpdate">
+          <a-tab-pane key="account" :title="t('settings.tabs.account')">
             <AccountSettings />
-          </NTabPane>
-          <NTabPane v-if="canManageUsers" name="users" :tab="t('settings.tabs.users')">
+          </a-tab-pane>
+          <a-tab-pane v-if="canManageUsers" key="users" :title="t('settings.tabs.users')">
             <UserManagementSettings />
-          </NTabPane>
-          <NTabPane name="display" :tab="t('settings.tabs.display')">
+          </a-tab-pane>
+          <a-tab-pane key="display" :title="t('settings.tabs.display')">
             <DisplaySettings />
-          </NTabPane>
-          <NTabPane name="proxy" :tab="t('settings.tabs.proxy')">
+          </a-tab-pane>
+          <a-tab-pane key="proxy" :title="t('settings.tabs.proxy')">
             <ProxySettings />
-          </NTabPane>
-          <NTabPane name="agent" :tab="t('settings.tabs.agent')">
+          </a-tab-pane>
+          <a-tab-pane key="agent" :title="t('settings.tabs.agent')">
             <AgentSettings />
             <GatewayAutoStartSettings />
-          </NTabPane>
-          <NTabPane name="memory" :tab="t('settings.tabs.memory')">
+          </a-tab-pane>
+          <a-tab-pane key="memory" :title="t('settings.tabs.memory')">
             <MemorySettings />
-          </NTabPane>
-          <NTabPane name="compression" :tab="t('settings.tabs.compression')">
+          </a-tab-pane>
+          <a-tab-pane key="compression" :title="t('settings.tabs.compression')">
             <CompressionSettings />
-          </NTabPane>
-          <NTabPane name="session" :tab="t('settings.tabs.session')">
+          </a-tab-pane>
+          <a-tab-pane key="session" :title="t('settings.tabs.session')">
             <SessionSettings />
-          </NTabPane>
-          <NTabPane name="privacy" :tab="t('settings.tabs.privacy')">
+          </a-tab-pane>
+          <a-tab-pane key="privacy" :title="t('settings.tabs.privacy')">
             <PrivacySettings />
-          </NTabPane>
-          <NTabPane name="models" :tab="t('settings.tabs.models')">
+          </a-tab-pane>
+          <a-tab-pane key="models" :title="t('settings.tabs.models')">
             <ModelSettings />
-          </NTabPane>
-          <NTabPane name="voice" :tab="t('settings.tabs.voice')">
+          </a-tab-pane>
+          <a-tab-pane key="voice" :title="t('settings.tabs.voice')">
             <VoiceSettings />
-          </NTabPane>
-        </NTabs>
-      </NSpin>
+          </a-tab-pane>
+        </a-tabs>
+      </a-spin>
     </div>
   </div>
 </template>
diff --git a/packages/client/src/views/hermes/SkillsUsageView.vue b/packages/client/src/views/hermes/SkillsUsageView.vue
index 6fd817d..7596be1 100644
--- a/packages/client/src/views/hermes/SkillsUsageView.vue
+++ b/packages/client/src/views/hermes/SkillsUsageView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NButton } from 'naive-ui'
 import { useProfilesStore } from '@/stores/hermes/profiles'
 import {
   fetchSkillUsageStats,
@@ -165,22 +164,20 @@ onMounted(() => {
       </div>
       <div class="skills-usage-toolbar">
         <div class="period-selector" role="group" :aria-label="t('skillsUsage.periodSelector')">
-          <NButton
+          <a-button
             v-for="days in periodOptions"
             :key="days"
             size="small"
-            :secondary="selectedDays === days"
-            :quaternary="selectedDays !== days"
-            :type="selectedDays === days ? 'primary' : 'default'"
+            :type="selectedDays === days ? 'secondary' : 'text'"
             :aria-pressed="selectedDays === days ? 'true' : 'false'"
             @click="loadStats(days)"
           >
             {{ t('skillsUsage.periodLabel', { days }) }}
-          </NButton>
+          </a-button>
         </div>
-        <NButton size="small" quaternary :loading="loading" @click="loadStats(selectedDays, true)">
+        <a-button size="small" type="text" :loading="loading" @click="loadStats(selectedDays, true)">
           {{ t('skillsUsage.refresh') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
diff --git a/packages/client/src/views/hermes/SkillsView.vue b/packages/client/src/views/hermes/SkillsView.vue
index 35e0eb2..51b8b54 100644
--- a/packages/client/src/views/hermes/SkillsView.vue
+++ b/packages/client/src/views/hermes/SkillsView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { NBadge, NButton, NDrawer, NDrawerContent, NInput, NSelect } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import SkillList from '@/components/hermes/skills/SkillList.vue'
 import SkillDetail from '@/components/hermes/skills/SkillDetail.vue'
@@ -191,7 +190,7 @@ function handleSkillSaved() {
         </button>
       </div>
       <div class="header-actions">
-        <NButton
+        <a-button
           v-if="isHermesTarget && writeApprovalSupported"
           class="header-action-btn"
           size="small"
@@ -199,19 +198,19 @@ function handleSkillSaved() {
           @click="showWriteApprovalDrawer = true"
         >
           <template #icon>
-            <NBadge :value="pendingWriteCount" :max="99" :show="pendingWriteCount > 0">
+            <a-badge :count="pendingWriteCount" :max-count="99">
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M9 11l3 3L22 4" />
                 <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
               </svg>
-            </NBadge>
+            </a-badge>
           </template>
           <span class="header-action-label">
             {{ t('skills.writeApprovalButton', { count: pendingWriteCount }) }}
           </span>
-        </NButton>
-        <NButton
+        </a-button>
+        <a-button
           v-if="isHermesTarget"
           class="header-action-btn"
           size="small"
@@ -227,8 +226,8 @@ function handleSkillSaved() {
             </svg>
           </template>
           <span class="header-action-label">{{ t('skills.import') }}</span>
-        </NButton>
-        <NButton
+        </a-button>
+        <a-button
           v-if="isHermesTarget"
           class="header-action-btn"
           size="small"
@@ -242,12 +241,12 @@ function handleSkillSaved() {
             </svg>
           </template>
           <span class="header-action-label">{{ t('skills.externalDirs.manage') }}</span>
-        </NButton>
-        <NInput
-          v-model:value="searchQuery"
+        </a-button>
+        <a-input
+          v-model="searchQuery"
           :placeholder="t('skills.searchPlaceholder')"
           size="small"
-          clearable
+          allow-clear
           style="width: 130px"
         />
       </div>
@@ -256,19 +255,19 @@ function handleSkillSaved() {
     <SkillImportModal v-if="showImportModal" @close="showImportModal = false" @saved="handleImported" />
     <SkillExternalDirsModal v-if="showExternalDirsModal"
       @close="showExternalDirsModal = false" @saved="handleExternalDirsSaved" />
-    <NDrawer
-      v-model:show="showWriteApprovalDrawer"
+    <a-drawer
+      v-model:visible="showWriteApprovalDrawer"
       width="min(960px, calc(100vw - 32px))"
       placement="right"
+      :footer="false"
       class="write-approval-drawer"
     >
-      <NDrawerContent :title="t('skills.writeApprovalTitle')" closable>
-        <PendingWriteApprovals
-          v-if="showWriteApprovalDrawer"
-          @count-change="(count) => pendingWriteCount = count"
-        />
-      </NDrawerContent>
-    </NDrawer>
+      <template #title>{{ t('skills.writeApprovalTitle') }}</template>
+      <PendingWriteApprovals
+        v-if="showWriteApprovalDrawer"
+        @count-change="(count) => pendingWriteCount = count"
+      />
+    </a-drawer>
 
     <div class="skills-content">
       <div v-if="loading && categories.length === 0" class="skills-loading">{{ t('common.loading') }}</div>
@@ -277,11 +276,11 @@ function handleSkillSaved() {
           <div v-if="showSidebar" class="skills-sidebar">
             <div class="skills-target-filter">
               <span class="target-filter-label">{{ t('skills.targetFilter') }}</span>
-              <NSelect
-                v-model:value="skillTarget"
+              <a-select
+                v-model="skillTarget"
                 size="small"
                 :options="skillTargetOptions"
-                @update:value="handleTargetChange"
+                @change="handleTargetChange"
               />
             </div>
             <SkillList
@@ -423,11 +422,7 @@ function handleSkillSaved() {
     width: 30px;
     padding: 0;
 
-    :deep(.n-button__content) {
-      justify-content: center;
-    }
-
-    :deep(.n-button__icon) {
+    :deep(.arco-btn-icon) {
       margin: 0;
     }
   }
diff --git a/packages/client/src/views/hermes/TerminalView.vue b/packages/client/src/views/hermes/TerminalView.vue
index 2d18ef3..748e9d4 100644
--- a/packages/client/src/views/hermes/TerminalView.vue
+++ b/packages/client/src/views/hermes/TerminalView.vue
@@ -5,7 +5,6 @@ import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import "@xterm/xterm/css/xterm.css";
 import { getApiKey, getBaseUrlValue } from "@/api/client";
-import { NButton, NPopconfirm, NTooltip, NSelect } from "naive-ui";
 import { useMessage } from "@/composables/useMessage";
 import { useI18n } from "vue-i18n";
 import type { ITheme } from "@xterm/xterm";
@@ -594,26 +593,24 @@ onUnmounted(() => {
           <!-- <button class="session-close-btn" @click="showSessions = false">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
           </button> -->
-          <NTooltip trigger="hover">
-            <template #trigger>
-              <NButton quaternary size="tiny" @click="createSession" circle>
-                <template #icon>
-                  <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                  >
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                </template>
-              </NButton>
-            </template>
-            {{ t("terminal.newTab") }}
-          </NTooltip>
+          <a-tooltip>
+            <a-button type="text" size="mini" shape="circle" @click="createSession">
+              <template #icon>
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <line x1="12" y1="5" x2="12" y2="19" />
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+              </template>
+            </a-button>
+            <template #content>{{ t("terminal.newTab") }}</template>
+          </a-tooltip>
         </div>
       </div>
       <div v-if="showSessions" class="session-items">
@@ -639,27 +636,25 @@ onUnmounted(() => {
               }}</span>
             </span>
           </div>
-          <NPopconfirm
+          <a-popconfirm
             v-if="sessions.length > 1"
-            @positive-click="closeSession(s.id)"
+            @ok="closeSession(s.id)"
           >
-            <template #trigger>
-              <button class="session-item-delete" @click.stop>
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </template>
-            {{ t("terminal.closeSession") }}
-          </NPopconfirm>
+            <button class="session-item-delete" @click.stop>
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+            <template #content>{{ t("terminal.closeSession") }}</template>
+          </a-popconfirm>
         </button>
       </div>
     </aside>
@@ -668,11 +663,11 @@ onUnmounted(() => {
     <div class="terminal-main">
       <header class="terminal-header">
         <div class="header-left">
-          <NButton
-            quaternary
+          <a-button
+            type="text"
             size="small"
+            shape="circle"
             @click="showSessions = !showSessions"
-            circle
           >
             <template #icon>
               <svg
@@ -689,21 +684,20 @@ onUnmounted(() => {
                 <rect x="14" y="14" width="7" height="7" />
               </svg>
             </template>
-          </NButton>
+          </a-button>
           <span v-if="activeSession" class="header-session-title">{{
             activeSession.title
           }}</span>
         </div>
         <div class="header-actions">
-          <NSelect
-            :value="selectedTheme"
+          <a-select
+            :model-value="selectedTheme"
             :options="themeOptions"
             size="small"
-            :consistent-menu-width="false"
             class="theme-select"
-            @update:value="applyTheme"
+            @update:model-value="applyTheme(String($event))"
           />
-          <NButton size="small" @click="createSession">
+          <a-button size="small" @click="createSession">
             <template #icon>
               <svg
                 width="14"
@@ -718,7 +712,7 @@ onUnmounted(() => {
               </svg>
             </template>
             {{ t("terminal.newTab") }}
-          </NButton>
+          </a-button>
         </div>
       </header>
       <div class="terminal-container">
diff --git a/packages/client/src/views/hermes/UsageView.vue b/packages/client/src/views/hermes/UsageView.vue
index 9769c08..4820440 100644
--- a/packages/client/src/views/hermes/UsageView.vue
+++ b/packages/client/src/views/hermes/UsageView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NButton } from 'naive-ui'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useUsageStore } from '@/stores/hermes/usage'
@@ -45,23 +44,21 @@ onMounted(() => {
       <h2 class="header-title">{{ t('usage.title') }}</h2>
       <div class="usage-toolbar">
         <div class="period-selector" role="group" aria-label="Usage statistics period">
-          <NButton
+          <a-button
             v-for="option in periodOptions"
             :key="option.days"
             class="period-option"
             size="small"
-            :type="selectedPeriod === option.days ? 'primary' : 'default'"
-            :secondary="selectedPeriod === option.days"
-            :quaternary="selectedPeriod !== option.days"
+            :type="selectedPeriod === option.days ? 'secondary' : 'text'"
             :aria-pressed="selectedPeriod === option.days"
             @click="loadUsage(option.days)"
           >
             {{ option.label }}
-          </NButton>
+          </a-button>
         </div>
-        <NButton class="refresh-button" size="small" quaternary :loading="usageStore.isLoading" @click="loadUsage()">
+        <a-button class="refresh-button" size="small" type="text" :loading="usageStore.isLoading" @click="loadUsage()">
           {{ t('usage.refresh') }}
-        </NButton>
+        </a-button>
       </div>
     </header>
 
diff --git a/packages/client/src/views/hermes/WorkflowView.vue b/packages/client/src/views/hermes/WorkflowView.vue
index 517a70f..cb9c30a 100644
--- a/packages/client/src/views/hermes/WorkflowView.vue
+++ b/packages/client/src/views/hermes/WorkflowView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { NButton, NCheckbox, NDrawer, NDrawerContent, NDropdown, NInput, NModal, NPopconfirm, NSelect, NSpace, NTooltip, type DropdownOption } from 'naive-ui'
 import { useMessage } from '@/composables/useMessage'
 import {
   ConnectionLineType,
@@ -88,6 +87,12 @@ interface WorkflowNode {
   data: WorkflowAgentNodeData
 }
 
+interface WorkflowContextMenuOption {
+  key: string
+  label: string
+  disabled?: boolean
+}
+
 interface WorkflowEdge {
   id: string
   source: string
@@ -115,7 +120,6 @@ const nextNodeIndex = ref(1)
 const contextMenuVisible = ref(false)
 const contextMenuX = ref(0)
 const contextMenuY = ref(0)
-const contextMenuOpenedAt = ref(0)
 const contextMenuTarget = ref<{ type: 'node' | 'edge'; id: string } | null>(null)
 const workflowRunContextMenuVisible = ref(false)
 const workflowRunContextMenuX = ref(0)
@@ -225,7 +229,7 @@ const defaultModelSelection = computed(() => {
   }
 })
 
-const contextMenuOptions = computed<DropdownOption[]>(() => {
+const contextMenuOptions = computed<WorkflowContextMenuOption[]>(() => {
   const target = contextMenuTarget.value
   if (selectedWorkflowRunId.value) {
     if (target?.type !== 'node') return []
@@ -239,7 +243,7 @@ const contextMenuOptions = computed<DropdownOption[]>(() => {
     )))
     const canPreserveStartNode = Boolean(run && workflowNodeStatusFromRun(run, target.id) === 'completed')
     const hasDownstream = edges.value.some(edge => edge.source === target.id)
-    const options: DropdownOption[] = []
+    const options: WorkflowContextMenuOption[] = []
     if (hasNodeSession) {
       options.push({
         key: 'rerun-downstream-keep-node',
@@ -260,9 +264,9 @@ const contextMenuOptions = computed<DropdownOption[]>(() => {
   return [{ key: 'delete-node', label: t('workflow.actions.deleteNode') }]
 })
 
-const workflowRunContextMenuOptions = computed<DropdownOption[]>(() => {
+const workflowRunContextMenuOptions = computed<WorkflowContextMenuOption[]>(() => {
   const run = workflowRunContextMenuTarget.value
-  const options: DropdownOption[] = []
+  const options: WorkflowContextMenuOption[] = []
   if (run?.status === 'queued' || run?.status === 'running') {
     options.push({ key: 'stop-run', label: t('workflow.runs.stop') })
   }
@@ -270,6 +274,20 @@ const workflowRunContextMenuOptions = computed<DropdownOption[]>(() => {
   return options
 })
 
+// Arco's a-trigger has no x/y props. The popup is teleported to body with
+// position:absolute, so page coordinates are the right basis here; the computed
+// style overrides whatever getPopupStyle() derived from the anchor. Callers keep
+// storing clientX/clientY, so the scroll offset is added at style-build time.
+const contextMenuStyle = computed(() => ({
+  left: `${contextMenuX.value + window.scrollX}px`,
+  top: `${contextMenuY.value + window.scrollY}px`,
+}))
+
+const workflowRunContextMenuStyle = computed(() => ({
+  left: `${workflowRunContextMenuX.value + window.scrollX}px`,
+  top: `${workflowRunContextMenuY.value + window.scrollY}px`,
+}))
+
 const workflowFlowKey = computed(() => activeWorkflowId.value || 'workflow-empty')
 
 function skillOptionsCacheKey(agent: string, profile = activeWorkflowProfile.value): string {
@@ -1554,7 +1572,6 @@ function openContextMenu(event: MouseEvent | TouchEvent, target: { type: 'node'
   const touch = 'changedTouches' in event ? event.changedTouches[0] : null
   contextMenuX.value = touch?.clientX ?? ('clientX' in event ? event.clientX : 0)
   contextMenuY.value = touch?.clientY ?? ('clientY' in event ? event.clientY : 0)
-  contextMenuOpenedAt.value = Date.now()
   contextMenuTarget.value = target
   contextMenuVisible.value = false
   void nextTick(() => {
@@ -1580,11 +1597,6 @@ function closeContextMenu() {
   contextMenuTarget.value = null
 }
 
-function handleContextMenuClickOutside() {
-  if (Date.now() - contextMenuOpenedAt.value < 180) return
-  closeContextMenu()
-}
-
 function handleContextMenuSelect(key: string | number) {
   const target = contextMenuTarget.value
   if (key === 'rerun-downstream-keep-node' && target?.type === 'node') {
@@ -1680,19 +1692,19 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
           @primary="openCreateWorkflowDrawer"
         />
         <div class="workflow-list-toolbar">
-          <NSelect
+          <a-select
             class="workflow-profile-filter"
-            :value="workflowProfileFilter || '__all__'"
+            :model-value="workflowProfileFilter || '__all__'"
             :options="workflowProfileFilterOptions"
             size="small"
             :loading="profilesStore.loading"
-            @update:value="handleWorkflowProfileFilterChange"
+            @change="value => handleWorkflowProfileFilterChange(value as string)"
           />
           <div class="workflow-list-actions">
-            <NButton
+            <a-button
               v-if="!isWorkflowBatchMode"
-              quaternary
-              size="tiny"
+              type="text"
+              size="mini"
               :title="t('workflow.batch.toggle')"
               @click="toggleWorkflowBatchMode"
             >
@@ -1702,11 +1714,11 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
                   <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
                 </svg>
               </template>
-            </NButton>
-            <NButton
+            </a-button>
+            <a-button
               v-if="isWorkflowBatchMode"
-              quaternary
-              size="tiny"
+              type="text"
+              size="mini"
               :disabled="!canSelectAllWorkflows || isWorkflowBatchDeleting"
               :title="t('workflow.batch.selectAll')"
               @click="selectAllWorkflows"
@@ -1717,30 +1729,31 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
                   <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
                 </svg>
               </template>
-            </NButton>
-            <NPopconfirm
+            </a-button>
+            <a-popconfirm
               v-if="isWorkflowBatchMode && selectedWorkflowCount > 0"
-              v-model:show="showWorkflowBatchDeleteConfirm"
-              :positive-button-props="{ loading: isWorkflowBatchDeleting, disabled: isWorkflowBatchDeleting }"
-              :negative-button-props="{ disabled: isWorkflowBatchDeleting }"
-              @positive-click="handleWorkflowBatchDeleteConfirm"
+              :content="t('workflow.batch.confirmDelete', { count: selectedWorkflowCount })"
+              @ok="handleWorkflowBatchDeleteConfirm"
             >
-              <template #trigger>
-                <NButton quaternary size="tiny" type="error" :loading="isWorkflowBatchDeleting" :disabled="isWorkflowBatchDeleting">
-                  <template #icon>
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <polyline points="3 6 5 6 21 6" />
-                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                    </svg>
-                  </template>
-                </NButton>
-              </template>
-              {{ t('workflow.batch.confirmDelete', { count: selectedWorkflowCount }) }}
-            </NPopconfirm>
-            <NButton
+              <a-button
+                type="text"
+                size="mini"
+                status="danger"
+                :loading="isWorkflowBatchDeleting"
+                :disabled="isWorkflowBatchDeleting"
+              >
+                <template #icon>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                  </svg>
+                </template>
+              </a-button>
+            </a-popconfirm>
+            <a-button
               v-if="isWorkflowBatchMode"
-              quaternary
-              size="tiny"
+              type="text"
+              size="mini"
               :disabled="isWorkflowBatchDeleting"
               @click="toggleWorkflowBatchMode"
             >
@@ -1750,7 +1763,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
                   <line x1="6" y1="6" x2="18" y2="18" />
                 </svg>
               </template>
-            </NButton>
+            </a-button>
           </div>
         </div>
       </div>
@@ -1766,8 +1779,8 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
           @click="handleWorkflowListItemClick(workflow.id)"
         >
           <span v-if="isWorkflowBatchMode" class="workflow-select-indicator">
-            <NCheckbox
-              :checked="isWorkflowSelected(workflow.id)"
+            <a-checkbox
+              :model-value="isWorkflowSelected(workflow.id)"
               @click.stop="toggleWorkflowSelection(workflow.id)"
             />
           </span>
@@ -1783,26 +1796,24 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
             <span class="workflow-list-name">{{ workflow.name }}</span>
             <span class="workflow-list-meta">{{ workflow.profile }} · {{ workflow.nodes.length }} {{ t('workflow.stats.nodes') }} · {{ workflow.edges.length }} {{ t('workflow.stats.edges') }}</span>
           </span>
-          <NPopconfirm
+          <a-popconfirm
             v-if="!isWorkflowBatchMode"
-            @positive-click="handleWorkflowDelete(workflow.id)"
+            :content="t('workflow.batch.confirmDelete', { count: 1 })"
+            @ok="handleWorkflowDelete(workflow.id)"
           >
-            <template #trigger>
-              <button
-                class="workflow-list-delete"
-                type="button"
-                :title="t('common.delete')"
-                :disabled="deletingWorkflowIds.has(workflow.id)"
-                @click.stop.prevent
-              >
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </template>
-            {{ t('workflow.batch.confirmDelete', { count: 1 }) }}
-          </NPopconfirm>
+            <button
+              class="workflow-list-delete"
+              type="button"
+              :title="t('common.delete')"
+              :disabled="deletingWorkflowIds.has(workflow.id)"
+              @click.stop.prevent
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          </a-popconfirm>
         </button>
       </div>
       <PageSidebarFooter v-if="showWorkflowSidebar" />
@@ -1811,11 +1822,11 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
     <main class="workflow-main">
       <header class="page-header">
         <div class="header-left">
-          <NButton
+          <a-button
             class="header-sidebar-toggle"
-            quaternary
+            type="text"
             size="small"
-            circle
+            shape="circle"
             @click="showWorkflowSidebar = !showWorkflowSidebar"
           >
             <template #icon>
@@ -1833,7 +1844,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
                 <rect x="14" y="14" width="7" height="7" />
               </svg>
             </template>
-          </NButton>
+          </a-button>
           <div class="header-workflow-meta">
             <span class="header-workflow-title">{{ workflowName }}</span>
             <button class="workspace-badge" type="button" :title="workflowWorkspace || t('workflow.workspace.select')" @click="openWorkspacePicker('active')">
@@ -1845,108 +1856,95 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
           </div>
         </div>
         <div class="header-actions">
-          <NTooltip trigger="hover">
-            <template #trigger>
-              <NButton
-                quaternary
-                size="small"
-                circle
-                :aria-label="showWorkflowRunsPanel ? t('workflow.runs.hide') : t('workflow.runs.show')"
-                @click="toggleWorkflowRunsPanel"
-              >
-                <template #icon>
-                  <svg v-if="showWorkflowRunsPanel" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <rect x="3" y="4" width="18" height="16" rx="2" />
-                    <path d="M15 4v16" />
-                    <path d="M8 9h4" />
-                    <path d="M8 13h4" />
-                  </svg>
-                  <svg v-else width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <rect x="3" y="4" width="18" height="16" rx="2" />
-                    <path d="M9 4v16" />
-                    <path d="M13 9h4" />
-                    <path d="M13 13h4" />
-                  </svg>
-                </template>
-              </NButton>
-            </template>
-            {{ showWorkflowRunsPanel ? t('workflow.runs.hide') : t('workflow.runs.show') }}
-          </NTooltip>
-          <NTooltip v-if="!selectedWorkflowRunId" trigger="hover">
-            <template #trigger>
-              <NButton quaternary size="small" circle :aria-label="t('workflow.actions.addNode')" @click="addAgentNode">
-                <template #icon>
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                </template>
-              </NButton>
-            </template>
-            {{ t('workflow.actions.addNode') }}
-          </NTooltip>
-          <NTooltip v-if="!selectedWorkflowRunId" trigger="hover">
-            <template #trigger>
-              <NButton
-                quaternary
-                size="small"
-                circle
-                :loading="savingWorkflow"
-                :disabled="!activeWorkflowId || executingWorkflow"
-                :aria-label="t('common.save')"
-                @click="() => saveActiveWorkflow()"
-              >
-                <template #icon>
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
-                    <path d="M17 21v-8H7v8" />
-                    <path d="M7 3v5h8" />
-                  </svg>
-                </template>
-              </NButton>
-            </template>
-            {{ t('common.save') }}
-          </NTooltip>
-          <NTooltip v-if="!selectedWorkflowRunId" trigger="hover">
-            <template #trigger>
-              <NButton
-                quaternary
-                size="small"
-                circle
-                :loading="executingWorkflow"
-                :disabled="!activeWorkflowId || savingWorkflow"
-                :aria-label="t('workflow.actions.startExecution')"
-                @click="startWorkflowExecution"
-              >
-                <template #icon>
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                </template>
-              </NButton>
-            </template>
-            {{ t('workflow.actions.startExecution') }}
-          </NTooltip>
+          <a-tooltip :content="showWorkflowRunsPanel ? t('workflow.runs.hide') : t('workflow.runs.show')">
+            <a-button
+              type="text"
+              size="small"
+              shape="circle"
+              :aria-label="showWorkflowRunsPanel ? t('workflow.runs.hide') : t('workflow.runs.show')"
+              @click="toggleWorkflowRunsPanel"
+            >
+              <template #icon>
+                <svg v-if="showWorkflowRunsPanel" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <rect x="3" y="4" width="18" height="16" rx="2" />
+                  <path d="M15 4v16" />
+                  <path d="M8 9h4" />
+                  <path d="M8 13h4" />
+                </svg>
+                <svg v-else width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <rect x="3" y="4" width="18" height="16" rx="2" />
+                  <path d="M9 4v16" />
+                  <path d="M13 9h4" />
+                  <path d="M13 13h4" />
+                </svg>
+              </template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="!selectedWorkflowRunId" :content="t('workflow.actions.addNode')">
+            <a-button type="text" size="small" shape="circle" :aria-label="t('workflow.actions.addNode')" @click="addAgentNode">
+              <template #icon>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <line x1="12" y1="5" x2="12" y2="19" />
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+              </template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="!selectedWorkflowRunId" :content="t('common.save')">
+            <a-button
+              type="text"
+              size="small"
+              shape="circle"
+              :loading="savingWorkflow"
+              :disabled="!activeWorkflowId || executingWorkflow"
+              :aria-label="t('common.save')"
+              @click="() => saveActiveWorkflow()"
+            >
+              <template #icon>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                  <path d="M17 21v-8H7v8" />
+                  <path d="M7 3v5h8" />
+                </svg>
+              </template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip v-if="!selectedWorkflowRunId" :content="t('workflow.actions.startExecution')">
+            <a-button
+              type="text"
+              size="small"
+              shape="circle"
+              :loading="executingWorkflow"
+              :disabled="!activeWorkflowId || savingWorkflow"
+              :aria-label="t('workflow.actions.startExecution')"
+              @click="startWorkflowExecution"
+            >
+              <template #icon>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </template>
+            </a-button>
+          </a-tooltip>
         </div>
       </header>
-    <NModal
-      v-model:show="workspaceModalVisible"
-      preset="card"
+    <a-modal
+      v-model:visible="workspaceModalVisible"
       :title="t('workflow.workspace.title')"
       :style="{ width: 'min(720px, calc(100vw - 32px))' }"
     >
       <FolderPicker v-model="workspacePickerValue" />
       <template #footer>
-        <NSpace justify="end">
-          <NButton @click="clearWorkspacePicker">
+        <a-space justify="end">
+          <a-button @click="clearWorkspacePicker">
             {{ t('workflow.workspace.clear') }}
-          </NButton>
-          <NButton type="primary" @click="workspaceModalVisible = false">
+          </a-button>
+          <a-button type="primary" @click="workspaceModalVisible = false">
             {{ t('common.confirm') }}
-          </NButton>
-        </NSpace>
+          </a-button>
+        </a-space>
       </template>
-    </NModal>
+    </a-modal>
 
     <div ref="workflowBodyRef" class="workflow-body">
       <aside
@@ -1963,10 +1961,10 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
             <div class="workflow-chat-title" :title="workflowChatPanelTitle">
               {{ workflowChatPanelTitle }}
             </div>
-            <NButton
-              quaternary
-              size="tiny"
-              circle
+            <a-button
+              type="text"
+              size="mini"
+              shape="circle"
               :aria-label="t('common.cancel')"
               @click="closeWorkflowChatPanel"
             >
@@ -1976,7 +1974,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
                   <line x1="6" y1="6" x2="18" y2="18" />
                 </svg>
               </template>
-            </NButton>
+            </a-button>
           </header>
           <div class="workflow-chat-content">
             <div v-if="workflowChatPanelLoading" class="workflow-chat-loading">
@@ -1988,21 +1986,21 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
                   {{ t('workflow.status.pending_approval') }}
                 </div>
                 <div class="workflow-node-approval-actions">
-                  <NButton
+                  <a-button
                     size="small"
                     :disabled="workflowApprovalSubmitting"
                     @click="respondWorkflowNodeApproval(false)"
                   >
                     {{ t('common.cancel') }}
-                  </NButton>
-                  <NButton
+                  </a-button>
+                  <a-button
                     type="primary"
                     size="small"
                     :loading="workflowApprovalSubmitting"
                     @click="respondWorkflowNodeApproval(true)"
                   >
                     {{ t('common.confirm') }}
-                  </NButton>
+                  </a-button>
                 </div>
               </div>
               <MessageList />
@@ -2045,16 +2043,27 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
           <MiniMap pannable zoomable :node-color="nodeColor" />
           <Controls />
         </VueFlow>
-        <NDropdown
-          placement="bottom-start"
-          trigger="manual"
-          :x="contextMenuX"
-          :y="contextMenuY"
-          :options="contextMenuOptions"
-          :show="contextMenuVisible"
-          @select="handleContextMenuSelect"
-          @clickoutside="handleContextMenuClickOutside"
-        />
+        <a-trigger
+          position="bl"
+          trigger="contextMenu"
+          v-model:popup-visible="contextMenuVisible"
+          :popup-style="contextMenuStyle"
+          :auto-fit-position="false"
+        >
+          <span class="workflow-context-menu-anchor" />
+          <template #content>
+            <div class="workflow-context-menu">
+              <a-doption
+                v-for="option in contextMenuOptions"
+                :key="option.key"
+                :disabled="option.disabled"
+                @click="handleContextMenuSelect(option.key)"
+              >
+                {{ option.label }}
+              </a-doption>
+            </div>
+          </template>
+        </a-trigger>
       </section>
       <aside v-if="showWorkflowRunsPanel" class="workflow-runs-panel">
         <div class="workflow-runs-header">
@@ -2103,56 +2112,65 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
             <div v-if="run.error" class="workflow-run-error" :title="run.error">{{ run.error }}</div>
           </button>
         </div>
-        <NDropdown
-          placement="bottom-start"
-          trigger="manual"
-          :x="workflowRunContextMenuX"
-          :y="workflowRunContextMenuY"
-          :options="workflowRunContextMenuOptions"
-          :show="workflowRunContextMenuVisible"
-          @select="handleWorkflowRunContextMenuSelect"
-          @clickoutside="closeWorkflowRunContextMenu"
-        />
+        <a-trigger
+          position="bl"
+          trigger="contextMenu"
+          v-model:popup-visible="workflowRunContextMenuVisible"
+          :popup-style="workflowRunContextMenuStyle"
+          :auto-fit-position="false"
+        >
+          <span class="workflow-context-menu-anchor" />
+          <template #content>
+            <div class="workflow-context-menu">
+              <a-doption
+                v-for="option in workflowRunContextMenuOptions"
+                :key="option.key"
+                :disabled="option.disabled"
+                @click="handleWorkflowRunContextMenuSelect(option.key)"
+              >
+                {{ option.label }}
+              </a-doption>
+            </div>
+          </template>
+        </a-trigger>
       </aside>
     </div>
     </main>
 
-    <NDrawer v-model:show="createWorkflowDrawerVisible" placement="right" :width="420">
-      <NDrawerContent :title="t('workflow.actions.newWorkflow')" closable>
-        <div class="workflow-create-form">
-          <label class="workflow-field">
-            <span class="workflow-field-label">{{ t('workflow.namePlaceholder') }}</span>
-            <NInput
-              v-model:value="createWorkflowName"
-              :placeholder="t('workflow.namePlaceholder')"
-              @keydown.enter.prevent="submitCreateWorkflow"
-            />
-          </label>
-          <label class="workflow-field">
-            <span class="workflow-field-label">{{ t('workflow.profile') }}</span>
-            <NSelect
-              v-model:value="createWorkflowProfile"
-              :options="workflowProfileOptions"
-              :loading="profilesStore.loading"
-            />
-          </label>
-          <div class="workflow-field">
-            <span class="workflow-field-label">{{ t('workflow.workspace.select') }}</span>
-            <FolderPicker v-model="createWorkflowWorkspace" />
-          </div>
+    <a-drawer v-model:visible="createWorkflowDrawerVisible" placement="right" :width="420" :title="t('workflow.actions.newWorkflow')">
+      <div class="workflow-create-form">
+        <label class="workflow-field">
+          <span class="workflow-field-label">{{ t('workflow.namePlaceholder') }}</span>
+          <a-input
+            v-model="createWorkflowName"
+            :placeholder="t('workflow.namePlaceholder')"
+            @press-enter="submitCreateWorkflow"
+          />
+        </label>
+        <label class="workflow-field">
+          <span class="workflow-field-label">{{ t('workflow.profile') }}</span>
+          <a-select
+            v-model="createWorkflowProfile"
+            :options="workflowProfileOptions"
+            :loading="profilesStore.loading"
+          />
+        </label>
+        <div class="workflow-field">
+          <span class="workflow-field-label">{{ t('workflow.workspace.select') }}</span>
+          <FolderPicker v-model="createWorkflowWorkspace" />
         </div>
-        <template #footer>
-          <NSpace justify="end">
-            <NButton @click="createWorkflowDrawerVisible = false">
-              {{ t('common.cancel') }}
-            </NButton>
-            <NButton type="primary" :loading="creatingWorkflow" @click="submitCreateWorkflow">
-              {{ t('common.create') }}
-            </NButton>
-          </NSpace>
-        </template>
-      </NDrawerContent>
-    </NDrawer>
+      </div>
+      <template #footer>
+        <a-space justify="end">
+          <a-button @click="createWorkflowDrawerVisible = false">
+            {{ t('common.cancel') }}
+          </a-button>
+          <a-button type="primary" :loading="creatingWorkflow" @click="submitCreateWorkflow">
+            {{ t('common.create') }}
+          </a-button>
+        </a-space>
+      </template>
+    </a-drawer>
   </div>
 </template>
 
@@ -2219,7 +2237,7 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   gap: 4px;
   height: 22px;
 
-  .n-button {
+  .arco-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -2228,6 +2246,15 @@ function nodeColor(node: { data: WorkflowAgentNodeData }) {
   }
 }
 
+.workflow-context-menu-anchor {
+  display: none;
+}
+
+.workflow-context-menu {
+  min-width: 160px;
+  padding: 4px 0;
+}
+
 .workflow-list {
   flex: 1;
   min-height: 0;
diff --git a/tests/client/default-credential-prompt.test.ts b/tests/client/default-credential-prompt.test.ts
index 8108394..5104965 100644
--- a/tests/client/default-credential-prompt.test.ts
+++ b/tests/client/default-credential-prompt.test.ts
@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockPush = vi.hoisted(() => vi.fn())
 const mockFetchCurrentUser = vi.hoisted(() => vi.fn())
@@ -27,30 +28,23 @@ vi.mock('@/api/client', () => ({
   getApiKey: mockGetApiKey,
 }))
 
-vi.mock('naive-ui', async () => {
-  const { defineComponent, h } = await import('vue')
-  return {
-    NModal: defineComponent({
-      props: { show: Boolean, title: String },
-      setup(props, { slots }) {
-        return () => props.show
-          ? h('div', { class: 'modal' }, [
-            h('h2', props.title),
-            slots.default?.(),
-            h('div', { class: 'modal-actions' }, slots.action?.()),
-          ])
-          : null
-      },
-    }),
-    NButton: defineComponent({
-      emits: ['click'],
-      setup(_props, { emit, slots }) {
-        return () => h('button', { onClick: () => emit('click') }, slots.default?.())
-      },
-    }),
-  }
+// a-modal teleports to body in jsdom, so render it inline through a stub keyed
+// by Arco's internal component name.
+const AModalStub = defineComponent({
+  name: 'Modal',
+  props: { visible: Boolean, title: String },
+  emits: ['update:visible'],
+  template: '<div v-if="visible" class="arco-modal-stub"><h2>{{ title }}</h2><slot /><div class="modal-actions"><slot name="footer" /></div></div>',
 })
 
+const arcoGlobal = { plugins: [ArcoVue], stubs: { Modal: AModalStub } }
+
+function buttonByText(wrapper: any, text: string) {
+  const button = wrapper.findAll('button').find((node: any) => node.text().trim() === text)
+  if (!button) throw new Error(`no button labelled "${text}"`)
+  return button
+}
+
 import DefaultCredentialPrompt from '@/components/auth/DefaultCredentialPrompt.vue'
 
 describe('DefaultCredentialPrompt', () => {
@@ -74,13 +68,14 @@ describe('DefaultCredentialPrompt', () => {
       requiresCredentialChange: true,
     })
 
-    const wrapper = mount(DefaultCredentialPrompt)
+    const wrapper = mount(DefaultCredentialPrompt, { global: arcoGlobal })
     await flushPromises()
     await nextTick()
 
     expect(mockFetchCurrentUser).toHaveBeenCalledOnce()
     expect(wrapper.text()).toContain('login.defaultCredentialMessage')
-    await wrapper.findAll('button')[1].trigger('click')
+
+    await buttonByText(wrapper, 'login.defaultCredentialAction').trigger('click')
     expect(mockPush).toHaveBeenCalledWith({ name: 'hermes.settings', query: { tab: 'account' } })
   })
 
@@ -88,7 +83,7 @@ describe('DefaultCredentialPrompt', () => {
     routeState.fullPath = '/'
     routeState.name = 'login'
 
-    mount(DefaultCredentialPrompt)
+    mount(DefaultCredentialPrompt, { global: arcoGlobal })
     await Promise.resolve()
 
     expect(mockFetchCurrentUser).not.toHaveBeenCalled()
diff --git a/tests/client/display-settings.test.ts b/tests/client/display-settings.test.ts
index fccc8bd..a2c5d76 100644
--- a/tests/client/display-settings.test.ts
+++ b/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 })
diff --git a/tests/client/file-context-menu.test.ts b/tests/client/file-context-menu.test.ts
index cf692dd..babd38e 100644
--- a/tests/client/file-context-menu.test.ts
+++ b/tests/client/file-context-menu.test.ts
@@ -1,7 +1,9 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
 import { createPinia, setActivePinia } from 'pinia'
+import ArcoVue from '@arco-design/web-vue'
 import type { FileEntry } from '@/api/hermes/files'
 
 const mockMessage = vi.hoisted(() => ({
@@ -22,36 +24,6 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', async () => {
-  const { defineComponent, h } = await import('vue')
-
-  return {
-    NDropdown: defineComponent({
-      name: 'NDropdown',
-      props: {
-        show: { type: Boolean, default: false },
-        options: { type: Array, default: () => [] },
-      },
-      emits: ['select', 'clickoutside'],
-      setup(props, { emit }) {
-        return () => h('div', { 'data-show': props.show ? 'true' : 'false' },
-          (props.options as Array<any>).map(option => h(
-            'button',
-            {
-              type: 'button',
-              'data-key': option.key,
-              onClick: () => emit('select', option.key),
-            },
-            option.label ?? option.type ?? option.key,
-          )),
-        )
-      },
-    }),
-    useMessage: () => mockMessage,
-    useDialog: () => mockDialog,
-  }
-})
-
 vi.mock('@/api/hermes/download', () => ({
   downloadFile: downloadFileMock,
 }))
@@ -64,6 +36,41 @@ vi.mock('@/utils/file-path', () => ({
   getClipboardPathForEntry: (entry: FileEntry) => entry.path,
 }))
 
+// Arco's imperative Message/Dialog APIs need a live DOM, so mock the adapters.
+vi.mock('@/composables/useMessage', () => ({ useMessage: () => mockMessage }))
+vi.mock('@/composables/useDialog', () => ({ useDialog: () => mockDialog }))
+
+/**
+ * Arco's a-trigger teleports its popup to body in jsdom and a-doption is a
+ * popup-scoped component, so both are stubbed under Arco's *internal* component
+ * names — stubs key off those, not the `a-*` template tags, because Arco is
+ * registered globally via `app.use(ArcoVue)`.
+ *
+ * The stub renders the #content slot inline and lets clicks bubble from the
+ * option element, so a click behaves like the real Doption -> handleSelect path.
+ */
+const ATriggerStub = defineComponent({
+  name: 'Trigger',
+  props: ['popupVisible'],
+  template: '<div class="arco-trigger-stub"><slot /><slot name="content" /></div>',
+})
+
+const ADoptionStub = defineComponent({
+  name: 'Doption',
+  emits: ['click'],
+  template: '<div class="arco-doption-stub" @click="$emit(\'click\')"><slot /></div>',
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: { Trigger: ATriggerStub, Doption: ADoptionStub },
+}
+
+/** Menu item keys, read from the rendered popup rather than a stub attribute. */
+function menuKeys(wrapper: ReturnType<typeof mount>): string[] {
+  return wrapper.findAll('.file-context-menu > *').map(node => node.text().trim())
+}
+
 import FileContextMenu from '@/components/hermes/files/FileContextMenu.vue'
 import { useFilesStore } from '@/stores/hermes/files'
 
@@ -78,8 +85,14 @@ describe('FileContextMenu', () => {
     await flushPromises()
   }
 
+  function menuItem(wrapper: ReturnType<typeof mount>, label: string) {
+    const item = wrapper.findAll('.file-context-menu > *').find(node => node.text().trim() === label)
+    if (!item) throw new Error(`menu item not found: ${label}`)
+    return item
+  }
+
   it('offers both edit and preview for previewable text files', async () => {
-    const wrapper = mount(FileContextMenu)
+    const wrapper = mount(FileContextMenu, { global: arcoGlobal })
     const entry: FileEntry = {
       name: 'Dockerfile',
       path: 'Dockerfile',
@@ -90,16 +103,16 @@ describe('FileContextMenu', () => {
 
     await showMenu(wrapper, entry)
 
-    const keys = wrapper.findAll('[data-key]').map(node => node.attributes('data-key'))
-    expect(keys).toContain('edit')
-    expect(keys).toContain('preview')
-    expect(keys).toContain('download')
+    const labels = menuKeys(wrapper)
+    expect(labels).toContain('files.edit')
+    expect(labels).toContain('files.preview')
+    expect(labels).toContain('files.download')
   })
 
   it('invokes the store preview action from the preview menu item', async () => {
     const store = useFilesStore()
     const openPreviewSpy = vi.spyOn(store, 'openPreview').mockResolvedValue(undefined)
-    const wrapper = mount(FileContextMenu)
+    const wrapper = mount(FileContextMenu, { global: arcoGlobal })
     const entry: FileEntry = {
       name: 'README',
       path: 'README',
@@ -109,7 +122,7 @@ describe('FileContextMenu', () => {
     }
 
     await showMenu(wrapper, entry)
-    await wrapper.get('[data-key="preview"]').trigger('click')
+    await menuItem(wrapper, 'files.preview').trigger('click')
     await flushPromises()
 
     expect(openPreviewSpy).toHaveBeenCalledWith(entry)
@@ -117,7 +130,7 @@ describe('FileContextMenu', () => {
   })
 
   it('does not offer preview for non-previewable binary files', async () => {
-    const wrapper = mount(FileContextMenu)
+    const wrapper = mount(FileContextMenu, { global: arcoGlobal })
     const entry: FileEntry = {
       name: 'archive.zip',
       path: 'archive.zip',
@@ -128,9 +141,9 @@ describe('FileContextMenu', () => {
 
     await showMenu(wrapper, entry)
 
-    const keys = wrapper.findAll('[data-key]').map(node => node.attributes('data-key'))
-    expect(keys).not.toContain('preview')
-    expect(keys).not.toContain('edit')
-    expect(keys).toContain('download')
+    const labels = menuKeys(wrapper)
+    expect(labels).not.toContain('files.preview')
+    expect(labels).not.toContain('files.edit')
+    expect(labels).toContain('files.download')
   })
 })
diff --git a/tests/client/gateway-auto-start-settings.test.ts b/tests/client/gateway-auto-start-settings.test.ts
index d4723a3..5ac67d9 100644
--- a/tests/client/gateway-auto-start-settings.test.ts
+++ b/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',
diff --git a/tests/client/job-form-modal.test.ts b/tests/client/job-form-modal.test.ts
index eb5e03a..ab47b12 100644
--- a/tests/client/job-form-modal.test.ts
+++ b/tests/client/job-form-modal.test.ts
@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockMessage = vi.hoisted(() => ({
   warning: vi.fn(),
@@ -86,38 +87,102 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NModal: defineComponent({
-    template: '<div class="n-modal-stub"><slot /><slot name="footer" /></div>',
-  }),
-  NForm: defineComponent({ template: '<form><slot /></form>' }),
-  NFormItem: defineComponent({ template: '<div><slot /></div>' }),
-  NInput: defineComponent({
-    props: { value: { type: String, required: false } },
-    emits: ['update:value'],
-    template: '<input class="n-input-stub" :value="value" @input="$emit(\'update:value\', $event.target.value)" />',
-  }),
-  NInputNumber: defineComponent({
-    props: { value: { required: false } },
-    emits: ['update:value'],
-    template: '<input class="n-input-number-stub" :value="value" type="number" @input="$emit(\'update:value\', Number($event.target.value))" />',
-  }),
-  NSelect: defineComponent({
-    props: {
-      value: { required: false },
-      options: { type: Array, default: () => [] },
-      multiple: { type: Boolean, default: false },
-      disabled: { type: Boolean, default: false },
-    },
-    emits: ['update:value'],
-    template: '<select class="n-select-stub" :multiple="multiple" :disabled="disabled" @change="$emit(\'update:value\', multiple ? Array.from($event.target.selectedOptions).map(option => option.value) : $event.target.value)"><option v-for="option in options" :key="option.value" :value="option.value" :disabled="option.disabled">{{ option.label }}</option></select>',
-  }),
-  NButton: defineComponent({
-    emits: ['click'],
-    template: '<button class="n-button-stub" @click.prevent="$emit(\'click\')"><slot /></button>',
-  }),
-  useMessage: () => mockMessage,
-}))
+// Arco's imperative Message API needs a live DOM, so mock the adapter composable.
+vi.mock('@/composables/useMessage', () => ({ useMessage: () => mockMessage }))
+
+/**
+ * Arco's a-select renders a custom dropdown instead of a native <select>, and
+ * a-modal teleports to body in jsdom. Both are stubbed under Arco's *internal*
+ * component names (stubs key off those, not the `a-*` template tags, because
+ * Arco is registered globally via `app.use(ArcoVue)`).
+ */
+const ASelectStub = defineComponent({
+  name: 'Select',
+  props: {
+    modelValue: { type: [String, Number, Array], default: null },
+    options: { type: Array, default: () => [] },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: '' },
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    return () =>
+      h(
+        'select',
+        {
+          class: 'arco-select-stub',
+          multiple: props.multiple,
+          disabled: props.disabled,
+          onChange: (event: Event) => {
+            const target = event.target as HTMLSelectElement
+            const value = props.multiple
+              ? Array.from(target.selectedOptions).map(option => option.value)
+              : target.value
+            emit('update:modelValue', value)
+            emit('change', value)
+          },
+        },
+        [
+          !props.multiple && h('option', { value: '' }, props.placeholder),
+          ...(props.options as Array<{ label: string; value: string; disabled?: boolean }>).map(option =>
+            h('option', { key: option.value, value: option.value, disabled: option.disabled }, option.label),
+          ),
+        ],
+      )
+  },
+})
+
+const AInputNumberStub = defineComponent({
+  name: 'InputNumber',
+  props: { modelValue: { type: [Number, String], default: undefined } },
+  emits: ['update:modelValue', 'change'],
+  setup(_props, { emit }) {
+    return () =>
+      h('input', {
+        class: 'arco-input-number-stub',
+        type: 'number',
+        onChange: (event: Event) => {
+          const value = Number((event.target as HTMLInputElement).value)
+          emit('update:modelValue', value)
+          emit('change', value)
+        },
+      })
+  },
+})
+
+const AModalStub = defineComponent({
+  name: 'Modal',
+  props: ['visible'],
+  template: '<div v-if="visible" class="a-modal-stub"><slot /><slot name="footer" /></div>',
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: { Select: ASelectStub, InputNumber: AInputNumberStub, Modal: AModalStub },
+}
+
+/**
+ * Locate a form control by its Arco form-item label instead of by DOM index, so
+ * the assertion keeps targeting the intended field even if field order changes.
+ */
+function fieldByLabel(wrapper: ReturnType<typeof mount>, label: string) {
+  const item = wrapper
+    .findAll('.arco-form-item')
+    .find(node => node.find('.arco-form-item-label').text().trim() === label)
+  if (!item) throw new Error(`form item not found: ${label}`)
+  return item
+}
+
+function selectByLabel(wrapper: ReturnType<typeof mount>, label: string) {
+  return fieldByLabel(wrapper, label).get('select.arco-select-stub')
+}
+
+function buttonByText(wrapper: ReturnType<typeof mount>, text: string) {
+  const button = wrapper.findAll('button').find(node => node.text().trim() === text)
+  if (!button) throw new Error(`button not found: ${text}`)
+  return button
+}
 
 import JobFormModal from '@/components/hermes/jobs/JobFormModal.vue'
 
@@ -130,6 +195,7 @@ describe('JobFormModal deliver targets', () => {
   it('loads platform settings when the store has not been hydrated', async () => {
     mount(JobFormModal, {
       props: { jobId: null },
+      global: arcoGlobal,
     })
 
     await flushPromises()
@@ -146,12 +212,14 @@ describe('JobFormModal deliver targets', () => {
     }
     const wrapper = mount(JobFormModal, {
       props: { jobId: null },
+      global: arcoGlobal,
     })
 
     await flushPromises()
 
     expect(mockSettingsStore.fetchSettings).not.toHaveBeenCalled()
-    const labels = wrapper.findAll('.n-select-stub')[4].text()
+    const deliverSelect = selectByLabel(wrapper, 'jobs.deliverTarget')
+    const labels = deliverSelect.text()
     expect(labels).toContain('Telegram')
     expect(labels).toContain('Discord')
     expect(labels).toContain('Slack')
@@ -163,7 +231,7 @@ describe('JobFormModal deliver targets', () => {
     expect(labels).toContain('DingTalk')
     expect(labels).toContain('QQBot')
 
-    const options = wrapper.findAll('.n-select-stub')[4].findAll('option')
+    const options = deliverSelect.findAll('option')
     const optionByValue = Object.fromEntries(options.map(option => [option.attributes('value'), option]))
     expect(optionByValue.telegram.attributes('disabled')).toBeUndefined()
     expect(optionByValue.qqbot.attributes('disabled')).toBeUndefined()
@@ -176,15 +244,15 @@ describe('JobFormModal deliver targets', () => {
     mockJobsStore.createJob.mockResolvedValue({ id: 'job-1' })
     const wrapper = mount(JobFormModal, {
       props: { jobId: null },
+      global: arcoGlobal,
     })
 
     await flushPromises()
-    const inputs = wrapper.findAll('.n-input-stub')
-    await inputs[0].setValue('Daily research')
-    await inputs[1].setValue('0 9 * * *')
-    await inputs[2].setValue('summarize updates')
-    await wrapper.findAll('.n-select-stub')[3].setValue(['planner', 'reviewer'])
-    await wrapper.findAll('.n-button-stub')[1].trigger('click')
+    await fieldByLabel(wrapper, 'jobs.name').get('input').setValue('Daily research')
+    await fieldByLabel(wrapper, 'jobs.schedule').get('input').setValue('0 9 * * *')
+    await fieldByLabel(wrapper, 'jobs.prompt').get('textarea').setValue('summarize updates')
+    await selectByLabel(wrapper, 'jobs.skills').setValue(['planner', 'reviewer'])
+    await buttonByText(wrapper, 'common.create').trigger('click')
     await flushPromises()
 
     expect(mockJobsStore.createJob).toHaveBeenCalledWith({
@@ -204,17 +272,17 @@ describe('JobFormModal deliver targets', () => {
     mockJobsStore.createJob.mockResolvedValue({ id: 'job-1' })
     const wrapper = mount(JobFormModal, {
       props: { jobId: null },
+      global: arcoGlobal,
     })
 
     await flushPromises()
-    const inputs = wrapper.findAll('.n-input-stub')
-    await inputs[0].setValue('Daily research')
-    await inputs[1].setValue('0 9 * * *')
-    await inputs[2].setValue('summarize updates')
-    await wrapper.findAll('.n-select-stub')[0].setValue('openai')
+    await fieldByLabel(wrapper, 'jobs.name').get('input').setValue('Daily research')
+    await fieldByLabel(wrapper, 'jobs.schedule').get('input').setValue('0 9 * * *')
+    await fieldByLabel(wrapper, 'jobs.prompt').get('textarea').setValue('summarize updates')
+    await selectByLabel(wrapper, 'jobs.provider').setValue('openai')
     await flushPromises()
-    await wrapper.findAll('.n-select-stub')[1].setValue('gpt-4.1-mini')
-    await wrapper.findAll('.n-button-stub')[1].trigger('click')
+    await selectByLabel(wrapper, 'jobs.model').setValue('gpt-4.1-mini')
+    await buttonByText(wrapper, 'common.create').trigger('click')
     await flushPromises()
 
     expect(mockJobsStore.createJob).toHaveBeenCalledWith(expect.objectContaining({
diff --git a/tests/client/kanban-create-form.test.ts b/tests/client/kanban-create-form.test.ts
index 95438a8..e9cdbe4 100644
--- a/tests/client/kanban-create-form.test.ts
+++ b/tests/client/kanban-create-form.test.ts
@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockCreateTask = vi.hoisted(() => vi.fn())
 const mockMessage = vi.hoisted(() => ({
@@ -42,43 +43,131 @@ vi.mock('@/api/hermes/skills', () => ({
   fetchSkills: mockFetchSkills,
 }))
 
-vi.mock('naive-ui', () => ({
-  NModal: defineComponent({
-    emits: ['close'],
-    template: '<div class="n-modal-stub"><slot /><slot name="action" /></div>',
-  }),
-  NForm: defineComponent({ template: '<form><slot /></form>' }),
-  NFormItem: defineComponent({ template: '<div><slot /></div>' }),
-  NInput: defineComponent({
-    props: { value: { type: String, required: false } },
-    emits: ['update:value'],
-    template: '<input class="n-input-stub" :value="value" @input="$emit(\'update:value\', $event.target.value)" />',
-  }),
-  NInputNumber: defineComponent({
-    props: { value: { type: Number, required: false } },
-    emits: ['update:value'],
-    template: '<input class="n-input-number-stub" type="number" :value="value ?? \'\'" @input="$emit(\'update:value\', $event.target.value === \'\' ? null : Number($event.target.value))" />',
-  }),
-  NSelect: defineComponent({
-    props: { value: { required: false }, options: { type: Array, default: () => [] }, multiple: { type: Boolean, default: false } },
-    emits: ['update:value'],
-    template: '<select class="n-select-stub" :multiple="multiple" @change="$emit(\'update:value\', multiple ? Array.from($event.target.selectedOptions).map(option => option.value) : ($event.target.value === \'\' ? null : (/^\\d+$/.test($event.target.value) ? Number($event.target.value) : $event.target.value)))"><option value=""></option><option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option></select>',
-  }),
-  NButton: defineComponent({
-    emits: ['click'],
-    template: '<button class="n-button-stub" @click.prevent="$emit(\'click\')"><slot /></button>',
-  }),
-  NCheckbox: defineComponent({
-    props: { checked: { type: Boolean, required: false } },
-    emits: ['update:checked'],
-    template: '<label class="n-checkbox-stub"><input type="checkbox" :checked="checked" @change="$emit(\'update:checked\', $event.target.checked)" /><slot /></label>',
-  }),
-  useMessage: () => mockMessage,
-}))
-
 // KanbanCreateForm reads messages via the Arco adapter layer, not naive-ui.
 vi.mock('@/composables/useMessage', () => ({ useMessage: () => mockMessage }))
 
+/**
+ * Arco's a-select/a-input-number render custom widgets (no native form
+ * controls) and a-modal teleports to body in jsdom, so they are stubbed under
+ * Arco's *internal* component names — stubs key off those, not the `a-*`
+ * template tags, because Arco is registered globally via `app.use(ArcoVue)`.
+ */
+const ASelectStub = defineComponent({
+  name: 'Select',
+  props: {
+    modelValue: { default: null },
+    options: { type: Array, default: () => [] },
+    multiple: { type: Boolean, default: false },
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    return () =>
+      h('select', {
+        class: 'arco-select-stub',
+        multiple: props.multiple,
+        onChange: (event: Event) => {
+          const target = event.target as HTMLSelectElement
+          const raw = props.multiple
+            ? Array.from(target.selectedOptions).map(option => option.value)
+            : target.value
+          // Options carry non-string values (e.g. numeric priority); restore the
+          // declared value type so the component receives what it would in prod.
+          const options = props.options as Array<{ label: string; value: unknown }>
+          const typed = (value: string) =>
+            options.find(option => String(option.value) === value)?.value ?? value
+          const value = props.multiple
+            ? (raw as string[]).map(typed)
+            : typed(raw as string)
+          emit('update:modelValue', value)
+          emit('change', value)
+        },
+      }, [
+        h('option', { value: '' }),
+        ...(props.options as Array<{ label: string; value: unknown }>).map(option =>
+          h('option', { key: String(option.value), value: String(option.value) }, option.label),
+        ),
+      ])
+  },
+})
+
+const AInputNumberStub = defineComponent({
+  name: 'InputNumber',
+  props: { modelValue: { type: [Number, String], default: undefined } },
+  emits: ['update:modelValue', 'change'],
+  setup(_props, { emit }) {
+    return () =>
+      h('input', {
+        class: 'arco-input-number-stub',
+        type: 'number',
+        onChange: (event: Event) => {
+          const raw = (event.target as HTMLInputElement).value
+          const value = raw === '' ? undefined : Number(raw)
+          emit('update:modelValue', value)
+          emit('change', value)
+        },
+      })
+  },
+})
+
+const ACheckboxStub = defineComponent({
+  name: 'Checkbox',
+  props: { modelValue: Boolean },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    return () =>
+      h('label', { class: 'arco-checkbox-stub' }, [
+        h('input', {
+          type: 'checkbox',
+          checked: props.modelValue,
+          onChange: (event: Event) => emit('update:modelValue', (event.target as HTMLInputElement).checked),
+        }),
+        h('span', {}, 'checkbox-slot'),
+      ])
+  },
+})
+
+const AModalStub = defineComponent({
+  name: 'Modal',
+  props: ['visible'],
+  template: '<div v-if="visible" class="a-modal-stub"><slot /><slot name="footer" /></div>',
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: {
+    Select: ASelectStub,
+    InputNumber: AInputNumberStub,
+    Checkbox: ACheckboxStub,
+    Modal: AModalStub,
+  },
+}
+
+/**
+ * Locate a form control by its Arco form-item label instead of by DOM index, so
+ * the assertion keeps targeting the intended field even if field order changes.
+ */
+function fieldByLabel(wrapper: ReturnType<typeof mount>, label: string) {
+  const item = wrapper
+    .findAll('.arco-form-item')
+    .find(node => node.find('.arco-form-item-label').text().trim() === label)
+  if (!item) throw new Error(`form item not found: ${label}`)
+  return item
+}
+
+function selectByLabel(wrapper: ReturnType<typeof mount>, label: string) {
+  return fieldByLabel(wrapper, label).get('select.arco-select-stub')
+}
+
+function inputNumberByLabel(wrapper: ReturnType<typeof mount>, label: string) {
+  return fieldByLabel(wrapper, label).get('input.arco-input-number-stub')
+}
+
+function buttonByText(wrapper: ReturnType<typeof mount>, text: string) {
+  const button = wrapper.findAll('button').find(node => node.text().trim() === text)
+  if (!button) throw new Error(`button not found: ${text}`)
+  return button
+}
+
 import KanbanCreateForm from '@/components/hermes/kanban/KanbanCreateForm.vue'
 
 describe('KanbanCreateForm', () => {
@@ -87,9 +176,9 @@ describe('KanbanCreateForm', () => {
   })
 
   it('validates required title before submit', async () => {
-    const wrapper = mount(KanbanCreateForm)
+    const wrapper = mount(KanbanCreateForm, { global: arcoGlobal })
 
-    await wrapper.findAll('.n-button-stub')[1].trigger('click')
+    await buttonByText(wrapper, 'common.create').trigger('click')
 
     expect(mockMessage.warning).toHaveBeenCalledWith('kanban.form.titleRequired')
     expect(mockCreateTask).not.toHaveBeenCalled()
@@ -97,15 +186,13 @@ describe('KanbanCreateForm', () => {
 
   it('submits trimmed values and emits created/close', async () => {
     mockCreateTask.mockResolvedValue({ id: 'task-1' })
-    const wrapper = mount(KanbanCreateForm)
+    const wrapper = mount(KanbanCreateForm, { global: arcoGlobal })
 
-    const inputs = wrapper.findAll('.n-input-stub')
-    await inputs[0].setValue('  Ship kanban  ')
-    await inputs[1].setValue('  write tests  ')
-    const selects = wrapper.findAll('.n-select-stub')
-    await selects[0].setValue('alice')
-    await selects[1].setValue('3')
-    await wrapper.findAll('.n-button-stub')[1].trigger('click')
+    await fieldByLabel(wrapper, 'kanban.form.title').get('input').setValue('  Ship kanban  ')
+    await fieldByLabel(wrapper, 'kanban.form.body').get('textarea').setValue('  write tests  ')
+    await selectByLabel(wrapper, 'kanban.form.assignee').setValue('alice')
+    await selectByLabel(wrapper, 'kanban.form.priority').setValue('3')
+    await buttonByText(wrapper, 'common.create').trigger('click')
     await flushPromises()
 
     expect(mockCreateTask).toHaveBeenCalledWith({
@@ -121,28 +208,27 @@ describe('KanbanCreateForm', () => {
 
   it('submits advanced dispatcher options', async () => {
     mockCreateTask.mockResolvedValue({ id: 'task-1' })
-    const wrapper = mount(KanbanCreateForm)
+    const wrapper = mount(KanbanCreateForm, { global: arcoGlobal })
 
     await flushPromises()
-    const inputs = () => wrapper.findAll('.n-input-stub')
-    const selects = wrapper.findAll('.n-select-stub')
-    await inputs()[0].setValue('Build parity')
-    await inputs()[1].setValue('cover cli create flags')
-    await selects[2].setValue('worktree')
+    await fieldByLabel(wrapper, 'kanban.form.title').get('input').setValue('Build parity')
+    await fieldByLabel(wrapper, 'kanban.form.body').get('textarea').setValue('cover cli create flags')
+    await selectByLabel(wrapper, 'kanban.form.workspace').setValue('worktree')
     await flushPromises()
-    await inputs()[2].setValue('ops')
-    await inputs()[3].setValue('/repo')
-    await inputs()[4].setValue('kanban-ui')
-    await selects[3].setValue(['planner', 'reviewer'])
-    await inputs()[5].setValue('2h')
-    await wrapper.findAll('.n-input-number-stub')[0].setValue('3')
-    const checkboxes = wrapper.findAll('input[type="checkbox"]')
+    await fieldByLabel(wrapper, 'kanban.form.tenant').get('input').setValue('ops')
+    await fieldByLabel(wrapper, 'kanban.form.workspacePath').get('input').setValue('/repo')
+    await fieldByLabel(wrapper, 'kanban.form.branch').get('input').setValue('kanban-ui')
+    await selectByLabel(wrapper, 'kanban.form.skills').setValue(['planner', 'reviewer'])
+    await fieldByLabel(wrapper, 'kanban.form.maxRuntime').get('input').setValue('2h')
+    await inputNumberByLabel(wrapper, 'kanban.form.maxRetries').setValue('3')
+    // triage and goalMode are the two checkboxes in the advanced row.
+    const checkboxes = wrapper.findAll('.advanced-row input[type="checkbox"]')
     await checkboxes[0].setValue(true)
     await checkboxes[1].setValue(true)
     await flushPromises()
-    await wrapper.findAll('.n-input-number-stub')[1].setValue('12')
+    await inputNumberByLabel(wrapper, 'kanban.form.goalMaxTurns').setValue('12')
 
-    await wrapper.findAll('.n-button-stub')[1].trigger('click')
+    await buttonByText(wrapper, 'common.create').trigger('click')
     await flushPromises()
 
     expect(mockCreateTask).toHaveBeenCalledWith({
@@ -161,7 +247,7 @@ describe('KanbanCreateForm', () => {
   })
 
   it('uses compact profile names for assignee options', () => {
-    const wrapper = mount(KanbanCreateForm)
+    const wrapper = mount(KanbanCreateForm, { global: arcoGlobal })
 
     expect(wrapper.text()).toContain('alice')
     expect(wrapper.text()).not.toContain('default')
diff --git a/tests/client/kanban-task-card.test.ts b/tests/client/kanban-task-card.test.ts
index 95c516f..ed74b0a 100644
--- a/tests/client/kanban-task-card.test.ts
+++ b/tests/client/kanban-task-card.test.ts
@@ -2,6 +2,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
 import { mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
@@ -19,12 +20,16 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NTooltip: defineComponent({
-    name: 'NTooltip',
-    template: '<div class="n-tooltip-stub"><slot name="trigger" /><div class="tooltip-content"><slot /></div></div>',
-  }),
-}))
+/**
+ * Arco's a-tooltip only renders its content in a teleported popup, so it is
+ * stubbed under Arco's *internal* component name — stubs key off that, not the
+ * `a-*` template tag, because Arco is registered globally via `app.use(ArcoVue)`.
+ */
+const ATooltipStub = defineComponent({
+  name: 'Tooltip',
+  props: ['content'],
+  template: '<div class="arco-tooltip-stub"><div class="tooltip-content">{{ content }}</div><slot /></div>',
+})
 
 vi.mock('@/components/hermes/profiles/ProfileAvatar.vue', () => ({
   default: defineComponent({
@@ -46,6 +51,12 @@ describe('KanbanTaskCard i18n', () => {
     vi.setSystemTime(new Date('2026-05-08T03:00:00Z'))
 
     const wrapper = mount(KanbanTaskCard, {
+      global: {
+        plugins: [ArcoVue],
+        stubs: {
+          Tooltip: ATooltipStub,
+        },
+      },
       props: {
         assigneeAvatar: { type: 'generated', seed: 'alice-seed' },
         task: {
diff --git a/tests/client/kanban-task-drawer.test.ts b/tests/client/kanban-task-drawer.test.ts
index ab49030..df3b737 100644
--- a/tests/client/kanban-task-drawer.test.ts
+++ b/tests/client/kanban-task-drawer.test.ts
@@ -2,6 +2,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockGetTask = vi.hoisted(() => vi.fn())
 const mockRequest = vi.hoisted(() => vi.fn())
@@ -66,46 +67,63 @@ vi.mock('@/components/hermes/chat/HistoryMessageList.vue', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NDrawer: defineComponent({
-    name: 'NDrawer',
-    props: { show: { type: Boolean, required: false } },
-    emits: ['update:show'],
-    template: '<div class="n-drawer-stub"><slot /></div>',
-  }),
-  NDrawerContent: defineComponent({
-    name: 'NDrawerContent',
-    props: { title: { type: String, required: false }, closable: { type: Boolean, required: false } },
-    template: '<div class="n-drawer-content-stub"><slot /></div>',
-  }),
-  NButton: defineComponent({
-    name: 'NButton',
-    emits: ['click'],
-    template: '<button class="n-button-stub" @click="$emit(\'click\')"><slot /></button>',
-  }),
-  NSelect: defineComponent({
-    name: 'NSelect',
-    props: { value: { required: false }, options: { type: Array, default: () => [] } },
-    emits: ['update:value'],
-    template: '<select class="n-select-stub" @change="$emit(\'update:value\', $event.target.value || null)"><option value=""></option><option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option></select>',
-  }),
-  NInput: defineComponent({
-    name: 'NInput',
-    props: { value: { required: false }, size: { type: String, required: false }, placeholder: { type: String, required: false } },
-    emits: ['update:value'],
-    template: '<input class="n-input-stub" :value="value" @input="$emit(\'update:value\', $event.target.value)" />',
-  }),
-  NSpin: defineComponent({
-    name: 'NSpin',
-    template: '<div class="n-spin-stub"><slot /></div>',
-  }),
-  NModal: defineComponent({
-    name: 'NModal',
-    props: { show: { type: Boolean, required: false }, title: { type: String, required: false } },
-    emits: ['close'],
-    template: '<div v-if="show" class="n-modal-stub" :data-title="title"><slot /></div>',
-  }),
-  useMessage: mockUseMessage,
+/**
+ * Overlays teleport to `document.body` in jsdom, so the drawer and the messages
+ * modal are stubbed to render inline. Stubs are keyed by Arco's *internal*
+ * component name — not the `a-*` template tag — because Arco is registered
+ * globally via `app.use(ArcoVue)`.
+ */
+const ADrawerStub = defineComponent({
+  name: 'Drawer',
+  props: { visible: { type: Boolean, required: false }, title: { type: String, required: false } },
+  emits: ['cancel'],
+  template: '<div v-if="visible" class="arco-drawer-stub" :data-title="title"><slot /></div>',
+})
+
+const AModalStub = defineComponent({
+  name: 'Modal',
+  props: { visible: { type: Boolean, required: false }, title: { type: String, required: false } },
+  emits: ['update:visible', 'close'],
+  template: '<div v-if="visible" class="arco-modal-stub" :data-title="title"><slot /></div>',
+})
+
+/** Arco's a-select has no native <select>, so keep one to drive option values. */
+const ASelectStub = defineComponent({
+  name: 'Select',
+  props: { modelValue: { required: false }, options: { type: Array, default: () => [] }, placeholder: { type: String, required: false } },
+  emits: ['update:modelValue', 'change'],
+  template: `<select class="arco-select-stub" :value="modelValue" @change="onChange">
+    <option value=""></option>
+    <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
+  </select>`,
+  methods: {
+    onChange(event: Event) {
+      const value = (event.target as HTMLSelectElement).value || null
+      this.$emit('update:modelValue', value)
+      this.$emit('change', value)
+    },
+  },
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: { Drawer: ADrawerStub, Modal: AModalStub, Select: ASelectStub },
+}
+
+/** Toolbar buttons are located by their label, never by DOM order. */
+function buttonByText(wrapper: any, text: string) {
+  const button = wrapper.findAll('button').find((node: any) => node.text().trim() === text)
+  if (!button) throw new Error(`button not found: ${text}`)
+  return button
+}
+
+/** Text inputs are located by the placeholder the view renders for them. */
+function inputByPlaceholder(wrapper: any, placeholder: string) {
+  return wrapper.get(`input[placeholder="${placeholder}"]`)
+}
+
+vi.mock('@/composables/useMessage', () => ({
+  useMessage: () => mockUseMessage(),
 }))
 
 import KanbanTaskDrawer from '@/components/hermes/kanban/KanbanTaskDrawer.vue'
@@ -161,6 +179,7 @@ describe('KanbanTaskDrawer', () => {
   it('renders completed-result messages through HistoryMessageList', async () => {
     const wrapper = mount(KanbanTaskDrawer, {
       props: { taskId: 'task-1' },
+      global: arcoGlobal,
     })
 
     await flushPromises()
@@ -168,7 +187,7 @@ describe('KanbanTaskDrawer', () => {
     await wrapper.find('.result-summary').trigger('click')
     await flushPromises()
 
-    const modal = wrapper.find('.n-modal-stub')
+    const modal = wrapper.find('.arco-modal-stub')
     expect(modal.exists()).toBe(true)
     expect(modal.attributes('data-title')).toBe('Ship kanban')
 
@@ -210,7 +229,7 @@ describe('KanbanTaskDrawer', () => {
       results: [{ id: 'session-2', title: 'Found session', source: 'codex', model: 'gpt-5.5', started_at: 130 }],
     })
 
-    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-2' } })
+    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-2' }, global: arcoGlobal })
     await flushPromises()
 
     const sessionsTitle = wrapper.findAll('.section-title').find(node => node.text() === 'kanban.detail.sessions')
@@ -255,7 +274,7 @@ describe('KanbanTaskDrawer', () => {
       })),
     })
 
-    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-many-runs' } })
+    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-many-runs' }, global: arcoGlobal })
     await flushPromises()
 
     expect(wrapper.findAll('.run-item')).toHaveLength(10)
@@ -264,7 +283,7 @@ describe('KanbanTaskDrawer', () => {
     expect(wrapper.text()).toContain('runner-10')
     expect(wrapper.text()).not.toContain('runner-11')
 
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === '›')?.trigger('click')
+    await buttonByText(wrapper, '›').trigger('click')
     await flushPromises()
 
     expect(wrapper.findAll('.run-item')).toHaveLength(10)
@@ -275,10 +294,10 @@ describe('KanbanTaskDrawer', () => {
   })
 
   it('clears task-scoped operation output when switching tasks', async () => {
-    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-1' } })
+    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-1' }, global: arcoGlobal })
     await flushPromises()
 
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === 'kanban.action.loadLog')?.trigger('click')
+    await buttonByText(wrapper, 'kanban.action.loadLog').trigger('click')
     await flushPromises()
     expect(wrapper.text()).toContain('worker log')
 
@@ -328,7 +347,7 @@ describe('KanbanTaskDrawer', () => {
       runs: [],
     })
 
-    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-archived' } })
+    const wrapper = mount(KanbanTaskDrawer, { props: { taskId: 'task-archived' }, global: arcoGlobal })
     await flushPromises()
 
     expect(wrapper.text()).not.toContain('kanban.action.complete')
@@ -358,13 +377,13 @@ describe('KanbanTaskDrawer', () => {
     })
     const wrapper = mount(KanbanTaskDrawer, {
       props: { taskId: 'task-0' },
+      global: arcoGlobal,
     })
     await flushPromises()
 
-    const buttons = wrapper.findAll('.n-button-stub')
-    await buttons.find(node => node.text() === 'kanban.action.complete')?.trigger('click')
-    await wrapper.find('.n-input-stub').setValue('done summary')
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === 'common.ok')?.trigger('click')
+    await buttonByText(wrapper, 'kanban.action.complete').trigger('click')
+    await inputByPlaceholder(wrapper, 'kanban.action.completeSummary').setValue('done summary')
+    await buttonByText(wrapper, 'common.ok').trigger('click')
     await flushPromises()
     expect(mockCompleteTasks).toHaveBeenCalledWith(['task-0'], 'done summary')
 
@@ -389,7 +408,7 @@ describe('KanbanTaskDrawer', () => {
     })
     await wrapper.setProps({ taskId: 'task-3' })
     await flushPromises()
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === 'kanban.action.unblock')?.trigger('click')
+    await buttonByText(wrapper, 'kanban.action.unblock').trigger('click')
     expect(mockUnblockTasks).toHaveBeenCalledWith(['task-3'])
 
     mockGetTask.mockResolvedValueOnce({
@@ -432,14 +451,14 @@ describe('KanbanTaskDrawer', () => {
     })
     await wrapper.setProps({ taskId: 'task-4' })
     await flushPromises()
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === 'kanban.action.block')?.trigger('click')
-    await wrapper.find('.n-input-stub').setValue('waiting dependency')
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === 'common.ok')?.trigger('click')
+    await buttonByText(wrapper, 'kanban.action.block').trigger('click')
+    await inputByPlaceholder(wrapper, 'kanban.action.blockReason').setValue('waiting dependency')
+    await buttonByText(wrapper, 'common.ok').trigger('click')
     expect(mockBlockTask).toHaveBeenCalledWith('task-4', 'waiting dependency')
 
-    const select = wrapper.find('.n-select-stub')
+    const select = wrapper.get('select.arco-select-stub')
     await select.setValue('bob')
-    await wrapper.findAll('.n-button-stub').find(node => node.text() === 'kanban.action.assign')?.trigger('click')
+    await buttonByText(wrapper, 'kanban.action.assign').trigger('click')
     await flushPromises()
     expect(mockAssignTask).toHaveBeenCalledWith('task-4', 'bob')
   })
diff --git a/tests/client/kanban-view.test.ts b/tests/client/kanban-view.test.ts
index 152de31..6acfab0 100644
--- a/tests/client/kanban-view.test.ts
+++ b/tests/client/kanban-view.test.ts
@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const routeState = vi.hoisted(() => ({
   query: { board: 'project-a' } as Record<string, string>,
@@ -51,6 +52,11 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
+// Arco's imperative Message API needs a live DOM, so mock the adapter composable.
+vi.mock('@/composables/useMessage', () => ({
+  useMessage: () => ({ warning: vi.fn(), error: vi.fn(), success: vi.fn(), info: vi.fn() }),
+}))
+
 vi.mock('@/stores/hermes/kanban', () => ({
   DEFAULT_KANBAN_BOARD: 'default',
   useKanbanStore: () => ({
@@ -101,50 +107,84 @@ vi.mock('@/components/hermes/kanban/KanbanCreateForm.vue', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  useMessage: () => ({ warning: vi.fn(), error: vi.fn(), success: vi.fn() }),
-  NButton: defineComponent({
-    name: 'NButton',
-    emits: ['click'],
-    template: '<button class="n-button-stub" @click="$emit(\'click\')"><slot /><slot name="icon" /></button>',
-  }),
-  NSelect: defineComponent({
-    name: 'NSelect',
-    props: { value: null, options: { type: Array, default: () => [] }, loading: Boolean },
-    emits: ['update:value'],
-    template: '<button class="n-select-stub" @click="$emit(\'update:value\', options[1]?.value || value)"><span v-for="option in options" :key="option.value">{{ option.label }}</span>{{ value }}</button>',
-  }),
-  NInput: defineComponent({
-    name: 'NInput',
-    props: { value: { type: String, default: '' }, placeholder: { type: String, required: false } },
-    emits: ['update:value'],
-    template: '<input class="n-input-stub" :placeholder="placeholder" :value="value" @input="$emit(\'update:value\', $event.target.value)" />',
-  }),
-  NModal: defineComponent({
-    name: 'NModal',
-    props: { show: Boolean },
-    emits: ['update:show', 'close'],
-    template: '<div v-if="show" class="n-modal-stub"><slot /><slot name="action" /></div>',
-  }),
-  NSpin: defineComponent({
-    name: 'NSpin',
-    template: '<div class="n-spin-stub"><slot /></div>',
-  }),
-  NCollapse: defineComponent({
-    name: 'NCollapse',
-    props: { expandedNames: { type: Array, required: false }, defaultExpandedNames: { type: Array, required: false } },
-    emits: ['update:expandedNames'],
-    template: '<div class="n-collapse-stub" :data-expanded="JSON.stringify(expandedNames ?? null)" :data-default-expanded="JSON.stringify(defaultExpandedNames ?? null)"><slot /></div>',
-  }),
-  NCollapseItem: defineComponent({
-    name: 'NCollapseItem',
-    props: { title: { type: String, required: false }, name: { type: String, required: false } },
-    template: '<section class="n-collapse-item-stub" :data-name="name"><slot /></section>',
-  }),
-}))
+/**
+ * Arco's a-select renders a custom dropdown (no native <select>) and a-modal
+ * teleports to body in jsdom, so both are stubbed under Arco's *internal*
+ * component names — stubs key off those, not the `a-*` template tags, because
+ * Arco is registered globally via `app.use(ArcoVue)`.
+ */
+const ASelectStub = defineComponent({
+  name: 'Select',
+  props: {
+    modelValue: { default: null },
+    options: { type: Array, default: () => [] },
+    loading: Boolean,
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    return () =>
+      h('select', {
+        class: 'arco-select-stub',
+        onChange: (event: Event) => {
+          const value = (event.target as HTMLSelectElement).value
+          emit('update:modelValue', value)
+          emit('change', value)
+        },
+      }, (props.options as Array<{ label: string; value: string }>).map(option =>
+        h('option', { key: option.value, value: option.value }, option.label),
+      ))
+  },
+})
+
+const AModalStub = defineComponent({
+  name: 'Modal',
+  props: ['visible'],
+  template: '<div v-if="visible" class="a-modal-stub"><slot /><slot name="footer" /></div>',
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: { Select: ASelectStub, Modal: AModalStub },
+}
+
+/** Toolbar buttons are located by their label, never by DOM order. */
+function buttonByText(wrapper: ReturnType<typeof mount>, text: string) {
+  const button = wrapper.findAll('button').find(node => node.text().trim() === text)
+  if (!button) throw new Error(`button not found: ${text}`)
+  return button
+}
+
+/**
+ * Locate a header select by an option value it offers, so the assertion keeps
+ * targeting the intended filter even if the toolbar order changes.
+ */
+function selectOffering(wrapper: ReturnType<typeof mount>, value: string) {
+  const select = wrapper
+    .findAll('select.arco-select-stub')
+    .find(node => node.findAll('option').some(option => option.attributes('value') === value))
+  if (!select) throw new Error(`select offering "${value}" not found`)
+  return select
+}
+
+/** The board column for a status, matched via the `status-<name>` class the view sets. */
+function columnFor(wrapper: ReturnType<typeof mount>, status: string) {
+  return wrapper.get(`.arco-collapse-item.status-${status}`)
+}
+
+/** Statuses whose collapse panel is currently expanded. */
+function expandedColumns(wrapper: ReturnType<typeof mount>): string[] {
+  return wrapper
+    .findAll('.arco-collapse-item')
+    .filter(item => item.classes().includes('arco-collapse-item-active'))
+    .map(item => item.classes().find(name => name.startsWith('status-'))?.slice('status-'.length) ?? '')
+}
 
 import KanbanView from '@/views/hermes/KanbanView.vue'
 
+function mountView() {
+  return mount(KanbanView, { global: arcoGlobal })
+}
+
 describe('KanbanView', () => {
   beforeEach(() => {
     vi.useFakeTimers()
@@ -197,7 +237,7 @@ describe('KanbanView', () => {
   })
 
   it('initializes board from route query and refreshes stats alongside tasks', async () => {
-    const wrapper = mount(KanbanView)
+    const wrapper = mountView()
     await flushPromises()
 
     expect(mockFetchBoards).toHaveBeenCalledOnce()
@@ -206,7 +246,11 @@ describe('KanbanView', () => {
     expect(mockRecoverSelectedBoard).toHaveBeenCalledWith('project-a')
     expect(mockRefreshAll).toHaveBeenCalledOnce()
     expect(routerReplace).not.toHaveBeenCalled()
-    expect(wrapper.find('.n-collapse-stub').attributes('data-expanded')).toBe('["triage","todo","scheduled","ready","running","blocked","review","done","archived"]')
+    // Every board status gets a column, and all of them start expanded.
+    expect(wrapper.findAll('.arco-collapse-item')).toHaveLength(9)
+    expect(expandedColumns(wrapper)).toEqual([
+      'triage', 'todo', 'scheduled', 'ready', 'running', 'blocked', 'review', 'done', 'archived',
+    ])
 
     await wrapper.find('.drawer-updated').trigger('click')
     expect(mockFetchTasks).toHaveBeenCalledTimes(1)
@@ -222,12 +266,13 @@ describe('KanbanView', () => {
 
   it('renders board count labels and compact assignee profile labels', async () => {
     storeState.assignees = [{ name: 'alice', counts: { todo: 2, done: 1 } }]
-    const wrapper = mount(KanbanView)
+    const wrapper = mountView()
     await flushPromises()
 
     expect(wrapper.text()).toContain('kanban.title: Default · kanban.stats.tasks: 0')
     expect(wrapper.text()).toContain('kanban.title: Project A · kanban.stats.tasks: 2')
-    const assigneeSelect = wrapper.findAll('.n-select-stub')[2]
+    // The assignee filter is the select offering the `alice` assignee.
+    const assigneeSelect = selectOffering(wrapper, 'alice')
     expect(assigneeSelect.text()).toContain('alice')
     expect(assigneeSelect.text()).not.toContain('default')
     expect(wrapper.text()).not.toContain('kanban.detail.assignee: alice')
@@ -238,7 +283,7 @@ describe('KanbanView', () => {
     storeState.tasks = [{ id: 'task-1', title: 'Task one', status: 'todo', created_at: 10, assignee: 'alice' }]
     profilesState.profiles = [{ name: 'alice', avatar: { type: 'generated', seed: 'alice-seed' } }]
 
-    const wrapper = mount(KanbanView)
+    const wrapper = mountView()
     await flushPromises()
 
     expect(wrapper.find('.kanban-task-card-stub').attributes('data-avatar-seed')).toBe('alice-seed')
@@ -247,13 +292,13 @@ describe('KanbanView', () => {
   it('filters the visible board columns from stats chips', async () => {
     storeState.filterStatus = 'done'
 
-    const wrapper = mount(KanbanView)
+    const wrapper = mountView()
     await flushPromises()
 
-    const columns = wrapper.findAll('.n-collapse-item-stub')
-    expect(wrapper.find('.n-collapse-stub').attributes('data-expanded')).toBe('["done"]')
-    expect(columns).toHaveLength(1)
-    expect(columns[0].attributes('data-name')).toBe('done')
+    // Only the filtered status keeps a column, and it is the expanded one.
+    expect(wrapper.findAll('.arco-collapse-item')).toHaveLength(1)
+    expect(expandedColumns(wrapper)).toEqual(['done'])
+    expect(columnFor(wrapper, 'done').classes()).toContain('kanban-column')
     expect(wrapper.text()).toContain('Task two')
     expect(wrapper.text()).not.toContain('Task one')
 
@@ -272,22 +317,22 @@ describe('KanbanView', () => {
 
   it('creates and archives boards from the board toolbar', async () => {
     storeState.selectedBoard = 'project-a'
-    const wrapper = mount(KanbanView)
+    const wrapper = mountView()
     await flushPromises()
 
-    await wrapper.findAll('.n-button-stub')[0].trigger('click')
+    await buttonByText(wrapper, 'common.add').trigger('click')
     await flushPromises()
-    const inputs = wrapper.findAll('.n-input-stub')
-    await inputs[0].setValue('new-board')
-    await inputs[1].setValue('New Board')
-    await wrapper.findAll('.n-button-stub').at(-1)!.trigger('click')
+    // The create-board modal is keyed by its own placeholder fields, not index.
+    await wrapper.get('input[placeholder="kanban.board.slugPlaceholder"]').setValue('new-board')
+    await wrapper.get('input[placeholder="kanban.board.namePlaceholder"]').setValue('New Board')
+    await buttonByText(wrapper, 'common.create').trigger('click')
     await flushPromises()
 
     expect(mockCreateBoard).toHaveBeenCalledWith({ slug: 'new-board', name: 'New Board' })
     expect(routerReplace).toHaveBeenCalledWith({ query: { board: 'new-board' } })
 
     vi.spyOn(window, 'confirm').mockReturnValueOnce(true)
-    await wrapper.findAll('.n-button-stub')[1].trigger('click')
+    await buttonByText(wrapper, 'kanban.board.archive').trigger('click')
     await flushPromises()
 
     expect(mockArchiveSelectedBoard).toHaveBeenCalled()
@@ -301,7 +346,7 @@ describe('KanbanView', () => {
       return { board: 'default', recovered: false }
     })
 
-    mount(KanbanView)
+    mountView()
     await flushPromises()
 
     expect(routerReplace).toHaveBeenCalledWith({ query: { board: 'default' } })
diff --git a/tests/client/no-naive-ui.test.ts b/tests/client/no-naive-ui.test.ts
new file mode 100644
index 0000000..c8ecd1e
--- /dev/null
+++ b/tests/client/no-naive-ui.test.ts
@@ -0,0 +1,77 @@
+import { readdirSync, readFileSync, statSync } from 'fs'
+import { join } from 'path'
+import { describe, expect, it } from 'vitest'
+
+const SRC_ROOT = 'packages/client/src'
+
+const listFiles = (dir: string): string[] =>
+  readdirSync(dir).flatMap((name) => {
+    const full = join(dir, name)
+    return statSync(full).isDirectory() ? listFiles(full) : [full]
+  })
+
+const sourceFiles = listFiles(SRC_ROOT).filter((file) =>
+  /\.(vue|ts|js)$/.test(file),
+)
+
+/**
+ * naive-ui 的类名在迁移时最容易漏：`grep naive-ui` 只匹配 import，
+ * 匹配不到样式块里的 `:deep(.n-button__content)` 这种写法，也不匹配
+ * JS 里的字符串字面量（`document.querySelector('.n-modal-mask')`）。
+ * 这两种都会在 Arco 下静默失效，不报错、测试也测不出来。
+ */
+const NAIVE_CLASS_PATTERN = /\.n-[a-z][\w-]*/i
+
+const findOffenders = (pattern: RegExp) =>
+  sourceFiles
+    .filter((file) => pattern.test(readFileSync(file, 'utf8')))
+    .map((file) => file.replace(`${SRC_ROOT}/`, ''))
+
+describe('naive-ui removal', () => {
+  it('has source files to scan', () => {
+    expect(sourceFiles.length).toBeGreaterThan(100)
+  })
+
+  it('never imports from naive-ui', () => {
+    expect(findOffenders(/from\s+['"]naive-ui['"]/)).toEqual([])
+  })
+
+  it('never imports naive-ui types or helpers by deep path', () => {
+    // packages/client/src 下没有深层导入，但防止将来有人从 @css-render 绕进来
+    expect(
+      findOffenders(/from\s+['"](vueuc|@css-render\/vue3-ssr|vdirs|seemly)['"]/),
+    ).toEqual([])
+  })
+
+  it('never references naive-ui CSS class names', () => {
+    // 覆盖样式块里的 :deep(.n-*) 与 JS 字符串字面量两种写法
+    expect(findOffenders(NAIVE_CLASS_PATTERN)).toEqual([])
+  })
+
+  it('never registers naive-ui components globally', () => {
+    const main = readFileSync(join(SRC_ROOT, 'main.ts'), 'utf8')
+    expect(main).toContain('ArcoVue')
+    expect(main).not.toMatch(/N[A-Z][A-Za-z]*Provider/)
+  })
+
+  it('does not depend on naive-ui in package.json', () => {
+    const pkg = JSON.parse(readFileSync('package.json', 'utf8'))
+    const all = { ...pkg.dependencies, ...pkg.devDependencies }
+    expect(Object.keys(all)).not.toContain('naive-ui')
+    for (const dep of Object.keys(all)) {
+      expect(dep).not.toBe('vueuc')
+      expect(dep).not.toBe('vdirs')
+    }
+  })
+
+  it('does not chunk naive-ui in the vite config', () => {
+    const config = readFileSync('vite.config.ts', 'utf8')
+    expect(config).not.toMatch(/['"]naive-ui['"]/)
+    // Arco 的 scope 名含 "vue" 子串，判断必须排在 vue-vendor 之前，
+    // 否则整个 UI 库会被打进 vue chunk。见 vite.config.ts 的注释。
+    const arcoIndex = config.indexOf('@arco-design')
+    const vueIndex = config.indexOf('vue-vendor')
+    expect(arcoIndex).toBeGreaterThan(-1)
+    expect(arcoIndex).toBeLessThan(vueIndex)
+  })
+})
diff --git a/tests/client/pending-write-approvals.test.ts b/tests/client/pending-write-approvals.test.ts
index 204cecf..d0d74f2 100644
--- a/tests/client/pending-write-approvals.test.ts
+++ b/tests/client/pending-write-approvals.test.ts
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockFetchPendingWrites = vi.hoisted(() => vi.fn())
 const mockFetchPendingWriteReview = vi.hoisted(() => vi.fn())
@@ -20,28 +21,20 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', async () => {
-  const actual = await vi.importActual<any>('naive-ui')
-  return {
-    ...actual,
-    useMessage: () => ({
-      success: vi.fn(),
-      error: vi.fn(),
-    }),
-  }
-})
+vi.mock('@/composables/useMessage', () => ({
+  useMessage: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+  }),
+}))
 
 import PendingWriteApprovals from '@/components/hermes/skills/PendingWriteApprovals.vue'
 
 function mountComponent() {
   return mount(PendingWriteApprovals, {
     global: {
+      plugins: [ArcoVue],
       stubs: {
-        NTag: { template: '<span><slot /></span>' },
-        NButton: {
-          props: ['loading'],
-          template: '<button class="n-button" @click="$emit(\'click\')"><slot /></button>',
-        },
         MarkdownRenderer: {
           props: ['content'],
           template: '<article class="markdown-renderer-stub">{{ content }}</article>',
@@ -51,6 +44,21 @@ function mountComponent() {
   })
 }
 
+/** Buttons are located by their label, never by DOM order. */
+function buttonByText(wrapper: any, text: string) {
+  const button = wrapper.findAll('button').find((node: any) => node.text().trim() === text)
+  if (!button) throw new Error(`button not found: ${text}`)
+  return button
+}
+
+/** The pending-write row whose summary matches, so actions never rely on order. */
+function itemBySummary(wrapper: any, summary: string) {
+  const item = wrapper.findAll('.write-approval-item')
+    .find((node: any) => node.find('.write-approval-summary').text().trim() === summary)
+  if (!item) throw new Error(`write approval item not found: ${summary}`)
+  return item
+}
+
 describe('PendingWriteApprovals', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -110,12 +118,12 @@ describe('PendingWriteApprovals', () => {
     expect(wrapper.text()).toContain('remember concise answers')
     expect(wrapper.text()).toContain('patch demo skill')
 
-    const approveButtons = () => wrapper.findAll('.n-button').filter(button => button.text() === 'skills.writeApprovalApprove')
-    const rejectButtons = () => wrapper.findAll('.n-button').filter(button => button.text() === 'skills.writeApprovalReject')
+    const memoryRow = itemBySummary(wrapper, 'remember concise answers')
+    const skillsRow = itemBySummary(wrapper, 'patch demo skill')
 
-    await approveButtons()[0].trigger('click')
+    await memoryRow.findAll('button').find(b => b.text() === 'skills.writeApprovalApprove')!.trigger('click')
     await flushPromises()
-    await rejectButtons()[1].trigger('click')
+    await skillsRow.findAll('button').find(b => b.text() === 'skills.writeApprovalReject')!.trigger('click')
     await flushPromises()
 
     expect(mockApprovePendingWrite).toHaveBeenCalledWith('memory', 'mem123')
@@ -152,8 +160,7 @@ describe('PendingWriteApprovals', () => {
     const wrapper = mountComponent()
     await flushPromises()
 
-    const diffButton = wrapper.findAll('.n-button').find(button => button.text() === 'skills.writeApprovalViewDiff')
-    await diffButton?.trigger('click')
+    await buttonByText(wrapper, 'skills.writeApprovalViewDiff').trigger('click')
     await flushPromises()
 
     expect(mockFetchPendingWriteReview).toHaveBeenCalledWith('skills', 'skill123')
diff --git a/tests/client/plugins-view.test.ts b/tests/client/plugins-view.test.ts
index 2b07d1f..d722751 100644
--- a/tests/client/plugins-view.test.ts
+++ b/tests/client/plugins-view.test.ts
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const messageMock = vi.hoisted(() => ({
   success: vi.fn(),
@@ -33,34 +33,18 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NAlert: defineComponent({ template: '<div><slot /></div>' }),
-  NButton: defineComponent({
-    props: { loading: Boolean },
-    emits: ['click'],
-    template: '<button class="n-button-stub" :disabled="loading" @click="$emit(\'click\')"><slot /></button>',
-  }),
-  NEmpty: defineComponent({ props: ['description'], template: '<div>{{ description }}</div>' }),
-  NInput: defineComponent({
-    props: ['value', 'placeholder'],
-    emits: ['update:value'],
-    template: '<input :value="value" :placeholder="placeholder" @input="$emit(\'update:value\', $event.target.value)" />',
-  }),
-  NSelect: defineComponent({
-    props: ['value', 'options', 'placeholder'],
-    emits: ['update:value'],
-    template: '<select><option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option></select>',
-  }),
-  NSpin: defineComponent({ template: '<div />' }),
-  NTag: defineComponent({ template: '<span><slot /></span>' }),
-  useMessage: () => messageMock,
-}))
-
-// PluginsView reads messages via the Arco adapter layer, not naive-ui.
 vi.mock('@/composables/useMessage', () => ({ useMessage: () => messageMock }))
 
 import PluginsView from '@/views/hermes/PluginsView.vue'
 
+const arcoGlobal = { plugins: [ArcoVue] }
+
+function buttonByText(wrapper: any, text: string) {
+  const button = wrapper.findAll('button').find((node: any) => node.text().trim() === text)
+  if (!button) throw new Error(`no button labelled "${text}"`)
+  return button
+}
+
 describe('PluginsView management actions', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -89,14 +73,10 @@ describe('PluginsView management actions', () => {
   })
 
   it('enables manageable standalone plugins and refreshes the inventory', async () => {
-    const wrapper = mount(PluginsView)
+    const wrapper = mount(PluginsView, { global: arcoGlobal })
     await flushPromises()
 
-    const buttons = wrapper.findAll('.n-button-stub')
-    const enableButton = buttons.find(button => button.text() === 'common.enable')
-    expect(enableButton).toBeTruthy()
-
-    await enableButton!.trigger('click')
+    await buttonByText(wrapper, 'common.enable').trigger('click')
     await flushPromises()
 
     expect(setPluginEnabledMock).toHaveBeenCalledWith('local-plugin', true)
@@ -125,7 +105,7 @@ describe('PluginsView management actions', () => {
       metadata: null,
     })
 
-    const wrapper = mount(PluginsView)
+    const wrapper = mount(PluginsView, { global: arcoGlobal })
     await flushPromises()
 
     expect(wrapper.text()).toContain('plugins.managedElsewhere')
diff --git a/tests/client/profile-card-config-edit.test.ts b/tests/client/profile-card-config-edit.test.ts
index fd085b9..f53e899 100644
--- a/tests/client/profile-card-config-edit.test.ts
+++ b/tests/client/profile-card-config-edit.test.ts
@@ -1,8 +1,8 @@
 // @vitest-environment jsdom
-import { describe, expect, it, vi, beforeEach } from 'vitest'
-import { defineComponent } from 'vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import ArcoVue from '@arco-design/web-vue'
 
 const routerPush = vi.hoisted(() => vi.fn())
 
@@ -18,23 +18,24 @@ vi.mock('vue-i18n', () => ({
   useI18n: () => ({ t: (key: string) => key }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NButton: defineComponent({
-    emits: ['click'],
-    template: '<button class="n-button-stub" type="button" @click="$emit(\'click\')"><slot /></button>',
-  }),
-  NTag: defineComponent({
-    template: '<span><slot /></span>',
-  }),
-  NSpin: defineComponent({
-    template: '<div><slot /></div>',
-  }),
+vi.mock('@/composables/useMessage', () => ({
   useMessage: () => ({ success: vi.fn(), error: vi.fn() }),
+}))
+
+vi.mock('@/composables/useDialog', () => ({
   useDialog: () => ({ warning: vi.fn() }),
 }))
 
 import ProfileCard from '@/components/hermes/profiles/ProfileCard.vue'
 
+function actionButton(wrapper: any, text: string) {
+  const button = wrapper
+    .findAll('.card-actions button')
+    .find((node: any) => node.text().trim() === text)
+  if (!button) throw new Error(`no card action labelled "${text}"`)
+  return button
+}
+
 describe('ProfileCard config edit affordance', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -52,14 +53,14 @@ describe('ProfileCard config edit affordance', () => {
         },
       },
       global: {
-        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        plugins: [createTestingPinia({ createSpy: vi.fn }), ArcoVue],
         stubs: {
           ProfileAvatar: { template: '<span class="profile-avatar-stub" />' },
         },
       },
     })
 
-    await wrapper.get('.card-actions .n-button-stub').trigger('click')
+    await actionButton(wrapper, 'profiles.editConfig').trigger('click')
 
     expect(routerPush).toHaveBeenCalledWith({
       name: 'hermes.files',
diff --git a/tests/client/provider-card-built-in-action.test.ts b/tests/client/provider-card-built-in-action.test.ts
index de414f1..b11a1bc 100644
--- a/tests/client/provider-card-built-in-action.test.ts
+++ b/tests/client/provider-card-built-in-action.test.ts
@@ -2,6 +2,7 @@
 import { mount } from '@vue/test-utils'
 import { defineComponent, h } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ArcoVue from '@arco-design/web-vue'
 import ProviderCard from '@/components/hermes/models/ProviderCard.vue'
 import type { AvailableModelGroup } from '@/api/hermes/system'
 
@@ -91,60 +92,6 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NButton: defineComponent({
-    name: 'NButton',
-    emits: ['click'],
-    setup(_, { slots, emit }) {
-      return () => h('button', { onClick: () => emit('click') }, slots.default?.())
-    },
-  }),
-  NCheckbox: defineComponent({
-    name: 'NCheckbox',
-    setup(_, { slots }) {
-      return () => h('label', slots.default?.())
-    },
-  }),
-  NCheckboxGroup: defineComponent({
-    name: 'NCheckboxGroup',
-    setup(_, { slots }) {
-      return () => h('div', slots.default?.())
-    },
-  }),
-  NInput: defineComponent({
-    name: 'NInput',
-    setup() {
-      return () => h('input')
-    },
-  }),
-  NSelect: defineComponent({
-    name: 'NSelect',
-    props: {
-      value: { type: [String, Number], default: null },
-      options: { type: Array, default: () => [] },
-      placeholder: { type: String, default: '' },
-    },
-    emits: ['update:value'],
-    setup(props, { emit }) {
-      return () => h('select', {
-        value: props.value || '',
-        onChange: (event: Event) => emit('update:value', (event.target as HTMLSelectElement).value),
-      }, [
-        h('option', { value: '' }, props.placeholder),
-        ...(props.options as Array<{ label: string; value: string }>).map(option => h('option', { value: option.value }, option.label)),
-      ])
-    },
-  }),
-  NModal: defineComponent({
-    name: 'NModal',
-    setup(_, { slots }) {
-      return () => h('div', slots.default?.())
-    },
-  }),
-  useMessage: () => messageMock,
-  useDialog: () => dialogMock,
-}))
-
 // ProviderCard reads message/dialog through the Arco adapter layer, not
 // naive-ui's composables, so the mock must target the adapter modules.
 vi.mock('@/composables/useMessage', () => ({ useMessage: () => messageMock }))
@@ -155,6 +102,51 @@ vi.mock('@/stores/hermes/app', () => ({ useAppStore: () => appStoreMock }))
 vi.mock('@/stores/hermes/chat', () => ({ useChatStore: () => chatStoreMock }))
 vi.mock('@/api/hermes/copilot-auth', () => copilotAuthMock)
 
+/**
+ * Arco's a-select renders a custom dropdown (no native <select>), and a-modal
+ * teleports to body in jsdom. Stub both so the card's model picker stays
+ * drivable through a plain <select> and modals render inline.
+ * Arco is registered globally, so stubs key off Arco's internal names.
+ */
+const ASelectStub = defineComponent({
+  name: 'Select',
+  props: {
+    modelValue: { type: [String, Number], default: null },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: '' },
+    disabled: Boolean,
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    return () =>
+      h(
+        'select',
+        {
+          class: 'arco-select-stub',
+          disabled: props.disabled,
+          value: props.modelValue ?? '',
+          onChange: (event: Event) => {
+            const value = (event.target as HTMLSelectElement).value
+            emit('update:modelValue', value)
+            emit('change', value)
+          },
+        },
+        [
+          h('option', { value: '' }, props.placeholder),
+          ...(props.options as Array<{ label: string; value: string }>).map(option =>
+            h('option', { key: option.value, value: option.value }, option.label),
+          ),
+        ],
+      )
+  },
+})
+
+const AModalStub = defineComponent({
+  name: 'Modal',
+  props: ['visible'],
+  template: '<div v-if="visible" class="a-modal-stub"><slot /><slot name="footer" /></div>',
+})
+
 function provider(overrides: Partial<AvailableModelGroup>): AvailableModelGroup {
   return {
     provider: 'deepseek',
@@ -169,7 +161,13 @@ function provider(overrides: Partial<AvailableModelGroup>): AvailableModelGroup
 
 function mountCard(group: AvailableModelGroup) {
   modelsStoreMock.allProviders = [group]
-  return mount(ProviderCard, { props: { provider: group } })
+  return mount(ProviderCard, {
+    props: { provider: group },
+    global: {
+      plugins: [ArcoVue],
+      stubs: { Select: ASelectStub, Modal: AModalStub },
+    },
+  })
 }
 
 describe('ProviderCard built-in destructive action labels', () => {
diff --git a/tests/client/session-settings.test.ts b/tests/client/session-settings.test.ts
index 4404ff6..ef21caf 100644
--- a/tests/client/session-settings.test.ts
+++ b/tests/client/session-settings.test.ts
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockSettingsStore = vi.hoisted(() => ({
   sessionReset: { mode: 'both', idle_minutes: 60, at_hour: 0 },
@@ -10,7 +11,7 @@ const mockSettingsStore = vi.hoisted(() => ({
   updateLocal: vi.fn((section: string, values: Record<string, any>) => {
     Object.assign((mockSettingsStore as any)[section], values)
   }),
-  saveSection: vi.fn(),
+  saveSection: vi.fn(() => Promise.resolve()),
 }))
 
 const mockPrefsStore = vi.hoisted(() => ({
@@ -34,19 +35,40 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', async () => {
-  const actual = await vi.importActual<any>('naive-ui')
-  return {
-    ...actual,
-    useMessage: () => ({
-      success: vi.fn(),
-      error: vi.fn(),
-    }),
-  }
-})
+vi.mock('@/composables/useMessage', () => ({
+  useMessage: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+  }),
+}))
 
 import SessionSettings from '@/components/hermes/settings/SessionSettings.vue'
 
+const SettingRowStub = {
+  props: ['label', 'hint'],
+  template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><slot /></div>',
+}
+
+// `app.use(ArcoVue)` registers the components globally, so test-utils stubs only
+// match Arco's internal component names, not the kebab-case template tags.
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: {
+    SettingRow: SettingRowStub,
+    Select: true,
+    InputNumber: true,
+  },
+}
+
+/** The Arco switch rendered inside the SettingRow carrying `label`. */
+function switchByLabel(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.get('.arco-switch')
+}
+
 describe('SessionSettings', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -56,41 +78,15 @@ describe('SessionSettings', () => {
   })
 
   it('surfaces the human-only preference in the Session tab', async () => {
-    let emittedValue: boolean | undefined
-    const wrapper = mount(SessionSettings, {
-      global: {
-        stubs: {
-          SettingRow: {
-            props: ['label', 'hint'],
-            template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><slot /></div>',
-          },
-          NSelect: true,
-          NInputNumber: true,
-          NButton: { template: '<button><slot /></button>' },
-          NTag: { template: '<span><slot /></span>' },
-          NSwitch: {
-            props: ['value'],
-            emits: ['update:value'],
-            template: '<div class="n-switch" @click="$emit(\'update:value\', !value)"></div>',
-            setup(props: any, { emit }: any) {
-              return {
-                onClick: () => {
-                  emittedValue = !props.value
-                  emit('update:value', emittedValue)
-                },
-              }
-            },
-          },
-        },
-      },
-    })
+    const wrapper = mount(SessionSettings, { global: arcoGlobal })
     await flushPromises()
 
     expect(wrapper.text()).toContain('settings.session.liveMonitorHumanOnly')
+    // requireAuth + memory + skills write approval + human-only
+    expect(wrapper.findAll('.arco-switch').length).toBe(4)
 
-    const toggles = wrapper.findAll('.n-switch')
-    expect(toggles.length).toBe(4)
-    const humanOnlyToggle = toggles[3]
+    const humanOnlyToggle = switchByLabel(wrapper, 'settings.session.liveMonitorHumanOnly')
+    expect(humanOnlyToggle.attributes('aria-checked')).toBe('true')
 
     await humanOnlyToggle.trigger('click')
     await Promise.resolve()
@@ -99,34 +95,17 @@ describe('SessionSettings', () => {
   })
 
   it('saves write approval toggles to memory and skills config sections', async () => {
-    const wrapper = mount(SessionSettings, {
-      global: {
-        stubs: {
-          SettingRow: {
-            props: ['label', 'hint'],
-            template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><slot /></div>',
-          },
-          NSelect: true,
-          NInputNumber: true,
-          NButton: { template: '<button><slot /></button>' },
-          NTag: { template: '<span><slot /></span>' },
-          NSwitch: {
-            props: ['value'],
-            emits: ['update:value'],
-            template: '<button class="n-switch" @click="$emit(\'update:value\', !value)"></button>',
-          },
-        },
-      },
-    })
+    const wrapper = mount(SessionSettings, { global: arcoGlobal })
     await flushPromises()
 
-    expect(wrapper.text()).toContain('settings.session.memoryWriteApproval')
-    expect(wrapper.text()).toContain('settings.session.skillsWriteApproval')
+    const memoryToggle = switchByLabel(wrapper, 'settings.session.memoryWriteApproval')
+    const skillsToggle = switchByLabel(wrapper, 'settings.session.skillsWriteApproval')
+    expect(memoryToggle.attributes('aria-checked')).toBe('false')
+    expect(skillsToggle.attributes('aria-checked')).toBe('true')
 
-    const toggles = wrapper.findAll('.n-switch')
-    await toggles[1].trigger('click')
+    await memoryToggle.trigger('click')
     await Promise.resolve()
-    await toggles[2].trigger('click')
+    await skillsToggle.trigger('click')
     await Promise.resolve()
 
     expect(mockSettingsStore.updateLocal).toHaveBeenCalledWith('memory', { write_approval: true })
@@ -136,23 +115,7 @@ describe('SessionSettings', () => {
   })
 
   it('shows write approval toggles without probing Hermes Agent support', async () => {
-    const wrapper = mount(SessionSettings, {
-      global: {
-        stubs: {
-          SettingRow: {
-            props: ['label', 'hint'],
-            template: '<div class="setting-row"><div class="setting-row-label">{{ label }}</div><slot /></div>',
-          },
-          NSelect: true,
-          NInputNumber: true,
-          NSwitch: {
-            props: ['value'],
-            emits: ['update:value'],
-            template: '<button class="n-switch" @click="$emit(\'update:value\', !value)"></button>',
-          },
-        },
-      },
-    })
+    const wrapper = mount(SessionSettings, { global: arcoGlobal })
 
     await flushPromises()
 
diff --git a/tests/client/skills-usage-view.test.ts b/tests/client/skills-usage-view.test.ts
index bdbbeaf..be7a3f5 100644
--- a/tests/client/skills-usage-view.test.ts
+++ b/tests/client/skills-usage-view.test.ts
@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const fetchSkillUsageStatsMock = vi.hoisted(() => vi.fn())
 const mockProfilesStore = vi.hoisted(() => ({
@@ -27,20 +28,10 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', async () => {
-  const actual = await vi.importActual<any>('naive-ui')
-  return {
-    ...actual,
-    NButton: {
-      props: ['loading', 'type', 'size', 'quaternary', 'secondary'],
-      inheritAttrs: false,
-      template: '<button :data-type="type" :aria-pressed="$attrs[\'aria-pressed\']" @click="$emit(\'click\')"><slot /></button>',
-    },
-  }
-})
-
 import SkillsUsageView from '@/views/hermes/SkillsUsageView.vue'
 
+const arcoGlobal = { plugins: [ArcoVue] }
+
 const sevenDayStats = {
   period_days: 7,
   summary: {
@@ -75,6 +66,30 @@ const sevenDayStats = {
   ],
 }
 
+const thirtyDayStats = {
+  period_days: 30,
+  summary: {
+    total_skill_loads: 5,
+    total_skill_edits: 2,
+    total_skill_actions: 7,
+    distinct_skills_used: 1,
+  },
+  by_day: [
+    {
+      date: '2026-05-12',
+      view_count: 5,
+      manage_count: 2,
+      total_count: 7,
+      skills: [
+        { skill: 'thirty-day-skill', view_count: 5, manage_count: 2, total_count: 7 },
+      ],
+    },
+  ],
+  top_skills: [
+    { skill: 'thirty-day-skill', view_count: 5, manage_count: 2, total_count: 7, percentage: 100, last_used_at: null },
+  ],
+}
+
 describe('SkillsUsageView', () => {
   beforeEach(() => {
     fetchSkillUsageStatsMock.mockReset()
@@ -85,7 +100,7 @@ describe('SkillsUsageView', () => {
   })
 
   it('loads rolling 7 day skill usage and renders statistics beside a skill-colored visual trend', async () => {
-    const wrapper = mount(SkillsUsageView)
+    const wrapper = mount(SkillsUsageView, { global: arcoGlobal })
     await flushPromises()
 
     expect(fetchSkillUsageStatsMock).toHaveBeenCalledWith(7)
@@ -102,7 +117,7 @@ describe('SkillsUsageView', () => {
   })
 
   it('reloads the selected period when the period button changes', async () => {
-    const wrapper = mount(SkillsUsageView)
+    const wrapper = mount(SkillsUsageView, { global: arcoGlobal })
     await flushPromises()
     fetchSkillUsageStatsMock.mockClear()
 
@@ -117,7 +132,7 @@ describe('SkillsUsageView', () => {
   })
 
   it('flips the chart tooltip away from the hovered side of the bars', async () => {
-    const wrapper = mount(SkillsUsageView)
+    const wrapper = mount(SkillsUsageView, { global: arcoGlobal })
     await flushPromises()
 
     const bars = wrapper.findAll('.skill-bar-col')
@@ -133,7 +148,7 @@ describe('SkillsUsageView', () => {
   })
 
   it('keeps stale data visible while refreshing an already loaded period', async () => {
-    const wrapper = mount(SkillsUsageView)
+    const wrapper = mount(SkillsUsageView, { global: arcoGlobal })
     await flushPromises()
 
     let resolveRefresh!: (value: unknown) => void
@@ -172,20 +187,31 @@ describe('SkillsUsageView', () => {
   })
 
   it('does not let an older refresh overwrite newer stats for the same period', async () => {
-    const wrapper = mount(SkillsUsageView)
-    await flushPromises()
-
+    // Arco buttons swallow clicks while `loading`, so the overlapping same-period
+    // requests are staged the way a user can actually produce them: a slow 7 day
+    // request, a detour through the 30 day period, then back to 7 days before the
+    // first one settles.
     let resolveOlder!: (value: unknown) => void
     let resolveNewer!: (value: unknown) => void
     fetchSkillUsageStatsMock
       .mockReturnValueOnce(new Promise(resolve => { resolveOlder = resolve }))
+      .mockResolvedValueOnce(thirtyDayStats)
       .mockReturnValueOnce(new Promise(resolve => { resolveNewer = resolve }))
 
-    const refreshButton = wrapper.findAll('button').find(button => button.text() === 'skillsUsage.refresh')
-    expect(refreshButton).toBeTruthy()
+    const wrapper = mount(SkillsUsageView, { global: arcoGlobal })
 
-    await refreshButton!.trigger('click')
-    await refreshButton!.trigger('click')
+    const thirtyDayButton = wrapper.findAll('button').find(button => button.text() === '30d')
+    expect(thirtyDayButton).toBeTruthy()
+    await thirtyDayButton!.trigger('click')
+    await flushPromises()
+
+    const sevenDayButton = wrapper.findAll('button').find(button => button.text() === '7d')
+    expect(sevenDayButton).toBeTruthy()
+    await sevenDayButton!.trigger('click')
+
+    expect(fetchSkillUsageStatsMock).toHaveBeenNthCalledWith(1, 7)
+    expect(fetchSkillUsageStatsMock).toHaveBeenNthCalledWith(2, 30)
+    expect(fetchSkillUsageStatsMock).toHaveBeenNthCalledWith(3, 7)
 
     resolveNewer({
       period_days: 7,
diff --git a/tests/client/stt-settings-ui.test.ts b/tests/client/stt-settings-ui.test.ts
index dbcbda4..ed27e8e 100644
--- a/tests/client/stt-settings-ui.test.ts
+++ b/tests/client/stt-settings-ui.test.ts
@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, nextTick, ref } from 'vue'
+import { defineComponent, h, inject, nextTick, provide, ref, useAttrs } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const STT_STORAGE_KEY = 'hermes-stt-settings-v1'
 
@@ -207,168 +208,132 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
+vi.mock('@/composables/useMessage', () => ({
   useMessage: () => ({
     success: vi.fn(),
     error: vi.fn(),
     warning: vi.fn(),
     info: vi.fn(),
   }),
-  NCard: defineComponent({
-    name: 'NCard',
-    inheritAttrs: false,
-    template: '<section v-bind="$attrs"><header><slot name="header" /></header><main><slot /></main><footer><slot name="action" /></footer></section>',
-  }),
-  NTag: defineComponent({
-    name: 'NTag',
-    inheritAttrs: false,
-    template: '<span v-bind="$attrs"><slot /></span>',
-  }),
-  NTooltip: defineComponent({
-    name: 'NTooltip',
-    inheritAttrs: false,
-    template: '<span><slot name="trigger" /><slot /></span>',
-  }),
-  NPopconfirm: defineComponent({
-    name: 'NPopconfirm',
-    inheritAttrs: false,
-    emits: ['positive-click'],
-    template: '<span><span @click="$emit(\'positive-click\')"><slot name="trigger" /></span><slot /></span>',
-  }),
-  NDropdown: defineComponent({
-    name: 'NDropdown',
-    inheritAttrs: false,
-    props: { options: { type: Array as () => Array<{ label: string; key: string; disabled?: boolean }>, default: () => [] } },
-    emits: ['select'],
-    template: '<span><slot /><button v-for="option in options" :key="option.key" type="button" :disabled="option.disabled" :data-testid="`dropdown-option-${option.key}`" @click="$emit(\'select\', option.key)">{{ option.label }}</button></span>',
-  }),
-  NModal: defineComponent({
-    name: 'NModal',
-    inheritAttrs: false,
-    props: { show: { type: Boolean, default: false } },
-    emits: ['update:show'],
-    template: '<div v-if="show" v-bind="$attrs"><slot /><slot name="footer" /></div>',
-  }),
-  NDrawer: defineComponent({
-    name: 'NDrawer',
-    inheritAttrs: false,
-    props: { show: { type: Boolean, default: false } },
-    emits: ['update:show'],
-    template: '<div v-if="show" v-bind="$attrs"><slot /></div>',
-  }),
-  NDrawerContent: defineComponent({
-    name: 'NDrawerContent',
-    inheritAttrs: false,
-    template: '<div v-bind="$attrs"><slot /><slot name="footer" /></div>',
-  }),
-  NForm: defineComponent({
-    name: 'NForm',
-    inheritAttrs: false,
-    template: '<form v-bind="$attrs"><slot /></form>',
-  }),
-  NFormItem: defineComponent({
-    name: 'NFormItem',
-    inheritAttrs: false,
-    props: { label: { type: String, default: '' } },
-    template: '<label v-bind="$attrs"><span>{{ label }}</span><slot /></label>',
-  }),
-  NSpace: defineComponent({
-    name: 'NSpace',
-    inheritAttrs: false,
-    template: '<div v-bind="$attrs"><slot /></div>',
-  }),
-  NGrid: defineComponent({
-    name: 'NGrid',
-    inheritAttrs: false,
-    template: '<div v-bind="$attrs"><slot /></div>',
-  }),
-  NGridItem: defineComponent({
-    name: 'NGridItem',
-    inheritAttrs: false,
-    template: '<div v-bind="$attrs"><slot /></div>',
-  }),
-  NSelect: defineComponent({
-    name: 'NSelect',
-    inheritAttrs: false,
-    props: {
-      value: { type: [String, Number], default: '' },
-      options: { type: Array as () => Array<{ label: string; value: string }>, default: () => [] },
-      size: { type: String, default: '' },
-    },
-    emits: ['update:value'],
-    template: `
-      <div class="mock-select">
-        <input v-bind="$attrs" :value="value" @input="$emit('update:value', $event.target.value)" />
-        <span v-for="option in options" :key="option.value" class="mock-select-option">{{ option.label }}</span>
-      </div>
-    `,
-  }),
-  NInput: defineComponent({
-    name: 'NInput',
-    inheritAttrs: false,
-    props: {
-      value: { type: String, default: '' },
-      placeholder: { type: String, default: '' },
-      type: { type: String, default: 'text' },
-      rows: { type: Number, default: 2 },
-      size: { type: String, default: '' },
-    },
-    emits: ['update:value'],
-    template: `
-      <textarea
-        v-if="type === 'textarea'"
-        v-bind="$attrs"
-        :rows="rows"
-        :placeholder="placeholder"
-        :value="value"
-        @input="$emit('update:value', $event.target.value)"
-      />
-      <input
-        v-else
-        v-bind="$attrs"
-        :type="type"
-        :placeholder="placeholder"
-        :value="value"
-        @input="$emit('update:value', $event.target.value)"
-      />
-    `,
-  }),
-  NButton: defineComponent({
-    name: 'NButton',
-    inheritAttrs: false,
-    props: {
-      size: { type: String, default: '' },
-      type: { type: String, default: '' },
-      loading: { type: Boolean, default: false },
-    },
-    emits: ['click'],
-    template: '<button type="button" v-bind="$attrs" @click="$emit(\'click\')"><slot /></button>',
-  }),
-  NSlider: defineComponent({
-    name: 'NSlider',
-    inheritAttrs: false,
-    props: {
-      value: { type: Number, default: 0 },
-      min: { type: Number, default: 0 },
-      max: { type: Number, default: 100 },
-      step: { type: Number, default: 1 },
-      size: { type: String, default: '' },
-    },
-    emits: ['update:value'],
-    template: `
-      <input
-        v-bind="$attrs"
-        type="range"
-        :min="min"
-        :max="max"
-        :step="step"
-        :value="value"
-        @input="$emit('update:value', Number($event.target.value))"
-      />
-    `,
-  }),
 }))
 
+/**
+ * Arco overlays (modal / drawer / dropdown) render into a teleported popup, so
+ * they are stubbed to render inline. Stubs are keyed by Arco's *internal*
+ * component name — not the `a-*` template tag — because Arco is registered
+ * globally via `app.use(ArcoVue)`.
+ */
+const AModalStub = defineComponent({
+  name: 'Modal',
+  inheritAttrs: false,
+  props: { visible: { type: Boolean, default: false } },
+  emits: ['cancel', 'ok', 'update:visible'],
+  template: '<div v-if="visible" v-bind="$attrs" class="arco-modal-stub"><slot /><slot name="footer" /></div>',
+})
+
+const ADrawerStub = defineComponent({
+  name: 'Drawer',
+  inheritAttrs: false,
+  props: { visible: { type: Boolean, default: false } },
+  emits: ['cancel', 'update:visible'],
+  template: '<div v-if="visible" v-bind="$attrs" class="arco-drawer-stub"><slot /></div>',
+})
+
+const DOPTION_SELECT = Symbol('arco-doption-select')
+
+const ADoptionStub = defineComponent({
+  name: 'Doption',
+  inheritAttrs: false,
+  props: { value: { type: [String, Number], default: '' }, disabled: { type: Boolean, default: false } },
+  setup(props, { slots }) {
+    const attrs = useAttrs()
+    const select = inject(DOPTION_SELECT, () => {})
+    return () => h('button', {
+      ...attrs,
+      type: 'button',
+      class: 'arco-doption-stub',
+      disabled: props.disabled,
+      'data-value': props.value,
+      onClick: () => select(props.value),
+    }, slots.default?.())
+  },
+})
+
+const ADropdownStub = defineComponent({
+  name: 'Dropdown',
+  inheritAttrs: false,
+  emits: ['select'],
+  setup(_props, { slots, emit }) {
+    provide(DOPTION_SELECT, (value: unknown) => emit('select', value))
+    return () => h('div', { class: 'arco-dropdown-stub' }, [slots.default?.(), slots.content?.()])
+  },
+})
+
+const ASelectStub = defineComponent({
+  name: 'Select',
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: [String, Number, Boolean, Object, Array], default: '' },
+    options: { type: Array as () => Array<{ label: string; value: unknown }>, default: () => [] },
+    placeholder: { type: String, default: '' },
+  },
+  emits: ['update:modelValue', 'change'],
+  template: `
+    <div class="arco-select-stub">
+      <input
+        class="arco-select-input"
+        :data-testid="$attrs['data-testid']"
+        :placeholder="placeholder"
+        :value="modelValue"
+        @change="onChange"
+      />
+      <span v-for="option in options" :key="option.value" class="arco-select-option">{{ option.label }}</span>
+    </div>
+  `,
+  methods: {
+    onChange(event: Event) {
+      const raw = (event.target as HTMLInputElement).value
+      // Restore the option's declared value type so numeric ids stay numeric.
+      const typed = this.options.find(option => String(option.value) === raw)?.value ?? raw
+      this.$emit('update:modelValue', typed)
+      this.$emit('change', typed)
+    },
+  },
+})
+
+const arcoGlobal = {
+  plugins: [ArcoVue],
+  stubs: {
+    Modal: AModalStub,
+    Drawer: ADrawerStub,
+    Dropdown: ADropdownStub,
+    Doption: ADoptionStub,
+    Select: ASelectStub,
+  },
+}
+
+/**
+ * Arco's a-input / a-input-password wrap the real control in a
+ * `.arco-input-wrapper` span, so field test ids land on the span. Tests keep
+ * asserting against the same test ids and reach the control through the wrapper.
+ */
+function field(wrapper: any, testid: string) {
+  return wrapper.get(`[data-testid="${testid}"]`)
+}
+
+/** The settable control behind a field test id (the element itself for stubs). */
+function fieldInput(wrapper: any, testid: string) {
+  const node = field(wrapper, testid)
+  return node.element.tagName === 'INPUT' ? node : node.get('input')
+}
+
+/** Menu entries inside an a-dropdown are located by their rendered label. */
+function dropdownOptionByText(wrapper: any, text: string) {
+  const option = wrapper.findAll('.arco-doption-stub').find((node: any) => node.text().trim() === text)
+  if (!option) throw new Error(`dropdown option not found: ${text}`)
+  return option
+}
+
 vi.mock('@/api/hermes/stt-settings', () => ({
   fetchSttSettings: mockFetchSttSettings,
   saveSttSettings: mockSaveSttSettings,
@@ -759,7 +724,9 @@ describe('VoiceSettings STT UI', () => {
     const VoiceSettings = await importVoiceSettingsComponent()
     return mount(VoiceSettings, {
       global: {
+        ...arcoGlobal,
         stubs: {
+          ...arcoGlobal.stubs,
           SettingRow: defineComponent({
             name: 'SettingRow',
             props: {
@@ -966,21 +933,21 @@ describe('VoiceSettings STT UI', () => {
 
     await wrapper.findAll('button').find(button => button.text().includes('Add TTS API'))!.trigger('click')
     await flushPromises()
-    await wrapper.get('[data-testid="voice-provider-select"]').setValue('tts-custom')
+    await fieldInput(wrapper, 'voice-provider-select').setValue('tts-custom')
     await flushPromises()
 
     expect(wrapper.text()).toContain('API compatibility')
     expect(wrapper.text()).toContain('Connection')
     expect(wrapper.text()).toContain('Model')
 
-    await wrapper.get('[data-testid="voice-provider-base-url"]').setValue('https://custom.example/v1/')
-    await wrapper.get('[data-testid="voice-provider-api-key"]').setValue('raw-custom-secret')
-    await wrapper.get('[data-testid="voice-provider-model"]').setValue('my-manual-model')
+    await fieldInput(wrapper, 'voice-provider-base-url').setValue('https://custom.example/v1/')
+    await fieldInput(wrapper, 'voice-provider-api-key').setValue('raw-custom-secret')
+    await fieldInput(wrapper, 'voice-provider-model').setValue('my-manual-model')
     await flushPromises()
 
     expect(mockProbeVoiceProvider).not.toHaveBeenCalled()
 
-    await wrapper.get('[data-testid="voice-provider-probe"]').trigger('click')
+    await field(wrapper, 'voice-provider-probe').trigger('click')
     await flushPromises()
     await nextTick()
 
@@ -993,7 +960,7 @@ describe('VoiceSettings STT UI', () => {
       apiKey: 'raw-custom-secret',
     }))
     expect(wrapper.text()).toContain('Recommended: tts-1-hd')
-    expect((wrapper.get('[data-testid="voice-provider-model"]').element as HTMLInputElement).value).toBe('my-manual-model')
+    expect((fieldInput(wrapper, 'voice-provider-model').element as HTMLInputElement).value).toBe('my-manual-model')
 
     await wrapper.findAll('button').find(button => button.text().includes('common.add'))!.trigger('click')
     await flushPromises()
@@ -1021,7 +988,7 @@ describe('VoiceSettings STT UI', () => {
     await flushPromises()
 
     expect(wrapper.text()).toContain('Stored')
-    await wrapper.get('[data-testid="dropdown-option-remove"]').trigger('click')
+    await dropdownOptionByText(wrapper, 'Remove').trigger('click')
     await flushPromises()
 
     expect(mockDeleteTtsProvider).toHaveBeenCalledWith('mimo')
diff --git a/tests/client/style-system.test.ts b/tests/client/style-system.test.ts
index aac6e25..59d63a8 100644
--- a/tests/client/style-system.test.ts
+++ b/tests/client/style-system.test.ts
@@ -12,16 +12,42 @@ describe('client style system', () => {
     expect(globalStyles).toContain('.page-header > .header-actions')
   })
 
-  it('aligns SCSS surfaces and radii with the Naive UI theme', () => {
+  it('aligns SCSS surfaces and radii with the shared theme tokens', () => {
     const variables = readClientFile('styles/variables.scss')
-    const theme = readClientFile('styles/theme.ts')
 
+    expect(variables).toContain('--bg-card: #ffffff;')
+    // 深色主题必须重新定义 card surface，否则浅色值会漏到深色模式
     expect(variables).toContain('--bg-card: #2a2a2a;')
-    expect(theme).toContain("cardColor: '#2a2a2a'")
     expect(variables).toContain('$radius-sm: 6px;')
     expect(variables).toContain('$radius-md: 8px;')
     expect(variables).toContain('$radius-lg: 8px;')
-    expect(theme).toContain("borderRadius: '8px'")
-    expect(theme).toContain("borderRadiusSmall: '6px'")
+  })
+
+  it('exports the frozen Arco theme tokens', async () => {
+    const { arcoTheme } = await import('../../packages/client/src/styles/arco-theme')
+
+    expect(arcoTheme.colorPrimary).toBeTruthy()
+    expect(arcoTheme.colorBgLayout).toBeTruthy()
+    expect(arcoTheme.colorBgContainer).toBeTruthy()
+    expect(arcoTheme.borderRadius).toBeTypeOf('number')
+    expect(arcoTheme.fontFamily).toContain('Inter')
+    expect(arcoTheme.fontFamilyMono).toContain('JetBrains Mono')
+  })
+
+  it('carries dark mode through the arco-theme attribute on the root element', () => {
+    // 不 import useTheme：它在模块顶层读 localStorage，node 环境下会抛。
+    // 断言源码契约即可，真实行为由 useTheme 自己的测试覆盖。
+    const source = readClientFile('composables/useTheme.ts')
+
+    expect(source).toContain("setAttribute('arco-theme'")
+    expect(source).toMatch(/'dark' : 'light'|'dark'|'light'/)
+  })
+
+  it('keeps mobile inputs at 16px so iOS does not zoom on focus', () => {
+    const globalStyles = readClientFile('styles/global.scss')
+
+    // Arco 的输入框类名，不是 naive 的 .n-input__*
+    expect(globalStyles).toContain('.arco-input')
+    expect(globalStyles).not.toMatch(/\.n-input/)
   })
 })
diff --git a/tests/client/usage-view-period.test.ts b/tests/client/usage-view-period.test.ts
index bcebbff..f0e791d 100644
--- a/tests/client/usage-view-period.test.ts
+++ b/tests/client/usage-view-period.test.ts
@@ -2,6 +2,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
+import ArcoVue from '@arco-design/web-vue'
 
 const mockUsageStore = vi.hoisted(() => ({
   isLoading: false,
@@ -29,22 +30,6 @@ vi.mock('vue-i18n', () => ({
   }),
 }))
 
-vi.mock('naive-ui', () => ({
-  NButton: defineComponent({
-    name: 'NButton',
-    props: {
-      loading: Boolean,
-      type: String,
-      secondary: Boolean,
-      quaternary: Boolean,
-      size: String,
-      ariaPressed: [Boolean, String],
-    },
-    emits: ['click'],
-    template: '<button class="n-button-stub" :data-type="type" :aria-pressed="ariaPressed" @click="$emit(\'click\')"><slot /></button>',
-  }),
-}))
-
 vi.mock('@/components/hermes/usage/StatCards.vue', () => ({
   default: defineComponent({ name: 'StatCards', template: '<section class="stat-cards-stub" />' }),
 }))
@@ -74,14 +59,14 @@ describe('UsageView period selector', () => {
   })
 
   it('loads the default 30-day period on mount', async () => {
-    mount(UsageView)
+    mount(UsageView, { global: { plugins: [ArcoVue] } })
     await flushPromises()
 
     expect(mockUsageStore.loadSessions).toHaveBeenCalledWith(30)
   })
 
   it('lets users switch usage statistics between common dashboard periods', async () => {
-    const wrapper = mount(UsageView)
+    const wrapper = mount(UsageView, { global: { plugins: [ArcoVue] } })
 
     const periodButtons = wrapper.findAll('.period-option')
     expect(periodButtons.map(button => button.text())).toEqual(['7d', '30d', '90d', '365d'])
@@ -89,8 +74,11 @@ describe('UsageView period selector', () => {
 
     await periodButtons[0].trigger('click')
     expect(mockUsageStore.loadSessions).toHaveBeenLastCalledWith(7)
-    expect(periodButtons[0].attributes('data-type')).toBe('primary')
+    // Arco expresses the button variant through classes, not a data-type attribute.
+    expect(periodButtons[0].classes()).toContain('arco-btn-secondary')
+    expect(periodButtons[1].classes()).toContain('arco-btn-text')
     expect(periodButtons[0].attributes('aria-pressed')).toBe('true')
+    expect(periodButtons[1].attributes('aria-pressed')).toBe('false')
 
     await wrapper.find('.refresh-button').trigger('click')
     expect(mockUsageStore.loadSessions).toHaveBeenLastCalledWith(7)
diff --git a/tests/client/workspace-long-names.test.ts b/tests/client/workspace-long-names.test.ts
index 401ff77..2c51e10 100644
--- a/tests/client/workspace-long-names.test.ts
+++ b/tests/client/workspace-long-names.test.ts
@@ -2,7 +2,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createPinia, setActivePinia } from 'pinia'
-import { defineComponent, h } from 'vue'
+import ArcoVue from '@arco-design/web-vue'
 import FileList from '@/components/hermes/files/FileList.vue'
 import FileTree from '@/components/hermes/files/FileTree.vue'
 import { useFilesStore } from '@/stores/hermes/files'
@@ -12,11 +12,6 @@ vi.mock('vue-i18n', () => ({
   useI18n: () => ({ t: (key: string) => key }),
 }))
 
-vi.mock('naive-ui', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('naive-ui')>()),
-  useMessage: () => ({ error: vi.fn() }),
-}))
-
 vi.mock('@/api/hermes/files', () => ({
   listFiles: vi.fn(),
 }))
@@ -25,44 +20,10 @@ vi.mock('@/api/hermes/download', () => ({
   downloadFile: vi.fn(),
 }))
 
-const NSpinStub = defineComponent({
-  props: ['show'],
-  setup(_props, { slots }) {
-    return () => h('div', slots.default?.())
-  },
-})
-
-const NButtonStub = defineComponent({
-  props: ['title'],
-  setup(props, { slots }) {
-    return () => h('button', { title: props.title }, slots.default?.())
-  },
-})
-
-const NEmptyStub = defineComponent({
-  props: ['description'],
-  setup(props) {
-    return () => h('div', String(props.description || ''))
-  },
-})
-
-const NTreeStub = defineComponent({
-  props: ['data', 'renderLabel'],
-  setup(props) {
-    return () => h('div', (props.data || []).map((option: any) =>
-      h('div', { class: 'tree-node' }, [props.renderLabel({ option })]),
-    ))
-  },
-})
-
 function mountFileList() {
   return mount(FileList, {
     global: {
-      stubs: {
-        NSpin: NSpinStub,
-        NButton: NButtonStub,
-        NEmpty: NEmptyStub,
-      },
+      plugins: [ArcoVue],
     },
   })
 }
@@ -105,9 +66,7 @@ describe('workspace long names', () => {
 
     const wrapper = mount(FileTree, {
       global: {
-        stubs: {
-          NTree: NTreeStub,
-        },
+        plugins: [ArcoVue],
       },
     })
     await vi.waitFor(() => {
diff --git a/tests/e2e/fixtures.ts b/tests/e2e/fixtures.ts
index b36f870..338048a 100644
--- a/tests/e2e/fixtures.ts
+++ b/tests/e2e/fixtures.ts
@@ -301,6 +301,39 @@ export async function mockHermesApi(page: Page, options: MockHermesApiOptions =
       return
     }
 
+    // The settings view loads these four on mount. They were unmocked before
+    // Phase 007 because naive's components fired their requests differently.
+    if (pathname === '/api/hermes/config/moa') {
+      // MoaConfig requires all of these; ModelsView reads presets and the
+      // model slots eagerly, so a partial body throws during render.
+      await route.fulfill(jsonResponse({
+        default_preset: '',
+        presets: {},
+        reference_models: [],
+        aggregator: { provider: '', model: '' },
+        reference_temperature: 0,
+        aggregator_temperature: 0,
+        max_tokens: 0,
+        enabled: false,
+      }))
+      return
+    }
+
+    if (pathname === '/api/auth/users') {
+      await route.fulfill(jsonResponse({ users: [], profiles: [] }))
+      return
+    }
+
+    if (pathname === '/api/hermes/stt/settings') {
+      await route.fulfill(jsonResponse({ providers: [], settings: [], activeProvider: null }))
+      return
+    }
+
+    if (pathname === '/api/hermes/tts/settings') {
+      await route.fulfill(jsonResponse({ providers: [], settings: [], activeProvider: null }))
+      return
+    }
+
     unexpectedRequests.push(recordRequest(request))
     await route.fulfill(jsonResponse({ error: `Unexpected mocked route: ${request.method()} ${pathname}` }, 404))
   })
diff --git a/tests/e2e/provider-models.spec.ts b/tests/e2e/provider-models.spec.ts
index a249615..4859140 100644
--- a/tests/e2e/provider-models.spec.ts
+++ b/tests/e2e/provider-models.spec.ts
@@ -22,7 +22,12 @@ test('fetches custom provider models through the backend proxy', async ({ page }
   await page.getByRole('button', { name: 'Fetch' }).click()
 
   await expect(page.getByText('Found 2 models')).toBeVisible()
-  await expect(page.getByText('proxy-model-a')).toBeVisible()
+  // Scope to the dropdown options: Arco renders both the select's current value
+  // and the option list, so a bare text match resolves to two nodes. The option
+  // list is collapsed by this point, so assert presence rather than visibility.
+  await expect(
+    page.locator('.arco-select-option-content', { hasText: 'proxy-model-a' }),
+  ).toHaveCount(1)
 
   const proxyRequest = api.requests.find((request) => request.pathname === '/api/hermes/provider-models')
   expect(proxyRequest).toBeTruthy()
diff --git a/vite.config.ts b/vite.config.ts
index b1d8fdd..0726324 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -68,12 +68,14 @@ export default defineConfig({
             return 'xterm'
           }
           if (id.includes('node_modules')) {
+            // Arco 必须排在 vue 之前：它的 scope 名是 @arco-design/web-vue，
+            // 含 "vue" 子串，放在后面会被 vue-vendor 先吃掉。
+            if (id.includes('@arco-design')) {
+              return 'ui-vendor'
+            }
             if (id.includes('vue') || id.includes('pinia') || id.includes('vue-router')) {
               return 'vue-vendor'
             }
-            if (id.includes('naive-ui')) {
-              return 'ui-vendor'
-            }
             return 'vendor'
           }
         },
@@ -92,7 +94,7 @@ export default defineConfig({
       'vue',
       'vue-router',
       'pinia',
-      'naive-ui',
+      '@arco-design/web-vue',
     ],
   },
   server: {