Solid UI overhaul. Reviewed the full diff (78 files, ~15k+/7k-). Notes:

Architecture — clean decomposition. Overview split into 5 focused components (cards, attention, events, actions, log-tail) instead of one monolith. Config split into 5 logical sub-tabs (communications, appearance, automation, infrastructure, AI & agents). Sessions view gains search/sort/pagination — big usability win.

Security — unsafeHTML in overview-cards.ts is safe: values are HTML-escaped before wrapping in <span> tags. The src/gateway/server-methods/chat.ts change (stop stripping usage/cost from chat history) is intentional for the new per-message cost display. No innerHTML usage found.

Theme system — 3 themes (claw/knot/dash) × light/dark with system detection and legacy migration map. Glass morphism CSS is well-structured with enter/modal/dropdown animations.

i18n — all 4 locales (en, pt-BR, zh-CN, zh-TW) have the new keys for the 5 settings sub-tabs. Structure is clean (tabs.X for labels, subtitles.X for descriptions).

Tests — 11 test files updated. Good coverage for a UI PR.

One note: tokenEstimate() in chat.ts uses Math.ceil(draft.length / 4) — fine as a quick visual hint, though char/token ratio varies a lot by language (CJK is closer to 1:1). Might want a tooltip disclaimer or just label it "~estimate".

Overall: well-organized, no security concerns, good test coverage. 🦞

Summary of Changes

1. ui/src/ui/navigation.test.ts: Updated the subtitle assertion from toContain("chat session") to toContain("chat") to match the current i18n text.
2. ui/src/ui/navigation.browser.test.ts: Added await nextFrame() after every await app.updateComplete across all 12 tests. This gives Lit reactive properties time to propagate before assertions, fixing the timing issue where app.tab and app.basePath were undefined on Windows headless Chromium.
3. ui/src/ui/views/chat.test.ts: Fixed the stop button test:

• Added sending: true to createProps so isBusy is true (required for the stop button to render)
• Changed button lookup: from textContent === "Stop" to querySelector('button[title="Stop"]') since the button now uses an SVG icon with a title attribute

4. ui/src/i18n/test/translate.test.ts: Replaced the 5-microtask polling loop with a setTimeout-based retry (up to 1s), plus a fallback that explicitly calls setLocale("zh-CN") if vi.resetModules() doesn't cause full module re-evaluation (which happens in Vitest browser mode).
5. config-form.browser.test.ts: No changes needed; the "mixed unions" test failure was already resolved by the earlier analyzer changes in config-form.analyze.ts.

tysm @arosstale for your thorough feedback and focus on enhancements tied to UX.

Additional Comments (1)
ui/src/ui/app-render.ts Update banner shows even when already up-to-date

The original code filtered updateAvailable by checking latestVersion !== currentVersion before rendering the banner. That guard was removed in this refactor, so the banner will now render whenever state.updateAvailable is truthy, even if the user is already on the latest version.

          state.updateAvailable && state.updateAvailable.latestVersion !== state.updateAvailable.currentVersion
            ? html`<div class="update-banner callout danger" role="alert">
              <strong>Update available:</strong> v${state.updateAvailable.latestVersion}
              (running v${state.updateAvailable.currentVersion}).
              <button
                class="btn btn--sm update-banner__btn"
                ?disabled=${state.updateRunning || !state.connected}

Prompt To Fix With AI

This is a comment left during a code review.
Path: ui/src/ui/app-render.ts
Line: 357-365

Comment:
**Update banner shows even when already up-to-date**

The original code filtered `updateAvailable` by checking `latestVersion !== currentVersion` before rendering the banner. That guard was removed in this refactor, so the banner will now render whenever `state.updateAvailable` is truthy, even if the user is already on the latest version.

```suggestion
          state.updateAvailable && state.updateAvailable.latestVersion !== state.updateAvailable.currentVersion
            ? html`<div class="update-banner callout danger" role="alert">
              <strong>Update available:</strong> v${state.updateAvailable.latestVersion}
              (running v${state.updateAvailable.currentVersion}).
              <button
                class="btn btn--sm update-banner__btn"
                ?disabled=${state.updateRunning || !state.connected}

How can I resolve this? If you propose a fix, please make it concise.

Done. Restored the version comparison guard so the update banner only renders when latestVersion !== currentVersion.

@greptileai can you produce an updated review?

This branch has now been split into a stacked reviewable series to keep each PR comfortably below the file-count cap.

Superseding stack:

• ui: refactor dashboard-v2 structure and behavior #36853 ui: refactor dashboard-v2 structure and behavior
• ui: refresh dashboard-v2 theme and visual styles #36856 ui: refresh dashboard-v2 theme and visual styles
• test(ui): update dashboard-v2 coverage and expectations #36857 test(ui): update dashboard-v2 coverage and expectations

Recommended review order: #36853 -> #36856 -> #36857.

I’m leaving this PR open for now as the original umbrella/reference, but the stacked PRs are the intended review path.