nekomeowww · Oct 21, 2026 · Oct 20, 2026 · Oct 21, 2026 · Oct 21, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -92,13 +92,14 @@ Concise but detailed reference for contributors working in the `vieval-dev/vieva
 - Use Iconify icon sets; avoid bespoke SVGs.
 - Animations: keep intuitive, lively, and readable.
 - Viewer UI (`packages/ui/client`) floating surfaces reuse the existing wrappers, never a bare reka-ui content or a new look:
-  - Menus, popovers, and hover cards: reka-ui `DropdownMenuContent` / `PopoverContent` / `HoverCardContent` with `as-child`, wrapping `AnimatedContent` (`components/AnimatedContent.vue`, the open/close motion ported from airi), styled with the `floating` / `floating-arrow` shortcuts. Follow `CompareMenu.vue` and `HuePicker.vue`. When the content scrolls, scroll an inner element: `AnimatedContent` clips its own root.
+  - Menus, popovers, and hover cards: reka-ui `DropdownMenuContent` / `PopoverContent` / `HoverCardContent` with `as-child`, wrapping `AnimatedContent` (`components/AnimatedContent.vue`, the open/close motion ported from airi), styled with the `floating` / `floating-arrow` shortcuts. Follow `CompareMenu.vue` and `PreferencesMenu.vue` (a popover with a nested dropdown menu). When the content scrolls, scroll an inner element: `AnimatedContent` clips its own root.
   - One-line hints: reka-ui `Tooltip` with the `tooltip` / `tooltip-arrow` shortcuts (animated in `styles.css`).
   - Phones: bottom sheets use vaul-vue `Drawer` (as in airi's Live2D report modal) on the same `floating` surface; share the body component between the desktop popover and the phone drawer.
   - In-page choices use reka-ui (`DropdownMenuRadioGroup` for one of many), not native `<select>`.
   - Choice controls share one look, a gray track meaning "pick from these": `SegmentedControl` (`segmented`, with a raised block that slides to the picked choice) for a few visible choices, `option-trigger` for a control that opens a list (menu, popover). Controls are not text-selectable (`select-none`, already in `btn` / `segmented` / `option-trigger`).
 - Before adding a UnoCSS shortcut or keyframes, search `packages/ui/uno.config.ts` and `client/src/styles.css` for one with the same role and reuse it; do not add near-duplicates (a second "floating card" shortcut, a second fade).
 - `useDark` (VueUse): set `disableTransition: false` or use existing composables in `packages/ui`.
+- Viewer text goes through vue-i18n (`packages/ui/client/src/i18n`): add each string to the `en` area module and its `zh-Hans` counterpart (typed by the `en` module), and call `t()` / `i18n.global.t()`. Format numbers, dates, and relative times with the helpers in `format.ts` / `labels.ts`, or pass `currentLocale()` to `Intl`. Do not translate report data (case, task, metric, and score names, ids, outputs).
 
 ## Testing Practices
 

diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -217,8 +217,11 @@ UI conventions:
 
 - Icons are MingCute through UnoCSS `presetIcons` (`i-mingcute-*-line`; state badges use `-fill`). Do not add inline SVG
   icons or glyphs such as `✓`.
-- Fonts are self-hosted with Fontsource, so the viewer works offline: Quicksand, Noto Sans, and Noto Sans SC (loaded
-  per `unicode-range`, only when a page shows CJK text) for text; Maple Mono for `font-mono`.
+- Fonts are self-hosted, so the viewer works offline: Quicksand and Noto Sans (Fontsource) for Latin text, Resource Han
+  Rounded SC for CJK text, and Maple Mono for `font-mono`. Resource Han Rounded SC is a rounded Source Han Sans (SIL OFL
+  1.1) that matches Quicksand. It lives in `client/src/assets/fonts/resource-han-rounded-sc` as 101 WOFF2 slices
+  (about 19 MB), loaded per `unicode-range` only when a page shows those characters. Rebuild the slices with
+  `scripts/buildCjkFont.py` (see its header) from the release's `ResourceHanRoundedSC-VF.otf`.
 - Use `mono` (`font-mono tabular-nums`) only in list-like views (tables, timelines, event and log rows) and for raw
   content (JSON, logs, hex). Headers, figures, and navigation use the sans font; add `tabular-nums` to figures.
 - Every hierarchy level (projects, comparison, workspace, project, experiment, attempt, run, task, case, round, try) has

diff --git a/packages/ui/client/public/scheme.js b/packages/ui/client/public/scheme.js
@@ -13,3 +13,23 @@ document.documentElement.style.setProperty('--chromatic-hue', String(Number.isFi
 // `src/theme.ts` owns the key (keep in sync); `useColorVision` updates the attribute afterwards.
 if (localStorage.getItem('vieval-viewer:color-vision') === 'safe')
   document.documentElement.dataset.colorVision = 'safe'
+
+// Sets `<html lang>` to the saved or browser language before the first paint, so the right CJK font and hyphenation
+// apply at once. `src/i18n/index.ts` owns the key and the locales, and `resolveLocale` the matching (keep in sync):
+// the first browser language with the same language and script as a supported locale (`zh-CN` → `zh-Hans`), else `en`.
+// `useLocale` updates the attribute afterwards.
+const savedLocale = localStorage.getItem('vieval-viewer:locale')
+let lang = savedLocale === 'en' || savedLocale === 'zh-Hans' ? savedLocale : undefined
+for (const tag of navigator.languages) {
+  if (lang != null)
+    break
+  try {
+    const locale = new Intl.Locale(tag).maximize()
+    if (locale.language === 'en')
+      lang = 'en'
+    else if (locale.language === 'zh' && locale.script === 'Hans')
+      lang = 'zh-Hans'
+  }
+  catch {}
+}
+document.documentElement.lang = lang ?? 'en'
diff --git a/packages/ui/client/src/App.vue b/packages/ui/client/src/App.vue
@@ -6,10 +6,11 @@ import { useHead } from '@unhead/vue'
 import { useDark, useToggle } from '@vueuse/core'
 import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, TooltipProvider } from 'reka-ui'
 import { computed, shallowRef, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import CompareMenu from './components/CompareMenu.vue'
-import HuePicker from './components/HuePicker.vue'
 import IconButton from './components/IconButton.vue'
+import PreferencesMenu from './components/PreferencesMenu.vue'
 import Sidebar from './components/Sidebar.vue'
 import CasePage from './pages/CasePage.vue'
 import ComparePage from './pages/ComparePage.vue'
@@ -20,9 +21,14 @@ import RunPage from './pages/RunPage.vue'
 import TaskPage from './pages/TaskPage.vue'
 
 import { api } from './api'
+import { useLocale } from './composables/useLocale'
 import { FAVICON_KEYS } from './composables/useStatusFavicon'
 import { currentRoute, href } from './router'
 
+const { t } = useI18n()
+// Applies the saved language from the start, before the Preferences popover is opened.
+const { locale } = useLocale()
+
 const route = currentRoute
 const routeRunKey = computed(() => ('runKey' in route.value ? route.value.runKey : undefined))
 // Report identity of the run of the route (workspace, project segment, experiment, attempt). It never changes, so one
@@ -69,6 +75,7 @@ watch(pageKey, () => main.value?.scrollTo({ top: 0 }))
 // (`useStatusFavicon`). `vieval-logo.svg` is `docs/content/public/vieval-logo.svg` with its embedded 1200 px gradient
 // re-encoded as a 300 px WebP (4.3 MB → 7 KB); the PNG is the docs' 96 px favicon for browsers without SVG favicons.
 useHead({
+  htmlAttrs: { lang: locale },
   link: [
     { href: './vieval-logo.svg', key: FAVICON_KEYS.svg, rel: 'icon', type: 'image/svg+xml' },
     { href: './favicon-96x96.png', key: FAVICON_KEYS.png, rel: 'icon', sizes: '96x96', type: 'image/png' },
@@ -87,15 +94,15 @@ watch(route, () => (drawerOpen.value = false))
     <div :class="['flex h-full max-md:flex-col']">
       <!-- Narrow screens: a top bar with the drawer toggle replaces the sidebar column. -->
       <header :class="['md:hidden shrink-0 flex items-center gap-1 px-2 h-12 pt-[env(safe-area-inset-top)] box-content', 'border-b border-neutral-200/50 dark:border-neutral-800/50 bg-white/90 dark:bg-neutral-950/90 backdrop-blur']">
-        <IconButton icon="i-mingcute-menu-line" label="Projects and runs" @click="drawerOpen = true" />
+        <IconButton icon="i-mingcute-menu-line" :label="t('navigation.projectsAndRuns')" @click="drawerOpen = true" />
         <a :href="href({ name: 'scope' })" :class="['flex items-center gap-2 px-1 font-semibold']">
           <img src="/vieval-logo.svg" alt="" width="20" height="20" :class="['size-5']">
           Vieval
         </a>
         <div :class="['ml-auto flex items-center gap-0.5']">
           <CompareMenu v-bind="compareScope" />
-          <HuePicker />
-          <IconButton :icon="dark ? 'i-mingcute-sun-line' : 'i-mingcute-moon-line'" :label="dark ? 'Light mode' : 'Dark mode'" @click="toggleScheme()" />
+          <PreferencesMenu />
+          <IconButton :icon="dark ? 'i-mingcute-sun-line' : 'i-mingcute-moon-line'" :label="dark ? t('preferences.scheme.light') : t('preferences.scheme.dark')" @click="toggleScheme()" />
         </div>
       </header>
       <DialogRoot v-model:open="drawerOpen">
@@ -105,12 +112,12 @@ watch(route, () => (drawerOpen.value = false))
           <DialogContent :class="['vv-drawer fixed inset-y-0 left-0 z-50 w-[min(20rem,85vw)] flex flex-col md:hidden', 'bg-white dark:bg-neutral-950 shadow-xl outline-none pt-[env(safe-area-inset-top)]']" @open-auto-focus.prevent>
             <div :class="['flex items-center gap-2 px-3 h-12 shrink-0 border-b border-neutral-200/50 dark:border-neutral-800/50']">
               <DialogTitle :class="['font-semibold']">
-                Projects and runs
+                {{ t('navigation.projectsAndRuns') }}
               </DialogTitle>
               <DialogDescription :class="['sr-only']">
-                Navigate to a project, an experiment, or a recent run.
+                {{ t('navigation.drawerDescription') }}
               </DialogDescription>
-              <IconButton :class="['ml-auto']" icon="i-mingcute-close-line" label="Close" @click="drawerOpen = false" />
+              <IconButton :class="['ml-auto']" icon="i-mingcute-close-line" :label="t('common.close')" @click="drawerOpen = false" />
             </div>
             <!-- A link to the page already shown does not change the route; close on every followed link instead. -->
             <div :class="['flex-1 overflow-auto p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]']" @click="($event.target as HTMLElement).closest('a') && (drawerOpen = false)">
@@ -127,8 +134,8 @@ watch(route, () => (drawerOpen.value = false))
           </a>
           <div :class="['ml-auto flex items-center gap-0.5']">
             <CompareMenu v-bind="compareScope" />
-            <HuePicker />
-            <IconButton :icon="dark ? 'i-mingcute-sun-line' : 'i-mingcute-moon-line'" :label="dark ? 'Light mode' : 'Dark mode'" @click="toggleScheme()" />
+            <PreferencesMenu />
+            <IconButton :icon="dark ? 'i-mingcute-sun-line' : 'i-mingcute-moon-line'" :label="dark ? t('preferences.scheme.light') : t('preferences.scheme.dark')" @click="toggleScheme()" />
           </div>
         </div>
         <div :class="['flex-1 overflow-auto p-2']">

diff --git a/packages/ui/client/src/assets/fonts/resource-han-rounded-sc/LICENSE b/packages/ui/client/src/assets/fonts/resource-han-rounded-sc/LICENSE
@@ -0,0 +1,93 @@
+Copyright © 2018—2022 Cyano Hao. Portions © 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.