hermes-ui/docs/chat-chain-changes/2026-10-17-phase006-arco-style-cleanup.md

date, pr, feature, impact

date	pr	feature	impact
2026-10-17	pending	Phase 006 follow-up - Arco class-name cleanup, tooltip content props, tool panel width clamp, Escape dialog fallback	Cosmetic styling fix plus one behavior fix. Dead naive-ui CSS class names in the chat components are rewritten to Arco equivalents so the toolbar, model label, drawer body scrolling, and mobile breakpoints receive their intended styles again; Arco tooltips that carried their label as trailing default-slot text now pass it through the content prop so the text stops being rendered into the layout flow; the workspace/terminal panel no longer squeezes the chat column narrow enough to wrap the input toolbar; and Escape again closes Arco chat dialogs because the fallback no longer looks for naive-ui's .n-modal-mask. No chat store logic, no /chat-run payload, and no message rendering path is touched.

Phase 006 follow-up: Arco style cleanup and Esc dialog fallback

Branch: phase/006-chat-arco Touched feature: chat toolbar styling, chat dialogs, session context menu layout, Esc-to-close fallback

Why

Phase 006 migrated the chat page to Arco, but the manual checklist walkthrough surfaced four problems that the automated checks could not see:

1. Opening the workspace/terminal panel squeezed the chat column so far that the input toolbar wrapped "Add attachment" into a vertical stack and truncated the model label.
2. 35 :deep(.n-*) rules in the chat components were left behind by the migration. They silently stopped matching because Arco uses different class names, and grep naive-ui never sees them because they are class names in a style block rather than an import.
3. useKeyboard.ts still looked for .n-modal-mask to close dialogs on Escape. Every chat dialog had moved to Arco, so Escape no longer closed the model picker or session search.
4. Four Arco tooltips carried their label as trailing default-slot text (<a-tooltip><a-button/></a-tooltip>{{ t(...) }}). naive-ui rendered the tooltip slot as an overlay so the text was harmless; Arco renders the default slot inline, so those text nodes sat in the flex row as zero-width items and contributed to the toolbar squeeze above.

What changed

• ChatPanel.vue — toolPanelMaxWidth() now reserves CHAT_MAIN_MIN_WIDTH (620px) for the chat column instead of a flat 120px, so the toolbar always has room. showToolPanel already re-clamps on open, so persisted widths from older builds are corrected on the next toggle. Dead naive classes rewritten: .n-button → .arco-btn, and the new-chat drawer's -content / -body-content-wrapper layers collapsed onto .arco-drawer / .arco-drawer-body because Arco has no such nesting.
• ChatInput.vue — dropped the .n-button__content / .n-button__border / .n-button__ripple / .n-base-wave rules; Arco's a-button is already display: flex and carries a transparent border, so gap and border-color now go on the button itself. .n-switch → .arco-switch, .n-button__icon → .arco-btn-icon. The context-length, attach, and model tooltips now pass their label via :content. .input-toolbar is pinned to flex-wrap: nowrap.
• TerminalPanel.vue — the new-session tooltip passes its label via :content.
• MessageList.vue, MessageItem.vue, SessionSearchModal.vue — same class-name rewrite; .n-drawer-body-content-wrapper → .arco-drawer-body, .n-modal-body-wrapper → .arco-modal, .n-input → .arco-input.
• useKeyboard.ts — the Escape fallback now finds the visible .arco-modal and clicks its .arco-modal-close-btn.

Verification

The toolbar was measured with the workspace panel open across viewport widths 1600 / 1280 / 1100 / 1024 / 900 / 820. .input-toolbar stays a single 32px row at every width and .input-model-label is no longer clipped (scrollWidth === clientWidth). Before the fix the same measurement showed a 90px-tall two-row toolbar and a truncated model label.

Behavior impact

Cosmetic only, plus one fix. Toolbar, model label, drawer body scrolling and mobile breakpoints now actually receive their intended styles. Tooltip labels stop being emitted into the layout. Escape now closes Arco chat dialogs again. No chat store logic, no /chat-run payload, and no message rendering path was touched.

Regression coverage

• tests/client/session-search.test.ts — asserts Escape clicks an open Arco modal's close button and ignores leftover naive-ui markup.
• tests/e2e/chat-input-dropdown.spec.ts, tests/e2e/chat-rendering-smoke.spec.ts — unchanged, still green (35 e2e tests).

npm run test        # 274 files / 2027 tests
npm run test:e2e    # 35 tests
npm run harness:check
npm run build