From e9fab03ebea92991b54a78438b07c03523137a1e Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 15:15:29 +0800
Subject: [PATCH 01/30] feat(i18n): Add Vue i18n support for English and
 Chinese UI

- Register vue-i18n in the app and add locale detection with localStorage persistence
- Create English and Simplified Chinese locale files organized by feature area
- Replace hardcoded UI strings across sidebar, composer, review, skills, and threads
- Add a language selector in settings and localize dynamic labels, tooltips, and statuses
---
 .gitignore                                    |   1 +
 package.json                                  |   1 +
 src/App.vue                                   | 111 +++--
 src/components/content/AccountMenu.vue        |  12 +-
 src/components/content/ComposerDropdown.vue   |   7 +-
 .../content/ComposerRuntimeDropdown.vue       |  15 +-
 .../content/ComposerSearchDropdown.vue        |  10 +-
 .../content/ComposerSkillPicker.vue           |   4 +-
 src/components/content/QueuedMessages.vue     |   6 +-
 src/components/content/ReviewPane.vue         | 102 ++--
 src/components/content/SkillCard.vue          |   6 +-
 src/components/content/SkillDetailModal.vue   |  14 +-
 src/components/content/SkillsHub.vue          |  56 +--
 src/components/content/ThreadComposer.vue     |  76 +--
 src/components/content/ThreadConversation.vue |  95 ++--
 .../content/ThreadMessageTypeMenu.vue         |   6 +-
 .../content/ThreadPendingRequestPanel.vue     |  74 +--
 src/components/sidebar/SidebarPrimaryNav.vue  |   6 +-
 .../sidebar/SidebarThreadControls.vue         |   8 +-
 src/components/sidebar/SidebarThreadTree.vue  | 115 ++---
 src/i18n/index.ts                             |  31 ++
 src/i18n/locales/en.ts                        | 457 ++++++++++++++++++
 src/i18n/locales/zh.ts                        | 456 +++++++++++++++++
 src/main.ts                                   |   5 +-
 24 files changed, 1336 insertions(+), 338 deletions(-)
 create mode 100644 src/i18n/index.ts
 create mode 100644 src/i18n/locales/en.ts
 create mode 100644 src/i18n/locales/zh.ts

diff --git a/.gitignore b/.gitignore
index ca9ef4de..9e202931 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ pnpm-lock.yaml
 package.json
 DYNAMIC_INSTRUCTIONS.md
 .omx/
+.idea
diff --git a/package.json b/package.json
index 0c2ab97f..2fb13bfa 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "firebase": "^12.2.1",
     "highlight.js": "^11.11.1",
     "qrcode-terminal": "^0.12.0",
+    "vue-i18n": "^11.3.2",
     "ws": "^8.18.3"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 3e0879bb..83738f04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,8 +15,8 @@
               class="sidebar-search-toggle"
               type="button"
               :aria-pressed="isSidebarSearchVisible"
-              aria-label="Search threads"
-              title="Search threads"
+              :aria-label="$t('home.searchThreads')"
+              :title="$t('home.searchThreads')"
               @click="toggleSidebarSearch"
             >
               <IconTablerSearch class="sidebar-search-toggle-icon" />
@@ -30,14 +30,14 @@
               v-model="sidebarSearchQuery"
               class="sidebar-search-input"
               type="text"
-              placeholder="Filter threads..."
+              :placeholder="$t('home.filterThreads')"
               @keydown="onSidebarSearchKeydown"
             />
             <button
               v-if="sidebarSearchQuery.length > 0"
               class="sidebar-search-clear"
               type="button"
-              aria-label="Clear search"
+              :aria-label="$t('home.clearSearch')"
               @click="clearSidebarSearch"
             >
               <IconTablerX class="sidebar-search-clear-icon" />
@@ -51,7 +51,7 @@
             type="button"
             @click="router.push({ name: 'skills' }); isMobile && setSidebarCollapsed(true)"
           >
-            Skills Hub
+            {{ $t('home.skillsHub') }}
           </button>
 
           <SidebarThreadTree :groups="projectGroups" :project-display-name-by-id="projectDisplayNameById"
@@ -88,12 +88,12 @@
                       class="sidebar-settings-account-collapse"
                       type="button"
                       :aria-expanded="!isAccountsSectionCollapsed"
-                      :title="isAccountsSectionCollapsed ? 'Expand accounts' : 'Collapse accounts'"
+                      :title="isAccountsSectionCollapsed ? t('settings.expandAccounts') : t('settings.collapseAccounts')"
                       @click="toggleAccountsSectionCollapsed"
                     >
                       <span class="sidebar-settings-account-collapse-icon">{{ isAccountsSectionCollapsed ? '▸' : '▾' }}</span>
                     </button>
-                    <span class="sidebar-settings-account-title">Accounts</span>
+                    <span class="sidebar-settings-account-title">{{ $t('settings.accounts') }}</span>
                     <span class="sidebar-settings-account-count">{{ accounts.length }}</span>
                   </div>
                   <button
@@ -102,13 +102,13 @@
                     :disabled="isRefreshingAccounts || isSwitchingAccounts"
                     @click="onRefreshAccounts"
                   >
-                    {{ isRefreshingAccounts ? 'Reloading…' : 'Reload' }}
+                    {{ isRefreshingAccounts ? $t('settings.reloading') : $t('settings.reload') }}
                   </button>
                 </div>
                 <template v-if="!isAccountsSectionCollapsed">
                   <p v-if="accountActionError" class="sidebar-settings-account-error">{{ accountActionError }}</p>
                   <p v-if="accounts.length === 0" class="sidebar-settings-account-empty">
-                    Run `codex login`, then click reload.
+                    {{ $t('settings.runCodexLogin') }}
                   </p>
                   <div v-else class="sidebar-settings-account-list">
                   <article
@@ -126,7 +126,7 @@
                     @mouseleave="onAccountCardPointerLeave(account.accountId)"
                   >
                     <div class="sidebar-settings-account-main">
-                      <p class="sidebar-settings-account-email">{{ account.email || 'Account' }}</p>
+                      <p class="sidebar-settings-account-email">{{ account.email || $t('settings.accounts') }}</p>
                       <p class="sidebar-settings-account-meta">
                         {{ formatAccountMeta(account) }}
                       </p>
@@ -134,7 +134,7 @@
                         {{ formatAccountQuota(account) }}
                       </p>
                       <p class="sidebar-settings-account-id">
-                        Workspace {{ shortAccountId(account.accountId) }}
+                        {{ $t('settings.workspace') + ' ' }}{{ shortAccountId(account.accountId) }}
                       </p>
                     </div>
                     <div class="sidebar-settings-account-actions">
@@ -164,36 +164,47 @@
                 </template>
               </div>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.sendWithEnter" @click="toggleSendWithEnter">
-                <span class="sidebar-settings-label">Require ⌘ + enter to send</span>
+                <span class="sidebar-settings-label">{{ $t('settings.requireCmdEnter') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': !sendWithEnter }" />
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.inProgressSendMode" @click="cycleInProgressSendMode">
-                <span class="sidebar-settings-label">When busy, send as</span>
-                <span class="sidebar-settings-value">{{ inProgressSendMode === 'steer' ? 'Steer' : 'Queue' }}</span>
+                <span class="sidebar-settings-label">{{ $t('settings.whenBusySendAs') }}</span>
+                <span class="sidebar-settings-value">{{ inProgressSendMode === 'steer' ? $t('composer.steer') : $t('composer.queue') }}</span>
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.appearance" @click="cycleDarkMode">
-                <span class="sidebar-settings-label">Appearance</span>
-                <span class="sidebar-settings-value">{{ darkMode === 'system' ? 'System' : darkMode === 'dark' ? 'Dark' : 'Light' }}</span>
+                <span class="sidebar-settings-label">{{ $t('settings.appearance') }}</span>
+                <span class="sidebar-settings-value">{{ darkMode === 'system' ? $t('settings.system') : darkMode === 'dark' ? $t('settings.dark') : $t('settings.light') }}</span>
               </button>
+              <div class="sidebar-settings-row sidebar-settings-row--select" :title="SETTINGS_HELP.language">
+                <span class="sidebar-settings-label">{{ $t('settings.language') }}</span>
+                <select
+                  class="sidebar-settings-provider-select"
+                  :value="locale"
+                  @change="onLanguageChange(($event.target as HTMLSelectElement).value)"
+                >
+                  <option value="en">English</option>
+                  <option value="zh">中文</option>
+                </select>
+              </div>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.chatWidth" @click="cycleChatWidth">
-                <span class="sidebar-settings-label">Chat width</span>
+                <span class="sidebar-settings-label">{{ $t('settings.chatWidth') }}</span>
                 <span class="sidebar-settings-value">{{ chatWidthLabel }}</span>
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationClickToToggle" @click="toggleDictationClickToToggle">
-                <span class="sidebar-settings-label">Click to toggle dictation</span>
+                <span class="sidebar-settings-label">{{ $t('settings.clickToggleDictation') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationClickToToggle }" />
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationAutoSend" @click="toggleDictationAutoSend">
-                <span class="sidebar-settings-label">Auto send dictation</span>
+                <span class="sidebar-settings-label">{{ $t('settings.autoSendDictation') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationAutoSend }" />
               </button>
 
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.githubTrendingProjects" @click="toggleGithubTrendingProjects">
-                <span class="sidebar-settings-label">GitHub trending projects</span>
+                <span class="sidebar-settings-label">{{ $t('settings.githubTrending') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': showGithubTrendingProjects }" />
               </button>
               <div class="sidebar-settings-row sidebar-settings-row--select" title="Choose the API provider for the Codex backend">
-                <span class="sidebar-settings-label">Provider</span>
+                <span class="sidebar-settings-label">{{ $t('settings.provider') }}</span>
                 <select
                   class="sidebar-settings-provider-select"
                   :value="selectedProvider"
@@ -346,7 +357,7 @@
                 </div>
               </div>
               <div class="sidebar-settings-row sidebar-settings-row--select" :title="SETTINGS_HELP.dictationLanguage">
-                <span class="sidebar-settings-label">Dictation language</span>
+                <span class="sidebar-settings-label">{{ $t('settings.dictationLanguage') }}</span>
                 <ComposerDropdown
                   class="sidebar-settings-language-dropdown"
                   :model-value="dictationLanguage"
@@ -359,7 +370,7 @@
                 />
               </div>
               <button class="sidebar-settings-row" type="button" aria-live="polite" @click="isTelegramConfigOpen = !isTelegramConfigOpen">
-                <span class="sidebar-settings-label">Telegram</span>
+                <span class="sidebar-settings-label">{{ $t('settings.telegram') }}</span>
                 <span class="sidebar-settings-value">{{ telegramStatusText }}</span>
               </button>
               <div v-if="isTelegramConfigOpen" class="sidebar-settings-telegram-panel">
@@ -428,7 +439,7 @@
             @click.stop="isSettingsOpen = !isSettingsOpen"
           >
             <IconTablerSettings class="sidebar-settings-icon" />
-            <span>Settings</span>
+            <span>{{ $t('common.settings') }}</span>
             <span class="sidebar-settings-button-version">
               {{ worktreeName }} · v{{ appVersion }}
             </span>
@@ -472,21 +483,21 @@
           <template v-else-if="isHomeRoute">
             <div class="content-grid content-grid-home">
               <div class="new-thread-empty">
-                <p class="new-thread-hero">Let's build</p>
+                <p class="new-thread-hero">{{ $t('home.letsBuild') }}</p>
                 <ComposerDropdown class="new-thread-folder-dropdown" :model-value="newThreadCwd"
                   :options="newThreadFolderOptions" placeholder="Choose folder"
                   :enable-search="true"
                   search-placeholder="Quick search project"
                   :disabled="false" @update:model-value="onSelectNewThreadFolder" />
                 <p v-if="newThreadCwd" class="new-thread-folder-selected" :title="newThreadCwd">
-                  Selected folder: {{ newThreadCwd }}
+                  {{ $t('home.selectedFolder', { path: newThreadCwd }) }}
                 </p>
                 <div class="new-thread-folder-actions">
                   <button class="new-thread-folder-action new-thread-folder-action-primary" type="button" @click="onOpenExistingFolder">
-                    Select folder
+                    {{ $t('home.selectFolder') }}
                   </button>
                   <button class="new-thread-folder-action" type="button" @click="onCreateProject">
-                    Create Project
+                    {{ $t('home.createProject') }}
                   </button>
                 </div>
                 <Teleport to="body">
@@ -629,8 +640,7 @@
                     }}
                   </p>
                 </div>
-                <p class="new-thread-runtime-help">
-                  <code>Local project</code> uses the selected folder directly. <code>New worktree</code> creates an isolated Git worktree before the first prompt.
+                <p class="new-thread-runtime-help" v-html="$t('home.runtimeDescription')">
                 </p>
                 <div
                   v-if="worktreeInitStatus.phase !== 'idle'"
@@ -781,6 +791,7 @@
 
 <script setup lang="ts">
 import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import DesktopLayout from './components/layout/DesktopLayout.vue'
 import SidebarThreadTree from './components/sidebar/SidebarThreadTree.vue'
@@ -842,6 +853,7 @@ const SETTINGS_HELP = {
 
   githubTrendingProjects: 'Show or hide GitHub trending project cards on the new thread screen.',
   dictationLanguage: 'Choose transcription language or keep auto-detect.',
+  language: 'Switch the interface language between English and Chinese.',
 } as const
 
 type ChatWidthMode = 'standard' | 'wide' | 'extra-wide'
@@ -1156,9 +1168,9 @@ const routeThreadId = computed(() => {
 const isHomeRoute = computed(() => route.name === 'home')
 const isSkillsRoute = computed(() => route.name === 'skills')
 const contentTitle = computed(() => {
-  if (isSkillsRoute.value) return 'Skills'
-  if (isHomeRoute.value) return 'New thread'
-  return selectedThread.value?.title ?? 'Choose a thread'
+  if (isSkillsRoute.value) return t('common.skills')
+  if (isHomeRoute.value) return t('home.newThread')
+  return selectedThread.value?.title ?? t('home.newThread')
 })
 const browserHostName =
   typeof window !== 'undefined'
@@ -1387,7 +1399,12 @@ const githubTipsScopeOptions = computed<Array<{ value: GithubTipsScope; label: s
   { value: 'trending-weekly', label: 'Trending weekly' },
   { value: 'trending-monthly', label: 'Trending monthly' },
 ])
-const chatWidthLabel = computed(() => CHAT_WIDTH_PRESETS[chatWidth.value].label)
+const chatWidthLabel = computed(() => {
+  const mode = chatWidth.value
+  if (mode === 'standard') return t('settings.standard')
+  if (mode === 'wide') return t('settings.wide')
+  return t('settings.extraWide')
+})
 const contentStyle = computed(() => {
   const preset = CHAT_WIDTH_PRESETS[chatWidth.value]
   return {
@@ -1396,8 +1413,8 @@ const contentStyle = computed(() => {
   }
 })
 const telegramStatusText = computed(() => {
-  if (!telegramStatus.value.configured) return 'Not configured'
-  const base = telegramStatus.value.active ? 'Online' : 'Configured (offline)'
+  if (!telegramStatus.value.configured) return t('settings.notConfigured')
+  const base = telegramStatus.value.active ? 'Online' : t('settings.configured')
   const allowlist = telegramStatus.value.allowAllUsers
     ? 'allow all users'
     : `${telegramStatus.value.allowedUsers} allowed user(s)`
@@ -1636,16 +1653,16 @@ function isRemoveVisible(account: UiAccountEntry): boolean {
 }
 
 function getAccountSwitchLabel(account: UiAccountEntry): string {
-  if (isAccountUnavailable(account)) return 'Unavailable'
-  if (account.isActive) return 'Active'
-  if (isSwitchingAccounts.value) return 'Switching…'
-  return 'Switch'
+  if (isAccountUnavailable(account)) return t('settings.unavailable')
+  if (account.isActive) return t('settings.active')
+  if (isSwitchingAccounts.value) return t('settings.switching')
+  return t('settings.switch_')
 }
 
 function getAccountRemoveLabel(account: UiAccountEntry): string {
-  if (removingAccountId.value === account.accountId) return 'Removing…'
-  if (isRemoveConfirmationActive(account)) return 'Click again to remove'
-  return 'Remove'
+  if (removingAccountId.value === account.accountId) return t('settings.removing')
+  if (isRemoveConfirmationActive(account)) return t('settings.removeConfirm')
+  return t('settings.remove')
 }
 
 function onAccountCardPointerEnter(accountId: string): void {
@@ -2699,6 +2716,14 @@ function cycleDarkMode(): void {
   applyDarkMode()
 }
 
+const LANGUAGE_KEY = 'codex-web-local.language.v1'
+const { locale, t } = useI18n()
+
+function onLanguageChange(value: string): void {
+  locale.value = value
+  window.localStorage.setItem(LANGUAGE_KEY, value)
+}
+
 function cycleChatWidth(): void {
   const order: ChatWidthMode[] = ['standard', 'wide', 'extra-wide']
   const idx = order.indexOf(chatWidth.value)
diff --git a/src/components/content/AccountMenu.vue b/src/components/content/AccountMenu.vue
index 5a38dfe9..8839ed88 100644
--- a/src/components/content/AccountMenu.vue
+++ b/src/components/content/AccountMenu.vue
@@ -7,13 +7,13 @@
 
     <div v-if="isOpen" class="account-menu-panel">
       <div class="account-menu-header">
-        <p class="account-menu-title">Accounts</p>
+        <p class="account-menu-title">{{ $t('account.accounts') }}</p>
       </div>
 
       <p v-if="error" class="account-menu-error">{{ error }}</p>
 
       <p v-if="accounts.length === 0" class="account-menu-empty">
-        No saved accounts yet. Run `codex login`, then click reload.
+        {{ $t('account.noAccountsYet') }}
       </p>
 
       <div v-else class="account-menu-list">
@@ -24,7 +24,7 @@
           :class="{ 'is-active': account.isActive }"
         >
           <div class="account-menu-item-main">
-            <p class="account-menu-item-email">{{ account.email || 'Account' }}</p>
+            <p class="account-menu-item-email">{{ account.email || $t('account.accountFallback') }}</p>
             <p class="account-menu-item-meta">
               {{ formatMeta(account) }}
             </p>
@@ -35,7 +35,7 @@
             :disabled="isSwitching || account.isActive"
             @click="emit('switch', account.accountId)"
           >
-            {{ account.isActive ? 'Active' : isSwitching ? 'Switching…' : 'Switch' }}
+            {{ account.isActive ? $t('account.active') : isSwitching ? $t('account.switching') : $t('account.switch_') }}
           </button>
         </article>
       </div>
@@ -45,6 +45,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { UiAccountEntry } from '../../types/codex'
 
 const props = defineProps<{
@@ -58,12 +59,13 @@ const emit = defineEmits<{
   switch: [accountId: string]
 }>()
 
+const { t } = useI18n()
 const rootRef = ref<HTMLElement | null>(null)
 const isOpen = ref(false)
 
 const activeLabel = computed(() => {
   const active = props.accounts.find((account) => account.isActive) ?? null
-  if (!active) return 'Accounts'
+  if (!active) return t('account.accounts')
   return active.email || shortAccountId(active.accountId)
 })
 
diff --git a/src/components/content/ComposerDropdown.vue b/src/components/content/ComposerDropdown.vue
index bb595192..97f8332b 100644
--- a/src/components/content/ComposerDropdown.vue
+++ b/src/components/content/ComposerDropdown.vue
@@ -90,8 +90,11 @@ const selectedLabel = computed(() => {
 
 const openDirection = computed(() => props.openDirection ?? 'down')
 const enableSearch = computed(() => props.enableSearch === true)
-const searchPlaceholderText = computed(() => props.searchPlaceholder?.trim() || 'Quick search projects')
-const emptyText = computed(() => props.emptyLabel?.trim() || 'No results')
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const searchPlaceholderText = computed(() => props.searchPlaceholder?.trim() || t('composer.searchQuickProjects'))
+const emptyText = computed(() => props.emptyLabel?.trim() || t('common.noResults'))
 const filteredOptions = computed(() => {
   const query = searchQuery.value.trim().toLowerCase()
   if (!query) return props.options
diff --git a/src/components/content/ComposerRuntimeDropdown.vue b/src/components/content/ComposerRuntimeDropdown.vue
index ac89218d..3ab0cca2 100644
--- a/src/components/content/ComposerRuntimeDropdown.vue
+++ b/src/components/content/ComposerRuntimeDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="runtime-toggle" role="radiogroup" aria-label="Continue in">
+  <div class="runtime-toggle" role="radiogroup" :aria-label="$t('composer.continueIn')">
     <button
       v-for="option in options"
       :key="option.value"
@@ -17,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import IconTablerFolder from '../icons/IconTablerFolder.vue'
 import IconTablerGitFork from '../icons/IconTablerGitFork.vue'
 
@@ -30,10 +31,14 @@ const emit = defineEmits<{
   'update:modelValue': [value: RuntimeMode]
 }>()
 
-const options = [
-  { value: 'local' as const, label: 'Local project', icon: IconTablerFolder },
-  { value: 'worktree' as const, label: 'New worktree', icon: IconTablerGitFork },
-]
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const options = computed(() => [
+  { value: 'local' as const, label: t('composer.runtimeLocal'), icon: IconTablerFolder },
+  { value: 'worktree' as const, label: t('composer.runtimeWorktree'), icon: IconTablerGitFork },
+])
 
 function onSelect(value: RuntimeMode): void {
   emit('update:modelValue', value)
diff --git a/src/components/content/ComposerSearchDropdown.vue b/src/components/content/ComposerSearchDropdown.vue
index 9058069c..86b24487 100644
--- a/src/components/content/ComposerSearchDropdown.vue
+++ b/src/components/content/ComposerSearchDropdown.vue
@@ -50,13 +50,14 @@
           </button>
         </li>
       </ul>
-      <div v-else class="search-dropdown-empty">No results</div>
+      <div v-else class="search-dropdown-empty">{{ $t('common.noResults') }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import IconTablerChevronDown from '../icons/IconTablerChevronDown.vue'
 
 export type SearchDropdownOption = {
@@ -78,6 +79,7 @@ const emit = defineEmits<{
   toggle: [value: string, checked: boolean]
 }>()
 
+const { t } = useI18n()
 const rootRef = ref<HTMLElement | null>(null)
 const menuRef = ref<HTMLElement | null>(null)
 const searchRef = ref<HTMLInputElement | null>(null)
@@ -89,12 +91,12 @@ const openDirection = computed(() => props.openDirection ?? 'down')
 const selected = computed(() => new Set(props.selectedValues))
 
 const displayLabel = computed(() => {
-  if (props.selectedValues.length === 0) return props.placeholder || 'Select...'
+  if (props.selectedValues.length === 0) return props.placeholder || t('composer.selectDefault')
   if (props.selectedValues.length === 1) {
     const opt = props.options.find((o) => o.value === props.selectedValues[0])
-    return opt?.label || props.placeholder || 'Select...'
+    return opt?.label || props.placeholder || t('composer.selectDefault')
   }
-  return `${props.selectedValues.length} selected`
+  return t('composer.nSelected', { count: props.selectedValues.length })
 })
 
 const filtered = computed(() => {
diff --git a/src/components/content/ComposerSkillPicker.vue b/src/components/content/ComposerSkillPicker.vue
index 22623da9..e11af41c 100644
--- a/src/components/content/ComposerSkillPicker.vue
+++ b/src/components/content/ComposerSkillPicker.vue
@@ -6,7 +6,7 @@
         v-model="query"
         class="skill-picker-search"
         type="text"
-        placeholder="Search skills..."
+        :placeholder="$t('composer.searchSkills')"
         @keydown.escape.prevent="$emit('close')"
         @keydown.enter.prevent="selectHighlighted"
         @keydown.arrow-down.prevent="moveHighlight(1)"
@@ -27,7 +27,7 @@
         </button>
       </li>
     </ul>
-    <div v-else class="skill-picker-empty">No skills found</div>
+    <div v-else class="skill-picker-empty">{{ $t('composer.noSkillsFound') }}</div>
   </div>
 </template>
 
diff --git a/src/components/content/QueuedMessages.vue b/src/components/content/QueuedMessages.vue
index a839a2a1..1b616cc6 100644
--- a/src/components/content/QueuedMessages.vue
+++ b/src/components/content/QueuedMessages.vue
@@ -8,9 +8,9 @@
       </svg>
       <span class="queued-row-text">{{ getMessagePreview(msg) }}</span>
       <div class="queued-row-actions">
-        <button class="queued-row-edit" type="button" title="Edit queued message" @click="$emit('edit', msg.id)">Edit</button>
-        <button class="queued-row-steer" type="button" title="Send now without interrupting work" @click="$emit('steer', msg.id)">Steer</button>
-        <button class="queued-row-delete" type="button" aria-label="Delete queued message" title="Delete queued message" @click="$emit('delete', msg.id)">
+        <button class="queued-row-edit" type="button" :title="$t('queue.editQueued')" @click="$emit('edit', msg.id)">{{ $t('queue.editButton') }}</button>
+        <button class="queued-row-steer" type="button" :title="$t('queue.steerNow')" @click="$emit('steer', msg.id)">{{ $t('queue.steerButton') }}</button>
+        <button class="queued-row-delete" type="button" :aria-label="$t('queue.deleteQueued')" :title="$t('queue.deleteQueued')" @click="$emit('delete', msg.id)">
           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
diff --git a/src/components/content/ReviewPane.vue b/src/components/content/ReviewPane.vue
index fe0ebcfe..f22eff7f 100644
--- a/src/components/content/ReviewPane.vue
+++ b/src/components/content/ReviewPane.vue
@@ -2,7 +2,7 @@
   <section class="review-pane" :class="{ 'is-mobile': isMobile }" @click.stop>
     <header class="review-pane-header">
       <div class="review-pane-heading">
-        <p class="review-pane-eyebrow">Review</p>
+        <p class="review-pane-eyebrow">{{ $t('review.eyebrow') }}</p>
         <p class="review-pane-title">{{ headerTitle }}</p>
       </div>
       <div class="review-pane-header-actions">
@@ -12,9 +12,9 @@
           class="review-pane-mobile-files-button"
           @click="isFileSheetOpen = true"
         >
-          Files
+          {{ $t('common.files') }}
         </button>
-        <button type="button" class="review-pane-close" aria-label="Close review pane" @click="$emit('close')">
+        <button type="button" class="review-pane-close" :aria-label="$t('review.closePane')" @click="$emit('close')">
           <IconTablerX class="icon-svg" />
         </button>
       </div>
@@ -38,7 +38,7 @@
 
       <div class="review-pane-toolbar-controls">
         <div class="review-pane-control-cluster">
-          <span class="review-pane-control-label">Compare</span>
+          <span class="review-pane-control-label">{{ $t('review.compare') }}</span>
           <div class="review-pane-segmented">
             <button
               type="button"
@@ -46,7 +46,7 @@
               :data-active="activeScope === 'workspace'"
               @click="activeScope = 'workspace'"
             >
-              Workspace
+              {{ $t('review.workspace') }}
             </button>
             <button
               type="button"
@@ -55,13 +55,13 @@
               :disabled="!snapshot?.baseBranch"
               @click="activeScope = 'baseBranch'"
             >
-              Base branch
+              {{ $t('review.baseBranch') }}
             </button>
           </div>
         </div>
 
         <div v-if="activeScope === 'baseBranch' && snapshot?.baseBranchOptions.length" class="review-pane-control-cluster">
-          <span class="review-pane-control-label">Branch</span>
+          <span class="review-pane-control-label">{{ $t('review.branch') }}</span>
           <label class="review-pane-branch-select-wrap">
             <select
               v-model="selectedBaseBranch"
@@ -79,7 +79,7 @@
         </div>
 
         <div v-if="activeScope === 'workspace'" class="review-pane-control-cluster">
-          <span class="review-pane-control-label">Changes</span>
+          <span class="review-pane-control-label">{{ $t('review.changes') }}</span>
           <div class="review-pane-segmented">
             <button
               type="button"
@@ -87,7 +87,7 @@
               :data-active="workspaceView === 'unstaged'"
               @click="workspaceView = 'unstaged'"
             >
-              Unstaged
+              {{ $t('review.unstaged') }}
             </button>
             <button
               type="button"
@@ -95,7 +95,7 @@
               :data-active="workspaceView === 'staged'"
               @click="workspaceView = 'staged'"
             >
-              Staged
+              {{ $t('review.staged') }}
             </button>
           </div>
         </div>
@@ -108,10 +108,10 @@
           :disabled="!canRunReview || isRunningReview"
           @click="runReview"
         >
-          {{ isRunningReview ? 'Reviewing…' : 'Run review' }}
+          {{ isRunningReview ? $t('review.reviewing') : $t('review.runReview') }}
         </button>
         <button type="button" class="review-pane-refresh" :disabled="isLoadingSnapshot" @click="reloadAll">
-          Refresh
+          {{ $t('common.refresh') }}
         </button>
       </div>
     </div>
@@ -121,34 +121,34 @@
     </div>
 
     <div v-if="snapshot" class="review-pane-meta">
-      <span>{{ snapshot.summary.fileCount }} files</span>
+      <span>{{ $t('review.filesCount', { count: snapshot.summary.fileCount }) }}</span>
       <span class="review-pane-summary-pill review-pane-summary-pill-add">+{{ snapshot.summary.addedLineCount }}</span>
       <span class="review-pane-summary-pill review-pane-summary-pill-remove">-{{ snapshot.summary.removedLineCount }}</span>
       <span v-if="snapshot.headBranch">{{ snapshot.headBranch }}</span>
-      <span v-if="activeScope === 'baseBranch' && snapshot.baseBranch">vs {{ snapshot.baseBranch }}</span>
+      <span v-if="activeScope === 'baseBranch' && snapshot.baseBranch">{{ $t('review.vs', { branch: snapshot.baseBranch }) }}</span>
     </div>
 
     <div v-if="activeTab === 'changes'" class="review-pane-content">
       <template v-if="!snapshot">
         <div class="review-pane-empty">
-          <p class="review-pane-empty-title">Loading review state</p>
+          <p class="review-pane-empty-title">{{ $t('review.loadingReviewState') }}</p>
         </div>
       </template>
 
       <template v-else-if="!snapshot.isGitRepo">
         <div class="review-pane-empty">
-          <p class="review-pane-empty-title">This folder is not a Git repository</p>
-          <p class="review-pane-empty-text">Initialize Git to review local changes and run Codex review.</p>
+          <p class="review-pane-empty-title">{{ $t('review.notGitRepo') }}</p>
+          <p class="review-pane-empty-text">{{ $t('review.notGitRepoDesc') }}</p>
           <button type="button" class="review-pane-primary-cta" :disabled="isInitializingGit" @click="initializeGit">
-            {{ isInitializingGit ? 'Initializing…' : 'Initialize Git' }}
+            {{ isInitializingGit ? $t('review.initializing') : $t('review.initializeGit') }}
           </button>
         </div>
       </template>
 
       <template v-else-if="activeScope === 'baseBranch' && !snapshot.baseBranch">
         <div class="review-pane-empty">
-          <p class="review-pane-empty-title">Base branch unavailable</p>
-          <p class="review-pane-empty-text">Could not resolve `origin/HEAD`, `main`, or `master` for this repository.</p>
+          <p class="review-pane-empty-title">{{ $t('review.baseBranchUnavailable') }}</p>
+          <p class="review-pane-empty-text">{{ $t('review.baseBranchUnavailableDesc') }}</p>
         </div>
       </template>
 
@@ -167,9 +167,9 @@
         </div>
 
         <div v-if="!snapshot.files.length" class="review-pane-empty">
-          <p class="review-pane-empty-title">No changes in this scope</p>
+          <p class="review-pane-empty-title">{{ $t('review.noChangesInScope') }}</p>
           <p class="review-pane-empty-text">
-            {{ activeScope === 'workspace' ? 'Your current workspace is clean.' : 'No merge diff found against the base branch.' }}
+            {{ activeScope === 'workspace' ? $t('review.workspaceClean') : $t('review.noMergeDiff') }}
           </p>
         </div>
 
@@ -221,7 +221,7 @@
             class="review-pane-resizer"
             role="separator"
             aria-orientation="vertical"
-            aria-label="Resize file list"
+            :aria-label="$t('review.resizeFileList')"
             @pointerdown="onResizerPointerDown"
           ></div>
 
@@ -252,7 +252,7 @@
               </div>
 
               <div v-if="selectedFile.hunks.length === 0" class="review-pane-raw-diff">
-                <pre>{{ selectedFile.diff || 'No unified diff available.' }}</pre>
+                <pre>{{ selectedFile.diff || $t('review.noUnifiedDiff') }}</pre>
               </div>
 
               <div v-else class="review-pane-hunks">
@@ -306,7 +306,7 @@
 
     <div v-else class="review-pane-findings">
       <div v-if="currentReviewResult?.summary" class="review-pane-summary-card">
-        <p class="review-pane-summary-title">Summary</p>
+        <p class="review-pane-summary-title">{{ $t('review.summary') }}</p>
         <pre class="review-pane-summary-text">{{ currentReviewResult.summary }}</pre>
       </div>
 
@@ -327,9 +327,9 @@
       </div>
 
       <div v-else class="review-pane-empty">
-        <p class="review-pane-empty-title">No structured findings yet</p>
+        <p class="review-pane-empty-title">{{ $t('review.noFindings') }}</p>
         <p class="review-pane-empty-text">
-          {{ currentReviewResult?.summary ? 'The latest review only returned summary text.' : 'Run review to populate this pane.' }}
+          {{ currentReviewResult?.summary ? $t('review.noFindingsSummaryOnly') : $t('review.noFindingsRun') }}
         </p>
       </div>
     </div>
@@ -343,7 +343,7 @@
         <div class="review-pane-sheet" @click.stop>
           <div class="review-pane-sheet-handle" aria-hidden="true"></div>
           <div class="review-pane-sheet-header">
-            <p class="review-pane-sheet-title">Changed files</p>
+            <p class="review-pane-sheet-title">{{ $t('review.changedFiles') }}</p>
             <p class="review-pane-sheet-count">{{ snapshot.files.length }}</p>
           </div>
           <div class="review-pane-sheet-list">
@@ -395,6 +395,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import {
   applyReviewAction,
   getReviewSnapshot,
@@ -429,6 +430,7 @@ defineEmits<{
 }>()
 
 const { isMobile } = useMobile()
+const { t } = useI18n()
 
 const activeTab = ref<UiReviewTab>('changes')
 const activeScope = ref<UiReviewScope>('workspace')
@@ -452,10 +454,10 @@ const hunkRefs = new Map<string, HTMLElement>()
 let stopNotifications: (() => void) | null = null
 let stopResizeTracking: (() => void) | null = null
 
-const reviewTabs = [
-  { value: 'changes' as const, label: 'Changes' },
-  { value: 'findings' as const, label: 'Findings' },
-]
+const reviewTabs = computed(() => [
+  { value: 'changes' as const, label: t('review.tabChanges') },
+  { value: 'findings' as const, label: t('review.tabFindings') },
+])
 
 type ReviewTreeFolderNode = {
   kind: 'folder'
@@ -497,11 +499,11 @@ const selectedFile = computed(() => snapshot.value?.files.find((file) => file.id
 const folderExpansionState = ref<Record<string, boolean>>({})
 
 const headerTitle = computed(() => {
-  if (!snapshot.value?.isGitRepo) return 'Repository review'
+  if (!snapshot.value?.isGitRepo) return t('review.repositoryReview')
   if (activeScope.value === 'workspace') {
-    return workspaceView.value === 'staged' ? 'Staged changes' : 'Workspace changes'
+    return workspaceView.value === 'staged' ? t('review.stagedChanges') : t('review.workspaceChanges')
   }
-  return snapshot.value?.baseBranch ? `Against ${snapshot.value.baseBranch}` : 'Base branch'
+  return snapshot.value?.baseBranch ? t('review.againstBranch', { branch: snapshot.value.baseBranch }) : t('review.baseBranch')
 })
 
 const canRunReview = computed(() => (
@@ -522,31 +524,31 @@ const showRowActions = computed(() => showBulkActions.value && !isApplyingAction
 
 const bulkActions = computed(() => {
   if (workspaceView.value === 'staged') {
-    return [{ value: 'unstage' as UiReviewAction, label: 'Unstage all' }]
+    return [{ value: 'unstage' as UiReviewAction, label: t('review.unstageAll') }]
   }
   return [
-    { value: 'stage' as UiReviewAction, label: 'Stage all' },
-    { value: 'revert' as UiReviewAction, label: 'Revert all' },
+    { value: 'stage' as UiReviewAction, label: t('review.stageAll') },
+    { value: 'revert' as UiReviewAction, label: t('review.revertAll') },
   ]
 })
 
 const fileActions = computed(() => {
   if (workspaceView.value === 'staged') {
-    return [{ value: 'unstage' as UiReviewAction, label: 'Unstage file' }]
+    return [{ value: 'unstage' as UiReviewAction, label: t('review.unstageFile') }]
   }
   return [
-    { value: 'stage' as UiReviewAction, label: 'Stage file' },
-    { value: 'revert' as UiReviewAction, label: 'Revert file' },
+    { value: 'stage' as UiReviewAction, label: t('review.stageFile') },
+    { value: 'revert' as UiReviewAction, label: t('review.revertFile') },
   ]
 })
 
 const hunkActions = computed(() => {
   if (workspaceView.value === 'staged') {
-    return [{ value: 'unstage' as UiReviewAction, label: 'Unstage hunk' }]
+    return [{ value: 'unstage' as UiReviewAction, label: t('review.unstageHunk') }]
   }
   return [
-    { value: 'stage' as UiReviewAction, label: 'Stage hunk' },
-    { value: 'revert' as UiReviewAction, label: 'Revert hunk' },
+    { value: 'stage' as UiReviewAction, label: t('review.stageHunk') },
+    { value: 'revert' as UiReviewAction, label: t('review.revertHunk') },
   ]
 })
 
@@ -757,10 +759,10 @@ function treeIndentStyle(depth: number): Record<string, string> {
 }
 
 function formatOperation(operation: string): string {
-  if (operation === 'add') return 'Added'
-  if (operation === 'delete') return 'Deleted'
-  if (operation === 'rename') return 'Renamed'
-  return 'Modified'
+  if (operation === 'add') return t('review.operationAdded')
+  if (operation === 'delete') return t('review.operationDeleted')
+  if (operation === 'rename') return t('review.operationRenamed')
+  return t('review.operationModified')
 }
 
 function bindHunkRef(hunkId: string, element: unknown): void {
@@ -904,8 +906,8 @@ async function runReview(): Promise<void> {
   if (!canRunReview.value || isRunningReview.value) return
   reviewError.value = ''
   reviewStatusLabel.value = activeScope.value === 'workspace'
-    ? 'Reviewing current changes'
-    : `Reviewing against ${snapshot.value?.baseBranch ?? 'base branch'}`
+    ? t('review.reviewingChanges')
+    : t('review.reviewingAgainst', { branch: snapshot.value?.baseBranch ?? t('review.baseBranch') })
   isRunningReview.value = true
   pendingReviewKey.value = reviewKey.value
 
diff --git a/src/components/content/SkillCard.vue b/src/components/content/SkillCard.vue
index 405b2de7..8d02639d 100644
--- a/src/components/content/SkillCard.vue
+++ b/src/components/content/SkillCard.vue
@@ -18,8 +18,8 @@
       <div class="skill-card-info">
         <div class="skill-card-header">
           <span class="skill-card-name">{{ skill.displayName || skill.name }}</span>
-          <span v-if="skill.installed && skill.enabled === false" class="skill-card-badge-disabled">Disabled</span>
-          <span v-else-if="skill.installed" class="skill-card-badge">Installed</span>
+          <span v-if="skill.installed && skill.enabled === false" class="skill-card-badge-disabled">{{ $t('skills.disabled') }}</span>
+          <span v-else-if="skill.installed" class="skill-card-badge">{{ $t('skills.installed') }}</span>
         </div>
         <span class="skill-card-owner">{{ skill.owner }}</span>
       </div>
@@ -27,7 +27,7 @@
         v-if="skill.installed && skillDirPath"
         class="skill-card-browse"
         type="button"
-        title="Browse files"
+        :title="$t('skills.browseFiles')"
         @click.stop="onBrowse"
       >
         <IconTablerFolder class="skill-card-browse-icon" />
diff --git a/src/components/content/SkillDetailModal.vue b/src/components/content/SkillDetailModal.vue
index dfc693c8..c9294215 100644
--- a/src/components/content/SkillDetailModal.vue
+++ b/src/components/content/SkillDetailModal.vue
@@ -14,7 +14,7 @@
             <div class="sdm-title-col">
               <div class="sdm-title-row">
                 <h3 class="sdm-title">{{ skill.displayName || skill.name }}</h3>
-                <span v-if="skill.installed && !effectiveEnabled" class="sdm-badge-disabled">Disabled</span>
+                <span v-if="skill.installed && !effectiveEnabled" class="sdm-badge-disabled">{{ $t('skills.disabled') }}</span>
               </div>
               <span class="sdm-owner">{{ skill.owner }}</span>
             </div>
@@ -27,10 +27,10 @@
         <div class="sdm-body">
           <p v-if="effectiveDescription" class="sdm-desc">{{ effectiveDescription }}</p>
 
-          <div v-if="isLoadingReadme" class="sdm-readme-loading">Loading skill contents...</div>
+          <div v-if="isLoadingReadme" class="sdm-readme-loading">{{ $t('skills.loadingContents') }}</div>
           <div v-else-if="readmeContent" class="sdm-readme" v-html="renderedReadme"></div>
 
-          <a class="sdm-link" :href="skill.url" target="_blank" rel="noopener noreferrer">View on GitHub</a>
+          <a class="sdm-link" :href="skill.url" target="_blank" rel="noopener noreferrer">{{ $t('skills.viewOnGithub') }}</a>
         </div>
 
         <div class="sdm-footer">
@@ -42,7 +42,7 @@
               :disabled="isActing"
               @click="onUninstall"
             >
-              {{ props.isUninstalling ? 'Uninstalling...' : 'Uninstall' }}
+              {{ props.isUninstalling ? $t('skills.uninstalling') : $t('skills.uninstall') }}
             </button>
             <button
               v-else
@@ -51,7 +51,7 @@
               :disabled="isActing"
               @click="onInstall"
             >
-              {{ props.isInstalling ? 'Installing...' : 'Install' }}
+              {{ props.isInstalling ? $t('skills.installing') : $t('skills.install') }}
             </button>
 
             <button
@@ -61,7 +61,7 @@
               :disabled="isActing"
               @click="onToggleEnabled"
             >
-              {{ effectiveEnabled ? 'Disable' : 'Enable' }}
+              {{ effectiveEnabled ? $t('skills.disable') : $t('skills.enable') }}
             </button>
 
             <button
@@ -70,7 +70,7 @@
               type="button"
               @click="onBrowseFiles"
             >
-              Browse files
+              {{ $t('skills.browseFiles') }}
             </button>
           </div>
         </div>
diff --git a/src/components/content/SkillsHub.vue b/src/components/content/SkillsHub.vue
index 18a344cb..55c4ef82 100644
--- a/src/components/content/SkillsHub.vue
+++ b/src/components/content/SkillsHub.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="skills-hub">
     <div class="skills-hub-header">
-      <h2 class="skills-hub-title">Skills Hub</h2>
-      <p class="skills-hub-subtitle">Browse and discover skills from the OpenClaw community</p>
+      <h2 class="skills-hub-title">{{ $t('skills.hubTitle') }}</h2>
+      <p class="skills-hub-subtitle">{{ $t('skills.hubSubtitle') }}</p>
     </div>
 
     <div class="skills-sync-panel">
       <div class="skills-sync-header">
-        <strong>Skills Sync (GitHub)</strong>
+        <strong>{{ $t('skills.syncTitle') }}</strong>
         <a
           v-if="syncStatus.configured && githubRepoUrl"
           class="skills-sync-badge skills-sync-badge-link"
@@ -15,36 +15,36 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          Connected: {{ syncStatus.repoOwner }}/{{ syncStatus.repoName }}
+          {{ $t('skills.connected') }}: {{ syncStatus.repoOwner }}/{{ syncStatus.repoName }}
         </a>
-        <span v-else-if="syncStatus.loggedIn" class="skills-sync-badge">Logged in as {{ syncStatus.githubUsername }}</span>
-        <span v-else class="skills-sync-badge">Not connected</span>
+        <span v-else-if="syncStatus.loggedIn" class="skills-sync-badge">{{ $t('skills.loggedInAs', { username: syncStatus.githubUsername }) }}</span>
+        <span v-else class="skills-sync-badge">{{ $t('skills.notConnected') }}</span>
       </div>
       <div class="skills-sync-meta">
-        <span>Startup: {{ syncStatus.startup.mode }}</span>
-        <span>Branch: {{ syncStatus.startup.branch }}</span>
-        <span>Action: {{ syncStatus.startup.lastAction }}</span>
+        <span>{{ $t('skills.startup') }}: {{ syncStatus.startup.mode }}</span>
+        <span>{{ $t('review.branch') }}: {{ syncStatus.startup.branch }}</span>
+        <span>{{ $t('skills.actionLabel') }}: {{ syncStatus.startup.lastAction }}</span>
       </div>
       <div v-if="syncStatus.startup.lastError" class="skills-sync-error">
         {{ syncStatus.startup.lastError }}
       </div>
       <div v-if="syncActionStatus" class="skills-sync-meta">
-        <span>Manual sync: {{ syncActionStatus }}</span>
+        <span>{{ $t('skills.manualSync') }}: {{ syncActionStatus }}</span>
       </div>
       <div v-if="syncActionError" class="skills-sync-error">
         {{ syncActionError }}
       </div>
       <div v-if="deviceLogin" class="skills-sync-device">
-        <span>Open <a :href="deviceLogin.verification_uri" target="_blank" rel="noreferrer">GitHub device login</a> and enter code:</span>
+        <span>Open <a :href="deviceLogin.verification_uri" target="_blank" rel="noreferrer">{{ $t('skills.githubDeviceLogin') }}</a> and enter code:</span>
         <code>{{ deviceLogin.user_code }}</code>
       </div>
       <div class="skills-sync-actions">
-        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubFirebaseLogin">Login with GitHub</button>
-        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubLogin">Device Login</button>
-        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="logoutGithub" :disabled="isSyncActionInFlight">Logout GitHub</button>
-        <button class="skills-hub-sort" type="button" @click="startupSkillsSync" :disabled="isSyncActionInFlight">{{ isStartupSyncInFlight ? 'Syncing...' : 'Startup Sync' }}</button>
-        <button class="skills-hub-sort" type="button" @click="pullSkillsSync" :disabled="isSyncActionInFlight">{{ isPullInFlight ? 'Pulling...' : 'Pull' }}</button>
-        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="pushSkillsSync" :disabled="!syncStatus.configured || isSyncActionInFlight">{{ isPushInFlight ? 'Pushing...' : 'Push' }}</button>
+        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubFirebaseLogin">{{ $t('skills.loginWithGithub') }}</button>
+        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubLogin">{{ $t('skills.deviceLogin') }}</button>
+        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="logoutGithub" :disabled="isSyncActionInFlight">{{ $t('skills.logoutGithub') }}</button>
+        <button class="skills-hub-sort" type="button" @click="startupSkillsSync" :disabled="isSyncActionInFlight">{{ isStartupSyncInFlight ? $t('skills.syncing') : $t('skills.startupSync') }}</button>
+        <button class="skills-hub-sort" type="button" @click="pullSkillsSync" :disabled="isSyncActionInFlight">{{ isPullInFlight ? $t('skills.pulling') : $t('skills.pull') }}</button>
+        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="pushSkillsSync" :disabled="!syncStatus.configured || isSyncActionInFlight">{{ isPushInFlight ? $t('skills.pushing') : $t('skills.push') }}</button>
       </div>
     </div>
 
@@ -52,7 +52,7 @@
 
     <div v-if="filteredInstalled.length > 0" class="skills-hub-section">
       <button class="skills-hub-section-toggle" type="button" @click="isInstalledOpen = !isInstalledOpen">
-        <span class="skills-hub-section-title">Installed ({{ filteredInstalled.length }})</span>
+        <span class="skills-hub-section-title">{{ $t('skills.installedCount', { count: filteredInstalled.length }) }}</span>
         <IconTablerChevronRight class="skills-hub-section-chevron" :class="{ 'is-open': isInstalledOpen }" />
       </button>
       <div v-if="isInstalledOpen" class="skills-hub-grid">
@@ -73,11 +73,11 @@
           v-model="query"
           class="skills-hub-search"
           type="text"
-          placeholder="Search skills... (e.g. flight, docker, react)"
+          :placeholder="$t('skills.searchPlaceholder')"
           @keyup.enter.prevent="onSearchSubmit"
         />
-        <button class="skills-hub-search-btn" type="button" @click="onSearchSubmit">Search</button>
-        <span v-if="totalCount > 0" class="skills-hub-count">{{ totalCount }} skills</span>
+        <button class="skills-hub-search-btn" type="button" @click="onSearchSubmit">{{ $t('common.search') }}</button>
+        <span v-if="totalCount > 0" class="skills-hub-count">{{ $t('skills.skillsCount', { count: totalCount }) }}</span>
       </div>
       <button class="skills-hub-sort" type="button" @click="toggleSort">
         {{ sortLabel }}
@@ -85,7 +85,7 @@
     </div>
 
     <div class="skills-hub-section">
-      <div v-if="isLoading" class="skills-hub-loading">Loading skills...</div>
+      <div v-if="isLoading" class="skills-hub-loading">{{ $t('skills.loadingSkills') }}</div>
       <div v-else-if="error" class="skills-hub-error">{{ error }}</div>
       <template v-else>
         <div v-if="browseSkills.length > 0" class="skills-hub-grid">
@@ -96,7 +96,7 @@
             @select="(skill) => openDetail(skill as HubSkill)"
           />
         </div>
-        <div v-else-if="activeQuery.trim()" class="skills-hub-empty">No skills found for "{{ activeQuery }}"</div>
+        <div v-else-if="activeQuery.trim()" class="skills-hub-empty">{{ $t('skills.noSkillsFound', { query: activeQuery }) }}</div>
       </template>
     </div>
 
@@ -115,6 +115,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import IconTablerSearch from '../icons/IconTablerSearch.vue'
 import IconTablerChevronRight from '../icons/IconTablerChevronRight.vue'
 import SkillCard from './SkillCard.vue'
@@ -147,7 +148,8 @@ const emit = defineEmits<{
   'skills-changed': []
 }>()
 
-const sortLabel = computed(() => sortMode.value === 'date' ? 'Newest' : 'A-Z')
+const { t } = useI18n()
+const sortLabel = computed(() => sortMode.value === 'date' ? t('skills.newest') : t('skills.az'))
 const toastClass = computed(() => toast.value?.type === 'error' ? 'skills-hub-toast-error' : 'skills-hub-toast-success')
 const currentDetailSkillKey = computed(() => `${detailSkill.value.owner}/${detailSkill.value.name}`)
 const isDetailInstalling = computed(() =>
@@ -289,7 +291,7 @@ async function handleInstall(skill: HubSkill): Promise<void> {
     installedSkills.value = [...installedSkills.value, installed]
     browseSkills.value = browseSkills.value.filter((s) => s.name !== skill.name)
     detailSkill.value = installed
-    showToast(`${skill.displayName || skill.name} skill installed`)
+    showToast(t('skills.skillInstalled', { name: skill.displayName || skill.name }))
     isDetailOpen.value = false
     clearCache()
     emit('skills-changed')
@@ -315,7 +317,7 @@ async function handleUninstall(skill: HubSkill): Promise<void> {
     if (skill.owner !== 'local') {
       browseSkills.value = [...browseSkills.value, { ...skill, installed: false, path: undefined, enabled: undefined }]
     }
-    showToast(`${skill.displayName || skill.name} skill uninstalled`)
+    showToast(t('skills.skillUninstalled', { name: skill.displayName || skill.name }))
     isDetailOpen.value = false
     clearCache()
     emit('skills-changed')
@@ -335,7 +337,7 @@ async function handleToggleEnabled(skill: HubSkill, enabled: boolean): Promise<v
     })
     if (!resp.ok) throw new Error('Failed to update skill')
     await fetch('/codex-api/skills-sync/push', { method: 'POST' })
-    showToast(`${skill.displayName || skill.name} skill ${enabled ? 'enabled' : 'disabled'}`)
+    showToast(enabled ? t('skills.skillEnabled', { name: skill.displayName || skill.name }) : t('skills.skillDisabled', { name: skill.displayName || skill.name }))
     await fetchSkills(activeQuery.value)
   } catch (e) {
     showToast(e instanceof Error ? e.message : 'Failed to update skill', 'error')
diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index 6c5cec8f..a1e18cd0 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -13,7 +13,7 @@
     >
       <div v-if="selectedImages.length > 0" class="thread-composer-attachments">
         <div v-for="image in selectedImages" :key="image.id" class="thread-composer-attachment">
-          <img class="thread-composer-attachment-image" :src="image.url" :alt="image.name || 'Selected image'" />
+          <img class="thread-composer-attachment-image" :src="image.url" :alt="image.name || $t('composer.selectedImage')" />
           <button
             class="thread-composer-attachment-remove"
             type="button"
@@ -83,7 +83,7 @@
         @drop="onInputDrop"
       >
         <div v-if="isDragActive" class="thread-composer-drop-overlay" aria-hidden="true">
-          <span class="thread-composer-drop-overlay-copy">Drop images or files</span>
+          <span class="thread-composer-drop-overlay-copy">{{ $t('composer.dropImagesOrFiles') }}</span>
         </div>
         <div v-if="isFileMentionOpen" class="thread-composer-file-mentions">
           <template v-if="fileMentionSuggestions.length > 0">
@@ -110,7 +110,7 @@
               </span>
             </button>
           </template>
-          <div v-else class="thread-composer-file-mention-empty">No matching files</div>
+          <div v-else class="thread-composer-file-mention-empty">{{ $t('composer.noMatchingFiles') }}</div>
         </div>
         <textarea
           ref="inputRef"
@@ -140,7 +140,7 @@
           <button
             class="thread-composer-attach-trigger"
             type="button"
-            aria-label="Add photos & files"
+            :aria-label="$t('composer.addPhotosFiles')"
             :disabled="isInteractionDisabled"
             @click="toggleAttachMenu"
           >
@@ -154,7 +154,7 @@
               :disabled="isInteractionDisabled"
               @click="triggerPhotoLibrary"
             >
-              Add photos & files
+              {{ $t('composer.addPhotosFiles') }}
             </button>
             <button
               class="thread-composer-attach-item"
@@ -162,7 +162,7 @@
               :disabled="isInteractionDisabled"
               @click="triggerFolderPicker"
             >
-              Add folder
+              {{ $t('composer.addFolder') }}
             </button>
             <button
               class="thread-composer-attach-item"
@@ -170,11 +170,11 @@
               :disabled="isInteractionDisabled"
               @click="triggerCameraCapture"
             >
-              Take photo
+              {{ $t('composer.takePhoto') }}
             </button>
             <div class="thread-composer-attach-separator" />
             <div class="thread-composer-attach-mode">
-              <span class="thread-composer-attach-mode-label">In-progress send</span>
+              <span class="thread-composer-attach-mode-label">{{ $t('composer.inProgressSend') }}</span>
               <div class="thread-composer-attach-mode-buttons">
                 <button
                   class="thread-composer-attach-mode-button"
@@ -183,7 +183,7 @@
                   :disabled="isInteractionDisabled"
                   @click="setActiveInProgressMode('steer')"
                 >
-                  Steer
+                  {{ $t('composer.steer') }}
                 </button>
                 <button
                   class="thread-composer-attach-mode-button"
@@ -192,7 +192,7 @@
                   :disabled="isInteractionDisabled"
                   @click="setActiveInProgressMode('queue')"
                 >
-                  Queue
+                  {{ $t('composer.queue') }}
                 </button>
               </div>
             </div>
@@ -208,7 +208,7 @@
               @click="onToggleSpeedMode"
             >
               <span class="thread-composer-attach-setting-copy">
-                <span class="thread-composer-attach-setting-label">Fast mode</span>
+                <span class="thread-composer-attach-setting-label">{{ $t('composer.fastMode') }}</span>
                 <span class="thread-composer-attach-setting-description">{{ speedModeDescription }}</span>
               </span>
               <span
@@ -230,8 +230,8 @@
               @click="toggleCollaborationMode"
             >
               <span class="thread-composer-attach-setting-copy">
-                <span class="thread-composer-attach-setting-label">Plan mode</span>
-                <span class="thread-composer-attach-setting-description">Agent proposes a plan before acting</span>
+                <span class="thread-composer-attach-setting-label">{{ $t('composer.planMode') }}</span>
+                <span class="thread-composer-attach-setting-description">{{ $t('composer.planModeDesc') }}</span>
               </span>
               <span
                 class="thread-composer-attach-switch"
@@ -315,8 +315,8 @@
             v-if="isTurnInProgress && !hasSubmitContent"
             class="thread-composer-stop"
             type="button"
-            :aria-label="isStopPending ? 'Saving thread before stop is available' : 'Stop'"
-            :title="isStopPending ? 'Saving thread before stop is available' : 'Stop'"
+            :aria-label="isStopPending ? $t('composer.stopPending') : $t('composer.stop')"
+            :title="isStopPending ? $t('composer.stopPending') : $t('composer.stop')"
             :disabled="disabled || !activeThreadId || isInterruptingTurn || isStopPending"
             @click="onInterrupt"
           >
@@ -328,8 +328,8 @@
             class="thread-composer-submit"
             :class="{ 'thread-composer-submit--queue': isTurnInProgress && activeInProgressMode === 'queue' }"
             type="button"
-            :aria-label="isTurnInProgress && activeInProgressMode === 'queue' ? 'Queue message' : 'Send message'"
-            :title="isTurnInProgress ? `Send as ${activeInProgressMode}` : 'Send'"
+            :aria-label="isTurnInProgress && activeInProgressMode === 'queue' ? $t('composer.queueMessage') : $t('composer.sendMessage')"
+            :title="isTurnInProgress ? $t('composer.sendAsMode', { mode: activeInProgressMode }) : $t('common.send')"
             :disabled="!canSubmit"
             @click="onSubmit(isTurnInProgress ? activeInProgressMode : 'steer')"
           >
@@ -371,6 +371,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type {
   CollaborationModeKind,
   CollaborationModeOption,
@@ -474,6 +475,7 @@ type AttachmentBatchStats = {
   failed: number
 }
 
+const { t } = useI18n()
 const CONTEXT_WINDOW_BASELINE_TOKENS = 12000
 const PASTED_TEXT_FILE_THRESHOLD = 2000
 
@@ -510,15 +512,15 @@ const {
   },
   onEmpty: () => {
     dictationFeedback.value = props.dictationClickToToggle
-      ? 'No speech detected. Click again after speaking.'
-      : 'No speech detected. Hold the mic and speak.'
+      ? t('composer.noSpeechClick')
+      : t('composer.noSpeechHold')
   },
   onError: (error) => {
     if (error instanceof DOMException && error.name === 'NotAllowedError') {
-      dictationFeedback.value = 'Microphone access was denied.'
+      dictationFeedback.value = t('composer.micDenied')
       return
     }
-    dictationFeedback.value = error instanceof Error ? error.message : 'Dictation failed.'
+    dictationFeedback.value = error instanceof Error ? error.message : t('composer.dictationFailed')
   },
 })
 const attachMenuRootRef = ref<HTMLElement | null>(null)
@@ -544,14 +546,14 @@ const isAndroid = typeof navigator !== 'undefined' && /Android/i.test(navigator.
 const DRAFT_STORAGE_PREFIX = 'codex-web-local.thread-draft.v1.'
 let lastActiveThreadId = ''
 
-const reasoningOptions: Array<{ value: ReasoningEffort; label: string }> = [
-  { value: 'none', label: 'None' },
-  { value: 'minimal', label: 'Minimal' },
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'high', label: 'High' },
-  { value: 'xhigh', label: 'Extra high' },
-]
+const reasoningOptions = computed<Array<{ value: ReasoningEffort; label: string }>>(() => [
+  { value: 'none', label: t('composer.reasoningNone') },
+  { value: 'minimal', label: t('composer.reasoningMinimal') },
+  { value: 'low', label: t('composer.reasoningLow') },
+  { value: 'medium', label: t('composer.reasoningMedium') },
+  { value: 'high', label: t('composer.reasoningHigh') },
+  { value: 'xhigh', label: t('composer.reasoningExtraHigh') },
+])
 function formatModelLabel(modelId: string): string {
   return modelId.trim().replace(/^gpt/i, 'GPT')
 }
@@ -607,11 +609,11 @@ const isSpeedToggleDisabled = computed(() =>
 )
 const speedModeDescription = computed(() => {
   if (props.isUpdatingSpeedMode) {
-    return 'Saving speed setting...'
+    return t('composer.fastModeSaving')
   }
   return props.selectedSpeedMode === 'fast'
-    ? 'About 1.5x faster, with credits used at 2x'
-    : 'Default speed with normal credit usage'
+    ? t('composer.fastModeDescOn')
+    : t('composer.fastModeDescOff')
 })
 const inProgressMode = computed<'steer' | 'queue'>(() =>
   props.inProgressSubmitMode === 'steer' ? 'steer' : 'queue',
@@ -619,8 +621,8 @@ const inProgressMode = computed<'steer' | 'queue'>(() =>
 const activeInProgressMode = ref<'steer' | 'queue'>(inProgressMode.value)
 const isDictationRecording = computed(() => dictationState.value === 'recording')
 const dictationButtonLabel = computed(() => {
-  if (dictationState.value === 'recording') return 'Stop dictation'
-  return props.dictationClickToToggle ? 'Click to dictate' : 'Hold to dictate'
+  if (dictationState.value === 'recording') return t('composer.stopDictation')
+  return props.dictationClickToToggle ? t('composer.clickToDictate') : t('composer.holdToDictate')
 })
 const dictationErrorText = computed(() =>
   dictationState.value === 'idle' ? dictationFeedback.value.trim() : '',
@@ -657,10 +659,10 @@ const dictationDurationLabel = computed(() => {
 
 const placeholderText = computed(() =>
   !props.activeThreadId
-    ? 'Select a thread to send a message'
+    ? t('composer.placeholderNoThread')
     : isPlanModeWaitingForModel.value
-      ? 'Loading models for plan mode...'
-      : 'Type a message... (@ for files, / for skills)',
+      ? t('composer.placeholderPlanMode')
+      : t('composer.placeholder'),
 )
 const hasSubmitContent = computed(() =>
   draft.value.trim().length > 0 || selectedImages.value.length > 0 || fileAttachments.value.length > 0,
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index 55e86f7e..1f26809c 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -1,12 +1,12 @@
 <template>
   <section class="conversation-root" @contextmenu.capture="onConversationContextMenu">
-    <p v-if="isLoading" class="conversation-loading">Loading messages...</p>
+    <p v-if="isLoading" class="conversation-loading">{{ $t('conversation.loadingMessages') }}</p>
 
     <p
       v-else-if="messages.length === 0 && pendingRequests.length === 0 && !liveOverlay"
       class="conversation-empty"
     >
-      No messages in this thread yet.
+      {{ $t('conversation.noMessages') }}
     </p>
 
     <ul v-else ref="conversationListRef" class="conversation-list" @scroll="onConversationScroll">
@@ -17,7 +17,7 @@
           :disabled="isLoadingMore"
           @click="loadMoreAbove"
         >
-          {{ isLoadingMore ? 'Loading…' : 'Load earlier messages' }}
+          {{ isLoadingMore ? $t('conversation.loadingEarlier') : $t('conversation.loadEarlier') }}
         </button>
       </li>
       <template v-for="message in visibleMessages" :key="message.id">
@@ -64,7 +64,7 @@
                     @click="toggleCommandExpand(cmd)"
                   >
                     <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
-                    <code class="cmd-label">{{ cmd.commandExecution?.command || '(command)' }}</code>
+                    <code class="cmd-label">{{ cmd.commandExecution?.command || $t('conversation.command') }}</code>
                     <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
                   </button>
                   <div
@@ -75,7 +75,7 @@
                       <pre
                         class="cmd-output"
                         :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
-                        v-text="cmd.commandExecution?.aggregatedOutput || '(no output)'"
+                        v-text="cmd.commandExecution?.aggregatedOutput || $t('conversation.noOutput')"
                       ></pre>
                     </div>
                   </div>
@@ -96,7 +96,7 @@
                 @click="toggleCommandExpand(message)"
               >
                 <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(message) }">▶</span>
-                <code class="cmd-label">{{ message.commandExecution?.command || '(command)' }}</code>
+                <code class="cmd-label">{{ message.commandExecution?.command || $t('conversation.command') }}</code>
                 <span class="cmd-status">{{ commandStatusLabel(message) }}</span>
               </button>
               <div
@@ -107,7 +107,7 @@
                   <pre
                     class="cmd-output"
                     :class="{ 'cmd-output-condensed': isCommandOutputCondensed(message) }"
-                    v-text="message.commandExecution?.aggregatedOutput || '(no output)'"
+                    v-text="message.commandExecution?.aggregatedOutput || $t('conversation.noOutput')"
                   ></pre>
                 </div>
               </div>
@@ -208,7 +208,7 @@
                       class="message-image-preview"
                       :class="{ 'message-generated-image-preview': message.messageType === 'imageView' }"
                       :src="imageUrl"
-                      :alt="message.messageType === 'imageView' ? 'Generated image' : 'Message image preview'"
+                      :alt="message.messageType === 'imageView' ? $t('conversation.generatedImage') : $t('conversation.imagePreview')"
                       loading="lazy"
                     />
                   </button>
@@ -257,7 +257,7 @@
                         @click="toggleCommandExpand(cmd)"
                       >
                         <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
-                        <code class="cmd-label">{{ cmd.commandExecution?.command || '(command)' }}</code>
+                        <code class="cmd-label">{{ cmd.commandExecution?.command || $t('conversation.command') }}</code>
                         <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
                       </button>
                       <div
@@ -268,7 +268,7 @@
                           <pre
                             class="cmd-output"
                             :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
-                            v-text="cmd.commandExecution?.aggregatedOutput || '(no output)'"
+                            v-text="cmd.commandExecution?.aggregatedOutput || $t('conversation.noOutput')"
                           ></pre>
                         </div>
                       </div>
@@ -277,8 +277,8 @@
                 </div>
                 <div v-else-if="isPlanMessage(message)" class="plan-card" :data-streaming="message.messageType === 'plan.live'">
                   <div class="plan-card-header">
-                    <p class="plan-card-title">Plan</p>
-                    <span v-if="message.messageType === 'plan.live'" class="plan-card-badge">Updating</span>
+                    <p class="plan-card-title">{{ $t('conversation.plan') }}</p>
+                    <span v-if="message.messageType === 'plan.live'" class="plan-card-badge">{{ $t('conversation.planUpdating') }}</span>
                   </div>
                   <div
                     v-if="readPlanExplanation(message)"
@@ -535,7 +535,7 @@
                       <img
                         class="message-image-preview message-markdown-image"
                         :src="block.url"
-                        :alt="block.alt || 'Embedded message image'"
+                        :alt="block.alt || $t('conversation.embeddedImage')"
                         loading="lazy"
                         @error="onMarkdownImageError(message.id, blockIndex)"
                       />
@@ -620,19 +620,19 @@
                   v-if="showEditMessageButton(message)"
                   type="button"
                   class="message-edit-button"
-                  aria-label="Edit this message"
-                  title="Edit this message"
+                  :aria-label="$t('conversation.editMessage')"
+                  :title="$t('conversation.editMessage')"
                   @click="editMessage(message.id)"
                 >
                   <IconTablerFilePencil class="icon-svg message-edit-icon" />
-                  <span class="message-edit-label">Edit message</span>
+                  <span class="message-edit-label">{{ $t('conversation.editMessage') }}</span>
                 </button>
                 <button
                   v-if="showForkResponseButton(message)"
                   type="button"
                   class="message-fork-button"
-                  aria-label="Fork thread from this response"
-                  title="Fork thread from this response"
+                  :aria-label="$t('conversation.forkThread')"
+                  :title="$t('conversation.forkThread')"
                   @click="forkResponse(message.id)"
                 >
                   <IconTablerGitFork class="icon-svg message-fork-icon" />
@@ -643,12 +643,12 @@
                   type="button"
                   class="message-copy-button"
                   :data-copied="copiedResponseAnchorId === message.id"
-                  :aria-label="copiedResponseAnchorId === message.id ? 'Response copied' : 'Copy response'"
-                  :title="copiedResponseAnchorId === message.id ? 'Response copied' : 'Copy response'"
+                  :aria-label="copiedResponseAnchorId === message.id ? $t('conversation.responseCopied') : $t('conversation.copyResponse')"
+                  :title="copiedResponseAnchorId === message.id ? $t('conversation.responseCopied') : $t('conversation.copyResponse')"
                   @click="copyResponse(message.id)"
                 >
                   <IconTablerCopy class="icon-svg message-copy-icon" />
-                  <span class="message-copy-label">{{ copiedResponseAnchorId === message.id ? 'Copied' : 'Copy' }}</span>
+                  <span class="message-copy-label">{{ copiedResponseAnchorId === message.id ? $t('common.copied') : $t('common.copy') }}</span>
                 </button>
               </div>
             </article>
@@ -679,8 +679,8 @@
       v-if="showJumpToLatestButton"
       type="button"
       class="jump-to-latest-button"
-      title="Jump to latest"
-      aria-label="Jump to latest output"
+      :title="$t('conversation.jumpToLatest')"
+      :aria-label="$t('conversation.jumpToLatestOutput')"
       @click="jumpToLatest"
     >
       <IconTablerArrowUp class="icon-svg jump-to-latest-icon" />
@@ -688,10 +688,10 @@
 
     <div v-if="modalImageUrl.length > 0" class="image-modal-backdrop" @click="closeImageModal">
       <div class="image-modal-content" @click.stop>
-        <button class="image-modal-close" type="button" aria-label="Close image preview" @click="closeImageModal">
+        <button class="image-modal-close" type="button" :aria-label="$t('conversation.closeImagePreview')" @click="closeImageModal">
           <IconTablerX class="icon-svg" />
         </button>
-        <img class="image-modal-image" :src="modalImageUrl" alt="Expanded message image" />
+        <img class="image-modal-image" :src="modalImageUrl" :alt="$t('conversation.expandedImage')" />
       </div>
     </div>
 
@@ -767,7 +767,7 @@
               >
                 {{ formatFileChangeCountLabel(diffViewerChanges.length) }}
               </button>
-              <button class="image-modal-close diff-viewer-close" type="button" aria-label="Close diff viewer" @click="closeDiffViewer">
+              <button class="image-modal-close diff-viewer-close" type="button" :aria-label="$t('conversation.closeDiffViewer')" @click="closeDiffViewer">
                 <IconTablerX class="icon-svg" />
               </button>
             </div>
@@ -839,6 +839,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { ThreadScrollState, UiFileChange, UiLiveOverlay, UiMessage, UiPlanStep, UiServerRequest } from '../../types/codex'
 import { useMobile } from '../../composables/useMobile'
 
@@ -850,6 +851,8 @@ import IconTablerX from '../icons/IconTablerX.vue'
 
 type HighlightJsModule = (typeof import('highlight.js/lib/common'))['default']
 
+const { t } = useI18n()
+
 const expandedCommandIds = ref<Set<string>>(new Set())
 const collapsedAutoCommandIds = ref<Set<string>>(new Set())
 const expandedCommandGroupIds = ref<Set<string>>(new Set())
@@ -1073,7 +1076,7 @@ function isCommandGroupExpanded(message: UiMessage): boolean {
 function commandGroupSummaryLabel(message: UiMessage): string {
   const commands = getCommandBlockForLatest(message)
   const count = commands.length
-  const latestCommand = message.commandExecution?.command?.trim() || '(command)'
+  const latestCommand = message.commandExecution?.command?.trim() || t('conversation.command')
   const countLabel = count === 1 ? '1 command' : `${count} commands`
   return `${countLabel} · latest: ${latestCommand}`
 }
@@ -1141,11 +1144,11 @@ function commandStatusLabel(message: UiMessage): string {
   if (!ce) return ''
   const compact = isCommandCompact(message)
   switch (ce.status) {
-    case 'inProgress': return compact ? 'Running' : '⟳ Running'
-    case 'completed': return ce.exitCode === 0 ? (compact ? 'Done' : '✓ Completed') : `Exit ${ce.exitCode ?? '?'}`
-    case 'failed': return compact ? 'Failed' : '✗ Failed'
-    case 'declined': return compact ? 'Declined' : '⊘ Declined'
-    case 'interrupted': return compact ? 'Stopped' : '⊘ Interrupted'
+    case 'inProgress': return compact ? t('conversation.cmdRunning') : t('conversation.cmdRunningFull')
+    case 'completed': return ce.exitCode === 0 ? (compact ? t('conversation.cmdDone') : t('conversation.cmdCompleted')) : t('conversation.cmdExitCode', { code: ce.exitCode ?? '?' })
+    case 'failed': return compact ? t('conversation.cmdFailed') : t('conversation.cmdFailedFull')
+    case 'declined': return compact ? t('conversation.cmdDeclined') : t('conversation.cmdDeclinedFull')
+    case 'interrupted': return compact ? t('conversation.cmdStopped') : t('conversation.cmdInterrupted')
     default: return ''
   }
 }
@@ -1783,11 +1786,11 @@ function readStandaloneFileChangeSummary(message: UiMessage): TurnFileChangeSumm
 
 function fileChangeOperationLabel(change: UiFileChange): string {
   if (change.operation === 'update' && change.movedToPath) {
-    return change.addedLineCount > 0 || change.removedLineCount > 0 ? 'Moved + edited' : 'Moved'
+    return change.addedLineCount > 0 || change.removedLineCount > 0 ? t('conversation.fileChangeMovedEdited') : t('conversation.fileChangeMoved')
   }
-  if (change.operation === 'add') return 'Added'
-  if (change.operation === 'delete') return 'Deleted'
-  return 'Edited'
+  if (change.operation === 'add') return t('conversation.fileChangeAdded')
+  if (change.operation === 'delete') return t('conversation.fileChangeDeleted')
+  return t('conversation.fileChangeEdited')
 }
 
 function fileChangeOperationTone(change: UiFileChange): 'add' | 'delete' | 'update' | 'move' {
@@ -1857,7 +1860,7 @@ function summarizeFileChangeKinds(summary: TurnFileChangeSummary | null): string
 }
 
 function fileChangeSummaryLabel(summary: TurnFileChangeSummary | null): string {
-  if (!summary || summary.changes.length === 0) return 'Modified files'
+  if (!summary || summary.changes.length === 0) return t('conversation.fileChangeModified')
   const countLabel = formatFileChangeCountLabel(summary.changes.length)
   const kindSummary = summarizeFileChangeKinds(summary)
   return kindSummary ? `${countLabel} · ${kindSummary}` : countLabel
@@ -1867,7 +1870,7 @@ function fileChangeSummaryStatusParts(summary: TurnFileChangeSummary | null): Fi
   if (!summary || summary.changes.length === 0) return []
   const totalAdded = summary.changes.reduce((sum, change) => sum + change.addedLineCount, 0)
   const totalRemoved = summary.changes.reduce((sum, change) => sum + change.removedLineCount, 0)
-  const fallbackLabel = summary.changes.some((change) => change.movedToPath) ? 'Moved' : 'Ready'
+  const fallbackLabel = summary.changes.some((change) => change.movedToPath) ? t('conversation.fileChangeMoved') : t('conversation.fileChangeReady')
   return buildFileChangeDeltaParts(totalAdded, totalRemoved, fallbackLabel)
 }
 
@@ -1889,7 +1892,7 @@ function buildFileChangeCopyText(summary: TurnFileChangeSummary | null): string
     const delta = formatFileChangeDelta(change)
     return `- ${fileChangeOperationLabel(change)}: ${pathLabel}${movedLabel}${delta ? ` (${delta})` : ''}`
   })
-  return `Modified files:\n${lines.join('\n')}`.trim()
+  return `${t('conversation.fileChangeModified')}:\n${lines.join('\n')}`.trim()
 }
 
 const diffViewerChanges = computed<UiFileChange[]>(() => activeDiffViewerSummary.value?.changes ?? [])
@@ -3363,7 +3366,7 @@ function renderMessageBlockAsHtml(block: MessageBlock): string {
   if (block.kind === 'thematicBreak') {
     return '<hr class="message-divider">'
   }
-  return `<img class="message-image-preview message-markdown-image" src="${escapeHtml(block.url)}" alt="${escapeHtml(block.alt || 'Embedded message image')}" loading="lazy">`
+  return `<img class="message-image-preview message-markdown-image" src="${escapeHtml(block.url)}" alt="${escapeHtml(block.alt || t('conversation.embeddedImage'))}" loading="lazy">`
 }
 
 function renderMarkdownBlocksAsHtml(text: string): string {
@@ -3394,12 +3397,12 @@ function readRequestReason(request: UiServerRequest): string {
 }
 
 function requestDisplayTitle(request: UiServerRequest): string {
-  if (request.method === 'item/commandExecution/requestApproval') return 'Command approval required'
-  if (request.method === 'item/fileChange/requestApproval') return 'File change approval required'
-  if (request.method === 'item/permissions/requestApproval') return 'Permissions approval required'
-  if (request.method === 'mcpServer/elicitation/request') return 'MCP server input required'
-  if (request.method === 'item/tool/requestUserInput') return 'Input required'
-  if (request.method === 'item/tool/call') return 'Tool call waiting for response'
+  if (request.method === 'item/commandExecution/requestApproval') return t('conversation.commandApproval')
+  if (request.method === 'item/fileChange/requestApproval') return t('conversation.fileChangeApproval')
+  if (request.method === 'item/permissions/requestApproval') return t('conversation.permissionsApproval')
+  if (request.method === 'mcpServer/elicitation/request') return t('conversation.mcpServerInput')
+  if (request.method === 'item/tool/requestUserInput') return t('conversation.inputRequired')
+  if (request.method === 'item/tool/call') return t('conversation.toolCallWaiting')
   return request.method
 }
 
diff --git a/src/components/content/ThreadMessageTypeMenu.vue b/src/components/content/ThreadMessageTypeMenu.vue
index 18bd2482..44c02c06 100644
--- a/src/components/content/ThreadMessageTypeMenu.vue
+++ b/src/components/content/ThreadMessageTypeMenu.vue
@@ -6,11 +6,11 @@
 
     <div v-if="isOpen" class="thread-type-menu-panel" @click.stop>
       <div class="thread-type-menu-actions">
-        <button class="thread-type-menu-action-button" type="button" @click="emit('show-all')">Show all</button>
-        <button class="thread-type-menu-action-button" type="button" @click="emit('hide-all')">Hide all</button>
+        <button class="thread-type-menu-action-button" type="button" @click="emit('show-all')">{{ $t('conversation.showAll') }}</button>
+        <button class="thread-type-menu-action-button" type="button" @click="emit('hide-all')">{{ $t('conversation.hideAll') }}</button>
       </div>
 
-      <p v-if="types.length === 0" class="thread-type-menu-empty">No types yet</p>
+      <p v-if="types.length === 0" class="thread-type-menu-empty">{{ $t('conversation.noTypesYet') }}</p>
 
       <label v-for="type in types" :key="type" class="thread-type-menu-option">
         <input
diff --git a/src/components/content/ThreadPendingRequestPanel.vue b/src/components/content/ThreadPendingRequestPanel.vue
index 5d9260d0..50fcc605 100644
--- a/src/components/content/ThreadPendingRequestPanel.vue
+++ b/src/components/content/ThreadPendingRequestPanel.vue
@@ -40,7 +40,7 @@
                 class="thread-pending-request-inline-control"
                 type="text"
                 :value="approvalFreeformText"
-                placeholder="No, and tell Codex what to do differently"
+                :placeholder="$t('pending.declineWithNote')"
                 @focus="onFocusApprovalOther"
                 @input="onApprovalOtherInput"
                 @keydown.enter.prevent="onSubmitApproval(request)"
@@ -48,10 +48,10 @@
             </label>
 
             <button type="button" class="thread-pending-request-secondary" @click="onRespondApproval(request, 'cancel')">
-              Skip
+              {{ $t('common.skip') }}
             </button>
             <button type="button" class="thread-pending-request-primary" @click="onSubmitApproval(request)">
-              Send
+              {{ $t('common.send') }}
             </button>
           </footer>
         </section>
@@ -63,7 +63,7 @@
             <p class="thread-pending-request-eyebrow">{{ requestPanelTitle(request) }}</p>
             <p class="thread-pending-request-title">{{ requestPanelPrompt(request) }}</p>
           </div>
-          <span v-if="(requestCount ?? 0) > 1" class="thread-pending-request-counter">{{ requestCount ?? 0 }} pending</span>
+          <span v-if="(requestCount ?? 0) > 1" class="thread-pending-request-counter">{{ requestCount ?? 0 }} {{ $t('pending.pending') }}</span>
         </header>
 
         <div v-if="requestPreview(request)" class="thread-pending-request-preview">
@@ -72,7 +72,7 @@
 
         <section v-if="request.method === 'mcpServer/elicitation/request'" class="thread-pending-request-user-input">
           <p v-if="readMcpElicitationServerName(request)" class="thread-pending-request-question-description">
-            Server: {{ readMcpElicitationServerName(request) }}
+            {{ $t('pending.server') }}: {{ readMcpElicitationServerName(request) }}
           </p>
 
           <a
@@ -82,7 +82,7 @@
             target="_blank"
             rel="noopener noreferrer"
           >
-            Open authorization link
+            {{ $t('pending.openAuthLink') }}
           </a>
 
           <div
@@ -96,7 +96,7 @@
             <p v-if="field.description" class="thread-pending-request-question-text">{{ field.description }}</p>
 
             <label v-if="field.kind === 'string' || field.kind === 'number'" class="thread-pending-request-input-wrap">
-              <span class="thread-pending-request-select-label">Value</span>
+              <span class="thread-pending-request-select-label">{{ $t('pending.value') }}</span>
               <input
                 class="thread-pending-request-input"
                 :type="field.inputType"
@@ -106,26 +106,26 @@
             </label>
 
             <label v-else-if="field.kind === 'boolean'" class="thread-pending-request-select-wrap">
-              <span class="thread-pending-request-select-label">Choice</span>
+              <span class="thread-pending-request-select-label">{{ $t('pending.choice') }}</span>
               <select
                 class="thread-pending-request-select"
                 :value="serializeMcpBooleanValue(readMcpElicitationFieldValue(request.id, field))"
                 @change="onMcpElicitationBooleanChange(request.id, field, $event)"
               >
-                <option v-if="!field.hasExplicitDefault" value="">Select true or false</option>
-                <option value="true">True</option>
-                <option value="false">False</option>
+                <option v-if="!field.hasExplicitDefault" value="">{{ $t('pending.selectTrueOrFalse') }}</option>
+                <option value="true">{{ $t('pending.true_') }}</option>
+                <option value="false">{{ $t('pending.false_') }}</option>
               </select>
             </label>
 
             <label v-else-if="field.kind === 'singleEnum'" class="thread-pending-request-select-wrap">
-              <span class="thread-pending-request-select-label">Choice</span>
+              <span class="thread-pending-request-select-label">{{ $t('pending.choice') }}</span>
               <select
                 class="thread-pending-request-select"
                 :value="String(readMcpElicitationFieldValue(request.id, field) ?? '')"
                 @change="onMcpElicitationFieldInput(request.id, field, $event)"
               >
-                <option v-if="!field.hasExplicitDefault" value="">Select an option</option>
+                <option v-if="!field.hasExplicitDefault" value="">{{ $t('pending.selectAnOption') }}</option>
                 <option
                   v-for="option in field.options"
                   :key="`${request.id}:${field.key}:${option.value}`"
@@ -159,13 +159,13 @@
 
           <footer class="thread-pending-request-footer">
             <button type="button" class="thread-pending-request-secondary" @click="onRespondMcpElicitation(request, 'cancel')">
-              Cancel
+              {{ $t('common.cancel') }}
             </button>
             <button type="button" class="thread-pending-request-secondary" @click="onRespondMcpElicitation(request, 'decline')">
-              Decline
+              {{ $t('pending.decline') }}
             </button>
             <button type="button" class="thread-pending-request-primary" @click="onRespondMcpElicitation(request, 'accept')">
-              Continue
+              {{ $t('pending.continue_') }}
             </button>
           </footer>
         </section>
@@ -181,7 +181,7 @@
 
             <div v-if="question.options.length > 0" class="thread-pending-request-question-options">
               <label class="thread-pending-request-select-wrap">
-                <span class="thread-pending-request-select-label">Choice</span>
+                <span class="thread-pending-request-select-label">{{ $t('pending.choice') }}</span>
                 <select
                   class="thread-pending-request-select"
                   :value="readQuestionAnswer(request.id, question.id, question.options[0]?.label || '')"
@@ -206,12 +206,12 @@
             </div>
 
             <label v-if="question.isOther" class="thread-pending-request-input-wrap">
-              <span class="thread-pending-request-select-label">Other answer</span>
+              <span class="thread-pending-request-select-label">{{ $t('pending.otherAnswer') }}</span>
               <input
                 class="thread-pending-request-input"
                 type="text"
                 :value="readQuestionOtherAnswer(request.id, question.id)"
-                placeholder="Other answer"
+                :placeholder="$t('pending.otherAnswer')"
                 @input="onQuestionOtherAnswerInput(request.id, question.id, $event)"
               />
             </label>
@@ -219,26 +219,26 @@
 
           <footer class="thread-pending-request-footer">
             <button type="button" class="thread-pending-request-primary" @click="onRespondToolRequestUserInput(request)">
-              Send
+              {{ $t('common.send') }}
             </button>
           </footer>
         </section>
 
         <section v-else-if="request.method === 'item/tool/call'" class="thread-pending-request-actions">
           <button type="button" class="thread-pending-request-primary" @click="onRespondToolCallFailure(request)">
-            Fail Tool Call
+            {{ $t('pending.failToolCall') }}
           </button>
           <button type="button" class="thread-pending-request-secondary" @click="onRespondToolCallSuccess(request)">
-            Success (Empty)
+            {{ $t('pending.successEmpty') }}
           </button>
         </section>
 
         <section v-else class="thread-pending-request-actions">
           <button type="button" class="thread-pending-request-primary" @click="onRespondEmptyResult(request)">
-            Return Empty Result
+            {{ $t('pending.returnEmptyResult') }}
           </button>
           <button type="button" class="thread-pending-request-secondary" @click="onRejectUnknownRequest(request)">
-            Reject Request
+            {{ $t('pending.rejectRequest') }}
           </button>
         </section>
       </template>
@@ -248,6 +248,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { UiServerRequest, UiServerRequestReply } from '../../types/codex'
 
 type ApprovalDecision = 'accept' | 'acceptForSession' | 'decline' | 'cancel'
@@ -292,6 +293,7 @@ const emit = defineEmits<{
   respondServerRequest: [payload: UiServerRequestReply]
 }>()
 
+const { t } = useI18n()
 const selectedApprovalDecision = ref<ApprovalDecision>('accept')
 const approvalFreeformText = ref('')
 const toolQuestionAnswers = ref<Record<string, string>>({})
@@ -364,22 +366,22 @@ function readRequestReason(request: UiServerRequest): string {
 }
 
 function requestPanelTitle(request: UiServerRequest): string {
-  if (isApprovalRequest(request)) return 'Awaiting approval'
-  if (isMcpElicitationRequest(request)) return 'MCP server input required'
-  if (request.method === 'item/tool/requestUserInput') return 'Awaiting response'
-  if (request.method === 'item/tool/call') return 'Tool call waiting for response'
+  if (isApprovalRequest(request)) return t('pending.awaitingApproval')
+  if (isMcpElicitationRequest(request)) return t('pending.mcpServerInput')
+  if (request.method === 'item/tool/requestUserInput') return t('pending.awaitingResponse')
+  if (request.method === 'item/tool/call') return t('pending.toolCallWaiting')
   return request.method
 }
 
 function requestPanelPrompt(request: UiServerRequest): string {
   const explicit = readRequestReason(request)
   if (explicit) return explicit
-  if (isCommandApprovalRequest(request)) return 'Do you want to run this command?'
-  if (isFileApprovalRequest(request)) return 'Do you want to make these changes?'
-  if (isPermissionsApprovalRequest(request)) return 'Do you want to grant these permissions?'
-  if (isMcpElicitationRequest(request)) return 'An MCP server needs your input before Codex can continue.'
-  if (request.method === 'item/tool/requestUserInput') return 'Codex needs your answer before it can continue.'
-  return 'Codex is waiting for a response before it can continue.'
+  if (isCommandApprovalRequest(request)) return t('pending.runCommand')
+  if (isFileApprovalRequest(request)) return t('pending.makeChanges')
+  if (isPermissionsApprovalRequest(request)) return t('pending.grantPermissions')
+  if (isMcpElicitationRequest(request)) return t('pending.mcpInputNeeded')
+  if (request.method === 'item/tool/requestUserInput') return t('pending.codexNeedsAnswer')
+  return t('pending.codexWaiting')
 }
 
 function unwrapApprovalCommand(value: string): string {
@@ -450,8 +452,8 @@ function formatPermissionsPreview(value: unknown): string {
 function approvalOptionsForRequest(request: UiServerRequest | null): ApprovalOption[] {
   if (!request || !isApprovalRequest(request)) return []
   return [
-    { id: 'accept', label: 'Yes' },
-    { id: 'acceptForSession', label: 'Yes for Session' },
+    { id: 'accept', label: t('pending.yesApprove') },
+    { id: 'acceptForSession', label: t('pending.yesForSession') },
   ]
 }
 
diff --git a/src/components/sidebar/SidebarPrimaryNav.vue b/src/components/sidebar/SidebarPrimaryNav.vue
index 0059e234..6fdc90c3 100644
--- a/src/components/sidebar/SidebarPrimaryNav.vue
+++ b/src/components/sidebar/SidebarPrimaryNav.vue
@@ -1,8 +1,8 @@
 <template>
   <nav class="sidebar-primary-nav">
-    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">New thread</SidebarMenuRow>
-    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">Automations</SidebarMenuRow>
-    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">Skills</SidebarMenuRow>
+    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('sidebar.newThread') }}</SidebarMenuRow>
+    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('sidebar.automations') }}</SidebarMenuRow>
+    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('common.skills') }}</SidebarMenuRow>
   </nav>
 </template>
 
diff --git a/src/components/sidebar/SidebarThreadControls.vue b/src/components/sidebar/SidebarThreadControls.vue
index 127ab5f0..923dfd6a 100644
--- a/src/components/sidebar/SidebarThreadControls.vue
+++ b/src/components/sidebar/SidebarThreadControls.vue
@@ -3,8 +3,8 @@
     <button
       class="sidebar-thread-controls-button"
       type="button"
-      :aria-label="isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
-      :title="isSidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+      :aria-label="isSidebarCollapsed ? $t('sidebar.expandSidebar') : $t('sidebar.collapseSidebar')"
+      :title="isSidebarCollapsed ? $t('sidebar.expandSidebar') : $t('sidebar.collapseSidebar')"
       @click="$emit('toggle-sidebar')"
     >
       <IconTablerLayoutSidebarFilled v-if="isSidebarCollapsed" class="sidebar-thread-controls-icon" />
@@ -17,8 +17,8 @@
       v-if="showNewThreadButton"
       class="sidebar-thread-controls-button"
       type="button"
-      aria-label="Start new thread"
-      title="Start new thread"
+      :aria-label="$t('sidebar.startNewThread')"
+      :title="$t('sidebar.startNewThread')"
       @click="$emit('start-new-thread')"
     >
       <IconTablerFilePencil class="sidebar-thread-controls-icon" />
diff --git a/src/components/sidebar/SidebarThreadTree.vue b/src/components/sidebar/SidebarThreadTree.vue
index d7109940..6154f0a7 100644
--- a/src/components/sidebar/SidebarThreadTree.vue
+++ b/src/components/sidebar/SidebarThreadTree.vue
@@ -29,13 +29,13 @@
               <span class="thread-row-title-wrap">
                 <span class="thread-row-title-line">
                   <span class="thread-row-title">{{ thread.title }}</span>
-                  <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                  <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('home.worktreeThread')" />
                   <span
                     v-if="threadHasAutomation(thread.id)"
                     class="thread-row-automation-chip"
                     :title="threadAutomationTooltip(thread.id)"
                   >
-                    Auto
+                    {{ $t('home.auto') }}
                   </span>
                   <span
                     v-if="thread.pendingRequestState"
@@ -68,29 +68,29 @@
     </section>
 
     <SidebarMenuRow as="header" class="thread-tree-header-row">
-      <span class="thread-tree-header">Threads</span>
+      <span class="thread-tree-header">{{ $t('home.threads') }}</span>
       <template #right>
         <div ref="organizeMenuWrapRef" class="organize-menu-wrap">
           <button
             class="organize-menu-trigger"
             type="button"
             :aria-expanded="isOrganizeMenuOpen"
-            aria-label="Organize threads"
-            title="Organize threads"
+            :aria-label="$t('home.organizeThreads')"
+            :title="$t('home.organizeThreads')"
             @click="toggleOrganizeMenu"
           >
             <IconTablerDots class="thread-icon" />
           </button>
 
           <div v-if="isOrganizeMenuOpen" class="organize-menu-panel" @click.stop>
-            <p class="organize-menu-title">Organize</p>
+            <p class="organize-menu-title">{{ $t('home.organize') }}</p>
             <button
               class="organize-menu-item"
               :data-active="threadViewMode === 'project'"
               type="button"
               @click="setThreadViewMode('project')"
             >
-              <span>By project</span>
+              <span>{{ $t('home.byProject') }}</span>
               <span v-if="threadViewMode === 'project'">✓</span>
             </button>
             <button
@@ -99,7 +99,7 @@
               type="button"
               @click="setThreadViewMode('chronological')"
             >
-              <span>Chronological list</span>
+              <span>{{ $t('home.chronologicalList') }}</span>
               <span v-if="threadViewMode === 'chronological'">✓</span>
             </button>
           </div>
@@ -107,9 +107,9 @@
       </template>
     </SidebarMenuRow>
 
-    <p v-if="isSearchActive && filteredGroups.length === 0" class="thread-tree-no-results">No matching threads</p>
+    <p v-if="isSearchActive && filteredGroups.length === 0" class="thread-tree-no-results">{{ $t('home.noMatchingThreads') }}</p>
 
-    <p v-else-if="isLoading && groups.length === 0" class="thread-tree-loading">Loading threads...</p>
+    <p v-else-if="isLoading && groups.length === 0" class="thread-tree-loading">{{ $t('home.loadingThreads') }}</p>
 
     <ul v-else-if="isChronologicalView" class="thread-list thread-list-global">
       <li
@@ -143,7 +143,7 @@
             <span class="thread-row-title-wrap">
               <span class="thread-row-title-line">
                 <span class="thread-row-title">{{ thread.title }}</span>
-                <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('home.worktreeThread')" />
                 <span
                   v-if="threadHasAutomation(thread.id)"
                   class="thread-row-automation-chip"
@@ -240,18 +240,18 @@
                   >
                     <template v-if="projectMenuMode === 'actions'">
                       <button class="project-menu-item" type="button" @click="openRenameProjectMenu(group.projectName)">
-                        Edit name
+                        {{ $t('home.editName') }}
                       </button>
                       <button
                         class="project-menu-item project-menu-item-danger"
                         type="button"
                         @click="onRemoveProject(group.projectName)"
                       >
-                        Remove
+                        {{ $t('home.removeProject') }}
                       </button>
                     </template>
                     <template v-else>
-                      <label class="project-menu-label">Project name</label>
+                      <label class="project-menu-label">{{ $t('home.projectName') }}</label>
                       <input
                         v-model="projectRenameDraft"
                         class="project-menu-input"
@@ -307,7 +307,7 @@
                   <span class="thread-row-title-wrap">
                     <span class="thread-row-title-line">
                       <span class="thread-row-title">{{ thread.title }}</span>
-                      <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" title="Worktree thread" />
+                      <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('home.worktreeThread')" />
                       <span
                         v-if="threadHasAutomation(thread.id)"
                         class="thread-row-automation-chip"
@@ -348,7 +348,7 @@
             <template #left>
               <span class="project-empty-spacer" />
             </template>
-            <span class="project-empty">No threads</span>
+            <span class="project-empty">{{ $t('home.noThreads') }}</span>
           </SidebarMenuRow>
 
           <SidebarMenuRow v-if="hasHiddenThreads(group)" class="thread-show-more-row">
@@ -356,7 +356,7 @@
               <span class="thread-show-more-spacer" />
             </template>
             <button class="thread-show-more-button" type="button" @click="toggleProjectExpansion(group.projectName)">
-              {{ isExpanded(group.projectName) ? 'Show less' : 'Show more' }}
+              {{ isExpanded(group.projectName) ? $t('home.showLess') : $t('home.showMore') }}
             </button>
           </SidebarMenuRow>
       </article>
@@ -372,43 +372,43 @@
         @click.stop
       >
         <button class="thread-menu-item" type="button" @click="openAutomationDialog(openThreadMenuThread.id)">
-          {{ threadHasAutomation(openThreadMenuThread.id) ? 'Edit automation…' : 'Add automation…' }}
+          {{ threadHasAutomation(openThreadMenuThread.id) ? $t('home.editAutomation') : $t('home.addAutomation') }}
         </button>
         <button class="thread-menu-item" type="button" @click="onBrowseThreadFiles(openThreadMenuThread.id)">
-          Browse files
+          {{ $t('home.browseFiles') }}
         </button>
         <button class="thread-menu-item" type="button" @click="onExportThread(openThreadMenuThread.id)">
-          Export chat
+          {{ $t('home.exportThread') }}
         </button>
         <button class="thread-menu-item" type="button" @click="onForkThread(openThreadMenuThread.id)">
-          Create chat fork
+          {{ $t('home.fork') }}
         </button>
         <button class="thread-menu-item" type="button" @click="openRenameThreadDialog(openThreadMenuThread.id, openThreadMenuThread.title)">
-          Rename thread
+          {{ $t('home.rename') }}
         </button>
         <button class="thread-menu-item thread-menu-item-danger" type="button" @click="openDeleteThreadDialog(openThreadMenuThread.id, openThreadMenuThread.title)">
-          Delete thread
+          {{ $t('home.deleteThread') }}
         </button>
       </div>
     </Teleport>
 
     <Teleport to="body">
       <div v-if="renameThreadDialogVisible" class="rename-thread-overlay" @click.self="closeRenameThreadDialog">
-        <div class="rename-thread-panel" role="dialog" aria-modal="true" aria-label="Thread title">
-          <h3 class="rename-thread-title">Rename thread</h3>
-          <p class="rename-thread-subtitle">Make it short and recognizable.</p>
+        <div class="rename-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('home.rename')">
+          <h3 class="rename-thread-title">{{ $t('home.rename') }}</h3>
+          <p class="rename-thread-subtitle">{{ $t('home.renameHint') }}</p>
           <input
             ref="renameThreadInputRef"
             v-model="renameThreadDraft"
             class="rename-thread-input"
             type="text"
-            placeholder="Add title..."
+            :placeholder="$t('home.addTitlePlaceholder')"
             @keydown.enter.prevent="submitRenameThread"
             @keydown.esc.prevent="closeRenameThreadDialog"
           />
           <div class="rename-thread-actions">
-            <button class="rename-thread-button" type="button" @click="closeRenameThreadDialog">Cancel</button>
-            <button class="rename-thread-button rename-thread-button-primary" type="button" @click="submitRenameThread">Save</button>
+            <button class="rename-thread-button" type="button" @click="closeRenameThreadDialog">{{ $t('home.cancel') }}</button>
+            <button class="rename-thread-button rename-thread-button-primary" type="button" @click="submitRenameThread">{{ $t('home.save') }}</button>
           </div>
         </div>
       </div>
@@ -416,20 +416,20 @@
 
     <Teleport to="body">
       <div v-if="deleteThreadDialogVisible" class="rename-thread-overlay" @click.self="closeDeleteThreadDialog">
-        <div class="rename-thread-panel" role="dialog" aria-modal="true" aria-label="Delete thread">
-          <h3 class="rename-thread-title">{{ deleteThreadHasAutomation ? 'Archive chat and remove automation?' : 'Delete thread?' }}</h3>
+        <div class="rename-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('home.deleteThread')">
+          <h3 class="rename-thread-title">{{ deleteThreadHasAutomation ? $t('home.archiveAndRemoveAutomationTitle') : $t('home.deleteThreadTitle') }}</h3>
           <p class="rename-thread-subtitle">
             <template v-if="deleteThreadHasAutomation">
-              This will archive the thread "{{ deleteThreadTitle }}" and remove the attached heartbeat automation.
+              {{ $t('home.archiveAndRemoveAutomationDesc', { title: deleteThreadTitle }) }}
             </template>
             <template v-else>
-              This will archive the thread "{{ deleteThreadTitle }}". You can find it later in archived threads.
+              {{ $t('home.deleteThreadDesc', { title: deleteThreadTitle }) }}
             </template>
           </p>
           <div class="rename-thread-actions">
-            <button class="rename-thread-button" type="button" @click="closeDeleteThreadDialog">Cancel</button>
+            <button class="rename-thread-button" type="button" @click="closeDeleteThreadDialog">{{ $t('home.cancel') }}</button>
             <button class="rename-thread-button rename-thread-button-danger" type="button" @click="submitDeleteThread">
-              {{ deleteThreadHasAutomation ? 'Archive and remove' : 'Delete' }}
+              {{ deleteThreadHasAutomation ? $t('home.archiveAndRemove') : $t('home.delete') }}
             </button>
           </div>
         </div>
@@ -438,22 +438,22 @@
 
     <Teleport to="body">
       <div v-if="automationDialogVisible" class="rename-thread-overlay" @click.self="closeAutomationDialog">
-        <div class="rename-thread-panel automation-thread-panel" role="dialog" aria-modal="true" aria-label="Thread automation">
-          <h3 class="rename-thread-title">{{ automationDialogMode === 'edit' ? 'Edit automation' : 'Add automation' }}</h3>
-          <p class="rename-thread-subtitle">This creates a heartbeat automation attached to the selected thread.</p>
+        <div class="rename-thread-panel automation-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('home.threadAutomation')">
+          <h3 class="rename-thread-title">{{ automationDialogMode === 'edit' ? $t('home.editAutomation') : $t('home.addAutomation') }}</h3>
+          <p class="rename-thread-subtitle">{{ $t('home.automationDesc') }}</p>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">Name</span>
-            <input v-model="automationDraft.name" class="rename-thread-input" type="text" placeholder="Automation name" />
+            <span class="automation-thread-label">{{ $t('home.automationName') }}</span>
+            <input v-model="automationDraft.name" class="rename-thread-input" type="text" :placeholder="$t('home.automationNamePlaceholder')" />
           </label>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">Prompt</span>
-            <textarea v-model="automationDraft.prompt" class="automation-thread-textarea" rows="6" placeholder="Describe what the automation should do"></textarea>
+            <span class="automation-thread-label">{{ $t('home.automationPrompt') }}</span>
+            <textarea v-model="automationDraft.prompt" class="automation-thread-textarea" rows="6" :placeholder="$t('home.automationPromptPlaceholder')"></textarea>
           </label>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">Schedule (RRULE)</span>
+            <span class="automation-thread-label">{{ $t('home.automationSchedule') }}</span>
             <input
               v-model="automationDraft.rrule"
               class="rename-thread-input"
@@ -463,10 +463,10 @@
           </label>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">Status</span>
+            <span class="automation-thread-label">{{ $t('home.automationStatus') }}</span>
             <select v-model="automationDraft.status" class="automation-thread-select">
-              <option value="ACTIVE">Active</option>
-              <option value="PAUSED">Paused</option>
+              <option value="ACTIVE">{{ $t('home.automationActive') }}</option>
+              <option value="PAUSED">{{ $t('home.automationPaused') }}</option>
             </select>
           </label>
 
@@ -480,13 +480,13 @@
               :disabled="isSavingAutomation"
               @click="onDeleteAutomationFromDialog"
             >
-              Remove
+              {{ $t('home.remove') }}
             </button>
             <button class="rename-thread-button" type="button" :disabled="isSavingAutomation" @click="closeAutomationDialog">
-              Cancel
+              {{ $t('home.cancel') }}
             </button>
             <button class="rename-thread-button rename-thread-button-primary" type="button" :disabled="isSavingAutomation" @click="submitAutomationDialog">
-              {{ isSavingAutomation ? 'Saving…' : 'Save' }}
+              {{ isSavingAutomation ? $t('home.saving') : $t('home.save') }}
             </button>
           </div>
         </div>
@@ -498,6 +498,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
+import { useI18n } from 'vue-i18n'
 import {
   deleteThreadAutomation,
   getPinnedThreadState,
@@ -516,6 +517,8 @@ import IconTablerGitFork from '../icons/IconTablerGitFork.vue'
 import IconTablerPin from '../icons/IconTablerPin.vue'
 import SidebarMenuRow from './SidebarMenuRow.vue'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   groups: UiProjectGroup[]
   projectDisplayNameById: Record<string, string>
@@ -912,8 +915,8 @@ function threadAutomationTooltip(threadId: string): string {
     ? '-'
     : automation.nextRunAtMs
       ? new Date(automation.nextRunAtMs).toLocaleString()
-      : 'Not scheduled'
-  return `${automation.name} • Next run: ${nextRunLabel}`
+      : t('home.notScheduled')
+  return `${automation.name} • ${t('home.nextRun')}: ${nextRunLabel}`
 }
 
 function onExportThread(threadId: string): void {
@@ -927,7 +930,7 @@ function onForkThread(threadId: string): void {
 }
 
 function getNewThreadButtonAriaLabel(projectName: string): string {
-  return `start new thread ${getProjectDisplayName(projectName)}`
+  return `${t('home.newThread')} ${getProjectDisplayName(projectName)}`
 }
 
 function onStartNewThread(projectName: string): void {
@@ -1039,7 +1042,7 @@ function openAutomationDialog(threadId: string): void {
   automationDialogMode.value = existing ? 'edit' : 'create'
   automationDialogError.value = ''
   automationDraft.value = {
-    name: existing?.name ?? 'Thread automation',
+    name: existing?.name ?? t('home.threadAutomation'),
     prompt: existing?.prompt ?? '',
     rrule: existing?.rrule ?? 'FREQ=DAILY;BYHOUR=9;BYMINUTE=0',
     status: existing?.status ?? 'ACTIVE',
@@ -1074,7 +1077,7 @@ async function submitAutomationDialog(): Promise<void> {
     }
     closeAutomationDialog()
   } catch (error) {
-    automationDialogError.value = error instanceof Error ? error.message : 'Failed to save automation'
+    automationDialogError.value = error instanceof Error ? error.message : t('home.failedToSaveAutomation')
     isSavingAutomation.value = false
   }
 }
@@ -1091,7 +1094,7 @@ async function onDeleteAutomationFromDialog(): Promise<void> {
     )
     closeAutomationDialog()
   } catch (error) {
-    automationDialogError.value = error instanceof Error ? error.message : 'Failed to remove automation'
+    automationDialogError.value = error instanceof Error ? error.message : t('home.failedToRemoveAutomation')
     isSavingAutomation.value = false
   }
 }
@@ -1729,7 +1732,7 @@ function shouldShowThreadIndicator(thread: UiThread): boolean {
 }
 
 function threadRequestLabel(thread: UiThread): string {
-  return thread.pendingRequestState === 'approval' ? 'Awaiting approval' : 'Awaiting response'
+  return thread.pendingRequestState === 'approval' ? t('home.awaitingApproval') : t('home.awaitingResponse')
 }
 
 function getThreadState(thread: UiThread): 'awaiting-approval' | 'awaiting-response' | 'working' | 'unread' | 'idle' {
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 00000000..0495eb27
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,31 @@
+/**
+ * Vue I18n configuration.
+ * Initializes the i18n instance with English (default) and Chinese locales.
+ * Auto-detects browser language; falls back to English.
+ */
+import { createI18n } from 'vue-i18n'
+import en from './locales/en'
+import zh from './locales/zh'
+
+function detectLocale(): string {
+  if (typeof window !== 'undefined') {
+    const saved = window.localStorage.getItem('codex-web-local.language.v1')
+    if (saved === 'en' || saved === 'zh') return saved
+  }
+  if (typeof navigator === 'undefined') return 'en'
+  const lang = navigator.language || ''
+  if (lang.startsWith('zh')) return 'zh'
+  return 'en'
+}
+
+const i18n = createI18n({
+  legacy: false,
+  locale: detectLocale(),
+  fallbackLocale: 'en',
+  messages: {
+    en,
+    zh,
+  },
+})
+
+export default i18n
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
new file mode 100644
index 00000000..f6fbb1c3
--- /dev/null
+++ b/src/i18n/locales/en.ts
@@ -0,0 +1,457 @@
+/**
+ * English locale messages for the codexUI frontend.
+ * Organized by component/feature area.
+ */
+const en = {
+  common: {
+    send: 'Send',
+    cancel: 'Cancel',
+    close: 'Close',
+    skip: 'Skip',
+    search: 'Search',
+    refresh: 'Refresh',
+    loading: 'Loading',
+    edit: 'Edit',
+    delete: 'Delete',
+    copy: 'Copy',
+    copied: 'Copied',
+    yes: 'Yes',
+    no: 'No',
+    noResults: 'No results',
+    files: 'Files',
+    file: 'file',
+    filesCount: '{count} file | {count} files',
+    images: '{count} image | {count} images',
+    skills: 'Skills',
+    back: 'Back',
+    settings: 'Settings',
+  },
+
+  composer: {
+    placeholder: "Type a message... ({'@'} for files, / for skills)",
+    placeholderNoThread: 'Select a thread to send a message',
+    placeholderPlanMode: 'Loading models for plan mode...',
+    addPhotosFiles: 'Add photos & files',
+    addFolder: 'Add folder',
+    takePhoto: 'Take photo',
+    inProgressSend: 'In-progress send',
+    steer: 'Steer',
+    queue: 'Queue',
+    fastMode: 'Fast mode',
+    fastModeDescOn: 'About 1.5x faster, with credits used at 2x',
+    fastModeDescOff: 'Default speed with normal credit usage',
+    fastModeSaving: 'Saving speed setting...',
+    planMode: 'Plan mode',
+    planModeDesc: 'Agent proposes a plan before acting',
+    model: 'Model',
+    thinking: 'Thinking',
+    searchModels: 'Search models...',
+    searchSkills: 'Search skills...',
+    stopDictation: 'Stop dictation',
+    clickToDictate: 'Click to dictate',
+    holdToDictate: 'Hold to dictate',
+    stop: 'Stop',
+    stopPending: 'Saving thread before stop is available',
+    sendMessage: 'Send message',
+    queueMessage: 'Queue message',
+    sendAsMode: 'Send as {mode}',
+    dropImagesOrFiles: 'Drop images or files',
+    noMatchingFiles: 'No matching files',
+    selectedImage: 'Selected image',
+    removeImage: 'Remove {name}',
+    removeFolder: 'Remove folder {name}',
+    removeSkill: 'Remove skill {name}',
+    removeFile: 'Remove {label}',
+    uploading: '{percent}% uploading ({processed}/{total})',
+    noSpeechClick: 'No speech detected. Click again after speaking.',
+    noSpeechHold: 'No speech detected. Hold the mic and speak.',
+    micDenied: 'Microphone access was denied.',
+    dictationFailed: 'Dictation failed.',
+    attachingFile: 'Attaching file...',
+    attachingFiles: 'Attaching {count} files...',
+    attachFailed: 'Could not attach file.',
+    attachFailedMulti: 'Could not attach {count} files.',
+    attachPartial: '{succeeded} attached, {failed} failed.',
+    attachFailedAttaching: '{failed} failed, attaching {remaining} files...',
+    searchQuickProjects: 'Quick search projects',
+    nSelected: '{count} selected',
+    selectDefault: 'Select...',
+    noSkillsFound: 'No skills found',
+
+    reasoningNone: 'None',
+    reasoningMinimal: 'Minimal',
+    reasoningLow: 'Low',
+    reasoningMedium: 'Medium',
+    reasoningHigh: 'High',
+    reasoningExtraHigh: 'Extra high',
+
+    runtimeLocal: 'Local project',
+    runtimeWorktree: 'New worktree',
+    continueIn: 'Continue in',
+  },
+
+  conversation: {
+    loadingMessages: 'Loading messages...',
+    noMessages: 'No messages in this thread yet.',
+    loadEarlier: 'Load earlier messages',
+    loadingEarlier: 'Loading\u2026',
+    command: '(command)',
+    noOutput: '(no output)',
+    generatedImage: 'Generated image',
+    imagePreview: 'Message image preview',
+    embeddedImage: 'Embedded message image',
+    expandedImage: 'Expanded message image',
+    editMessage: 'Edit this message',
+    forkThread: 'Fork thread from this response',
+    responseCopied: 'Response copied',
+    copyResponse: 'Copy response',
+    jumpToLatest: 'Jump to latest',
+    jumpToLatestOutput: 'Jump to latest output',
+    closeImagePreview: 'Close image preview',
+    closeDiffViewer: 'Close diff viewer',
+    plan: 'Plan',
+    planUpdating: 'Updating',
+
+    cmdRunning: 'Running',
+    cmdRunningFull: '\u27F3 Running',
+    cmdDone: 'Done',
+    cmdCompleted: '\u2713 Completed',
+    cmdExitCode: 'Exit {code}',
+    cmdFailed: 'Failed',
+    cmdFailedFull: '\u2717 Failed',
+    cmdDeclined: 'Declined',
+    cmdDeclinedFull: '\u2298 Declined',
+    cmdStopped: 'Stopped',
+    cmdInterrupted: '\u2298 Interrupted',
+
+    fileChangeAdded: 'Added',
+    fileChangeDeleted: 'Deleted',
+    fileChangeEdited: 'Edited',
+    fileChangeMoved: 'Moved',
+    fileChangeMovedEdited: 'Moved + edited',
+    fileChangeModified: 'Modified files',
+    fileChangeReady: 'Ready',
+
+    showAll: 'Show all',
+    hideAll: 'Hide all',
+    noTypesYet: 'No types yet',
+
+    commandApproval: 'Command approval required',
+    fileChangeApproval: 'File change approval required',
+    permissionsApproval: 'Permissions approval required',
+    mcpServerInput: 'MCP server input required',
+    inputRequired: 'Input required',
+    toolCallWaiting: 'Tool call waiting for response',
+  },
+
+  review: {
+    eyebrow: 'Review',
+    closePane: 'Close review pane',
+    tabChanges: 'Changes',
+    tabFindings: 'Findings',
+    compare: 'Compare',
+    workspace: 'Workspace',
+    baseBranch: 'Base branch',
+    branch: 'Branch',
+    changes: 'Changes',
+    unstaged: 'Unstaged',
+    staged: 'Staged',
+    runReview: 'Run review',
+    reviewing: 'Reviewing\u2026',
+    resizeFileList: 'Resize file list',
+    loadingReviewState: 'Loading review state',
+    notGitRepo: 'This folder is not a Git repository',
+    notGitRepoDesc: 'Initialize Git to review local changes and run Codex review.',
+    initializeGit: 'Initialize Git',
+    initializing: 'Initializing\u2026',
+    baseBranchUnavailable: 'Base branch unavailable',
+    baseBranchUnavailableDesc: 'Could not resolve `origin/HEAD`, `main`, or `master` for this repository.',
+    noChangesInScope: 'No changes in this scope',
+    workspaceClean: 'Your current workspace is clean.',
+    noMergeDiff: 'No merge diff found against the base branch.',
+    filesCount: '{count} files',
+    vs: 'vs {branch}',
+    stageAll: 'Stage all',
+    unstageAll: 'Unstage all',
+    revertAll: 'Revert all',
+    stageFile: 'Stage file',
+    unstageFile: 'Unstage file',
+    revertFile: 'Revert file',
+    stageHunk: 'Stage hunk',
+    unstageHunk: 'Unstage hunk',
+    revertHunk: 'Revert hunk',
+    noUnifiedDiff: 'No unified diff available.',
+    summary: 'Summary',
+    noFindings: 'No structured findings yet',
+    noFindingsSummaryOnly: 'The latest review only returned summary text.',
+    noFindingsRun: 'Run review to populate this pane.',
+    changedFiles: 'Changed files',
+    reviewingChanges: 'Reviewing current changes',
+    reviewingAgainst: 'Reviewing against {branch}',
+    operationAdded: 'Added',
+    operationDeleted: 'Deleted',
+    operationRenamed: 'Renamed',
+    operationModified: 'Modified',
+    repositoryReview: 'Repository review',
+    stagedChanges: 'Staged changes',
+    workspaceChanges: 'Workspace changes',
+    againstBranch: 'Against {branch}',
+  },
+
+  pending: {
+    awaitingApproval: 'Awaiting approval',
+    mcpServerInput: 'MCP server input required',
+    awaitingResponse: 'Awaiting response',
+    toolCallWaiting: 'Tool call waiting for response',
+    runCommand: 'Do you want to run this command?',
+    makeChanges: 'Do you want to make these changes?',
+    grantPermissions: 'Do you want to grant these permissions?',
+    mcpInputNeeded: 'An MCP server needs your input before Codex can continue.',
+    codexNeedsAnswer: 'Codex needs your answer before it can continue.',
+    codexWaiting: 'Codex is waiting for a response before it can continue.',
+    yesApprove: 'Yes',
+    yesForSession: 'Yes for Session',
+    declineWithNote: 'No, and tell Codex what to do differently',
+    continue_: 'Continue',
+    decline: 'Decline',
+    failToolCall: 'Fail Tool Call',
+    successEmpty: 'Success (Empty)',
+    returnEmptyResult: 'Return Empty Result',
+    rejectRequest: 'Reject Request',
+    openAuthLink: 'Open authorization link',
+    server: 'Server',
+    value: 'Value',
+    choice: 'Choice',
+    otherAnswer: 'Other answer',
+    selectTrueOrFalse: 'Select true or false',
+    selectAnOption: 'Select an option',
+    true_: 'True',
+    false_: 'False',
+    pending: 'pending',
+    requiredFieldSingle: 'Answer the required field: {label}.',
+    requiredFieldMulti: 'Answer the required fields: {labels}.',
+    readPermission: 'Read',
+    writePermission: 'Write',
+    networkAccess: 'Network access',
+  },
+
+  skills: {
+    hubTitle: 'Skills Hub',
+    hubSubtitle: 'Browse and discover skills from the OpenClaw community',
+    syncTitle: 'Skills Sync (GitHub)',
+    connected: 'Connected',
+    loggedInAs: 'Logged in as {username}',
+    notConnected: 'Not connected',
+    startup: 'Startup',
+    actionLabel: 'Action',
+    manualSync: 'Manual sync',
+    deviceLoginPrompt: 'Open {link} and enter code:',
+    githubDeviceLogin: 'GitHub device login',
+    loginWithGithub: 'Login with GitHub',
+    deviceLogin: 'Device Login',
+    logoutGithub: 'Logout GitHub',
+    startupSync: 'Startup Sync',
+    syncing: 'Syncing...',
+    pull: 'Pull',
+    pulling: 'Pulling...',
+    push: 'Push',
+    pushing: 'Pushing...',
+    installed: 'Installed',
+    installedCount: 'Installed ({count})',
+    searchPlaceholder: 'Search skills... (e.g. flight, docker, react)',
+    skillsCount: '{count} skills',
+    newest: 'Newest',
+    az: 'A-Z',
+    loadingSkills: 'Loading skills...',
+    noSkillsFound: 'No skills found for "{query}"',
+    skillInstalled: '{name} skill installed',
+    skillUninstalled: '{name} skill uninstalled',
+    skillEnabled: '{name} skill enabled',
+    skillDisabled: '{name} skill disabled',
+
+    disabled: 'Disabled',
+    loadingContents: 'Loading skill contents...',
+    viewOnGithub: 'View on GitHub',
+    uninstalling: 'Uninstalling...',
+    uninstall: 'Uninstall',
+    installing: 'Installing...',
+    install: 'Install',
+    disable: 'Disable',
+    enable: 'Enable',
+    browseFiles: 'Browse files',
+  },
+
+  account: {
+    accounts: 'Accounts',
+    noAccountsYet: 'No saved accounts yet. Run `codex login`, then click reload.',
+    accountFallback: 'Account',
+    active: 'Active',
+    switch_: 'Switch',
+    switching: 'Switching\u2026',
+  },
+
+  sidebar: {
+    expandSidebar: 'Expand sidebar',
+    collapseSidebar: 'Collapse sidebar',
+    startNewThread: 'Start new thread',
+    newThread: 'New thread',
+    automations: 'Automations',
+  },
+
+  queue: {
+    editQueued: 'Edit queued message',
+    steerNow: 'Send now without interrupting work',
+    deleteQueued: 'Delete queued message',
+    steerButton: 'Steer',
+    editButton: 'Edit',
+    emptyQueued: '(empty queued message)',
+    imageCount: '{count} image | {count} images',
+    fileCount: '{count} file | {count} files',
+    skillCount: '{count} skill | {count} skills',
+  },
+
+  rateLimit: {
+    rateLimits: 'Rate limits',
+    window: 'Window',
+    left: '{percent}% left',
+    used: '{percent}%',
+    resettingNow: 'Resetting now',
+    resetsIn: 'Resets in {time}',
+    unlimitedCredits: 'Unlimited credits',
+    creditsBalance: 'Credits {balance}',
+    creditsAvailable: 'Credits available',
+    education: 'Education',
+    plan: 'Plan',
+    primaryWindow: 'Primary window',
+    secondaryWindow: 'Secondary window',
+    weeklyRefresh: 'Weekly refresh',
+    credits: 'Credits',
+    unlimited: 'unlimited',
+    contextWindow: 'Context window',
+    inContext: 'In context',
+    lastTurn: 'Last turn',
+    sessionTotal: 'Session total',
+    total: 'total',
+    input: 'input',
+    cached: 'cached',
+    output: 'output',
+    reasoning: 'reasoning',
+  },
+
+  home: {
+    letsBuild: "Let's build",
+    selectedFolder: 'Selected folder: {path}',
+    selectFolder: 'Select folder',
+    createProject: 'Create Project',
+    runtimeDescription: 'Local project uses the selected folder directly. New worktree creates an isolated Git worktree before the first prompt.',
+    searchThreads: 'Search threads',
+    filterThreads: 'Filter threads...',
+    clearSearch: 'Clear search',
+    skillsHub: 'Skills Hub',
+    showMore: 'Show more',
+    showLess: 'Show less',
+    newThread: 'New thread',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    previous7Days: 'Previous 7 days',
+    previous30Days: 'Previous 30 days',
+    older: 'Older',
+    pinned: 'Pinned',
+    noThreads: 'No threads yet',
+    noMatchingThreads: 'No matching threads',
+    loadingThreads: 'Loading threads...',
+    threads: 'Threads',
+    organize: 'Organize',
+    organizeThreads: 'Organize threads',
+    byProject: 'By project',
+    chronologicalList: 'Chronological list',
+    editName: 'Edit name',
+    projectName: 'Project name',
+    archive: 'Archive',
+    rename: 'Rename',
+    renameHint: 'Make it short and recognizable.',
+    addTitlePlaceholder: 'Add title...',
+    fork: 'Fork',
+    browseFiles: 'Browse files',
+    exportThread: 'Export thread',
+    deleteThread: 'Delete thread',
+    deleteThreadTitle: 'Delete thread?',
+    archiveAndRemoveAutomationTitle: 'Archive chat and remove automation?',
+    archiveAndRemoveAutomationDesc: 'This will archive the thread "{title}" and remove the attached heartbeat automation.',
+    deleteThreadDesc: 'This will archive the thread "{title}". You can find it later in archived threads.',
+    archiveAndRemove: 'Archive and remove',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    save: 'Save',
+    saving: 'Saving\u2026',
+    remove: 'Remove',
+    removeProject: 'Remove project',
+    reorderProject: 'Reorder project',
+    addAutomation: 'Add automation\u2026',
+    editAutomation: 'Edit automation\u2026',
+    threadAutomation: 'Thread automation',
+    automationDesc: 'This creates a heartbeat automation attached to the selected thread.',
+    automationName: 'Name',
+    automationNamePlaceholder: 'Automation name',
+    automationPrompt: 'Prompt',
+    automationPromptPlaceholder: 'Describe what the automation should do',
+    automationSchedule: 'Schedule (RRULE)',
+    automationStatus: 'Status',
+    automationActive: 'Active',
+    automationPaused: 'Paused',
+    failedToSaveAutomation: 'Failed to save automation',
+    failedToRemoveAutomation: 'Failed to remove automation',
+    awaitingApproval: 'Awaiting approval',
+    awaitingResponse: 'Awaiting response',
+    notScheduled: 'Not scheduled',
+    nextRun: 'Next run',
+    worktreeThread: 'Worktree thread',
+    auto: 'Auto',
+  },
+
+  settings: {
+    accounts: 'Accounts',
+    reload: 'Reload',
+    reloading: 'Reloading\u2026',
+    requireCmdEnter: 'Require \u2318 + enter to send',
+    whenBusySendAs: 'When busy, send as',
+    appearance: 'Appearance',
+    language: 'Language',
+    chatWidth: 'Chat width',
+    standard: 'Standard',
+    wide: 'Wide',
+    extraWide: 'Extra wide',
+    system: 'System',
+    light: 'Light',
+    dark: 'Dark',
+    clickToggleDictation: 'Click to toggle dictation',
+    autoSendDictation: 'Auto send dictation',
+    githubTrending: 'GitHub trending projects',
+    provider: 'Provider',
+    dictationLanguage: 'Dictation language',
+    autoDetect: 'Auto-detect',
+    telegram: 'Telegram',
+    notConfigured: 'Not configured',
+    configured: 'Configured',
+    expandAccounts: 'Expand accounts',
+    collapseAccounts: 'Collapse accounts',
+    workspace: 'Workspace',
+    runCodexLogin: 'Run `codex login`, then click reload.',
+    active: 'Active',
+    switch_: 'Switch',
+    switching: 'Switching\u2026',
+    unavailable: 'Unavailable',
+    remove: 'Remove',
+    removeConfirm: 'Confirm remove?',
+    removing: 'Removing\u2026',
+    openRouterApiKey: 'OpenRouter API key',
+    getApiKey: 'Get API key',
+    customEndpoint: 'Custom endpoint',
+    endpointUrl: 'Endpoint URL',
+    apiKey: 'API key',
+    save: 'Save',
+    saving: 'Saving\u2026',
+  },
+}
+
+export default en
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
new file mode 100644
index 00000000..1332ce63
--- /dev/null
+++ b/src/i18n/locales/zh.ts
@@ -0,0 +1,456 @@
+/**
+ * Chinese (Simplified) locale messages for the codexUI frontend.
+ */
+const zh = {
+  common: {
+    send: '发送',
+    cancel: '取消',
+    close: '关闭',
+    skip: '跳过',
+    search: '搜索',
+    refresh: '刷新',
+    loading: '加载中',
+    edit: '编辑',
+    delete: '删除',
+    copy: '复制',
+    copied: '已复制',
+    yes: '是',
+    no: '否',
+    noResults: '无结果',
+    files: '文件',
+    file: '文件',
+    filesCount: '{count} 个文件',
+    images: '{count} 张图片',
+    skills: '技能',
+    back: '返回',
+    settings: '设置',
+  },
+
+  composer: {
+    placeholder: "输入消息... ({'@'} 引用文件, / 使用技能)",
+    placeholderNoThread: '选择一个会话以发送消息',
+    placeholderPlanMode: '正在为计划模式加载模型...',
+    addPhotosFiles: '添加照片和文件',
+    addFolder: '添加文件夹',
+    takePhoto: '拍照',
+    inProgressSend: '进行中发送',
+    steer: '引导',
+    queue: '排队',
+    fastMode: '快速模式',
+    fastModeDescOn: '速度约为 1.5 倍，信用消耗 2 倍',
+    fastModeDescOff: '默认速度，正常信用消耗',
+    fastModeSaving: '正在保存速度设置...',
+    planMode: '计划模式',
+    planModeDesc: '代理在执行前先提出计划',
+    model: '模型',
+    thinking: '思考',
+    searchModels: '搜索模型...',
+    searchSkills: '搜索技能...',
+    stopDictation: '停止听写',
+    clickToDictate: '点击听写',
+    holdToDictate: '按住听写',
+    stop: '停止',
+    stopPending: '正在保存会话，稍后即可停止',
+    sendMessage: '发送消息',
+    queueMessage: '排队消息',
+    sendAsMode: '以{mode}方式发送',
+    dropImagesOrFiles: '拖放图片或文件',
+    noMatchingFiles: '没有匹配的文件',
+    selectedImage: '已选图片',
+    removeImage: '移除 {name}',
+    removeFolder: '移除文件夹 {name}',
+    removeSkill: '移除技能 {name}',
+    removeFile: '移除 {label}',
+    uploading: '{percent}% 上传中 ({processed}/{total})',
+    noSpeechClick: '未检测到语音。请再次点击后说话。',
+    noSpeechHold: '未检测到语音。请按住麦克风后说话。',
+    micDenied: '麦克风访问被拒绝。',
+    dictationFailed: '听写失败。',
+    attachingFile: '正在附加文件...',
+    attachingFiles: '正在附加 {count} 个文件...',
+    attachFailed: '无法附加文件。',
+    attachFailedMulti: '无法附加 {count} 个文件。',
+    attachPartial: '已附加 {succeeded} 个，{failed} 个失败。',
+    attachFailedAttaching: '{failed} 个失败，正在附加 {remaining} 个文件...',
+    searchQuickProjects: '快速搜索项目',
+    nSelected: '已选 {count} 个',
+    selectDefault: '请选择...',
+    noSkillsFound: '未找到技能',
+
+    reasoningNone: '无',
+    reasoningMinimal: '最小',
+    reasoningLow: '低',
+    reasoningMedium: '中等',
+    reasoningHigh: '高',
+    reasoningExtraHigh: '超高',
+
+    runtimeLocal: '本地项目',
+    runtimeWorktree: '新工作树',
+    continueIn: '继续方式',
+  },
+
+  conversation: {
+    loadingMessages: '正在加载消息...',
+    noMessages: '此会话暂无消息。',
+    loadEarlier: '加载更早的消息',
+    loadingEarlier: '加载中\u2026',
+    command: '（命令）',
+    noOutput: '（无输出）',
+    generatedImage: '生成的图片',
+    imagePreview: '消息图片预览',
+    embeddedImage: '内嵌消息图片',
+    expandedImage: '放大的消息图片',
+    editMessage: '编辑此消息',
+    forkThread: '从此回复分叉会话',
+    responseCopied: '回复已复制',
+    copyResponse: '复制回复',
+    jumpToLatest: '跳到最新',
+    jumpToLatestOutput: '跳到最新输出',
+    closeImagePreview: '关闭图片预览',
+    closeDiffViewer: '关闭差异查看器',
+    plan: '计划',
+    planUpdating: '更新中',
+
+    cmdRunning: '运行中',
+    cmdRunningFull: '\u27F3 运行中',
+    cmdDone: '完成',
+    cmdCompleted: '\u2713 已完成',
+    cmdExitCode: '退出码 {code}',
+    cmdFailed: '失败',
+    cmdFailedFull: '\u2717 失败',
+    cmdDeclined: '已拒绝',
+    cmdDeclinedFull: '\u2298 已拒绝',
+    cmdStopped: '已停止',
+    cmdInterrupted: '\u2298 已中断',
+
+    fileChangeAdded: '已添加',
+    fileChangeDeleted: '已删除',
+    fileChangeEdited: '已编辑',
+    fileChangeMoved: '已移动',
+    fileChangeMovedEdited: '移动并编辑',
+    fileChangeModified: '已修改的文件',
+    fileChangeReady: '就绪',
+
+    showAll: '全部显示',
+    hideAll: '全部隐藏',
+    noTypesYet: '暂无类型',
+
+    commandApproval: '需要命令审批',
+    fileChangeApproval: '需要文件更改审批',
+    permissionsApproval: '需要权限审批',
+    mcpServerInput: '需要 MCP 服务器输入',
+    inputRequired: '需要输入',
+    toolCallWaiting: '工具调用等待响应',
+  },
+
+  review: {
+    eyebrow: '审查',
+    closePane: '关闭审查面板',
+    tabChanges: '变更',
+    tabFindings: '发现',
+    compare: '比较',
+    workspace: '工作区',
+    baseBranch: '基准分支',
+    branch: '分支',
+    changes: '变更',
+    unstaged: '未暂存',
+    staged: '已暂存',
+    runReview: '运行审查',
+    reviewing: '审查中\u2026',
+    resizeFileList: '调整文件列表大小',
+    loadingReviewState: '加载审查状态',
+    notGitRepo: '此文件夹不是 Git 仓库',
+    notGitRepoDesc: '初始化 Git 以审查本地更改并运行 Codex 审查。',
+    initializeGit: '初始化 Git',
+    initializing: '初始化中\u2026',
+    baseBranchUnavailable: '基准分支不可用',
+    baseBranchUnavailableDesc: '无法为此仓库解析 `origin/HEAD`、`main` 或 `master`。',
+    noChangesInScope: '此范围内无变更',
+    workspaceClean: '当前工作区是干净的。',
+    noMergeDiff: '未找到与基准分支的合并差异。',
+    filesCount: '{count} 个文件',
+    vs: '对比 {branch}',
+    stageAll: '暂存全部',
+    unstageAll: '取消暂存全部',
+    revertAll: '还原全部',
+    stageFile: '暂存文件',
+    unstageFile: '取消暂存文件',
+    revertFile: '还原文件',
+    stageHunk: '暂存代码块',
+    unstageHunk: '取消暂存代码块',
+    revertHunk: '还原代码块',
+    noUnifiedDiff: '无统一差异可用。',
+    summary: '摘要',
+    noFindings: '暂无结构化发现',
+    noFindingsSummaryOnly: '最近一次审查仅返回了摘要文本。',
+    noFindingsRun: '运行审查以填充此面板。',
+    changedFiles: '已更改的文件',
+    reviewingChanges: '正在审查当前变更',
+    reviewingAgainst: '正在对比 {branch} 审查',
+    operationAdded: '已添加',
+    operationDeleted: '已删除',
+    operationRenamed: '已重命名',
+    operationModified: '已修改',
+    repositoryReview: '仓库审查',
+    stagedChanges: '已暂存的变更',
+    workspaceChanges: '工作区变更',
+    againstBranch: '对比 {branch}',
+  },
+
+  pending: {
+    awaitingApproval: '等待审批',
+    mcpServerInput: '需要 MCP 服务器输入',
+    awaitingResponse: '等待响应',
+    toolCallWaiting: '工具调用等待响应',
+    runCommand: '是否运行此命令？',
+    makeChanges: '是否进行这些更改？',
+    grantPermissions: '是否授予这些权限？',
+    mcpInputNeeded: 'MCP 服务器需要您的输入才能让 Codex 继续。',
+    codexNeedsAnswer: 'Codex 需要您的回答才能继续。',
+    codexWaiting: 'Codex 正在等待响应才能继续。',
+    yesApprove: '是',
+    yesForSession: '本次会话均同意',
+    declineWithNote: '不，并告诉 Codex 该怎么做',
+    continue_: '继续',
+    decline: '拒绝',
+    failToolCall: '失败工具调用',
+    successEmpty: '成功（空）',
+    returnEmptyResult: '返回空结果',
+    rejectRequest: '拒绝请求',
+    openAuthLink: '打开授权链接',
+    server: '服务器',
+    value: '值',
+    choice: '选项',
+    otherAnswer: '其他答案',
+    selectTrueOrFalse: '选择是或否',
+    selectAnOption: '选择一个选项',
+    true_: '是',
+    false_: '否',
+    pending: '待处理',
+    requiredFieldSingle: '请填写必填字段：{label}。',
+    requiredFieldMulti: '请填写必填字段：{labels}。',
+    readPermission: '读取',
+    writePermission: '写入',
+    networkAccess: '网络访问',
+  },
+
+  skills: {
+    hubTitle: '技能中心',
+    hubSubtitle: '浏览和发现来自 OpenClaw 社区的技能',
+    syncTitle: '技能同步 (GitHub)',
+    connected: '已连接',
+    loggedInAs: '已登录为 {username}',
+    notConnected: '未连接',
+    startup: '启动',
+    actionLabel: '操作',
+    manualSync: '手动同步',
+    deviceLoginPrompt: '打开 {link} 并输入代码：',
+    githubDeviceLogin: 'GitHub 设备登录',
+    loginWithGithub: '使用 GitHub 登录',
+    deviceLogin: '设备登录',
+    logoutGithub: '退出 GitHub',
+    startupSync: '启动同步',
+    syncing: '同步中...',
+    pull: '拉取',
+    pulling: '拉取中...',
+    push: '推送',
+    pushing: '推送中...',
+    installed: '已安装',
+    installedCount: '已安装 ({count})',
+    searchPlaceholder: '搜索技能... (例如 flight, docker, react)',
+    skillsCount: '{count} 个技能',
+    newest: '最新',
+    az: 'A-Z',
+    loadingSkills: '正在加载技能...',
+    noSkillsFound: '未找到 "{query}" 相关技能',
+    skillInstalled: '{name} 技能已安装',
+    skillUninstalled: '{name} 技能已卸载',
+    skillEnabled: '{name} 技能已启用',
+    skillDisabled: '{name} 技能已禁用',
+
+    disabled: '已禁用',
+    loadingContents: '正在加载技能内容...',
+    viewOnGithub: '在 GitHub 上查看',
+    uninstalling: '卸载中...',
+    uninstall: '卸载',
+    installing: '安装中...',
+    install: '安装',
+    disable: '禁用',
+    enable: '启用',
+    browseFiles: '浏览文件',
+  },
+
+  account: {
+    accounts: '账户',
+    noAccountsYet: '暂无已保存的账户。运行 `codex login`，然后点击刷新。',
+    accountFallback: '账户',
+    active: '当前',
+    switch_: '切换',
+    switching: '切换中\u2026',
+  },
+
+  sidebar: {
+    expandSidebar: '展开侧边栏',
+    collapseSidebar: '收起侧边栏',
+    startNewThread: '新建会话',
+    newThread: '新建会话',
+    automations: '自动化',
+  },
+
+  queue: {
+    editQueued: '编辑排队消息',
+    steerNow: '立即发送，不中断当前工作',
+    deleteQueued: '删除排队消息',
+    steerButton: '引导',
+    editButton: '编辑',
+    emptyQueued: '（空排队消息）',
+    imageCount: '{count} 张图片',
+    fileCount: '{count} 个文件',
+    skillCount: '{count} 个技能',
+  },
+
+  rateLimit: {
+    rateLimits: '速率限制',
+    window: '窗口',
+    left: '剩余 {percent}%',
+    used: '{percent}%',
+    resettingNow: '正在重置',
+    resetsIn: '{time}后重置',
+    unlimitedCredits: '无限信用',
+    creditsBalance: '信用余额 {balance}',
+    creditsAvailable: '信用可用',
+    education: '教育',
+    plan: '计划',
+    primaryWindow: '主窗口',
+    secondaryWindow: '次窗口',
+    weeklyRefresh: '每周刷新',
+    credits: '信用',
+    unlimited: '无限',
+    contextWindow: '上下文窗口',
+    inContext: '上下文中',
+    lastTurn: '上次轮次',
+    sessionTotal: '会话总计',
+    total: '总计',
+    input: '输入',
+    cached: '缓存',
+    output: '输出',
+    reasoning: '推理',
+  },
+
+  home: {
+    letsBuild: '开始构建',
+    selectedFolder: '已选文件夹：{path}',
+    selectFolder: '选择文件夹',
+    createProject: '创建项目',
+    runtimeDescription: '本地项目直接使用所选文件夹。新工作树会在首次提示前创建一个隔离的 Git 工作树。',
+    searchThreads: '搜索会话',
+    filterThreads: '筛选会话...',
+    clearSearch: '清除搜索',
+    skillsHub: '技能中心',
+    showMore: '显示更多',
+    showLess: '收起',
+    newThread: '新建会话',
+    today: '今天',
+    yesterday: '昨天',
+    previous7Days: '最近 7 天',
+    previous30Days: '最近 30 天',
+    older: '更早',
+    pinned: '已置顶',
+    noThreads: '暂无会话',
+    noMatchingThreads: '没有匹配的会话',
+    loadingThreads: '正在加载会话...',
+    threads: '会话',
+    organize: '整理',
+    organizeThreads: '整理会话',
+    byProject: '按项目',
+    chronologicalList: '按时间排列',
+    editName: '编辑名称',
+    projectName: '项目名称',
+    archive: '归档',
+    rename: '重命名',
+    renameHint: '请简短且易于识别。',
+    addTitlePlaceholder: '添加标题...',
+    fork: '分叉',
+    browseFiles: '浏览文件',
+    exportThread: '导出会话',
+    deleteThread: '删除会话',
+    deleteThreadTitle: '删除会话？',
+    archiveAndRemoveAutomationTitle: '归档会话并移除自动化？',
+    archiveAndRemoveAutomationDesc: '这将归档会话"{title}"并移除关联的心跳自动化。',
+    deleteThreadDesc: '这将归档会话"{title}"。您可以稍后在已归档的会话中找到它。',
+    archiveAndRemove: '归档并移除',
+    delete: '删除',
+    cancel: '取消',
+    save: '保存',
+    saving: '保存中\u2026',
+    remove: '移除',
+    removeProject: '移除项目',
+    reorderProject: '重新排序项目',
+    addAutomation: '添加自动化\u2026',
+    editAutomation: '编辑自动化\u2026',
+    threadAutomation: '会话自动化',
+    automationDesc: '这将为所选会话创建一个心跳自动化。',
+    automationName: '名称',
+    automationNamePlaceholder: '自动化名称',
+    automationPrompt: '提示词',
+    automationPromptPlaceholder: '描述自动化应执行的操作',
+    automationSchedule: '调度规则 (RRULE)',
+    automationStatus: '状态',
+    automationActive: '活跃',
+    automationPaused: '已暂停',
+    failedToSaveAutomation: '保存自动化失败',
+    failedToRemoveAutomation: '移除自动化失败',
+    awaitingApproval: '等待审批',
+    awaitingResponse: '等待响应',
+    notScheduled: '未安排',
+    nextRun: '下次运行',
+    worktreeThread: '工作树会话',
+    auto: '自动',
+  },
+
+  settings: {
+    accounts: '账户',
+    reload: '重新加载',
+    reloading: '加载中\u2026',
+    requireCmdEnter: '需要 \u2318 + 回车发送',
+    whenBusySendAs: '忙碌时发送方式',
+    appearance: '外观',
+    language: '语言',
+    chatWidth: '对话宽度',
+    standard: '标准',
+    wide: '宽',
+    extraWide: '超宽',
+    system: '跟随系统',
+    light: '浅色',
+    dark: '深色',
+    clickToggleDictation: '点击切换听写',
+    autoSendDictation: '自动发送听写',
+    githubTrending: 'GitHub 热门项目',
+    provider: '服务商',
+    dictationLanguage: '听写语言',
+    autoDetect: '自动检测',
+    telegram: 'Telegram',
+    notConfigured: '未配置',
+    configured: '已配置',
+    expandAccounts: '展开账户',
+    collapseAccounts: '收起账户',
+    workspace: '工作区',
+    runCodexLogin: '运行 `codex login`，然后点击重新加载。',
+    active: '当前',
+    switch_: '切换',
+    switching: '切换中\u2026',
+    unavailable: '不可用',
+    remove: '移除',
+    removeConfirm: '确认移除？',
+    removing: '移除中\u2026',
+    openRouterApiKey: 'OpenRouter API 密钥',
+    getApiKey: '获取 API 密钥',
+    customEndpoint: '自定义端点',
+    endpointUrl: '端点 URL',
+    apiKey: 'API 密钥',
+    save: '保存',
+    saving: '保存中\u2026',
+  },
+}
+
+export default zh
diff --git a/src/main.ts b/src/main.ts
index 8d372767..d9db7110 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import i18n from './i18n'
 import './style.css'
 
 console.log('Welcome to codexui. npm: https://www.npmjs.com/package/@nervmor/codexui')
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).use(i18n).mount('#app')
 
 if ('serviceWorker' in navigator && import.meta.env.PROD) {
   window.addEventListener('load', () => {
@@ -13,4 +14,4 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) {
       console.error('Service worker registration failed.', error)
     })
   })
-}
+}
\ No newline at end of file

From c0b7406a09d63c4f754b93f3c5a6875cf02106c7 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 15:39:58 +0800
Subject: [PATCH 02/30] feat(config): Add config.toml editor modal and backend
 routes

- Add a settings entry and modal to view and edit the Codex config file
- Implement GET and PUT `/codex-api/config-file` routes for loading and saving content
- Support `CODEX_HOME` fallback resolution and create the config directory on write
- Add English and Chinese i18n strings plus dark mode styles for the editor modal
---
 src/App.vue                                  |   7 +
 src/components/content/ConfigEditorModal.vue | 206 +++++++++++++++++++
 src/components/content/ThreadComposer.vue    |  20 +-
 src/i18n/locales/en.ts                       |   3 +
 src/i18n/locales/zh.ts                       |   3 +
 src/server/codexAppServerBridge.ts           |   5 +
 src/server/configRoutes.ts                   |  66 ++++++
 src/style.css                                |  37 ++++
 8 files changed, 337 insertions(+), 10 deletions(-)
 create mode 100644 src/components/content/ConfigEditorModal.vue
 create mode 100644 src/server/configRoutes.ts

diff --git a/src/App.vue b/src/App.vue
index 83738f04..a1e60057 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -412,6 +412,10 @@
                   </button>
                 </div>
               </div>
+              <button class="sidebar-settings-row" type="button" @click="isConfigEditorOpen = true">
+                <span class="sidebar-settings-label">{{ $t('settings.configEditor') }}</span>
+                <span class="sidebar-settings-value">config.toml</span>
+              </button>
               <div
                 v-if="showThreadContextBadge"
                 class="sidebar-settings-row sidebar-settings-context-row"
@@ -787,6 +791,7 @@
       </section>
     </template>
   </DesktopLayout>
+  <ConfigEditorModal :visible="isConfigEditorOpen" @close="isConfigEditorOpen = false" />
 </template>
 
 <script setup lang="ts">
@@ -838,6 +843,7 @@ import { getPathLeafName, getPathParent, normalizePathForUi } from './pathUtils.
 const ThreadConversation = defineAsyncComponent(() => import('./components/content/ThreadConversation.vue'))
 const ReviewPane = defineAsyncComponent(() => import('./components/content/ReviewPane.vue'))
 const SkillsHub = defineAsyncComponent(() => import('./components/content/SkillsHub.vue'))
+const ConfigEditorModal = defineAsyncComponent(() => import('./components/content/ConfigEditorModal.vue'))
 
 const SIDEBAR_COLLAPSED_STORAGE_KEY = 'codex-web-local.sidebar-collapsed.v1'
 const ACCOUNTS_SECTION_COLLAPSED_STORAGE_KEY = 'codex-web-local.accounts-section-collapsed.v1'
@@ -1126,6 +1132,7 @@ const customEndpointWireApi = ref<'responses' | 'chat'>('responses')
 const openRouterWireApi = ref<'responses' | 'chat'>('responses')
 const opencodeZenKey = ref('')
 const isTelegramConfigOpen = ref(false)
+const isConfigEditorOpen = ref(false)
 const telegramBotTokenDraft = ref('')
 const telegramAllowedUserIdsDraft = ref('')
 const telegramConfigError = ref('')
diff --git a/src/components/content/ConfigEditorModal.vue b/src/components/content/ConfigEditorModal.vue
new file mode 100644
index 00000000..0e2fb1bc
--- /dev/null
+++ b/src/components/content/ConfigEditorModal.vue
@@ -0,0 +1,206 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="cem-overlay" @click.self="$emit('close')">
+      <div class="cem-panel">
+        <!-- Header -->
+        <div class="cem-header">
+          <h3 class="cem-title">{{ $t('settings.configEditor') }}</h3>
+          <button class="cem-close" type="button" aria-label="Close" @click="$emit('close')">
+            <IconTablerX class="cem-close-icon" />
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="cem-body">
+          <template v-if="isLoading">
+            <div class="cem-loading">{{ $t('common.loading') }}</div>
+          </template>
+          <template v-else>
+            <span v-if="filePath" class="cem-filepath">{{ filePath }}</span>
+            <textarea
+              v-model="content"
+              class="cem-textarea"
+              rows="20"
+              spellcheck="false"
+              autocomplete="off"
+            />
+          </template>
+        </div>
+
+        <!-- Footer -->
+        <div class="cem-footer">
+          <span v-if="feedback" :class="['cem-feedback', feedbackOk ? 'cem-feedback-ok' : 'cem-feedback-err']">
+            {{ feedback }}
+          </span>
+          <div class="cem-actions">
+            <button class="cem-btn cem-btn-secondary" type="button" @click="$emit('close')">
+              {{ $t('common.cancel') }}
+            </button>
+            <button
+              class="cem-btn cem-btn-primary"
+              type="button"
+              :disabled="isSaving || isLoading"
+              @click="onSave"
+            >
+              {{ isSaving ? $t('settings.saving') : $t('settings.save') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+/**
+ * Modal dialog for editing the Codex config.toml file.
+ * Fetches current content on open, allows editing, and saves back via API.
+ */
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import IconTablerX from '../icons/IconTablerX.vue'
+
+const props = defineProps<{ visible: boolean }>()
+defineEmits<{ close: [] }>()
+
+const { t } = useI18n()
+
+const content = ref('')
+const filePath = ref('')
+const isLoading = ref(false)
+const isSaving = ref(false)
+const feedback = ref('')
+const feedbackOk = ref(false)
+
+/**
+ * Fetch the current config file content from the backend.
+ */
+async function fetchConfig(): Promise<void> {
+  isLoading.value = true
+  feedback.value = ''
+  try {
+    const resp = await fetch('/codex-api/config-file')
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data = (await resp.json()) as { content?: string; path?: string }
+    content.value = data.content ?? ''
+    filePath.value = data.path ?? ''
+  } catch {
+    content.value = ''
+    filePath.value = ''
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Save the edited content back to the config file via PUT.
+ */
+async function onSave(): Promise<void> {
+  isSaving.value = true
+  feedback.value = ''
+  try {
+    const resp = await fetch('/codex-api/config-file', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: content.value }),
+    })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    feedbackOk.value = true
+    feedback.value = t('settings.configSaved')
+  } catch {
+    feedbackOk.value = false
+    feedback.value = t('settings.configSaveError')
+  } finally {
+    isSaving.value = false
+  }
+}
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) {
+      content.value = ''
+      filePath.value = ''
+      feedback.value = ''
+      void fetchConfig()
+    }
+  },
+)
+</script>
+
+<style scoped>
+@reference "tailwindcss";
+
+.cem-overlay {
+  @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50;
+}
+
+.cem-panel {
+  @apply w-full max-w-[640px] max-h-[90vh] rounded-2xl bg-white shadow-xl flex flex-col overflow-hidden mx-4 border border-zinc-200;
+}
+
+.cem-header {
+  @apply flex items-center justify-between px-5 py-4 border-b border-zinc-100 shrink-0;
+}
+
+.cem-title {
+  @apply text-lg font-semibold text-zinc-900 m-0;
+}
+
+.cem-close {
+  @apply shrink-0 h-7 w-7 rounded-lg border-0 bg-transparent text-zinc-400 flex items-center justify-center transition hover:bg-zinc-100 hover:text-zinc-700;
+}
+
+.cem-close-icon {
+  @apply w-4 h-4;
+}
+
+.cem-body {
+  @apply p-5 flex flex-col gap-2 overflow-y-auto flex-1 min-h-0;
+}
+
+.cem-loading {
+  @apply text-sm text-zinc-400 py-8 text-center;
+}
+
+.cem-filepath {
+  @apply text-xs text-zinc-400 font-mono truncate;
+}
+
+.cem-textarea {
+  @apply w-full rounded-lg border border-zinc-200 bg-zinc-50 text-zinc-900 font-mono text-sm p-3 leading-relaxed resize-y outline-none focus:border-zinc-400 transition;
+  min-height: 320px;
+}
+
+.cem-footer {
+  @apply flex items-center justify-between px-5 py-4 border-t border-zinc-100 shrink-0 gap-3;
+}
+
+.cem-feedback {
+  @apply text-xs truncate;
+}
+
+.cem-feedback-ok {
+  @apply text-emerald-600;
+}
+
+.cem-feedback-err {
+  @apply text-rose-600;
+}
+
+.cem-actions {
+  @apply flex items-center gap-2 shrink-0 ml-auto;
+}
+
+.cem-btn {
+  @apply rounded-lg px-3 py-1.5 text-sm font-medium transition border-0 disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.cem-btn-primary {
+  @apply bg-zinc-900 text-white hover:bg-black;
+}
+
+.cem-btn-secondary {
+  @apply bg-zinc-100 text-zinc-700 hover:bg-zinc-200;
+}
+</style>
diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index a1e18cd0..0cdee8c6 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -255,6 +255,16 @@
             @update:model-value="onModelSelect"
           />
 
+          <ComposerDropdown
+            class="thread-composer-control"
+            :model-value="selectedReasoningEffort"
+            :options="reasoningOptions"
+            placeholder="Thinking"
+            open-direction="up"
+            :disabled="disabled || !activeThreadId || isTurnInProgress"
+            @update:model-value="onReasoningEffortSelect"
+          />
+
           <ComposerSearchDropdown
             class="thread-composer-control"
             :options="skillDropdownOptions"
@@ -265,16 +275,6 @@
             :disabled="disabled || !activeThreadId || isTurnInProgress"
             @toggle="onSkillDropdownToggle"
           />
-
-          <ComposerDropdown
-            class="thread-composer-control"
-            :model-value="selectedReasoningEffort"
-            :options="reasoningOptions"
-            placeholder="Thinking"
-            open-direction="up"
-            :disabled="disabled || !activeThreadId || isTurnInProgress"
-            @update:model-value="onReasoningEffortSelect"
-          />
         </template>
 
         <div
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index f6fbb1c3..5e1dca3b 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -451,6 +451,9 @@ const en = {
     apiKey: 'API key',
     save: 'Save',
     saving: 'Saving\u2026',
+    configEditor: 'Config Editor',
+    configSaved: 'Config saved successfully',
+    configSaveError: 'Failed to save config',
   },
 }
 
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index 1332ce63..61e44835 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -450,6 +450,9 @@ const zh = {
     apiKey: 'API 密钥',
     save: '保存',
     saving: '保存中\u2026',
+    configEditor: '配置编辑器',
+    configSaved: '配置保存成功',
+    configSaveError: '保存配置失败',
   },
 }
 
diff --git a/src/server/codexAppServerBridge.ts b/src/server/codexAppServerBridge.ts
index f2ddcbe1..d6e1856d 100644
--- a/src/server/codexAppServerBridge.ts
+++ b/src/server/codexAppServerBridge.ts
@@ -12,6 +12,7 @@ import { createInterface } from 'node:readline'
 import { writeFile } from 'node:fs/promises'
 import { handleAccountRoutes } from './accountRoutes.js'
 import { buildAppServerArgs } from './appServerRuntimeConfig.js'
+import { handleConfigRoutes } from './configRoutes.js'
 import { handleReviewRoutes } from './reviewGit.js'
 import { handleSkillsRoutes, initializeSkillsSyncOnStartup } from './skillsRoutes.js'
 import { TelegramThreadBridge } from './telegramThreadBridge.js'
@@ -3519,6 +3520,10 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
         return
       }
 
+      if (await handleConfigRoutes(req, res, url, { readJsonBody })) {
+        return
+      }
+
       if (req.method === 'POST' && url.pathname === '/codex-api/upload-file') {
         handleFileUpload(req, res)
         return
diff --git a/src/server/configRoutes.ts b/src/server/configRoutes.ts
new file mode 100644
index 00000000..63975e8f
--- /dev/null
+++ b/src/server/configRoutes.ts
@@ -0,0 +1,66 @@
+/**
+ * Routes for reading and writing the raw ~/.codex/config.toml file.
+ */
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { homedir } from 'node:os'
+import { dirname, join } from 'node:path'
+
+function getCodexHomeDir(): string {
+  const codexHome = process.env.CODEX_HOME?.trim()
+  return codexHome && codexHome.length > 0 ? codexHome : join(homedir(), '.codex')
+}
+
+function getConfigFilePath(): string {
+  return join(getCodexHomeDir(), 'config.toml')
+}
+
+function setJson(res: ServerResponse, statusCode: number, payload: unknown): void {
+  res.statusCode = statusCode
+  res.setHeader('Content-Type', 'application/json; charset=utf-8')
+  res.end(JSON.stringify(payload))
+}
+
+/**
+ * Handles config file routes for reading/writing ~/.codex/config.toml.
+ *
+ * @param req - Incoming HTTP request.
+ * @param res - Server response.
+ * @param url - Parsed request URL.
+ * @param readJsonBody - Helper to parse JSON request body.
+ * @returns True if the route was handled, false otherwise.
+ */
+export async function handleConfigRoutes(
+  req: IncomingMessage,
+  res: ServerResponse,
+  url: URL,
+  context: { readJsonBody: (req: IncomingMessage) => Promise<unknown> },
+): Promise<boolean> {
+  if (req.method === 'GET' && url.pathname === '/codex-api/config-file') {
+    const filePath = getConfigFilePath()
+    try {
+      const content = await readFile(filePath, 'utf8')
+      setJson(res, 200, { content, path: filePath })
+    } catch {
+      setJson(res, 200, { content: '', path: filePath })
+    }
+    return true
+  }
+
+  if (req.method === 'PUT' && url.pathname === '/codex-api/config-file') {
+    const filePath = getConfigFilePath()
+    try {
+      const payload = (await context.readJsonBody(req)) as Record<string, unknown> | null
+      const content = typeof payload?.content === 'string' ? payload.content : ''
+      await mkdir(dirname(filePath), { recursive: true })
+      await writeFile(filePath, content, 'utf8')
+      setJson(res, 200, { ok: true, path: filePath })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to write config file'
+      setJson(res, 500, { ok: false, error: message })
+    }
+    return true
+  }
+
+  return false
+}
diff --git a/src/style.css b/src/style.css
index 28520495..3d3f40a0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1355,3 +1355,40 @@
     font-size: 16px !important;
   }
 }
+
+/* Config editor modal dark mode */
+:root.dark .cem-panel {
+  @apply bg-zinc-900 border-zinc-700;
+}
+
+:root.dark .cem-header {
+  @apply border-zinc-700;
+}
+
+:root.dark .cem-title {
+  @apply text-zinc-100;
+}
+
+:root.dark .cem-close {
+  @apply text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200;
+}
+
+:root.dark .cem-filepath {
+  @apply text-zinc-500;
+}
+
+:root.dark .cem-textarea {
+  @apply border-zinc-700 bg-zinc-950 text-zinc-100 focus:border-zinc-500;
+}
+
+:root.dark .cem-footer {
+  @apply border-zinc-700;
+}
+
+:root.dark .cem-btn-primary {
+  @apply bg-zinc-100 text-zinc-900 hover:bg-white;
+}
+
+:root.dark .cem-btn-secondary {
+  @apply bg-zinc-800 text-zinc-300 hover:bg-zinc-700;
+}

From 036708ff2f5ca8f941c56a59fa63befc79f70577 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 15:52:57 +0800
Subject: [PATCH 03/30] feat(composer): Add MCP server toggle dropdown

- Add a composer dropdown to list configured MCP servers and show the enabled count
- Read MCP server state from config and update it through batch writes followed by reload
- Handle loading, empty, and toggle-in-progress states with localized messages
- Add dark mode styles and English/Chinese translations for the empty state
---
 src/api/codexGateway.ts                       |  27 +++
 .../content/ComposerMcpDropdown.vue           | 171 ++++++++++++++++++
 src/components/content/ThreadComposer.vue     |   7 +
 src/i18n/locales/en.ts                        |   1 +
 src/i18n/locales/zh.ts                        |   1 +
 src/style.css                                 |   9 +
 6 files changed, 216 insertions(+)
 create mode 100644 src/components/content/ComposerMcpDropdown.vue

diff --git a/src/api/codexGateway.ts b/src/api/codexGateway.ts
index 0ec776d8..b26830a1 100644
--- a/src/api/codexGateway.ts
+++ b/src/api/codexGateway.ts
@@ -1448,6 +1448,33 @@ export async function getAccountRateLimitsResponse(): Promise<GetAccountRateLimi
   return await callRpc<GetAccountRateLimitsResponse>('account/rateLimits/read')
 }
 
+/** MCP server entry with name and enabled state. */
+export type McpServerEntry = { name: string; enabled: boolean }
+
+/** List all configured MCP servers with their enabled state from config. */
+export async function listMcpServers(): Promise<McpServerEntry[]> {
+  const payload = await callRpc<ConfigReadResponse>('config/read', {})
+  const config = payload.config as Record<string, unknown>
+  const mcpServers = config.mcp_servers as Record<string, Record<string, unknown>> | undefined
+  if (!mcpServers || typeof mcpServers !== 'object') return []
+  return Object.entries(mcpServers).map(([name, cfg]) => ({
+    name,
+    enabled: cfg?.enabled !== false,
+  }))
+}
+
+/** Toggle an MCP server's enabled state and reload. */
+export async function setMcpServerEnabled(name: string, enabled: boolean): Promise<void> {
+  await callRpc('config/batchWrite', {
+    edits: [
+      { keyPath: `mcp_servers.${name}.enabled`, value: enabled, mergeStrategy: 'upsert' },
+    ],
+    filePath: null,
+    expectedVersion: null,
+  })
+  await callRpc('mcpServer/reload', {})
+}
+
 function normalizeCollaborationModeLabel(value: string): string {
   const trimmed = value.trim()
   if (!trimmed) return ''
diff --git a/src/components/content/ComposerMcpDropdown.vue b/src/components/content/ComposerMcpDropdown.vue
new file mode 100644
index 00000000..4f46242a
--- /dev/null
+++ b/src/components/content/ComposerMcpDropdown.vue
@@ -0,0 +1,171 @@
+<template>
+  <div ref="rootRef" class="mcp-dropdown">
+    <button
+      class="mcp-dropdown-trigger"
+      type="button"
+      :disabled="disabled"
+      @click="onToggle"
+    >
+      <span class="mcp-dropdown-value">MCP</span>
+      <span v-if="enabledCount > 0" class="mcp-dropdown-badge">{{ enabledCount }}</span>
+      <IconTablerChevronDown class="mcp-dropdown-chevron" />
+    </button>
+
+    <div
+      v-if="isOpen"
+      class="mcp-dropdown-menu"
+      :class="{ 'mcp-dropdown-menu-up': openDirection === 'up' }"
+    >
+      <div v-if="isLoading" class="mcp-dropdown-loading">{{ $t('common.loading') }}...</div>
+      <div v-else-if="servers.length === 0" class="mcp-dropdown-empty">{{ $t('composer.noMcpServers') }}</div>
+      <template v-else>
+        <label
+          v-for="server in servers"
+          :key="server.name"
+          class="mcp-dropdown-option"
+        >
+          <input
+            class="mcp-dropdown-checkbox"
+            type="checkbox"
+            :checked="server.enabled"
+            :disabled="togglingName === server.name"
+            @change="onToggleServer(server)"
+          />
+          <span class="mcp-dropdown-name">{{ server.name }}</span>
+          <span v-if="togglingName === server.name" class="mcp-dropdown-spinner" />
+        </label>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Dropdown for toggling MCP servers on/off.
+ * Reads server list from config, toggles enabled state via config/batchWrite + mcpServer/reload.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { listMcpServers, setMcpServerEnabled, type McpServerEntry } from '../../api/codexGateway'
+import IconTablerChevronDown from '../icons/IconTablerChevronDown.vue'
+
+defineProps<{
+  disabled?: boolean
+  openDirection?: 'up' | 'down'
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const isLoading = ref(false)
+const servers = ref<McpServerEntry[]>([])
+const togglingName = ref('')
+
+const enabledCount = computed(() => servers.value.filter((s) => s.enabled).length)
+
+async function fetchServers(): Promise<void> {
+  isLoading.value = true
+  try {
+    servers.value = await listMcpServers()
+  } catch {
+    servers.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function onToggle(): void {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) void fetchServers()
+}
+
+async function onToggleServer(server: McpServerEntry): Promise<void> {
+  togglingName.value = server.name
+  try {
+    const next = !server.enabled
+    await setMcpServerEnabled(server.name, next)
+    server.enabled = next
+  } catch {
+    // revert visually on failure by re-fetching
+    await fetchServers()
+  } finally {
+    togglingName.value = ''
+  }
+}
+
+function onDocumentPointerDown(event: PointerEvent): void {
+  if (!isOpen.value) return
+  const root = rootRef.value
+  if (!root) return
+  const target = event.target
+  if (!(target instanceof Node)) return
+  if (root.contains(target)) return
+  isOpen.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('pointerdown', onDocumentPointerDown)
+  void fetchServers()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('pointerdown', onDocumentPointerDown)
+})
+</script>
+
+<style scoped>
+@reference "tailwindcss";
+
+.mcp-dropdown {
+  @apply relative inline-flex min-w-0;
+}
+
+.mcp-dropdown-trigger {
+  @apply inline-flex min-h-7 min-w-0 items-center gap-1 border-0 bg-transparent px-0 py-0.5 text-sm leading-tight text-zinc-500 outline-none transition;
+}
+
+.mcp-dropdown-trigger:disabled {
+  @apply cursor-not-allowed text-zinc-500;
+}
+
+.mcp-dropdown-value {
+  @apply whitespace-nowrap text-left pb-px;
+}
+
+.mcp-dropdown-badge {
+  @apply inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-emerald-600 px-1 text-[10px] font-medium text-white leading-none;
+}
+
+.mcp-dropdown-chevron {
+  @apply mt-px h-3.5 w-3.5 shrink-0 text-zinc-500;
+}
+
+.mcp-dropdown-menu {
+  @apply absolute left-0 z-50 w-56 rounded-xl border border-zinc-200 bg-white p-1 shadow-lg;
+  top: calc(100% + 8px);
+}
+
+.mcp-dropdown-menu-up {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+.mcp-dropdown-loading,
+.mcp-dropdown-empty {
+  @apply px-2 py-2 text-xs text-zinc-400 text-center;
+}
+
+.mcp-dropdown-option {
+  @apply flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-zinc-700 transition hover:bg-zinc-100 cursor-pointer;
+}
+
+.mcp-dropdown-checkbox {
+  @apply h-3.5 w-3.5 shrink-0 accent-emerald-600;
+}
+
+.mcp-dropdown-name {
+  @apply flex-1 min-w-0 truncate;
+}
+
+.mcp-dropdown-spinner {
+  @apply h-3 w-3 shrink-0 rounded-full border-2 border-zinc-300 border-t-zinc-600 animate-spin;
+}
+</style>
diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index 0cdee8c6..c76b6369 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -265,6 +265,12 @@
             @update:model-value="onReasoningEffortSelect"
           />
 
+          <ComposerMcpDropdown
+            class="thread-composer-control"
+            :disabled="disabled || !activeThreadId || isTurnInProgress"
+            open-direction="up"
+          />
+
           <ComposerSearchDropdown
             class="thread-composer-control"
             :options="skillDropdownOptions"
@@ -392,6 +398,7 @@ import IconTablerFolder from '../icons/IconTablerFolder.vue'
 import IconTablerMicrophone from '../icons/IconTablerMicrophone.vue'
 import IconTablerPlayerStopFilled from '../icons/IconTablerPlayerStopFilled.vue'
 import ComposerDropdown from './ComposerDropdown.vue'
+import ComposerMcpDropdown from './ComposerMcpDropdown.vue'
 import ComposerSearchDropdown from './ComposerSearchDropdown.vue'
 import ComposerSkillPicker from './ComposerSkillPicker.vue'
 
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 5e1dca3b..da36d5aa 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -88,6 +88,7 @@ const en = {
     runtimeLocal: 'Local project',
     runtimeWorktree: 'New worktree',
     continueIn: 'Continue in',
+    noMcpServers: 'No MCP servers configured',
   },
 
   conversation: {
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index 61e44835..5e94e864 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -87,6 +87,7 @@ const zh = {
     runtimeLocal: '本地项目',
     runtimeWorktree: '新工作树',
     continueIn: '继续方式',
+    noMcpServers: '未配置 MCP 服务器',
   },
 
   conversation: {
diff --git a/src/style.css b/src/style.css
index 3d3f40a0..0b5a6b04 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1392,3 +1392,12 @@
 :root.dark .cem-btn-secondary {
   @apply bg-zinc-800 text-zinc-300 hover:bg-zinc-700;
 }
+
+/* MCP dropdown dark mode */
+:root.dark .mcp-dropdown-menu {
+  @apply border-zinc-700 bg-zinc-800;
+}
+
+:root.dark .mcp-dropdown-option {
+  @apply text-zinc-200 hover:bg-zinc-700;
+}

From 74f34764d77cba3c9b07407d8a699f66bcafb595 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 16:00:35 +0800
Subject: [PATCH 04/30] fix(composer): Handle dictation auth and transcription
 errors

- Map known dictation error messages to localized feedback in the composer
- Add English and Chinese translations for missing auth token errors
- Add English and Chinese translations for transcription failure errors
---
 src/components/content/ThreadComposer.vue | 9 ++++++++-
 src/i18n/locales/en.ts                    | 2 ++
 src/i18n/locales/zh.ts                    | 2 ++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index c76b6369..dc20d3a1 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -527,7 +527,14 @@ const {
       dictationFeedback.value = t('composer.micDenied')
       return
     }
-    dictationFeedback.value = error instanceof Error ? error.message : t('composer.dictationFailed')
+    const msg = error instanceof Error ? error.message : ''
+    if (msg.includes('No auth token')) {
+      dictationFeedback.value = t('composer.noAuthToken')
+    } else if (msg.includes('Transcription failed')) {
+      dictationFeedback.value = t('composer.transcriptionFailed')
+    } else {
+      dictationFeedback.value = msg || t('composer.dictationFailed')
+    }
   },
 })
 const attachMenuRootRef = ref<HTMLElement | null>(null)
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index da36d5aa..e8a559ee 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -89,6 +89,8 @@ const en = {
     runtimeWorktree: 'New worktree',
     continueIn: 'Continue in',
     noMcpServers: 'No MCP servers configured',
+    noAuthToken: 'No auth token available for transcription.',
+    transcriptionFailed: 'Transcription failed.',
   },
 
   conversation: {
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index 5e94e864..e5a4c8d2 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -88,6 +88,8 @@ const zh = {
     runtimeWorktree: '新工作树',
     continueIn: '继续方式',
     noMcpServers: '未配置 MCP 服务器',
+    noAuthToken: '没有可用的转录认证令牌。',
+    transcriptionFailed: '语音转录失败。',
   },
 
   conversation: {

From 7d1a0021a4e9a2a876b5ce208d1147b7510763c7 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 17:50:00 +0800
Subject: [PATCH 05/30] feat(file-manager): Add file manager UI and server
 routes

- Implement file management API endpoints for listing, creating, moving, deleting, downloading, and uploading files
- Enforce allowed-root path validation for write operations and handle common file system errors
- Add reusable FileManager and FileManagerPanel components with breadcrumbs, context menu, uploads, and dark mode styles
- Integrate file manager access through a new /files route and a thread composer side panel toggle
- Add English and Chinese locale strings and include Tabler Vue icons for file type and action visuals
---
 package.json                                |   1 +
 src/App.vue                                 |  49 +-
 src/components/content/FileManager.vue      | 635 ++++++++++++++++++++
 src/components/content/FileManagerPanel.vue |  82 +++
 src/components/content/ThreadComposer.vue   |  21 +
 src/i18n/locales/en.ts                      |  25 +
 src/i18n/locales/zh.ts                      |  25 +
 src/router/index.ts                         |   5 +
 src/server/codexAppServerBridge.ts          |   5 +
 src/server/fileRoutes.ts                    | 314 ++++++++++
 src/style.css                               |  78 +++
 11 files changed, 1236 insertions(+), 4 deletions(-)
 create mode 100644 src/components/content/FileManager.vue
 create mode 100644 src/components/content/FileManagerPanel.vue
 create mode 100644 src/server/fileRoutes.ts

diff --git a/package.json b/package.json
index 2fb13bfa..6e0b2ac3 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "profile:thread": "PROFILE_ROUTE='#/thread/019da7c0-4e12-7a91-837c-f7c11cc8ab6c' node scripts/profile-browser-runtime.cjs"
   },
   "dependencies": {
+    "@tabler/icons-vue": "^3.41.1",
     "commander": "^13.1.0",
     "express": "^5.1.0",
     "firebase": "^12.2.1",
diff --git a/src/App.vue b/src/App.vue
index a1e60057..145edd67 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,16 @@
             {{ $t('home.skillsHub') }}
           </button>
 
+          <button
+            v-if="!isSidebarCollapsed"
+            class="sidebar-skills-link"
+            :class="{ 'is-active': isFilesRoute }"
+            type="button"
+            @click="router.push({ name: 'files' }); isMobile && setSidebarCollapsed(true)"
+          >
+            {{ $t('fileManager.title') }}
+          </button>
+
           <SidebarThreadTree :groups="projectGroups" :project-display-name-by-id="projectDisplayNameById"
             v-if="!isSidebarCollapsed"
             :selected-thread-id="selectedThreadId" :is-loading="isLoadingThreads"
@@ -484,6 +494,11 @@
           <template v-if="isSkillsRoute">
             <SkillsHub @skills-changed="onSkillsChanged" />
           </template>
+          <template v-else-if="isFilesRoute">
+            <div class="content-grid">
+              <FileManager :cwd="defaultWorkspacePath" />
+            </div>
+          </template>
           <template v-else-if="isHomeRoute">
             <div class="content-grid content-grid-home">
               <div class="new-thread-empty">
@@ -734,6 +749,8 @@
               />
 
               <template v-else>
+                <div class="content-thread-with-panel">
+                <div class="content-thread-main">
                 <div class="content-thread">
                   <ThreadConversation ref="threadConversationRef" :messages="filteredMessages" :is-loading="isLoadingMessages"
                     :active-thread-id="composerThreadContextId" :cwd="composerCwd" :scroll-state="selectedThreadScrollState"
@@ -782,7 +799,15 @@
                     @submit="onSubmitThreadMessage" @update:selected-model="onSelectModel"
                     @update:selected-reasoning-effort="onSelectReasoningEffort"
                     @update:selected-speed-mode="onSelectSpeedMode"
-                    @interrupt="onInterruptTurn" />
+                    @interrupt="onInterruptTurn"
+                    @toggle-file-manager="isFileManagerPanelOpen = !isFileManagerPanelOpen" />
+                </div>
+                </div>
+                <FileManagerPanel
+                  :visible="isFileManagerPanelOpen && !!composerCwd"
+                  :cwd="composerCwd || '/'"
+                  @close="isFileManagerPanelOpen = false"
+                />
                 </div>
               </template>
             </div>
@@ -844,6 +869,8 @@ const ThreadConversation = defineAsyncComponent(() => import('./components/conte
 const ReviewPane = defineAsyncComponent(() => import('./components/content/ReviewPane.vue'))
 const SkillsHub = defineAsyncComponent(() => import('./components/content/SkillsHub.vue'))
 const ConfigEditorModal = defineAsyncComponent(() => import('./components/content/ConfigEditorModal.vue'))
+const FileManager = defineAsyncComponent(() => import('./components/content/FileManager.vue'))
+const FileManagerPanel = defineAsyncComponent(() => import('./components/content/FileManagerPanel.vue'))
 
 const SIDEBAR_COLLAPSED_STORAGE_KEY = 'codex-web-local.sidebar-collapsed.v1'
 const ACCOUNTS_SECTION_COLLAPSED_STORAGE_KEY = 'codex-web-local.accounts-section-collapsed.v1'
@@ -1133,6 +1160,7 @@ const openRouterWireApi = ref<'responses' | 'chat'>('responses')
 const opencodeZenKey = ref('')
 const isTelegramConfigOpen = ref(false)
 const isConfigEditorOpen = ref(false)
+const isFileManagerPanelOpen = ref(false)
 const telegramBotTokenDraft = ref('')
 const telegramAllowedUserIdsDraft = ref('')
 const telegramConfigError = ref('')
@@ -1174,8 +1202,10 @@ const routeThreadId = computed(() => {
 
 const isHomeRoute = computed(() => route.name === 'home')
 const isSkillsRoute = computed(() => route.name === 'skills')
+const isFilesRoute = computed(() => route.name === 'files')
 const contentTitle = computed(() => {
   if (isSkillsRoute.value) return t('common.skills')
+  if (isFilesRoute.value) return t('fileManager.title')
   if (isHomeRoute.value) return t('home.newThread')
   return selectedThread.value?.title ?? t('home.newThread')
 })
@@ -1211,12 +1241,15 @@ const selectedThreadPendingRequest = computed<UiServerRequest | null>(() => {
   const rows = selectedThreadServerRequests.value
   return rows.length > 0 ? rows[rows.length - 1] : null
 })
+const defaultWorkspacePath = computed(() => {
+  return workspaceRootOptionsState.value.order[0]?.trim() || homeDirectory.value.trim() || '/'
+})
 const composerCwd = computed(() => {
   if (isHomeRoute.value) return newThreadCwd.value.trim()
   return selectedThread.value?.cwd?.trim() ?? ''
 })
 const isSelectedThreadInProgress = computed(() => !isHomeRoute.value && selectedThread.value?.inProgress === true)
-const showThreadContextBadge = computed(() => !isHomeRoute.value && !isSkillsRoute.value && selectedThreadId.value.trim().length > 0)
+const showThreadContextBadge = computed(() => !isHomeRoute.value && !isSkillsRoute.value && !isFilesRoute.value && selectedThreadId.value.trim().length > 0)
 const isAccountSwitchBlocked = computed(() =>
   isSendingMessage.value ||
   isInterruptingTurn.value ||
@@ -2592,7 +2625,7 @@ function onRollback(payload: { turnId: string }): void {
 
 
 function onExportChat(): void {
-  if (isHomeRoute.value || isSkillsRoute.value || typeof document === 'undefined') return
+  if (isHomeRoute.value || isSkillsRoute.value || isFilesRoute.value || typeof document === 'undefined') return
   if (!selectedThread.value || filteredMessages.value.length === 0) return
   const markdown = buildThreadMarkdown()
   const fileName = buildExportFileName()
@@ -3098,7 +3131,7 @@ watch(
   async (threadId) => {
     if (!hasInitialized.value) return
     if (isRouteSyncInProgress.value) return
-    if (isHomeRoute.value || isSkillsRoute.value) return
+    if (isHomeRoute.value || isSkillsRoute.value || isFilesRoute.value) return
 
     if (!threadId) {
       if (route.name !== 'home') {
@@ -3392,6 +3425,14 @@ async function loadWorktreeBranches(sourceCwd: string): Promise<void> {
   @apply overflow-y-auto;
 }
 
+.content-thread-with-panel {
+  @apply flex-1 min-h-0 flex flex-row;
+}
+
+.content-thread-main {
+  @apply flex-1 min-h-0 min-w-0 flex flex-col;
+}
+
 .content-thread {
   @apply flex-1 min-h-0;
 }
diff --git a/src/components/content/FileManager.vue b/src/components/content/FileManager.vue
new file mode 100644
index 00000000..d63e49b8
--- /dev/null
+++ b/src/components/content/FileManager.vue
@@ -0,0 +1,635 @@
+<template>
+  <div class="fm-root">
+    <!-- Toolbar -->
+    <div class="fm-toolbar">
+      <button class="fm-toolbar-btn" type="button" :disabled="!parentPath" @click="navigateUp" :title="$t('fileManager.goUp')">
+        <IconTablerChevronLeft class="fm-toolbar-icon" />
+      </button>
+      <div class="fm-breadcrumb" :title="currentPath">
+        <template v-for="(seg, idx) in breadcrumbSegments" :key="idx">
+          <span v-if="idx > 0" class="fm-breadcrumb-sep">{{ detectSep(currentPath) }}</span>
+          <button class="fm-breadcrumb-btn" type="button" @click="fetchEntries(seg.path)">{{ seg.label }}</button>
+        </template>
+      </div>
+      <div class="fm-toolbar-actions">
+        <button class="fm-toolbar-btn" type="button" @click="onRefresh" :title="$t('common.refresh')">↻</button>
+        <button class="fm-toolbar-btn" type="button" @click.stop="showNewMenu = !showNewMenu" :title="$t('fileManager.newItem')">+</button>
+        <button class="fm-toolbar-btn" type="button" @click="triggerUpload" :title="$t('fileManager.uploadFiles')">↑</button>
+        <button class="fm-toolbar-btn" type="button" @click="triggerFolderUpload" :title="$t('fileManager.uploadFolder')">
+          <IconFolder class="fm-toolbar-icon" />
+        </button>
+      </div>
+    </div>
+
+    <!-- New item menu -->
+    <div v-if="showNewMenu" class="fm-new-menu" @click.stop>
+      <button class="fm-new-menu-item" type="button" @click="startCreateFile">{{ $t('fileManager.newFile') }}</button>
+      <button class="fm-new-menu-item" type="button" @click="startCreateFolder">{{ $t('fileManager.newFolder') }}</button>
+    </div>
+
+    <!-- Inline create input -->
+    <div v-if="createMode" class="fm-create-row">
+      <component :is="createMode === 'file' ? IconFile : IconFolder" class="fm-create-icon" />
+      <input
+        ref="createInputRef"
+        v-model="createName"
+        class="fm-create-input"
+        type="text"
+        :placeholder="createMode === 'file' ? $t('fileManager.fileNamePlaceholder') : $t('fileManager.folderNamePlaceholder')"
+        @keydown.enter="confirmCreate"
+        @keydown.escape="cancelCreate"
+      />
+      <button class="fm-create-confirm" type="button" @click="confirmCreate">✓</button>
+      <button class="fm-create-cancel" type="button" @click="cancelCreate">✕</button>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="isLoading" class="fm-loading">{{ $t('common.loading') }}...</div>
+
+    <!-- Error -->
+    <div v-if="error" class="fm-error">{{ error }}</div>
+
+    <!-- Empty -->
+    <div v-if="!isLoading && !error && entries.length === 0" class="fm-empty">{{ $t('fileManager.emptyFolder') }}</div>
+
+    <!-- File list -->
+    <div v-if="!isLoading && entries.length > 0" class="fm-list">
+      <div
+        v-for="entry in entries"
+        :key="entry.path"
+        class="fm-entry"
+        :class="{ 'is-selected': selectedPath === entry.path }"
+        @click="onEntryClick(entry)"
+        @dblclick="onEntryDblClick(entry)"
+        @contextmenu.prevent="onContextMenu($event, entry)"
+      >
+        <component :is="entryIcon(entry)" class="fm-entry-icon" />
+        <span v-if="renamingPath === entry.path" class="fm-entry-rename-wrap">
+          <input
+            ref="renameInputRef"
+            v-model="renameValue"
+            class="fm-entry-rename-input"
+            type="text"
+            @keydown.enter="confirmRename(entry)"
+            @keydown.escape="cancelRename"
+            @blur="confirmRename(entry)"
+          />
+        </span>
+        <span v-else class="fm-entry-name">{{ entry.name }}</span>
+        <span class="fm-entry-meta">{{ entry.isDirectory ? '' : formatSize(entry.size) }}</span>
+      </div>
+    </div>
+
+    <!-- Context menu -->
+    <Teleport to="body">
+      <div
+        v-if="contextMenu"
+        ref="contextMenuRef"
+        class="fm-context-menu"
+        :style="contextMenuStyle"
+        @click.stop
+      >
+        <button v-if="!contextMenu.entry.isDirectory" class="fm-context-item" type="button" @click="downloadEntry(contextMenu.entry)">
+          {{ $t('fileManager.download') }}
+        </button>
+        <button class="fm-context-item" type="button" @click="startRename(contextMenu.entry)">
+          {{ $t('home.rename') }}
+        </button>
+        <button class="fm-context-item fm-context-item-danger" type="button" @click="deleteEntry(contextMenu.entry)">
+          {{ $t('home.delete') }}
+        </button>
+      </div>
+    </Teleport>
+
+    <!-- Hidden upload inputs -->
+    <input
+      ref="uploadInputRef"
+      class="fm-hidden-input"
+      type="file"
+      multiple
+      @change="onUploadChange"
+    />
+    <input
+      ref="folderUploadInputRef"
+      class="fm-hidden-input"
+      type="file"
+      webkitdirectory
+      directory
+      multiple
+      @change="onFolderUploadChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Reusable file manager component.
+ * Displays directory contents and provides CRUD operations.
+ */
+import { computed, type Component, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  IconFolder,
+  IconFile,
+  IconFileTypeTs,
+  IconFileTypeJs,
+  IconFileTypeJsx,
+  IconFileTypeCss,
+  IconFileTypeHtml,
+  IconFileTypeVue,
+  IconJson,
+  IconMarkdown,
+  IconPhoto,
+  IconFileTypePdf,
+  IconBrandPython,
+  IconSettings,
+  IconFileZip,
+} from '@tabler/icons-vue'
+import IconTablerChevronLeft from '../icons/IconTablerChevronLeft.vue'
+
+type FileEntry = {
+  name: string
+  path: string
+  isDirectory: boolean
+  size: number
+  mtimeMs: number
+  extension: string
+}
+
+type ContextMenuState = {
+  x: number
+  y: number
+  entry: FileEntry
+} | null
+
+const props = defineProps<{
+  cwd: string
+}>()
+
+
+const { t } = useI18n()
+
+/** Extract error message from a failed fetch response. */
+async function extractApiError(resp: Response, fallbackKey: string): Promise<string> {
+  try {
+    const data = (await resp.json()) as { error?: string }
+    if (data.error?.trim()) {
+      // Map known server errors to i18n
+      if (data.error.includes('outside allowed workspace')) return t('fileManager.outsideWorkspace')
+      if (data.error.includes('absolute')) return t('fileManager.invalidPath')
+      if (data.error.includes('not a directory')) return t('fileManager.notADirectory')
+      if (data.error.includes('not a file')) return t('fileManager.notAFile')
+      if (data.error.includes('not found')) return t('fileManager.notFound')
+      return data.error
+    }
+  } catch { /* ignore parse failure */ }
+  return t(fallbackKey)
+}
+
+const currentPath = ref('')
+const parentPath = ref('')
+const entries = ref<FileEntry[]>([])
+const isLoading = ref(false)
+const error = ref('')
+const selectedPath = ref('')
+const showNewMenu = ref(false)
+const createMode = ref<'file' | 'folder' | null>(null)
+const createName = ref('')
+const createInputRef = ref<HTMLInputElement | null>(null)
+const renamingPath = ref('')
+const renameValue = ref('')
+const renameInputRef = ref<HTMLInputElement | null>(null)
+const contextMenu = ref<ContextMenuState>(null)
+const contextMenuRef = ref<HTMLElement | null>(null)
+const contextMenuStyle = ref<Record<string, string>>({})
+const uploadInputRef = ref<HTMLInputElement | null>(null)
+const folderUploadInputRef = ref<HTMLInputElement | null>(null)
+
+/** Detect platform path separator from a server-returned path. */
+function detectSep(p: string): string {
+  return p.includes('\\') ? '\\' : '/'
+}
+
+const breadcrumbSegments = computed(() => {
+  const p = currentPath.value
+  if (!p) return []
+  // Normalize to forward slashes for uniform splitting
+  const normalized = p.replace(/\\/g, '/')
+  const isWin = /^[A-Za-z]:/.test(normalized)
+  const isUnc = p.startsWith('\\\\') || p.startsWith('//')
+  const parts = normalized.split('/').filter(Boolean)
+  const segments: Array<{ label: string; path: string }> = []
+  const sep = detectSep(p)
+
+  if (isUnc && parts.length >= 2) {
+    // UNC path: \\server\share\...
+    const uncRoot = `${sep}${sep}${parts[0]}${sep}${parts[1]}`
+    segments.push({ label: `${sep}${sep}${parts[0]}${sep}${parts[1]}`, path: uncRoot })
+    let accumulated = uncRoot
+    for (let i = 2; i < parts.length; i++) {
+      accumulated = `${accumulated}${sep}${parts[i]}`
+      segments.push({ label: parts[i], path: accumulated })
+    }
+  } else if (isWin) {
+    // Windows drive: C:\Users\...  — first part is "C:", path must be "C:\"
+    const driveRoot = `${parts[0]}${sep}`
+    segments.push({ label: driveRoot, path: driveRoot })
+    let accumulated = driveRoot
+    for (let i = 1; i < parts.length; i++) {
+      accumulated = `${accumulated}${parts[i]}`
+      segments.push({ label: parts[i], path: accumulated })
+      if (i < parts.length - 1) accumulated += sep
+    }
+  } else {
+    // Unix: /home/user/...
+    segments.push({ label: '/', path: '/' })
+    let accumulated = ''
+    for (const part of parts) {
+      accumulated = `${accumulated}/${part}`
+      segments.push({ label: part, path: accumulated })
+    }
+  }
+  return segments
+})
+
+/** Fetch directory listing from the API. */
+async function fetchEntries(dirPath: string): Promise<void> {
+  isLoading.value = true
+  error.value = ''
+  try {
+    const resp = await fetch(`/codex-api/files?path=${encodeURIComponent(dirPath)}&showHidden=1`)
+    if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.loadError'))
+    const data = (await resp.json()) as { path: string; parentPath: string; entries: FileEntry[] }
+    currentPath.value = data.path
+    parentPath.value = data.parentPath
+    entries.value = data.entries
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('fileManager.loadError')
+    entries.value = []
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function navigateUp(): void {
+  if (parentPath.value && parentPath.value !== currentPath.value) {
+    void fetchEntries(parentPath.value)
+  }
+}
+
+function onRefresh(): void {
+  void fetchEntries(currentPath.value || props.cwd)
+}
+
+function onEntryClick(entry: FileEntry): void {
+  selectedPath.value = entry.path
+  closeContextMenu()
+}
+
+function onEntryDblClick(entry: FileEntry): void {
+  if (entry.isDirectory) {
+    void fetchEntries(entry.path)
+  }
+}
+
+function onContextMenu(event: MouseEvent, entry: FileEntry): void {
+  selectedPath.value = entry.path
+  contextMenu.value = { x: event.clientX, y: event.clientY, entry }
+  // Default position, then adjust after render
+  contextMenuStyle.value = { top: `${event.clientY}px`, left: `${event.clientX}px` }
+  nextTick(() => {
+    const el = contextMenuRef.value
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const viewH = window.innerHeight
+    const viewW = window.innerWidth
+    let y = event.clientY
+    let x = event.clientX
+    if (y + rect.height > viewH - 8) y = Math.max(8, y - rect.height)
+    if (x + rect.width > viewW - 8) x = Math.max(8, x - rect.width)
+    contextMenuStyle.value = { top: `${y}px`, left: `${x}px` }
+  })
+}
+
+function closeContextMenu(): void {
+  contextMenu.value = null
+}
+
+// --- Create file/folder ---
+function startCreateFile(): void {
+  createMode.value = 'file'
+  createName.value = ''
+  showNewMenu.value = false
+  nextTick(() => createInputRef.value?.focus())
+}
+
+function startCreateFolder(): void {
+  createMode.value = 'folder'
+  createName.value = ''
+  showNewMenu.value = false
+  nextTick(() => createInputRef.value?.focus())
+}
+
+async function confirmCreate(): Promise<void> {
+  const name = createName.value.trim()
+  if (!name || !currentPath.value) return
+  const sep = currentPath.value.includes('\\') ? '\\' : '/'
+  const fullPath = `${currentPath.value}${sep}${name}`
+  const endpoint = createMode.value === 'folder' ? '/codex-api/files/mkdir' : '/codex-api/files/create'
+  try {
+    const resp = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: fullPath }),
+    })
+    if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.createError'))
+    cancelCreate()
+    void fetchEntries(currentPath.value)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('fileManager.createError')
+  }
+}
+
+function cancelCreate(): void {
+  createMode.value = null
+  createName.value = ''
+}
+
+// --- Rename ---
+function startRename(entry: FileEntry): void {
+  closeContextMenu()
+  renamingPath.value = entry.path
+  renameValue.value = entry.name
+  nextTick(() => {
+    const input = renameInputRef.value
+    if (Array.isArray(input)) {
+      (input[0] as HTMLInputElement | undefined)?.focus()
+    } else {
+      input?.focus()
+    }
+  })
+}
+
+async function confirmRename(entry: FileEntry): Promise<void> {
+  const newName = renameValue.value.trim()
+  if (!newName || newName === entry.name) { cancelRename(); return }
+  const dir = entry.path.substring(0, entry.path.length - entry.name.length)
+  const newPath = dir + newName
+  try {
+    const resp = await fetch('/codex-api/files/move', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ from: entry.path, to: newPath }),
+    })
+    if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.renameError'))
+    cancelRename()
+    void fetchEntries(currentPath.value)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('fileManager.renameError')
+    cancelRename()
+  }
+}
+
+function cancelRename(): void {
+  renamingPath.value = ''
+  renameValue.value = ''
+}
+
+// --- Delete ---
+async function deleteEntry(entry: FileEntry): Promise<void> {
+  closeContextMenu()
+  try {
+    const resp = await fetch(`/codex-api/files?path=${encodeURIComponent(entry.path)}`, { method: 'DELETE' })
+    if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.deleteError'))
+    void fetchEntries(currentPath.value)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('fileManager.deleteError')
+  }
+}
+
+// --- Download ---
+function downloadEntry(entry: FileEntry): void {
+  closeContextMenu()
+  const a = document.createElement('a')
+  a.href = `/codex-api/files/download?path=${encodeURIComponent(entry.path)}`
+  a.download = entry.name
+  a.click()
+}
+
+// --- Upload ---
+function triggerUpload(): void {
+  showNewMenu.value = false
+  uploadInputRef.value?.click()
+}
+
+function triggerFolderUpload(): void {
+  showNewMenu.value = false
+  folderUploadInputRef.value?.click()
+}
+
+async function uploadFiles(files: FileList): Promise<void> {
+  const formData = new FormData()
+  for (const file of Array.from(files)) {
+    const relativePath = (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name
+    formData.append('files', file, relativePath)
+  }
+  try {
+    const resp = await fetch(`/codex-api/files/upload?path=${encodeURIComponent(currentPath.value)}`, {
+      method: 'POST',
+      body: formData,
+    })
+    if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.uploadError'))
+    void fetchEntries(currentPath.value)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('fileManager.uploadError')
+  }
+}
+
+async function onUploadChange(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files.length > 0) await uploadFiles(input.files)
+  input.value = ''
+}
+
+async function onFolderUploadChange(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement
+  if (input.files && input.files.length > 0) await uploadFiles(input.files)
+  input.value = ''
+}
+
+// --- Helpers ---
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
+
+const FILE_ICON_MAP: Record<string, Component> = {
+  '.ts': IconFileTypeTs, '.tsx': IconFileTypeTs,
+  '.js': IconFileTypeJs, '.jsx': IconFileTypeJsx,
+  '.json': IconJson, '.md': IconMarkdown, '.mdx': IconMarkdown,
+  '.html': IconFileTypeHtml, '.css': IconFileTypeCss,
+  '.vue': IconFileTypeVue, '.py': IconBrandPython,
+  '.toml': IconSettings, '.yaml': IconSettings, '.yml': IconSettings,
+  '.png': IconPhoto, '.jpg': IconPhoto, '.jpeg': IconPhoto, '.gif': IconPhoto, '.svg': IconPhoto, '.webp': IconPhoto,
+  '.pdf': IconFileTypePdf,
+  '.zip': IconFileZip, '.tar': IconFileZip, '.gz': IconFileZip, '.7z': IconFileZip, '.rar': IconFileZip,
+}
+
+function entryIcon(entry: FileEntry): Component {
+  if (entry.isDirectory) return IconFolder
+  return FILE_ICON_MAP[entry.extension] || IconFile
+}
+
+function onWindowClick(): void {
+  closeContextMenu()
+  showNewMenu.value = false
+}
+
+// --- Lifecycle ---
+watch(() => props.cwd, (cwd) => {
+  if (cwd) void fetchEntries(cwd)
+}, { immediate: true })
+
+onMounted(() => {
+  window.addEventListener('click', onWindowClick)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', onWindowClick)
+})
+</script>
+
+<style scoped>
+@reference "tailwindcss";
+
+.fm-root {
+  @apply flex flex-col h-full min-h-0 overflow-hidden;
+}
+
+.fm-toolbar {
+  @apply flex items-center gap-1 px-2 py-1.5 border-b border-zinc-200 shrink-0;
+}
+
+.fm-toolbar-btn {
+  @apply h-7 w-7 rounded-md border border-zinc-200 bg-white text-zinc-600 flex items-center justify-center text-sm transition hover:bg-zinc-50 disabled:opacity-40;
+}
+
+.fm-toolbar-icon {
+  @apply w-4 h-4;
+}
+
+.fm-breadcrumb {
+  @apply flex-1 min-w-0 px-1 flex items-center overflow-x-auto gap-0;
+  scrollbar-width: none;
+}
+
+.fm-breadcrumb::-webkit-scrollbar {
+  display: none;
+}
+
+.fm-breadcrumb-sep {
+  @apply text-[10px] text-zinc-400 shrink-0 px-0.5;
+}
+
+.fm-breadcrumb-btn {
+  @apply shrink-0 rounded px-1 py-0.5 text-xs text-zinc-500 font-mono transition hover:bg-zinc-100 hover:text-zinc-800 border-0 bg-transparent whitespace-nowrap;
+}
+
+.fm-toolbar-actions {
+  @apply flex items-center gap-1;
+}
+
+.fm-new-menu {
+  @apply flex gap-1 px-2 py-1.5 border-b border-zinc-100;
+}
+
+.fm-new-menu-item {
+  @apply rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-50;
+}
+
+.fm-create-row {
+  @apply flex items-center gap-1.5 px-2 py-1.5 border-b border-zinc-100;
+}
+
+.fm-create-icon {
+  @apply w-3.5 h-3.5 shrink-0 text-zinc-400;
+}
+
+.fm-create-input {
+  @apply flex-1 min-w-0 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-800 outline-none focus:border-zinc-400;
+}
+
+.fm-create-confirm, .fm-create-cancel {
+  @apply h-6 w-6 rounded text-xs flex items-center justify-center transition;
+}
+
+.fm-create-confirm {
+  @apply text-emerald-600 hover:bg-emerald-50;
+}
+
+.fm-create-cancel {
+  @apply text-zinc-400 hover:bg-zinc-100;
+}
+
+.fm-loading, .fm-empty, .fm-error {
+  @apply px-3 py-6 text-center text-xs;
+}
+
+.fm-loading, .fm-empty {
+  @apply text-zinc-400;
+}
+
+.fm-error {
+  @apply text-rose-600;
+}
+
+.fm-list {
+  @apply flex-1 overflow-y-auto;
+}
+
+.fm-entry {
+  @apply flex items-center gap-2 px-2.5 py-1.5 text-sm cursor-pointer transition hover:bg-zinc-50;
+}
+
+.fm-entry.is-selected {
+  @apply bg-zinc-100;
+}
+
+.fm-entry-icon {
+  @apply w-3.5 h-3.5 shrink-0 text-zinc-400;
+}
+
+.fm-entry-name {
+  @apply flex-1 min-w-0 truncate text-zinc-800 text-xs;
+}
+
+.fm-entry-meta {
+  @apply shrink-0 text-[10px] text-zinc-400 tabular-nums;
+}
+
+.fm-entry-rename-wrap {
+  @apply flex-1 min-w-0;
+}
+
+.fm-entry-rename-input {
+  @apply w-full rounded border border-zinc-300 bg-white px-1.5 py-0.5 text-xs text-zinc-800 outline-none focus:border-zinc-500;
+}
+
+.fm-context-menu {
+  @apply fixed z-[100] min-w-36 rounded-lg border border-zinc-200 bg-white p-1 shadow-lg;
+}
+
+.fm-context-item {
+  @apply block w-full rounded-md px-2.5 py-1.5 text-left text-xs text-zinc-700 transition hover:bg-zinc-100;
+}
+
+.fm-context-item-danger {
+  @apply text-rose-600 hover:bg-rose-50;
+}
+
+.fm-hidden-input {
+  @apply hidden;
+}
+</style>
diff --git a/src/components/content/FileManagerPanel.vue b/src/components/content/FileManagerPanel.vue
new file mode 100644
index 00000000..cff520fb
--- /dev/null
+++ b/src/components/content/FileManagerPanel.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="fmp-wrapper" :class="{ 'is-open': visible }" @transitionend="onTransitionEnd">
+    <section v-if="showContent" class="fmp-root" @click.stop>
+      <header class="fmp-header">
+        <h3 class="fmp-title">{{ $t('fileManager.title') }}</h3>
+        <button type="button" class="fmp-close" :aria-label="$t('common.close')" @click="$emit('close')">
+          <IconTablerX class="fmp-close-icon" />
+        </button>
+      </header>
+      <div class="fmp-body">
+        <FileManager :cwd="cwd" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Side panel wrapper for the FileManager component.
+ * Animates width open/close; content mounts after transition starts.
+ */
+import { ref, watch } from 'vue'
+import FileManager from './FileManager.vue'
+import IconTablerX from '../icons/IconTablerX.vue'
+
+const props = defineProps<{
+  visible: boolean
+  cwd: string
+}>()
+
+defineEmits<{
+  close: []
+}>()
+
+const showContent = ref(false)
+
+watch(() => props.visible, (v) => {
+  if (v) showContent.value = true
+})
+
+function onTransitionEnd(): void {
+  if (!props.visible) showContent.value = false
+}
+</script>
+
+<style scoped>
+@reference "tailwindcss";
+
+.fmp-wrapper {
+  @apply h-full shrink-0 overflow-hidden;
+  max-width: 0;
+  transition: max-width 200ms ease-out;
+}
+
+.fmp-wrapper.is-open {
+  max-width: 320px;
+}
+
+.fmp-root {
+  @apply flex h-full min-h-0 w-80 flex-col overflow-hidden rounded-l-2xl rounded-r-none border border-zinc-200 border-r-0 bg-white;
+}
+
+.fmp-header {
+  @apply flex items-center justify-between gap-3 border-b border-zinc-200 px-3 py-2.5 shrink-0;
+}
+
+.fmp-title {
+  @apply m-0 text-sm font-medium text-zinc-900;
+}
+
+.fmp-close {
+  @apply h-7.5 w-7.5 rounded-full border border-zinc-200 bg-white flex items-center justify-center text-zinc-400 transition hover:bg-zinc-50;
+}
+
+.fmp-close-icon {
+  @apply w-3.5 h-3.5;
+}
+
+.fmp-body {
+  @apply flex-1 min-h-0 overflow-hidden;
+}
+</style>
diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index dc20d3a1..b7cccecf 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -295,6 +295,17 @@
             {{ dictationDurationLabel }}
           </span>
 
+          <button
+            class="thread-composer-files-btn"
+            type="button"
+            :aria-label="$t('fileManager.title')"
+            :title="$t('fileManager.title')"
+            :disabled="isInteractionDisabled"
+            @click="emit('toggle-file-manager')"
+          >
+            <IconTablerFolderOpen class="thread-composer-files-icon" />
+          </button>
+
           <button
             v-if="isDictationSupported"
             class="thread-composer-mic"
@@ -395,6 +406,7 @@ import IconTablerArrowUp from '../icons/IconTablerArrowUp.vue'
 import IconTablerBolt from '../icons/IconTablerBolt.vue'
 import IconTablerFilePencil from '../icons/IconTablerFilePencil.vue'
 import IconTablerFolder from '../icons/IconTablerFolder.vue'
+import IconTablerFolderOpen from '../icons/IconTablerFolderOpen.vue'
 import IconTablerMicrophone from '../icons/IconTablerMicrophone.vue'
 import IconTablerPlayerStopFilled from '../icons/IconTablerPlayerStopFilled.vue'
 import ComposerDropdown from './ComposerDropdown.vue'
@@ -459,6 +471,7 @@ const emit = defineEmits<{
   'update:selected-model': [modelId: string]
   'update:selected-reasoning-effort': [effort: ReasoningEffort | '']
   'update:selected-speed-mode': [mode: SpeedMode]
+  'toggle-file-manager': []
 }>()
 
 type SelectedImage = {
@@ -2078,6 +2091,14 @@ watch(
   @apply ml-0 flex-1;
 }
 
+.thread-composer-files-btn {
+  @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-0 bg-zinc-100 text-zinc-600 transition hover:bg-zinc-200 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-400;
+}
+
+.thread-composer-files-icon {
+  @apply h-4.5 w-4.5;
+}
+
 .thread-composer-mic {
   @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-0 bg-zinc-100 text-zinc-600 transition hover:bg-zinc-200 hover:text-zinc-900 disabled:cursor-not-allowed disabled:text-zinc-400;
   touch-action: none;
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index e8a559ee..a3c7605a 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -458,6 +458,31 @@ const en = {
     configSaved: 'Config saved successfully',
     configSaveError: 'Failed to save config',
   },
+
+  fileManager: {
+    title: 'Files',
+    goUp: 'Go up one level',
+    newItem: 'New file or folder',
+    upload: 'Upload',
+    uploadFiles: 'Upload files',
+    uploadFolder: 'Upload folder',
+    newFile: 'New file',
+    newFolder: 'New folder',
+    fileNamePlaceholder: 'File name...',
+    folderNamePlaceholder: 'Folder name...',
+    emptyFolder: 'Empty folder',
+    download: 'Download',
+    loadError: 'Failed to load directory.',
+    createError: 'Failed to create item.',
+    renameError: 'Failed to rename.',
+    deleteError: 'Failed to delete.',
+    uploadError: 'Upload failed.',
+    outsideWorkspace: 'Path is outside the allowed workspace.',
+    invalidPath: 'Invalid path.',
+    notADirectory: 'Path is not a directory.',
+    notAFile: 'Path is not a file.',
+    notFound: 'File or folder not found.',
+  },
 }
 
 export default en
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index e5a4c8d2..d8c01703 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -457,6 +457,31 @@ const zh = {
     configSaved: '配置保存成功',
     configSaveError: '保存配置失败',
   },
+
+  fileManager: {
+    title: '文件',
+    goUp: '返回上级目录',
+    newItem: '新建文件或文件夹',
+    upload: '上传',
+    uploadFiles: '上传文件',
+    uploadFolder: '上传文件夹',
+    newFile: '新建文件',
+    newFolder: '新建文件夹',
+    fileNamePlaceholder: '文件名...',
+    folderNamePlaceholder: '文件夹名...',
+    emptyFolder: '空文件夹',
+    download: '下载',
+    loadError: '加载目录失败。',
+    createError: '创建失败。',
+    renameError: '重命名失败。',
+    deleteError: '删除失败。',
+    uploadError: '上传失败。',
+    outsideWorkspace: '路径超出了允许的工作区范围。',
+    invalidPath: '路径无效。',
+    notADirectory: '路径不是一个目录。',
+    notAFile: '路径不是一个文件。',
+    notFound: '文件或文件夹未找到。',
+  },
 }
 
 export default zh
diff --git a/src/router/index.ts b/src/router/index.ts
index f377c2cc..f8dd0f80 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,11 @@ const router = createRouter({
       name: 'skills',
       component: EmptyRouteView,
     },
+    {
+      path: '/files',
+      name: 'files',
+      component: EmptyRouteView,
+    },
     {
       path: '/new-thread',
       redirect: { name: 'home' },
diff --git a/src/server/codexAppServerBridge.ts b/src/server/codexAppServerBridge.ts
index d6e1856d..4173345d 100644
--- a/src/server/codexAppServerBridge.ts
+++ b/src/server/codexAppServerBridge.ts
@@ -13,6 +13,7 @@ import { writeFile } from 'node:fs/promises'
 import { handleAccountRoutes } from './accountRoutes.js'
 import { buildAppServerArgs } from './appServerRuntimeConfig.js'
 import { handleConfigRoutes } from './configRoutes.js'
+import { handleFileRoutes } from './fileRoutes.js'
 import { handleReviewRoutes } from './reviewGit.js'
 import { handleSkillsRoutes, initializeSkillsSyncOnStartup } from './skillsRoutes.js'
 import { TelegramThreadBridge } from './telegramThreadBridge.js'
@@ -3524,6 +3525,10 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
         return
       }
 
+      if (await handleFileRoutes(req, res, url, { readJsonBody })) {
+        return
+      }
+
       if (req.method === 'POST' && url.pathname === '/codex-api/upload-file') {
         handleFileUpload(req, res)
         return
diff --git a/src/server/fileRoutes.ts b/src/server/fileRoutes.ts
new file mode 100644
index 00000000..72a8d4cc
--- /dev/null
+++ b/src/server/fileRoutes.ts
@@ -0,0 +1,314 @@
+/**
+ * File management API routes.
+ * Provides list, create, delete, move, download, and upload operations
+ * for files and directories within an arbitrary workspace path.
+ */
+import { mkdir, readdir, realpath, rename, rm, stat, writeFile } from 'node:fs/promises'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { basename, dirname, extname, isAbsolute, join, normalize, resolve } from 'node:path'
+import { homedir } from 'node:os'
+
+/** JSON response helper. */
+function setJson(res: ServerResponse, statusCode: number, payload: unknown): void {
+  res.statusCode = statusCode
+  res.setHeader('Content-Type', 'application/json; charset=utf-8')
+  res.end(JSON.stringify(payload))
+}
+
+/** Cached allowed roots, computed once at startup. */
+let cachedAllowedRoots: string[] | null = null
+
+/**
+ * Allowed root directories for file operations.
+ * Only the CLI workspace arg, CODEX_HOME, home dir, and /tmp are permitted.
+ */
+function getAllowedRoots(): string[] {
+  if (cachedAllowedRoots) return cachedAllowedRoots
+  const roots: string[] = []
+  const home = homedir()
+  roots.push(home)
+  // ~/.codex is always allowed (config, skills, sessions)
+  const defaultCodexHome = join(home, '.codex')
+  roots.push(defaultCodexHome)
+  const codexHome = process.env.CODEX_HOME?.trim()
+  if (codexHome) roots.push(codexHome)
+  const workspace = process.env.CODEX_WORKSPACE?.trim()
+  if (workspace) roots.push(workspace)
+  // /tmp for temp files; /workspace for Docker/container setups
+  roots.push('/tmp', '/workspace')
+  cachedAllowedRoots = [...new Set(roots.map((r) => resolve(normalize(r))))]
+  return cachedAllowedRoots
+}
+
+/**
+ * Validate + authorize a path.
+ * Resolves symlinks via realpath for existing paths, falls back to lexical resolve for new paths.
+ * Must be absolute and under an allowed root after canonicalization.
+ */
+async function resolveAndValidate(p: string): Promise<string | null> {
+  if (!p || !isAbsolute(p)) return null
+  let canonical: string
+  try {
+    canonical = await realpath(p)
+  } catch {
+    // Path may not exist yet (create operations) — use lexical resolve
+    canonical = resolve(normalize(p))
+  }
+  const roots = getAllowedRoots()
+  const sep = process.platform === 'win32' ? '\\' : '/'
+  const ok = roots.some((root) => canonical === root || canonical.startsWith(root + sep))
+  return ok ? canonical : null
+}
+
+/** Synchronous pre-check (fast reject before async resolveAndValidate). */
+function isAllowedPath(p: string): boolean {
+  if (!p || !isAbsolute(p)) return false
+  const resolved = resolve(normalize(p))
+  const roots = getAllowedRoots()
+  const sep = process.platform === 'win32' ? '\\' : '/'
+  return roots.some((root) => resolved === root || resolved.startsWith(root + sep))
+}
+
+/** Single directory entry returned by the list endpoint. */
+type FileEntry = {
+  name: string
+  path: string
+  isDirectory: boolean
+  size: number
+  mtimeMs: number
+  extension: string
+}
+
+/**
+ * Handles file management routes.
+ *
+ * @returns True if the route was handled, false otherwise.
+ */
+export async function handleFileRoutes(
+  req: IncomingMessage,
+  res: ServerResponse,
+  url: URL,
+  context: { readJsonBody: (req: IncomingMessage) => Promise<unknown> },
+): Promise<boolean> {
+
+  // --- LIST directory contents (read-only, no workspace restriction) ---
+  if (req.method === 'GET' && url.pathname === '/codex-api/files') {
+    const dirPath = url.searchParams.get('path') ?? ''
+    const showHidden = url.searchParams.get('showHidden') === '1'
+    if (!dirPath || !isAbsolute(dirPath)) {
+      setJson(res, 400, { error: 'Expected absolute directory path.' })
+      return true
+    }
+    try {
+      const dirStat = await stat(dirPath)
+      if (!dirStat.isDirectory()) {
+        setJson(res, 400, { error: 'Path is not a directory.' })
+        return true
+      }
+      const entries = await readdir(dirPath, { withFileTypes: true })
+      const items: FileEntry[] = []
+      for (const entry of entries) {
+        if (!showHidden && entry.name.startsWith('.')) continue
+        const entryPath = join(dirPath, entry.name)
+        try {
+          const entryStat = await stat(entryPath)
+          items.push({
+            name: entry.name,
+            path: entryPath,
+            isDirectory: entry.isDirectory(),
+            size: entryStat.size,
+            mtimeMs: entryStat.mtimeMs,
+            extension: entry.isDirectory() ? '' : extname(entry.name).toLowerCase(),
+          })
+        } catch {
+          // Skip entries we can't stat (permission issues, broken symlinks).
+        }
+      }
+      items.sort((a, b) => {
+        if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1
+        return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' })
+      })
+      setJson(res, 200, { path: dirPath, parentPath: dirname(dirPath), entries: items })
+    } catch {
+      setJson(res, 404, { error: 'Directory not found.' })
+    }
+    return true
+  }
+
+  // --- CREATE directory ---
+  if (req.method === 'POST' && url.pathname === '/codex-api/files/mkdir') {
+    const body = (await context.readJsonBody(req)) as Record<string, unknown> | null
+    const dirPath = typeof body?.path === 'string' ? body.path : ''
+    if (!isAllowedPath(dirPath)) {
+      setJson(res, 400, { error: 'Expected absolute path.' })
+      return true
+    }
+    try {
+      const canonical = await resolveAndValidate(dirPath)
+      if (!canonical) { setJson(res, 403, { error: 'Path is outside allowed workspace.' }); return true }
+      await mkdir(canonical, { recursive: true })
+      setJson(res, 200, { ok: true, path: canonical })
+    } catch (err) {
+      setJson(res, 500, { error: err instanceof Error ? err.message : 'Failed to create directory.' })
+    }
+    return true
+  }
+
+  // --- CREATE empty file ---
+  if (req.method === 'POST' && url.pathname === '/codex-api/files/create') {
+    const body = (await context.readJsonBody(req)) as Record<string, unknown> | null
+    const filePath = typeof body?.path === 'string' ? body.path : ''
+    if (!isAllowedPath(filePath)) {
+      setJson(res, 400, { error: 'Expected absolute path.' })
+      return true
+    }
+    try {
+      const canonical = await resolveAndValidate(filePath)
+      if (!canonical) { setJson(res, 403, { error: 'Path is outside allowed workspace.' }); return true }
+      await mkdir(dirname(canonical), { recursive: true })
+      await writeFile(canonical, '', { flag: 'wx' })
+      setJson(res, 200, { ok: true, path: canonical })
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Failed to create file.'
+      const code = err instanceof Error && 'code' in err && (err as NodeJS.ErrnoException).code === 'EEXIST' ? 409 : 500
+      setJson(res, code, { error: msg })
+    }
+    return true
+  }
+
+  // --- DELETE file or directory ---
+  if (req.method === 'DELETE' && url.pathname === '/codex-api/files') {
+    const targetPath = url.searchParams.get('path') ?? ''
+    if (!isAllowedPath(targetPath)) {
+      setJson(res, 400, { error: 'Expected absolute path.' })
+      return true
+    }
+    try {
+      const canonical = await resolveAndValidate(targetPath)
+      if (!canonical) { setJson(res, 403, { error: 'Path is outside allowed workspace.' }); return true }
+      await rm(canonical, { recursive: true, force: true })
+      setJson(res, 200, { ok: true })
+    } catch (err) {
+      setJson(res, 500, { error: err instanceof Error ? err.message : 'Failed to delete.' })
+    }
+    return true
+  }
+
+  // --- MOVE / RENAME ---
+  if (req.method === 'POST' && url.pathname === '/codex-api/files/move') {
+    const body = (await context.readJsonBody(req)) as Record<string, unknown> | null
+    const from = typeof body?.from === 'string' ? body.from : ''
+    const to = typeof body?.to === 'string' ? body.to : ''
+    if (!isAllowedPath(from) || !isAllowedPath(to)) {
+      setJson(res, 400, { error: 'Expected absolute paths for from and to.' })
+      return true
+    }
+    try {
+      const canonFrom = await resolveAndValidate(from)
+      const canonTo = await resolveAndValidate(to)
+      if (!canonFrom || !canonTo) { setJson(res, 403, { error: 'Path is outside allowed workspace.' }); return true }
+      await mkdir(dirname(canonTo), { recursive: true })
+      await rename(canonFrom, canonTo)
+      setJson(res, 200, { ok: true, from: canonFrom, to: canonTo })
+    } catch (err) {
+      setJson(res, 500, { error: err instanceof Error ? err.message : 'Failed to move.' })
+    }
+    return true
+  }
+
+  // --- DOWNLOAD file (read-only, no workspace restriction) ---
+  if (req.method === 'GET' && url.pathname === '/codex-api/files/download') {
+    const filePath = url.searchParams.get('path') ?? ''
+    if (!filePath || !isAbsolute(filePath)) {
+      setJson(res, 400, { error: 'Expected absolute file path.' })
+      return true
+    }
+    try {
+      const fileStat = await stat(filePath)
+      if (!fileStat.isFile()) {
+        setJson(res, 400, { error: 'Path is not a file.' })
+        return true
+      }
+      const fileName = basename(filePath)
+      res.statusCode = 200
+      res.setHeader('Content-Disposition', `attachment; filename="${encodeURIComponent(fileName)}"`)
+      res.setHeader('Content-Length', fileStat.size)
+
+      const { createReadStream } = await import('node:fs')
+      const stream = createReadStream(filePath)
+      stream.pipe(res)
+      stream.on('error', () => {
+        if (!res.headersSent) setJson(res, 500, { error: 'Read error.' })
+        else res.end()
+      })
+    } catch {
+      setJson(res, 404, { error: 'File not found.' })
+    }
+    return true
+  }
+
+  // --- UPLOAD files to a target directory ---
+  if (req.method === 'POST' && url.pathname === '/codex-api/files/upload') {
+    const targetDir = url.searchParams.get('path') ?? ''
+    if (!isAllowedPath(targetDir)) {
+      setJson(res, 400, { error: 'Expected absolute target directory path.' })
+      return true
+    }
+    try {
+      const canonicalDir = await resolveAndValidate(targetDir)
+      if (!canonicalDir) { setJson(res, 403, { error: 'Path is outside allowed workspace.' }); return true }
+      const contentType = req.headers['content-type'] ?? ''
+      const boundaryMatch = contentType.match(/boundary=([^\s;]+)/)
+      if (!boundaryMatch) {
+        setJson(res, 400, { error: 'Missing multipart boundary.' })
+        return true
+      }
+
+      const body = await new Promise<Buffer>((resolve, reject) => {
+        const chunks: Buffer[] = []
+        req.on('data', (c: Buffer) => chunks.push(c))
+        req.on('end', () => resolve(Buffer.concat(chunks)))
+        req.on('error', reject)
+      })
+
+      const boundary = boundaryMatch[1]
+      const boundaryBuf = Buffer.from(`--${boundary}`)
+      const parts: Buffer[] = []
+      let searchStart = 0
+      while (searchStart < body.length) {
+        const idx = body.indexOf(boundaryBuf, searchStart)
+        if (idx < 0) break
+        if (searchStart > 0) parts.push(body.subarray(searchStart, idx))
+        searchStart = idx + boundaryBuf.length
+        if (body[searchStart] === 0x0d && body[searchStart + 1] === 0x0a) searchStart += 2
+      }
+
+      const headerSep = Buffer.from('\r\n\r\n')
+      const uploaded: string[] = []
+      for (const part of parts) {
+        const headerEnd = part.indexOf(headerSep)
+        if (headerEnd < 0) continue
+        const headers = part.subarray(0, headerEnd).toString('utf8')
+        const fnMatch = headers.match(/filename="([^"]+)"/i)
+        if (!fnMatch) continue
+        const rawName = fnMatch[1]
+        const safeName = rawName.replace(/\.\./g, '_')
+        let end = part.length
+        if (end >= 2 && part[end - 2] === 0x0d && part[end - 1] === 0x0a) end -= 2
+        const fileData = part.subarray(headerEnd + 4, end)
+
+        const destPath = join(canonicalDir, safeName)
+        await mkdir(dirname(destPath), { recursive: true })
+        await writeFile(destPath, fileData)
+        uploaded.push(destPath)
+      }
+
+      setJson(res, 200, { ok: true, uploaded })
+    } catch (err) {
+      setJson(res, 500, { error: err instanceof Error ? err.message : 'Upload failed.' })
+    }
+    return true
+  }
+
+  return false
+}
diff --git a/src/style.css b/src/style.css
index 0b5a6b04..e76142d6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1401,3 +1401,81 @@
 :root.dark .mcp-dropdown-option {
   @apply text-zinc-200 hover:bg-zinc-700;
 }
+
+/* File manager dark mode */
+:root.dark .fm-toolbar {
+  @apply border-zinc-700;
+}
+
+:root.dark .fm-toolbar-btn {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-300 hover:bg-zinc-700;
+}
+
+:root.dark .fm-breadcrumb-btn {
+  @apply text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200;
+}
+
+:root.dark .fm-breadcrumb-sep {
+  @apply text-zinc-600;
+}
+
+:root.dark .fm-new-menu {
+  @apply border-zinc-700;
+}
+
+:root.dark .fm-new-menu-item {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-300 hover:bg-zinc-700;
+}
+
+:root.dark .fm-create-row {
+  @apply border-zinc-700;
+}
+
+:root.dark .fm-create-input {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-200;
+}
+
+:root.dark .fm-entry {
+  @apply hover:bg-zinc-800;
+}
+
+:root.dark .fm-entry.is-selected {
+  @apply bg-zinc-800;
+}
+
+:root.dark .fm-entry-name {
+  @apply text-zinc-200;
+}
+
+:root.dark .fm-entry-rename-input {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-200;
+}
+
+:root.dark .fm-context-menu {
+  @apply border-zinc-700 bg-zinc-800;
+}
+
+:root.dark .fm-context-item {
+  @apply text-zinc-200 hover:bg-zinc-700;
+}
+
+:root.dark .fm-context-item-danger {
+  @apply text-rose-400 hover:bg-rose-900/30;
+}
+
+/* File manager panel dark mode */
+:root.dark .fmp-root {
+  @apply border-zinc-700 bg-zinc-900;
+}
+
+:root.dark .fmp-header {
+  @apply border-zinc-700;
+}
+
+:root.dark .fmp-title {
+  @apply text-zinc-100;
+}
+
+:root.dark .fmp-close {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-400 hover:bg-zinc-700;
+}

From ca97dc87411200860064310ad4040c943b766673 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 19:30:20 +0800
Subject: [PATCH 06/30] feat(file-manager): Add file preview modal and preview
 API endpoints

- Add inline preview support for images, PDF, video, audio, markdown, code, and text files
- Introduce read, serve, and OfficeCLI-based office preview routes on the server
- Open previews from double-click and the file context menu in FileManager
- Add localized preview strings and modal styling for light and dark themes
- Include markdown-it and highlight.js support for rendered markdown and syntax highlighting
---
 package.json                                |   5 +-
 src/components/content/FileManager.vue      |  20 +
 src/components/content/FilePreviewModal.vue | 381 ++++++++++++++++++++
 src/i18n/locales/en.ts                      |   8 +
 src/i18n/locales/zh.ts                      |   8 +
 src/server/fileRoutes.ts                    | 130 ++++++-
 src/style.css                               |  78 ++++
 7 files changed, 627 insertions(+), 3 deletions(-)
 create mode 100644 src/components/content/FilePreviewModal.vue

diff --git a/package.json b/package.json
index 6e0b2ac3..73bf6f4b 100644
--- a/package.json
+++ b/package.json
@@ -47,15 +47,18 @@
   },
   "dependencies": {
     "@tabler/icons-vue": "^3.41.1",
+    "@types/markdown-it": "^14.1.2",
     "commander": "^13.1.0",
     "express": "^5.1.0",
     "firebase": "^12.2.1",
     "highlight.js": "^11.11.1",
+    "markdown-it": "^14.1.1",
     "qrcode-terminal": "^0.12.0",
-    "vue-i18n": "^11.3.2",
+    "vue-i18n": "^11.1.12",
     "ws": "^8.18.3"
   },
   "devDependencies": {
+    "@intlify/devtools-types": "^11.3.2",
     "@playwright/test": "^1.59.1",
     "@tailwindcss/vite": "^4.1.18",
     "@types/express": "^5.0.0",
diff --git a/src/components/content/FileManager.vue b/src/components/content/FileManager.vue
index d63e49b8..797e120d 100644
--- a/src/components/content/FileManager.vue
+++ b/src/components/content/FileManager.vue
@@ -89,6 +89,9 @@
         :style="contextMenuStyle"
         @click.stop
       >
+        <button v-if="!contextMenu.entry.isDirectory" class="fm-context-item" type="button" @click="previewFromContext(contextMenu.entry)">
+          {{ $t('filePreview.preview') }}
+        </button>
         <button v-if="!contextMenu.entry.isDirectory" class="fm-context-item" type="button" @click="downloadEntry(contextMenu.entry)">
           {{ $t('fileManager.download') }}
         </button>
@@ -101,6 +104,13 @@
       </div>
     </Teleport>
 
+    <!-- File preview modal -->
+    <FilePreviewModal
+      v-if="previewEntry"
+      :entry="previewEntry"
+      @close="previewEntry = null"
+    />
+
     <!-- Hidden upload inputs -->
     <input
       ref="uploadInputRef"
@@ -146,6 +156,7 @@ import {
   IconFileZip,
 } from '@tabler/icons-vue'
 import IconTablerChevronLeft from '../icons/IconTablerChevronLeft.vue'
+import FilePreviewModal from './FilePreviewModal.vue'
 
 type FileEntry = {
   name: string
@@ -204,6 +215,7 @@ const contextMenuRef = ref<HTMLElement | null>(null)
 const contextMenuStyle = ref<Record<string, string>>({})
 const uploadInputRef = ref<HTMLInputElement | null>(null)
 const folderUploadInputRef = ref<HTMLInputElement | null>(null)
+const previewEntry = ref<FileEntry | null>(null)
 
 /** Detect platform path separator from a server-returned path. */
 function detectSep(p: string): string {
@@ -289,6 +301,8 @@ function onEntryClick(entry: FileEntry): void {
 function onEntryDblClick(entry: FileEntry): void {
   if (entry.isDirectory) {
     void fetchEntries(entry.path)
+  } else {
+    previewEntry.value = entry
   }
 }
 
@@ -407,6 +421,12 @@ async function deleteEntry(entry: FileEntry): Promise<void> {
   }
 }
 
+// --- Preview from context menu ---
+function previewFromContext(entry: FileEntry): void {
+  closeContextMenu()
+  previewEntry.value = entry
+}
+
 // --- Download ---
 function downloadEntry(entry: FileEntry): void {
   closeContextMenu()
diff --git a/src/components/content/FilePreviewModal.vue b/src/components/content/FilePreviewModal.vue
new file mode 100644
index 00000000..ec32bf5e
--- /dev/null
+++ b/src/components/content/FilePreviewModal.vue
@@ -0,0 +1,381 @@
+<template>
+  <Teleport to="body">
+    <div class="fp-overlay" ref="overlayRef" tabindex="-1" @click.self="close" @keydown.escape="close">
+      <div class="fp-modal">
+        <header class="fp-header">
+          <span class="fp-filename" :title="entry.path">{{ entry.name }}</span>
+          <span v-if="fileSize" class="fp-size">{{ fileSize }}</span>
+          <div class="fp-actions">
+            <button type="button" class="fp-action-btn" @click="downloadFile" :title="t('fileManager.download')">
+              <IconDownload class="fp-action-icon" />
+            </button>
+            <button type="button" class="fp-action-btn" @click="close" :aria-label="t('common.close')">
+              <IconX class="fp-action-icon" />
+            </button>
+          </div>
+        </header>
+        <div class="fp-body">
+          <div v-if="isLoading" class="fp-status">{{ t('common.loading') }}…</div>
+          <div v-else-if="error" class="fp-error">{{ error }}</div>
+
+          <!-- Office HTML preview (sandboxed: scripts allowed but no same-origin access to parent) -->
+          <iframe v-else-if="previewType === 'office'" class="fp-iframe" :srcdoc="officeHtml" sandbox="allow-scripts" />
+
+          <!-- Image -->
+          <div v-else-if="previewType === 'image'" class="fp-image-wrap">
+            <img class="fp-image" :src="serveUrl" :alt="entry.name" @error="error = t('filePreview.loadFailed')" />
+          </div>
+
+          <!-- PDF -->
+          <iframe v-else-if="previewType === 'pdf'" class="fp-iframe" :src="serveUrl" />
+
+          <!-- Video -->
+          <video v-else-if="previewType === 'video'" class="fp-media" controls :src="serveUrl" />
+
+          <!-- Audio -->
+          <div v-else-if="previewType === 'audio'" class="fp-audio-wrap">
+            <audio controls :src="serveUrl" />
+          </div>
+
+          <!-- Markdown -->
+          <div v-else-if="previewType === 'markdown'" class="fp-markdown" v-html="renderedContent" />
+
+          <!-- Code with syntax highlighting -->
+          <div v-else-if="previewType === 'code'" class="fp-code-wrap">
+            <pre class="fp-code"><code v-html="renderedContent" /></pre>
+          </div>
+
+          <!-- Plain text -->
+          <pre v-else-if="previewType === 'text'" class="fp-text">{{ textContent }}</pre>
+
+          <!-- Unsupported -->
+          <div v-else class="fp-status fp-unsupported">{{ t('filePreview.unsupported') }}</div>
+        </div>
+        <div v-if="isTruncated" class="fp-truncated">{{ t('filePreview.truncated') }}</div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+/**
+ * Modal overlay for previewing files.
+ * Supports Office (via OfficeCLI), code (highlight.js), markdown, images, PDF, video, audio, and plain text.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import hljs from 'highlight.js/lib/common'
+import MarkdownIt from 'markdown-it'
+import { IconDownload, IconX } from '@tabler/icons-vue'
+
+type PreviewEntry = { name: string; path: string; extension: string; size: number }
+
+const props = defineProps<{ entry: PreviewEntry }>()
+const emit = defineEmits<{ close: [] }>()
+const { t } = useI18n()
+
+const overlayRef = ref<HTMLElement | null>(null)
+const isLoading = ref(false)
+const error = ref('')
+const textContent = ref('')
+const renderedContent = ref('')
+const officeHtml = ref('')
+const isTruncated = ref(false)
+const fileSizeBytes = ref(0)
+
+const md = new MarkdownIt({
+  html: false,
+  linkify: true,
+  highlight(str: string, lang: string) {
+    if (lang && hljs.getLanguage(lang)) {
+      try { return hljs.highlight(str, { language: lang }).value } catch { /* ignore */ }
+    }
+    return ''
+  },
+})
+
+const OFFICE_EXTS = new Set(['.docx', '.xlsx', '.pptx'])
+const IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.bmp', '.ico', '.avif'])
+const VIDEO_EXTS = new Set(['.mp4', '.webm', '.mov', '.avi'])
+const AUDIO_EXTS = new Set(['.mp3', '.wav', '.ogg', '.aac', '.flac', '.m4a'])
+const MARKDOWN_EXTS = new Set(['.md', '.mdx'])
+const TEXT_EXTS = new Set(['.txt', '.log', '.csv', '.env', '.gitignore', '.editorconfig', '.lock', '.cfg', '.conf', '.properties'])
+const CODE_LANG_MAP: Record<string, string> = {
+  '.ts': 'typescript', '.tsx': 'typescript', '.mts': 'typescript',
+  '.js': 'javascript', '.jsx': 'javascript', '.mjs': 'javascript',
+  '.py': 'python', '.pyw': 'python',
+  '.java': 'java', '.c': 'c', '.cpp': 'cpp', '.h': 'c', '.hpp': 'cpp',
+  '.go': 'go', '.rs': 'rust', '.rb': 'ruby', '.php': 'php',
+  '.css': 'css', '.scss': 'scss', '.less': 'less',
+  '.html': 'xml', '.htm': 'xml', '.xml': 'xml',
+  '.sh': 'bash', '.zsh': 'bash', '.bash': 'bash',
+  '.sql': 'sql', '.yaml': 'yaml', '.yml': 'yaml',
+  '.toml': 'ini', '.ini': 'ini',
+  '.json': 'json', '.jsonc': 'json',
+  '.vue': 'xml', '.svelte': 'xml',
+  '.swift': 'swift', '.kt': 'kotlin', '.kts': 'kotlin',
+  '.lua': 'lua', '.r': 'r', '.R': 'r',
+  '.dart': 'dart', '.cs': 'csharp', '.vb': 'vbnet',
+  '.pl': 'perl', '.pm': 'perl',
+  '.ex': 'elixir', '.exs': 'elixir',
+  '.hs': 'haskell', '.scala': 'scala',
+  '.dockerfile': 'dockerfile', '.makefile': 'makefile',
+  '.graphql': 'graphql', '.gql': 'graphql',
+  '.diff': 'diff', '.patch': 'diff',
+}
+
+function getPreviewType(ext: string): string {
+  if (OFFICE_EXTS.has(ext)) return 'office'
+  if (IMAGE_EXTS.has(ext)) return 'image'
+  if (ext === '.pdf') return 'pdf'
+  if (VIDEO_EXTS.has(ext)) return 'video'
+  if (AUDIO_EXTS.has(ext)) return 'audio'
+  if (MARKDOWN_EXTS.has(ext)) return 'markdown'
+  if (ext in CODE_LANG_MAP) return 'code'
+  if (TEXT_EXTS.has(ext)) return 'text'
+  return 'unsupported'
+}
+
+const previewType = computed(() => getPreviewType(props.entry.extension))
+const serveUrl = computed(() => `/codex-api/files/serve?path=${encodeURIComponent(props.entry.path)}`)
+const downloadUrl = computed(() => `/codex-api/files/download?path=${encodeURIComponent(props.entry.path)}`)
+
+const fileSize = computed(() => {
+  const b = fileSizeBytes.value || props.entry.size
+  if (!b) return ''
+  if (b < 1024) return `${b} B`
+  if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)} KB`
+  if (b < 1024 * 1024 * 1024) return `${(b / (1024 * 1024)).toFixed(1)} MB`
+  return `${(b / (1024 * 1024 * 1024)).toFixed(1)} GB`
+})
+
+/** Map server error strings to i18n keys. */
+function mapServerError(msg: string): string {
+  if (msg.includes('officecli not found')) return t('filePreview.officeNotInstalled')
+  if (msg.includes('not a file')) return t('fileManager.notAFile')
+  if (msg.includes('not found') || msg.includes('Not found')) return t('fileManager.notFound')
+  if (msg.includes('absolute')) return t('fileManager.invalidPath')
+  if (msg.includes('not supported for preview')) return t('filePreview.unsupported')
+  if (msg.includes('Unexpected') || msg.includes('failed') || msg.includes('Failed')) return t('filePreview.loadFailed')
+  return msg
+}
+
+/** Fetch text content from the read endpoint. */
+async function fetchText(): Promise<{ content: string; truncated: boolean }> {
+  const resp = await fetch(`/codex-api/files/read?path=${encodeURIComponent(props.entry.path)}`)
+  if (!resp.ok) {
+    const data = await resp.json().catch(() => null) as { error?: string } | null
+    throw new Error(mapServerError(data?.error || t('filePreview.loadFailed')))
+  }
+  const data = await resp.json() as { content: string; truncated: boolean; size: number }
+  fileSizeBytes.value = data.size
+  return data
+}
+
+/** Load preview content based on file type. */
+async function loadPreview(): Promise<void> {
+  const type = previewType.value
+  if (['image', 'pdf', 'video', 'audio', 'unsupported'].includes(type)) return
+
+  isLoading.value = true
+  error.value = ''
+  textContent.value = ''
+  renderedContent.value = ''
+  officeHtml.value = ''
+  isTruncated.value = false
+  fileSizeBytes.value = 0
+  try {
+    if (type === 'office') {
+      const resp = await fetch(`/codex-api/files/office-preview?path=${encodeURIComponent(props.entry.path)}`)
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => null) as { error?: string } | null
+        throw new Error(mapServerError(data?.error || t('filePreview.loadFailed')))
+      }
+      officeHtml.value = await resp.text()
+    } else if (type === 'markdown') {
+      const data = await fetchText()
+      isTruncated.value = data.truncated
+      renderedContent.value = md.render(data.content)
+    } else if (type === 'code') {
+      const data = await fetchText()
+      isTruncated.value = data.truncated
+      const lang = CODE_LANG_MAP[props.entry.extension]
+      if (lang && hljs.getLanguage(lang)) {
+        renderedContent.value = hljs.highlight(data.content, { language: lang }).value
+      } else {
+        renderedContent.value = hljs.highlightAuto(data.content).value
+      }
+    } else {
+      const data = await fetchText()
+      isTruncated.value = data.truncated
+      textContent.value = data.content
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('filePreview.loadFailed')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function close(): void {
+  emit('close')
+}
+
+function downloadFile(): void {
+  const a = document.createElement('a')
+  a.href = downloadUrl.value
+  a.download = props.entry.name
+  a.click()
+}
+
+function onKeyDown(e: KeyboardEvent): void {
+  if (e.key === 'Escape') close()
+}
+
+watch(() => props.entry.path, () => { void loadPreview() }, { immediate: true })
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+  nextTick(() => overlayRef.value?.focus())
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+</script>
+
+<style scoped>
+@reference "tailwindcss";
+
+.fp-overlay {
+  @apply fixed inset-0 z-[200] flex items-center justify-center bg-black/50 backdrop-blur-sm;
+}
+
+.fp-modal {
+  @apply flex flex-col bg-white rounded-xl shadow-2xl overflow-hidden;
+  width: 90vw;
+  height: 88vh;
+  max-width: 1200px;
+}
+
+.fp-header {
+  @apply flex items-center gap-3 px-4 py-2.5 border-b border-zinc-200 shrink-0;
+}
+
+.fp-filename {
+  @apply flex-1 min-w-0 truncate text-sm font-medium text-zinc-800;
+}
+
+.fp-size {
+  @apply shrink-0 text-xs text-zinc-400 tabular-nums;
+}
+
+.fp-actions {
+  @apply flex items-center gap-1;
+}
+
+.fp-action-btn {
+  @apply h-7 w-7 rounded-md border border-zinc-200 bg-white text-zinc-500 flex items-center justify-center transition hover:bg-zinc-50 hover:text-zinc-700;
+}
+
+.fp-action-icon {
+  @apply w-3.5 h-3.5;
+}
+
+.fp-body {
+  @apply flex-1 min-h-0 overflow-auto;
+}
+
+.fp-status {
+  @apply flex items-center justify-center h-full text-sm text-zinc-400;
+}
+
+.fp-error {
+  @apply flex items-center justify-center h-full text-sm text-rose-600 px-6 text-center;
+}
+
+.fp-unsupported {
+  @apply text-zinc-500;
+}
+
+.fp-iframe {
+  @apply w-full h-full border-0;
+}
+
+.fp-image-wrap {
+  @apply flex items-center justify-center h-full p-4 overflow-auto;
+}
+
+.fp-image {
+  @apply max-w-full max-h-full object-contain rounded;
+}
+
+.fp-media {
+  @apply w-full h-full object-contain bg-black;
+}
+
+.fp-audio-wrap {
+  @apply flex items-center justify-center h-full p-8;
+}
+
+.fp-code-wrap {
+  @apply h-full overflow-auto;
+}
+
+.fp-code {
+  @apply m-0 p-4 text-xs leading-relaxed font-mono bg-zinc-50 min-h-full;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.fp-text {
+  @apply m-0 p-4 text-xs leading-relaxed font-mono text-zinc-700 bg-zinc-50 min-h-full whitespace-pre-wrap break-words;
+}
+
+.fp-markdown {
+  @apply p-6 text-sm leading-relaxed text-zinc-800 max-w-none;
+}
+
+.fp-truncated {
+  @apply shrink-0 px-4 py-1.5 text-xs text-amber-600 bg-amber-50 border-t border-amber-200 text-center;
+}
+
+/* ── Syntax highlighting (light) ── */
+.fp-code :deep(.hljs) { color: #24292e; }
+.fp-code :deep(.hljs-keyword) { color: #d73a49; }
+.fp-code :deep(.hljs-string) { color: #032f62; }
+.fp-code :deep(.hljs-number) { color: #005cc5; }
+.fp-code :deep(.hljs-comment) { color: #6a737d; font-style: italic; }
+.fp-code :deep(.hljs-title) { color: #6f42c1; }
+.fp-code :deep(.hljs-built_in) { color: #e36209; }
+.fp-code :deep(.hljs-literal) { color: #005cc5; }
+.fp-code :deep(.hljs-type) { color: #d73a49; }
+.fp-code :deep(.hljs-attr) { color: #005cc5; }
+.fp-code :deep(.hljs-tag) { color: #22863a; }
+.fp-code :deep(.hljs-name) { color: #22863a; }
+.fp-code :deep(.hljs-attribute) { color: #005cc5; }
+.fp-code :deep(.hljs-selector-tag) { color: #d73a49; }
+.fp-code :deep(.hljs-selector-class) { color: #6f42c1; }
+.fp-code :deep(.hljs-variable) { color: #e36209; }
+.fp-code :deep(.hljs-meta) { color: #005cc5; }
+.fp-code :deep(.hljs-addition) { color: #22863a; background: #f0fff4; }
+.fp-code :deep(.hljs-deletion) { color: #b31d28; background: #ffeef0; }
+
+/* ── Markdown content (light) ── */
+.fp-markdown :deep(h1) { @apply text-xl font-semibold mt-4 mb-2 pb-1 border-b border-zinc-200; }
+.fp-markdown :deep(h2) { @apply text-lg font-semibold mt-3 mb-2; }
+.fp-markdown :deep(h3) { @apply text-base font-semibold mt-2 mb-1; }
+.fp-markdown :deep(p) { @apply my-2; }
+.fp-markdown :deep(a) { @apply text-blue-600 underline; }
+.fp-markdown :deep(code) { @apply bg-zinc-100 px-1.5 py-0.5 rounded text-xs font-mono; }
+.fp-markdown :deep(pre) { @apply bg-zinc-100 p-3 rounded-lg overflow-x-auto my-2; }
+.fp-markdown :deep(pre code) { @apply bg-transparent p-0; }
+.fp-markdown :deep(blockquote) { @apply border-l-3 border-zinc-300 pl-3 text-zinc-500 my-2; }
+.fp-markdown :deep(table) { @apply border-collapse my-2 w-full; }
+.fp-markdown :deep(th), .fp-markdown :deep(td) { @apply border border-zinc-200 px-3 py-1.5 text-xs; }
+.fp-markdown :deep(th) { @apply bg-zinc-50 font-semibold; }
+.fp-markdown :deep(ul), .fp-markdown :deep(ol) { @apply pl-5 my-2; }
+.fp-markdown :deep(li) { @apply my-0.5; }
+.fp-markdown :deep(img) { @apply max-w-full rounded; }
+.fp-markdown :deep(hr) { @apply border-zinc-200 my-4; }
+</style>
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index a3c7605a..6ecee8bd 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -459,6 +459,14 @@ const en = {
     configSaveError: 'Failed to save config',
   },
 
+  filePreview: {
+    preview: 'Preview',
+    unsupported: 'Preview is not available for this file type.',
+    truncated: 'File is too large — showing first 1 MB only.',
+    loadFailed: 'Failed to load file preview.',
+    officeNotInstalled: 'OfficeCLI is not installed. Office file preview requires OfficeCLI.',
+  },
+
   fileManager: {
     title: 'Files',
     goUp: 'Go up one level',
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index d8c01703..bb87df31 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -458,6 +458,14 @@ const zh = {
     configSaveError: '保存配置失败',
   },
 
+  filePreview: {
+    preview: '预览',
+    unsupported: '此文件类型暂不支持预览。',
+    truncated: '文件过大，仅显示前 1 MB 内容。',
+    loadFailed: '加载文件预览失败。',
+    officeNotInstalled: '未安装 OfficeCLI。预览 Office 文件需要安装 OfficeCLI。',
+  },
+
   fileManager: {
     title: '文件',
     goUp: '返回上级目录',
diff --git a/src/server/fileRoutes.ts b/src/server/fileRoutes.ts
index 72a8d4cc..56b977b5 100644
--- a/src/server/fileRoutes.ts
+++ b/src/server/fileRoutes.ts
@@ -1,9 +1,9 @@
 /**
  * File management API routes.
- * Provides list, create, delete, move, download, and upload operations
+ * Provides list, create, delete, move, download, upload, read, and office preview operations
  * for files and directories within an arbitrary workspace path.
  */
-import { mkdir, readdir, realpath, rename, rm, stat, writeFile } from 'node:fs/promises'
+import { mkdir, open as fsOpen, readdir, readFile, realpath, rename, rm, stat, writeFile } from 'node:fs/promises'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import { basename, dirname, extname, isAbsolute, join, normalize, resolve } from 'node:path'
 import { homedir } from 'node:os'
@@ -79,6 +79,7 @@ type FileEntry = {
   extension: string
 }
 
+
 /**
  * Handles file management routes.
  *
@@ -247,6 +248,131 @@ export async function handleFileRoutes(
     return true
   }
 
+  // --- READ file content as text (read-only, no workspace restriction) ---
+  if (req.method === 'GET' && url.pathname === '/codex-api/files/read') {
+    const filePath = url.searchParams.get('path') ?? ''
+    if (!filePath || !isAbsolute(filePath)) {
+      setJson(res, 400, { error: 'Expected absolute file path.' })
+      return true
+    }
+    try {
+      const fileStat = await stat(filePath)
+      if (!fileStat.isFile()) {
+        setJson(res, 400, { error: 'Path is not a file.' })
+        return true
+      }
+      const maxSize = 1024 * 1024 // 1 MB
+      if (fileStat.size > maxSize) {
+        const fh = await fsOpen(filePath, 'r')
+        try {
+          const buffer = Buffer.alloc(maxSize)
+          const { bytesRead } = await fh.read(buffer, 0, maxSize, 0)
+          setJson(res, 200, { content: buffer.subarray(0, bytesRead).toString('utf8'), truncated: true, size: fileStat.size })
+        } finally {
+          await fh.close()
+        }
+      } else {
+        const content = await readFile(filePath, 'utf8')
+        setJson(res, 200, { content, truncated: false, size: fileStat.size })
+      }
+    } catch {
+      setJson(res, 404, { error: 'File not found.' })
+    }
+    return true
+  }
+
+  // --- SERVE file inline for preview (read-only, no workspace restriction) ---
+  // Like download but sets Content-Type and no Content-Disposition, so browsers render inline.
+  if (req.method === 'GET' && url.pathname === '/codex-api/files/serve') {
+    const filePath = url.searchParams.get('path') ?? ''
+    if (!filePath || !isAbsolute(filePath)) {
+      setJson(res, 400, { error: 'Expected absolute file path.' })
+      return true
+    }
+    try {
+      const fileStat = await stat(filePath)
+      if (!fileStat.isFile()) {
+        setJson(res, 400, { error: 'Path is not a file.' })
+        return true
+      }
+      const ext = extname(filePath).toLowerCase()
+      const mimeMap: Record<string, string> = {
+        '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
+        '.svg': 'image/svg+xml', '.webp': 'image/webp', '.bmp': 'image/bmp', '.ico': 'image/x-icon', '.avif': 'image/avif',
+        '.pdf': 'application/pdf',
+        '.mp4': 'video/mp4', '.webm': 'video/webm', '.mov': 'video/quicktime',
+        '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.ogg': 'audio/ogg', '.aac': 'audio/aac', '.flac': 'audio/flac', '.m4a': 'audio/mp4',
+      }
+      const contentType = mimeMap[ext] || 'application/octet-stream'
+      res.statusCode = 200
+      res.setHeader('Content-Type', contentType)
+      res.setHeader('Content-Length', fileStat.size)
+      const { createReadStream } = await import('node:fs')
+      const stream = createReadStream(filePath)
+      stream.pipe(res)
+      stream.on('error', () => {
+        if (!res.headersSent) setJson(res, 500, { error: 'Read error.' })
+        else res.end()
+      })
+    } catch {
+      setJson(res, 404, { error: 'File not found.' })
+    }
+    return true
+  }
+
+  // --- OFFICE file preview via OfficeCLI (read-only, no workspace restriction) ---
+  // Uses `view html` → reads the temp file officecli creates.
+  if (req.method === 'GET' && url.pathname === '/codex-api/files/office-preview') {
+    const filePath = url.searchParams.get('path') ?? ''
+    if (!filePath || !isAbsolute(filePath)) {
+      setJson(res, 400, { error: 'Expected absolute file path.' })
+      return true
+    }
+    try {
+      const fileStat = await stat(filePath)
+      if (!fileStat.isFile()) {
+        setJson(res, 400, { error: 'Path is not a file.' })
+        return true
+      }
+      const ext = extname(filePath).toLowerCase()
+      if (!['.docx', '.xlsx', '.pptx'].includes(ext)) {
+        setJson(res, 400, { error: 'Only .docx, .xlsx, .pptx files are supported for preview.' })
+        return true
+      }
+      const { execFile: execFileCb } = await import('node:child_process')
+      const { promisify } = await import('node:util')
+      const execFileAsync = promisify(execFileCb)
+      const officecliPath = process.env.OFFICECLI_PATH || 'officecli'
+
+      // `view html` outputs the temp file path to stdout
+      const { stdout } = await execFileAsync(officecliPath, ['view', filePath, 'html'], {
+        timeout: 30_000, maxBuffer: 10 * 1024 * 1024,
+      })
+      let html: string
+      const trimmed = stdout.trim()
+      if (trimmed.endsWith('.html')) {
+        html = await readFile(trimmed, 'utf8')
+        rm(trimmed, { force: true }).catch(() => {})
+      } else if (trimmed.startsWith('<!') || trimmed.startsWith('<html')) {
+        html = trimmed
+      } else {
+        throw new Error('Unexpected officecli output')
+      }
+
+      res.statusCode = 200
+      res.setHeader('Content-Type', 'text/html; charset=utf-8')
+      res.end(html)
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Preview generation failed.'
+      if (msg.includes('ENOENT')) {
+        setJson(res, 500, { error: 'officecli not found. Set OFFICECLI_PATH or install: https://github.com/iOfficeAI/OfficeCLI' })
+      } else {
+        setJson(res, 500, { error: msg })
+      }
+    }
+    return true
+  }
+
   // --- UPLOAD files to a target directory ---
   if (req.method === 'POST' && url.pathname === '/codex-api/files/upload') {
     const targetDir = url.searchParams.get('path') ?? ''
diff --git a/src/style.css b/src/style.css
index e76142d6..7ba91a8b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1479,3 +1479,81 @@
 :root.dark .fmp-close {
   @apply border-zinc-600 bg-zinc-800 text-zinc-400 hover:bg-zinc-700;
 }
+
+/* ── File Preview Modal (dark) ── */
+:root.dark .fp-overlay {
+  @apply bg-black/60;
+}
+
+:root.dark .fp-modal {
+  @apply bg-zinc-900 border border-zinc-700;
+}
+
+:root.dark .fp-header {
+  @apply border-zinc-700;
+}
+
+:root.dark .fp-filename {
+  @apply text-zinc-100;
+}
+
+:root.dark .fp-size {
+  @apply text-zinc-500;
+}
+
+:root.dark .fp-action-btn {
+  @apply border-zinc-600 bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200;
+}
+
+:root.dark .fp-error {
+  @apply text-rose-400;
+}
+
+:root.dark .fp-code {
+  @apply bg-zinc-950;
+}
+
+:root.dark .fp-code .hljs { color: #e6edf3; }
+:root.dark .fp-code .hljs-keyword { color: #ff7b72; }
+:root.dark .fp-code .hljs-string { color: #a5d6ff; }
+:root.dark .fp-code .hljs-number { color: #79c0ff; }
+:root.dark .fp-code .hljs-comment { color: #8b949e; }
+:root.dark .fp-code .hljs-title { color: #d2a8ff; }
+:root.dark .fp-code .hljs-built_in { color: #ffa657; }
+:root.dark .fp-code .hljs-literal { color: #79c0ff; }
+:root.dark .fp-code .hljs-type { color: #ff7b72; }
+:root.dark .fp-code .hljs-attr { color: #79c0ff; }
+:root.dark .fp-code .hljs-tag { color: #7ee787; }
+:root.dark .fp-code .hljs-name { color: #7ee787; }
+:root.dark .fp-code .hljs-attribute { color: #79c0ff; }
+:root.dark .fp-code .hljs-selector-tag { color: #ff7b72; }
+:root.dark .fp-code .hljs-selector-class { color: #d2a8ff; }
+:root.dark .fp-code .hljs-variable { color: #ffa657; }
+:root.dark .fp-code .hljs-meta { color: #79c0ff; }
+:root.dark .fp-code .hljs-addition { color: #aff5b4; background: rgba(46,160,67,0.15); }
+:root.dark .fp-code .hljs-deletion { color: #ffdcd7; background: rgba(248,81,73,0.15); }
+
+:root.dark .fp-text {
+  @apply bg-zinc-950 text-zinc-300;
+}
+
+:root.dark .fp-markdown {
+  @apply text-zinc-200;
+}
+
+:root.dark .fp-markdown h1 { @apply border-zinc-700; }
+:root.dark .fp-markdown a { @apply text-blue-400; }
+:root.dark .fp-markdown code { @apply bg-zinc-800; }
+:root.dark .fp-markdown pre { @apply bg-zinc-800; }
+:root.dark .fp-markdown blockquote { @apply border-zinc-600 text-zinc-400; }
+:root.dark .fp-markdown th { @apply bg-zinc-800; }
+:root.dark .fp-markdown th, :root.dark .fp-markdown td { @apply border-zinc-700; }
+:root.dark .fp-markdown hr { @apply border-zinc-700; }
+
+:root.dark .fp-truncated {
+  @apply bg-amber-950 text-amber-400 border-amber-800;
+}
+
+:root.dark .fp-media {
+  @apply bg-zinc-950;
+}

From d74a27ae58b543c213540f4d8914b21f41519900 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 19:39:32 +0800
Subject: [PATCH 07/30] feat(docker): Add Docker packaging and GHCR publish
 workflow

- Create a multi-stage Dockerfile to build and run the app with pnpm
- Install Codex CLI and OfficeCLI in the runtime image for full support
- Add docker-compose configuration and example environment variables
- Add a GitHub Actions workflow to build multi-arch images and push to GHCR
---
 .dockerignore                      |   8 ++
 .env.example                       |  27 ++++++
 .github/workflows/docker-build.yml | 145 +++++++++++++++++++++++++++++
 Dockerfile                         |  62 ++++++++++++
 docker-compose.yaml                |  25 +++++
 5 files changed, 267 insertions(+)
 create mode 100644 .dockerignore
 create mode 100644 .env.example
 create mode 100644 .github/workflows/docker-build.yml
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yaml

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 00000000..0fc66982
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,8 @@
+node_modules
+dist
+dist-cli
+.git
+.idea
+.claude
+*.md
+!README.md
diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..3b546c7c
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,27 @@
+# ── Required ──────────────────────────────────────────────
+# OpenAI API key for Codex
+OPENAI_API_KEY=sk-xxx
+
+# ── Optional ─────────────────────────────────────────────
+# Codex config/session storage (default: ~/.codex)
+# CODEX_HOME=/root/.codex
+
+# Default workspace directory for file operations
+# CODEX_WORKSPACE=/workspace
+
+# Server port (default: 5900)
+# CODEXUI_SERVER_PORT=5900
+
+# Sandbox mode: read-only | workspace-write | danger-full-access
+# CODEXUI_SANDBOX_MODE=workspace-write
+
+# Approval policy for tool calls: suggest | auto-edit | never
+# CODEXUI_APPROVAL_POLICY=suggest
+
+# OfficeCLI binary path (default: officecli in PATH)
+# OFFICECLI_PATH=/usr/local/bin/officecli
+
+# ── Telegram Integration (optional) ─────────────────────
+# TELEGRAM_BOT_TOKEN=
+# TELEGRAM_ALLOWED_USER_IDS=
+# TELEGRAM_DEFAULT_CWD=/workspace
diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml
new file mode 100644
index 00000000..76420497
--- /dev/null
+++ b/.github/workflows/docker-build.yml
@@ -0,0 +1,145 @@
+name: Build & Push Docker Image to GHCR
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-arch:
+    strategy:
+      max-parallel: 2
+      matrix:
+        include:
+          - arch: amd64
+            runner: ubuntu-latest
+          - arch: arm64
+            runner: ubuntu-22.04-arm
+
+    runs-on: ${{ matrix.runner }}
+
+    permissions:
+      contents: read
+      packages: write
+
+    outputs:
+      version: ${{ steps.meta.outputs.version }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Get version tag
+        id: meta
+        run: |
+          if [[ "${{ github.ref_type }}" == "tag" ]]; then
+            VERSION="${{ github.ref_name }}"
+          else
+            VERSION="dev-$(git rev-parse --short HEAD)"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "Version: $VERSION"
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push (${{ matrix.arch }})
+        id: buildx1
+        continue-on-error: true
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/${{ matrix.arch }}
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ matrix.arch }}-${{ steps.meta.outputs.version }}
+          push: true
+          provenance: false
+          sbom: false
+          cache-from: type=gha,scope=${{ matrix.arch }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.arch }}
+
+      - name: Retry build on failure
+        if: steps.buildx1.outcome != 'success'
+        run: sleep 10
+
+      - name: Build and push (retry)
+        if: steps.buildx1.outcome != 'success'
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/${{ matrix.arch }}
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ matrix.arch }}-${{ steps.meta.outputs.version }}
+          push: true
+          provenance: false
+          sbom: false
+          cache-from: type=gha,scope=${{ matrix.arch }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.arch }}
+
+  merge-manifest:
+    needs: build-and-push-arch
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create and push manifest lists
+        run: |
+          VERSION="${{ needs.build-and-push-arch.outputs.version }}"
+          IMAGE_BASE="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
+
+          # Lowercase the image name (GHCR requires lowercase)
+          IMAGE_BASE=$(echo "$IMAGE_BASE" | tr '[:upper:]' '[:lower:]')
+
+          LATEST_TAG="${IMAGE_BASE}:latest"
+          VERSION_TAG="${IMAGE_BASE}:${VERSION}"
+
+          echo "Creating manifest for ${VERSION_TAG} and ${LATEST_TAG}..."
+
+          # Clean up old manifests
+          docker manifest rm ${LATEST_TAG} 2>/dev/null || true
+          docker manifest rm ${VERSION_TAG} 2>/dev/null || true
+
+          # Version tag manifest
+          docker manifest create ${VERSION_TAG} \
+            --amend ${IMAGE_BASE}:amd64-${VERSION} \
+            --amend ${IMAGE_BASE}:arm64-${VERSION}
+          docker manifest push ${VERSION_TAG}
+
+          # Latest tag manifest
+          docker manifest create ${LATEST_TAG} \
+            --amend ${IMAGE_BASE}:amd64-${VERSION} \
+            --amend ${IMAGE_BASE}:arm64-${VERSION}
+          docker manifest push ${LATEST_TAG}
+
+          echo "Manifests pushed successfully"
+
+      - name: Inspect final manifests
+        run: |
+          IMAGE_BASE=$(echo "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}" | tr '[:upper:]' '[:lower:]')
+          echo "--- Version Manifest ---"
+          docker manifest inspect ${IMAGE_BASE}:${{ needs.build-and-push-arch.outputs.version }}
+          echo "--- Latest Manifest ---"
+          docker manifest inspect ${IMAGE_BASE}:latest
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 00000000..c1f905b4
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,62 @@
+FROM node:20-bookworm-slim AS builder
+
+WORKDIR /src
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    ca-certificates \
+    python3 \
+    make \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN corepack enable
+
+COPY package.json ./
+RUN pnpm install
+
+COPY . .
+RUN pnpm run build
+
+
+FROM node:20-bookworm-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates \
+    git \
+    curl \
+    tini \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN corepack enable
+
+# Install codex CLI
+RUN npm install -g @openai/codex
+
+# Install OfficeCLI (office file preview)
+RUN ARCH=$(uname -m) && \
+    if [ "$ARCH" = "aarch64" ] || [ "$ARCH" = "arm64" ]; then \
+      BINARY="officecli-linux-arm64"; \
+    else \
+      BINARY="officecli-linux-x64"; \
+    fi && \
+    curl -fsSL "https://github.com/iOfficeAI/OfficeCLI/releases/latest/download/${BINARY}" -o /usr/local/bin/officecli && \
+    chmod +x /usr/local/bin/officecli
+
+# Install runtime dependencies
+COPY --from=builder /src/package.json /app/package.json
+RUN pnpm install --prod
+
+# Copy build artifacts
+COPY --from=builder /src/dist /app/dist
+COPY --from=builder /src/dist-cli /app/dist-cli
+
+ENV NODE_ENV=production
+ENV CODEX_HOME=/root/.codex
+
+EXPOSE 5900
+
+ENTRYPOINT ["/usr/bin/tini", "--"]
+CMD ["node", "dist-cli/index.js", "--port", "5900", "--no-open", "--no-login", "--no-tunnel"]
diff --git a/docker-compose.yaml b/docker-compose.yaml
new file mode 100644
index 00000000..3b86530e
--- /dev/null
+++ b/docker-compose.yaml
@@ -0,0 +1,25 @@
+services:
+  codexui:
+    image: ghcr.io/limlll/codexui:latest
+    # build: .
+    container_name: codexui
+    restart: unless-stopped
+    ports:
+      - "5900:5900"
+    volumes:
+      - codex-data:/root/.codex
+      - ./workspace:/workspace
+    environment:
+      - OPENAI_API_KEY=${OPENAI_API_KEY}
+      - CODEX_HOME=/root/.codex
+      - CODEX_WORKSPACE=/workspace
+      # - CODEXUI_SANDBOX_MODE=workspace-write
+      # - CODEXUI_APPROVAL_POLICY=suggest
+      # - TELEGRAM_BOT_TOKEN=${TELEGRAM_BOT_TOKEN}
+      # - TELEGRAM_ALLOWED_USER_IDS=${TELEGRAM_ALLOWED_USER_IDS}
+      # - TELEGRAM_DEFAULT_CWD=/workspace
+    env_file:
+      - .env
+
+volumes:
+  codex-data:

From aabeb0a6c6f959b9f8100333538c81296c240582 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 19:53:22 +0800
Subject: [PATCH 08/30] fix(ci): Use normalized image name across Docker
 workflow

- Compute the full GHCR image name once in the metadata step
- Export the normalized lowercase image as a job output for later jobs
- Replace direct env-based tags and manifest references with the shared output
- Avoid duplicated lowercase conversion logic in manifest creation and inspection
---
 .github/workflows/docker-build.yml | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml
index 76420497..0f3d3e35 100644
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@@ -8,7 +8,6 @@ on:
 
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
 
 jobs:
   build-and-push-arch:
@@ -29,12 +28,13 @@ jobs:
 
     outputs:
       version: ${{ steps.meta.outputs.version }}
+      image: ${{ steps.meta.outputs.image }}
 
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Get version tag
+      - name: Get version tag and image name
         id: meta
         run: |
           if [[ "${{ github.ref_type }}" == "tag" ]]; then
@@ -42,8 +42,10 @@ jobs:
           else
             VERSION="dev-$(git rev-parse --short HEAD)"
           fi
+          IMAGE_NAME=$(echo "${{ env.REGISTRY }}/${{ github.repository }}" | tr '[:upper:]' '[:lower:]')
           echo "version=$VERSION" >> $GITHUB_OUTPUT
-          echo "Version: $VERSION"
+          echo "image=$IMAGE_NAME" >> $GITHUB_OUTPUT
+          echo "Version: $VERSION, Image: $IMAGE_NAME"
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -64,7 +66,7 @@ jobs:
           file: ./Dockerfile
           platforms: linux/${{ matrix.arch }}
           tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ matrix.arch }}-${{ steps.meta.outputs.version }}
+            ${{ steps.meta.outputs.image }}:${{ matrix.arch }}-${{ steps.meta.outputs.version }}
           push: true
           provenance: false
           sbom: false
@@ -83,7 +85,7 @@ jobs:
           file: ./Dockerfile
           platforms: linux/${{ matrix.arch }}
           tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ matrix.arch }}-${{ steps.meta.outputs.version }}
+            ${{ steps.meta.outputs.image }}:${{ matrix.arch }}-${{ steps.meta.outputs.version }}
           push: true
           provenance: false
           sbom: false
@@ -108,10 +110,7 @@ jobs:
       - name: Create and push manifest lists
         run: |
           VERSION="${{ needs.build-and-push-arch.outputs.version }}"
-          IMAGE_BASE="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}"
-
-          # Lowercase the image name (GHCR requires lowercase)
-          IMAGE_BASE=$(echo "$IMAGE_BASE" | tr '[:upper:]' '[:lower:]')
+          IMAGE_BASE="${{ needs.build-and-push-arch.outputs.image }}"
 
           LATEST_TAG="${IMAGE_BASE}:latest"
           VERSION_TAG="${IMAGE_BASE}:${VERSION}"
@@ -138,7 +137,7 @@ jobs:
 
       - name: Inspect final manifests
         run: |
-          IMAGE_BASE=$(echo "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}" | tr '[:upper:]' '[:lower:]')
+          IMAGE_BASE="${{ needs.build-and-push-arch.outputs.image }}"
           echo "--- Version Manifest ---"
           docker manifest inspect ${IMAGE_BASE}:${{ needs.build-and-push-arch.outputs.version }}
           echo "--- Latest Manifest ---"

From 27e3e02558fc75b52fee0d912fd2659dbf621468 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 19:55:50 +0800
Subject: [PATCH 09/30] improve(ui): Enhance dropdown interactivity and dark
 mode styling

- Add pointer cursors and hover text states for composer and MCP triggers
- Move search dropdown and skill picker styles out of scoped blocks to enable shared dark mode rules
- Expand dark theme coverage for MCP, search dropdown, and skill picker components
- Adjust MCP dropdown menu to use a minimum width for better content fit
- Add interactive cursor styles for sidebar thread rows and thread buttons
---
 src/components/content/ComposerDropdown.vue   |   2 +-
 .../content/ComposerMcpDropdown.vue           |   4 +-
 .../content/ComposerSearchDropdown.vue        |   2 +-
 .../content/ComposerSkillPicker.vue           |   3 +-
 src/components/sidebar/SidebarThreadTree.vue  |   4 +-
 src/style.css                                 | 109 +++++++++++++++++-
 6 files changed, 114 insertions(+), 10 deletions(-)

diff --git a/src/components/content/ComposerDropdown.vue b/src/components/content/ComposerDropdown.vue
index 97f8332b..a0ffa567 100644
--- a/src/components/content/ComposerDropdown.vue
+++ b/src/components/content/ComposerDropdown.vue
@@ -157,7 +157,7 @@ onBeforeUnmount(() => {
 }
 
 .composer-dropdown-trigger {
-  @apply inline-flex min-h-7 min-w-0 items-center gap-1 border-0 bg-transparent px-0 py-0.5 text-sm leading-tight text-zinc-500 outline-none transition;
+  @apply inline-flex min-h-7 min-w-0 items-center gap-1 border-0 bg-transparent px-0 py-0.5 text-sm leading-tight text-zinc-500 outline-none transition hover:text-zinc-800 cursor-pointer;
 }
 
 .composer-dropdown-prefix-icon {
diff --git a/src/components/content/ComposerMcpDropdown.vue b/src/components/content/ComposerMcpDropdown.vue
index 4f46242a..aea3203c 100644
--- a/src/components/content/ComposerMcpDropdown.vue
+++ b/src/components/content/ComposerMcpDropdown.vue
@@ -119,7 +119,7 @@ onBeforeUnmount(() => {
 }
 
 .mcp-dropdown-trigger {
-  @apply inline-flex min-h-7 min-w-0 items-center gap-1 border-0 bg-transparent px-0 py-0.5 text-sm leading-tight text-zinc-500 outline-none transition;
+  @apply inline-flex min-h-7 min-w-0 items-center gap-1 border-0 bg-transparent px-0 py-0.5 text-sm leading-tight text-zinc-500 outline-none transition hover:text-zinc-800 cursor-pointer;
 }
 
 .mcp-dropdown-trigger:disabled {
@@ -139,7 +139,7 @@ onBeforeUnmount(() => {
 }
 
 .mcp-dropdown-menu {
-  @apply absolute left-0 z-50 w-56 rounded-xl border border-zinc-200 bg-white p-1 shadow-lg;
+  @apply absolute left-0 z-50 min-w-56 rounded-xl border border-zinc-200 bg-white p-1 shadow-lg;
   top: calc(100% + 8px);
 }
 
diff --git a/src/components/content/ComposerSearchDropdown.vue b/src/components/content/ComposerSearchDropdown.vue
index 86b24487..dc7cba87 100644
--- a/src/components/content/ComposerSearchDropdown.vue
+++ b/src/components/content/ComposerSearchDropdown.vue
@@ -169,7 +169,7 @@ onMounted(() => window.addEventListener('pointerdown', onDocumentPointerDown))
 onBeforeUnmount(() => window.removeEventListener('pointerdown', onDocumentPointerDown))
 </script>
 
-<style scoped>
+<style>
 @reference "tailwindcss";
 
 .search-dropdown {
diff --git a/src/components/content/ComposerSkillPicker.vue b/src/components/content/ComposerSkillPicker.vue
index e11af41c..7acd47e3 100644
--- a/src/components/content/ComposerSkillPicker.vue
+++ b/src/components/content/ComposerSkillPicker.vue
@@ -96,7 +96,7 @@ watch(query, () => {
 })
 </script>
 
-<style scoped>
+<style>
 @reference "tailwindcss";
 
 .skill-picker {
@@ -134,4 +134,5 @@ watch(query, () => {
 .skill-picker-empty {
   @apply p-3 text-center text-sm text-zinc-400;
 }
+
 </style>
diff --git a/src/components/sidebar/SidebarThreadTree.vue b/src/components/sidebar/SidebarThreadTree.vue
index 6154f0a7..e26ab362 100644
--- a/src/components/sidebar/SidebarThreadTree.vue
+++ b/src/components/sidebar/SidebarThreadTree.vue
@@ -1965,7 +1965,7 @@ onBeforeUnmount(() => {
 }
 
 .thread-row {
-  @apply hover:bg-zinc-200;
+  @apply hover:bg-zinc-200 cursor-pointer;
 }
 
 .thread-row[data-menu-open='true'] {
@@ -1981,7 +1981,7 @@ onBeforeUnmount(() => {
 }
 
 .thread-main-button {
-  @apply min-w-0 w-full text-left rounded px-0 py-0 flex items-center min-h-5;
+  @apply min-w-0 w-full text-left rounded px-0 py-0 flex items-center min-h-5 cursor-pointer;
 }
 
 .thread-row-title-wrap {
diff --git a/src/style.css b/src/style.css
index 7ba91a8b..ef16555f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,6 +1,16 @@
 @import "tailwindcss";
 @import "highlight.js/styles/github-dark.css";
 
+/* ── Global interactive element styles ── */
+button, [role="button"], [role="tab"], [role="option"], [role="menuitem"],
+summary, select {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
 :root.dark {
   color-scheme: dark;
 }
@@ -271,7 +281,7 @@
 }
 
 :root.dark .composer-dropdown-trigger {
-  @apply text-zinc-400;
+  @apply text-zinc-400 hover:text-zinc-200;
 }
 
 
@@ -1394,12 +1404,105 @@
 }
 
 /* MCP dropdown dark mode */
+:root.dark .mcp-dropdown-trigger {
+  @apply text-zinc-400 hover:text-zinc-200;
+}
+
 :root.dark .mcp-dropdown-menu {
-  @apply border-zinc-700 bg-zinc-800;
+  @apply border-zinc-600 bg-zinc-800;
 }
 
 :root.dark .mcp-dropdown-option {
-  @apply text-zinc-200 hover:bg-zinc-700;
+  @apply text-zinc-300 hover:bg-zinc-700;
+}
+
+:root.dark .mcp-dropdown-loading,
+:root.dark .mcp-dropdown-empty {
+  @apply text-zinc-500;
+}
+
+:root.dark .mcp-dropdown-chevron {
+  @apply text-zinc-500;
+}
+
+:root.dark .mcp-dropdown-name {
+  @apply text-zinc-300;
+}
+
+
+/* Search dropdown (ComposerSearchDropdown) dark mode */
+:root.dark .search-dropdown-trigger {
+  @apply text-zinc-400 hover:text-zinc-200;
+}
+
+:root.dark .search-dropdown-menu-wrap-up,
+:root.dark .search-dropdown-menu-wrap-down {
+  @apply border-zinc-600 bg-zinc-800;
+}
+
+:root.dark .search-dropdown-search-wrap {
+  @apply border-zinc-700;
+}
+
+:root.dark .search-dropdown-search {
+  @apply border-zinc-600 bg-zinc-900 text-zinc-200 placeholder-zinc-500 focus:border-zinc-500 focus:bg-zinc-800;
+}
+
+:root.dark .search-dropdown-option {
+  @apply text-zinc-300 hover:bg-zinc-700;
+}
+
+:root.dark .search-dropdown-option.is-highlighted {
+  @apply bg-zinc-700;
+}
+
+:root.dark .search-dropdown-option.is-selected {
+  @apply text-zinc-100;
+}
+
+:root.dark .search-dropdown-option-desc {
+  @apply text-zinc-500;
+}
+
+:root.dark .search-dropdown-empty {
+  @apply text-zinc-500;
+}
+
+:root.dark .search-dropdown-chevron {
+  @apply text-zinc-500;
+}
+
+/* Skill picker dark mode */
+:root.dark .skill-picker {
+  @apply border-zinc-600 bg-zinc-800;
+}
+
+:root.dark .skill-picker-header {
+  @apply border-zinc-700;
+}
+
+:root.dark .skill-picker-search {
+  @apply border-zinc-600 bg-zinc-900 text-zinc-200 placeholder-zinc-500 focus:border-zinc-500 focus:bg-zinc-800;
+}
+
+:root.dark .skill-picker-item {
+  @apply hover:bg-zinc-700;
+}
+
+:root.dark .skill-picker-item.is-highlighted {
+  @apply bg-zinc-700;
+}
+
+:root.dark .skill-picker-name {
+  @apply text-zinc-200;
+}
+
+:root.dark .skill-picker-desc {
+  @apply text-zinc-500;
+}
+
+:root.dark .skill-picker-empty {
+  @apply text-zinc-500;
 }
 
 /* File manager dark mode */

From b8dbdb37f52500996e53be931051c1b09bbb8c7e Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 20:02:09 +0800
Subject: [PATCH 10/30] fix(docker): Include pnpm lockfile for reproducible
 image builds

- Stop ignoring pnpm-lock.yaml and add it to version control
- Copy the lockfile into the Docker build context before installing deps
- Use pnpm install --frozen-lockfile to ensure deterministic installs
---
 .gitignore     |    1 -
 Dockerfile     |    4 +-
 pnpm-lock.yaml | 3601 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 3603 insertions(+), 3 deletions(-)
 create mode 100644 pnpm-lock.yaml

diff --git a/.gitignore b/.gitignore
index 9e202931..b0276dcf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,6 @@ output/
 *.tsbuildinfo
 
 package-lock.json
-pnpm-lock.yaml
 .codex/
 .env.local
 
diff --git a/Dockerfile b/Dockerfile
index c1f905b4..d2634ac0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,8 +12,8 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 
 RUN corepack enable
 
-COPY package.json ./
-RUN pnpm install
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
 
 COPY . .
 RUN pnpm run build
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 00000000..2d3be130
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,3601 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@tabler/icons-vue':
+        specifier: ^3.41.1
+        version: 3.41.1(vue@3.5.32(typescript@5.9.3))
+      '@types/markdown-it':
+        specifier: ^14.1.2
+        version: 14.1.2
+      commander:
+        specifier: ^13.1.0
+        version: 13.1.0
+      express:
+        specifier: ^5.1.0
+        version: 5.2.1
+      firebase:
+        specifier: ^12.2.1
+        version: 12.12.1
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
+      markdown-it:
+        specifier: ^14.1.1
+        version: 14.1.1
+      qrcode-terminal:
+        specifier: ^0.12.0
+        version: 0.12.0
+      vue-i18n:
+        specifier: ^11.1.12
+        version: 11.1.12(vue@3.5.32(typescript@5.9.3))
+      ws:
+        specifier: ^8.18.3
+        version: 8.20.0
+    devDependencies:
+      '@intlify/devtools-types':
+        specifier: ^11.3.2
+        version: 11.3.2
+      '@playwright/test':
+        specifier: ^1.59.1
+        version: 1.59.1
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.4(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))
+      '@types/express':
+        specifier: ^5.0.0
+        version: 5.0.6
+      '@types/node':
+        specifier: ^22.13.2
+        version: 22.19.17
+      '@types/qrcode-terminal':
+        specifier: ^0.12.2
+        version: 0.12.2
+      '@types/ws':
+        specifier: ^8.18.1
+        version: 8.18.1
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.1
+        version: 5.2.4(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))(vue@3.5.32(typescript@5.9.3))
+      playwright:
+        specifier: ^1.59.1
+        version: 1.59.1
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.2.4
+      tsup:
+        specifier: ^8.4.0
+        version: 8.5.1(jiti@2.6.1)(postcss@8.5.10)(typescript@5.9.3)
+      typescript:
+        specifier: ^5.7.3
+        version: 5.9.3
+      vite:
+        specifier: ^6.1.0
+        version: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.32(typescript@5.9.3)
+      vue-router:
+        specifier: ^4.6.4
+        version: 4.6.4(vue@3.5.32(typescript@5.9.3))
+      vue-tsc:
+        specifier: ^2.2.0
+        version: 2.2.12(typescript@5.9.3)
+
+packages:
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.2':
+    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@esbuild/aix-ppc64@0.25.12':
+    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/aix-ppc64@0.27.7':
+    resolution: {integrity: sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.12':
+    resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm64@0.27.7':
+    resolution: {integrity: sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.12':
+    resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.7':
+    resolution: {integrity: sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.12':
+    resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.7':
+    resolution: {integrity: sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.12':
+    resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-arm64@0.27.7':
+    resolution: {integrity: sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.12':
+    resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.7':
+    resolution: {integrity: sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    resolution: {integrity: sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.12':
+    resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.7':
+    resolution: {integrity: sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.12':
+    resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm64@0.27.7':
+    resolution: {integrity: sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.12':
+    resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.7':
+    resolution: {integrity: sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.12':
+    resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.7':
+    resolution: {integrity: sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.12':
+    resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.7':
+    resolution: {integrity: sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.12':
+    resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.7':
+    resolution: {integrity: sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.12':
+    resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.7':
+    resolution: {integrity: sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.12':
+    resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.7':
+    resolution: {integrity: sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.12':
+    resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.7':
+    resolution: {integrity: sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.12':
+    resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.7':
+    resolution: {integrity: sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.12':
+    resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.7':
+    resolution: {integrity: sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    resolution: {integrity: sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.12':
+    resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.7':
+    resolution: {integrity: sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    resolution: {integrity: sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.12':
+    resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/sunos-x64@0.27.7':
+    resolution: {integrity: sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.12':
+    resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-arm64@0.27.7':
+    resolution: {integrity: sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.12':
+    resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.7':
+    resolution: {integrity: sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.12':
+    resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.7':
+    resolution: {integrity: sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@firebase/ai@2.11.1':
+    resolution: {integrity: sha512-WGTF81W3WBKJY+c7xqTzO15OGAkCAs8cpADqflAI0skhTZjIkhF0qyf55rq4Ctt6jKygkv99rPfMrjAHTgXaVQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@firebase/app-types': 0.x
+
+  '@firebase/analytics-compat@0.2.27':
+    resolution: {integrity: sha512-ZObpYpAxL6JfgH7GnvlDD0sbzGZ0o4nijV8skatV9ZX49hJtCYbFqaEcPYptT94rgX1KUoKEderC7/fa7hybtw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/analytics-types@0.8.3':
+    resolution: {integrity: sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==}
+
+  '@firebase/analytics@0.10.21':
+    resolution: {integrity: sha512-j2y2q65BlgLGB5Pwjhv/Jopw2X/TBTzvAtI5z/DSp56U4wBj7LfhBfzbdCtFPges+Wz0g55GdoawXibOH5jGng==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/app-check-compat@0.4.2':
+    resolution: {integrity: sha512-M91NhxqbSkI0ChkJWy69blC+rPr6HEgaeRllddSaU1pQ/7IiegeCQM9pPDIgvWnwnBSzKhUHpe6ro/jhJ+cvzw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/app-check-interop-types@0.3.3':
+    resolution: {integrity: sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==}
+
+  '@firebase/app-check-types@0.5.3':
+    resolution: {integrity: sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==}
+
+  '@firebase/app-check@0.11.2':
+    resolution: {integrity: sha512-jcXQVMHAQ5AEKzVD5C7s5fmAYeFOuN6lAJeNTgZK2B9aLnofWaJt8u1A8Idm8gpsBBYSaY3cVyeH5SWMOVPBLQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/app-compat@0.5.11':
+    resolution: {integrity: sha512-KaACDjXkK5VLpI01vEs592R7/8s5DjFdIXfKoR385ly1SmK3Tu+jMHCIB4MsiY5jsez6v7VlEX/3rJ90dVkHyA==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/app-types@0.9.4':
+    resolution: {integrity: sha512-crX9TA5SVYZwLPG7/R16IsH8FLlgkPXjJUVhsVpHVDSqJiq3D/NuFTM5ctxGTExXAOeIn//69tQw47CPerM8MQ==}
+
+  '@firebase/app@0.14.11':
+    resolution: {integrity: sha512-yxADFW35LYkP8oSGobGsYIrI42I+GPCvKTNHx4meT9Yq3C950IVz1eANoBk822I9tbKv1wyv9P4Bv1G5TpucFw==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/auth-compat@0.6.5':
+    resolution: {integrity: sha512-IfVsafZ3QiXbsydXTP/XMI0wVYbJLI1rkb8Qqf03/h5FnL+upbbPOb+6Yj3RpcX+Y1iP5Uh18lxTHlXfbiyAow==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/auth-interop-types@0.2.4':
+    resolution: {integrity: sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==}
+
+  '@firebase/auth-types@0.13.0':
+    resolution: {integrity: sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/auth@1.13.0':
+    resolution: {integrity: sha512-mKkSLNym3UbnnZ06dAmtqzp5EpPGCANGCZDJbkoR135aoUdKG6Aizwcnp29RzsQpwH0nmy5nay17Sfbsh9oY8A==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@react-native-async-storage/async-storage': ^2.2.0 || ^3.0.0
+    peerDependenciesMeta:
+      '@react-native-async-storage/async-storage':
+        optional: true
+
+  '@firebase/component@0.7.2':
+    resolution: {integrity: sha512-iyVDGc6Vjx7Rm0cAdccLH/NG6fADsgJak/XW9IA2lPf8AjIlsemOpFGKczYyPHxm4rnKdR8z6sK4+KEC7NwmEg==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/data-connect@0.6.0':
+    resolution: {integrity: sha512-OiugPRcdlhqXF97oR9CjVObILmsWU0dFUS0gXNYEe4bDfpW8pZmQ5GqhIPPtLWbT/0W2lMJJD7VILFMk+xuHPg==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/database-compat@2.1.3':
+    resolution: {integrity: sha512-GMyfWjD8mehjg/QpNkY/tl9G/MoeugPeg91n9D0atggxbWuKF/2KhVPHZDH+XmoP0EKYqMWYTtKxBsaBaNKLYQ==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/database-types@1.0.19':
+    resolution: {integrity: sha512-FqewjUZmV9LqFfuEnmgdcUpiOUz7qwLXxnm/H8BcMFEzQXtd1yyUDm8ex5VRad2nuTE+ahOuCjUAM/cyDncO+g==}
+
+  '@firebase/database@1.1.2':
+    resolution: {integrity: sha512-lP96CMjMPy/+d1d9qaaHjHHdzdwvEOuyyLq9ehX89e2XMKwS1jHNzYBO+42bdSumuj5ukPbmnFtViZu8YOMT+w==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/firestore-compat@0.4.8':
+    resolution: {integrity: sha512-WK9NJRpnosGD2nuyjdr7K+Ht7AxRYJlTF62myI4rRA7ibJOosbecvjacR5oirJ7s1BgNS6qzcBw7n4fD3a5w1w==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/firestore-types@3.0.3':
+    resolution: {integrity: sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/firestore@4.14.0':
+    resolution: {integrity: sha512-bZc6YOjRkMBVA16527tgzi6iN9n//xRB3Mmx/R+Gr6UAP/+xrIKOejQIcn1hh+tCzNT8jO0jI+kWox5J4tB/qQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/functions-compat@0.4.3':
+    resolution: {integrity: sha512-BxkEwWgx1of0tKaao/r2VR6WBLk/RAiyztatiONPrPE8gkitFkOnOCxf8i9cUyA5hX5RGt5H30uNn25Q6QNEmQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/functions-types@0.6.3':
+    resolution: {integrity: sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==}
+
+  '@firebase/functions@0.13.3':
+    resolution: {integrity: sha512-csO7ckK3SSs+NUZW1nms9EK7ckHe/1QOjiP8uAkCYa7ND18s44vjE9g3KxEeIUpyEPqZaX1EhJuFyZjHigAcYw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/installations-compat@0.2.21':
+    resolution: {integrity: sha512-zahIUkaVKbR8zmTeBHkdfaVl6JGWlhVoSjF7CVH33nFqD3SlPEpEEegn2GNT5iAfsVdtlCyJJ9GW4YKjq+RJKQ==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/installations-types@0.5.3':
+    resolution: {integrity: sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+
+  '@firebase/installations@0.6.21':
+    resolution: {integrity: sha512-xGFGTeICJZ5vhrmmDukeczIcFULFXybojML2+QSDFoKj5A7zbGN7KzFGSKNhDkIxpjzsYG9IleJyUebuAcmqWA==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/logger@0.5.0':
+    resolution: {integrity: sha512-cGskaAvkrnh42b3BA3doDWeBmuHFO/Mx5A83rbRDYakPjO9bJtRL3dX7javzc2Rr/JHZf4HlterTW2lUkfeN4g==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/messaging-compat@0.2.25':
+    resolution: {integrity: sha512-eoOQqGLtRlseTdiemTN44LlHZpltK5gnhq8XVUuLgtIOG+odtDzrz2UoTpcJWSzaJQVxNLb/x9f39tHdDM4N4w==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/messaging-interop-types@0.2.3':
+    resolution: {integrity: sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==}
+
+  '@firebase/messaging@0.12.25':
+    resolution: {integrity: sha512-7RhDwoDHlOK1/ou0/LeubxmjcngsTjDdrY/ssg2vwAVpUuVAhQzQvuCAOYxcX5wNC1zCgQ54AP1vdngBwbCmOQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/performance-compat@0.2.24':
+    resolution: {integrity: sha512-YRlejH8wLt7ThWao+HXoKUHUrZKGYq+otxkPS+8nuE5PeN1cBXX7NAJl9ueuUkBwMIrnKdnDqL/voHXxDAAt3g==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/performance-types@0.2.3':
+    resolution: {integrity: sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==}
+
+  '@firebase/performance@0.7.11':
+    resolution: {integrity: sha512-V3uAhrz7IYJuji+OgT3qYTGKxpek/TViXti9OSsUJ4AexZ3jQjYH5Yrn7JvBxk8MGiSLsC872hh+BxQiPZsm7g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/remote-config-compat@0.2.23':
+    resolution: {integrity: sha512-4+KqRRHEUUmKT6tFmnpWATOsaFfmSuBs1jXH8JzVtMLEYqq/WS9IDM92OdefFDSrAA2xGd0WN004z8mKeIIscw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/remote-config-types@0.5.0':
+    resolution: {integrity: sha512-vI3bqLoF14L/GchtgayMiFpZJF+Ao3uR8WCde0XpYNkSokDpAKca2DxvcfeZv7lZUqkUwQPL2wD83d3vQ4vvrg==}
+
+  '@firebase/remote-config@0.8.2':
+    resolution: {integrity: sha512-5EXqOThV4upjK9D38d/qOSVwOqRhemlaOFk9vCkMNNALeIlwr+4pLjtLNo4qoY8etQmU/1q4aIATE9N8PFqg0g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/storage-compat@0.4.2':
+    resolution: {integrity: sha512-R+aB38wxCH5zjIO/xu9KznI7fgiPuZAG98uVm1NcidHyyupGgIDLKigGmRGBZMnxibe/m2oxNKoZpfEbUX2aQQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/storage-types@0.8.3':
+    resolution: {integrity: sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/storage@0.14.2':
+    resolution: {integrity: sha512-o/culaTeJ8GRpKXRJov21rux/n9dRaSOWLebyatFP2sqEdCxQPjVA1H9Z2fzYwQxMIU0JVmC7SPPmU11v7L6vQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/util@1.15.0':
+    resolution: {integrity: sha512-AmWf3cHAOMbrCPG4xdPKQaj5iHnyYfyLKZxwz+Xf55bqKbpAmcYifB4jQinT2W9XhDRHISOoPyBOariJpCG6FA==}
+    engines: {node: '>=20.0.0'}
+
+  '@firebase/webchannel-wrapper@1.0.5':
+    resolution: {integrity: sha512-+uGNN7rkfn41HLO0vekTFhTxk61eKa8mTpRGLO0QSqlQdKvIoGAvLp3ppdVIWbTGYJWM6Kp0iN+PjMIOcnVqTw==}
+
+  '@grpc/grpc-js@1.9.15':
+    resolution: {integrity: sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==}
+    engines: {node: ^8.13.0 || >=10.10.0}
+
+  '@grpc/proto-loader@0.7.15':
+    resolution: {integrity: sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  '@intlify/core-base@11.1.12':
+    resolution: {integrity: sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==}
+    engines: {node: '>= 16'}
+
+  '@intlify/core-base@11.3.2':
+    resolution: {integrity: sha512-cgsUaV/dyD6aS49UPgerIblrWeXAZHNaDWqm4LujOGC7IafSyhghGXEiSVvuDYaDPiQTP+tSFSTM1HIu7Yp1nA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/devtools-types@11.3.2':
+    resolution: {integrity: sha512-q96G2ZZw0FNoXzejbjIf9dbfgz1xyYBZu6ZT4b5TE/55j8d1O9X5jv0k+U+L3fVe7uebPcqRQFD0ffm30i5mJA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.1.12':
+    resolution: {integrity: sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.3.2':
+    resolution: {integrity: sha512-d/awyHUkNSaGPxBxT/qlUpfRizxHX9dt55CnW03xx5p1KmMyfYHKupCnvzINX+Na8JR8LAR7y32lPKjoeQGmzA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.1.12':
+    resolution: {integrity: sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.3.2':
+    resolution: {integrity: sha512-x66fjdH6i+lNYPae5URSQGTjBL68Av6hi09jvC5Ci96iTkwfqrPhCj46aylQZmgMaG89rOZCIKqS7ApC8ZDVjg==}
+    engines: {node: '>= 16'}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@playwright/test@1.59.1':
+    resolution: {integrity: sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  '@protobufjs/aspromise@1.1.2':
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+
+  '@protobufjs/base64@1.1.2':
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+
+  '@protobufjs/codegen@2.0.4':
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+
+  '@protobufjs/eventemitter@1.1.0':
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+
+  '@protobufjs/fetch@1.1.0':
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+
+  '@protobufjs/float@1.0.2':
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+
+  '@protobufjs/inquire@1.1.0':
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+
+  '@protobufjs/path@1.1.2':
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+
+  '@protobufjs/pool@1.1.0':
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+
+  '@protobufjs/utf8@1.1.0':
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+
+  '@rollup/rollup-android-arm-eabi@4.60.2':
+    resolution: {integrity: sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.60.2':
+    resolution: {integrity: sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.60.2':
+    resolution: {integrity: sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.60.2':
+    resolution: {integrity: sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.60.2':
+    resolution: {integrity: sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.60.2':
+    resolution: {integrity: sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.2':
+    resolution: {integrity: sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.2':
+    resolution: {integrity: sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.2':
+    resolution: {integrity: sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.60.2':
+    resolution: {integrity: sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.2':
+    resolution: {integrity: sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.60.2':
+    resolution: {integrity: sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.2':
+    resolution: {integrity: sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.2':
+    resolution: {integrity: sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.2':
+    resolution: {integrity: sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.2':
+    resolution: {integrity: sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.2':
+    resolution: {integrity: sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.60.2':
+    resolution: {integrity: sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.60.2':
+    resolution: {integrity: sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.60.2':
+    resolution: {integrity: sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.60.2':
+    resolution: {integrity: sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.2':
+    resolution: {integrity: sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.2':
+    resolution: {integrity: sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.60.2':
+    resolution: {integrity: sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.60.2':
+    resolution: {integrity: sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@tabler/icons-vue@3.41.1':
+    resolution: {integrity: sha512-OLLWlyrx6HdQpdgnZ8dO8uBGIIZwQDPgE8Gl6tUuAD7AgtfnmtFz8vb7dTEvxddM5CMpPt21ogPpBhJfEjSY+Q==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
+  '@tabler/icons@3.41.1':
+    resolution: {integrity: sha512-OaRnVbRmH2nHtFeg+RmMJ/7m2oBIF9XCJAUD5gQnMrpK9f05ydj8MZrAf3NZQqOXyxGN1UBL0D5IKLLEUfr74Q==}
+
+  '@tailwindcss/node@4.2.4':
+    resolution: {integrity: sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.4':
+    resolution: {integrity: sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.4':
+    resolution: {integrity: sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.4':
+    resolution: {integrity: sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.4':
+    resolution: {integrity: sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4':
+    resolution: {integrity: sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.4':
+    resolution: {integrity: sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
+    resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
+    resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.4':
+    resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.4':
+    resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.4':
+    resolution: {integrity: sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.4':
+    resolution: {integrity: sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.4':
+    resolution: {integrity: sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.4':
+    resolution: {integrity: sha512-pCvohwOCspk3ZFn6eJzrrX3g4n2JY73H6MmYC87XfGPyTty4YsCjYTMArRZm/zOI8dIt3+EcrLHAFPe5A4bgtw==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
+  '@types/body-parser@1.19.6':
+    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
+
+  '@types/connect@3.4.38':
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/express-serve-static-core@5.1.1':
+    resolution: {integrity: sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==}
+
+  '@types/express@5.0.6':
+    resolution: {integrity: sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==}
+
+  '@types/http-errors@2.0.5':
+    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
+
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
+  '@types/node@22.19.17':
+    resolution: {integrity: sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==}
+
+  '@types/qrcode-terminal@0.12.2':
+    resolution: {integrity: sha512-v+RcIEJ+Uhd6ygSQ0u5YYY7ZM+la7GgPbs0V/7l/kFs2uO4S8BcIUEMoP7za4DNIqNnUD5npf0A/7kBhrCKG5Q==}
+
+  '@types/qs@6.15.0':
+    resolution: {integrity: sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==}
+
+  '@types/range-parser@1.2.7':
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+
+  '@types/send@1.2.1':
+    resolution: {integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==}
+
+  '@types/serve-static@2.2.0':
+    resolution: {integrity: sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
+  '@vitejs/plugin-vue@5.2.4':
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
+
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
+
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
+
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
+
+  '@vue/compiler-core@3.5.32':
+    resolution: {integrity: sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ==}
+
+  '@vue/compiler-dom@3.5.32':
+    resolution: {integrity: sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q==}
+
+  '@vue/compiler-sfc@3.5.32':
+    resolution: {integrity: sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg==}
+
+  '@vue/compiler-ssr@3.5.32':
+    resolution: {integrity: sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw==}
+
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@vue/reactivity@3.5.32':
+    resolution: {integrity: sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ==}
+
+  '@vue/runtime-core@3.5.32':
+    resolution: {integrity: sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ==}
+
+  '@vue/runtime-dom@3.5.32':
+    resolution: {integrity: sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ==}
+
+  '@vue/server-renderer@3.5.32':
+    resolution: {integrity: sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ==}
+    peerDependencies:
+      vue: 3.5.32
+
+  '@vue/shared@3.5.32':
+    resolution: {integrity: sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg==}
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  body-parser@2.2.2:
+    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+    engines: {node: '>=18'}
+
+  brace-expansion@2.1.0:
+    resolution: {integrity: sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==}
+
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@13.1.0:
+    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    engines: {node: '>=18'}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  enhanced-resolve@5.20.1:
+    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+    engines: {node: '>=10.13.0'}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  esbuild@0.25.12:
+    resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esbuild@0.27.7:
+    resolution: {integrity: sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  faye-websocket@0.11.4:
+    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
+    engines: {node: '>=0.8.0'}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  firebase@12.12.1:
+    resolution: {integrity: sha512-ee7xA+bTJLfjB9BP/8FQr3EkxmpAAGc1lNc5QkWgTDpUw24HYXFPm7FEWRdLtGnygxIdYpFmepSc5VjkI6NHhw==}
+
+  fix-dts-default-cjs-exports@1.0.1:
+    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.3:
+    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+    engines: {node: '>= 0.4'}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  http-parser-js@0.5.10:
+    resolution: {integrity: sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  markdown-it@14.1.1:
+    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
+    hasBin: true
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  minimatch@9.0.9:
+    resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mlly@1.8.2:
+    resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  playwright-core@1.59.1:
+    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.59.1:
+    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  postcss@8.5.10:
+    resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  protobufjs@7.5.5:
+    resolution: {integrity: sha512-3wY1AxV+VBNW8Yypfd1yQY9pXnqTAN+KwQxL8iYm3/BjKYMNg4i0owhEe26PWDOMaIrzeeF98Lqd5NGz4omiIg==}
+    engines: {node: '>=12.0.0'}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
+  qrcode-terminal@0.12.0:
+    resolution: {integrity: sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==}
+    hasBin: true
+
+  qs@6.15.1:
+    resolution: {integrity: sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==}
+    engines: {node: '>=0.6'}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  rollup@4.60.2:
+    resolution: {integrity: sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  tailwindcss@4.2.4:
+    resolution: {integrity: sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==}
+
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyglobby@0.2.16:
+    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+    engines: {node: '>=12.0.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsup@8.5.1:
+    resolution: {integrity: sha512-xtgkqwdhpKWr3tKPmCkvYmS9xnQK3m3XgxZHwSUjvfTjp7YfXe5tT3GgWi0F2N+ZSMsOeWeZFh7ZZFg5iPhing==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      '@microsoft/api-extractor': ^7.36.0
+      '@swc/core': ^1
+      postcss: ^8.4.12
+      typescript: '>=4.5.0'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@swc/core':
+        optional: true
+      postcss:
+        optional: true
+      typescript:
+        optional: true
+
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
+
+  undici-types@6.21.0:
+    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vite@6.4.2:
+    resolution: {integrity: sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-i18n@11.1.12:
+    resolution: {integrity: sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==}
+    engines: {node: '>= 16'}
+    deprecated: This version is NOT deprecated. Previous deprecation was a mistake.
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-router@4.6.4:
+    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  vue-tsc@2.2.12:
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
+  vue@3.5.32:
+    resolution: {integrity: sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
+  websocket-driver@0.7.4:
+    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
+    engines: {node: '>=0.8.0'}
+
+  websocket-extensions@0.1.4:
+    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
+    engines: {node: '>=0.8.0'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  ws@8.20.0:
+    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+snapshots:
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/parser@7.29.2':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@esbuild/aix-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/android-arm@0.25.12':
+    optional: true
+
+  '@esbuild/android-arm@0.27.7':
+    optional: true
+
+  '@esbuild/android-x64@0.25.12':
+    optional: true
+
+  '@esbuild/android-x64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.12':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.12':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.12':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.7':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.7':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.12':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.7':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.12':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.12':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.7':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.12':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.7':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.12':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.7':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.12':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.7':
+    optional: true
+
+  '@firebase/ai@2.11.1(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/app-types': 0.9.4
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/analytics-compat@0.2.27(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/analytics': 0.10.21(@firebase/app@0.14.11)
+      '@firebase/analytics-types': 0.8.3
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/analytics-types@0.8.3': {}
+
+  '@firebase/analytics@0.10.21(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/installations': 0.6.21(@firebase/app@0.14.11)
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/app-check-compat@0.4.2(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-check': 0.11.2(@firebase/app@0.14.11)
+      '@firebase/app-check-types': 0.5.3
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/app-check-interop-types@0.3.3': {}
+
+  '@firebase/app-check-types@0.5.3': {}
+
+  '@firebase/app-check@0.11.2(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/app-compat@0.5.11':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/app-types@0.9.4':
+    dependencies:
+      '@firebase/logger': 0.5.0
+
+  '@firebase/app@0.14.11':
+    dependencies:
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/auth-compat@0.6.5(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/auth': 1.13.0(@firebase/app@0.14.11)
+      '@firebase/auth-types': 0.13.0(@firebase/app-types@0.9.4)(@firebase/util@1.15.0)
+      '@firebase/component': 0.7.2
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - '@react-native-async-storage/async-storage'
+
+  '@firebase/auth-interop-types@0.2.4': {}
+
+  '@firebase/auth-types@0.13.0(@firebase/app-types@0.9.4)(@firebase/util@1.15.0)':
+    dependencies:
+      '@firebase/app-types': 0.9.4
+      '@firebase/util': 1.15.0
+
+  '@firebase/auth@1.13.0(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/component@0.7.2':
+    dependencies:
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/data-connect@0.6.0(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/database-compat@2.1.3':
+    dependencies:
+      '@firebase/component': 0.7.2
+      '@firebase/database': 1.1.2
+      '@firebase/database-types': 1.0.19
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/database-types@1.0.19':
+    dependencies:
+      '@firebase/app-types': 0.9.4
+      '@firebase/util': 1.15.0
+
+  '@firebase/database@1.1.2':
+    dependencies:
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      faye-websocket: 0.11.4
+      tslib: 2.8.1
+
+  '@firebase/firestore-compat@0.4.8(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/firestore': 4.14.0(@firebase/app@0.14.11)
+      '@firebase/firestore-types': 3.0.3(@firebase/app-types@0.9.4)(@firebase/util@1.15.0)
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/firestore-types@3.0.3(@firebase/app-types@0.9.4)(@firebase/util@1.15.0)':
+    dependencies:
+      '@firebase/app-types': 0.9.4
+      '@firebase/util': 1.15.0
+
+  '@firebase/firestore@4.14.0(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      '@firebase/webchannel-wrapper': 1.0.5
+      '@grpc/grpc-js': 1.9.15
+      '@grpc/proto-loader': 0.7.15
+      tslib: 2.8.1
+
+  '@firebase/functions-compat@0.4.3(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/functions': 0.13.3(@firebase/app@0.14.11)
+      '@firebase/functions-types': 0.6.3
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/functions-types@0.6.3': {}
+
+  '@firebase/functions@0.13.3(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.7.2
+      '@firebase/messaging-interop-types': 0.2.3
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/installations-compat@0.2.21(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/installations': 0.6.21(@firebase/app@0.14.11)
+      '@firebase/installations-types': 0.5.3(@firebase/app-types@0.9.4)
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/installations-types@0.5.3(@firebase/app-types@0.9.4)':
+    dependencies:
+      '@firebase/app-types': 0.9.4
+
+  '@firebase/installations@0.6.21(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/util': 1.15.0
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/logger@0.5.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@firebase/messaging-compat@0.2.25(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/messaging': 0.12.25(@firebase/app@0.14.11)
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/messaging-interop-types@0.2.3': {}
+
+  '@firebase/messaging@0.12.25(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/installations': 0.6.21(@firebase/app@0.14.11)
+      '@firebase/messaging-interop-types': 0.2.3
+      '@firebase/util': 1.15.0
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/performance-compat@0.2.24(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/performance': 0.7.11(@firebase/app@0.14.11)
+      '@firebase/performance-types': 0.2.3
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/performance-types@0.2.3': {}
+
+  '@firebase/performance@0.7.11(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/installations': 0.6.21(@firebase/app@0.14.11)
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+      web-vitals: 4.2.4
+
+  '@firebase/remote-config-compat@0.2.23(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/logger': 0.5.0
+      '@firebase/remote-config': 0.8.2(@firebase/app@0.14.11)
+      '@firebase/remote-config-types': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/remote-config-types@0.5.0': {}
+
+  '@firebase/remote-config@0.8.2(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/installations': 0.6.21(@firebase/app@0.14.11)
+      '@firebase/logger': 0.5.0
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/storage-compat@0.4.2(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app-compat': 0.5.11
+      '@firebase/component': 0.7.2
+      '@firebase/storage': 0.14.2(@firebase/app@0.14.11)
+      '@firebase/storage-types': 0.8.3(@firebase/app-types@0.9.4)(@firebase/util@1.15.0)
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/storage-types@0.8.3(@firebase/app-types@0.9.4)(@firebase/util@1.15.0)':
+    dependencies:
+      '@firebase/app-types': 0.9.4
+      '@firebase/util': 1.15.0
+
+  '@firebase/storage@0.14.2(@firebase/app@0.14.11)':
+    dependencies:
+      '@firebase/app': 0.14.11
+      '@firebase/component': 0.7.2
+      '@firebase/util': 1.15.0
+      tslib: 2.8.1
+
+  '@firebase/util@1.15.0':
+    dependencies:
+      tslib: 2.8.1
+
+  '@firebase/webchannel-wrapper@1.0.5': {}
+
+  '@grpc/grpc-js@1.9.15':
+    dependencies:
+      '@grpc/proto-loader': 0.7.15
+      '@types/node': 22.19.17
+
+  '@grpc/proto-loader@0.7.15':
+    dependencies:
+      lodash.camelcase: 4.3.0
+      long: 5.3.2
+      protobufjs: 7.5.5
+      yargs: 17.7.2
+
+  '@intlify/core-base@11.1.12':
+    dependencies:
+      '@intlify/message-compiler': 11.1.12
+      '@intlify/shared': 11.1.12
+
+  '@intlify/core-base@11.3.2':
+    dependencies:
+      '@intlify/devtools-types': 11.3.2
+      '@intlify/message-compiler': 11.3.2
+      '@intlify/shared': 11.3.2
+
+  '@intlify/devtools-types@11.3.2':
+    dependencies:
+      '@intlify/core-base': 11.3.2
+      '@intlify/shared': 11.3.2
+
+  '@intlify/message-compiler@11.1.12':
+    dependencies:
+      '@intlify/shared': 11.1.12
+      source-map-js: 1.2.1
+
+  '@intlify/message-compiler@11.3.2':
+    dependencies:
+      '@intlify/shared': 11.3.2
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.1.12': {}
+
+  '@intlify/shared@11.3.2': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@playwright/test@1.59.1':
+    dependencies:
+      playwright: 1.59.1
+
+  '@protobufjs/aspromise@1.1.2': {}
+
+  '@protobufjs/base64@1.1.2': {}
+
+  '@protobufjs/codegen@2.0.4': {}
+
+  '@protobufjs/eventemitter@1.1.0': {}
+
+  '@protobufjs/fetch@1.1.0':
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+
+  '@protobufjs/float@1.0.2': {}
+
+  '@protobufjs/inquire@1.1.0': {}
+
+  '@protobufjs/path@1.1.2': {}
+
+  '@protobufjs/pool@1.1.0': {}
+
+  '@protobufjs/utf8@1.1.0': {}
+
+  '@rollup/rollup-android-arm-eabi@4.60.2':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.60.2':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.60.2':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.60.2':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.60.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.60.2':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.60.2':
+    optional: true
+
+  '@tabler/icons-vue@3.41.1(vue@3.5.32(typescript@5.9.3))':
+    dependencies:
+      '@tabler/icons': 3.41.1
+      vue: 3.5.32(typescript@5.9.3)
+
+  '@tabler/icons@3.41.1': {}
+
+  '@tailwindcss/node@4.2.4':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.1
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.4
+
+  '@tailwindcss/oxide-android-arm64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.4':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.4':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.4
+      '@tailwindcss/oxide-darwin-arm64': 4.2.4
+      '@tailwindcss/oxide-darwin-x64': 4.2.4
+      '@tailwindcss/oxide-freebsd-x64': 4.2.4
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.4
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.4
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.4
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.4
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.4
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.4
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.4
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.4
+
+  '@tailwindcss/vite@4.2.4(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))':
+    dependencies:
+      '@tailwindcss/node': 4.2.4
+      '@tailwindcss/oxide': 4.2.4
+      tailwindcss: 4.2.4
+      vite: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
+
+  '@types/body-parser@1.19.6':
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 22.19.17
+
+  '@types/connect@3.4.38':
+    dependencies:
+      '@types/node': 22.19.17
+
+  '@types/estree@1.0.8': {}
+
+  '@types/express-serve-static-core@5.1.1':
+    dependencies:
+      '@types/node': 22.19.17
+      '@types/qs': 6.15.0
+      '@types/range-parser': 1.2.7
+      '@types/send': 1.2.1
+
+  '@types/express@5.0.6':
+    dependencies:
+      '@types/body-parser': 1.19.6
+      '@types/express-serve-static-core': 5.1.1
+      '@types/serve-static': 2.2.0
+
+  '@types/http-errors@2.0.5': {}
+
+  '@types/linkify-it@5.0.0': {}
+
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
+  '@types/node@22.19.17':
+    dependencies:
+      undici-types: 6.21.0
+
+  '@types/qrcode-terminal@0.12.2': {}
+
+  '@types/qs@6.15.0': {}
+
+  '@types/range-parser@1.2.7': {}
+
+  '@types/send@1.2.1':
+    dependencies:
+      '@types/node': 22.19.17
+
+  '@types/serve-static@2.2.0':
+    dependencies:
+      '@types/http-errors': 2.0.5
+      '@types/node': 22.19.17
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 22.19.17
+
+  '@vitejs/plugin-vue@5.2.4(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))(vue@3.5.32(typescript@5.9.3))':
+    dependencies:
+      vite: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
+      vue: 3.5.32(typescript@5.9.3)
+
+  '@volar/language-core@2.4.15':
+    dependencies:
+      '@volar/source-map': 2.4.15
+
+  '@volar/source-map@2.4.15': {}
+
+  '@volar/typescript@2.4.15':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
+  '@vue/compiler-core@3.5.32':
+    dependencies:
+      '@babel/parser': 7.29.2
+      '@vue/shared': 3.5.32
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  '@vue/compiler-dom@3.5.32':
+    dependencies:
+      '@vue/compiler-core': 3.5.32
+      '@vue/shared': 3.5.32
+
+  '@vue/compiler-sfc@3.5.32':
+    dependencies:
+      '@babel/parser': 7.29.2
+      '@vue/compiler-core': 3.5.32
+      '@vue/compiler-dom': 3.5.32
+      '@vue/compiler-ssr': 3.5.32
+      '@vue/shared': 3.5.32
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.10
+      source-map-js: 1.2.1
+
+  '@vue/compiler-ssr@3.5.32':
+    dependencies:
+      '@vue/compiler-dom': 3.5.32
+      '@vue/shared': 3.5.32
+
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
+  '@vue/devtools-api@6.6.4': {}
+
+  '@vue/language-core@2.2.12(typescript@5.9.3)':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.32
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.32
+      alien-signals: 1.0.13
+      minimatch: 9.0.9
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@vue/reactivity@3.5.32':
+    dependencies:
+      '@vue/shared': 3.5.32
+
+  '@vue/runtime-core@3.5.32':
+    dependencies:
+      '@vue/reactivity': 3.5.32
+      '@vue/shared': 3.5.32
+
+  '@vue/runtime-dom@3.5.32':
+    dependencies:
+      '@vue/reactivity': 3.5.32
+      '@vue/runtime-core': 3.5.32
+      '@vue/shared': 3.5.32
+      csstype: 3.2.3
+
+  '@vue/server-renderer@3.5.32(vue@3.5.32(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.32
+      '@vue/shared': 3.5.32
+      vue: 3.5.32(typescript@5.9.3)
+
+  '@vue/shared@3.5.32': {}
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
+
+  acorn@8.16.0: {}
+
+  alien-signals@1.0.13: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  any-promise@1.3.0: {}
+
+  argparse@2.0.1: {}
+
+  balanced-match@1.0.2: {}
+
+  body-parser@2.2.2:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      on-finished: 2.4.1
+      qs: 6.15.1
+      raw-body: 3.0.2
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  brace-expansion@2.1.0:
+    dependencies:
+      balanced-match: 1.0.2
+
+  bundle-require@5.1.0(esbuild@0.27.7):
+    dependencies:
+      esbuild: 0.27.7
+      load-tsconfig: 0.2.5
+
+  bytes@3.1.2: {}
+
+  cac@6.7.14: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@13.1.0: {}
+
+  commander@4.1.1: {}
+
+  confbox@0.1.8: {}
+
+  consola@3.4.2: {}
+
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  csstype@3.2.3: {}
+
+  de-indent@1.0.2: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  depd@2.0.0: {}
+
+  detect-libc@2.1.2: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  ee-first@1.1.1: {}
+
+  emoji-regex@8.0.0: {}
+
+  encodeurl@2.0.0: {}
+
+  enhanced-resolve@5.20.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
+  entities@4.5.0: {}
+
+  entities@7.0.1: {}
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  esbuild@0.25.12:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.12
+      '@esbuild/android-arm': 0.25.12
+      '@esbuild/android-arm64': 0.25.12
+      '@esbuild/android-x64': 0.25.12
+      '@esbuild/darwin-arm64': 0.25.12
+      '@esbuild/darwin-x64': 0.25.12
+      '@esbuild/freebsd-arm64': 0.25.12
+      '@esbuild/freebsd-x64': 0.25.12
+      '@esbuild/linux-arm': 0.25.12
+      '@esbuild/linux-arm64': 0.25.12
+      '@esbuild/linux-ia32': 0.25.12
+      '@esbuild/linux-loong64': 0.25.12
+      '@esbuild/linux-mips64el': 0.25.12
+      '@esbuild/linux-ppc64': 0.25.12
+      '@esbuild/linux-riscv64': 0.25.12
+      '@esbuild/linux-s390x': 0.25.12
+      '@esbuild/linux-x64': 0.25.12
+      '@esbuild/netbsd-arm64': 0.25.12
+      '@esbuild/netbsd-x64': 0.25.12
+      '@esbuild/openbsd-arm64': 0.25.12
+      '@esbuild/openbsd-x64': 0.25.12
+      '@esbuild/openharmony-arm64': 0.25.12
+      '@esbuild/sunos-x64': 0.25.12
+      '@esbuild/win32-arm64': 0.25.12
+      '@esbuild/win32-ia32': 0.25.12
+      '@esbuild/win32-x64': 0.25.12
+
+  esbuild@0.27.7:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.7
+      '@esbuild/android-arm': 0.27.7
+      '@esbuild/android-arm64': 0.27.7
+      '@esbuild/android-x64': 0.27.7
+      '@esbuild/darwin-arm64': 0.27.7
+      '@esbuild/darwin-x64': 0.27.7
+      '@esbuild/freebsd-arm64': 0.27.7
+      '@esbuild/freebsd-x64': 0.27.7
+      '@esbuild/linux-arm': 0.27.7
+      '@esbuild/linux-arm64': 0.27.7
+      '@esbuild/linux-ia32': 0.27.7
+      '@esbuild/linux-loong64': 0.27.7
+      '@esbuild/linux-mips64el': 0.27.7
+      '@esbuild/linux-ppc64': 0.27.7
+      '@esbuild/linux-riscv64': 0.27.7
+      '@esbuild/linux-s390x': 0.27.7
+      '@esbuild/linux-x64': 0.27.7
+      '@esbuild/netbsd-arm64': 0.27.7
+      '@esbuild/netbsd-x64': 0.27.7
+      '@esbuild/openbsd-arm64': 0.27.7
+      '@esbuild/openbsd-x64': 0.27.7
+      '@esbuild/openharmony-arm64': 0.27.7
+      '@esbuild/sunos-x64': 0.27.7
+      '@esbuild/win32-arm64': 0.27.7
+      '@esbuild/win32-ia32': 0.27.7
+      '@esbuild/win32-x64': 0.27.7
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  estree-walker@2.0.2: {}
+
+  etag@1.8.1: {}
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.2
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.1
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  faye-websocket@0.11.4:
+    dependencies:
+      websocket-driver: 0.7.4
+
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
+
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  firebase@12.12.1:
+    dependencies:
+      '@firebase/ai': 2.11.1(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)
+      '@firebase/analytics': 0.10.21(@firebase/app@0.14.11)
+      '@firebase/analytics-compat': 0.2.27(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)
+      '@firebase/app': 0.14.11
+      '@firebase/app-check': 0.11.2(@firebase/app@0.14.11)
+      '@firebase/app-check-compat': 0.4.2(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)
+      '@firebase/app-compat': 0.5.11
+      '@firebase/app-types': 0.9.4
+      '@firebase/auth': 1.13.0(@firebase/app@0.14.11)
+      '@firebase/auth-compat': 0.6.5(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)
+      '@firebase/data-connect': 0.6.0(@firebase/app@0.14.11)
+      '@firebase/database': 1.1.2
+      '@firebase/database-compat': 2.1.3
+      '@firebase/firestore': 4.14.0(@firebase/app@0.14.11)
+      '@firebase/firestore-compat': 0.4.8(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)
+      '@firebase/functions': 0.13.3(@firebase/app@0.14.11)
+      '@firebase/functions-compat': 0.4.3(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)
+      '@firebase/installations': 0.6.21(@firebase/app@0.14.11)
+      '@firebase/installations-compat': 0.2.21(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)
+      '@firebase/messaging': 0.12.25(@firebase/app@0.14.11)
+      '@firebase/messaging-compat': 0.2.25(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)
+      '@firebase/performance': 0.7.11(@firebase/app@0.14.11)
+      '@firebase/performance-compat': 0.2.24(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)
+      '@firebase/remote-config': 0.8.2(@firebase/app@0.14.11)
+      '@firebase/remote-config-compat': 0.2.23(@firebase/app-compat@0.5.11)(@firebase/app@0.14.11)
+      '@firebase/storage': 0.14.2(@firebase/app@0.14.11)
+      '@firebase/storage-compat': 0.4.2(@firebase/app-compat@0.5.11)(@firebase/app-types@0.9.4)(@firebase/app@0.14.11)
+      '@firebase/util': 1.15.0
+    transitivePeerDependencies:
+      - '@react-native-async-storage/async-storage'
+
+  fix-dts-default-cjs-exports@1.0.1:
+    dependencies:
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      rollup: 4.60.2
+
+  forwarded@0.2.0: {}
+
+  fresh@2.0.0: {}
+
+  fsevents@2.3.2:
+    optional: true
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.3
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-symbols@1.1.0: {}
+
+  hasown@2.0.3:
+    dependencies:
+      function-bind: 1.1.2
+
+  he@1.2.0: {}
+
+  highlight.js@11.11.1: {}
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  http-parser-js@0.5.10: {}
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  idb@7.1.1: {}
+
+  inherits@2.0.4: {}
+
+  ipaddr.js@1.9.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-promise@4.0.0: {}
+
+  jiti@2.6.1: {}
+
+  joycon@3.1.1: {}
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
+  load-tsconfig@0.2.5: {}
+
+  lodash.camelcase@4.3.0: {}
+
+  long@5.3.2: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  markdown-it@14.1.1:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
+  math-intrinsics@1.1.0: {}
+
+  mdurl@2.0.0: {}
+
+  media-typer@1.1.0: {}
+
+  merge-descriptors@2.0.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  minimatch@9.0.9:
+    dependencies:
+      brace-expansion: 2.1.0
+
+  mlly@1.8.2:
+    dependencies:
+      acorn: 8.16.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.3
+
+  ms@2.1.3: {}
+
+  muggle-string@0.4.1: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.11: {}
+
+  negotiator@1.0.0: {}
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
+
+  path-to-regexp@8.4.2: {}
+
+  pathe@2.0.3: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.4: {}
+
+  pirates@4.0.7: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.8.2
+      pathe: 2.0.3
+
+  playwright-core@1.59.1: {}
+
+  playwright@1.59.1:
+    dependencies:
+      playwright-core: 1.59.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
+  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.10):
+    dependencies:
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 2.6.1
+      postcss: 8.5.10
+
+  postcss@8.5.10:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  protobufjs@7.5.5:
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/node': 22.19.17
+      long: 5.3.2
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  punycode.js@2.3.1: {}
+
+  qrcode-terminal@0.12.0: {}
+
+  qs@6.15.1:
+    dependencies:
+      side-channel: 1.1.0
+
+  range-parser@1.2.1: {}
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      unpipe: 1.0.0
+
+  readdirp@4.1.2: {}
+
+  require-directory@2.1.1: {}
+
+  resolve-from@5.0.0: {}
+
+  rollup@4.60.2:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.60.2
+      '@rollup/rollup-android-arm64': 4.60.2
+      '@rollup/rollup-darwin-arm64': 4.60.2
+      '@rollup/rollup-darwin-x64': 4.60.2
+      '@rollup/rollup-freebsd-arm64': 4.60.2
+      '@rollup/rollup-freebsd-x64': 4.60.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.2
+      '@rollup/rollup-linux-arm64-gnu': 4.60.2
+      '@rollup/rollup-linux-arm64-musl': 4.60.2
+      '@rollup/rollup-linux-loong64-gnu': 4.60.2
+      '@rollup/rollup-linux-loong64-musl': 4.60.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.2
+      '@rollup/rollup-linux-ppc64-musl': 4.60.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.2
+      '@rollup/rollup-linux-riscv64-musl': 4.60.2
+      '@rollup/rollup-linux-s390x-gnu': 4.60.2
+      '@rollup/rollup-linux-x64-gnu': 4.60.2
+      '@rollup/rollup-linux-x64-musl': 4.60.2
+      '@rollup/rollup-openbsd-x64': 4.60.2
+      '@rollup/rollup-openharmony-arm64': 4.60.2
+      '@rollup/rollup-win32-arm64-msvc': 4.60.2
+      '@rollup/rollup-win32-ia32-msvc': 4.60.2
+      '@rollup/rollup-win32-x64-gnu': 4.60.2
+      '@rollup/rollup-win32-x64-msvc': 4.60.2
+      fsevents: 2.3.3
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  setprototypeof@1.2.0: {}
+
+  side-channel-list@1.0.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.1
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.7.6: {}
+
+  statuses@2.0.2: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.16
+      ts-interface-checker: 0.1.13
+
+  tailwindcss@4.2.4: {}
+
+  tapable@2.3.3: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tinyexec@0.3.2: {}
+
+  tinyglobby@0.2.16:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
+  toidentifier@1.0.1: {}
+
+  tree-kill@1.2.2: {}
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.8.1: {}
+
+  tsup@8.5.1(jiti@2.6.1)(postcss@8.5.10)(typescript@5.9.3):
+    dependencies:
+      bundle-require: 5.1.0(esbuild@0.27.7)
+      cac: 6.7.14
+      chokidar: 4.0.3
+      consola: 3.4.2
+      debug: 4.4.3
+      esbuild: 0.27.7
+      fix-dts-default-cjs-exports: 1.0.1
+      joycon: 3.1.1
+      picocolors: 1.1.1
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.10)
+      resolve-from: 5.0.0
+      rollup: 4.60.2
+      source-map: 0.7.6
+      sucrase: 3.35.1
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.16
+      tree-kill: 1.2.2
+    optionalDependencies:
+      postcss: 8.5.10
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - jiti
+      - supports-color
+      - tsx
+      - yaml
+
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.2
+
+  typescript@5.9.3: {}
+
+  uc.micro@2.1.0: {}
+
+  ufo@1.6.3: {}
+
+  undici-types@6.21.0: {}
+
+  unpipe@1.0.0: {}
+
+  vary@1.1.2: {}
+
+  vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.10
+      rollup: 4.60.2
+      tinyglobby: 0.2.16
+    optionalDependencies:
+      '@types/node': 22.19.17
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+
+  vscode-uri@3.1.0: {}
+
+  vue-i18n@11.1.12(vue@3.5.32(typescript@5.9.3)):
+    dependencies:
+      '@intlify/core-base': 11.1.12
+      '@intlify/shared': 11.1.12
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.32(typescript@5.9.3)
+
+  vue-router@4.6.4(vue@3.5.32(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.32(typescript@5.9.3)
+
+  vue-tsc@2.2.12(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.3)
+      typescript: 5.9.3
+
+  vue@3.5.32(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.32
+      '@vue/compiler-sfc': 3.5.32
+      '@vue/runtime-dom': 3.5.32
+      '@vue/server-renderer': 3.5.32(vue@3.5.32(typescript@5.9.3))
+      '@vue/shared': 3.5.32
+    optionalDependencies:
+      typescript: 5.9.3
+
+  web-vitals@4.2.4: {}
+
+  websocket-driver@0.7.4:
+    dependencies:
+      http-parser-js: 0.5.10
+      safe-buffer: 5.2.1
+      websocket-extensions: 0.1.4
+
+  websocket-extensions@0.1.4: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  ws@8.20.0: {}
+
+  y18n@5.0.8: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1

From 8d0724639ef0ea1ec336909ce268ee548acabc6e Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 20:02:31 +0800
Subject: [PATCH 11/30] fix(docker): Use lockfile for production dependency
 installation

- Copy pnpm-lock.yaml into the runtime image alongside package.json
- Install production dependencies with --frozen-lockfile for reproducible builds
---
 Dockerfile | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index d2634ac0..86adf90e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -46,8 +46,8 @@ RUN ARCH=$(uname -m) && \
     chmod +x /usr/local/bin/officecli
 
 # Install runtime dependencies
-COPY --from=builder /src/package.json /app/package.json
-RUN pnpm install --prod
+COPY --from=builder /src/package.json /src/pnpm-lock.yaml /app/
+RUN pnpm install --prod --frozen-lockfile
 
 # Copy build artifacts
 COPY --from=builder /src/dist /app/dist

From d5ea9b13aaf6ec387660998c20b1447d9871aac2 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 20:26:00 +0800
Subject: [PATCH 12/30] improve(ui): Localize terminal and context UI text

- Add English and Chinese locale strings for terminal and context labels
- Replace hardcoded terminal and context text with i18n translations
- Localize terminal exit status and toggle accessibility labels
- Refine dark-mode terminal toggle styles and slightly reduce icon size
---
 src/App.vue                                   | 32 +++++++++----------
 .../content/ThreadTerminalPanel.vue           |  7 ++--
 src/i18n/locales/en.ts                        | 24 ++++++++++++++
 src/i18n/locales/zh.ts                        | 24 ++++++++++++++
 src/style.css                                 | 12 +++++++
 5 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a1aafdfa..fbf916e6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -432,7 +432,7 @@
                 :data-state="threadContextBadgeState"
                 :title="threadContextTooltip"
               >
-                <span class="sidebar-settings-label">Context</span>
+                <span class="sidebar-settings-label">{{ $t('context.label') }}</span>
                 <span class="sidebar-settings-context-value" :data-state="threadContextBadgeState">
                   {{ threadContextPrimaryText }}
                   <span class="sidebar-settings-context-meta">{{ threadContextSecondaryText }}</span>
@@ -481,8 +481,8 @@
               class="content-header-terminal-toggle"
               type="button"
               :aria-pressed="selectedThreadTerminalOpen"
-              :title="`Toggle terminal (${terminalShortcutLabel})`"
-              aria-label="Toggle terminal"
+              :title="$t('terminal.toggle', { shortcut: terminalShortcutLabel })"
+              :aria-label="$t('terminal.toggleLabel')"
               @click="toggleSelectedThreadTerminal"
             >
               <IconTablerTerminal class="content-header-terminal-toggle-icon" />
@@ -1291,19 +1291,19 @@ function formatCompactTokenCount(value: number): string {
 
 function buildThreadContextTooltip(usage: UiThreadTokenUsage | null): string {
   if (!usage) {
-    return 'Waiting for Codex thread/tokenUsage/updated events for this thread.'
+    return t('context.waitingEvents')
   }
 
   const lines = [
-    `Current context usage: ${usage.currentContextTokens.toLocaleString()} tokens`,
-    `Cumulative thread usage: ${usage.total.totalTokens.toLocaleString()} tokens`,
+    t('context.currentUsage', { count: usage.currentContextTokens.toLocaleString() }),
+    t('context.cumulativeUsage', { count: usage.total.totalTokens.toLocaleString() }),
   ]
 
   if (typeof usage.modelContextWindow === 'number') {
-    lines.unshift(`Model context window: ${usage.modelContextWindow.toLocaleString()} tokens`)
-    lines.push(`Remaining context: ${(usage.remainingContextTokens ?? 0).toLocaleString()} tokens`)
+    lines.unshift(t('context.modelContextWindow', { count: usage.modelContextWindow.toLocaleString() }))
+    lines.push(t('context.remainingContext', { count: (usage.remainingContextTokens ?? 0).toLocaleString() }))
   } else {
-    lines.push('Model context window is unavailable in the latest usage event.')
+    lines.push(t('context.windowUnavailableTooltip'))
   }
 
   return lines.join('\n')
@@ -1319,20 +1319,20 @@ const threadContextBadgeState = computed(() => {
 
 const threadContextPrimaryText = computed(() => {
   const usage = selectedThreadTokenUsage.value
-  if (!usage) return 'Awaiting data'
+  if (!usage) return t('context.awaitingData')
   if (typeof usage.remainingContextTokens === 'number') {
-    return `${formatCompactTokenCount(usage.remainingContextTokens)} left`
+    return t('context.tokensLeft', { count: formatCompactTokenCount(usage.remainingContextTokens) })
   }
-  return `${formatCompactTokenCount(usage.currentContextTokens)} used`
+  return t('context.tokensUsed', { count: formatCompactTokenCount(usage.currentContextTokens) })
 })
 
 const threadContextSecondaryText = computed(() => {
   const usage = selectedThreadTokenUsage.value
-  if (!usage) return 'Updates after the next token usage event'
+  if (!usage) return t('context.updatesAfter')
   if (typeof usage.modelContextWindow === 'number') {
-    return `${formatCompactTokenCount(usage.currentContextTokens)} used / ${formatCompactTokenCount(usage.modelContextWindow)}`
+    return t('context.usedOfTotal', { used: formatCompactTokenCount(usage.currentContextTokens), total: formatCompactTokenCount(usage.modelContextWindow) })
   }
-  return 'Window size unavailable'
+  return t('context.windowUnavailable')
 })
 
 const threadContextTooltip = computed(() => buildThreadContextTooltip(selectedThreadTokenUsage.value))
@@ -3491,7 +3491,7 @@ async function loadWorktreeBranches(sourceCwd: string): Promise<void> {
 }
 
 .content-header-terminal-toggle-icon {
-  @apply h-4 w-4;
+  @apply h-3.5 w-3.5;
 }
 
 .content-header-terminal-shortcut {
diff --git a/src/components/content/ThreadTerminalPanel.vue b/src/components/content/ThreadTerminalPanel.vue
index bfa4e83d..fd01b0ee 100644
--- a/src/components/content/ThreadTerminalPanel.vue
+++ b/src/components/content/ThreadTerminalPanel.vue
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import '@xterm/xterm/css/xterm.css'
@@ -47,6 +48,8 @@ const emit = defineEmits<{
   hide: []
 }>()
 
+const { t } = useI18n()
+
 const terminalHostRef = ref<HTMLElement | null>(null)
 const sessionId = ref('')
 const shellLabel = ref('terminal')
@@ -66,7 +69,7 @@ const terminalStatus = computed(() => {
 
 const terminalTitle = computed(() => {
   if (shellLabel.value && shellLabel.value !== 'terminal') return shellLabel.value
-  return 'Terminal'
+  return t('terminal.title')
 })
 
 onMounted(() => {
@@ -184,7 +187,7 @@ function handleNotification(notification: RpcNotification): void {
   if (notification.method === 'terminal-exit') {
     isAttached.value = false
     terminal.writeln('')
-    terminal.writeln('[terminal exited]')
+    terminal.writeln(t('terminal.exited'))
     return
   }
   if (notification.method === 'terminal-error') {
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 6ecee8bd..d939c592 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -459,6 +459,30 @@ const en = {
     configSaveError: 'Failed to save config',
   },
 
+  terminal: {
+    title: 'Terminal',
+    toggle: 'Toggle terminal ({shortcut})',
+    toggleLabel: 'Toggle terminal',
+    exited: '[terminal exited]',
+    newSession: 'New session',
+  },
+
+  context: {
+    label: 'Context',
+    awaitingData: 'Awaiting data',
+    updatesAfter: 'Updates after the next token usage event',
+    waitingEvents: 'Waiting for Codex thread/tokenUsage/updated events for this thread.',
+    tokensLeft: '{count} left',
+    tokensUsed: '{count} used',
+    usedOfTotal: '{used} used / {total}',
+    windowUnavailable: 'Window size unavailable',
+    modelContextWindow: 'Model context window: {count} tokens',
+    currentUsage: 'Current context usage: {count} tokens',
+    cumulativeUsage: 'Cumulative thread usage: {count} tokens',
+    remainingContext: 'Remaining context: {count} tokens',
+    windowUnavailableTooltip: 'Model context window is unavailable in the latest usage event.',
+  },
+
   filePreview: {
     preview: 'Preview',
     unsupported: 'Preview is not available for this file type.',
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index bb87df31..25d62226 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -458,6 +458,30 @@ const zh = {
     configSaveError: '保存配置失败',
   },
 
+  terminal: {
+    title: '终端',
+    toggle: '切换终端 ({shortcut})',
+    toggleLabel: '切换终端',
+    exited: '[终端已退出]',
+    newSession: '新会话',
+  },
+
+  context: {
+    label: '上下文',
+    awaitingData: '等待数据',
+    updatesAfter: '将在下次 token 使用事件后更新',
+    waitingEvents: '正在等待此会话的 Codex token 使用更新事件。',
+    tokensLeft: '{count} 剩余',
+    tokensUsed: '{count} 已用',
+    usedOfTotal: '{used} 已用 / {total}',
+    windowUnavailable: '窗口大小不可用',
+    modelContextWindow: '模型上下文窗口：{count} tokens',
+    currentUsage: '当前上下文用量：{count} tokens',
+    cumulativeUsage: '会话累计用量：{count} tokens',
+    remainingContext: '剩余上下文：{count} tokens',
+    windowUnavailableTooltip: '最新使用事件中无法获取模型上下文窗口大小。',
+  },
+
   filePreview: {
     preview: '预览',
     unsupported: '此文件类型暂不支持预览。',
diff --git a/src/style.css b/src/style.css
index ef16555f..4c7b4a03 100644
--- a/src/style.css
+++ b/src/style.css
@@ -764,6 +764,18 @@ button:disabled {
   @apply border-zinc-700 bg-zinc-800 text-zinc-100;
 }
 
+:root.dark .content-header-terminal-toggle {
+  @apply border-zinc-700 bg-zinc-900 text-zinc-300 hover:bg-zinc-800;
+}
+
+:root.dark .content-header-terminal-toggle[aria-pressed='true'] {
+  @apply border-zinc-600 bg-zinc-700 text-zinc-100;
+}
+
+:root.dark .content-header-terminal-shortcut {
+  @apply text-zinc-500;
+}
+
 :root.dark .content-header-branch-dropdown .composer-dropdown-trigger {
   @apply border-zinc-700 bg-zinc-900 text-zinc-300 hover:bg-zinc-800;
 }

From 510f771b28556f6c9c645d55aa411c4c7d17f1da Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 21:12:59 +0800
Subject: [PATCH 13/30] feat(ui): Add clean and developer conversation display
 modes

- Add a persisted conversation style setting with clean and developer options
- Show reasoning and MCP tool call messages inline in developer mode
- Hide internal steps in clean mode while keeping final replies prominent
- Normalize reasoning and MCP tool call payloads for thread rendering
---
 src/App.vue                                   | 27 +++++
 src/api/normalizers/v2.ts                     | 32 +++++-
 src/components/content/ThreadConversation.vue | 98 ++++++++++++++++++-
 src/i18n/locales/en.ts                        |  5 +
 src/i18n/locales/zh.ts                        |  5 +
 src/types/codex.ts                            | 11 +++
 6 files changed, 172 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fbf916e6..6cc5ba1c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -200,6 +200,10 @@
                 <span class="sidebar-settings-label">{{ $t('settings.chatWidth') }}</span>
                 <span class="sidebar-settings-value">{{ chatWidthLabel }}</span>
               </button>
+              <button class="sidebar-settings-row" type="button" :title="conversationStyleTooltip" @click="cycleConversationStyle">
+                <span class="sidebar-settings-label">{{ $t('settings.conversationStyle') }}</span>
+                <span class="sidebar-settings-value">{{ conversationStyleLabel }}</span>
+              </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationClickToToggle" @click="toggleDictationClickToToggle">
                 <span class="sidebar-settings-label">{{ $t('settings.clickToggleDictation') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationClickToToggle }" />
@@ -768,6 +772,7 @@
                     :active-thread-id="composerThreadContextId" :cwd="composerCwd" :scroll-state="selectedThreadScrollState"
                     :live-overlay="liveOverlay"
                     :pending-requests="selectedThreadServerRequests"
+                    :developer-mode="conversationStyle === 'developer'"
                     @update-scroll-state="onUpdateThreadScrollState"
                     @fork-thread="onForkThreadFromMessage"
                     @rollback="onRollback"
@@ -1158,11 +1163,14 @@ const DICTATION_LANGUAGE_KEY = 'codex-web-local.dictation-language.v1'
 
 const GITHUB_TRENDING_PROJECTS_KEY = 'codex-web-local.github-trending-projects.v1'
 const CHAT_WIDTH_KEY = 'codex-web-local.chat-width.v1'
+const CONVERSATION_STYLE_KEY = 'codex-web-local.conversation-style.v1'
 const MOBILE_RESUME_RELOAD_MIN_HIDDEN_MS = 400
 const sendWithEnter = ref(loadBoolPref(SEND_WITH_ENTER_KEY, true))
 const inProgressSendMode = ref<'steer' | 'queue'>(loadInProgressSendModePref())
 const darkMode = ref<'system' | 'light' | 'dark'>(loadDarkModePref())
 const chatWidth = ref<ChatWidthMode>(loadChatWidthPref())
+type ConversationStyle = 'clean' | 'developer'
+const conversationStyle = ref<ConversationStyle>(loadConversationStylePref())
 const dictationClickToToggle = ref(loadBoolPref(DICTATION_CLICK_TO_TOGGLE_KEY, false))
 const dictationAutoSend = ref(loadBoolPref(DICTATION_AUTO_SEND_KEY, true))
 const dictationLanguage = ref(loadDictationLanguagePref())
@@ -2808,6 +2816,25 @@ function cycleChatWidth(): void {
   window.localStorage.setItem(CHAT_WIDTH_KEY, chatWidth.value)
 }
 
+function loadConversationStylePref(): ConversationStyle {
+  if (typeof window === 'undefined') return 'clean'
+  const v = window.localStorage.getItem(CONVERSATION_STYLE_KEY)
+  return v === 'developer' ? 'developer' : 'clean'
+}
+
+function cycleConversationStyle(): void {
+  conversationStyle.value = conversationStyle.value === 'clean' ? 'developer' : 'clean'
+  window.localStorage.setItem(CONVERSATION_STYLE_KEY, conversationStyle.value)
+}
+
+const conversationStyleLabel = computed(() =>
+  conversationStyle.value === 'clean' ? t('settings.conversationStyleClean') : t('settings.conversationStyleDev'),
+)
+
+const conversationStyleTooltip = computed(() =>
+  conversationStyle.value === 'clean' ? t('settings.conversationStyleCleanDesc') : t('settings.conversationStyleDevDesc'),
+)
+
 function toggleDictationClickToToggle(): void {
   dictationClickToToggle.value = !dictationClickToToggle.value
   window.localStorage.setItem(DICTATION_CLICK_TO_TOGGLE_KEY, dictationClickToToggle.value ? '1' : '0')
diff --git a/src/api/normalizers/v2.ts b/src/api/normalizers/v2.ts
index b1fd2de5..904627b9 100644
--- a/src/api/normalizers/v2.ts
+++ b/src/api/normalizers/v2.ts
@@ -444,8 +444,38 @@ function toUiMessages(item: ThreadItem): UiMessage[] {
     }
   }
 
+  if (item.type === 'mcpToolCall') {
+    const raw = item as Record<string, unknown>
+    const server = typeof raw.server === 'string' ? raw.server : ''
+    const tool = typeof raw.tool === 'string' ? raw.tool : ''
+    const status = normalizeCommandStatus(raw.status)
+    const args = raw.arguments != null ? JSON.stringify(raw.arguments, null, 2) : ''
+    const result = raw.result != null ? (typeof raw.result === 'string' ? raw.result : JSON.stringify(raw.result, null, 2)) : ''
+    const error = typeof raw.error === 'string' ? raw.error : ''
+    const durationMs = typeof raw.durationMs === 'number' ? raw.durationMs : null
+    return [
+      {
+        id: item.id,
+        role: 'system' as const,
+        text: `${server}/${tool}`,
+        messageType: 'mcpToolCall',
+        mcpToolCall: { server, tool, status, arguments: args, result, error, durationMs },
+      },
+    ]
+  }
+
   if (item.type === 'reasoning') {
-    return []
+    const raw = item as Record<string, unknown>
+    const summary = Array.isArray(raw.summary) ? (raw.summary as string[]).join('\n') : (typeof raw.text === 'string' ? raw.text as string : '')
+    if (!summary) return []
+    return [
+      {
+        id: item.id,
+        role: 'assistant' as const,
+        text: summary,
+        messageType: 'reasoning',
+      },
+    ]
   }
 
 
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index 1f26809c..19259607 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -22,15 +22,45 @@
       </li>
       <template v-for="message in visibleMessages" :key="message.id">
       <li
-        v-if="!hiddenGroupedCommandIds.has(message.id) && !hiddenFileChangeMessageIds.has(message.id)"
+        v-if="isMessageVisible(message)"
         class="conversation-item"
         :data-role="message.role"
         :data-message-type="message.messageType || ''"
       >
-        <div v-if="isCommandMessage(message)" class="message-row" data-role="system">
+        <!-- Reasoning/thinking block (dev mode only) -->
+        <div v-if="message.messageType === 'reasoning'" class="message-row" data-role="system">
+          <div class="message-stack" data-role="system">
+            <button type="button" class="cmd-row cmd-compact cmd-status-ok" :class="{ 'cmd-expanded': expandedReasoningIds.has(message.id) }" @click="toggleReasoningExpand(message)">
+              <span class="cmd-chevron" :class="{ 'cmd-chevron-open': expandedReasoningIds.has(message.id) }">▶</span>
+              <code class="cmd-label">{{ $t('composer.thinking') }}</code>
+              <span class="cmd-status">{{ $t('conversation.cmdDone') }}</span>
+            </button>
+            <div class="cmd-output-wrap" :class="{ 'cmd-output-visible': expandedReasoningIds.has(message.id) }">
+              <div class="cmd-output-inner">
+                <pre class="cmd-output" v-text="message.text"></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- MCP tool call block (dev mode only) -->
+        <div v-else-if="message.messageType === 'mcpToolCall' && message.mcpToolCall" class="message-row" data-role="system">
+          <div class="message-stack" data-role="system">
+            <button type="button" class="cmd-row cmd-compact" :class="[mcpToolCallStatusClass(message), { 'cmd-expanded': expandedMcpIds.has(message.id) }]" @click="toggleMcpExpand(message)">
+              <span class="cmd-chevron" :class="{ 'cmd-chevron-open': expandedMcpIds.has(message.id) }">▶</span>
+              <code class="cmd-label">{{ message.mcpToolCall.server }}/{{ message.mcpToolCall.tool }}</code>
+              <span class="cmd-status">{{ mcpToolCallStatusLabel(message) }}</span>
+            </button>
+            <div class="cmd-output-wrap" :class="{ 'cmd-output-visible': expandedMcpIds.has(message.id) }">
+              <div class="cmd-output-inner">
+                <pre class="cmd-output" v-text="mcpToolCallOutput(message)"></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="isCommandMessage(message)" class="message-row" data-role="system">
           <div class="message-stack" data-role="system">
             <button
-              v-if="getGroupedCommandsForLatest(message).length > 0"
+              v-if="!developerMode && getGroupedCommandsForLatest(message).length > 0"
               type="button"
               class="cmd-row cmd-row-group cmd-compact"
               :class="[commandStatusClass(message), { 'cmd-expanded': isCommandGroupExpanded(message) }]"
@@ -41,7 +71,7 @@
               <span class="cmd-status">{{ commandGroupSummaryStatus(message) }}</span>
             </button>
             <div
-              v-if="getGroupedCommandsForLatest(message).length > 0"
+              v-if="!developerMode && getGroupedCommandsForLatest(message).length > 0"
               class="cmd-group-wrap"
               :class="{ 'cmd-group-visible': isCommandGroupExpanded(message) }"
             >
@@ -231,7 +261,7 @@
               </div>
 
               <article v-if="message.text.length > 0" class="message-card" :data-role="message.role">
-                <div v-if="message.messageType === 'worked'" class="worked-separator-wrap" aria-live="polite">
+                <div v-if="message.messageType === 'worked' && !developerMode" class="worked-separator-wrap" aria-live="polite">
                   <button type="button" class="worked-separator" @click="toggleWorkedExpand(message)">
                     <span class="worked-separator-line" aria-hidden="true" />
                     <span class="worked-chevron" :class="{ 'worked-chevron-open': isWorkedExpanded(message) }">▶</span>
@@ -857,6 +887,8 @@ const expandedCommandIds = ref<Set<string>>(new Set())
 const collapsedAutoCommandIds = ref<Set<string>>(new Set())
 const expandedCommandGroupIds = ref<Set<string>>(new Set())
 const expandedWorkedIds = ref<Set<string>>(new Set())
+const expandedReasoningIds = ref<Set<string>>(new Set())
+const expandedMcpIds = ref<Set<string>>(new Set())
 const expandedFileChangeSummaryIds = ref<Set<string>>(new Set())
 const activeDiffViewerSummary = ref<TurnFileChangeSummary | null>(null)
 const activeDiffViewerChangeKey = ref('')
@@ -916,6 +948,19 @@ function readPlanData(message: UiMessage): { explanation: string; steps: UiPlanS
   return parsePlanFromMessageText(message.text)
 }
 
+function isMessageVisible(message: UiMessage): boolean {
+  if (props.developerMode) {
+    // Dev mode: show everything except the "worked" summary bar
+    return message.messageType !== 'worked'
+  }
+  // Clean mode: hide reasoning, mcpToolCall, grouped commands, and grouped file changes
+  if (message.messageType === 'reasoning') return false
+  if (message.messageType === 'mcpToolCall') return false
+  if (hiddenGroupedCommandIds.value.has(message.id)) return false
+  if (hiddenFileChangeMessageIds.value.has(message.id)) return false
+  return true
+}
+
 function isCommandMessage(message: UiMessage): boolean {
   return message.messageType === 'commandExecution' && !!message.commandExecution
 }
@@ -1085,6 +1130,48 @@ function commandGroupSummaryStatus(message: UiMessage): string {
   return commandStatusLabel(message)
 }
 
+function toggleMcpExpand(message: UiMessage): void {
+  const next = new Set(expandedMcpIds.value)
+  if (next.has(message.id)) next.delete(message.id)
+  else next.add(message.id)
+  expandedMcpIds.value = next
+}
+
+function mcpToolCallStatusClass(message: UiMessage): string {
+  const s = message.mcpToolCall?.status
+  if (s === 'completed') return 'cmd-completed'
+  if (s === 'failed') return 'cmd-failed'
+  if (s === 'inProgress') return 'cmd-running'
+  return 'cmd-completed'
+}
+
+function mcpToolCallStatusLabel(message: UiMessage): string {
+  const s = message.mcpToolCall?.status
+  const duration = message.mcpToolCall?.durationMs
+  const durationStr = duration != null ? ` (${(duration / 1000).toFixed(1)}s)` : ''
+  if (s === 'completed') return t('conversation.cmdDone') + durationStr
+  if (s === 'failed') return t('conversation.cmdFailed')
+  if (s === 'inProgress') return t('conversation.cmdRunning')
+  return t('conversation.cmdDone') + durationStr
+}
+
+function mcpToolCallOutput(message: UiMessage): string {
+  const mcp = message.mcpToolCall
+  if (!mcp) return ''
+  const parts: string[] = []
+  if (mcp.arguments) parts.push(mcp.arguments)
+  if (mcp.result) parts.push(mcp.result)
+  if (mcp.error) parts.push(`Error: ${mcp.error}`)
+  return parts.join('\n\n') || t('conversation.noOutput')
+}
+
+function toggleReasoningExpand(message: UiMessage): void {
+  const next = new Set(expandedReasoningIds.value)
+  if (next.has(message.id)) next.delete(message.id)
+  else next.add(message.id)
+  expandedReasoningIds.value = next
+}
+
 function toggleWorkedExpand(message: UiMessage): void {
   const next = new Set(expandedWorkedIds.value)
   if (next.has(message.id)) next.delete(message.id)
@@ -1187,6 +1274,7 @@ const props = defineProps<{
   activeThreadId: string
   cwd: string
   scrollState: ThreadScrollState | null
+  developerMode?: boolean
 }>()
 
 const emit = defineEmits<{
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index d939c592..a35ce1f3 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -454,6 +454,11 @@ const en = {
     apiKey: 'API key',
     save: 'Save',
     saving: 'Saving\u2026',
+    conversationStyle: 'Conversation style',
+    conversationStyleClean: 'Clean',
+    conversationStyleDev: 'Developer',
+    conversationStyleCleanDesc: 'Only final replies are shown; tool calls and thinking are collapsed.',
+    conversationStyleDevDesc: 'All tool calls, commands, and file changes are shown inline.',
     configEditor: 'Config Editor',
     configSaved: 'Config saved successfully',
     configSaveError: 'Failed to save config',
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index 25d62226..7b3be9ed 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -453,6 +453,11 @@ const zh = {
     apiKey: 'API 密钥',
     save: '保存',
     saving: '保存中\u2026',
+    conversationStyle: '对话显示风格',
+    conversationStyleClean: '简洁',
+    conversationStyleDev: '开发者',
+    conversationStyleCleanDesc: '仅显示最终回复，工具调用和思考过程折叠显示。',
+    conversationStyleDevDesc: '所有工具调用、命令和文件变更均内联显示（已完成的自动折叠）。',
     configEditor: '配置编辑器',
     configSaved: '配置保存成功',
     configSaveError: '保存配置失败',
diff --git a/src/types/codex.ts b/src/types/codex.ts
index fed6ad7e..2f25c1a2 100644
--- a/src/types/codex.ts
+++ b/src/types/codex.ts
@@ -99,6 +99,16 @@ export type CommandExecutionData = {
   exitCode: number | null
 }
 
+export type McpToolCallData = {
+  server: string
+  tool: string
+  status: CommandExecutionData['status']
+  arguments: string
+  result: string
+  error: string
+  durationMs: number | null
+}
+
 export type UiFileAttachment = { label: string; path: string }
 export type UiFileChangeOperation = 'add' | 'delete' | 'update'
 export type UiFileChangeStatus = 'inProgress' | 'completed' | 'failed' | 'declined'
@@ -213,6 +223,7 @@ export type UiMessage = {
   rawPayload?: string
   isUnhandled?: boolean
   commandExecution?: CommandExecutionData
+  mcpToolCall?: McpToolCallData
   plan?: UiPlanData
   turnId?: string
   turnIndex?: number

From d8c633ab3948ac985571a3578ca6546b014d2036 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 21:15:11 +0800
Subject: [PATCH 14/30] fix(composer): Ignore Enter while IME composition is
 active

- Prevent message sending when Enter is used to confirm IME input such as Chinese pinyin
---
 src/components/content/ThreadComposer.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index b7cccecf..6baf0d40 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -1520,6 +1520,9 @@ function onInputKeydown(event: KeyboardEvent): void {
     }
   }
 
+  // Ignore Enter during IME composition (e.g. Chinese pinyin confirming characters)
+  if (event.isComposing || event.keyCode === 229) return
+
   const shouldSend = props.sendWithEnter !== false
     ? event.key === 'Enter' && !event.shiftKey
     : event.key === 'Enter' && (event.metaKey || event.ctrlKey)

From 4c8ab825887dba2808fb03fd99687fd9c2deed7a Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 21:46:38 +0800
Subject: [PATCH 15/30] fix(docker): Rebuild node-pty during Docker image
 installation

- Run `pnpm rebuild node-pty` after dependency installation in both stages
- Install `python3`, `make`, and `g++` in the runtime stage for native module builds
- Remove temporary build tools after production install to keep the image lean
---
 Dockerfile | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 86adf90e..1bbdb296 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,7 +13,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 RUN corepack enable
 
 COPY package.json pnpm-lock.yaml ./
-RUN pnpm install --frozen-lockfile
+RUN pnpm install --frozen-lockfile && pnpm rebuild node-pty
 
 COPY . .
 RUN pnpm run build
@@ -46,8 +46,13 @@ RUN ARCH=$(uname -m) && \
     chmod +x /usr/local/bin/officecli
 
 # Install runtime dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends python3 make g++ && rm -rf /var/lib/apt/lists/*
+
 COPY --from=builder /src/package.json /src/pnpm-lock.yaml /app/
-RUN pnpm install --prod --frozen-lockfile
+RUN pnpm install --prod --frozen-lockfile && pnpm rebuild node-pty
+
+# Clean up build tools no longer needed at runtime
+RUN apt-get purge -y python3 make g++ && apt-get autoremove -y
 
 # Copy build artifacts
 COPY --from=builder /src/dist /app/dist

From aeba039fb5f5446d64f2dc8e34f75013e5311c20 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 21:54:34 +0800
Subject: [PATCH 16/30] chore(pnpm): Configure onlyBuiltDependencies for native
 builds

- Add node-pty and esbuild to pnpm onlyBuiltDependencies
- Ensure required postinstall build steps run for these packages
---
 Dockerfile   | 4 ++++
 package.json | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index 1bbdb296..9cef584c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -32,6 +32,10 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 
 RUN corepack enable
 
+# Install mise (runtime version manager)
+RUN curl -fsSL https://mise.run | sh && \
+    ln -s /root/.local/bin/mise /usr/local/bin/mise
+
 # Install codex CLI
 RUN npm install -g @openai/codex
 
diff --git a/package.json b/package.json
index bf7730f6..d5064245 100644
--- a/package.json
+++ b/package.json
@@ -77,5 +77,11 @@
     "vue": "^3.5.13",
     "vue-router": "^4.6.4",
     "vue-tsc": "^2.2.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "node-pty",
+      "esbuild"
+    ]
   }
 }

From 823162f40f717ed08404bc615e852662a34066bd Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 22:44:22 +0800
Subject: [PATCH 17/30] improve(docker): Enhance container runtime setup and
 tool availability

- Add common system packages needed for CLI usage and subprocess support
- Configure mise activation in shell startup and expose shims in PATH
- Keep build tools available at runtime for node-pty installation and rebuild
- Add an entrypoint script to initialize mise and npm global binaries before launch
- Update the container entrypoint to run through tini and the new startup script
---
 Dockerfile    | 29 ++++++++++++++++++++---------
 entrypoint.sh | 15 +++++++++++++++
 2 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100755 entrypoint.sh

diff --git a/Dockerfile b/Dockerfile
index 9cef584c..b389cbbb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -23,18 +23,32 @@ FROM node:20-bookworm-slim
 
 WORKDIR /app
 
+# Common system packages
 RUN apt-get update && apt-get install -y --no-install-recommends \
     ca-certificates \
     git \
     curl \
+    wget \
     tini \
+    jq \
+    openssh-client \
+    procps \
+    libicu72 \
+    python3 \
+    make \
+    g++ \
     && rm -rf /var/lib/apt/lists/*
 
 RUN corepack enable
 
-# Install mise (runtime version manager)
+# Install mise (runtime version manager) + activate in shell
 RUN curl -fsSL https://mise.run | sh && \
-    ln -s /root/.local/bin/mise /usr/local/bin/mise
+    ln -s /root/.local/bin/mise /usr/local/bin/mise && \
+    echo 'eval "$(mise activate bash)"' >> /root/.bashrc && \
+    echo 'export PATH="/root/.local/share/mise/shims:$PATH"' >> /root/.bashrc
+
+# Make mise shims available in non-interactive shells (for codex subprocess)
+ENV PATH="/root/.local/share/mise/shims:/root/.local/bin:${PATH}"
 
 # Install codex CLI
 RUN npm install -g @openai/codex
@@ -49,23 +63,20 @@ RUN ARCH=$(uname -m) && \
     curl -fsSL "https://github.com/iOfficeAI/OfficeCLI/releases/latest/download/${BINARY}" -o /usr/local/bin/officecli && \
     chmod +x /usr/local/bin/officecli
 
-# Install runtime dependencies
-RUN apt-get update && apt-get install -y --no-install-recommends python3 make g++ && rm -rf /var/lib/apt/lists/*
-
+# Install runtime dependencies for node-pty
 COPY --from=builder /src/package.json /src/pnpm-lock.yaml /app/
 RUN pnpm install --prod --frozen-lockfile && pnpm rebuild node-pty
 
-# Clean up build tools no longer needed at runtime
-RUN apt-get purge -y python3 make g++ && apt-get autoremove -y
-
 # Copy build artifacts
 COPY --from=builder /src/dist /app/dist
 COPY --from=builder /src/dist-cli /app/dist-cli
 
+COPY entrypoint.sh /app/entrypoint.sh
+
 ENV NODE_ENV=production
 ENV CODEX_HOME=/root/.codex
 
 EXPOSE 5900
 
-ENTRYPOINT ["/usr/bin/tini", "--"]
+ENTRYPOINT ["/usr/bin/tini", "--", "/app/entrypoint.sh"]
 CMD ["node", "dist-cli/index.js", "--port", "5900", "--no-open", "--no-login", "--no-tunnel"]
diff --git a/entrypoint.sh b/entrypoint.sh
new file mode 100755
index 00000000..7140a5d7
--- /dev/null
+++ b/entrypoint.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+set -e
+
+# Activate mise shims — new tools installed via `mise use -g` are available
+# immediately without restart, because shim directory is already in PATH.
+if command -v mise &>/dev/null; then
+  eval "$(mise activate bash --shims)"
+  mise install --yes 2>/dev/null || true
+fi
+
+# Ensure npm global bin is in PATH
+NPM_GLOBAL_BIN="$(npm config get prefix 2>/dev/null)/bin"
+export PATH="${NPM_GLOBAL_BIN}:${PATH}"
+
+exec "$@"

From 2ace4e23bb7d15f9e2097961d6697b75f87528f1 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 22:50:19 +0800
Subject: [PATCH 18/30] feat(config): Add configurable Web UI password support

- Expose `CODEXUI_PASSWORD` in `docker-compose.yaml` for container startup
- Document the environment variable in `.env.example`
- Allow users to set a fixed password instead of generating one on each start
---
 .env.example        | 3 +++
 docker-compose.yaml | 1 +
 2 files changed, 4 insertions(+)

diff --git a/.env.example b/.env.example
index 3b546c7c..77b6e0b6 100644
--- a/.env.example
+++ b/.env.example
@@ -12,6 +12,9 @@ OPENAI_API_KEY=sk-xxx
 # Server port (default: 5900)
 # CODEXUI_SERVER_PORT=5900
 
+# Web UI password (if unset, a random password is generated on each start)
+# CODEXUI_PASSWORD=your-password-here
+
 # Sandbox mode: read-only | workspace-write | danger-full-access
 # CODEXUI_SANDBOX_MODE=workspace-write
 
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 3b86530e..db4abe31 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -13,6 +13,7 @@ services:
       - OPENAI_API_KEY=${OPENAI_API_KEY}
       - CODEX_HOME=/root/.codex
       - CODEX_WORKSPACE=/workspace
+      - CODEXUI_PASSWORD=${CODEXUI_PASSWORD:-}
       # - CODEXUI_SANDBOX_MODE=workspace-write
       # - CODEXUI_APPROVAL_POLICY=suggest
       # - TELEGRAM_BOT_TOKEN=${TELEGRAM_BOT_TOKEN}

From cfeca446ddde3f268f9a51ba20134b32e805c14c Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Wed, 22 Apr 2026 22:50:42 +0800
Subject: [PATCH 19/30] feat(cli): Allow password to be set via environment
 variable

- Read `CODEXUI_PASSWORD` from the environment when no string input is provided
- Use the trimmed environment value before falling back to generated passwords
---
 src/cli/index.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/cli/index.ts b/src/cli/index.ts
index 4a2fdbe2..92dbdb4c 100644
--- a/src/cli/index.ts
+++ b/src/cli/index.ts
@@ -259,6 +259,11 @@ function resolvePassword(input: string | boolean): string | undefined {
   if (typeof input === 'string') {
     return input
   }
+  // Allow setting password via environment variable
+  const envPassword = process.env.CODEXUI_PASSWORD?.trim()
+  if (envPassword) {
+    return envPassword
+  }
   return generatePassword()
 }
 

From f9322f5175510cbd36f8a71b71bf3d3c6f8b393b Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 10:21:52 +0800
Subject: [PATCH 20/30] chore(docker): Add ripgrep to Docker image dependencies

- Install ripgrep alongside existing build tools in the Dockerfile
---
 Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Dockerfile b/Dockerfile
index b389cbbb..3c5a7eb5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,6 +8,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     python3 \
     make \
     g++ \
+    ripgrep \
     && rm -rf /var/lib/apt/lists/*
 
 RUN corepack enable

From 2143dc38868dcaebdbe35e26183ec48d0604ad0c Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 10:55:55 +0800
Subject: [PATCH 21/30] improve(file-manager): Add icons for Office and
 spreadsheet files

- Map DOC and DOCX files to a document icon
- Map XLS, XLSX, and CSV files to a spreadsheet icon
- Map PPT and PPTX files to a presentation icon
---
 src/components/content/FileManager.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/content/FileManager.vue b/src/components/content/FileManager.vue
index 797e120d..36983257 100644
--- a/src/components/content/FileManager.vue
+++ b/src/components/content/FileManager.vue
@@ -154,6 +154,9 @@ import {
   IconBrandPython,
   IconSettings,
   IconFileZip,
+  IconFileTypeDocx,
+  IconFileSpreadsheet,
+  IconPresentation,
 } from '@tabler/icons-vue'
 import IconTablerChevronLeft from '../icons/IconTablerChevronLeft.vue'
 import FilePreviewModal from './FilePreviewModal.vue'
@@ -495,6 +498,9 @@ const FILE_ICON_MAP: Record<string, Component> = {
   '.png': IconPhoto, '.jpg': IconPhoto, '.jpeg': IconPhoto, '.gif': IconPhoto, '.svg': IconPhoto, '.webp': IconPhoto,
   '.pdf': IconFileTypePdf,
   '.zip': IconFileZip, '.tar': IconFileZip, '.gz': IconFileZip, '.7z': IconFileZip, '.rar': IconFileZip,
+  '.docx': IconFileTypeDocx, '.doc': IconFileTypeDocx,
+  '.xlsx': IconFileSpreadsheet, '.xls': IconFileSpreadsheet, '.csv': IconFileSpreadsheet,
+  '.pptx': IconPresentation, '.ppt': IconPresentation,
 }
 
 function entryIcon(entry: FileEntry): Component {
@@ -652,4 +658,4 @@ onBeforeUnmount(() => {
 .fm-hidden-input {
   @apply hidden;
 }
-</style>
+</style>
\ No newline at end of file

From 5b8269c275ef8d778e2453a3cd8ab8648f417cdd Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 11:49:45 +0800
Subject: [PATCH 22/30] fix(thread): Recover MCP tool calls and timing from
 session logs

- Parse MCP function calls and outputs from session logs and merge them into turns
- Restore reasoning and command durations when rebuilding conversation items
- Preserve existing recovered items while interleaving agent, tool, and file change entries
- Surface duration metadata in normalizers and conversation UI for reasoning and commands
- Strip console.debug in production builds and add Vue env typings for build stability
---
 Dockerfile                                    |   2 +-
 src/api/normalizers/v2.ts                     |   7 +-
 src/components/content/ThreadConversation.vue |  10 +-
 src/composables/useDesktopState.ts            |   4 +-
 src/env.d.ts                                  |   7 +
 src/server/codexAppServerBridge.ts            | 247 ++++++++++++++----
 src/types/codex.ts                            |   4 +-
 vite.config.ts                                |   5 +-
 8 files changed, 225 insertions(+), 61 deletions(-)
 create mode 100644 src/env.d.ts

diff --git a/Dockerfile b/Dockerfile
index 3c5a7eb5..709b9b10 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -17,7 +17,7 @@ COPY package.json pnpm-lock.yaml ./
 RUN pnpm install --frozen-lockfile && pnpm rebuild node-pty
 
 COPY . .
-RUN pnpm run build
+RUN NODE_ENV=production pnpm run build
 
 
 FROM node:20-bookworm-slim
diff --git a/src/api/normalizers/v2.ts b/src/api/normalizers/v2.ts
index 904627b9..b5083d2f 100644
--- a/src/api/normalizers/v2.ts
+++ b/src/api/normalizers/v2.ts
@@ -468,12 +468,14 @@ function toUiMessages(item: ThreadItem): UiMessage[] {
     const raw = item as Record<string, unknown>
     const summary = Array.isArray(raw.summary) ? (raw.summary as string[]).join('\n') : (typeof raw.text === 'string' ? raw.text as string : '')
     if (!summary) return []
+    const durationMs = typeof raw.durationMs === 'number' ? raw.durationMs : null
     return [
       {
         id: item.id,
         role: 'assistant' as const,
         text: summary,
         messageType: 'reasoning',
+        ...(durationMs != null ? { durationMs } : {}),
       },
     ]
   }
@@ -499,13 +501,14 @@ function toUiMessages(item: ThreadItem): UiMessage[] {
     const cwd = typeof raw.cwd === 'string' ? raw.cwd : null
     const aggregatedOutput = typeof raw.aggregatedOutput === 'string' ? raw.aggregatedOutput : ''
     const exitCode = typeof raw.exitCode === 'number' ? raw.exitCode : null
+    const durationMs = typeof raw.durationMs === 'number' ? raw.durationMs : null
     return [
       {
         id: item.id,
         role: 'system' as const,
         text: cmd,
         messageType: 'commandExecution',
-        commandExecution: { command: cmd, cwd, status, aggregatedOutput, exitCode },
+        commandExecution: { command: cmd, cwd, status, aggregatedOutput, exitCode, durationMs },
       },
     ]
   }
@@ -654,4 +657,4 @@ export function readActiveTurnIdFromResponse(payload: ThreadReadResponse): strin
     }
   }
   return ''
-}
+}
\ No newline at end of file
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index 19259607..d183d706 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -30,10 +30,10 @@
         <!-- Reasoning/thinking block (dev mode only) -->
         <div v-if="message.messageType === 'reasoning'" class="message-row" data-role="system">
           <div class="message-stack" data-role="system">
-            <button type="button" class="cmd-row cmd-compact cmd-status-ok" :class="{ 'cmd-expanded': expandedReasoningIds.has(message.id) }" @click="toggleReasoningExpand(message)">
+            <button type="button" class="cmd-row cmd-compact cmd-completed" :class="{ 'cmd-expanded': expandedReasoningIds.has(message.id) }" @click="toggleReasoningExpand(message)">
               <span class="cmd-chevron" :class="{ 'cmd-chevron-open': expandedReasoningIds.has(message.id) }">▶</span>
               <code class="cmd-label">{{ $t('composer.thinking') }}</code>
-              <span class="cmd-status">{{ $t('conversation.cmdDone') }}</span>
+              <span class="cmd-status">{{ $t('conversation.cmdDone') }}{{ message.durationMs != null ? ` (${(message.durationMs / 1000).toFixed(1)}s)` : '' }}</span>
             </button>
             <div class="cmd-output-wrap" :class="{ 'cmd-output-visible': expandedReasoningIds.has(message.id) }">
               <div class="cmd-output-inner">
@@ -951,6 +951,7 @@ function readPlanData(message: UiMessage): { explanation: string; steps: UiPlanS
 function isMessageVisible(message: UiMessage): boolean {
   if (props.developerMode) {
     // Dev mode: show everything except the "worked" summary bar
+    console.debug('[visibility-dev]', message.messageType, message.id, JSON.stringify(message).slice(0, 200))
     return message.messageType !== 'worked'
   }
   // Clean mode: hide reasoning, mcpToolCall, grouped commands, and grouped file changes
@@ -1230,9 +1231,10 @@ function commandStatusLabel(message: UiMessage): string {
   const ce = message.commandExecution
   if (!ce) return ''
   const compact = isCommandCompact(message)
+  const durationStr = ce.durationMs != null ? ` (${(ce.durationMs / 1000).toFixed(1)}s)` : ''
   switch (ce.status) {
     case 'inProgress': return compact ? t('conversation.cmdRunning') : t('conversation.cmdRunningFull')
-    case 'completed': return ce.exitCode === 0 ? (compact ? t('conversation.cmdDone') : t('conversation.cmdCompleted')) : t('conversation.cmdExitCode', { code: ce.exitCode ?? '?' })
+    case 'completed': return ce.exitCode === 0 ? t('conversation.cmdDone') + durationStr : t('conversation.cmdExitCode', { code: ce.exitCode ?? '?' })
     case 'failed': return compact ? t('conversation.cmdFailed') : t('conversation.cmdFailedFull')
     case 'declined': return compact ? t('conversation.cmdDeclined') : t('conversation.cmdDeclinedFull')
     case 'interrupted': return compact ? t('conversation.cmdStopped') : t('conversation.cmdInterrupted')
@@ -1243,7 +1245,7 @@ function commandStatusLabel(message: UiMessage): string {
 function commandStatusClass(message: UiMessage): string {
   const s = message.commandExecution?.status
   if (s === 'inProgress') return 'cmd-status-running'
-  if (s === 'completed' && message.commandExecution?.exitCode === 0) return 'cmd-status-ok'
+  if (s === 'completed' && message.commandExecution?.exitCode === 0) return 'cmd-completed'
   return 'cmd-status-error'
 }
 
diff --git a/src/composables/useDesktopState.ts b/src/composables/useDesktopState.ts
index 035de503..1c0c41f7 100644
--- a/src/composables/useDesktopState.ts
+++ b/src/composables/useDesktopState.ts
@@ -3067,7 +3067,7 @@ export function useDesktopState() {
       role: 'system',
       text: command,
       messageType: 'commandExecution',
-      commandExecution: { command, cwd, status: 'inProgress', aggregatedOutput: '', exitCode: null },
+      commandExecution: { command, cwd, status: 'inProgress', aggregatedOutput: '', exitCode: null, durationMs: null },
       turnId: turnId || undefined,
       turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
     }
@@ -3107,7 +3107,7 @@ export function useDesktopState() {
       role: 'system',
       text: command,
       messageType: 'commandExecution',
-      commandExecution: { command, cwd, status, aggregatedOutput, exitCode },
+      commandExecution: { command, cwd, status, aggregatedOutput, exitCode, durationMs: null },
       turnId: turnId || undefined,
       turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
     }
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 00000000..8b53f849
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}
diff --git a/src/server/codexAppServerBridge.ts b/src/server/codexAppServerBridge.ts
index 84e0c98d..adc97851 100644
--- a/src/server/codexAppServerBridge.ts
+++ b/src/server/codexAppServerBridge.ts
@@ -1006,6 +1006,39 @@ function parseExecCommandOutput(output: string): { exitCode: number | null; wall
   return { exitCode, wallTime, cleanOutput: outputLines.join('\n').trimEnd() }
 }
 
+type SessionRecoveredMcpToolCall = {
+  id: string
+  type: 'mcpToolCall'
+  server: string
+  tool: string
+  status: 'inProgress' | 'completed' | 'failed'
+  arguments: unknown
+  result: unknown
+  error: string
+  durationMs: number | null
+}
+
+function parseSessionStructuredValue(value: unknown): unknown {
+  if (typeof value !== 'string') return value ?? ''
+  const trimmed = value.trim()
+  if (!trimmed) return ''
+  try {
+    return JSON.parse(trimmed)
+  } catch {
+    return value
+  }
+}
+
+function parseSessionMcpFunctionName(name: unknown): { server: string; tool: string } | null {
+  if (typeof name !== 'string' || !name.startsWith('mcp__')) return null
+  const parts = name.slice('mcp__'.length).split('__').filter(Boolean)
+  if (parts.length < 2) return null
+  const [server, ...toolParts] = parts
+  const tool = toolParts.join('__')
+  if (!server || !tool) return null
+  return { server, tool }
+}
+
 type SessionRecoveredFileChangeItem = {
   id: string
   type: 'fileChange'
@@ -1014,15 +1047,20 @@ type SessionRecoveredFileChangeItem = {
 }
 
 type SessionItemSlot = {
-  type: 'agentMessage' | 'commandExecution' | 'fileChange'
+  type: 'agentMessage' | 'reasoning' | 'commandExecution' | 'mcpToolCall' | 'fileChange'
   command?: SessionRecoveredCommand
+  mcpToolCall?: SessionRecoveredMcpToolCall
   fileChange?: SessionRecoveredFileChangeItem
+  durationMs?: number | null
 }
 
 function buildSessionItemOrder(sessionLogRaw: string, turnIds: Set<string>): Map<string, SessionItemSlot[]> {
   let currentTurnId = ''
   const orderByTurnId = new Map<string, SessionItemSlot[]>()
   const callIdToCommand = new Map<string, SessionRecoveredCommand>()
+  const callIdToMcpToolCall = new Map<string, SessionRecoveredMcpToolCall>()
+  const callIdToTimestamp = new Map<string, number>()
+  let lastResponseItemTs = 0
 
   for (const line of sessionLogRaw.split('\n')) {
     if (!line.trim()) continue
@@ -1033,15 +1071,19 @@ function buildSessionItemOrder(sessionLogRaw: string, turnIds: Set<string>): Map
       continue
     }
 
+    const rowTs = typeof row.timestamp === 'string' ? new Date(row.timestamp as string).getTime() : 0
+
     if (row.type === 'turn_context') {
       const p = asRecord(row.payload)
       currentTurnId = readNonEmptyString(p?.turn_id) || currentTurnId
+      if (rowTs > 0) lastResponseItemTs = rowTs
       continue
     }
     if (row.type === 'event_msg') {
       const p = asRecord(row.payload)
       if (p?.type === 'task_started') {
         currentTurnId = readNonEmptyString(p.turn_id) || currentTurnId
+        if (rowTs > 0) lastResponseItemTs = rowTs
       }
       continue
     }
@@ -1058,43 +1100,95 @@ function buildSessionItemOrder(sessionLogRaw: string, turnIds: Set<string>): Map
 
     if (payload.type === 'message' && payload.role === 'assistant') {
       slots.push({ type: 'agentMessage' })
+      if (rowTs > 0) lastResponseItemTs = rowTs
       continue
     }
 
-    if (payload.type === 'function_call' && payload.name === 'exec_command') {
-      const callId = readNonEmptyString(payload.call_id)
-      if (!callId) continue
-      let cmd = ''
-      try {
-        const args = JSON.parse(payload.arguments as string) as Record<string, unknown>
-        cmd = typeof args.cmd === 'string' ? args.cmd : ''
-      } catch { /* empty */ }
-      const command: SessionRecoveredCommand = {
-        id: `session-cmd-${callId}`,
-        type: 'commandExecution',
-        command: cmd,
-        cwd: null,
-        status: 'completed',
-        aggregatedOutput: '',
-        exitCode: null,
-        durationMs: null,
-      }
-      callIdToCommand.set(callId, command)
-      slots.push({ type: 'commandExecution', command })
+    if (payload.type === 'reasoning') {
+      const durationMs = (rowTs > 0 && lastResponseItemTs > 0 && rowTs > lastResponseItemTs)
+        ? rowTs - lastResponseItemTs
+        : null
+      slots.push({ type: 'reasoning', durationMs })
+      if (rowTs > 0) lastResponseItemTs = rowTs
       continue
     }
 
+    if (payload.type === 'function_call') {
+      if (payload.name === 'exec_command') {
+        const callId = readNonEmptyString(payload.call_id)
+        if (!callId) continue
+        let cmd = ''
+        try {
+          const args = JSON.parse(payload.arguments as string) as Record<string, unknown>
+          cmd = typeof args.cmd === 'string' ? args.cmd : ''
+        } catch { /* empty */ }
+        const command: SessionRecoveredCommand = {
+          id: `session-cmd-${callId}`,
+          type: 'commandExecution',
+          command: cmd,
+          cwd: null,
+          status: 'completed',
+          aggregatedOutput: '',
+          exitCode: null,
+          durationMs: null,
+        }
+        callIdToCommand.set(callId, command)
+        slots.push({ type: 'commandExecution', command })
+        if (rowTs > 0) lastResponseItemTs = rowTs
+        continue
+      }
+
+      const mcpName = parseSessionMcpFunctionName(payload.name)
+      if (mcpName) {
+        const callId = readNonEmptyString(payload.call_id)
+        if (!callId) continue
+        if (rowTs > 0) callIdToTimestamp.set(callId, rowTs)
+        const mcpToolCall: SessionRecoveredMcpToolCall = {
+          id: `session-mcp-${callId}`,
+          type: 'mcpToolCall',
+          server: mcpName.server,
+          tool: mcpName.tool,
+          status: 'inProgress',
+          arguments: parseSessionStructuredValue(payload.arguments),
+          result: '',
+          error: '',
+          durationMs: null,
+        }
+        callIdToMcpToolCall.set(callId, mcpToolCall)
+        slots.push({ type: 'mcpToolCall', mcpToolCall })
+        if (rowTs > 0) lastResponseItemTs = rowTs
+        continue
+      }
+    }
+
     if (payload.type === 'function_call_output') {
       const callId = readNonEmptyString(payload.call_id)
       if (!callId) continue
-      const existing = callIdToCommand.get(callId)
-      if (!existing) continue
-      const rawOutput = typeof payload.output === 'string' ? payload.output : ''
-      const parsed = parseExecCommandOutput(rawOutput)
-      existing.aggregatedOutput = parsed.cleanOutput
-      existing.exitCode = parsed.exitCode
-      existing.durationMs = parsed.wallTime
-      existing.status = parsed.exitCode === 0 || parsed.exitCode === null ? 'completed' : 'failed'
+
+      const existingCommand = callIdToCommand.get(callId)
+      if (existingCommand) {
+        const rawOutput = typeof payload.output === 'string' ? payload.output : ''
+        const parsed = parseExecCommandOutput(rawOutput)
+        existingCommand.aggregatedOutput = parsed.cleanOutput
+        existingCommand.exitCode = parsed.exitCode
+        existingCommand.durationMs = parsed.wallTime
+        existingCommand.status = parsed.exitCode === 0 || parsed.exitCode === null ? 'completed' : 'failed'
+        if (rowTs > 0) lastResponseItemTs = rowTs
+        continue
+      }
+
+      const existingMcpToolCall = callIdToMcpToolCall.get(callId)
+      if (existingMcpToolCall) {
+        existingMcpToolCall.result = parseSessionStructuredValue(payload.output)
+        existingMcpToolCall.error = ''
+        existingMcpToolCall.status = 'completed'
+        const startTs = callIdToTimestamp.get(callId)
+        if (startTs && rowTs > startTs) {
+          existingMcpToolCall.durationMs = rowTs - startTs
+        }
+        if (rowTs > 0) lastResponseItemTs = rowTs
+        continue
+      }
     }
 
     if (payload.type === 'custom_tool_call' && payload.name === 'apply_patch' && payload.status === 'completed') {
@@ -1412,36 +1506,67 @@ function mergeSessionCommandsIntoTurns(turns: unknown[], sessionLogRaw: string):
     if (!slots || slots.length === 0) return turn
 
     const existingItems = Array.isArray(turnRecord.items) ? (turnRecord.items as Record<string, unknown>[]) : []
-    const alreadyHasRecoveredItems = existingItems.some((it) => it.type === 'commandExecution' || it.type === 'fileChange')
-    if (alreadyHasRecoveredItems) return turn
-
-    const agentMessages = existingItems.filter((it) => it.type === 'agentMessage')
-    const nonAgentNonUserItems = existingItems.filter((it) => it.type !== 'agentMessage' && it.type !== 'userMessage')
-    const userMessages = existingItems.filter((it) => it.type === 'userMessage')
-
-    let agentIdx = 0
-    const interleaved: Record<string, unknown>[] = [...userMessages]
+    const indexedItems = existingItems.map((item, index) => ({ item, index }))
+    const userMessages = indexedItems.filter(({ item }) => item.type === 'userMessage')
+    const agentMessages = indexedItems.filter(({ item }) => item.type === 'agentMessage')
+    const reasoningItems = indexedItems.filter(({ item }) => item.type === 'reasoning')
+    const commandExecutions = indexedItems.filter(({ item }) => item.type === 'commandExecution')
+    const mcpToolCalls = indexedItems.filter(({ item }) => item.type === 'mcpToolCall')
+    const fileChanges = indexedItems.filter(({ item }) => item.type === 'fileChange')
+
+    const consumedIndices = new Set<number>(userMessages.map(({ index }) => index))
+    const interleaved: Record<string, unknown>[] = userMessages.map(({ item }) => item)
+
+    const shiftExistingItem = (
+      queue: Array<{ item: Record<string, unknown>; index: number }>,
+    ): Record<string, unknown> | null => {
+      const nextItem = queue.shift()
+      if (!nextItem) return null
+      consumedIndices.add(nextItem.index)
+      return nextItem.item
+    }
 
     for (const slot of slots) {
       if (slot.type === 'agentMessage') {
-        if (agentIdx < agentMessages.length) {
-          interleaved.push(agentMessages[agentIdx]!)
-          agentIdx++
+        const existingAgentMessage = shiftExistingItem(agentMessages)
+        if (existingAgentMessage) interleaved.push(existingAgentMessage)
+      } else if (slot.type === 'reasoning') {
+        const existingReasoning = shiftExistingItem(reasoningItems)
+        if (existingReasoning) {
+          if (slot.durationMs != null && existingReasoning.durationMs == null) {
+            existingReasoning.durationMs = slot.durationMs
+          }
+          interleaved.push(existingReasoning)
         }
       } else if (slot.type === 'commandExecution' && slot.command) {
-        interleaved.push(slot.command as unknown as Record<string, unknown>)
+        const existingCommand = shiftExistingItem(commandExecutions)
+        if (existingCommand) {
+          interleaved.push(existingCommand)
+        } else {
+          interleaved.push(slot.command as unknown as Record<string, unknown>)
+        }
+      } else if (slot.type === 'mcpToolCall' && slot.mcpToolCall) {
+        const existingMcpToolCall = shiftExistingItem(mcpToolCalls)
+        if (existingMcpToolCall) {
+          interleaved.push(existingMcpToolCall)
+        } else {
+          interleaved.push(slot.mcpToolCall as unknown as Record<string, unknown>)
+        }
       } else if (slot.type === 'fileChange' && slot.fileChange) {
-        interleaved.push(slot.fileChange as unknown as Record<string, unknown>)
+        const existingFileChange = shiftExistingItem(fileChanges)
+        if (existingFileChange) {
+          interleaved.push(existingFileChange)
+        } else {
+          interleaved.push(slot.fileChange as unknown as Record<string, unknown>)
+        }
       }
     }
 
-    while (agentIdx < agentMessages.length) {
-      interleaved.push(agentMessages[agentIdx]!)
-      agentIdx++
+    for (const { item, index } of indexedItems) {
+      if (consumedIndices.has(index) || item.type === 'userMessage') continue
+      interleaved.push(item)
     }
 
-    interleaved.push(...nonAgentNonUserItems)
-
     return {
       ...turnRecord,
       items: interleaved,
@@ -2464,6 +2589,7 @@ type CapturedItem = {
 const MERGEABLE_ITEM_TYPES = new Set([
   'commandExecution',
   'fileChange',
+  'mcpToolCall',
 ])
 
 class AppServerProcess {
@@ -3621,13 +3747,34 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
 
         const rpcResult = await appServer.rpc(body.method, body.params ?? null)
         const trimmedResult = trimThreadTurnsInRpcResult(body.method, rpcResult)
-        const result = await sanitizeThreadTurnsInlinePayloads(body.method, trimmedResult)
+        let result = await sanitizeThreadTurnsInlinePayloads(body.method, trimmedResult)
 
         if (THREAD_METHODS_WITH_TURNS.has(body.method)) {
           const rpcRecord = asRecord(result)
           const rpcThread = asRecord(rpcRecord?.thread)
           const rpcThreadId = typeof rpcThread?.id === 'string' ? rpcThread.id : ''
           if (rpcThreadId) {
+            const rawTurns = Array.isArray(rpcThread?.turns) ? rpcThread.turns : []
+            let mergedTurns = appServer.mergeItemsIntoTurns(rpcThreadId, rawTurns)
+
+            const sessionPath = readNonEmptyString(rpcThread?.path)
+            if (sessionPath && isAbsolute(sessionPath)) {
+              try {
+                const sessionLogRaw = await readFile(sessionPath, 'utf8')
+                mergedTurns = mergeSessionCommandsIntoTurns(mergedTurns, sessionLogRaw)
+              } catch {
+                // Session log not available - continue without recovery
+              }
+            }
+
+            result = {
+              ...rpcRecord,
+              thread: {
+                ...rpcThread,
+                turns: mergedTurns,
+              },
+            }
+
             appServer.storeThreadReadSnapshot(rpcThreadId, result)
           }
         }
@@ -4596,4 +4743,4 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
   }
 
   return middleware
-}
+}
\ No newline at end of file
diff --git a/src/types/codex.ts b/src/types/codex.ts
index 2f25c1a2..a99d305a 100644
--- a/src/types/codex.ts
+++ b/src/types/codex.ts
@@ -97,6 +97,7 @@ export type CommandExecutionData = {
   status: 'inProgress' | 'completed' | 'failed' | 'declined' | 'interrupted'
   aggregatedOutput: string
   exitCode: number | null
+  durationMs: number | null
 }
 
 export type McpToolCallData = {
@@ -224,6 +225,7 @@ export type UiMessage = {
   isUnhandled?: boolean
   commandExecution?: CommandExecutionData
   mcpToolCall?: McpToolCallData
+  durationMs?: number | null
   plan?: UiPlanData
   turnId?: string
   turnIndex?: number
@@ -344,4 +346,4 @@ export type ChatThread = {
 export type CollaborationModeOption = {
   value: CollaborationModeKind
   label: string
-}
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 2e9d72db..78b8dc95 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -103,6 +103,9 @@ function resolveViteRollbackDebugFallback(): string {
 const viteRollbackDebugFallback = resolveViteRollbackDebugFallback();
 
 export default defineConfig({
+  esbuild: {
+    pure: process.env.NODE_ENV === 'production' ? ['console.debug'] : [],
+  },
   define: {
     "import.meta.env.VITE_WORKTREE_NAME": JSON.stringify(worktreeName),
     "import.meta.env.VITE_APP_VERSION": JSON.stringify(appVersion),
@@ -380,4 +383,4 @@ export default defineConfig({
       },
     },
   ],
-});
+});
\ No newline at end of file

From 74098bf38a54d3e5e78255974d79adb4fe4c4437 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 12:20:50 +0800
Subject: [PATCH 23/30] test: Add Vitest dependency to lockfile

- Register vitest@4.1.5 as a project dependency
- Update pnpm lock entries for Vitest packages and related test libs
- Include resolved transitive dependencies required by the new test setup
---
 pnpm-lock.yaml | 241 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 241 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 872caea1..2ecf248a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,9 @@ importers:
       vite:
         specifier: ^6.1.0
         version: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
+      vitest:
+        specifier: ^4.1.5
+        version: 4.1.5(@types/node@22.19.17)(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))
       vue:
         specifier: ^3.5.13
         version: 3.5.32(typescript@5.9.3)
@@ -851,6 +854,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@tabler/icons-vue@3.41.1':
     resolution: {integrity: sha512-OLLWlyrx6HdQpdgnZ8dO8uBGIIZwQDPgE8Gl6tUuAD7AgtfnmtFz8vb7dTEvxddM5CMpPt21ogPpBhJfEjSY+Q==}
     peerDependencies:
@@ -952,9 +958,15 @@ packages:
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -1004,6 +1016,35 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
+  '@vitest/expect@4.1.5':
+    resolution: {integrity: sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==}
+
+  '@vitest/mocker@4.1.5':
+    resolution: {integrity: sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@4.1.5':
+    resolution: {integrity: sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==}
+
+  '@vitest/runner@4.1.5':
+    resolution: {integrity: sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==}
+
+  '@vitest/snapshot@4.1.5':
+    resolution: {integrity: sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==}
+
+  '@vitest/spy@4.1.5':
+    resolution: {integrity: sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==}
+
+  '@vitest/utils@4.1.5':
+    resolution: {integrity: sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==}
+
   '@volar/language-core@2.4.15':
     resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
@@ -1088,6 +1129,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1120,6 +1165,10 @@ packages:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
   chokidar@4.0.3:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
@@ -1158,6 +1207,9 @@ packages:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
@@ -1223,6 +1275,9 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
+  es-module-lexer@2.0.0:
+    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -1247,10 +1302,17 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   express@5.2.1:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
@@ -1529,6 +1591,9 @@ packages:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -1677,6 +1742,9 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -1685,10 +1753,16 @@ packages:
     resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
     engines: {node: '>= 12'}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
 
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -1716,13 +1790,24 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
+  tinyexec@1.1.1:
+    resolution: {integrity: sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==}
+    engines: {node: '>=18'}
+
   tinyglobby@0.2.16:
     resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
   toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -1822,6 +1907,47 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.1.5:
+    resolution: {integrity: sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.5
+      '@vitest/browser-preview': 4.1.5
+      '@vitest/browser-webdriverio': 4.1.5
+      '@vitest/coverage-istanbul': 4.1.5
+      '@vitest/coverage-v8': 4.1.5
+      '@vitest/ui': 4.1.5
+      happy-dom: '*'
+      jsdom: '*'
+      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -1862,6 +1988,11 @@ packages:
     resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
     engines: {node: '>=0.8.0'}
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -2547,6 +2678,8 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.60.2':
     optional: true
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@tabler/icons-vue@3.41.1(vue@3.5.32(typescript@5.9.3))':
     dependencies:
       '@tabler/icons': 3.41.1
@@ -2627,10 +2760,17 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/node': 22.19.17
 
+  '@types/chai@5.2.3':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 22.19.17
 
+  '@types/deep-eql@4.0.2': {}
+
   '@types/estree@1.0.8': {}
 
   '@types/express-serve-static-core@5.1.1':
@@ -2685,6 +2825,47 @@ snapshots:
       vite: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
       vue: 3.5.32(typescript@5.9.3)
 
+  '@vitest/expect@4.1.5':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.3
+      '@vitest/spy': 4.1.5
+      '@vitest/utils': 4.1.5
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.5(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))':
+    dependencies:
+      '@vitest/spy': 4.1.5
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
+
+  '@vitest/pretty-format@4.1.5':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.5':
+    dependencies:
+      '@vitest/utils': 4.1.5
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.5':
+    dependencies:
+      '@vitest/pretty-format': 4.1.5
+      '@vitest/utils': 4.1.5
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@4.1.5': {}
+
+  '@vitest/utils@4.1.5':
+    dependencies:
+      '@vitest/pretty-format': 4.1.5
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
   '@volar/language-core@2.4.15':
     dependencies:
       '@volar/source-map': 2.4.15
@@ -2794,6 +2975,8 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  assertion-error@2.0.1: {}
+
   balanced-match@1.0.2: {}
 
   body-parser@2.2.2:
@@ -2833,6 +3016,8 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
+  chai@6.2.2: {}
+
   chokidar@4.0.3:
     dependencies:
       readdirp: 4.1.2
@@ -2861,6 +3046,8 @@ snapshots:
 
   content-type@1.0.5: {}
 
+  convert-source-map@2.0.0: {}
+
   cookie-signature@1.2.2: {}
 
   cookie@0.7.2: {}
@@ -2902,6 +3089,8 @@ snapshots:
 
   es-errors@1.3.0: {}
 
+  es-module-lexer@2.0.0: {}
+
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
@@ -2970,8 +3159,14 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
   etag@1.8.1: {}
 
+  expect-type@1.3.0: {}
+
   express@5.2.1:
     dependencies:
       accepts: 2.0.0
@@ -3262,6 +3457,8 @@ snapshots:
 
   object-inspect@1.13.4: {}
 
+  obug@2.1.1: {}
+
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -3454,12 +3651,18 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  siginfo@2.0.0: {}
+
   source-map-js@1.2.1: {}
 
   source-map@0.7.6: {}
 
+  stackback@0.0.2: {}
+
   statuses@2.0.2: {}
 
+  std-env@4.1.0: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -3492,13 +3695,19 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tinybench@2.9.0: {}
+
   tinyexec@0.3.2: {}
 
+  tinyexec@1.1.1: {}
+
   tinyglobby@0.2.16:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyrainbow@3.1.0: {}
+
   toidentifier@1.0.1: {}
 
   tree-kill@1.2.2: {}
@@ -3567,6 +3776,33 @@ snapshots:
       jiti: 2.6.1
       lightningcss: 1.32.0
 
+  vitest@4.1.5(@types/node@22.19.17)(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)):
+    dependencies:
+      '@vitest/expect': 4.1.5
+      '@vitest/mocker': 4.1.5(vite@6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0))
+      '@vitest/pretty-format': 4.1.5
+      '@vitest/runner': 4.1.5
+      '@vitest/snapshot': 4.1.5
+      '@vitest/spy': 4.1.5
+      '@vitest/utils': 4.1.5
+      es-module-lexer: 2.0.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 4.1.0
+      tinybench: 2.9.0
+      tinyexec: 1.1.1
+      tinyglobby: 0.2.16
+      tinyrainbow: 3.1.0
+      vite: 6.4.2(@types/node@22.19.17)(jiti@2.6.1)(lightningcss@1.32.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.19.17
+    transitivePeerDependencies:
+      - msw
+
   vscode-uri@3.1.0: {}
 
   vue-i18n@11.1.12(vue@3.5.32(typescript@5.9.3)):
@@ -3607,6 +3843,11 @@ snapshots:
 
   websocket-extensions@0.1.4: {}
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0

From 3788b48b89bfc73df0337cfff346451d2175c9a6 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 13:14:30 +0800
Subject: [PATCH 24/30] refactor(i18n): Switch locale keys to English text
 fallback

- Replace nested translation keys across UI components with direct English strings
- Simplify the English locale to rely on vue-i18n key fallback behavior
- Expand Chinese translations to map the new English text keys
- Remove useUiLanguage usage in favor of useI18n and silence missing key warnings
---
 src/App.vue                                   |  137 ++-
 src/components/content/AccountMenu.vue        |   10 +-
 src/components/content/ComposerDropdown.vue   |    4 +-
 .../content/ComposerMcpDropdown.vue           |    4 +-
 .../content/ComposerRuntimeDropdown.vue       |    8 +-
 .../content/ComposerSearchDropdown.vue        |   10 +-
 .../content/ComposerSkillPicker.vue           |    9 +-
 src/components/content/ConfigEditorModal.vue  |   12 +-
 src/components/content/FileManager.vue        |   48 +-
 src/components/content/FileManagerPanel.vue   |    4 +-
 src/components/content/FilePreviewModal.vue   |   30 +-
 src/components/content/QueuedMessages.vue     |   12 +-
 src/components/content/ReviewPane.vue         |   97 +-
 src/components/content/SkillCard.vue          |   12 +-
 src/components/content/SkillDetailModal.vue   |   20 +-
 src/components/content/SkillsHub.vue          |   58 +-
 src/components/content/ThreadComposer.vue     |   91 +-
 src/components/content/ThreadConversation.vue |  110 +-
 .../content/ThreadMessageTypeMenu.vue         |    6 +-
 .../content/ThreadPendingRequestPanel.vue     |   76 +-
 .../content/ThreadTerminalPanel.vue           |   22 +-
 src/components/sidebar/SidebarPrimaryNav.vue  |    6 +-
 .../sidebar/SidebarThreadControls.vue         |   10 +-
 src/components/sidebar/SidebarThreadTree.vue  |  115 +-
 src/i18n/index.ts                             |    4 +-
 src/i18n/locales/en.ts                        |  525 +-------
 src/i18n/locales/zh.ts                        | 1089 +++++++++--------
 src/main.ts                                   |    4 +-
 28 files changed, 1017 insertions(+), 1516 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f9b8d228..6b39d76e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,8 +15,8 @@
               class="sidebar-search-toggle"
               type="button"
               :aria-pressed="isSidebarSearchVisible"
-              :aria-label="$t('home.searchThreads')"
-              :title="$t('home.searchThreads')"
+              :aria-label="$t('Search threads')"
+              :title="$t('Search threads')"
               @click="toggleSidebarSearch"
             >
               <IconTablerSearch class="sidebar-search-toggle-icon" />
@@ -30,14 +30,14 @@
               v-model="sidebarSearchQuery"
               class="sidebar-search-input"
               type="text"
-              :placeholder="$t('home.filterThreads')"
+              :placeholder="$t('Filter threads...')"
               @keydown="onSidebarSearchKeydown"
             />
             <button
               v-if="sidebarSearchQuery.length > 0"
               class="sidebar-search-clear"
               type="button"
-              :aria-label="$t('home.clearSearch')"
+              :aria-label="$t('Clear search')"
               @click="clearSidebarSearch"
             >
               <IconTablerX class="sidebar-search-clear-icon" />
@@ -51,7 +51,7 @@
             type="button"
             @click="router.push({ name: 'skills' }); isMobile && setSidebarCollapsed(true)"
           >
-            {{ $t('home.skillsHub') }}
+            {{ $t('Skills Hub') }}
           </button>
 
           <button
@@ -61,7 +61,7 @@
             type="button"
             @click="router.push({ name: 'files' }); isMobile && setSidebarCollapsed(true)"
           >
-            {{ $t('fileManager.title') }}
+            {{ $t('Files') }}
           </button>
 
           <SidebarThreadTree :groups="projectGroups" :project-display-name-by-id="projectDisplayNameById"
@@ -98,12 +98,12 @@
                       class="sidebar-settings-account-collapse"
                       type="button"
                       :aria-expanded="!isAccountsSectionCollapsed"
-                      :title="isAccountsSectionCollapsed ? t('settings.expandAccounts') : t('settings.collapseAccounts')"
+                      :title="isAccountsSectionCollapsed ? t('Expand accounts') : t('Collapse accounts')"
                       @click="toggleAccountsSectionCollapsed"
                     >
                       <span class="sidebar-settings-account-collapse-icon">{{ isAccountsSectionCollapsed ? '▸' : '▾' }}</span>
                     </button>
-                    <span class="sidebar-settings-account-title">{{ $t('settings.accounts') }}</span>
+                    <span class="sidebar-settings-account-title">{{ $t('Accounts') }}</span>
                     <span class="sidebar-settings-account-count">{{ accounts.length }}</span>
                   </div>
                   <button
@@ -112,13 +112,13 @@
                     :disabled="isRefreshingAccounts || isSwitchingAccounts"
                     @click="onRefreshAccounts"
                   >
-                    {{ isRefreshingAccounts ? $t('settings.reloading') : $t('settings.reload') }}
+                    {{ isRefreshingAccounts ? $t('Reloading\u2026') : $t('Reload') }}
                   </button>
                 </div>
                 <template v-if="!isAccountsSectionCollapsed">
                   <p v-if="accountActionError" class="sidebar-settings-account-error">{{ accountActionError }}</p>
                   <p v-if="accounts.length === 0" class="sidebar-settings-account-empty">
-                    {{ $t('settings.runCodexLogin') }}
+                    {{ $t('Run `codex login`, then click reload.') }}
                   </p>
                   <div v-else class="sidebar-settings-account-list">
                   <article
@@ -136,7 +136,7 @@
                     @mouseleave="onAccountCardPointerLeave(account.accountId)"
                   >
                     <div class="sidebar-settings-account-main">
-                      <p class="sidebar-settings-account-email">{{ account.email || $t('settings.accounts') }}</p>
+                      <p class="sidebar-settings-account-email">{{ account.email || $t('Accounts') }}</p>
                       <p class="sidebar-settings-account-meta">
                         {{ formatAccountMeta(account) }}
                       </p>
@@ -144,7 +144,7 @@
                         {{ formatAccountQuota(account) }}
                       </p>
                       <p class="sidebar-settings-account-id">
-                        {{ $t('settings.workspace') + ' ' }}{{ shortAccountId(account.accountId) }}
+                        {{ $t('Workspace') + ' ' }}{{ shortAccountId(account.accountId) }}
                       </p>
                     </div>
                     <div class="sidebar-settings-account-actions">
@@ -174,19 +174,19 @@
                 </template>
               </div>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.sendWithEnter" @click="toggleSendWithEnter">
-                <span class="sidebar-settings-label">{{ $t('settings.requireCmdEnter') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Require \u2318 + enter to send') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': !sendWithEnter }" />
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.inProgressSendMode" @click="cycleInProgressSendMode">
-                <span class="sidebar-settings-label">{{ $t('settings.whenBusySendAs') }}</span>
-                <span class="sidebar-settings-value">{{ inProgressSendMode === 'steer' ? $t('composer.steer') : $t('composer.queue') }}</span>
+                <span class="sidebar-settings-label">{{ $t('When busy, send as') }}</span>
+                <span class="sidebar-settings-value">{{ inProgressSendMode === 'steer' ? $t('Steer') : $t('Queue') }}</span>
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.appearance" @click="cycleDarkMode">
-                <span class="sidebar-settings-label">{{ $t('settings.appearance') }}</span>
-                <span class="sidebar-settings-value">{{ darkMode === 'system' ? $t('settings.system') : darkMode === 'dark' ? $t('settings.dark') : $t('settings.light') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Appearance') }}</span>
+                <span class="sidebar-settings-value">{{ darkMode === 'system' ? $t('System') : darkMode === 'dark' ? $t('Dark') : $t('Light') }}</span>
               </button>
               <div class="sidebar-settings-row sidebar-settings-row--select" :title="SETTINGS_HELP.language">
-                <span class="sidebar-settings-label">{{ $t('settings.language') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Language') }}</span>
                 <select
                   class="sidebar-settings-provider-select"
                   :value="locale"
@@ -197,28 +197,28 @@
                 </select>
               </div>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.chatWidth" @click="cycleChatWidth">
-                <span class="sidebar-settings-label">{{ $t('settings.chatWidth') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Chat width') }}</span>
                 <span class="sidebar-settings-value">{{ chatWidthLabel }}</span>
               </button>
               <button class="sidebar-settings-row" type="button" :title="conversationStyleTooltip" @click="cycleConversationStyle">
-                <span class="sidebar-settings-label">{{ $t('settings.conversationStyle') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Conversation style') }}</span>
                 <span class="sidebar-settings-value">{{ conversationStyleLabel }}</span>
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationClickToToggle" @click="toggleDictationClickToToggle">
-                <span class="sidebar-settings-label">{{ $t('settings.clickToggleDictation') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Click to toggle dictation') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationClickToToggle }" />
               </button>
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.dictationAutoSend" @click="toggleDictationAutoSend">
-                <span class="sidebar-settings-label">{{ $t('settings.autoSendDictation') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Auto send dictation') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': dictationAutoSend }" />
               </button>
 
               <button class="sidebar-settings-row" type="button" :title="SETTINGS_HELP.githubTrendingProjects" @click="toggleGithubTrendingProjects">
-                <span class="sidebar-settings-label">{{ $t('settings.githubTrending') }}</span>
+                <span class="sidebar-settings-label">{{ $t('GitHub trending projects') }}</span>
                 <span class="sidebar-settings-toggle" :class="{ 'is-on': showGithubTrendingProjects }" />
               </button>
               <div class="sidebar-settings-row sidebar-settings-row--select" title="Choose the API provider for the Codex backend">
-                <span class="sidebar-settings-label">{{ $t('settings.provider') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Provider') }}</span>
                 <select
                   class="sidebar-settings-provider-select"
                   :value="selectedProvider"
@@ -371,7 +371,7 @@
                 </div>
               </div>
               <div class="sidebar-settings-row sidebar-settings-row--select" :title="SETTINGS_HELP.dictationLanguage">
-                <span class="sidebar-settings-label">{{ $t('settings.dictationLanguage') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Dictation language') }}</span>
                 <ComposerDropdown
                   class="sidebar-settings-language-dropdown"
                   :model-value="dictationLanguage"
@@ -384,7 +384,7 @@
                 />
               </div>
               <button class="sidebar-settings-row" type="button" aria-live="polite" @click="isTelegramConfigOpen = !isTelegramConfigOpen">
-                <span class="sidebar-settings-label">{{ $t('settings.telegram') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Telegram') }}</span>
                 <span class="sidebar-settings-value">{{ telegramStatusText }}</span>
               </button>
               <div v-if="isTelegramConfigOpen" class="sidebar-settings-telegram-panel">
@@ -427,7 +427,7 @@
                 </div>
               </div>
               <button class="sidebar-settings-row" type="button" @click="isConfigEditorOpen = true">
-                <span class="sidebar-settings-label">{{ $t('settings.configEditor') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Config Editor') }}</span>
                 <span class="sidebar-settings-value">config.toml</span>
               </button>
               <div
@@ -436,7 +436,7 @@
                 :data-state="threadContextBadgeState"
                 :title="threadContextTooltip"
               >
-                <span class="sidebar-settings-label">{{ $t('context.label') }}</span>
+                <span class="sidebar-settings-label">{{ $t('Context') }}</span>
                 <span class="sidebar-settings-context-value" :data-state="threadContextBadgeState">
                   {{ threadContextPrimaryText }}
                   <span class="sidebar-settings-context-meta">{{ threadContextSecondaryText }}</span>
@@ -457,7 +457,7 @@
             @click.stop="isSettingsOpen = !isSettingsOpen"
           >
             <IconTablerSettings class="sidebar-settings-icon" />
-            <span>{{ $t('common.settings') }}</span>
+            <span>{{ $t('Settings') }}</span>
             <span class="sidebar-settings-button-version">
               {{ worktreeName }} · v{{ appVersion }}
             </span>
@@ -486,8 +486,8 @@
               class="content-header-terminal-toggle"
               type="button"
               :aria-pressed="selectedThreadTerminalOpen"
-              :title="$t('terminal.toggle', { shortcut: terminalShortcutLabel })"
-              :aria-label="$t('terminal.toggleLabel')"
+              :title="$t('Toggle terminal ({shortcut})', { shortcut: terminalShortcutLabel })"
+              :aria-label="$t('Toggle terminal')"
               @click="toggleSelectedThreadTerminal"
             >
               <IconTablerTerminal class="content-header-terminal-toggle-icon" />
@@ -524,21 +524,21 @@
           <template v-else-if="isHomeRoute">
             <div class="content-grid content-grid-home">
               <div class="new-thread-empty">
-                <p class="new-thread-hero">{{ $t('home.letsBuild') }}</p>
+                <p class="new-thread-hero">{{ $t("Let's build") }}</p>
                 <ComposerDropdown class="new-thread-folder-dropdown" :model-value="newThreadCwd"
                   :options="newThreadFolderOptions" :placeholder="t('Choose folder')"
                   :enable-search="true"
                   :search-placeholder="t('Quick search project')"
                   :disabled="false" @update:model-value="onSelectNewThreadFolder" />
                 <p v-if="newThreadCwd" class="new-thread-folder-selected" :title="newThreadCwd">
-                  {{ $t('home.selectedFolder', { path: newThreadCwd }) }}
+                  {{ $t('Selected folder: {path}', { path: newThreadCwd }) }}
                 </p>
                 <div class="new-thread-folder-actions">
                   <button class="new-thread-folder-action new-thread-folder-action-primary" type="button" @click="onOpenExistingFolder">
-                    {{ $t('home.selectFolder') }}
+                    {{ $t('Select folder') }}
                   </button>
                   <button class="new-thread-folder-action" type="button" @click="onCreateProject">
-                    {{ $t('home.createProject') }}
+                    {{ $t('Create Project') }}
                   </button>
                 </div>
                 <Teleport to="body">
@@ -681,7 +681,7 @@
                     }}
                   </p>
                 </div>
-                <p class="new-thread-runtime-help" v-html="$t('home.runtimeDescription')">
+                <p class="new-thread-runtime-help" v-html="$t('Local project uses the selected folder directly. New worktree creates an isolated Git worktree before the first prompt.')">
                 </p>
                 <div
                   v-if="worktreeInitStatus.phase !== 'idle'"
@@ -862,6 +862,8 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 import { useRoute, useRouter } from 'vue-router'
 import DesktopLayout from './components/layout/DesktopLayout.vue'
 import SidebarThreadTree from './components/sidebar/SidebarThreadTree.vue'
@@ -879,7 +881,6 @@ import IconTablerTerminal from './components/icons/IconTablerTerminal.vue'
 import IconTablerX from './components/icons/IconTablerX.vue'
 import { useDesktopState } from './composables/useDesktopState'
 import { useMobile } from './composables/useMobile'
-import { useUiLanguage } from './composables/useUiLanguage'
 import {
   checkoutGitBranch,
   configureTelegramBot,
@@ -1263,10 +1264,10 @@ const isHomeRoute = computed(() => route.name === 'home')
 const isSkillsRoute = computed(() => route.name === 'skills')
 const isFilesRoute = computed(() => route.name === 'files')
 const contentTitle = computed(() => {
-  if (isSkillsRoute.value) return t('common.skills')
-  if (isFilesRoute.value) return t('fileManager.title')
-  if (isHomeRoute.value) return t('home.newThread')
-  return selectedThread.value?.title ?? t('home.newThread')
+  if (isSkillsRoute.value) return t('Skills')
+  if (isFilesRoute.value) return t('Files')
+  if (isHomeRoute.value) return t('New thread')
+  return selectedThread.value?.title ?? t('New thread')
 })
 const browserHostName =
   typeof window !== 'undefined'
@@ -1339,19 +1340,19 @@ function formatCompactTokenCount(value: number): string {
 
 function buildThreadContextTooltip(usage: UiThreadTokenUsage | null): string {
   if (!usage) {
-    return t('context.waitingEvents')
+    return t('Waiting for Codex thread/tokenUsage/updated events for this thread.')
   }
 
   const lines = [
-    t('context.currentUsage', { count: usage.currentContextTokens.toLocaleString() }),
-    t('context.cumulativeUsage', { count: usage.total.totalTokens.toLocaleString() }),
+    t('Current context usage: {count} tokens', { count: usage.currentContextTokens.toLocaleString() }),
+    t('Cumulative thread usage: {count} tokens', { count: usage.total.totalTokens.toLocaleString() }),
   ]
 
   if (typeof usage.modelContextWindow === 'number') {
-    lines.unshift(t('context.modelContextWindow', { count: usage.modelContextWindow.toLocaleString() }))
-    lines.push(t('context.remainingContext', { count: (usage.remainingContextTokens ?? 0).toLocaleString() }))
+    lines.unshift(t('Model context window: {count} tokens', { count: usage.modelContextWindow.toLocaleString() }))
+    lines.push(t('Remaining context: {count} tokens', { count: (usage.remainingContextTokens ?? 0).toLocaleString() }))
   } else {
-    lines.push(t('context.windowUnavailableTooltip'))
+    lines.push(t('Model context window is unavailable in the latest usage event.'))
   }
 
   return lines.join('\n')
@@ -1367,20 +1368,20 @@ const threadContextBadgeState = computed(() => {
 
 const threadContextPrimaryText = computed(() => {
   const usage = selectedThreadTokenUsage.value
-  if (!usage) return t('context.awaitingData')
+  if (!usage) return t('Awaiting data')
   if (typeof usage.remainingContextTokens === 'number') {
-    return t('context.tokensLeft', { count: formatCompactTokenCount(usage.remainingContextTokens) })
+    return t('{count} left', { count: formatCompactTokenCount(usage.remainingContextTokens) })
   }
-  return t('context.tokensUsed', { count: formatCompactTokenCount(usage.currentContextTokens) })
+  return t('{count} used', { count: formatCompactTokenCount(usage.currentContextTokens) })
 })
 
 const threadContextSecondaryText = computed(() => {
   const usage = selectedThreadTokenUsage.value
-  if (!usage) return t('context.updatesAfter')
+  if (!usage) return t('Updates after the next token usage event')
   if (typeof usage.modelContextWindow === 'number') {
-    return t('context.usedOfTotal', { used: formatCompactTokenCount(usage.currentContextTokens), total: formatCompactTokenCount(usage.modelContextWindow) })
+    return t('{used} used / {total}', { used: formatCompactTokenCount(usage.currentContextTokens), total: formatCompactTokenCount(usage.modelContextWindow) })
   }
-  return t('context.windowUnavailable')
+  return t('Window size unavailable')
 })
 
 const threadContextTooltip = computed(() => buildThreadContextTooltip(selectedThreadTokenUsage.value))
@@ -1513,9 +1514,9 @@ const githubTipsScopeOptions = computed<Array<{ value: GithubTipsScope; label: s
 ])
 const chatWidthLabel = computed(() => {
   const mode = chatWidth.value
-  if (mode === 'standard') return t('settings.standard')
-  if (mode === 'wide') return t('settings.wide')
-  return t('settings.extraWide')
+  if (mode === 'standard') return t('Standard')
+  if (mode === 'wide') return t('Wide')
+  return t('Extra wide')
 })
 const terminalShortcutLabel = computed(() => {
   if (typeof navigator !== 'undefined' && /mac|iphone|ipad|ipod/i.test(navigator.platform)) {
@@ -1532,8 +1533,8 @@ const contentStyle = computed(() => {
   }
 })
 const telegramStatusText = computed(() => {
-  if (!telegramStatus.value.configured) return t('settings.notConfigured')
-  const base = telegramStatus.value.active ? 'Online' : t('settings.configured')
+  if (!telegramStatus.value.configured) return t('Not configured')
+  const base = telegramStatus.value.active ? 'Online' : t('Configured')
   const allowlist = telegramStatus.value.allowAllUsers
     ? t('allow all users')
     : `${telegramStatus.value.allowedUsers} ${t('allowed user(s)')}`
@@ -1785,16 +1786,16 @@ function isRemoveVisible(account: UiAccountEntry): boolean {
 }
 
 function getAccountSwitchLabel(account: UiAccountEntry): string {
-  if (isAccountUnavailable(account)) return t('settings.unavailable')
-  if (account.isActive) return t('settings.active')
-  if (isSwitchingAccounts.value) return t('settings.switching')
-  return t('settings.switch_')
+  if (isAccountUnavailable(account)) return t('Unavailable')
+  if (account.isActive) return t('Active')
+  if (isSwitchingAccounts.value) return t('Switching\u2026')
+  return t('Switch')
 }
 
 function getAccountRemoveLabel(account: UiAccountEntry): string {
-  if (removingAccountId.value === account.accountId) return t('settings.removing')
-  if (isRemoveConfirmationActive(account)) return t('settings.removeConfirm')
-  return t('settings.remove')
+  if (removingAccountId.value === account.accountId) return t('Removing\u2026')
+  if (isRemoveConfirmationActive(account)) return t('Confirm remove?')
+  return t('Remove')
 }
 
 function onAccountCardPointerEnter(accountId: string): void {
@@ -2870,7 +2871,7 @@ function cycleDarkMode(): void {
 }
 
 const LANGUAGE_KEY = 'codex-web-local.language.v1'
-const { locale, t } = useI18n()
+const { locale } = useI18n()
 
 function onLanguageChange(value: string): void {
   locale.value = value
@@ -2896,11 +2897,11 @@ function cycleConversationStyle(): void {
 }
 
 const conversationStyleLabel = computed(() =>
-  conversationStyle.value === 'clean' ? t('settings.conversationStyleClean') : t('settings.conversationStyleDev'),
+  conversationStyle.value === 'clean' ? t('Clean') : t('Developer'),
 )
 
 const conversationStyleTooltip = computed(() =>
-  conversationStyle.value === 'clean' ? t('settings.conversationStyleCleanDesc') : t('settings.conversationStyleDevDesc'),
+  conversationStyle.value === 'clean' ? t('Only final replies are shown; tool calls and thinking are collapsed.') : t('All tool calls, commands, and file changes are shown inline.'),
 )
 
 function toggleDictationClickToToggle(): void {
diff --git a/src/components/content/AccountMenu.vue b/src/components/content/AccountMenu.vue
index 8839ed88..685078d2 100644
--- a/src/components/content/AccountMenu.vue
+++ b/src/components/content/AccountMenu.vue
@@ -7,13 +7,13 @@
 
     <div v-if="isOpen" class="account-menu-panel">
       <div class="account-menu-header">
-        <p class="account-menu-title">{{ $t('account.accounts') }}</p>
+        <p class="account-menu-title">{{ $t('Accounts') }}</p>
       </div>
 
       <p v-if="error" class="account-menu-error">{{ error }}</p>
 
       <p v-if="accounts.length === 0" class="account-menu-empty">
-        {{ $t('account.noAccountsYet') }}
+        {{ $t('No saved accounts yet. Run `codex login`, then click reload.') }}
       </p>
 
       <div v-else class="account-menu-list">
@@ -24,7 +24,7 @@
           :class="{ 'is-active': account.isActive }"
         >
           <div class="account-menu-item-main">
-            <p class="account-menu-item-email">{{ account.email || $t('account.accountFallback') }}</p>
+            <p class="account-menu-item-email">{{ account.email || $t('Account') }}</p>
             <p class="account-menu-item-meta">
               {{ formatMeta(account) }}
             </p>
@@ -35,7 +35,7 @@
             :disabled="isSwitching || account.isActive"
             @click="emit('switch', account.accountId)"
           >
-            {{ account.isActive ? $t('account.active') : isSwitching ? $t('account.switching') : $t('account.switch_') }}
+            {{ account.isActive ? $t('Active') : isSwitching ? $t('Switching\u2026') : $t('Switch') }}
           </button>
         </article>
       </div>
@@ -65,7 +65,7 @@ const isOpen = ref(false)
 
 const activeLabel = computed(() => {
   const active = props.accounts.find((account) => account.isActive) ?? null
-  if (!active) return t('account.accounts')
+  if (!active) return t('Accounts')
   return active.email || shortAccountId(active.accountId)
 })
 
diff --git a/src/components/content/ComposerDropdown.vue b/src/components/content/ComposerDropdown.vue
index a0ffa567..73fafc91 100644
--- a/src/components/content/ComposerDropdown.vue
+++ b/src/components/content/ComposerDropdown.vue
@@ -93,8 +93,8 @@ const enableSearch = computed(() => props.enableSearch === true)
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-const searchPlaceholderText = computed(() => props.searchPlaceholder?.trim() || t('composer.searchQuickProjects'))
-const emptyText = computed(() => props.emptyLabel?.trim() || t('common.noResults'))
+const searchPlaceholderText = computed(() => props.searchPlaceholder?.trim() || t('Quick search projects'))
+const emptyText = computed(() => props.emptyLabel?.trim() || t('No results'))
 const filteredOptions = computed(() => {
   const query = searchQuery.value.trim().toLowerCase()
   if (!query) return props.options
diff --git a/src/components/content/ComposerMcpDropdown.vue b/src/components/content/ComposerMcpDropdown.vue
index aea3203c..052e66f1 100644
--- a/src/components/content/ComposerMcpDropdown.vue
+++ b/src/components/content/ComposerMcpDropdown.vue
@@ -16,8 +16,8 @@
       class="mcp-dropdown-menu"
       :class="{ 'mcp-dropdown-menu-up': openDirection === 'up' }"
     >
-      <div v-if="isLoading" class="mcp-dropdown-loading">{{ $t('common.loading') }}...</div>
-      <div v-else-if="servers.length === 0" class="mcp-dropdown-empty">{{ $t('composer.noMcpServers') }}</div>
+      <div v-if="isLoading" class="mcp-dropdown-loading">{{ $t('Loading') }}...</div>
+      <div v-else-if="servers.length === 0" class="mcp-dropdown-empty">{{ $t('No MCP servers configured') }}</div>
       <template v-else>
         <label
           v-for="server in servers"
diff --git a/src/components/content/ComposerRuntimeDropdown.vue b/src/components/content/ComposerRuntimeDropdown.vue
index f3c9bc83..723b0c12 100644
--- a/src/components/content/ComposerRuntimeDropdown.vue
+++ b/src/components/content/ComposerRuntimeDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="runtime-toggle" role="radiogroup" :aria-label="$t('composer.continueIn')">
+  <div class="runtime-toggle" role="radiogroup" :aria-label="$t('Continue in')">
     <button
       v-for="option in options"
       :key="option.value"
@@ -30,15 +30,13 @@ defineProps<{
 const emit = defineEmits<{
   'update:modelValue': [value: RuntimeMode]
 }>()
-const { t } = useUiLanguage()
-
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
 const options = computed(() => [
-  { value: 'local' as const, label: t('composer.runtimeLocal'), icon: IconTablerFolder },
-  { value: 'worktree' as const, label: t('composer.runtimeWorktree'), icon: IconTablerGitFork },
+  { value: 'local' as const, label: t('Local project'), icon: IconTablerFolder },
+  { value: 'worktree' as const, label: t('New worktree'), icon: IconTablerGitFork },
 ])
 
 function onSelect(value: RuntimeMode): void {
diff --git a/src/components/content/ComposerSearchDropdown.vue b/src/components/content/ComposerSearchDropdown.vue
index 3d7495e2..c7e0601c 100644
--- a/src/components/content/ComposerSearchDropdown.vue
+++ b/src/components/content/ComposerSearchDropdown.vue
@@ -50,7 +50,7 @@
           </button>
         </li>
       </ul>
-      <div v-else class="search-dropdown-empty">{{ $t('common.noResults') }}</div>
+      <div v-else class="search-dropdown-empty">{{ $t('No results') }}</div>
     </div>
   </div>
 </template>
@@ -86,18 +86,16 @@ const searchRef = ref<HTMLInputElement | null>(null)
 const isOpen = ref(false)
 const searchQuery = ref('')
 const highlightIdx = ref(0)
-const { t } = useUiLanguage()
-
 const openDirection = computed(() => props.openDirection ?? 'down')
 const selected = computed(() => new Set(props.selectedValues))
 
 const displayLabel = computed(() => {
-  if (props.selectedValues.length === 0) return props.placeholder || t('composer.selectDefault')
+  if (props.selectedValues.length === 0) return props.placeholder || t('Select...')
   if (props.selectedValues.length === 1) {
     const opt = props.options.find((o) => o.value === props.selectedValues[0])
-    return opt?.label || props.placeholder || t('composer.selectDefault')
+    return opt?.label || props.placeholder || t('Select...')
   }
-  return t('composer.nSelected', { count: props.selectedValues.length })
+  return t('{count} selected', { count: props.selectedValues.length })
 })
 
 const filtered = computed(() => {
diff --git a/src/components/content/ComposerSkillPicker.vue b/src/components/content/ComposerSkillPicker.vue
index 2bf32f2b..4075221a 100644
--- a/src/components/content/ComposerSkillPicker.vue
+++ b/src/components/content/ComposerSkillPicker.vue
@@ -6,7 +6,7 @@
         v-model="query"
         class="skill-picker-search"
         type="text"
-        :placeholder="$t('composer.searchSkills')"
+        :placeholder="$t('Search skills...')"
         @keydown.escape.prevent="$emit('close')"
         @keydown.enter.prevent="selectHighlighted"
         @keydown.arrow-down.prevent="moveHighlight(1)"
@@ -27,14 +27,15 @@
         </button>
       </li>
     </ul>
-    <div v-else class="skill-picker-empty">{{ $t('composer.noSkillsFound') }}</div>
+    <div v-else class="skill-picker-empty">{{ $t('No skills found') }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
-import { useUiLanguage } from '../../composables/useUiLanguage'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 export type SkillOption = {
   name: string
   description: string
@@ -57,8 +58,6 @@ const rootRef = ref<HTMLElement | null>(null)
 const searchInputRef = ref<HTMLInputElement | null>(null)
 const query = ref('')
 const highlightIndex = ref(0)
-const { t } = useUiLanguage()
-
 const filtered = computed(() => {
   const q = query.value.toLowerCase().trim()
   if (!q) return props.skills
diff --git a/src/components/content/ConfigEditorModal.vue b/src/components/content/ConfigEditorModal.vue
index 0e2fb1bc..131cef5f 100644
--- a/src/components/content/ConfigEditorModal.vue
+++ b/src/components/content/ConfigEditorModal.vue
@@ -4,7 +4,7 @@
       <div class="cem-panel">
         <!-- Header -->
         <div class="cem-header">
-          <h3 class="cem-title">{{ $t('settings.configEditor') }}</h3>
+          <h3 class="cem-title">{{ $t('Config Editor') }}</h3>
           <button class="cem-close" type="button" aria-label="Close" @click="$emit('close')">
             <IconTablerX class="cem-close-icon" />
           </button>
@@ -13,7 +13,7 @@
         <!-- Body -->
         <div class="cem-body">
           <template v-if="isLoading">
-            <div class="cem-loading">{{ $t('common.loading') }}</div>
+            <div class="cem-loading">{{ $t('Loading') }}</div>
           </template>
           <template v-else>
             <span v-if="filePath" class="cem-filepath">{{ filePath }}</span>
@@ -34,7 +34,7 @@
           </span>
           <div class="cem-actions">
             <button class="cem-btn cem-btn-secondary" type="button" @click="$emit('close')">
-              {{ $t('common.cancel') }}
+              {{ $t('Cancel') }}
             </button>
             <button
               class="cem-btn cem-btn-primary"
@@ -42,7 +42,7 @@
               :disabled="isSaving || isLoading"
               @click="onSave"
             >
-              {{ isSaving ? $t('settings.saving') : $t('settings.save') }}
+              {{ isSaving ? $t('Saving\u2026') : $t('Save') }}
             </button>
           </div>
         </div>
@@ -106,10 +106,10 @@ async function onSave(): Promise<void> {
     })
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
     feedbackOk.value = true
-    feedback.value = t('settings.configSaved')
+    feedback.value = t('Config saved successfully')
   } catch {
     feedbackOk.value = false
-    feedback.value = t('settings.configSaveError')
+    feedback.value = t('Failed to save config')
   } finally {
     isSaving.value = false
   }
diff --git a/src/components/content/FileManager.vue b/src/components/content/FileManager.vue
index 36983257..4041467e 100644
--- a/src/components/content/FileManager.vue
+++ b/src/components/content/FileManager.vue
@@ -2,7 +2,7 @@
   <div class="fm-root">
     <!-- Toolbar -->
     <div class="fm-toolbar">
-      <button class="fm-toolbar-btn" type="button" :disabled="!parentPath" @click="navigateUp" :title="$t('fileManager.goUp')">
+      <button class="fm-toolbar-btn" type="button" :disabled="!parentPath" @click="navigateUp" :title="$t('Go up one level')">
         <IconTablerChevronLeft class="fm-toolbar-icon" />
       </button>
       <div class="fm-breadcrumb" :title="currentPath">
@@ -12,10 +12,10 @@
         </template>
       </div>
       <div class="fm-toolbar-actions">
-        <button class="fm-toolbar-btn" type="button" @click="onRefresh" :title="$t('common.refresh')">↻</button>
-        <button class="fm-toolbar-btn" type="button" @click.stop="showNewMenu = !showNewMenu" :title="$t('fileManager.newItem')">+</button>
-        <button class="fm-toolbar-btn" type="button" @click="triggerUpload" :title="$t('fileManager.uploadFiles')">↑</button>
-        <button class="fm-toolbar-btn" type="button" @click="triggerFolderUpload" :title="$t('fileManager.uploadFolder')">
+        <button class="fm-toolbar-btn" type="button" @click="onRefresh" :title="$t('Refresh')">↻</button>
+        <button class="fm-toolbar-btn" type="button" @click.stop="showNewMenu = !showNewMenu" :title="$t('New file or folder')">+</button>
+        <button class="fm-toolbar-btn" type="button" @click="triggerUpload" :title="$t('Upload files')">↑</button>
+        <button class="fm-toolbar-btn" type="button" @click="triggerFolderUpload" :title="$t('Upload folder')">
           <IconFolder class="fm-toolbar-icon" />
         </button>
       </div>
@@ -23,8 +23,8 @@
 
     <!-- New item menu -->
     <div v-if="showNewMenu" class="fm-new-menu" @click.stop>
-      <button class="fm-new-menu-item" type="button" @click="startCreateFile">{{ $t('fileManager.newFile') }}</button>
-      <button class="fm-new-menu-item" type="button" @click="startCreateFolder">{{ $t('fileManager.newFolder') }}</button>
+      <button class="fm-new-menu-item" type="button" @click="startCreateFile">{{ $t('New file') }}</button>
+      <button class="fm-new-menu-item" type="button" @click="startCreateFolder">{{ $t('New folder') }}</button>
     </div>
 
     <!-- Inline create input -->
@@ -35,7 +35,7 @@
         v-model="createName"
         class="fm-create-input"
         type="text"
-        :placeholder="createMode === 'file' ? $t('fileManager.fileNamePlaceholder') : $t('fileManager.folderNamePlaceholder')"
+        :placeholder="createMode === 'file' ? $t('File name...') : $t('Folder name...')"
         @keydown.enter="confirmCreate"
         @keydown.escape="cancelCreate"
       />
@@ -44,13 +44,13 @@
     </div>
 
     <!-- Loading -->
-    <div v-if="isLoading" class="fm-loading">{{ $t('common.loading') }}...</div>
+    <div v-if="isLoading" class="fm-loading">{{ $t('Loading') }}...</div>
 
     <!-- Error -->
     <div v-if="error" class="fm-error">{{ error }}</div>
 
     <!-- Empty -->
-    <div v-if="!isLoading && !error && entries.length === 0" class="fm-empty">{{ $t('fileManager.emptyFolder') }}</div>
+    <div v-if="!isLoading && !error && entries.length === 0" class="fm-empty">{{ $t('Empty folder') }}</div>
 
     <!-- File list -->
     <div v-if="!isLoading && entries.length > 0" class="fm-list">
@@ -90,16 +90,16 @@
         @click.stop
       >
         <button v-if="!contextMenu.entry.isDirectory" class="fm-context-item" type="button" @click="previewFromContext(contextMenu.entry)">
-          {{ $t('filePreview.preview') }}
+          {{ $t('Preview') }}
         </button>
         <button v-if="!contextMenu.entry.isDirectory" class="fm-context-item" type="button" @click="downloadEntry(contextMenu.entry)">
-          {{ $t('fileManager.download') }}
+          {{ $t('Download') }}
         </button>
         <button class="fm-context-item" type="button" @click="startRename(contextMenu.entry)">
-          {{ $t('home.rename') }}
+          {{ $t('Rename') }}
         </button>
         <button class="fm-context-item fm-context-item-danger" type="button" @click="deleteEntry(contextMenu.entry)">
-          {{ $t('home.delete') }}
+          {{ $t('Delete') }}
         </button>
       </div>
     </Teleport>
@@ -189,11 +189,11 @@ async function extractApiError(resp: Response, fallbackKey: string): Promise<str
     const data = (await resp.json()) as { error?: string }
     if (data.error?.trim()) {
       // Map known server errors to i18n
-      if (data.error.includes('outside allowed workspace')) return t('fileManager.outsideWorkspace')
-      if (data.error.includes('absolute')) return t('fileManager.invalidPath')
-      if (data.error.includes('not a directory')) return t('fileManager.notADirectory')
-      if (data.error.includes('not a file')) return t('fileManager.notAFile')
-      if (data.error.includes('not found')) return t('fileManager.notFound')
+      if (data.error.includes('outside allowed workspace')) return t('Path is outside the allowed workspace.')
+      if (data.error.includes('absolute')) return t('Invalid path.')
+      if (data.error.includes('not a directory')) return t('Path is not a directory.')
+      if (data.error.includes('not a file')) return t('Path is not a file.')
+      if (data.error.includes('not found')) return t('File or folder not found.')
       return data.error
     }
   } catch { /* ignore parse failure */ }
@@ -279,7 +279,7 @@ async function fetchEntries(dirPath: string): Promise<void> {
     parentPath.value = data.parentPath
     entries.value = data.entries
   } catch (err) {
-    error.value = err instanceof Error ? err.message : t('fileManager.loadError')
+    error.value = err instanceof Error ? err.message : t('Failed to load directory.')
     entries.value = []
   } finally {
     isLoading.value = false
@@ -363,7 +363,7 @@ async function confirmCreate(): Promise<void> {
     cancelCreate()
     void fetchEntries(currentPath.value)
   } catch (err) {
-    error.value = err instanceof Error ? err.message : t('fileManager.createError')
+    error.value = err instanceof Error ? err.message : t('Failed to create item.')
   }
 }
 
@@ -402,7 +402,7 @@ async function confirmRename(entry: FileEntry): Promise<void> {
     cancelRename()
     void fetchEntries(currentPath.value)
   } catch (err) {
-    error.value = err instanceof Error ? err.message : t('fileManager.renameError')
+    error.value = err instanceof Error ? err.message : t('Failed to rename.')
     cancelRename()
   }
 }
@@ -420,7 +420,7 @@ async function deleteEntry(entry: FileEntry): Promise<void> {
     if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.deleteError'))
     void fetchEntries(currentPath.value)
   } catch (err) {
-    error.value = err instanceof Error ? err.message : t('fileManager.deleteError')
+    error.value = err instanceof Error ? err.message : t('Failed to delete.')
   }
 }
 
@@ -464,7 +464,7 @@ async function uploadFiles(files: FileList): Promise<void> {
     if (!resp.ok) throw new Error(await extractApiError(resp, 'fileManager.uploadError'))
     void fetchEntries(currentPath.value)
   } catch (err) {
-    error.value = err instanceof Error ? err.message : t('fileManager.uploadError')
+    error.value = err instanceof Error ? err.message : t('Upload failed.')
   }
 }
 
diff --git a/src/components/content/FileManagerPanel.vue b/src/components/content/FileManagerPanel.vue
index cff520fb..0febad94 100644
--- a/src/components/content/FileManagerPanel.vue
+++ b/src/components/content/FileManagerPanel.vue
@@ -2,8 +2,8 @@
   <div class="fmp-wrapper" :class="{ 'is-open': visible }" @transitionend="onTransitionEnd">
     <section v-if="showContent" class="fmp-root" @click.stop>
       <header class="fmp-header">
-        <h3 class="fmp-title">{{ $t('fileManager.title') }}</h3>
-        <button type="button" class="fmp-close" :aria-label="$t('common.close')" @click="$emit('close')">
+        <h3 class="fmp-title">{{ $t('Files') }}</h3>
+        <button type="button" class="fmp-close" :aria-label="$t('Close')" @click="$emit('close')">
           <IconTablerX class="fmp-close-icon" />
         </button>
       </header>
diff --git a/src/components/content/FilePreviewModal.vue b/src/components/content/FilePreviewModal.vue
index ec32bf5e..40abc32f 100644
--- a/src/components/content/FilePreviewModal.vue
+++ b/src/components/content/FilePreviewModal.vue
@@ -6,16 +6,16 @@
           <span class="fp-filename" :title="entry.path">{{ entry.name }}</span>
           <span v-if="fileSize" class="fp-size">{{ fileSize }}</span>
           <div class="fp-actions">
-            <button type="button" class="fp-action-btn" @click="downloadFile" :title="t('fileManager.download')">
+            <button type="button" class="fp-action-btn" @click="downloadFile" :title="t('Download')">
               <IconDownload class="fp-action-icon" />
             </button>
-            <button type="button" class="fp-action-btn" @click="close" :aria-label="t('common.close')">
+            <button type="button" class="fp-action-btn" @click="close" :aria-label="t('Close')">
               <IconX class="fp-action-icon" />
             </button>
           </div>
         </header>
         <div class="fp-body">
-          <div v-if="isLoading" class="fp-status">{{ t('common.loading') }}…</div>
+          <div v-if="isLoading" class="fp-status">{{ t('Loading') }}…</div>
           <div v-else-if="error" class="fp-error">{{ error }}</div>
 
           <!-- Office HTML preview (sandboxed: scripts allowed but no same-origin access to parent) -->
@@ -23,7 +23,7 @@
 
           <!-- Image -->
           <div v-else-if="previewType === 'image'" class="fp-image-wrap">
-            <img class="fp-image" :src="serveUrl" :alt="entry.name" @error="error = t('filePreview.loadFailed')" />
+            <img class="fp-image" :src="serveUrl" :alt="entry.name" @error="error = t('Failed to load file preview.')" />
           </div>
 
           <!-- PDF -->
@@ -49,9 +49,9 @@
           <pre v-else-if="previewType === 'text'" class="fp-text">{{ textContent }}</pre>
 
           <!-- Unsupported -->
-          <div v-else class="fp-status fp-unsupported">{{ t('filePreview.unsupported') }}</div>
+          <div v-else class="fp-status fp-unsupported">{{ t('Preview is not available for this file type.') }}</div>
         </div>
-        <div v-if="isTruncated" class="fp-truncated">{{ t('filePreview.truncated') }}</div>
+        <div v-if="isTruncated" class="fp-truncated">{{ t('File is too large — showing first 1 MB only.') }}</div>
       </div>
     </div>
   </Teleport>
@@ -151,12 +151,12 @@ const fileSize = computed(() => {
 
 /** Map server error strings to i18n keys. */
 function mapServerError(msg: string): string {
-  if (msg.includes('officecli not found')) return t('filePreview.officeNotInstalled')
-  if (msg.includes('not a file')) return t('fileManager.notAFile')
-  if (msg.includes('not found') || msg.includes('Not found')) return t('fileManager.notFound')
-  if (msg.includes('absolute')) return t('fileManager.invalidPath')
-  if (msg.includes('not supported for preview')) return t('filePreview.unsupported')
-  if (msg.includes('Unexpected') || msg.includes('failed') || msg.includes('Failed')) return t('filePreview.loadFailed')
+  if (msg.includes('officecli not found')) return t('OfficeCLI is not installed. Office file preview requires OfficeCLI.')
+  if (msg.includes('not a file')) return t('Path is not a file.')
+  if (msg.includes('not found') || msg.includes('Not found')) return t('File or folder not found.')
+  if (msg.includes('absolute')) return t('Invalid path.')
+  if (msg.includes('not supported for preview')) return t('Preview is not available for this file type.')
+  if (msg.includes('Unexpected') || msg.includes('failed') || msg.includes('Failed')) return t('Failed to load file preview.')
   return msg
 }
 
@@ -165,7 +165,7 @@ async function fetchText(): Promise<{ content: string; truncated: boolean }> {
   const resp = await fetch(`/codex-api/files/read?path=${encodeURIComponent(props.entry.path)}`)
   if (!resp.ok) {
     const data = await resp.json().catch(() => null) as { error?: string } | null
-    throw new Error(mapServerError(data?.error || t('filePreview.loadFailed')))
+    throw new Error(mapServerError(data?.error || t('Failed to load file preview.')))
   }
   const data = await resp.json() as { content: string; truncated: boolean; size: number }
   fileSizeBytes.value = data.size
@@ -189,7 +189,7 @@ async function loadPreview(): Promise<void> {
       const resp = await fetch(`/codex-api/files/office-preview?path=${encodeURIComponent(props.entry.path)}`)
       if (!resp.ok) {
         const data = await resp.json().catch(() => null) as { error?: string } | null
-        throw new Error(mapServerError(data?.error || t('filePreview.loadFailed')))
+        throw new Error(mapServerError(data?.error || t('Failed to load file preview.')))
       }
       officeHtml.value = await resp.text()
     } else if (type === 'markdown') {
@@ -211,7 +211,7 @@ async function loadPreview(): Promise<void> {
       textContent.value = data.content
     }
   } catch (err) {
-    error.value = err instanceof Error ? err.message : t('filePreview.loadFailed')
+    error.value = err instanceof Error ? err.message : t('Failed to load file preview.')
   } finally {
     isLoading.value = false
   }
diff --git a/src/components/content/QueuedMessages.vue b/src/components/content/QueuedMessages.vue
index fb0b1b28..ed45fe92 100644
--- a/src/components/content/QueuedMessages.vue
+++ b/src/components/content/QueuedMessages.vue
@@ -8,9 +8,9 @@
       </svg>
       <span class="queued-row-text">{{ getMessagePreview(msg) }}</span>
       <div class="queued-row-actions">
-        <button class="queued-row-edit" type="button" :title="$t('queue.editQueued')" @click="$emit('edit', msg.id)">{{ $t('queue.editButton') }}</button>
-        <button class="queued-row-steer" type="button" :title="$t('queue.steerNow')" @click="$emit('steer', msg.id)">{{ $t('queue.steerButton') }}</button>
-        <button class="queued-row-delete" type="button" :aria-label="$t('queue.deleteQueued')" :title="$t('queue.deleteQueued')" @click="$emit('delete', msg.id)">
+        <button class="queued-row-edit" type="button" :title="$t('Edit queued message')" @click="$emit('edit', msg.id)">{{ $t('Edit') }}</button>
+        <button class="queued-row-steer" type="button" :title="$t('Send now without interrupting work')" @click="$emit('steer', msg.id)">{{ $t('Steer') }}</button>
+        <button class="queued-row-delete" type="button" :aria-label="$t('Delete queued message')" :title="$t('Delete queued message')" @click="$emit('delete', msg.id)">
           <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true">
             <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M4 7h16M10 11v6M14 11v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
@@ -23,7 +23,9 @@
 </template>
 
 <script setup lang="ts">
-import { useUiLanguage } from '../../composables/useUiLanguage'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 type QueuedMessageRow = {
   id: string
@@ -43,8 +45,6 @@ defineEmits<{
   delete: [messageId: string]
 }>()
 
-const { t } = useUiLanguage()
-
 function getMessagePreview(message: QueuedMessageRow): string {
   const text = message.text.trim()
   if (text) return text
diff --git a/src/components/content/ReviewPane.vue b/src/components/content/ReviewPane.vue
index d6524a1e..66602611 100644
--- a/src/components/content/ReviewPane.vue
+++ b/src/components/content/ReviewPane.vue
@@ -2,7 +2,7 @@
   <section class="review-pane" :class="{ 'is-mobile': isMobile }" @click.stop>
     <header class="review-pane-header">
       <div class="review-pane-heading">
-        <p class="review-pane-eyebrow">{{ $t('review.eyebrow') }}</p>
+        <p class="review-pane-eyebrow">{{ $t('Review') }}</p>
         <p class="review-pane-title">{{ headerTitle }}</p>
       </div>
       <div class="review-pane-header-actions">
@@ -12,9 +12,9 @@
           class="review-pane-mobile-files-button"
           @click="isFileSheetOpen = true"
         >
-          {{ $t('common.files') }}
+          {{ $t('Files') }}
         </button>
-        <button type="button" class="review-pane-close" :aria-label="$t('review.closePane')" @click="$emit('close')">
+        <button type="button" class="review-pane-close" :aria-label="$t('Close review pane')" @click="$emit('close')">
           <IconTablerX class="icon-svg" />
         </button>
       </div>
@@ -38,7 +38,7 @@
 
       <div class="review-pane-toolbar-controls">
         <div class="review-pane-control-cluster">
-          <span class="review-pane-control-label">{{ $t('review.compare') }}</span>
+          <span class="review-pane-control-label">{{ $t('Compare') }}</span>
           <div class="review-pane-segmented">
             <button
               type="button"
@@ -46,7 +46,7 @@
               :data-active="activeScope === 'workspace'"
               @click="activeScope = 'workspace'"
             >
-              {{ $t('review.workspace') }}
+              {{ $t('Workspace') }}
             </button>
             <button
               type="button"
@@ -55,13 +55,13 @@
               :disabled="!snapshot?.baseBranch"
               @click="activeScope = 'baseBranch'"
             >
-              {{ $t('review.baseBranch') }}
+              {{ $t('Base branch') }}
             </button>
           </div>
         </div>
 
         <div v-if="activeScope === 'baseBranch' && snapshot?.baseBranchOptions.length" class="review-pane-control-cluster">
-          <span class="review-pane-control-label">{{ $t('review.branch') }}</span>
+          <span class="review-pane-control-label">{{ $t('Branch') }}</span>
           <label class="review-pane-branch-select-wrap">
             <select
               v-model="selectedBaseBranch"
@@ -79,7 +79,7 @@
         </div>
 
         <div v-if="activeScope === 'workspace'" class="review-pane-control-cluster">
-          <span class="review-pane-control-label">{{ $t('review.changes') }}</span>
+          <span class="review-pane-control-label">{{ $t('Changes') }}</span>
           <div class="review-pane-segmented">
             <button
               type="button"
@@ -87,7 +87,7 @@
               :data-active="workspaceView === 'unstaged'"
               @click="workspaceView = 'unstaged'"
             >
-              {{ $t('review.unstaged') }}
+              {{ $t('Unstaged') }}
             </button>
             <button
               type="button"
@@ -95,7 +95,7 @@
               :data-active="workspaceView === 'staged'"
               @click="workspaceView = 'staged'"
             >
-              {{ $t('review.staged') }}
+              {{ $t('Staged') }}
             </button>
           </div>
         </div>
@@ -108,10 +108,10 @@
           :disabled="!canRunReview || isRunningReview"
           @click="runReview"
         >
-          {{ isRunningReview ? $t('review.reviewing') : $t('review.runReview') }}
+          {{ isRunningReview ? $t('Reviewing\u2026') : $t('Run review') }}
         </button>
         <button type="button" class="review-pane-refresh" :disabled="isLoadingSnapshot" @click="reloadAll">
-          {{ $t('common.refresh') }}
+          {{ $t('Refresh') }}
         </button>
       </div>
     </div>
@@ -121,34 +121,34 @@
     </div>
 
     <div v-if="snapshot" class="review-pane-meta">
-      <span>{{ $t('review.filesCount', { count: snapshot.summary.fileCount }) }}</span>
+      <span>{{ $t('{count} files', { count: snapshot.summary.fileCount }) }}</span>
       <span class="review-pane-summary-pill review-pane-summary-pill-add">+{{ snapshot.summary.addedLineCount }}</span>
       <span class="review-pane-summary-pill review-pane-summary-pill-remove">-{{ snapshot.summary.removedLineCount }}</span>
       <span v-if="snapshot.headBranch">{{ snapshot.headBranch }}</span>
-      <span v-if="activeScope === 'baseBranch' && snapshot.baseBranch">{{ $t('review.vs', { branch: snapshot.baseBranch }) }}</span>
+      <span v-if="activeScope === 'baseBranch' && snapshot.baseBranch">{{ $t('vs {branch}', { branch: snapshot.baseBranch }) }}</span>
     </div>
 
     <div v-if="activeTab === 'changes'" class="review-pane-content">
       <template v-if="!snapshot">
         <div class="review-pane-empty">
-          <p class="review-pane-empty-title">{{ $t('review.loadingReviewState') }}</p>
+          <p class="review-pane-empty-title">{{ $t('Loading review state') }}</p>
         </div>
       </template>
 
       <template v-else-if="!snapshot.isGitRepo">
         <div class="review-pane-empty">
-          <p class="review-pane-empty-title">{{ $t('review.notGitRepo') }}</p>
-          <p class="review-pane-empty-text">{{ $t('review.notGitRepoDesc') }}</p>
+          <p class="review-pane-empty-title">{{ $t('This folder is not a Git repository') }}</p>
+          <p class="review-pane-empty-text">{{ $t('Initialize Git to review local changes and run Codex review.') }}</p>
           <button type="button" class="review-pane-primary-cta" :disabled="isInitializingGit" @click="initializeGit">
-            {{ isInitializingGit ? $t('review.initializing') : $t('review.initializeGit') }}
+            {{ isInitializingGit ? $t('Initializing\u2026') : $t('Initialize Git') }}
           </button>
         </div>
       </template>
 
       <template v-else-if="activeScope === 'baseBranch' && !snapshot.baseBranch">
         <div class="review-pane-empty">
-          <p class="review-pane-empty-title">{{ $t('review.baseBranchUnavailable') }}</p>
-          <p class="review-pane-empty-text">{{ $t('review.baseBranchUnavailableDesc') }}</p>
+          <p class="review-pane-empty-title">{{ $t('Base branch unavailable') }}</p>
+          <p class="review-pane-empty-text">{{ $t('Could not resolve `origin/HEAD`, `main`, or `master` for this repository.') }}</p>
         </div>
       </template>
 
@@ -167,9 +167,9 @@
         </div>
 
         <div v-if="!snapshot.files.length" class="review-pane-empty">
-          <p class="review-pane-empty-title">{{ $t('review.noChangesInScope') }}</p>
+          <p class="review-pane-empty-title">{{ $t('No changes in this scope') }}</p>
           <p class="review-pane-empty-text">
-            {{ activeScope === 'workspace' ? $t('review.workspaceClean') : $t('review.noMergeDiff') }}
+            {{ activeScope === 'workspace' ? $t('Your current workspace is clean.') : $t('No merge diff found against the base branch.') }}
           </p>
         </div>
 
@@ -221,7 +221,7 @@
             class="review-pane-resizer"
             role="separator"
             aria-orientation="vertical"
-            :aria-label="$t('review.resizeFileList')"
+            :aria-label="$t('Resize file list')"
             @pointerdown="onResizerPointerDown"
           ></div>
 
@@ -252,7 +252,7 @@
               </div>
 
               <div v-if="selectedFile.hunks.length === 0" class="review-pane-raw-diff">
-                <pre>{{ selectedFile.diff || $t('review.noUnifiedDiff') }}</pre>
+                <pre>{{ selectedFile.diff || $t('No unified diff available.') }}</pre>
               </div>
 
               <div v-else class="review-pane-hunks">
@@ -306,7 +306,7 @@
 
     <div v-else class="review-pane-findings">
       <div v-if="currentReviewResult?.summary" class="review-pane-summary-card">
-        <p class="review-pane-summary-title">{{ $t('review.summary') }}</p>
+        <p class="review-pane-summary-title">{{ $t('Summary') }}</p>
         <pre class="review-pane-summary-text">{{ currentReviewResult.summary }}</pre>
       </div>
 
@@ -327,9 +327,9 @@
       </div>
 
       <div v-else class="review-pane-empty">
-        <p class="review-pane-empty-title">{{ $t('review.noFindings') }}</p>
+        <p class="review-pane-empty-title">{{ $t('No structured findings yet') }}</p>
         <p class="review-pane-empty-text">
-          {{ currentReviewResult?.summary ? $t('review.noFindingsSummaryOnly') : $t('review.noFindingsRun') }}
+          {{ currentReviewResult?.summary ? $t('The latest review only returned summary text.') : $t('Run review to populate this pane.') }}
         </p>
       </div>
     </div>
@@ -343,7 +343,7 @@
         <div class="review-pane-sheet" @click.stop>
           <div class="review-pane-sheet-handle" aria-hidden="true"></div>
           <div class="review-pane-sheet-header">
-            <p class="review-pane-sheet-title">{{ $t('review.changedFiles') }}</p>
+            <p class="review-pane-sheet-title">{{ $t('Changed files') }}</p>
             <p class="review-pane-sheet-count">{{ snapshot.files.length }}</p>
           </div>
           <div class="review-pane-sheet-list">
@@ -406,7 +406,6 @@ import {
   type RpcNotification,
 } from '../../api/codexGateway'
 import { useMobile } from '../../composables/useMobile'
-import { useUiLanguage } from '../../composables/useUiLanguage'
 import type {
   UiReviewAction,
   UiReviewFinding,
@@ -456,8 +455,8 @@ let stopNotifications: (() => void) | null = null
 let stopResizeTracking: (() => void) | null = null
 
 const reviewTabs = computed(() => [
-  { value: 'changes' as const, label: t('review.tabChanges') },
-  { value: 'findings' as const, label: t('review.tabFindings') },
+  { value: 'changes' as const, label: t('Changes') },
+  { value: 'findings' as const, label: t('Findings') },
 ])
 
 type ReviewTreeFolderNode = {
@@ -500,11 +499,11 @@ const selectedFile = computed(() => snapshot.value?.files.find((file) => file.id
 const folderExpansionState = ref<Record<string, boolean>>({})
 
 const headerTitle = computed(() => {
-  if (!snapshot.value?.isGitRepo) return t('review.repositoryReview')
+  if (!snapshot.value?.isGitRepo) return t('Repository review')
   if (activeScope.value === 'workspace') {
-    return workspaceView.value === 'staged' ? t('review.stagedChanges') : t('review.workspaceChanges')
+    return workspaceView.value === 'staged' ? t('Staged changes') : t('Workspace changes')
   }
-  return snapshot.value?.baseBranch ? t('review.againstBranch', { branch: snapshot.value.baseBranch }) : t('review.baseBranch')
+  return snapshot.value?.baseBranch ? t('Against {branch}', { branch: snapshot.value.baseBranch }) : t('Base branch')
 })
 
 const canRunReview = computed(() => (
@@ -525,31 +524,31 @@ const showRowActions = computed(() => showBulkActions.value && !isApplyingAction
 
 const bulkActions = computed(() => {
   if (workspaceView.value === 'staged') {
-    return [{ value: 'unstage' as UiReviewAction, label: t('review.unstageAll') }]
+    return [{ value: 'unstage' as UiReviewAction, label: t('Unstage all') }]
   }
   return [
-    { value: 'stage' as UiReviewAction, label: t('review.stageAll') },
-    { value: 'revert' as UiReviewAction, label: t('review.revertAll') },
+    { value: 'stage' as UiReviewAction, label: t('Stage all') },
+    { value: 'revert' as UiReviewAction, label: t('Revert all') },
   ]
 })
 
 const fileActions = computed(() => {
   if (workspaceView.value === 'staged') {
-    return [{ value: 'unstage' as UiReviewAction, label: t('review.unstageFile') }]
+    return [{ value: 'unstage' as UiReviewAction, label: t('Unstage file') }]
   }
   return [
-    { value: 'stage' as UiReviewAction, label: t('review.stageFile') },
-    { value: 'revert' as UiReviewAction, label: t('review.revertFile') },
+    { value: 'stage' as UiReviewAction, label: t('Stage file') },
+    { value: 'revert' as UiReviewAction, label: t('Revert file') },
   ]
 })
 
 const hunkActions = computed(() => {
   if (workspaceView.value === 'staged') {
-    return [{ value: 'unstage' as UiReviewAction, label: t('review.unstageHunk') }]
+    return [{ value: 'unstage' as UiReviewAction, label: t('Unstage hunk') }]
   }
   return [
-    { value: 'stage' as UiReviewAction, label: t('review.stageHunk') },
-    { value: 'revert' as UiReviewAction, label: t('review.revertHunk') },
+    { value: 'stage' as UiReviewAction, label: t('Stage hunk') },
+    { value: 'revert' as UiReviewAction, label: t('Revert hunk') },
   ]
 })
 
@@ -760,10 +759,10 @@ function treeIndentStyle(depth: number): Record<string, string> {
 }
 
 function formatOperation(operation: string): string {
-  if (operation === 'add') return t('review.operationAdded')
-  if (operation === 'delete') return t('review.operationDeleted')
-  if (operation === 'rename') return t('review.operationRenamed')
-  return t('review.operationModified')
+  if (operation === 'add') return t('Added')
+  if (operation === 'delete') return t('Deleted')
+  if (operation === 'rename') return t('Renamed')
+  return t('Modified')
 }
 
 function bindHunkRef(hunkId: string, element: unknown): void {
@@ -907,8 +906,8 @@ async function runReview(): Promise<void> {
   if (!canRunReview.value || isRunningReview.value) return
   reviewError.value = ''
   reviewStatusLabel.value = activeScope.value === 'workspace'
-    ? t('review.reviewingChanges')
-    : t('review.reviewingAgainst', { branch: snapshot.value?.baseBranch ?? t('review.baseBranch') })
+    ? t('Reviewing current changes')
+    : t('Reviewing against {branch}', { branch: snapshot.value?.baseBranch ?? t('Base branch') })
   isRunningReview.value = true
   pendingReviewKey.value = reviewKey.value
 
diff --git a/src/components/content/SkillCard.vue b/src/components/content/SkillCard.vue
index eab83b96..cada34b7 100644
--- a/src/components/content/SkillCard.vue
+++ b/src/components/content/SkillCard.vue
@@ -18,8 +18,8 @@
       <div class="skill-card-info">
         <div class="skill-card-header">
           <span class="skill-card-name">{{ skill.displayName || skill.name }}</span>
-          <span v-if="skill.installed && skill.enabled === false" class="skill-card-badge-disabled">{{ $t('skills.disabled') }}</span>
-          <span v-else-if="skill.installed" class="skill-card-badge">{{ $t('skills.installed') }}</span>
+          <span v-if="skill.installed && skill.enabled === false" class="skill-card-badge-disabled">{{ $t('Disabled') }}</span>
+          <span v-else-if="skill.installed" class="skill-card-badge">{{ $t('Installed') }}</span>
         </div>
         <span class="skill-card-owner">{{ skill.owner }}</span>
       </div>
@@ -27,7 +27,7 @@
         v-if="skill.installed && skillDirPath"
         class="skill-card-browse"
         type="button"
-        :title="$t('skills.browseFiles')"
+        :title="$t('Browse files')"
         @click.stop="onBrowse"
       >
         <IconTablerFolder class="skill-card-browse-icon" />
@@ -40,7 +40,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useUiLanguage } from '../../composables/useUiLanguage'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 import IconTablerFolder from '../icons/IconTablerFolder.vue'
 
 const props = defineProps<{
@@ -59,8 +61,6 @@ const props = defineProps<{
 }>()
 
 defineEmits<{ select: [skill: unknown] }>()
-const { t } = useUiLanguage()
-
 const skillDirPath = computed(() => {
   const p = props.skill.path
   if (!p) return ''
diff --git a/src/components/content/SkillDetailModal.vue b/src/components/content/SkillDetailModal.vue
index c9973a93..90663c10 100644
--- a/src/components/content/SkillDetailModal.vue
+++ b/src/components/content/SkillDetailModal.vue
@@ -14,7 +14,7 @@
             <div class="sdm-title-col">
               <div class="sdm-title-row">
                 <h3 class="sdm-title">{{ skill.displayName || skill.name }}</h3>
-                <span v-if="skill.installed && !effectiveEnabled" class="sdm-badge-disabled">{{ $t('skills.disabled') }}</span>
+                <span v-if="skill.installed && !effectiveEnabled" class="sdm-badge-disabled">{{ $t('Disabled') }}</span>
               </div>
               <span class="sdm-owner">{{ skill.owner }}</span>
             </div>
@@ -27,10 +27,10 @@
         <div class="sdm-body">
           <p v-if="effectiveDescription" class="sdm-desc">{{ effectiveDescription }}</p>
 
-          <div v-if="isLoadingReadme" class="sdm-readme-loading">{{ $t('skills.loadingContents') }}</div>
+          <div v-if="isLoadingReadme" class="sdm-readme-loading">{{ $t('Loading skill contents...') }}</div>
           <div v-else-if="readmeContent" class="sdm-readme" v-html="renderedReadme"></div>
 
-          <a class="sdm-link" :href="skill.url" target="_blank" rel="noopener noreferrer">{{ $t('skills.viewOnGithub') }}</a>
+          <a class="sdm-link" :href="skill.url" target="_blank" rel="noopener noreferrer">{{ $t('View on GitHub') }}</a>
         </div>
 
         <div class="sdm-footer">
@@ -42,7 +42,7 @@
               :disabled="isActing"
               @click="onUninstall"
             >
-              {{ props.isUninstalling ? $t('skills.uninstalling') : $t('skills.uninstall') }}
+              {{ props.isUninstalling ? $t('Uninstalling...') : $t('Uninstall') }}
             </button>
             <button
               v-else
@@ -51,7 +51,7 @@
               :disabled="isActing"
               @click="onInstall"
             >
-              {{ props.isInstalling ? $t('skills.installing') : $t('skills.install') }}
+              {{ props.isInstalling ? $t('Installing...') : $t('Install') }}
             </button>
 
             <button
@@ -61,7 +61,7 @@
               :disabled="isActing"
               @click="onToggleEnabled"
             >
-              {{ effectiveEnabled ? $t('skills.disable') : $t('skills.enable') }}
+              {{ effectiveEnabled ? $t('Disable') : $t('Enable') }}
             </button>
 
             <button
@@ -80,7 +80,7 @@
               type="button"
               @click="onBrowseFiles"
             >
-              {{ $t('skills.browseFiles') }}
+              {{ $t('Browse files') }}
             </button>
           </div>
         </div>
@@ -91,7 +91,9 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useUiLanguage } from '../../composables/useUiLanguage'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 import IconTablerX from '../icons/IconTablerX.vue'
 
 export type HubSkill = {
@@ -126,8 +128,6 @@ const localEnabled = ref<boolean | null>(null)
 const localDescription = ref('')
 const readmeContent = ref('')
 const isLoadingReadme = ref(false)
-const { t } = useUiLanguage()
-
 const effectiveEnabled = computed(() => localEnabled.value ?? props.skill.enabled ?? true)
 const isActing = computed(() => (props.isInstalling === true) || (props.isUninstalling === true))
 const effectiveDescription = computed(() => localDescription.value || props.skill.description)
diff --git a/src/components/content/SkillsHub.vue b/src/components/content/SkillsHub.vue
index 9e83989a..51d30582 100644
--- a/src/components/content/SkillsHub.vue
+++ b/src/components/content/SkillsHub.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="skills-hub">
     <div class="skills-hub-header">
-      <h2 class="skills-hub-title">{{ $t('skills.hubTitle') }}</h2>
-      <p class="skills-hub-subtitle">{{ $t('skills.hubSubtitle') }}</p>
+      <h2 class="skills-hub-title">{{ $t('Skills Hub') }}</h2>
+      <p class="skills-hub-subtitle">{{ $t('Browse and discover skills from the OpenClaw community') }}</p>
     </div>
 
     <div class="skills-sync-panel">
       <div class="skills-sync-header">
-        <strong>{{ $t('skills.syncTitle') }}</strong>
+        <strong>{{ $t('Skills Sync (GitHub)') }}</strong>
         <a
           v-if="syncStatus.configured && githubRepoUrl"
           class="skills-sync-badge skills-sync-badge-link"
@@ -15,36 +15,36 @@
           target="_blank"
           rel="noopener noreferrer"
         >
-          {{ $t('skills.connected') }}: {{ syncStatus.repoOwner }}/{{ syncStatus.repoName }}
+          {{ $t('Connected') }}: {{ syncStatus.repoOwner }}/{{ syncStatus.repoName }}
         </a>
-        <span v-else-if="syncStatus.loggedIn" class="skills-sync-badge">{{ $t('skills.loggedInAs', { username: syncStatus.githubUsername }) }}</span>
-        <span v-else class="skills-sync-badge">{{ $t('skills.notConnected') }}</span>
+        <span v-else-if="syncStatus.loggedIn" class="skills-sync-badge">{{ $t('Logged in as {username}', { username: syncStatus.githubUsername }) }}</span>
+        <span v-else class="skills-sync-badge">{{ $t('Not connected') }}</span>
       </div>
       <div class="skills-sync-meta">
-        <span>{{ $t('skills.startup') }}: {{ syncStatus.startup.mode }}</span>
-        <span>{{ $t('review.branch') }}: {{ syncStatus.startup.branch }}</span>
-        <span>{{ $t('skills.actionLabel') }}: {{ syncStatus.startup.lastAction }}</span>
+        <span>{{ $t('Startup') }}: {{ syncStatus.startup.mode }}</span>
+        <span>{{ $t('Branch') }}: {{ syncStatus.startup.branch }}</span>
+        <span>{{ $t('Action') }}: {{ syncStatus.startup.lastAction }}</span>
       </div>
       <div v-if="syncStatus.startup.lastError" class="skills-sync-error">
         {{ syncStatus.startup.lastError }}
       </div>
       <div v-if="syncActionStatus" class="skills-sync-meta">
-        <span>{{ $t('skills.manualSync') }}: {{ syncActionStatus }}</span>
+        <span>{{ $t('Manual sync') }}: {{ syncActionStatus }}</span>
       </div>
       <div v-if="syncActionError" class="skills-sync-error">
         {{ syncActionError }}
       </div>
       <div v-if="deviceLogin" class="skills-sync-device">
-        <span>Open <a :href="deviceLogin.verification_uri" target="_blank" rel="noreferrer">{{ $t('skills.githubDeviceLogin') }}</a> and enter code:</span>
+        <span>Open <a :href="deviceLogin.verification_uri" target="_blank" rel="noreferrer">{{ $t('GitHub device login') }}</a> and enter code:</span>
         <code>{{ deviceLogin.user_code }}</code>
       </div>
       <div class="skills-sync-actions">
-        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubFirebaseLogin">{{ $t('skills.loginWithGithub') }}</button>
-        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubLogin">{{ $t('skills.deviceLogin') }}</button>
-        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="logoutGithub" :disabled="isSyncActionInFlight">{{ $t('skills.logoutGithub') }}</button>
-        <button class="skills-hub-sort" type="button" @click="startupSkillsSync" :disabled="isSyncActionInFlight">{{ isStartupSyncInFlight ? $t('skills.syncing') : $t('skills.startupSync') }}</button>
-        <button class="skills-hub-sort" type="button" @click="pullSkillsSync" :disabled="isSyncActionInFlight">{{ isPullInFlight ? $t('skills.pulling') : $t('skills.pull') }}</button>
-        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="pushSkillsSync" :disabled="!syncStatus.configured || isSyncActionInFlight">{{ isPushInFlight ? $t('skills.pushing') : $t('skills.push') }}</button>
+        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubFirebaseLogin">{{ $t('Login with GitHub') }}</button>
+        <button v-if="!syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="startGithubLogin">{{ $t('Device Login') }}</button>
+        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="logoutGithub" :disabled="isSyncActionInFlight">{{ $t('Logout GitHub') }}</button>
+        <button class="skills-hub-sort" type="button" @click="startupSkillsSync" :disabled="isSyncActionInFlight">{{ isStartupSyncInFlight ? $t('Syncing...') : $t('Startup Sync') }}</button>
+        <button class="skills-hub-sort" type="button" @click="pullSkillsSync" :disabled="isSyncActionInFlight">{{ isPullInFlight ? $t('Pulling...') : $t('Pull') }}</button>
+        <button v-if="syncStatus.loggedIn" class="skills-hub-sort" type="button" @click="pushSkillsSync" :disabled="!syncStatus.configured || isSyncActionInFlight">{{ isPushInFlight ? $t('Pushing...') : $t('Push') }}</button>
       </div>
     </div>
 
@@ -52,7 +52,7 @@
 
     <div v-if="filteredInstalled.length > 0" class="skills-hub-section">
       <button class="skills-hub-section-toggle" type="button" @click="isInstalledOpen = !isInstalledOpen">
-        <span class="skills-hub-section-title">{{ $t('skills.installedCount', { count: filteredInstalled.length }) }}</span>
+        <span class="skills-hub-section-title">{{ $t('Installed ({count})', { count: filteredInstalled.length }) }}</span>
         <IconTablerChevronRight class="skills-hub-section-chevron" :class="{ 'is-open': isInstalledOpen }" />
       </button>
       <div v-if="isInstalledOpen" class="skills-hub-grid">
@@ -73,11 +73,11 @@
           v-model="query"
           class="skills-hub-search"
           type="text"
-          :placeholder="$t('skills.searchPlaceholder')"
+          :placeholder="$t('Search skills... (e.g. flight, docker, react)')"
           @keyup.enter.prevent="onSearchSubmit"
         />
-        <button class="skills-hub-search-btn" type="button" @click="onSearchSubmit">{{ $t('common.search') }}</button>
-        <span v-if="totalCount > 0" class="skills-hub-count">{{ $t('skills.skillsCount', { count: totalCount }) }}</span>
+        <button class="skills-hub-search-btn" type="button" @click="onSearchSubmit">{{ $t('Search') }}</button>
+        <span v-if="totalCount > 0" class="skills-hub-count">{{ $t('{count} skills', { count: totalCount }) }}</span>
       </div>
       <button class="skills-hub-sort" type="button" @click="toggleSort">
         {{ sortLabel }}
@@ -85,7 +85,7 @@
     </div>
 
     <div class="skills-hub-section">
-      <div v-if="isLoading" class="skills-hub-loading">{{ $t('skills.loadingSkills') }}</div>
+      <div v-if="isLoading" class="skills-hub-loading">{{ $t('Loading skills...') }}</div>
       <div v-else-if="error" class="skills-hub-error">{{ error }}</div>
       <template v-else>
         <div v-if="browseSkills.length > 0" class="skills-hub-grid">
@@ -96,7 +96,7 @@
             @select="(skill) => openDetail(skill as HubSkill)"
           />
         </div>
-        <div v-else-if="activeQuery.trim()" class="skills-hub-empty">{{ $t('skills.noSkillsFound', { query: activeQuery }) }}</div>
+        <div v-else-if="activeQuery.trim()" class="skills-hub-empty">{{ $t('No skills found for "{query}"', { query: activeQuery }) }}</div>
       </template>
     </div>
 
@@ -122,8 +122,6 @@ import IconTablerChevronRight from '../icons/IconTablerChevronRight.vue'
 import SkillCard from './SkillCard.vue'
 import SkillDetailModal, { type HubSkill } from './SkillDetailModal.vue'
 import { useGithubSkillsSync } from '../../composables/useGithubSkillsSync'
-import { useUiLanguage } from '../../composables/useUiLanguage'
-
 const EMPTY_SKILL: HubSkill = { name: '', owner: '', description: '', url: '', installed: false }
 const SKILLS_HUB_CACHE_KEY = 'codex-web-local.skills-hub.cache.v1'
 type SkillsHubPayload = { data: HubSkill[]; installed?: HubSkill[]; total: number }
@@ -145,15 +143,13 @@ const actionSkillKey = ref('')
 const isInstallActionInFlight = ref(false)
 const isUninstallActionInFlight = ref(false)
 let toastTimer: ReturnType<typeof setTimeout> | null = null
-const { t } = useUiLanguage()
-
 const emit = defineEmits<{
   'skills-changed': []
   'try-item': [payload: { kind: 'skill'; name: string; displayName: string; skillPath?: string }]
 }>()
 
 const { t } = useI18n()
-const sortLabel = computed(() => sortMode.value === 'date' ? t('skills.newest') : t('skills.az'))
+const sortLabel = computed(() => sortMode.value === 'date' ? t('Newest') : t('A-Z'))
 const toastClass = computed(() => toast.value?.type === 'error' ? 'skills-hub-toast-error' : 'skills-hub-toast-success')
 const currentDetailSkillKey = computed(() => `${detailSkill.value.owner}/${detailSkill.value.name}`)
 const isDetailInstalling = computed(() =>
@@ -295,7 +291,7 @@ async function handleInstall(skill: HubSkill): Promise<void> {
     installedSkills.value = [...installedSkills.value, installed]
     browseSkills.value = browseSkills.value.filter((s) => s.name !== skill.name)
     detailSkill.value = installed
-    showToast(t('skills.skillInstalled', { name: skill.displayName || skill.name }))
+    showToast(t('{name} skill installed', { name: skill.displayName || skill.name }))
     isDetailOpen.value = false
     clearCache()
     emit('skills-changed')
@@ -321,7 +317,7 @@ async function handleUninstall(skill: HubSkill): Promise<void> {
     if (skill.owner !== 'local') {
       browseSkills.value = [...browseSkills.value, { ...skill, installed: false, path: undefined, enabled: undefined }]
     }
-    showToast(t('skills.skillUninstalled', { name: skill.displayName || skill.name }))
+    showToast(t('{name} skill uninstalled', { name: skill.displayName || skill.name }))
     isDetailOpen.value = false
     clearCache()
     emit('skills-changed')
@@ -341,7 +337,7 @@ async function handleToggleEnabled(skill: HubSkill, enabled: boolean): Promise<v
     })
     if (!resp.ok) throw new Error('Failed to update skill')
     await fetch('/codex-api/skills-sync/push', { method: 'POST' })
-    showToast(enabled ? t('skills.skillEnabled', { name: skill.displayName || skill.name }) : t('skills.skillDisabled', { name: skill.displayName || skill.name }))
+    showToast(enabled ? t('{name} skill enabled', { name: skill.displayName || skill.name }) : t('{name} skill disabled', { name: skill.displayName || skill.name }))
     await fetchSkills(activeQuery.value)
   } catch (e) {
     showToast(e instanceof Error ? e.message : 'Failed to update skill', 'error')
diff --git a/src/components/content/ThreadComposer.vue b/src/components/content/ThreadComposer.vue
index d054aaee..a45da61b 100644
--- a/src/components/content/ThreadComposer.vue
+++ b/src/components/content/ThreadComposer.vue
@@ -13,7 +13,7 @@
     >
       <div v-if="selectedImages.length > 0" class="thread-composer-attachments">
         <div v-for="image in selectedImages" :key="image.id" class="thread-composer-attachment">
-          <img class="thread-composer-attachment-image" :src="image.url" :alt="image.name || $t('composer.selectedImage')" />
+          <img class="thread-composer-attachment-image" :src="image.url" :alt="image.name || $t('Selected image')" />
           <button
             class="thread-composer-attachment-remove"
             type="button"
@@ -83,7 +83,7 @@
         @drop="onInputDrop"
       >
         <div v-if="isDragActive" class="thread-composer-drop-overlay" aria-hidden="true">
-          <span class="thread-composer-drop-overlay-copy">{{ $t('composer.dropImagesOrFiles') }}</span>
+          <span class="thread-composer-drop-overlay-copy">{{ $t('Drop images or files') }}</span>
         </div>
         <div v-if="isFileMentionOpen" class="thread-composer-file-mentions">
           <template v-if="fileMentionSuggestions.length > 0">
@@ -110,7 +110,7 @@
               </span>
             </button>
           </template>
-          <div v-else class="thread-composer-file-mention-empty">{{ $t('composer.noMatchingFiles') }}</div>
+          <div v-else class="thread-composer-file-mention-empty">{{ $t('No matching files') }}</div>
         </div>
         <textarea
           ref="inputRef"
@@ -140,7 +140,7 @@
           <button
             class="thread-composer-attach-trigger"
             type="button"
-            :aria-label="$t('composer.addPhotosFiles')"
+            :aria-label="$t('Add photos & files')"
             :disabled="isInteractionDisabled"
             @click="toggleAttachMenu"
           >
@@ -154,7 +154,7 @@
               :disabled="isInteractionDisabled"
               @click="triggerPhotoLibrary"
             >
-              {{ $t('composer.addPhotosFiles') }}
+              {{ $t('Add photos & files') }}
             </button>
             <button
               class="thread-composer-attach-item"
@@ -162,7 +162,7 @@
               :disabled="isInteractionDisabled"
               @click="triggerFolderPicker"
             >
-              {{ $t('composer.addFolder') }}
+              {{ $t('Add folder') }}
             </button>
             <button
               class="thread-composer-attach-item"
@@ -170,11 +170,11 @@
               :disabled="isInteractionDisabled"
               @click="triggerCameraCapture"
             >
-              {{ $t('composer.takePhoto') }}
+              {{ $t('Take photo') }}
             </button>
             <div class="thread-composer-attach-separator" />
             <div class="thread-composer-attach-mode">
-              <span class="thread-composer-attach-mode-label">{{ $t('composer.inProgressSend') }}</span>
+              <span class="thread-composer-attach-mode-label">{{ $t('In-progress send') }}</span>
               <div class="thread-composer-attach-mode-buttons">
                 <button
                   class="thread-composer-attach-mode-button"
@@ -183,7 +183,7 @@
                   :disabled="isInteractionDisabled"
                   @click="setActiveInProgressMode('steer')"
                 >
-                  {{ $t('composer.steer') }}
+                  {{ $t('Steer') }}
                 </button>
                 <button
                   class="thread-composer-attach-mode-button"
@@ -192,7 +192,7 @@
                   :disabled="isInteractionDisabled"
                   @click="setActiveInProgressMode('queue')"
                 >
-                  {{ $t('composer.queue') }}
+                  {{ $t('Queue') }}
                 </button>
               </div>
             </div>
@@ -208,7 +208,7 @@
               @click="onToggleSpeedMode"
             >
               <span class="thread-composer-attach-setting-copy">
-                <span class="thread-composer-attach-setting-label">{{ $t('composer.fastMode') }}</span>
+                <span class="thread-composer-attach-setting-label">{{ $t('Fast mode') }}</span>
                 <span class="thread-composer-attach-setting-description">{{ speedModeDescription }}</span>
               </span>
               <span
@@ -230,8 +230,8 @@
               @click="toggleCollaborationMode"
             >
               <span class="thread-composer-attach-setting-copy">
-                <span class="thread-composer-attach-setting-label">{{ $t('composer.planMode') }}</span>
-                <span class="thread-composer-attach-setting-description">{{ $t('composer.planModeDesc') }}</span>
+                <span class="thread-composer-attach-setting-label">{{ $t('Plan mode') }}</span>
+                <span class="thread-composer-attach-setting-description">{{ $t('Agent proposes a plan before acting') }}</span>
               </span>
               <span
                 class="thread-composer-attach-switch"
@@ -281,16 +281,6 @@
             :disabled="disabled || !activeThreadId || isTurnInProgress"
             @toggle="onSkillDropdownToggle"
           />
-
-          <ComposerDropdown
-            class="thread-composer-control"
-            :model-value="selectedReasoningEffort"
-            :options="reasoningOptions"
-            :placeholder="$t('composer.thinking')"
-            open-direction="up"
-            :disabled="disabled || !activeThreadId || isTurnInProgress"
-            @update:model-value="onReasoningEffortSelect"
-          />
         </template>
 
         <div
@@ -308,8 +298,8 @@
           <button
             class="thread-composer-files-btn"
             type="button"
-            :aria-label="$t('fileManager.title')"
-            :title="$t('fileManager.title')"
+            :aria-label="$t('Files')"
+            :title="$t('Files')"
             :disabled="isInteractionDisabled"
             @click="emit('toggle-file-manager')"
           >
@@ -342,8 +332,8 @@
             v-if="isTurnInProgress && !hasSubmitContent"
             class="thread-composer-stop"
             type="button"
-            :aria-label="isStopPending ? $t('composer.stopPending') : $t('composer.stop')"
-            :title="isStopPending ? $t('composer.stopPending') : $t('composer.stop')"
+            :aria-label="isStopPending ? $t('Saving thread before stop is available') : $t('Stop')"
+            :title="isStopPending ? $t('Saving thread before stop is available') : $t('Stop')"
             :disabled="disabled || !activeThreadId || isInterruptingTurn || isStopPending"
             @click="onInterrupt"
           >
@@ -355,8 +345,8 @@
             class="thread-composer-submit"
             :class="{ 'thread-composer-submit--queue': isTurnInProgress && activeInProgressMode === 'queue' }"
             type="button"
-            :aria-label="isTurnInProgress && activeInProgressMode === 'queue' ? $t('composer.queueMessage') : $t('composer.sendMessage')"
-            :title="isTurnInProgress ? $t('composer.sendAsMode', { mode: activeInProgressMode }) : $t('common.send')"
+            :aria-label="isTurnInProgress && activeInProgressMode === 'queue' ? $t('Queue message') : $t('Send message')"
+            :title="isTurnInProgress ? $t('Send as {mode}', { mode: activeInProgressMode }) : $t('Send')"
             :disabled="!canSubmit"
             @click="onSubmit(isTurnInProgress ? activeInProgressMode : 'steer')"
           >
@@ -411,7 +401,6 @@ import type {
 } from '../../types/codex'
 import { useDictation } from '../../composables/useDictation'
 import { useMobile } from '../../composables/useMobile'
-import { useUiLanguage } from '../../composables/useUiLanguage'
 import { searchComposerFiles, uploadFile, type ComposerFileSuggestion } from '../../api/codexGateway'
 import IconTablerArrowUp from '../icons/IconTablerArrowUp.vue'
 import IconTablerBolt from '../icons/IconTablerBolt.vue'
@@ -484,8 +473,6 @@ const emit = defineEmits<{
   'update:selected-speed-mode': [mode: SpeedMode]
   'toggle-file-manager': []
 }>()
-const { t } = useUiLanguage()
-
 type SelectedImage = {
   id: string
   name: string
@@ -544,21 +531,21 @@ const {
   },
   onEmpty: () => {
     dictationFeedback.value = props.dictationClickToToggle
-      ? t('composer.noSpeechClick')
-      : t('composer.noSpeechHold')
+      ? t('No speech detected. Click again after speaking.')
+      : t('No speech detected. Hold the mic and speak.')
   },
   onError: (error) => {
     if (error instanceof DOMException && error.name === 'NotAllowedError') {
-      dictationFeedback.value = t('composer.micDenied')
+      dictationFeedback.value = t('Microphone access was denied.')
       return
     }
     const msg = error instanceof Error ? error.message : ''
     if (msg.includes('No auth token')) {
-      dictationFeedback.value = t('composer.noAuthToken')
+      dictationFeedback.value = t('No auth token available for transcription.')
     } else if (msg.includes('Transcription failed')) {
-      dictationFeedback.value = t('composer.transcriptionFailed')
+      dictationFeedback.value = t('Transcription failed.')
     } else {
-      dictationFeedback.value = msg || t('composer.dictationFailed')
+      dictationFeedback.value = msg || t('Dictation failed.')
     }
   },
 })
@@ -586,12 +573,12 @@ const DRAFT_STORAGE_PREFIX = 'codex-web-local.thread-draft.v1.'
 let lastActiveThreadId = ''
 
 const reasoningOptions = computed<Array<{ value: ReasoningEffort; label: string }>>(() => [
-  { value: 'none', label: t('composer.reasoningNone') },
-  { value: 'minimal', label: t('composer.reasoningMinimal') },
-  { value: 'low', label: t('composer.reasoningLow') },
-  { value: 'medium', label: t('composer.reasoningMedium') },
-  { value: 'high', label: t('composer.reasoningHigh') },
-  { value: 'xhigh', label: t('composer.reasoningExtraHigh') },
+  { value: 'none', label: t('None') },
+  { value: 'minimal', label: t('Minimal') },
+  { value: 'low', label: t('Low') },
+  { value: 'medium', label: t('Medium') },
+  { value: 'high', label: t('High') },
+  { value: 'xhigh', label: t('Extra high') },
 ])
 function formatModelLabel(modelId: string): string {
   return modelId.trim().replace(/^gpt/i, 'GPT')
@@ -648,11 +635,11 @@ const isSpeedToggleDisabled = computed(() =>
 )
 const speedModeDescription = computed(() => {
   if (props.isUpdatingSpeedMode) {
-    return t('composer.fastModeSaving')
+    return t('Saving speed setting...')
   }
   return props.selectedSpeedMode === 'fast'
-    ? t('composer.fastModeDescOn')
-    : t('composer.fastModeDescOff')
+    ? t('About 1.5x faster, with credits used at 2x')
+    : t('Default speed with normal credit usage')
 })
 const inProgressMode = computed<'steer' | 'queue'>(() =>
   props.inProgressSubmitMode === 'steer' ? 'steer' : 'queue',
@@ -660,8 +647,8 @@ const inProgressMode = computed<'steer' | 'queue'>(() =>
 const activeInProgressMode = ref<'steer' | 'queue'>(inProgressMode.value)
 const isDictationRecording = computed(() => dictationState.value === 'recording')
 const dictationButtonLabel = computed(() => {
-  if (dictationState.value === 'recording') return t('composer.stopDictation')
-  return props.dictationClickToToggle ? t('composer.clickToDictate') : t('composer.holdToDictate')
+  if (dictationState.value === 'recording') return t('Stop dictation')
+  return props.dictationClickToToggle ? t('Click to dictate') : t('Hold to dictate')
 })
 const dictationErrorText = computed(() =>
   dictationState.value === 'idle' ? dictationFeedback.value.trim() : '',
@@ -698,10 +685,10 @@ const dictationDurationLabel = computed(() => {
 
 const placeholderText = computed(() =>
   !props.activeThreadId
-    ? t('composer.placeholderNoThread')
+    ? t('Select a thread to send a message')
     : isPlanModeWaitingForModel.value
-      ? t('composer.placeholderPlanMode')
-      : t('composer.placeholder'),
+      ? t('Loading models for plan mode...')
+      : t("Type a message... ({'@'} for files, / for skills)"),
 )
 const hasSubmitContent = computed(() =>
   draft.value.trim().length > 0 || selectedImages.value.length > 0 || fileAttachments.value.length > 0,
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index d183d706..e124b4de 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -1,12 +1,12 @@
 <template>
   <section class="conversation-root" @contextmenu.capture="onConversationContextMenu">
-    <p v-if="isLoading" class="conversation-loading">{{ $t('conversation.loadingMessages') }}</p>
+    <p v-if="isLoading" class="conversation-loading">{{ $t('Loading messages...') }}</p>
 
     <p
       v-else-if="messages.length === 0 && pendingRequests.length === 0 && !liveOverlay"
       class="conversation-empty"
     >
-      {{ $t('conversation.noMessages') }}
+      {{ $t('No messages in this thread yet.') }}
     </p>
 
     <ul v-else ref="conversationListRef" class="conversation-list" @scroll="onConversationScroll">
@@ -17,7 +17,7 @@
           :disabled="isLoadingMore"
           @click="loadMoreAbove"
         >
-          {{ isLoadingMore ? $t('conversation.loadingEarlier') : $t('conversation.loadEarlier') }}
+          {{ isLoadingMore ? $t('Loading\u2026') : $t('Load earlier messages') }}
         </button>
       </li>
       <template v-for="message in visibleMessages" :key="message.id">
@@ -32,8 +32,8 @@
           <div class="message-stack" data-role="system">
             <button type="button" class="cmd-row cmd-compact cmd-completed" :class="{ 'cmd-expanded': expandedReasoningIds.has(message.id) }" @click="toggleReasoningExpand(message)">
               <span class="cmd-chevron" :class="{ 'cmd-chevron-open': expandedReasoningIds.has(message.id) }">▶</span>
-              <code class="cmd-label">{{ $t('composer.thinking') }}</code>
-              <span class="cmd-status">{{ $t('conversation.cmdDone') }}{{ message.durationMs != null ? ` (${(message.durationMs / 1000).toFixed(1)}s)` : '' }}</span>
+              <code class="cmd-label">{{ $t('Thinking') }}</code>
+              <span class="cmd-status">{{ $t('Done') }}{{ message.durationMs != null ? ` (${(message.durationMs / 1000).toFixed(1)}s)` : '' }}</span>
             </button>
             <div class="cmd-output-wrap" :class="{ 'cmd-output-visible': expandedReasoningIds.has(message.id) }">
               <div class="cmd-output-inner">
@@ -94,7 +94,7 @@
                     @click="toggleCommandExpand(cmd)"
                   >
                     <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
-                    <code class="cmd-label">{{ cmd.commandExecution?.command || $t('conversation.command') }}</code>
+                    <code class="cmd-label">{{ cmd.commandExecution?.command || $t('(command)') }}</code>
                     <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
                   </button>
                   <div
@@ -105,7 +105,7 @@
                       <pre
                         class="cmd-output"
                         :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
-                        v-text="cmd.commandExecution?.aggregatedOutput || $t('conversation.noOutput')"
+                        v-text="cmd.commandExecution?.aggregatedOutput || $t('(no output)')"
                       ></pre>
                     </div>
                   </div>
@@ -126,7 +126,7 @@
                 @click="toggleCommandExpand(message)"
               >
                 <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(message) }">▶</span>
-                <code class="cmd-label">{{ message.commandExecution?.command || $t('conversation.command') }}</code>
+                <code class="cmd-label">{{ message.commandExecution?.command || $t('(command)') }}</code>
                 <span class="cmd-status">{{ commandStatusLabel(message) }}</span>
               </button>
               <div
@@ -137,7 +137,7 @@
                   <pre
                     class="cmd-output"
                     :class="{ 'cmd-output-condensed': isCommandOutputCondensed(message) }"
-                    v-text="message.commandExecution?.aggregatedOutput || $t('conversation.noOutput')"
+                    v-text="message.commandExecution?.aggregatedOutput || $t('(no output)')"
                   ></pre>
                 </div>
               </div>
@@ -238,7 +238,7 @@
                       class="message-image-preview"
                       :class="{ 'message-generated-image-preview': message.messageType === 'imageView' }"
                       :src="imageUrl"
-                      :alt="message.messageType === 'imageView' ? $t('conversation.generatedImage') : $t('conversation.imagePreview')"
+                      :alt="message.messageType === 'imageView' ? $t('Generated image') : $t('Message image preview')"
                       loading="lazy"
                     />
                   </button>
@@ -287,7 +287,7 @@
                         @click="toggleCommandExpand(cmd)"
                       >
                         <span class="cmd-chevron" :class="{ 'cmd-chevron-open': isCommandExpanded(cmd) }">▶</span>
-                        <code class="cmd-label">{{ cmd.commandExecution?.command || $t('conversation.command') }}</code>
+                        <code class="cmd-label">{{ cmd.commandExecution?.command || $t('(command)') }}</code>
                         <span class="cmd-status">{{ commandStatusLabel(cmd) }}</span>
                       </button>
                       <div
@@ -298,7 +298,7 @@
                           <pre
                             class="cmd-output"
                             :class="{ 'cmd-output-condensed': isCommandOutputCondensed(cmd) }"
-                            v-text="cmd.commandExecution?.aggregatedOutput || $t('conversation.noOutput')"
+                            v-text="cmd.commandExecution?.aggregatedOutput || $t('(no output)')"
                           ></pre>
                         </div>
                       </div>
@@ -307,8 +307,8 @@
                 </div>
                 <div v-else-if="isPlanMessage(message)" class="plan-card" :data-streaming="message.messageType === 'plan.live'">
                   <div class="plan-card-header">
-                    <p class="plan-card-title">{{ $t('conversation.plan') }}</p>
-                    <span v-if="message.messageType === 'plan.live'" class="plan-card-badge">{{ $t('conversation.planUpdating') }}</span>
+                    <p class="plan-card-title">{{ $t('Plan') }}</p>
+                    <span v-if="message.messageType === 'plan.live'" class="plan-card-badge">{{ $t('Updating') }}</span>
                   </div>
                   <div
                     v-if="readPlanExplanation(message)"
@@ -565,7 +565,7 @@
                       <img
                         class="message-image-preview message-markdown-image"
                         :src="block.url"
-                        :alt="block.alt || $t('conversation.embeddedImage')"
+                        :alt="block.alt || $t('Embedded message image')"
                         loading="lazy"
                         @error="onMarkdownImageError(message.id, blockIndex)"
                       />
@@ -650,19 +650,19 @@
                   v-if="showEditMessageButton(message)"
                   type="button"
                   class="message-edit-button"
-                  :aria-label="$t('conversation.editMessage')"
-                  :title="$t('conversation.editMessage')"
+                  :aria-label="$t('Edit this message')"
+                  :title="$t('Edit this message')"
                   @click="editMessage(message.id)"
                 >
                   <IconTablerFilePencil class="icon-svg message-edit-icon" />
-                  <span class="message-edit-label">{{ $t('conversation.editMessage') }}</span>
+                  <span class="message-edit-label">{{ $t('Edit this message') }}</span>
                 </button>
                 <button
                   v-if="showForkResponseButton(message)"
                   type="button"
                   class="message-fork-button"
-                  :aria-label="$t('conversation.forkThread')"
-                  :title="$t('conversation.forkThread')"
+                  :aria-label="$t('Fork thread from this response')"
+                  :title="$t('Fork thread from this response')"
                   @click="forkResponse(message.id)"
                 >
                   <IconTablerGitFork class="icon-svg message-fork-icon" />
@@ -673,12 +673,12 @@
                   type="button"
                   class="message-copy-button"
                   :data-copied="copiedResponseAnchorId === message.id"
-                  :aria-label="copiedResponseAnchorId === message.id ? $t('conversation.responseCopied') : $t('conversation.copyResponse')"
-                  :title="copiedResponseAnchorId === message.id ? $t('conversation.responseCopied') : $t('conversation.copyResponse')"
+                  :aria-label="copiedResponseAnchorId === message.id ? $t('Response copied') : $t('Copy response')"
+                  :title="copiedResponseAnchorId === message.id ? $t('Response copied') : $t('Copy response')"
                   @click="copyResponse(message.id)"
                 >
                   <IconTablerCopy class="icon-svg message-copy-icon" />
-                  <span class="message-copy-label">{{ copiedResponseAnchorId === message.id ? $t('common.copied') : $t('common.copy') }}</span>
+                  <span class="message-copy-label">{{ copiedResponseAnchorId === message.id ? $t('Copied') : $t('Copy') }}</span>
                 </button>
               </div>
             </article>
@@ -709,8 +709,8 @@
       v-if="showJumpToLatestButton"
       type="button"
       class="jump-to-latest-button"
-      :title="$t('conversation.jumpToLatest')"
-      :aria-label="$t('conversation.jumpToLatestOutput')"
+      :title="$t('Jump to latest')"
+      :aria-label="$t('Jump to latest output')"
       @click="jumpToLatest"
     >
       <IconTablerArrowUp class="icon-svg jump-to-latest-icon" />
@@ -718,10 +718,10 @@
 
     <div v-if="modalImageUrl.length > 0" class="image-modal-backdrop" @click="closeImageModal">
       <div class="image-modal-content" @click.stop>
-        <button class="image-modal-close" type="button" :aria-label="$t('conversation.closeImagePreview')" @click="closeImageModal">
+        <button class="image-modal-close" type="button" :aria-label="$t('Close image preview')" @click="closeImageModal">
           <IconTablerX class="icon-svg" />
         </button>
-        <img class="image-modal-image" :src="modalImageUrl" :alt="$t('conversation.expandedImage')" />
+        <img class="image-modal-image" :src="modalImageUrl" :alt="$t('Expanded message image')" />
       </div>
     </div>
 
@@ -797,7 +797,7 @@
               >
                 {{ formatFileChangeCountLabel(diffViewerChanges.length) }}
               </button>
-              <button class="image-modal-close diff-viewer-close" type="button" :aria-label="$t('conversation.closeDiffViewer')" @click="closeDiffViewer">
+              <button class="image-modal-close diff-viewer-close" type="button" :aria-label="$t('Close diff viewer')" @click="closeDiffViewer">
                 <IconTablerX class="icon-svg" />
               </button>
             </div>
@@ -1122,7 +1122,7 @@ function isCommandGroupExpanded(message: UiMessage): boolean {
 function commandGroupSummaryLabel(message: UiMessage): string {
   const commands = getCommandBlockForLatest(message)
   const count = commands.length
-  const latestCommand = message.commandExecution?.command?.trim() || t('conversation.command')
+  const latestCommand = message.commandExecution?.command?.trim() || t('(command)')
   const countLabel = count === 1 ? '1 command' : `${count} commands`
   return `${countLabel} · latest: ${latestCommand}`
 }
@@ -1150,10 +1150,10 @@ function mcpToolCallStatusLabel(message: UiMessage): string {
   const s = message.mcpToolCall?.status
   const duration = message.mcpToolCall?.durationMs
   const durationStr = duration != null ? ` (${(duration / 1000).toFixed(1)}s)` : ''
-  if (s === 'completed') return t('conversation.cmdDone') + durationStr
-  if (s === 'failed') return t('conversation.cmdFailed')
-  if (s === 'inProgress') return t('conversation.cmdRunning')
-  return t('conversation.cmdDone') + durationStr
+  if (s === 'completed') return t('Done') + durationStr
+  if (s === 'failed') return t('Failed')
+  if (s === 'inProgress') return t('Running')
+  return t('Done') + durationStr
 }
 
 function mcpToolCallOutput(message: UiMessage): string {
@@ -1163,7 +1163,7 @@ function mcpToolCallOutput(message: UiMessage): string {
   if (mcp.arguments) parts.push(mcp.arguments)
   if (mcp.result) parts.push(mcp.result)
   if (mcp.error) parts.push(`Error: ${mcp.error}`)
-  return parts.join('\n\n') || t('conversation.noOutput')
+  return parts.join('\n\n') || t('(no output)')
 }
 
 function toggleReasoningExpand(message: UiMessage): void {
@@ -1233,11 +1233,11 @@ function commandStatusLabel(message: UiMessage): string {
   const compact = isCommandCompact(message)
   const durationStr = ce.durationMs != null ? ` (${(ce.durationMs / 1000).toFixed(1)}s)` : ''
   switch (ce.status) {
-    case 'inProgress': return compact ? t('conversation.cmdRunning') : t('conversation.cmdRunningFull')
-    case 'completed': return ce.exitCode === 0 ? t('conversation.cmdDone') + durationStr : t('conversation.cmdExitCode', { code: ce.exitCode ?? '?' })
-    case 'failed': return compact ? t('conversation.cmdFailed') : t('conversation.cmdFailedFull')
-    case 'declined': return compact ? t('conversation.cmdDeclined') : t('conversation.cmdDeclinedFull')
-    case 'interrupted': return compact ? t('conversation.cmdStopped') : t('conversation.cmdInterrupted')
+    case 'inProgress': return compact ? t('Running') : t('\u27F3 Running')
+    case 'completed': return ce.exitCode === 0 ? t('Done') + durationStr : t('Exit {code}', { code: ce.exitCode ?? '?' })
+    case 'failed': return compact ? t('Failed') : t('\u2717 Failed')
+    case 'declined': return compact ? t('Declined') : t('\u2298 Declined')
+    case 'interrupted': return compact ? t('Stopped') : t('\u2298 Interrupted')
     default: return ''
   }
 }
@@ -1876,11 +1876,11 @@ function readStandaloneFileChangeSummary(message: UiMessage): TurnFileChangeSumm
 
 function fileChangeOperationLabel(change: UiFileChange): string {
   if (change.operation === 'update' && change.movedToPath) {
-    return change.addedLineCount > 0 || change.removedLineCount > 0 ? t('conversation.fileChangeMovedEdited') : t('conversation.fileChangeMoved')
+    return change.addedLineCount > 0 || change.removedLineCount > 0 ? t('Moved + edited') : t('Moved')
   }
-  if (change.operation === 'add') return t('conversation.fileChangeAdded')
-  if (change.operation === 'delete') return t('conversation.fileChangeDeleted')
-  return t('conversation.fileChangeEdited')
+  if (change.operation === 'add') return t('Added')
+  if (change.operation === 'delete') return t('Deleted')
+  return t('Edited')
 }
 
 function fileChangeOperationTone(change: UiFileChange): 'add' | 'delete' | 'update' | 'move' {
@@ -1950,7 +1950,7 @@ function summarizeFileChangeKinds(summary: TurnFileChangeSummary | null): string
 }
 
 function fileChangeSummaryLabel(summary: TurnFileChangeSummary | null): string {
-  if (!summary || summary.changes.length === 0) return t('conversation.fileChangeModified')
+  if (!summary || summary.changes.length === 0) return t('Modified files')
   const countLabel = formatFileChangeCountLabel(summary.changes.length)
   const kindSummary = summarizeFileChangeKinds(summary)
   return kindSummary ? `${countLabel} · ${kindSummary}` : countLabel
@@ -1960,7 +1960,7 @@ function fileChangeSummaryStatusParts(summary: TurnFileChangeSummary | null): Fi
   if (!summary || summary.changes.length === 0) return []
   const totalAdded = summary.changes.reduce((sum, change) => sum + change.addedLineCount, 0)
   const totalRemoved = summary.changes.reduce((sum, change) => sum + change.removedLineCount, 0)
-  const fallbackLabel = summary.changes.some((change) => change.movedToPath) ? t('conversation.fileChangeMoved') : t('conversation.fileChangeReady')
+  const fallbackLabel = summary.changes.some((change) => change.movedToPath) ? t('Moved') : t('Ready')
   return buildFileChangeDeltaParts(totalAdded, totalRemoved, fallbackLabel)
 }
 
@@ -1982,7 +1982,7 @@ function buildFileChangeCopyText(summary: TurnFileChangeSummary | null): string
     const delta = formatFileChangeDelta(change)
     return `- ${fileChangeOperationLabel(change)}: ${pathLabel}${movedLabel}${delta ? ` (${delta})` : ''}`
   })
-  return `${t('conversation.fileChangeModified')}:\n${lines.join('\n')}`.trim()
+  return `${t('Modified files')}:\n${lines.join('\n')}`.trim()
 }
 
 const diffViewerChanges = computed<UiFileChange[]>(() => activeDiffViewerSummary.value?.changes ?? [])
@@ -3456,7 +3456,7 @@ function renderMessageBlockAsHtml(block: MessageBlock): string {
   if (block.kind === 'thematicBreak') {
     return '<hr class="message-divider">'
   }
-  return `<img class="message-image-preview message-markdown-image" src="${escapeHtml(block.url)}" alt="${escapeHtml(block.alt || t('conversation.embeddedImage'))}" loading="lazy">`
+  return `<img class="message-image-preview message-markdown-image" src="${escapeHtml(block.url)}" alt="${escapeHtml(block.alt || t('Embedded message image'))}" loading="lazy">`
 }
 
 function renderMarkdownBlocksAsHtml(text: string): string {
@@ -3487,12 +3487,12 @@ function readRequestReason(request: UiServerRequest): string {
 }
 
 function requestDisplayTitle(request: UiServerRequest): string {
-  if (request.method === 'item/commandExecution/requestApproval') return t('conversation.commandApproval')
-  if (request.method === 'item/fileChange/requestApproval') return t('conversation.fileChangeApproval')
-  if (request.method === 'item/permissions/requestApproval') return t('conversation.permissionsApproval')
-  if (request.method === 'mcpServer/elicitation/request') return t('conversation.mcpServerInput')
-  if (request.method === 'item/tool/requestUserInput') return t('conversation.inputRequired')
-  if (request.method === 'item/tool/call') return t('conversation.toolCallWaiting')
+  if (request.method === 'item/commandExecution/requestApproval') return t('Command approval required')
+  if (request.method === 'item/fileChange/requestApproval') return t('File change approval required')
+  if (request.method === 'item/permissions/requestApproval') return t('Permissions approval required')
+  if (request.method === 'mcpServer/elicitation/request') return t('MCP server input required')
+  if (request.method === 'item/tool/requestUserInput') return t('Input required')
+  if (request.method === 'item/tool/call') return t('Tool call waiting for response')
   return request.method
 }
 
@@ -4357,6 +4357,10 @@ onBeforeUnmount(() => {
   @apply mt-1 self-start flex items-center gap-1 opacity-[0.01] transition-opacity duration-200;
 }
 
+.message-toolbar[data-role='user'] {
+  @apply self-end;
+}
+
 .message-row:hover .message-toolbar {
   @apply opacity-100;
 }
diff --git a/src/components/content/ThreadMessageTypeMenu.vue b/src/components/content/ThreadMessageTypeMenu.vue
index 44c02c06..5f111897 100644
--- a/src/components/content/ThreadMessageTypeMenu.vue
+++ b/src/components/content/ThreadMessageTypeMenu.vue
@@ -6,11 +6,11 @@
 
     <div v-if="isOpen" class="thread-type-menu-panel" @click.stop>
       <div class="thread-type-menu-actions">
-        <button class="thread-type-menu-action-button" type="button" @click="emit('show-all')">{{ $t('conversation.showAll') }}</button>
-        <button class="thread-type-menu-action-button" type="button" @click="emit('hide-all')">{{ $t('conversation.hideAll') }}</button>
+        <button class="thread-type-menu-action-button" type="button" @click="emit('show-all')">{{ $t('Show all') }}</button>
+        <button class="thread-type-menu-action-button" type="button" @click="emit('hide-all')">{{ $t('Hide all') }}</button>
       </div>
 
-      <p v-if="types.length === 0" class="thread-type-menu-empty">{{ $t('conversation.noTypesYet') }}</p>
+      <p v-if="types.length === 0" class="thread-type-menu-empty">{{ $t('No types yet') }}</p>
 
       <label v-for="type in types" :key="type" class="thread-type-menu-option">
         <input
diff --git a/src/components/content/ThreadPendingRequestPanel.vue b/src/components/content/ThreadPendingRequestPanel.vue
index 22f958a2..9260ab05 100644
--- a/src/components/content/ThreadPendingRequestPanel.vue
+++ b/src/components/content/ThreadPendingRequestPanel.vue
@@ -40,7 +40,7 @@
                 class="thread-pending-request-inline-control"
                 type="text"
                 :value="approvalFreeformText"
-                :placeholder="$t('pending.declineWithNote')"
+                :placeholder="$t('No, and tell Codex what to do differently')"
                 @focus="onFocusApprovalOther"
                 @input="onApprovalOtherInput"
                 @keydown.enter.prevent="onSubmitApproval(request)"
@@ -48,10 +48,10 @@
             </label>
 
             <button type="button" class="thread-pending-request-secondary" @click="onRespondApproval(request, 'cancel')">
-              {{ $t('common.skip') }}
+              {{ $t('Skip') }}
             </button>
             <button type="button" class="thread-pending-request-primary" @click="onSubmitApproval(request)">
-              {{ $t('common.send') }}
+              {{ $t('Send') }}
             </button>
           </footer>
         </section>
@@ -63,7 +63,7 @@
             <p class="thread-pending-request-eyebrow">{{ requestPanelTitle(request) }}</p>
             <p class="thread-pending-request-title">{{ requestPanelPrompt(request) }}</p>
           </div>
-          <span v-if="(requestCount ?? 0) > 1" class="thread-pending-request-counter">{{ requestCount ?? 0 }} {{ $t('pending.pending') }}</span>
+          <span v-if="(requestCount ?? 0) > 1" class="thread-pending-request-counter">{{ requestCount ?? 0 }} {{ $t('pending') }}</span>
         </header>
 
         <div v-if="requestPreview(request)" class="thread-pending-request-preview">
@@ -72,7 +72,7 @@
 
         <section v-if="request.method === 'mcpServer/elicitation/request'" class="thread-pending-request-user-input">
           <p v-if="readMcpElicitationServerName(request)" class="thread-pending-request-question-description">
-            {{ $t('pending.server') }}: {{ readMcpElicitationServerName(request) }}
+            {{ $t('Server') }}: {{ readMcpElicitationServerName(request) }}
           </p>
 
           <a
@@ -82,7 +82,7 @@
             target="_blank"
             rel="noopener noreferrer"
           >
-            {{ $t('pending.openAuthLink') }}
+            {{ $t('Open authorization link') }}
           </a>
 
           <div
@@ -96,7 +96,7 @@
             <p v-if="field.description" class="thread-pending-request-question-text">{{ field.description }}</p>
 
             <label v-if="field.kind === 'string' || field.kind === 'number'" class="thread-pending-request-input-wrap">
-              <span class="thread-pending-request-select-label">{{ $t('pending.value') }}</span>
+              <span class="thread-pending-request-select-label">{{ $t('Value') }}</span>
               <input
                 class="thread-pending-request-input"
                 :type="field.inputType"
@@ -106,26 +106,26 @@
             </label>
 
             <label v-else-if="field.kind === 'boolean'" class="thread-pending-request-select-wrap">
-              <span class="thread-pending-request-select-label">{{ $t('pending.choice') }}</span>
+              <span class="thread-pending-request-select-label">{{ $t('Choice') }}</span>
               <select
                 class="thread-pending-request-select"
                 :value="serializeMcpBooleanValue(readMcpElicitationFieldValue(request.id, field))"
                 @change="onMcpElicitationBooleanChange(request.id, field, $event)"
               >
-                <option v-if="!field.hasExplicitDefault" value="">{{ $t('pending.selectTrueOrFalse') }}</option>
-                <option value="true">{{ $t('pending.true_') }}</option>
-                <option value="false">{{ $t('pending.false_') }}</option>
+                <option v-if="!field.hasExplicitDefault" value="">{{ $t('Select true or false') }}</option>
+                <option value="true">{{ $t('True') }}</option>
+                <option value="false">{{ $t('False') }}</option>
               </select>
             </label>
 
             <label v-else-if="field.kind === 'singleEnum'" class="thread-pending-request-select-wrap">
-              <span class="thread-pending-request-select-label">{{ $t('pending.choice') }}</span>
+              <span class="thread-pending-request-select-label">{{ $t('Choice') }}</span>
               <select
                 class="thread-pending-request-select"
                 :value="String(readMcpElicitationFieldValue(request.id, field) ?? '')"
                 @change="onMcpElicitationFieldInput(request.id, field, $event)"
               >
-                <option v-if="!field.hasExplicitDefault" value="">{{ $t('pending.selectAnOption') }}</option>
+                <option v-if="!field.hasExplicitDefault" value="">{{ $t('Select an option') }}</option>
                 <option
                   v-for="option in field.options"
                   :key="`${request.id}:${field.key}:${option.value}`"
@@ -159,13 +159,13 @@
 
           <footer class="thread-pending-request-footer">
             <button type="button" class="thread-pending-request-secondary" @click="onRespondMcpElicitation(request, 'cancel')">
-              {{ $t('common.cancel') }}
+              {{ $t('Cancel') }}
             </button>
             <button type="button" class="thread-pending-request-secondary" @click="onRespondMcpElicitation(request, 'decline')">
-              {{ $t('pending.decline') }}
+              {{ $t('Decline') }}
             </button>
             <button type="button" class="thread-pending-request-primary" @click="onRespondMcpElicitation(request, 'accept')">
-              {{ $t('pending.continue_') }}
+              {{ $t('Continue') }}
             </button>
           </footer>
         </section>
@@ -181,7 +181,7 @@
 
             <div v-if="question.options.length > 0" class="thread-pending-request-question-options">
               <label class="thread-pending-request-select-wrap">
-                <span class="thread-pending-request-select-label">{{ $t('pending.choice') }}</span>
+                <span class="thread-pending-request-select-label">{{ $t('Choice') }}</span>
                 <select
                   class="thread-pending-request-select"
                   :value="readQuestionAnswer(request.id, question.id, question.options[0]?.label || '')"
@@ -206,12 +206,12 @@
             </div>
 
             <label v-if="question.isOther" class="thread-pending-request-input-wrap">
-              <span class="thread-pending-request-select-label">{{ $t('pending.otherAnswer') }}</span>
+              <span class="thread-pending-request-select-label">{{ $t('Other answer') }}</span>
               <input
                 class="thread-pending-request-input"
                 type="text"
                 :value="readQuestionOtherAnswer(request.id, question.id)"
-                :placeholder="$t('pending.otherAnswer')"
+                :placeholder="$t('Other answer')"
                 @input="onQuestionOtherAnswerInput(request.id, question.id, $event)"
               />
             </label>
@@ -219,26 +219,26 @@
 
           <footer class="thread-pending-request-footer">
             <button type="button" class="thread-pending-request-primary" @click="onRespondToolRequestUserInput(request)">
-              {{ $t('common.send') }}
+              {{ $t('Send') }}
             </button>
           </footer>
         </section>
 
         <section v-else-if="request.method === 'item/tool/call'" class="thread-pending-request-actions">
           <button type="button" class="thread-pending-request-primary" @click="onRespondToolCallFailure(request)">
-            {{ $t('pending.failToolCall') }}
+            {{ $t('Fail Tool Call') }}
           </button>
           <button type="button" class="thread-pending-request-secondary" @click="onRespondToolCallSuccess(request)">
-            {{ $t('pending.successEmpty') }}
+            {{ $t('Success (Empty)') }}
           </button>
         </section>
 
         <section v-else class="thread-pending-request-actions">
           <button type="button" class="thread-pending-request-primary" @click="onRespondEmptyResult(request)">
-            {{ $t('pending.returnEmptyResult') }}
+            {{ $t('Return Empty Result') }}
           </button>
           <button type="button" class="thread-pending-request-secondary" @click="onRejectUnknownRequest(request)">
-            {{ $t('pending.rejectRequest') }}
+            {{ $t('Reject Request') }}
           </button>
         </section>
       </template>
@@ -250,8 +250,6 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { UiServerRequest, UiServerRequestReply } from '../../types/codex'
-import { useUiLanguage } from '../../composables/useUiLanguage'
-
 type ApprovalDecision = 'accept' | 'acceptForSession' | 'decline' | 'cancel'
 
 type ApprovalOption = {
@@ -301,8 +299,6 @@ const toolQuestionAnswers = ref<Record<string, string>>({})
 const toolQuestionOtherAnswers = ref<Record<string, string>>({})
 const mcpElicitationAnswers = ref<Record<string, string | number | boolean | string[] | null>>({})
 const mcpElicitationValidationError = ref('')
-const { t } = useUiLanguage()
-
 function asRecord(value: unknown): Record<string, unknown> | null {
   return value !== null && typeof value === 'object' && !Array.isArray(value)
     ? (value as Record<string, unknown>)
@@ -368,22 +364,22 @@ function readRequestReason(request: UiServerRequest): string {
 }
 
 function requestPanelTitle(request: UiServerRequest): string {
-  if (isApprovalRequest(request)) return t('pending.awaitingApproval')
-  if (isMcpElicitationRequest(request)) return t('pending.mcpServerInput')
-  if (request.method === 'item/tool/requestUserInput') return t('pending.awaitingResponse')
-  if (request.method === 'item/tool/call') return t('pending.toolCallWaiting')
+  if (isApprovalRequest(request)) return t('Awaiting approval')
+  if (isMcpElicitationRequest(request)) return t('MCP server input required')
+  if (request.method === 'item/tool/requestUserInput') return t('Awaiting response')
+  if (request.method === 'item/tool/call') return t('Tool call waiting for response')
   return request.method
 }
 
 function requestPanelPrompt(request: UiServerRequest): string {
   const explicit = readRequestReason(request)
   if (explicit) return explicit
-  if (isCommandApprovalRequest(request)) return t('pending.runCommand')
-  if (isFileApprovalRequest(request)) return t('pending.makeChanges')
-  if (isPermissionsApprovalRequest(request)) return t('pending.grantPermissions')
-  if (isMcpElicitationRequest(request)) return t('pending.mcpInputNeeded')
-  if (request.method === 'item/tool/requestUserInput') return t('pending.codexNeedsAnswer')
-  return t('pending.codexWaiting')
+  if (isCommandApprovalRequest(request)) return t('Do you want to run this command?')
+  if (isFileApprovalRequest(request)) return t('Do you want to make these changes?')
+  if (isPermissionsApprovalRequest(request)) return t('Do you want to grant these permissions?')
+  if (isMcpElicitationRequest(request)) return t('An MCP server needs your input before Codex can continue.')
+  if (request.method === 'item/tool/requestUserInput') return t('Codex needs your answer before it can continue.')
+  return t('Codex is waiting for a response before it can continue.')
 }
 
 function unwrapApprovalCommand(value: string): string {
@@ -454,8 +450,8 @@ function formatPermissionsPreview(value: unknown): string {
 function approvalOptionsForRequest(request: UiServerRequest | null): ApprovalOption[] {
   if (!request || !isApprovalRequest(request)) return []
   return [
-    { id: 'accept', label: t('pending.yesApprove') },
-    { id: 'acceptForSession', label: t('pending.yesForSession') },
+    { id: 'accept', label: t('Yes') },
+    { id: 'acceptForSession', label: t('Yes for Session') },
   ]
 }
 
diff --git a/src/components/content/ThreadTerminalPanel.vue b/src/components/content/ThreadTerminalPanel.vue
index a127c0d7..8190df38 100644
--- a/src/components/content/ThreadTerminalPanel.vue
+++ b/src/components/content/ThreadTerminalPanel.vue
@@ -18,18 +18,18 @@
       <div class="thread-terminal-actions">
         <select
           class="thread-terminal-quick-command"
-          aria-label="Run quick command"
-          title="Run quick command"
+          :aria-label="t('Run quick command')"
+          :title="t('Run quick command')"
           @change="onQuickCommandSelect"
         >
-          <option value="">Run...</option>
+          <option value="">{{ t('Run...') }}</option>
           <option v-for="command in quickCommands" :key="command.value" :value="command.value">
             {{ command.label }}
           </option>
-          <option :value="ADD_QUICK_COMMAND_VALUE">Add command...</option>
+          <option :value="ADD_QUICK_COMMAND_VALUE">{{ t('Add command...') }}</option>
         </select>
-        <button class="thread-terminal-action" type="button" title="New" @click="onNewTerminal">
-          New
+        <button class="thread-terminal-action" type="button" :title="t('New session')" @click="onNewTerminal">
+          {{ t('New') }}
         </button>
         <button class="thread-terminal-action" type="button" :title="t('Hide terminal')" @click="$emit('hide')">
           {{ t('Hide') }}
@@ -50,7 +50,6 @@ import { useI18n } from 'vue-i18n'
 import { Terminal } from '@xterm/xterm'
 import { FitAddon } from '@xterm/addon-fit'
 import '@xterm/xterm/css/xterm.css'
-import { useUiLanguage } from '../../composables/useUiLanguage'
 import {
   attachThreadTerminal,
   closeThreadTerminal,
@@ -81,8 +80,6 @@ let fitAddon: FitAddon | null = null
 let resizeObserver: ResizeObserver | null = null
 let unsubscribeNotifications: (() => void) | null = null
 let resizeFrame = 0
-const { t } = useUiLanguage()
-
 type TerminalTab = {
   id: string
   shell: string
@@ -90,8 +87,9 @@ type TerminalTab = {
 }
 
 const terminalTitle = computed(() => {
-  if (shellLabel.value && shellLabel.value !== 'terminal') return shellLabel.value
-  return t('terminal.title')
+  const shell = activeTab.value?.shell
+  if (shell && shell !== 'terminal') return shell
+  return t('Terminal')
 })
 
 type QuickCommand = {
@@ -258,7 +256,7 @@ function handleNotification(notification: RpcNotification): void {
     saveTabsState()
     if (notificationSessionId !== activeSessionId.value) return
     terminal.writeln('')
-    terminal.writeln(t('terminal.exited'))
+    terminal.writeln(t('[terminal exited]'))
     return
   }
   if (notification.method === 'terminal-error') {
diff --git a/src/components/sidebar/SidebarPrimaryNav.vue b/src/components/sidebar/SidebarPrimaryNav.vue
index 6fdc90c3..33fe6432 100644
--- a/src/components/sidebar/SidebarPrimaryNav.vue
+++ b/src/components/sidebar/SidebarPrimaryNav.vue
@@ -1,8 +1,8 @@
 <template>
   <nav class="sidebar-primary-nav">
-    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('sidebar.newThread') }}</SidebarMenuRow>
-    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('sidebar.automations') }}</SidebarMenuRow>
-    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('common.skills') }}</SidebarMenuRow>
+    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('New thread') }}</SidebarMenuRow>
+    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('Automations') }}</SidebarMenuRow>
+    <SidebarMenuRow as="button" class="sidebar-nav-item" type="button">{{ $t('Skills') }}</SidebarMenuRow>
   </nav>
 </template>
 
diff --git a/src/components/sidebar/SidebarThreadControls.vue b/src/components/sidebar/SidebarThreadControls.vue
index 89f0d91b..b32f93ed 100644
--- a/src/components/sidebar/SidebarThreadControls.vue
+++ b/src/components/sidebar/SidebarThreadControls.vue
@@ -3,8 +3,8 @@
     <button
       class="sidebar-thread-controls-button"
       type="button"
-      :aria-label="isSidebarCollapsed ? $t('sidebar.expandSidebar') : $t('sidebar.collapseSidebar')"
-      :title="isSidebarCollapsed ? $t('sidebar.expandSidebar') : $t('sidebar.collapseSidebar')"
+      :aria-label="isSidebarCollapsed ? $t('Expand sidebar') : $t('Collapse sidebar')"
+      :title="isSidebarCollapsed ? $t('Expand sidebar') : $t('Collapse sidebar')"
       @click="$emit('toggle-sidebar')"
     >
       <IconTablerLayoutSidebarFilled v-if="isSidebarCollapsed" class="sidebar-thread-controls-icon" />
@@ -17,8 +17,8 @@
       v-if="showNewThreadButton"
       class="sidebar-thread-controls-button"
       type="button"
-      :aria-label="$t('sidebar.startNewThread')"
-      :title="$t('sidebar.startNewThread')"
+      :aria-label="$t('Start new thread')"
+      :title="$t('Start new thread')"
       @click="$emit('start-new-thread')"
     >
       <IconTablerFilePencil class="sidebar-thread-controls-icon" />
@@ -27,7 +27,6 @@
 </template>
 
 <script setup lang="ts">
-import { useUiLanguage } from '../../composables/useUiLanguage'
 import IconTablerFilePencil from '../icons/IconTablerFilePencil.vue'
 import IconTablerLayoutSidebar from '../icons/IconTablerLayoutSidebar.vue'
 import IconTablerLayoutSidebarFilled from '../icons/IconTablerLayoutSidebarFilled.vue'
@@ -42,7 +41,6 @@ defineEmits<{
   'start-new-thread': []
 }>()
 
-const { t } = useUiLanguage()
 </script>
 
 <style scoped>
diff --git a/src/components/sidebar/SidebarThreadTree.vue b/src/components/sidebar/SidebarThreadTree.vue
index 7abd2a5e..0ffff2b6 100644
--- a/src/components/sidebar/SidebarThreadTree.vue
+++ b/src/components/sidebar/SidebarThreadTree.vue
@@ -30,13 +30,13 @@
               <span class="thread-row-title-wrap">
                 <span class="thread-row-title-line">
                   <span class="thread-row-title">{{ thread.title }}</span>
-                  <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('home.worktreeThread')" />
+                  <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('Worktree thread')" />
                   <span
                     v-if="threadHasAutomation(thread.id)"
                     class="thread-row-automation-chip"
                     :title="threadAutomationTooltip(thread.id)"
                   >
-                    {{ $t('home.auto') }}
+                    {{ $t('Auto') }}
                   </span>
                   <span
                     v-if="thread.pendingRequestState"
@@ -69,29 +69,29 @@
     </section>
 
     <SidebarMenuRow as="header" class="thread-tree-header-row">
-      <span class="thread-tree-header">{{ $t('home.threads') }}</span>
+      <span class="thread-tree-header">{{ $t('Threads') }}</span>
       <template #right>
         <div ref="organizeMenuWrapRef" class="organize-menu-wrap">
           <button
             class="organize-menu-trigger"
             type="button"
             :aria-expanded="isOrganizeMenuOpen"
-            :aria-label="$t('home.organizeThreads')"
-            :title="$t('home.organizeThreads')"
+            :aria-label="$t('Organize threads')"
+            :title="$t('Organize threads')"
             @click="toggleOrganizeMenu"
           >
             <IconTablerDots class="thread-icon" />
           </button>
 
           <div v-if="isOrganizeMenuOpen" class="organize-menu-panel" @click.stop>
-            <p class="organize-menu-title">{{ $t('home.organize') }}</p>
+            <p class="organize-menu-title">{{ $t('Organize') }}</p>
             <button
               class="organize-menu-item"
               :data-active="threadViewMode === 'project'"
               type="button"
               @click="setThreadViewMode('project')"
             >
-              <span>{{ $t('home.byProject') }}</span>
+              <span>{{ $t('By project') }}</span>
               <span v-if="threadViewMode === 'project'">✓</span>
             </button>
             <button
@@ -100,7 +100,7 @@
               type="button"
               @click="setThreadViewMode('chronological')"
             >
-              <span>{{ $t('home.chronologicalList') }}</span>
+              <span>{{ $t('Chronological list') }}</span>
               <span v-if="threadViewMode === 'chronological'">✓</span>
             </button>
           </div>
@@ -108,9 +108,9 @@
       </template>
     </SidebarMenuRow>
 
-    <p v-if="isSearchActive && filteredGroups.length === 0" class="thread-tree-no-results">{{ $t('home.noMatchingThreads') }}</p>
+    <p v-if="isSearchActive && filteredGroups.length === 0" class="thread-tree-no-results">{{ $t('No matching threads') }}</p>
 
-    <p v-else-if="isLoading && groups.length === 0" class="thread-tree-loading">{{ $t('home.loadingThreads') }}</p>
+    <p v-else-if="isLoading && groups.length === 0" class="thread-tree-loading">{{ $t('Loading threads...') }}</p>
 
     <ul v-else-if="isChronologicalView" class="thread-list thread-list-global">
       <li
@@ -145,7 +145,7 @@
             <span class="thread-row-title-wrap">
               <span class="thread-row-title-line">
                 <span class="thread-row-title">{{ thread.title }}</span>
-                <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('home.worktreeThread')" />
+                <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('Worktree thread')" />
                 <span
                   v-if="threadHasAutomation(thread.id)"
                   class="thread-row-automation-chip"
@@ -242,18 +242,18 @@
                   >
                     <template v-if="projectMenuMode === 'actions'">
                       <button class="project-menu-item" type="button" @click="openRenameProjectMenu(group.projectName)">
-                        {{ $t('home.editName') }}
+                        {{ $t('Edit name') }}
                       </button>
                       <button
                         class="project-menu-item project-menu-item-danger"
                         type="button"
                         @click="onRemoveProject(group.projectName)"
                       >
-                        {{ $t('home.removeProject') }}
+                        {{ $t('Remove project') }}
                       </button>
                     </template>
                     <template v-else>
-                      <label class="project-menu-label">{{ $t('home.projectName') }}</label>
+                      <label class="project-menu-label">{{ $t('Project name') }}</label>
                       <input
                         v-model="projectRenameDraft"
                         class="project-menu-input"
@@ -310,7 +310,7 @@
                   <span class="thread-row-title-wrap">
                     <span class="thread-row-title-line">
                       <span class="thread-row-title">{{ thread.title }}</span>
-                      <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('home.worktreeThread')" />
+                      <IconTablerGitFork v-if="thread.hasWorktree" class="thread-row-worktree-icon" :title="$t('Worktree thread')" />
                       <span
                         v-if="threadHasAutomation(thread.id)"
                         class="thread-row-automation-chip"
@@ -351,7 +351,7 @@
             <template #left>
               <span class="project-empty-spacer" />
             </template>
-            <span class="project-empty">{{ $t('home.noThreads') }}</span>
+            <span class="project-empty">{{ $t('No threads yet') }}</span>
           </SidebarMenuRow>
 
           <SidebarMenuRow v-if="hasHiddenThreads(group)" class="thread-show-more-row">
@@ -359,7 +359,7 @@
               <span class="thread-show-more-spacer" />
             </template>
             <button class="thread-show-more-button" type="button" @click="toggleProjectExpansion(group.projectName)">
-              {{ isExpanded(group.projectName) ? $t('home.showLess') : $t('home.showMore') }}
+              {{ isExpanded(group.projectName) ? $t('Show less') : $t('Show more') }}
             </button>
           </SidebarMenuRow>
       </article>
@@ -375,43 +375,43 @@
         @click.stop
       >
         <button class="thread-menu-item" type="button" @click="openAutomationDialog(openThreadMenuThread.id)">
-          {{ threadHasAutomation(openThreadMenuThread.id) ? $t('home.editAutomation') : $t('home.addAutomation') }}
+          {{ threadHasAutomation(openThreadMenuThread.id) ? $t('Edit automation\u2026') : $t('Add automation\u2026') }}
         </button>
         <button class="thread-menu-item" type="button" @click="onBrowseThreadFiles(openThreadMenuThread.id)">
-          {{ $t('home.browseFiles') }}
+          {{ $t('Browse files') }}
         </button>
         <button class="thread-menu-item" type="button" @click="onExportThread(openThreadMenuThread.id)">
-          {{ $t('home.exportThread') }}
+          {{ $t('Export thread') }}
         </button>
         <button class="thread-menu-item" type="button" @click="onForkThread(openThreadMenuThread.id)">
-          {{ $t('home.fork') }}
+          {{ $t('Fork') }}
         </button>
         <button class="thread-menu-item" type="button" @click="openRenameThreadDialog(openThreadMenuThread.id, openThreadMenuThread.title)">
-          {{ $t('home.rename') }}
+          {{ $t('Rename') }}
         </button>
         <button class="thread-menu-item thread-menu-item-danger" type="button" @click="openDeleteThreadDialog(openThreadMenuThread.id, openThreadMenuThread.title)">
-          {{ $t('home.deleteThread') }}
+          {{ $t('Delete thread') }}
         </button>
       </div>
     </Teleport>
 
     <Teleport to="body">
       <div v-if="renameThreadDialogVisible" class="rename-thread-overlay" @click.self="closeRenameThreadDialog">
-        <div class="rename-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('home.rename')">
-          <h3 class="rename-thread-title">{{ $t('home.rename') }}</h3>
-          <p class="rename-thread-subtitle">{{ $t('home.renameHint') }}</p>
+        <div class="rename-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('Rename')">
+          <h3 class="rename-thread-title">{{ $t('Rename') }}</h3>
+          <p class="rename-thread-subtitle">{{ $t('Make it short and recognizable.') }}</p>
           <input
             ref="renameThreadInputRef"
             v-model="renameThreadDraft"
             class="rename-thread-input"
             type="text"
-            :placeholder="$t('home.addTitlePlaceholder')"
+            :placeholder="$t('Add title...')"
             @keydown.enter.prevent="submitRenameThread"
             @keydown.esc.prevent="closeRenameThreadDialog"
           />
           <div class="rename-thread-actions">
-            <button class="rename-thread-button" type="button" @click="closeRenameThreadDialog">{{ $t('home.cancel') }}</button>
-            <button class="rename-thread-button rename-thread-button-primary" type="button" @click="submitRenameThread">{{ $t('home.save') }}</button>
+            <button class="rename-thread-button" type="button" @click="closeRenameThreadDialog">{{ $t('Cancel') }}</button>
+            <button class="rename-thread-button rename-thread-button-primary" type="button" @click="submitRenameThread">{{ $t('Save') }}</button>
           </div>
         </div>
       </div>
@@ -419,20 +419,20 @@
 
     <Teleport to="body">
       <div v-if="deleteThreadDialogVisible" class="rename-thread-overlay" @click.self="closeDeleteThreadDialog">
-        <div class="rename-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('home.deleteThread')">
-          <h3 class="rename-thread-title">{{ deleteThreadHasAutomation ? $t('home.archiveAndRemoveAutomationTitle') : $t('home.deleteThreadTitle') }}</h3>
+        <div class="rename-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('Delete thread')">
+          <h3 class="rename-thread-title">{{ deleteThreadHasAutomation ? $t('Archive chat and remove automation?') : $t('Delete thread?') }}</h3>
           <p class="rename-thread-subtitle">
             <template v-if="deleteThreadHasAutomation">
-              {{ $t('home.archiveAndRemoveAutomationDesc', { title: deleteThreadTitle }) }}
+              {{ $t('This will archive the thread "{title}" and remove the attached heartbeat automation.', { title: deleteThreadTitle }) }}
             </template>
             <template v-else>
-              {{ $t('home.deleteThreadDesc', { title: deleteThreadTitle }) }}
+              {{ $t('This will archive the thread "{title}". You can find it later in archived threads.', { title: deleteThreadTitle }) }}
             </template>
           </p>
           <div class="rename-thread-actions">
-            <button class="rename-thread-button" type="button" @click="closeDeleteThreadDialog">{{ $t('home.cancel') }}</button>
+            <button class="rename-thread-button" type="button" @click="closeDeleteThreadDialog">{{ $t('Cancel') }}</button>
             <button class="rename-thread-button rename-thread-button-danger" type="button" @click="submitDeleteThread">
-              {{ deleteThreadHasAutomation ? $t('home.archiveAndRemove') : $t('home.delete') }}
+              {{ deleteThreadHasAutomation ? $t('Archive and remove') : $t('Delete') }}
             </button>
           </div>
         </div>
@@ -441,22 +441,22 @@
 
     <Teleport to="body">
       <div v-if="automationDialogVisible" class="rename-thread-overlay" @click.self="closeAutomationDialog">
-        <div class="rename-thread-panel automation-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('home.threadAutomation')">
-          <h3 class="rename-thread-title">{{ automationDialogMode === 'edit' ? $t('home.editAutomation') : $t('home.addAutomation') }}</h3>
-          <p class="rename-thread-subtitle">{{ $t('home.automationDesc') }}</p>
+        <div class="rename-thread-panel automation-thread-panel" role="dialog" aria-modal="true" :aria-label="$t('Thread automation')">
+          <h3 class="rename-thread-title">{{ automationDialogMode === 'edit' ? $t('Edit automation\u2026') : $t('Add automation\u2026') }}</h3>
+          <p class="rename-thread-subtitle">{{ $t('This creates a heartbeat automation attached to the selected thread.') }}</p>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">{{ $t('home.automationName') }}</span>
-            <input v-model="automationDraft.name" class="rename-thread-input" type="text" :placeholder="$t('home.automationNamePlaceholder')" />
+            <span class="automation-thread-label">{{ $t('Name') }}</span>
+            <input v-model="automationDraft.name" class="rename-thread-input" type="text" :placeholder="$t('Automation name')" />
           </label>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">{{ $t('home.automationPrompt') }}</span>
-            <textarea v-model="automationDraft.prompt" class="automation-thread-textarea" rows="6" :placeholder="$t('home.automationPromptPlaceholder')"></textarea>
+            <span class="automation-thread-label">{{ $t('Prompt') }}</span>
+            <textarea v-model="automationDraft.prompt" class="automation-thread-textarea" rows="6" :placeholder="$t('Describe what the automation should do')"></textarea>
           </label>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">{{ $t('home.automationSchedule') }}</span>
+            <span class="automation-thread-label">{{ $t('Schedule (RRULE)') }}</span>
             <input
               v-model="automationDraft.rrule"
               class="rename-thread-input"
@@ -466,10 +466,10 @@
           </label>
 
           <label class="automation-thread-field">
-            <span class="automation-thread-label">{{ $t('home.automationStatus') }}</span>
+            <span class="automation-thread-label">{{ $t('Status') }}</span>
             <select v-model="automationDraft.status" class="automation-thread-select">
-              <option value="ACTIVE">{{ $t('home.automationActive') }}</option>
-              <option value="PAUSED">{{ $t('home.automationPaused') }}</option>
+              <option value="ACTIVE">{{ $t('Active') }}</option>
+              <option value="PAUSED">{{ $t('Paused') }}</option>
             </select>
           </label>
 
@@ -483,13 +483,13 @@
               :disabled="isSavingAutomation"
               @click="onDeleteAutomationFromDialog"
             >
-              {{ $t('home.remove') }}
+              {{ $t('Remove') }}
             </button>
             <button class="rename-thread-button" type="button" :disabled="isSavingAutomation" @click="closeAutomationDialog">
-              {{ $t('home.cancel') }}
+              {{ $t('Cancel') }}
             </button>
             <button class="rename-thread-button rename-thread-button-primary" type="button" :disabled="isSavingAutomation" @click="submitAutomationDialog">
-              {{ isSavingAutomation ? $t('home.saving') : $t('home.save') }}
+              {{ isSavingAutomation ? $t('Saving\u2026') : $t('Save') }}
             </button>
           </div>
         </div>
@@ -518,7 +518,6 @@ import IconTablerFolder from '../icons/IconTablerFolder.vue'
 import IconTablerFolderOpen from '../icons/IconTablerFolderOpen.vue'
 import IconTablerGitFork from '../icons/IconTablerGitFork.vue'
 import IconTablerPin from '../icons/IconTablerPin.vue'
-import { useUiLanguage } from '../../composables/useUiLanguage'
 import SidebarMenuRow from './SidebarMenuRow.vue'
 
 const { t } = useI18n()
@@ -532,8 +531,6 @@ const props = defineProps<{
   searchMatchedThreadIds: string[] | null
 }>()
 
-const { t } = useUiLanguage()
-
 const emit = defineEmits<{
   select: [threadId: string]
   archive: [threadId: string]
@@ -921,8 +918,8 @@ function threadAutomationTooltip(threadId: string): string {
     ? '-'
     : automation.nextRunAtMs
       ? new Date(automation.nextRunAtMs).toLocaleString()
-      : t('home.notScheduled')
-  return `${automation.name} • ${t('home.nextRun')}: ${nextRunLabel}`
+      : t('Not scheduled')
+  return `${automation.name} • ${t('Next run')}: ${nextRunLabel}`
 }
 
 function onExportThread(threadId: string): void {
@@ -936,7 +933,7 @@ function onForkThread(threadId: string): void {
 }
 
 function getNewThreadButtonAriaLabel(projectName: string): string {
-  return `${t('home.newThread')} ${getProjectDisplayName(projectName)}`
+  return `${t('New thread')} ${getProjectDisplayName(projectName)}`
 }
 
 function onStartNewThread(projectName: string): void {
@@ -1048,7 +1045,7 @@ function openAutomationDialog(threadId: string): void {
   automationDialogMode.value = existing ? 'edit' : 'create'
   automationDialogError.value = ''
   automationDraft.value = {
-    name: existing?.name ?? t('home.threadAutomation'),
+    name: existing?.name ?? t('Thread automation'),
     prompt: existing?.prompt ?? '',
     rrule: existing?.rrule ?? 'FREQ=DAILY;BYHOUR=9;BYMINUTE=0',
     status: existing?.status ?? 'ACTIVE',
@@ -1083,7 +1080,7 @@ async function submitAutomationDialog(): Promise<void> {
     }
     closeAutomationDialog()
   } catch (error) {
-    automationDialogError.value = error instanceof Error ? error.message : t('home.failedToSaveAutomation')
+    automationDialogError.value = error instanceof Error ? error.message : t('Failed to save automation')
     isSavingAutomation.value = false
   }
 }
@@ -1100,7 +1097,7 @@ async function onDeleteAutomationFromDialog(): Promise<void> {
     )
     closeAutomationDialog()
   } catch (error) {
-    automationDialogError.value = error instanceof Error ? error.message : t('home.failedToRemoveAutomation')
+    automationDialogError.value = error instanceof Error ? error.message : t('Failed to remove automation')
     isSavingAutomation.value = false
   }
 }
@@ -1738,7 +1735,7 @@ function shouldShowThreadIndicator(thread: UiThread): boolean {
 }
 
 function threadRequestLabel(thread: UiThread): string {
-  return thread.pendingRequestState === 'approval' ? t('home.awaitingApproval') : t('home.awaitingResponse')
+  return thread.pendingRequestState === 'approval' ? t('Awaiting approval') : t('Awaiting response')
 }
 
 function getThreadState(thread: UiThread): 'awaiting-approval' | 'awaiting-response' | 'working' | 'unread' | 'idle' {
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 0495eb27..39825f5a 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -22,10 +22,12 @@ const i18n = createI18n({
   legacy: false,
   locale: detectLocale(),
   fallbackLocale: 'en',
+  missingWarn: false,
+  fallbackWarn: false,
   messages: {
     en,
     zh,
   },
 })
 
-export default i18n
+export default i18n
\ No newline at end of file
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index a35ce1f3..6ed48498 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -1,525 +1,8 @@
 /**
- * English locale messages for the codexUI frontend.
- * Organized by component/feature area.
+ * English locale — keys are the English text itself.
+ * vue-i18n falls back to the key when no translation exists,
+ * so this file only needs entries where the display differs from the key.
  */
-const en = {
-  common: {
-    send: 'Send',
-    cancel: 'Cancel',
-    close: 'Close',
-    skip: 'Skip',
-    search: 'Search',
-    refresh: 'Refresh',
-    loading: 'Loading',
-    edit: 'Edit',
-    delete: 'Delete',
-    copy: 'Copy',
-    copied: 'Copied',
-    yes: 'Yes',
-    no: 'No',
-    noResults: 'No results',
-    files: 'Files',
-    file: 'file',
-    filesCount: '{count} file | {count} files',
-    images: '{count} image | {count} images',
-    skills: 'Skills',
-    back: 'Back',
-    settings: 'Settings',
-  },
-
-  composer: {
-    placeholder: "Type a message... ({'@'} for files, / for skills)",
-    placeholderNoThread: 'Select a thread to send a message',
-    placeholderPlanMode: 'Loading models for plan mode...',
-    addPhotosFiles: 'Add photos & files',
-    addFolder: 'Add folder',
-    takePhoto: 'Take photo',
-    inProgressSend: 'In-progress send',
-    steer: 'Steer',
-    queue: 'Queue',
-    fastMode: 'Fast mode',
-    fastModeDescOn: 'About 1.5x faster, with credits used at 2x',
-    fastModeDescOff: 'Default speed with normal credit usage',
-    fastModeSaving: 'Saving speed setting...',
-    planMode: 'Plan mode',
-    planModeDesc: 'Agent proposes a plan before acting',
-    model: 'Model',
-    thinking: 'Thinking',
-    searchModels: 'Search models...',
-    searchSkills: 'Search skills...',
-    stopDictation: 'Stop dictation',
-    clickToDictate: 'Click to dictate',
-    holdToDictate: 'Hold to dictate',
-    stop: 'Stop',
-    stopPending: 'Saving thread before stop is available',
-    sendMessage: 'Send message',
-    queueMessage: 'Queue message',
-    sendAsMode: 'Send as {mode}',
-    dropImagesOrFiles: 'Drop images or files',
-    noMatchingFiles: 'No matching files',
-    selectedImage: 'Selected image',
-    removeImage: 'Remove {name}',
-    removeFolder: 'Remove folder {name}',
-    removeSkill: 'Remove skill {name}',
-    removeFile: 'Remove {label}',
-    uploading: '{percent}% uploading ({processed}/{total})',
-    noSpeechClick: 'No speech detected. Click again after speaking.',
-    noSpeechHold: 'No speech detected. Hold the mic and speak.',
-    micDenied: 'Microphone access was denied.',
-    dictationFailed: 'Dictation failed.',
-    attachingFile: 'Attaching file...',
-    attachingFiles: 'Attaching {count} files...',
-    attachFailed: 'Could not attach file.',
-    attachFailedMulti: 'Could not attach {count} files.',
-    attachPartial: '{succeeded} attached, {failed} failed.',
-    attachFailedAttaching: '{failed} failed, attaching {remaining} files...',
-    searchQuickProjects: 'Quick search projects',
-    nSelected: '{count} selected',
-    selectDefault: 'Select...',
-    noSkillsFound: 'No skills found',
-
-    reasoningNone: 'None',
-    reasoningMinimal: 'Minimal',
-    reasoningLow: 'Low',
-    reasoningMedium: 'Medium',
-    reasoningHigh: 'High',
-    reasoningExtraHigh: 'Extra high',
-
-    runtimeLocal: 'Local project',
-    runtimeWorktree: 'New worktree',
-    continueIn: 'Continue in',
-    noMcpServers: 'No MCP servers configured',
-    noAuthToken: 'No auth token available for transcription.',
-    transcriptionFailed: 'Transcription failed.',
-  },
-
-  conversation: {
-    loadingMessages: 'Loading messages...',
-    noMessages: 'No messages in this thread yet.',
-    loadEarlier: 'Load earlier messages',
-    loadingEarlier: 'Loading\u2026',
-    command: '(command)',
-    noOutput: '(no output)',
-    generatedImage: 'Generated image',
-    imagePreview: 'Message image preview',
-    embeddedImage: 'Embedded message image',
-    expandedImage: 'Expanded message image',
-    editMessage: 'Edit this message',
-    forkThread: 'Fork thread from this response',
-    responseCopied: 'Response copied',
-    copyResponse: 'Copy response',
-    jumpToLatest: 'Jump to latest',
-    jumpToLatestOutput: 'Jump to latest output',
-    closeImagePreview: 'Close image preview',
-    closeDiffViewer: 'Close diff viewer',
-    plan: 'Plan',
-    planUpdating: 'Updating',
-
-    cmdRunning: 'Running',
-    cmdRunningFull: '\u27F3 Running',
-    cmdDone: 'Done',
-    cmdCompleted: '\u2713 Completed',
-    cmdExitCode: 'Exit {code}',
-    cmdFailed: 'Failed',
-    cmdFailedFull: '\u2717 Failed',
-    cmdDeclined: 'Declined',
-    cmdDeclinedFull: '\u2298 Declined',
-    cmdStopped: 'Stopped',
-    cmdInterrupted: '\u2298 Interrupted',
-
-    fileChangeAdded: 'Added',
-    fileChangeDeleted: 'Deleted',
-    fileChangeEdited: 'Edited',
-    fileChangeMoved: 'Moved',
-    fileChangeMovedEdited: 'Moved + edited',
-    fileChangeModified: 'Modified files',
-    fileChangeReady: 'Ready',
-
-    showAll: 'Show all',
-    hideAll: 'Hide all',
-    noTypesYet: 'No types yet',
-
-    commandApproval: 'Command approval required',
-    fileChangeApproval: 'File change approval required',
-    permissionsApproval: 'Permissions approval required',
-    mcpServerInput: 'MCP server input required',
-    inputRequired: 'Input required',
-    toolCallWaiting: 'Tool call waiting for response',
-  },
-
-  review: {
-    eyebrow: 'Review',
-    closePane: 'Close review pane',
-    tabChanges: 'Changes',
-    tabFindings: 'Findings',
-    compare: 'Compare',
-    workspace: 'Workspace',
-    baseBranch: 'Base branch',
-    branch: 'Branch',
-    changes: 'Changes',
-    unstaged: 'Unstaged',
-    staged: 'Staged',
-    runReview: 'Run review',
-    reviewing: 'Reviewing\u2026',
-    resizeFileList: 'Resize file list',
-    loadingReviewState: 'Loading review state',
-    notGitRepo: 'This folder is not a Git repository',
-    notGitRepoDesc: 'Initialize Git to review local changes and run Codex review.',
-    initializeGit: 'Initialize Git',
-    initializing: 'Initializing\u2026',
-    baseBranchUnavailable: 'Base branch unavailable',
-    baseBranchUnavailableDesc: 'Could not resolve `origin/HEAD`, `main`, or `master` for this repository.',
-    noChangesInScope: 'No changes in this scope',
-    workspaceClean: 'Your current workspace is clean.',
-    noMergeDiff: 'No merge diff found against the base branch.',
-    filesCount: '{count} files',
-    vs: 'vs {branch}',
-    stageAll: 'Stage all',
-    unstageAll: 'Unstage all',
-    revertAll: 'Revert all',
-    stageFile: 'Stage file',
-    unstageFile: 'Unstage file',
-    revertFile: 'Revert file',
-    stageHunk: 'Stage hunk',
-    unstageHunk: 'Unstage hunk',
-    revertHunk: 'Revert hunk',
-    noUnifiedDiff: 'No unified diff available.',
-    summary: 'Summary',
-    noFindings: 'No structured findings yet',
-    noFindingsSummaryOnly: 'The latest review only returned summary text.',
-    noFindingsRun: 'Run review to populate this pane.',
-    changedFiles: 'Changed files',
-    reviewingChanges: 'Reviewing current changes',
-    reviewingAgainst: 'Reviewing against {branch}',
-    operationAdded: 'Added',
-    operationDeleted: 'Deleted',
-    operationRenamed: 'Renamed',
-    operationModified: 'Modified',
-    repositoryReview: 'Repository review',
-    stagedChanges: 'Staged changes',
-    workspaceChanges: 'Workspace changes',
-    againstBranch: 'Against {branch}',
-  },
-
-  pending: {
-    awaitingApproval: 'Awaiting approval',
-    mcpServerInput: 'MCP server input required',
-    awaitingResponse: 'Awaiting response',
-    toolCallWaiting: 'Tool call waiting for response',
-    runCommand: 'Do you want to run this command?',
-    makeChanges: 'Do you want to make these changes?',
-    grantPermissions: 'Do you want to grant these permissions?',
-    mcpInputNeeded: 'An MCP server needs your input before Codex can continue.',
-    codexNeedsAnswer: 'Codex needs your answer before it can continue.',
-    codexWaiting: 'Codex is waiting for a response before it can continue.',
-    yesApprove: 'Yes',
-    yesForSession: 'Yes for Session',
-    declineWithNote: 'No, and tell Codex what to do differently',
-    continue_: 'Continue',
-    decline: 'Decline',
-    failToolCall: 'Fail Tool Call',
-    successEmpty: 'Success (Empty)',
-    returnEmptyResult: 'Return Empty Result',
-    rejectRequest: 'Reject Request',
-    openAuthLink: 'Open authorization link',
-    server: 'Server',
-    value: 'Value',
-    choice: 'Choice',
-    otherAnswer: 'Other answer',
-    selectTrueOrFalse: 'Select true or false',
-    selectAnOption: 'Select an option',
-    true_: 'True',
-    false_: 'False',
-    pending: 'pending',
-    requiredFieldSingle: 'Answer the required field: {label}.',
-    requiredFieldMulti: 'Answer the required fields: {labels}.',
-    readPermission: 'Read',
-    writePermission: 'Write',
-    networkAccess: 'Network access',
-  },
-
-  skills: {
-    hubTitle: 'Skills Hub',
-    hubSubtitle: 'Browse and discover skills from the OpenClaw community',
-    syncTitle: 'Skills Sync (GitHub)',
-    connected: 'Connected',
-    loggedInAs: 'Logged in as {username}',
-    notConnected: 'Not connected',
-    startup: 'Startup',
-    actionLabel: 'Action',
-    manualSync: 'Manual sync',
-    deviceLoginPrompt: 'Open {link} and enter code:',
-    githubDeviceLogin: 'GitHub device login',
-    loginWithGithub: 'Login with GitHub',
-    deviceLogin: 'Device Login',
-    logoutGithub: 'Logout GitHub',
-    startupSync: 'Startup Sync',
-    syncing: 'Syncing...',
-    pull: 'Pull',
-    pulling: 'Pulling...',
-    push: 'Push',
-    pushing: 'Pushing...',
-    installed: 'Installed',
-    installedCount: 'Installed ({count})',
-    searchPlaceholder: 'Search skills... (e.g. flight, docker, react)',
-    skillsCount: '{count} skills',
-    newest: 'Newest',
-    az: 'A-Z',
-    loadingSkills: 'Loading skills...',
-    noSkillsFound: 'No skills found for "{query}"',
-    skillInstalled: '{name} skill installed',
-    skillUninstalled: '{name} skill uninstalled',
-    skillEnabled: '{name} skill enabled',
-    skillDisabled: '{name} skill disabled',
-
-    disabled: 'Disabled',
-    loadingContents: 'Loading skill contents...',
-    viewOnGithub: 'View on GitHub',
-    uninstalling: 'Uninstalling...',
-    uninstall: 'Uninstall',
-    installing: 'Installing...',
-    install: 'Install',
-    disable: 'Disable',
-    enable: 'Enable',
-    browseFiles: 'Browse files',
-  },
-
-  account: {
-    accounts: 'Accounts',
-    noAccountsYet: 'No saved accounts yet. Run `codex login`, then click reload.',
-    accountFallback: 'Account',
-    active: 'Active',
-    switch_: 'Switch',
-    switching: 'Switching\u2026',
-  },
-
-  sidebar: {
-    expandSidebar: 'Expand sidebar',
-    collapseSidebar: 'Collapse sidebar',
-    startNewThread: 'Start new thread',
-    newThread: 'New thread',
-    automations: 'Automations',
-  },
-
-  queue: {
-    editQueued: 'Edit queued message',
-    steerNow: 'Send now without interrupting work',
-    deleteQueued: 'Delete queued message',
-    steerButton: 'Steer',
-    editButton: 'Edit',
-    emptyQueued: '(empty queued message)',
-    imageCount: '{count} image | {count} images',
-    fileCount: '{count} file | {count} files',
-    skillCount: '{count} skill | {count} skills',
-  },
-
-  rateLimit: {
-    rateLimits: 'Rate limits',
-    window: 'Window',
-    left: '{percent}% left',
-    used: '{percent}%',
-    resettingNow: 'Resetting now',
-    resetsIn: 'Resets in {time}',
-    unlimitedCredits: 'Unlimited credits',
-    creditsBalance: 'Credits {balance}',
-    creditsAvailable: 'Credits available',
-    education: 'Education',
-    plan: 'Plan',
-    primaryWindow: 'Primary window',
-    secondaryWindow: 'Secondary window',
-    weeklyRefresh: 'Weekly refresh',
-    credits: 'Credits',
-    unlimited: 'unlimited',
-    contextWindow: 'Context window',
-    inContext: 'In context',
-    lastTurn: 'Last turn',
-    sessionTotal: 'Session total',
-    total: 'total',
-    input: 'input',
-    cached: 'cached',
-    output: 'output',
-    reasoning: 'reasoning',
-  },
-
-  home: {
-    letsBuild: "Let's build",
-    selectedFolder: 'Selected folder: {path}',
-    selectFolder: 'Select folder',
-    createProject: 'Create Project',
-    runtimeDescription: 'Local project uses the selected folder directly. New worktree creates an isolated Git worktree before the first prompt.',
-    searchThreads: 'Search threads',
-    filterThreads: 'Filter threads...',
-    clearSearch: 'Clear search',
-    skillsHub: 'Skills Hub',
-    showMore: 'Show more',
-    showLess: 'Show less',
-    newThread: 'New thread',
-    today: 'Today',
-    yesterday: 'Yesterday',
-    previous7Days: 'Previous 7 days',
-    previous30Days: 'Previous 30 days',
-    older: 'Older',
-    pinned: 'Pinned',
-    noThreads: 'No threads yet',
-    noMatchingThreads: 'No matching threads',
-    loadingThreads: 'Loading threads...',
-    threads: 'Threads',
-    organize: 'Organize',
-    organizeThreads: 'Organize threads',
-    byProject: 'By project',
-    chronologicalList: 'Chronological list',
-    editName: 'Edit name',
-    projectName: 'Project name',
-    archive: 'Archive',
-    rename: 'Rename',
-    renameHint: 'Make it short and recognizable.',
-    addTitlePlaceholder: 'Add title...',
-    fork: 'Fork',
-    browseFiles: 'Browse files',
-    exportThread: 'Export thread',
-    deleteThread: 'Delete thread',
-    deleteThreadTitle: 'Delete thread?',
-    archiveAndRemoveAutomationTitle: 'Archive chat and remove automation?',
-    archiveAndRemoveAutomationDesc: 'This will archive the thread "{title}" and remove the attached heartbeat automation.',
-    deleteThreadDesc: 'This will archive the thread "{title}". You can find it later in archived threads.',
-    archiveAndRemove: 'Archive and remove',
-    delete: 'Delete',
-    cancel: 'Cancel',
-    save: 'Save',
-    saving: 'Saving\u2026',
-    remove: 'Remove',
-    removeProject: 'Remove project',
-    reorderProject: 'Reorder project',
-    addAutomation: 'Add automation\u2026',
-    editAutomation: 'Edit automation\u2026',
-    threadAutomation: 'Thread automation',
-    automationDesc: 'This creates a heartbeat automation attached to the selected thread.',
-    automationName: 'Name',
-    automationNamePlaceholder: 'Automation name',
-    automationPrompt: 'Prompt',
-    automationPromptPlaceholder: 'Describe what the automation should do',
-    automationSchedule: 'Schedule (RRULE)',
-    automationStatus: 'Status',
-    automationActive: 'Active',
-    automationPaused: 'Paused',
-    failedToSaveAutomation: 'Failed to save automation',
-    failedToRemoveAutomation: 'Failed to remove automation',
-    awaitingApproval: 'Awaiting approval',
-    awaitingResponse: 'Awaiting response',
-    notScheduled: 'Not scheduled',
-    nextRun: 'Next run',
-    worktreeThread: 'Worktree thread',
-    auto: 'Auto',
-  },
-
-  settings: {
-    accounts: 'Accounts',
-    reload: 'Reload',
-    reloading: 'Reloading\u2026',
-    requireCmdEnter: 'Require \u2318 + enter to send',
-    whenBusySendAs: 'When busy, send as',
-    appearance: 'Appearance',
-    language: 'Language',
-    chatWidth: 'Chat width',
-    standard: 'Standard',
-    wide: 'Wide',
-    extraWide: 'Extra wide',
-    system: 'System',
-    light: 'Light',
-    dark: 'Dark',
-    clickToggleDictation: 'Click to toggle dictation',
-    autoSendDictation: 'Auto send dictation',
-    githubTrending: 'GitHub trending projects',
-    provider: 'Provider',
-    dictationLanguage: 'Dictation language',
-    autoDetect: 'Auto-detect',
-    telegram: 'Telegram',
-    notConfigured: 'Not configured',
-    configured: 'Configured',
-    expandAccounts: 'Expand accounts',
-    collapseAccounts: 'Collapse accounts',
-    workspace: 'Workspace',
-    runCodexLogin: 'Run `codex login`, then click reload.',
-    active: 'Active',
-    switch_: 'Switch',
-    switching: 'Switching\u2026',
-    unavailable: 'Unavailable',
-    remove: 'Remove',
-    removeConfirm: 'Confirm remove?',
-    removing: 'Removing\u2026',
-    openRouterApiKey: 'OpenRouter API key',
-    getApiKey: 'Get API key',
-    customEndpoint: 'Custom endpoint',
-    endpointUrl: 'Endpoint URL',
-    apiKey: 'API key',
-    save: 'Save',
-    saving: 'Saving\u2026',
-    conversationStyle: 'Conversation style',
-    conversationStyleClean: 'Clean',
-    conversationStyleDev: 'Developer',
-    conversationStyleCleanDesc: 'Only final replies are shown; tool calls and thinking are collapsed.',
-    conversationStyleDevDesc: 'All tool calls, commands, and file changes are shown inline.',
-    configEditor: 'Config Editor',
-    configSaved: 'Config saved successfully',
-    configSaveError: 'Failed to save config',
-  },
-
-  terminal: {
-    title: 'Terminal',
-    toggle: 'Toggle terminal ({shortcut})',
-    toggleLabel: 'Toggle terminal',
-    exited: '[terminal exited]',
-    newSession: 'New session',
-  },
-
-  context: {
-    label: 'Context',
-    awaitingData: 'Awaiting data',
-    updatesAfter: 'Updates after the next token usage event',
-    waitingEvents: 'Waiting for Codex thread/tokenUsage/updated events for this thread.',
-    tokensLeft: '{count} left',
-    tokensUsed: '{count} used',
-    usedOfTotal: '{used} used / {total}',
-    windowUnavailable: 'Window size unavailable',
-    modelContextWindow: 'Model context window: {count} tokens',
-    currentUsage: 'Current context usage: {count} tokens',
-    cumulativeUsage: 'Cumulative thread usage: {count} tokens',
-    remainingContext: 'Remaining context: {count} tokens',
-    windowUnavailableTooltip: 'Model context window is unavailable in the latest usage event.',
-  },
-
-  filePreview: {
-    preview: 'Preview',
-    unsupported: 'Preview is not available for this file type.',
-    truncated: 'File is too large — showing first 1 MB only.',
-    loadFailed: 'Failed to load file preview.',
-    officeNotInstalled: 'OfficeCLI is not installed. Office file preview requires OfficeCLI.',
-  },
-
-  fileManager: {
-    title: 'Files',
-    goUp: 'Go up one level',
-    newItem: 'New file or folder',
-    upload: 'Upload',
-    uploadFiles: 'Upload files',
-    uploadFolder: 'Upload folder',
-    newFile: 'New file',
-    newFolder: 'New folder',
-    fileNamePlaceholder: 'File name...',
-    folderNamePlaceholder: 'Folder name...',
-    emptyFolder: 'Empty folder',
-    download: 'Download',
-    loadError: 'Failed to load directory.',
-    createError: 'Failed to create item.',
-    renameError: 'Failed to rename.',
-    deleteError: 'Failed to delete.',
-    uploadError: 'Upload failed.',
-    outsideWorkspace: 'Path is outside the allowed workspace.',
-    invalidPath: 'Invalid path.',
-    notADirectory: 'Path is not a directory.',
-    notAFile: 'Path is not a file.',
-    notFound: 'File or folder not found.',
-  },
-}
+const en: Record<string, string> = {}
 
 export default en
diff --git a/src/i18n/locales/zh.ts b/src/i18n/locales/zh.ts
index 7b3be9ed..d2eaff07 100644
--- a/src/i18n/locales/zh.ts
+++ b/src/i18n/locales/zh.ts
@@ -1,524 +1,571 @@
-/**
- * Chinese (Simplified) locale messages for the codexUI frontend.
- */
-const zh = {
-  common: {
-    send: '发送',
-    cancel: '取消',
-    close: '关闭',
-    skip: '跳过',
-    search: '搜索',
-    refresh: '刷新',
-    loading: '加载中',
-    edit: '编辑',
-    delete: '删除',
-    copy: '复制',
-    copied: '已复制',
-    yes: '是',
-    no: '否',
-    noResults: '无结果',
-    files: '文件',
-    file: '文件',
-    filesCount: '{count} 个文件',
-    images: '{count} 张图片',
-    skills: '技能',
-    back: '返回',
-    settings: '设置',
-  },
-
-  composer: {
-    placeholder: "输入消息... ({'@'} 引用文件, / 使用技能)",
-    placeholderNoThread: '选择一个会话以发送消息',
-    placeholderPlanMode: '正在为计划模式加载模型...',
-    addPhotosFiles: '添加照片和文件',
-    addFolder: '添加文件夹',
-    takePhoto: '拍照',
-    inProgressSend: '进行中发送',
-    steer: '引导',
-    queue: '排队',
-    fastMode: '快速模式',
-    fastModeDescOn: '速度约为 1.5 倍，信用消耗 2 倍',
-    fastModeDescOff: '默认速度，正常信用消耗',
-    fastModeSaving: '正在保存速度设置...',
-    planMode: '计划模式',
-    planModeDesc: '代理在执行前先提出计划',
-    model: '模型',
-    thinking: '思考',
-    searchModels: '搜索模型...',
-    searchSkills: '搜索技能...',
-    stopDictation: '停止听写',
-    clickToDictate: '点击听写',
-    holdToDictate: '按住听写',
-    stop: '停止',
-    stopPending: '正在保存会话，稍后即可停止',
-    sendMessage: '发送消息',
-    queueMessage: '排队消息',
-    sendAsMode: '以{mode}方式发送',
-    dropImagesOrFiles: '拖放图片或文件',
-    noMatchingFiles: '没有匹配的文件',
-    selectedImage: '已选图片',
-    removeImage: '移除 {name}',
-    removeFolder: '移除文件夹 {name}',
-    removeSkill: '移除技能 {name}',
-    removeFile: '移除 {label}',
-    uploading: '{percent}% 上传中 ({processed}/{total})',
-    noSpeechClick: '未检测到语音。请再次点击后说话。',
-    noSpeechHold: '未检测到语音。请按住麦克风后说话。',
-    micDenied: '麦克风访问被拒绝。',
-    dictationFailed: '听写失败。',
-    attachingFile: '正在附加文件...',
-    attachingFiles: '正在附加 {count} 个文件...',
-    attachFailed: '无法附加文件。',
-    attachFailedMulti: '无法附加 {count} 个文件。',
-    attachPartial: '已附加 {succeeded} 个，{failed} 个失败。',
-    attachFailedAttaching: '{failed} 个失败，正在附加 {remaining} 个文件...',
-    searchQuickProjects: '快速搜索项目',
-    nSelected: '已选 {count} 个',
-    selectDefault: '请选择...',
-    noSkillsFound: '未找到技能',
-
-    reasoningNone: '无',
-    reasoningMinimal: '最小',
-    reasoningLow: '低',
-    reasoningMedium: '中等',
-    reasoningHigh: '高',
-    reasoningExtraHigh: '超高',
-
-    runtimeLocal: '本地项目',
-    runtimeWorktree: '新工作树',
-    continueIn: '继续方式',
-    noMcpServers: '未配置 MCP 服务器',
-    noAuthToken: '没有可用的转录认证令牌。',
-    transcriptionFailed: '语音转录失败。',
-  },
-
-  conversation: {
-    loadingMessages: '正在加载消息...',
-    noMessages: '此会话暂无消息。',
-    loadEarlier: '加载更早的消息',
-    loadingEarlier: '加载中\u2026',
-    command: '（命令）',
-    noOutput: '（无输出）',
-    generatedImage: '生成的图片',
-    imagePreview: '消息图片预览',
-    embeddedImage: '内嵌消息图片',
-    expandedImage: '放大的消息图片',
-    editMessage: '编辑此消息',
-    forkThread: '从此回复分叉会话',
-    responseCopied: '回复已复制',
-    copyResponse: '复制回复',
-    jumpToLatest: '跳到最新',
-    jumpToLatestOutput: '跳到最新输出',
-    closeImagePreview: '关闭图片预览',
-    closeDiffViewer: '关闭差异查看器',
-    plan: '计划',
-    planUpdating: '更新中',
-
-    cmdRunning: '运行中',
-    cmdRunningFull: '\u27F3 运行中',
-    cmdDone: '完成',
-    cmdCompleted: '\u2713 已完成',
-    cmdExitCode: '退出码 {code}',
-    cmdFailed: '失败',
-    cmdFailedFull: '\u2717 失败',
-    cmdDeclined: '已拒绝',
-    cmdDeclinedFull: '\u2298 已拒绝',
-    cmdStopped: '已停止',
-    cmdInterrupted: '\u2298 已中断',
-
-    fileChangeAdded: '已添加',
-    fileChangeDeleted: '已删除',
-    fileChangeEdited: '已编辑',
-    fileChangeMoved: '已移动',
-    fileChangeMovedEdited: '移动并编辑',
-    fileChangeModified: '已修改的文件',
-    fileChangeReady: '就绪',
-
-    showAll: '全部显示',
-    hideAll: '全部隐藏',
-    noTypesYet: '暂无类型',
-
-    commandApproval: '需要命令审批',
-    fileChangeApproval: '需要文件更改审批',
-    permissionsApproval: '需要权限审批',
-    mcpServerInput: '需要 MCP 服务器输入',
-    inputRequired: '需要输入',
-    toolCallWaiting: '工具调用等待响应',
-  },
-
-  review: {
-    eyebrow: '审查',
-    closePane: '关闭审查面板',
-    tabChanges: '变更',
-    tabFindings: '发现',
-    compare: '比较',
-    workspace: '工作区',
-    baseBranch: '基准分支',
-    branch: '分支',
-    changes: '变更',
-    unstaged: '未暂存',
-    staged: '已暂存',
-    runReview: '运行审查',
-    reviewing: '审查中\u2026',
-    resizeFileList: '调整文件列表大小',
-    loadingReviewState: '加载审查状态',
-    notGitRepo: '此文件夹不是 Git 仓库',
-    notGitRepoDesc: '初始化 Git 以审查本地更改并运行 Codex 审查。',
-    initializeGit: '初始化 Git',
-    initializing: '初始化中\u2026',
-    baseBranchUnavailable: '基准分支不可用',
-    baseBranchUnavailableDesc: '无法为此仓库解析 `origin/HEAD`、`main` 或 `master`。',
-    noChangesInScope: '此范围内无变更',
-    workspaceClean: '当前工作区是干净的。',
-    noMergeDiff: '未找到与基准分支的合并差异。',
-    filesCount: '{count} 个文件',
-    vs: '对比 {branch}',
-    stageAll: '暂存全部',
-    unstageAll: '取消暂存全部',
-    revertAll: '还原全部',
-    stageFile: '暂存文件',
-    unstageFile: '取消暂存文件',
-    revertFile: '还原文件',
-    stageHunk: '暂存代码块',
-    unstageHunk: '取消暂存代码块',
-    revertHunk: '还原代码块',
-    noUnifiedDiff: '无统一差异可用。',
-    summary: '摘要',
-    noFindings: '暂无结构化发现',
-    noFindingsSummaryOnly: '最近一次审查仅返回了摘要文本。',
-    noFindingsRun: '运行审查以填充此面板。',
-    changedFiles: '已更改的文件',
-    reviewingChanges: '正在审查当前变更',
-    reviewingAgainst: '正在对比 {branch} 审查',
-    operationAdded: '已添加',
-    operationDeleted: '已删除',
-    operationRenamed: '已重命名',
-    operationModified: '已修改',
-    repositoryReview: '仓库审查',
-    stagedChanges: '已暂存的变更',
-    workspaceChanges: '工作区变更',
-    againstBranch: '对比 {branch}',
-  },
-
-  pending: {
-    awaitingApproval: '等待审批',
-    mcpServerInput: '需要 MCP 服务器输入',
-    awaitingResponse: '等待响应',
-    toolCallWaiting: '工具调用等待响应',
-    runCommand: '是否运行此命令？',
-    makeChanges: '是否进行这些更改？',
-    grantPermissions: '是否授予这些权限？',
-    mcpInputNeeded: 'MCP 服务器需要您的输入才能让 Codex 继续。',
-    codexNeedsAnswer: 'Codex 需要您的回答才能继续。',
-    codexWaiting: 'Codex 正在等待响应才能继续。',
-    yesApprove: '是',
-    yesForSession: '本次会话均同意',
-    declineWithNote: '不，并告诉 Codex 该怎么做',
-    continue_: '继续',
-    decline: '拒绝',
-    failToolCall: '失败工具调用',
-    successEmpty: '成功（空）',
-    returnEmptyResult: '返回空结果',
-    rejectRequest: '拒绝请求',
-    openAuthLink: '打开授权链接',
-    server: '服务器',
-    value: '值',
-    choice: '选项',
-    otherAnswer: '其他答案',
-    selectTrueOrFalse: '选择是或否',
-    selectAnOption: '选择一个选项',
-    true_: '是',
-    false_: '否',
-    pending: '待处理',
-    requiredFieldSingle: '请填写必填字段：{label}。',
-    requiredFieldMulti: '请填写必填字段：{labels}。',
-    readPermission: '读取',
-    writePermission: '写入',
-    networkAccess: '网络访问',
-  },
-
-  skills: {
-    hubTitle: '技能中心',
-    hubSubtitle: '浏览和发现来自 OpenClaw 社区的技能',
-    syncTitle: '技能同步 (GitHub)',
-    connected: '已连接',
-    loggedInAs: '已登录为 {username}',
-    notConnected: '未连接',
-    startup: '启动',
-    actionLabel: '操作',
-    manualSync: '手动同步',
-    deviceLoginPrompt: '打开 {link} 并输入代码：',
-    githubDeviceLogin: 'GitHub 设备登录',
-    loginWithGithub: '使用 GitHub 登录',
-    deviceLogin: '设备登录',
-    logoutGithub: '退出 GitHub',
-    startupSync: '启动同步',
-    syncing: '同步中...',
-    pull: '拉取',
-    pulling: '拉取中...',
-    push: '推送',
-    pushing: '推送中...',
-    installed: '已安装',
-    installedCount: '已安装 ({count})',
-    searchPlaceholder: '搜索技能... (例如 flight, docker, react)',
-    skillsCount: '{count} 个技能',
-    newest: '最新',
-    az: 'A-Z',
-    loadingSkills: '正在加载技能...',
-    noSkillsFound: '未找到 "{query}" 相关技能',
-    skillInstalled: '{name} 技能已安装',
-    skillUninstalled: '{name} 技能已卸载',
-    skillEnabled: '{name} 技能已启用',
-    skillDisabled: '{name} 技能已禁用',
-
-    disabled: '已禁用',
-    loadingContents: '正在加载技能内容...',
-    viewOnGithub: '在 GitHub 上查看',
-    uninstalling: '卸载中...',
-    uninstall: '卸载',
-    installing: '安装中...',
-    install: '安装',
-    disable: '禁用',
-    enable: '启用',
-    browseFiles: '浏览文件',
-  },
-
-  account: {
-    accounts: '账户',
-    noAccountsYet: '暂无已保存的账户。运行 `codex login`，然后点击刷新。',
-    accountFallback: '账户',
-    active: '当前',
-    switch_: '切换',
-    switching: '切换中\u2026',
-  },
-
-  sidebar: {
-    expandSidebar: '展开侧边栏',
-    collapseSidebar: '收起侧边栏',
-    startNewThread: '新建会话',
-    newThread: '新建会话',
-    automations: '自动化',
-  },
-
-  queue: {
-    editQueued: '编辑排队消息',
-    steerNow: '立即发送，不中断当前工作',
-    deleteQueued: '删除排队消息',
-    steerButton: '引导',
-    editButton: '编辑',
-    emptyQueued: '（空排队消息）',
-    imageCount: '{count} 张图片',
-    fileCount: '{count} 个文件',
-    skillCount: '{count} 个技能',
-  },
-
-  rateLimit: {
-    rateLimits: '速率限制',
-    window: '窗口',
-    left: '剩余 {percent}%',
-    used: '{percent}%',
-    resettingNow: '正在重置',
-    resetsIn: '{time}后重置',
-    unlimitedCredits: '无限信用',
-    creditsBalance: '信用余额 {balance}',
-    creditsAvailable: '信用可用',
-    education: '教育',
-    plan: '计划',
-    primaryWindow: '主窗口',
-    secondaryWindow: '次窗口',
-    weeklyRefresh: '每周刷新',
-    credits: '信用',
-    unlimited: '无限',
-    contextWindow: '上下文窗口',
-    inContext: '上下文中',
-    lastTurn: '上次轮次',
-    sessionTotal: '会话总计',
-    total: '总计',
-    input: '输入',
-    cached: '缓存',
-    output: '输出',
-    reasoning: '推理',
-  },
-
-  home: {
-    letsBuild: '开始构建',
-    selectedFolder: '已选文件夹：{path}',
-    selectFolder: '选择文件夹',
-    createProject: '创建项目',
-    runtimeDescription: '本地项目直接使用所选文件夹。新工作树会在首次提示前创建一个隔离的 Git 工作树。',
-    searchThreads: '搜索会话',
-    filterThreads: '筛选会话...',
-    clearSearch: '清除搜索',
-    skillsHub: '技能中心',
-    showMore: '显示更多',
-    showLess: '收起',
-    newThread: '新建会话',
-    today: '今天',
-    yesterday: '昨天',
-    previous7Days: '最近 7 天',
-    previous30Days: '最近 30 天',
-    older: '更早',
-    pinned: '已置顶',
-    noThreads: '暂无会话',
-    noMatchingThreads: '没有匹配的会话',
-    loadingThreads: '正在加载会话...',
-    threads: '会话',
-    organize: '整理',
-    organizeThreads: '整理会话',
-    byProject: '按项目',
-    chronologicalList: '按时间排列',
-    editName: '编辑名称',
-    projectName: '项目名称',
-    archive: '归档',
-    rename: '重命名',
-    renameHint: '请简短且易于识别。',
-    addTitlePlaceholder: '添加标题...',
-    fork: '分叉',
-    browseFiles: '浏览文件',
-    exportThread: '导出会话',
-    deleteThread: '删除会话',
-    deleteThreadTitle: '删除会话？',
-    archiveAndRemoveAutomationTitle: '归档会话并移除自动化？',
-    archiveAndRemoveAutomationDesc: '这将归档会话"{title}"并移除关联的心跳自动化。',
-    deleteThreadDesc: '这将归档会话"{title}"。您可以稍后在已归档的会话中找到它。',
-    archiveAndRemove: '归档并移除',
-    delete: '删除',
-    cancel: '取消',
-    save: '保存',
-    saving: '保存中\u2026',
-    remove: '移除',
-    removeProject: '移除项目',
-    reorderProject: '重新排序项目',
-    addAutomation: '添加自动化\u2026',
-    editAutomation: '编辑自动化\u2026',
-    threadAutomation: '会话自动化',
-    automationDesc: '这将为所选会话创建一个心跳自动化。',
-    automationName: '名称',
-    automationNamePlaceholder: '自动化名称',
-    automationPrompt: '提示词',
-    automationPromptPlaceholder: '描述自动化应执行的操作',
-    automationSchedule: '调度规则 (RRULE)',
-    automationStatus: '状态',
-    automationActive: '活跃',
-    automationPaused: '已暂停',
-    failedToSaveAutomation: '保存自动化失败',
-    failedToRemoveAutomation: '移除自动化失败',
-    awaitingApproval: '等待审批',
-    awaitingResponse: '等待响应',
-    notScheduled: '未安排',
-    nextRun: '下次运行',
-    worktreeThread: '工作树会话',
-    auto: '自动',
-  },
-
-  settings: {
-    accounts: '账户',
-    reload: '重新加载',
-    reloading: '加载中\u2026',
-    requireCmdEnter: '需要 \u2318 + 回车发送',
-    whenBusySendAs: '忙碌时发送方式',
-    appearance: '外观',
-    language: '语言',
-    chatWidth: '对话宽度',
-    standard: '标准',
-    wide: '宽',
-    extraWide: '超宽',
-    system: '跟随系统',
-    light: '浅色',
-    dark: '深色',
-    clickToggleDictation: '点击切换听写',
-    autoSendDictation: '自动发送听写',
-    githubTrending: 'GitHub 热门项目',
-    provider: '服务商',
-    dictationLanguage: '听写语言',
-    autoDetect: '自动检测',
-    telegram: 'Telegram',
-    notConfigured: '未配置',
-    configured: '已配置',
-    expandAccounts: '展开账户',
-    collapseAccounts: '收起账户',
-    workspace: '工作区',
-    runCodexLogin: '运行 `codex login`，然后点击重新加载。',
-    active: '当前',
-    switch_: '切换',
-    switching: '切换中\u2026',
-    unavailable: '不可用',
-    remove: '移除',
-    removeConfirm: '确认移除？',
-    removing: '移除中\u2026',
-    openRouterApiKey: 'OpenRouter API 密钥',
-    getApiKey: '获取 API 密钥',
-    customEndpoint: '自定义端点',
-    endpointUrl: '端点 URL',
-    apiKey: 'API 密钥',
-    save: '保存',
-    saving: '保存中\u2026',
-    conversationStyle: '对话显示风格',
-    conversationStyleClean: '简洁',
-    conversationStyleDev: '开发者',
-    conversationStyleCleanDesc: '仅显示最终回复，工具调用和思考过程折叠显示。',
-    conversationStyleDevDesc: '所有工具调用、命令和文件变更均内联显示（已完成的自动折叠）。',
-    configEditor: '配置编辑器',
-    configSaved: '配置保存成功',
-    configSaveError: '保存配置失败',
-  },
-
-  terminal: {
-    title: '终端',
-    toggle: '切换终端 ({shortcut})',
-    toggleLabel: '切换终端',
-    exited: '[终端已退出]',
-    newSession: '新会话',
-  },
-
-  context: {
-    label: '上下文',
-    awaitingData: '等待数据',
-    updatesAfter: '将在下次 token 使用事件后更新',
-    waitingEvents: '正在等待此会话的 Codex token 使用更新事件。',
-    tokensLeft: '{count} 剩余',
-    tokensUsed: '{count} 已用',
-    usedOfTotal: '{used} 已用 / {total}',
-    windowUnavailable: '窗口大小不可用',
-    modelContextWindow: '模型上下文窗口：{count} tokens',
-    currentUsage: '当前上下文用量：{count} tokens',
-    cumulativeUsage: '会话累计用量：{count} tokens',
-    remainingContext: '剩余上下文：{count} tokens',
-    windowUnavailableTooltip: '最新使用事件中无法获取模型上下文窗口大小。',
-  },
-
-  filePreview: {
-    preview: '预览',
-    unsupported: '此文件类型暂不支持预览。',
-    truncated: '文件过大，仅显示前 1 MB 内容。',
-    loadFailed: '加载文件预览失败。',
-    officeNotInstalled: '未安装 OfficeCLI。预览 Office 文件需要安装 OfficeCLI。',
-  },
-
-  fileManager: {
-    title: '文件',
-    goUp: '返回上级目录',
-    newItem: '新建文件或文件夹',
-    upload: '上传',
-    uploadFiles: '上传文件',
-    uploadFolder: '上传文件夹',
-    newFile: '新建文件',
-    newFolder: '新建文件夹',
-    fileNamePlaceholder: '文件名...',
-    folderNamePlaceholder: '文件夹名...',
-    emptyFolder: '空文件夹',
-    download: '下载',
-    loadError: '加载目录失败。',
-    createError: '创建失败。',
-    renameError: '重命名失败。',
-    deleteError: '删除失败。',
-    uploadError: '上传失败。',
-    outsideWorkspace: '路径超出了允许的工作区范围。',
-    invalidPath: '路径无效。',
-    notADirectory: '路径不是一个目录。',
-    notAFile: '路径不是一个文件。',
-    notFound: '文件或文件夹未找到。',
-  },
+const zh: Record<string, string> = {
+  '(command)': '（命令）',
+  '(empty queued message)': '（空排队消息）',
+  '(no output)': '（无输出）',
+  '402 Payment Required': '402 需要付费',
+  'A-Z': 'A-Z',
+  'API format': 'API 格式',
+  'API key': 'API 密钥',
+  'About 1.5x faster, with credits used at 2x': '速度约为 1.5 倍，信用消耗 2 倍',
+  'Account': '账户',
+  'Accounts': '账户',
+  'Action': '操作',
+  'Active': '当前',
+  'Add folder': '添加文件夹',
+  'Add photos & files': '添加照片和文件',
+  'Add title...': '添加标题...',
+  'Added': '已添加',
+  'Against': '对比',
+  'Against {branch}': '对比 {branch}',
+  'Agent proposes a plan before acting': '代理在执行前先提出计划',
+  'All tool calls, commands, and file changes are shown inline.': '所有工具调用、命令和文件变更均内联显示（已完成的自动折叠）。',
+  'Allowed Telegram user IDs': '允许的 Telegram 用户 ID',
+  'An MCP server needs your input before Codex can continue.': 'MCP 服务器需要您的输入才能让 Codex 继续。',
+  'Answer the required field: {label}.': '请填写必填字段：{label}。',
+  'Answer the required fields: {labels}.': '请填写必填字段：{labels}。',
+  'AppServer API': 'AppServer API',
+  'Appearance': '外观',
+  'Approval choices': '审批选项',
+  'Archive': '归档',
+  'Archive and remove': '归档并移除',
+  'Archive chat and remove automation?': '归档会话并移除自动化？',
+  'At least one allowed Telegram user ID or * is required.': '至少需要一个允许的 Telegram 用户 ID 或 `*`。',
+  'Attaching': '正在附加',
+  'Attaching file...': '正在附加文件...',
+  'Attaching {count} files...': '正在附加 {count} 个文件...',
+  'Auto': '自动',
+  'Auto send dictation': '自动发送听写',
+  'Auto-detect': '自动检测',
+  'Automatically send transcribed dictation when recording stops.': '录音停止后自动发送转写结果。',
+  'Automation name': '自动化名称',
+  'Automations': '自动化',
+  'Awaiting approval': '等待审批',
+  'Awaiting data': '等待数据',
+  'Awaiting response': '等待响应',
+  'Back': '返回',
+  'Base branch': '基准分支',
+  'Base branch unavailable': '基准分支不可用',
+  'Bot token': 'Bot Token',
+  'Branch': '分支',
+  'Browse and discover skills from the OpenClaw community': '浏览和发现来自 OpenClaw 社区的技能',
+  'Browse files': '浏览文件',
+  'By project': '按项目',
+  'Cancel': '取消',
+  'Changed files': '已更改的文件',
+  'Changes': '变更',
+  'Chat width': '对话宽度',
+  'Choice': '选项',
+  'Choose a thread': '选择一个线程',
+  'Choose folder': '选择文件夹',
+  'Choose how wide the conversation column and composer can grow on desktop screens.': '选择桌面端会话列和输入框的最大宽度。',
+  'Choose the API provider for the Codex backend': '选择 Codex 后端使用的 API 提供方',
+  'Choose the interface language for the app.': '选择应用界面语言。',
+  'Choose transcription language or keep auto-detect.': '选择转写语言，或保持自动检测。',
+  'Chronological list': '按时间排列',
+  'Clean': '简洁',
+  'Clear search': '清除搜索',
+  'Click again to remove': '再次点击以移除',
+  'Click to dictate': '点击听写',
+  'Click to toggle dictation': '点击切换听写',
+  'Close': '关闭',
+  'Close diff viewer': '关闭差异查看器',
+  'Close image preview': '关闭图片预览',
+  'Close review pane': '关闭审查面板',
+  'Codex is waiting for a response before it can continue.': 'Codex 正在等待响应才能继续。',
+  'Codex needs your answer before it can continue.': 'Codex 需要您的回答才能继续。',
+  'Collapse accounts': '收起账户',
+  'Collapse sidebar': '收起侧边栏',
+  'Command approval required': '需要命令审批',
+  'Compare': '比较',
+  'Completions': 'Completions',
+  'Config Editor': '配置编辑器',
+  'Config saved successfully': '配置保存成功',
+  'Configured': '已配置',
+  'Configured (offline)': '已配置（离线）',
+  'Confirm remove?': '确认移除？',
+  'Connected': '已连接',
+  'Context': '上下文',
+  'Context window': '上下文窗口',
+  'Continue': '继续',
+  'Continue in': '继续方式',
+  'Conversation style': '对话显示风格',
+  'Copied': '已复制',
+  'Copy': '复制',
+  'Copy response': '复制回复',
+  'Could not attach': '无法附加',
+  'Could not attach file.': '无法附加文件。',
+  'Could not attach {count} files.': '无法附加 {count} 个文件。',
+  'Could not resolve `origin/HEAD`, `main`, or `master` for this repository.': '无法为此仓库解析 `origin/HEAD`、`main` 或 `master`。',
+  'Create Project': '创建项目',
+  'Creating a worktree and running setup.': '正在创建工作树并执行初始化。',
+  'Creating worktree': '创建工作树',
+  'Credits': '信用',
+  'Credits available': '信用可用',
+  'Credits {balance}': '信用余额 {balance}',
+  'Cumulative thread usage': '累计线程使用量',
+  'Cumulative thread usage: {count} tokens': '会话累计用量：{count} tokens',
+  'Current context usage': '当前上下文使用量',
+  'Current context usage: {count} tokens': '当前上下文用量：{count} tokens',
+  'Current folder': '当前文件夹',
+  'Custom endpoint': '自定义端点',
+  'Custom endpoint API format': '自定义端点 API 格式',
+  'Custom endpoint URL': '自定义端点 URL',
+  'Dark': '深色',
+  'Decline': '拒绝',
+  'Declined': '已拒绝',
+  'Default speed with normal credit usage': '默认速度，正常信用消耗',
+  'Delete': '删除',
+  'Delete queued message': '删除排队消息',
+  'Delete thread': '删除会话',
+  'Delete thread?': '删除会话？',
+  'Deleted': '已删除',
+  'Describe what the automation should do': '描述自动化应执行的操作',
+  'Developer': '开发者',
+  'Device Login': '设备登录',
+  'Dictation failed.': '听写失败。',
+  'Dictation language': '听写语言',
+  'Disable': '禁用',
+  'Disabled': '已禁用',
+  'Do you want to grant these permissions?': '是否授予这些权限？',
+  'Do you want to make these changes?': '是否进行这些更改？',
+  'Do you want to run this command?': '是否运行此命令？',
+  'Done': '完成',
+  'Download': '下载',
+  'Drop images or files': '拖放图片或文件',
+  'Edit': '编辑',
+  'Edit message': '编辑消息',
+  'Edit name': '编辑名称',
+  'Edit queued message': '编辑排队消息',
+  'Edit this message': '编辑此消息',
+  'Edited': '已编辑',
+  'Education': '教育',
+  'Embedded message image': '内嵌消息图片',
+  'Empty folder': '空文件夹',
+  'Enable': '启用',
+  'Endpoint URL': '端点 URL',
+  'English': 'English',
+  'Exit {code}': '退出码 {code}',
+  'Expand accounts': '展开账户',
+  'Expand sidebar': '展开侧边栏',
+  'Expanded message image': '放大的消息图片',
+  'Export thread': '导出会话',
+  'Extra high': '超高',
+  'Extra wide': '超宽',
+  'Fail Tool Call': '失败工具调用',
+  'Failed': '失败',
+  'Failed to apply review action': '应用审查操作失败',
+  'Failed to connect Telegram bot': '连接 Telegram 机器人失败',
+  'Failed to create item.': '创建失败。',
+  'Failed to delete.': '删除失败。',
+  'Failed to initialize Git': '初始化 Git 失败',
+  'Failed to load accounts': '加载账户失败',
+  'Failed to load directory.': '加载目录失败。',
+  'Failed to load file preview.': '加载文件预览失败。',
+  'Failed to load review result': '加载审查结果失败',
+  'Failed to load review snapshot': '加载审查快照失败',
+  'Failed to refresh accounts': '刷新账户失败',
+  'Failed to remove account': '移除账户失败',
+  'Failed to remove automation': '移除自动化失败',
+  'Failed to rename.': '重命名失败。',
+  'Failed to save automation': '保存自动化失败',
+  'Failed to save config': '保存配置失败',
+  'Failed to start review': '启动审查失败',
+  'Failed to switch account': '切换账户失败',
+  'False': '否',
+  'Fast mode': '快速模式',
+  'Fetching account details…': '获取账户详情中…',
+  'File change approval required': '需要文件更改审批',
+  'File is too large — showing first 1 MB only.': '文件过大，仅显示前 1 MB 内容。',
+  'File name...': '文件名...',
+  'File or folder not found.': '文件或文件夹未找到。',
+  'Files': '文件',
+  'Filter folders...': '筛选文件夹...',
+  'Filter threads...': '筛选会话...',
+  'Findings': '发现',
+  'Finish the current turn and pending requests before removing the active account.': '请先完成当前轮次并处理待处理请求后再移除当前活动账户。',
+  'Finish the current turn and pending requests before switching accounts.': '请先完成当前轮次并处理待处理请求后再切换账户。',
+  'Folder name': '文件夹名称',
+  'Folder name...': '文件夹名...',
+  'Fork': '分叉',
+  'Fork thread from this response': '从此回复分叉会话',
+  'Generated image': '生成的图片',
+  'Get API key': '获取 API 密钥',
+  'GitHub device login': 'GitHub 设备登录',
+  'GitHub trending projects': 'GitHub 热门项目',
+  'Go up one level': '返回上级目录',
+  'Hide': '隐藏',
+  'Hide all': '全部隐藏',
+  'Hide terminal': '隐藏终端',
+  'High': '高',
+  'Hold to dictate': '按住听写',
+  'If a turn is still running, choose whether a new prompt should steer the current turn or be queued.': '如果当前轮次仍在运行，选择新提示是引导当前轮次还是加入队列。',
+  'In context': '上下文中',
+  'In-progress send': '进行中发送',
+  'Initialize Git': '初始化 Git',
+  'Initialize Git to review local changes and run Codex review.': '初始化 Git 以审查本地更改并运行 Codex 审查。',
+  'Initializing…': '初始化中…',
+  'Input required': '需要输入',
+  'Install': '安装',
+  'Installed': '已安装',
+  'Installed ({count})': '已安装 ({count})',
+  'Installing...': '安装中...',
+  'Invalid path.': '路径无效。',
+  'Jump to latest': '跳到最新',
+  'Jump to latest output': '跳到最新输出',
+  'Language': '语言',
+  'Last turn': '上次轮次',
+  "Let's build": "开始构建",
+  'Light': '浅色',
+  'Load earlier messages': '加载更早的消息',
+  'Loading': '加载中',
+  'Loading branches…': '加载分支中…',
+  'Loading folders…': '加载文件夹中…',
+  'Loading messages...': '正在加载消息...',
+  'Loading method catalog...': '加载方法目录中...',
+  'Loading models for plan mode...': '正在为计划模式加载模型...',
+  'Loading quota…': '加载额度中…',
+  'Loading review state': '加载审查状态',
+  'Loading skill contents...': '正在加载技能内容...',
+  'Loading skills...': '正在加载技能...',
+  'Loading threads...': '正在加载会话...',
+  'Loading trending projects...': '加载热门项目中...',
+  'Local project': '本地项目',
+  'Local project uses the selected folder directly. New worktree creates an isolated Git worktree before the first prompt.': '本地项目直接使用所选文件夹。新工作树会在首次提示前创建一个隔离的 Git 工作树。',
+  'Logged in as': '已登录为',
+  'Logged in as {username}': '已登录为 {username}',
+  'Login with GitHub': '使用 GitHub 登录',
+  'Logout GitHub': '退出 GitHub',
+  'Low': '低',
+  'MCP server input required': '需要 MCP 服务器输入',
+  'Make it short and recognizable.': '请简短且易于识别。',
+  'Manual sync': '手动同步',
+  'Medium': '中等',
+  'Message image preview': '消息图片预览',
+  'Microphone access was denied.': '麦克风访问被拒绝。',
+  'Minimal': '最小',
+  'Model': '模型',
+  'Model context window': '模型上下文窗口',
+  'Model context window is unavailable in the latest usage event.': '最新使用事件中无法获取模型上下文窗口大小。',
+  'Model context window: {count} tokens': '模型上下文窗口：{count} tokens',
+  'Modified': '已修改',
+  'Modified files': '已修改的文件',
+  'Moved': '已移动',
+  'Moved + edited': '移动并编辑',
+  'Name': '名称',
+  'Network access': '网络访问',
+  'New file': '新建文件',
+  'New file or folder': '新建文件或文件夹',
+  'New folder': '新建文件夹',
+  'New session': '新会话',
+  'New terminal': '新终端',
+  'New thread': '新建会话',
+  'New worktree': '新工作树',
+  'New worktree branch will start from {branch}.': '新工作树分支将从 {branch} 开始。',
+  'Newest': '最新',
+  'Next run': '下次运行',
+  'No': '否',
+  'No Git branches found for this folder.': '此文件夹未找到 Git 分支。',
+  'No MCP servers configured': '未配置 MCP 服务器',
+  'No auth token available for transcription.': '没有可用的转录认证令牌。',
+  'No changes in this scope': '此范围内无变更',
+  'No description available.': '暂无描述。',
+  'No diff available': '没有可用 diff',
+  'No folders match this filter.': '没有匹配此筛选条件的文件夹。',
+  'No matching files': '没有匹配的文件',
+  'No matching threads': '没有匹配的会话',
+  'No merge diff found against the base branch.': '未找到与基准分支的合并差异。',
+  'No messages in this thread yet.': '此会话暂无消息。',
+  'No results': '无结果',
+  'No saved accounts yet. Run `codex login`, then click reload.': '暂无已保存的账户。运行 `codex login`，然后点击刷新。',
+  'No skills found': '未找到技能',
+  'No skills found for "{query}"': '未找到 "{query}" 相关技能',
+  'No speech detected. Click again after speaking.': '未检测到语音。请再次点击后说话。',
+  'No speech detected. Hold the mic and speak.': '未检测到语音。请按住麦克风后说话。',
+  'No structured findings yet': '暂无结构化发现',
+  'No subfolders found here.': '这里没有子文件夹。',
+  'No threads': '没有线程',
+  'No threads yet': '暂无会话',
+  'No types yet': '暂无类型',
+  'No unified diff available.': '无统一差异可用。',
+  'No, and tell Codex what to do differently': '不，并告诉 Codex 该怎么做',
+  'None': '无',
+  'Not configured': '未配置',
+  'Not connected': '未连接',
+  'Not scheduled': '未安排',
+  'OfficeCLI is not installed. Office file preview requires OfficeCLI.': '未安装 OfficeCLI。预览 Office 文件需要安装 OfficeCLI。',
+  'Older': '更早',
+  'Online': '在线',
+  'Only final replies are shown; tool calls and thinking are collapsed.': '仅显示最终回复，工具调用和思考过程折叠显示。',
+  'Open': '打开',
+  'Open authorization link': '打开授权链接',
+  'Open {link} and enter code:': '打开 {link} 并输入代码：',
+  'OpenCode Zen API key': 'OpenCode Zen API Key',
+  'OpenRouter API format': 'OpenRouter API 格式',
+  'OpenRouter API key': 'OpenRouter API 密钥',
+  'Opening…': '打开中…',
+  'Organize': '整理',
+  'Organize threads': '整理会话',
+  'Other answer': '其他答案',
+  'Path is not a directory.': '路径不是一个目录。',
+  'Path is not a file.': '路径不是一个文件。',
+  'Path is outside the allowed workspace.': '路径超出了允许的工作区范围。',
+  'Paused': '已暂停',
+  'Permissions approval required': '需要权限审批',
+  'Pinned': '已置顶',
+  'Plan': '计划',
+  'Plan mode': '计划模式',
+  'Preview': '预览',
+  'Preview is not available for this file type.': '此文件类型暂不支持预览。',
+  'Previous 30 days': '最近 30 天',
+  'Previous 7 days': '最近 7 天',
+  'Primary window': '主窗口',
+  'Project name': '项目名称',
+  'Prompt': '提示词',
+  'Provider': '服务商',
+  'Pull': '拉取',
+  'Pulling...': '拉取中...',
+  'Push': '推送',
+  'Pushing...': '推送中...',
+  'Put one Telegram user ID per line or separate them with commas. Use `*` to allow all Telegram users. Unauthorized users will see their own ID in the rejection message so they can copy it here.': '每行填写一个 Telegram 用户 ID，或用逗号分隔。使用 `*` 可允许所有 Telegram 用户。未授权用户会在拒绝消息中看到自己的 ID，方便复制到这里。',
+  'Queue': '排队',
+  'Queue message': '排队消息',
+  'Quick search project': '快速搜索项目',
+  'Quick search projects': '快速搜索项目',
+  'Quota unavailable': '额度不可用',
+  'Rate limits': '速率限制',
+  'Read': '读取',
+  'Ready': '就绪',
+  'Refresh': '刷新',
+  'Reject Request': '拒绝请求',
+  'Reload': '重新加载',
+  'Reloading…': '重新加载中…',
+  'Remaining context': '剩余上下文',
+  'Remaining context: {count} tokens': '剩余上下文：{count} tokens',
+  'Remove': '移除',
+  'Remove custom key, use community keys': '移除自定义 key，改用社区 key',
+  'Remove folder {name}': '移除文件夹 {name}',
+  'Remove project': '移除项目',
+  'Remove skill {name}': '移除技能 {name}',
+  'Remove {label}': '移除 {label}',
+  'Remove {name}': '移除 {name}',
+  'Removing…': '移除中…',
+  'Rename': '重命名',
+  'Rename thread': '重命名线程',
+  'Renamed': '已重命名',
+  'Reorder project': '重新排序项目',
+  'Repository review': '仓库审查',
+  'Require ⌘ + enter to send': '需要 ⌘ + Enter 才发送',
+  'Resets in {time}': '{time}后重置',
+  'Resetting now': '正在重置',
+  'Resize file list': '调整文件列表大小',
+  'Response copied': '回复已复制',
+  'Responses': 'Responses',
+  'Retry': '重试',
+  'Return Empty Result': '返回空结果',
+  'Revert all': '还原全部',
+  'Revert file': '还原文件',
+  'Revert hunk': '还原代码块',
+  'Review': '审查',
+  'Review in progress': '审查进行中',
+  'Reviewing against {branch}': '正在对比 {branch} 审查',
+  'Reviewing current changes': '正在审查当前变更',
+  'Reviewing…': '审查中…',
+  'Run `codex login`, then click reload.': '运行 `codex login`，然后点击重新加载。',
+  'Run review': '运行审查',
+  'Run review to populate this pane.': '运行审查以填充此面板。',
+  'Running': '运行中',
+  'Save': '保存',
+  'Save Telegram config': '保存 Telegram 配置',
+  'Saving speed setting...': '正在保存速度设置...',
+  'Saving thread before stop is available': '正在保存会话，稍后即可停止',
+  'Saving…': '保存中…',
+  'Schedule (RRULE)': '调度规则 (RRULE)',
+  'Search': '搜索',
+  'Search branches...': '搜索分支...',
+  'Search daily': '搜索（日）',
+  'Search language...': '搜索语言...',
+  'Search models...': '搜索模型...',
+  'Search monthly': '搜索（月）',
+  'Search skills...': '搜索技能...',
+  'Search skills... (e.g. flight, docker, react)': '搜索技能... (例如 flight, docker, react)',
+  'Search threads': '搜索会话',
+  'Search weekly': '搜索（周）',
+  'Secondary window': '次窗口',
+  'Select a thread to send a message': '选择一个会话以发送消息',
+  'Select an option': '选择一个选项',
+  'Select branch': '选择分支',
+  'Select folder': '选择文件夹',
+  'Select true or false': '选择是或否',
+  'Select...': '请选择...',
+  'Selected folder': '已选文件夹',
+  'Selected folder: {path}': '已选文件夹：{path}',
+  'Selected image': '已选图片',
+  'Send': '发送',
+  'Send as {mode}': '以{mode}方式发送',
+  'Send message': '发送消息',
+  'Send now without interrupting work': '立即发送，不中断当前工作',
+  'Server': '服务器',
+  'Service worker registration failed.': 'Service Worker 注册失败。',
+  'Session total': '会话总计',
+  'Set': '设置',
+  'Settings': '设置',
+  'Show all': '全部显示',
+  'Show hidden folders': '显示隐藏文件夹',
+  'Show less': '收起',
+  'Show more': '显示更多',
+  'Show or hide GitHub trending project cards on the new thread screen.': '显示或隐藏新线程页面上的 GitHub 热门项目卡片。',
+  'Simplified Chinese': '简体中文',
+  'Skills': '技能',
+  'Skills Hub': '技能中心',
+  'Skills Sync (GitHub)': '技能同步 (GitHub)',
+  'Skip': '跳过',
+  'Stage all': '暂存全部',
+  'Stage file': '暂存文件',
+  'Stage hunk': '暂存代码块',
+  'Staged': '已暂存',
+  'Staged changes': '已暂存的变更',
+  'Standard': '标准',
+  'Start new thread': '新建会话',
+  'Startup': '启动',
+  'Startup Sync': '启动同步',
+  'Status': '状态',
+  'Steer': '引导',
+  'Stop': '停止',
+  'Stop dictation': '停止听写',
+  'Stopped': '已停止',
+  'Success (Empty)': '成功（空）',
+  'Summary': '摘要',
+  'Switch': '切换',
+  'Switch between system theme, light mode, and dark mode.': '在跟随系统、浅色和深色主题之间切换。',
+  'Switching…': '切换中…',
+  'Syncing...': '同步中...',
+  'System': '跟随系统',
+  'Take photo': '拍照',
+  'Telegram': 'Telegram',
+  'Telegram bot configured. Only allowlisted Telegram users can use the bridge.': 'Telegram 机器人已配置。只有白名单中的 Telegram 用户可以使用桥接。',
+  'Telegram bot token is required.': '需要填写 Telegram Bot Token。',
+  'Terminal': '终端',
+  'Terminal attach failed': '终端附加失败',
+  'Terminal input failed': '终端输入失败',
+  'The latest review only returned summary text.': '最近一次审查仅返回了摘要文本。',
+  'Thinking': '思考',
+  'This creates a heartbeat automation attached to the selected thread.': '这将为所选会话创建一个心跳自动化。',
+  'This folder is not a Git repository': '此文件夹不是 Git 仓库',
+  'This summary was restored from the final answer text, but the thread history does not include patch diff content for this file.': '此摘要是从最终回答文本恢复的，但线程历史中不包含该文件的补丁 diff 内容。',
+  'This will archive the thread "{title}" and remove the attached heartbeat automation.': '这将归档会话"{title}"并移除关联的心跳自动化。',
+  'This will archive the thread "{title}". You can find it later in archived threads.': '这将归档会话"{title}"。您可以稍后在已归档的会话中找到它。',
+  'Thread automation': '会话自动化',
+  'Thread title': '线程标题',
+  'Threads': '会话',
+  'Today': '今天',
+  'Toggle terminal': '切换终端',
+  'Toggle terminal ({shortcut})': '切换终端 ({shortcut})',
+  'Tool call waiting for response': '工具调用等待响应',
+  'Transcription failed.': '语音转录失败。',
+  'Trending GitHub projects': 'GitHub 热门项目',
+  'Trending daily': '热门（日）',
+  'Trending monthly': '热门（月）',
+  'Trending repos are unavailable right now.': '当前无法获取热门仓库。',
+  'Trending weekly': '热门（周）',
+  'True': '是',
+  'Type a message... (@ for files, / for skills)': '输入消息...（@ 选择文件，/ 选择技能）',
+  "Type a message... ({'@'} for files, / for skills)": "输入消息... ({'@'} 引用文件, / 使用技能)",
+  'UI language': '界面语言',
+  'Unable to create worktree. Try again or switch to Local project.': '无法创建工作树。请重试，或切换到本地项目。',
+  'Unavailable': '不可用',
+  'Unavailable account': '不可用账户',
+  'Uninstall': '卸载',
+  'Uninstalling...': '卸载中...',
+  'Unlimited credits': '无限信用',
+  'Unstage all': '取消暂存全部',
+  'Unstage file': '取消暂存文件',
+  'Unstage hunk': '取消暂存代码块',
+  'Unstaged': '未暂存',
+  'Updates after the next token usage event': '将在下次 token 使用事件后更新',
+  'Updating': '更新中',
+  'Upload': '上传',
+  'Upload failed.': '上传失败。',
+  'Upload files': '上传文件',
+  'Upload folder': '上传文件夹',
+  'Use click-to-start and click-to-stop dictation instead of hold-to-talk.': '使用点击开始/停止听写，而不是按住说话。',
+  'Value': '值',
+  'View on GitHub': '在 GitHub 上查看',
+  'Waiting for Codex thread/tokenUsage/updated events for this thread.': '正在等待此会话的 Codex token 使用更新事件。',
+  'Weekly refresh': '每周刷新',
+  'Welcome to codexui. npm: https://www.npmjs.com/package/@nervmor/codexui': '欢迎使用 codexui。npm: https://www.npmjs.com/package/@nervmor/codexui',
+  'When busy, send as': '忙碌时发送方式',
+  'When enabled, press Enter to send. When disabled, use Command+Enter to send.': '启用时按 Enter 发送；禁用时使用 Command+Enter 发送。',
+  'Wide': '宽',
+  'Window': '窗口',
+  'Window size unavailable': '窗口大小不可用',
+  'Workspace': '工作区',
+  'Workspace changes': '工作区变更',
+  'Worktree name and version': '工作树名称和版本',
+  'Worktree setup failed': '工作树初始化失败',
+  'Worktree thread': '工作树会话',
+  'Write': '写入',
+  'Yes': '是',
+  'Yes for Session': '本次会话均同意',
+  'Yesterday': '昨天',
+  'Your current workspace is clean.': '当前工作区是干净的。',
+  '[terminal exited]': '[终端已退出]',
+  'allow all users': '允许所有用户',
+  'allowed user(s)': '个允许用户',
+  'and enter code:': '并输入代码：',
+  'attached': '已附加',
+  'attaching': '正在附加',
+  'cached': '缓存',
+  'chat(s)': '个聊天',
+  'credits': '额度',
+  'disabled': '已禁用',
+  'enabled': '已启用',
+  'error': '错误',
+  'failed': '失败',
+  'file': '文件',
+  'files': '文件',
+  'files.': '个文件。',
+  'files...': '个文件...',
+  'image': '图片',
+  'images': '图片',
+  'input': '输入',
+  'left': '剩余',
+  'output': '输出',
+  'pending': '待处理',
+  'pin': '固定',
+  'reasoning': '推理',
+  'selected': '已选',
+  'skill': '技能',
+  'skills': '技能',
+  'thread(s)': '个线程',
+  'tokens': 'tokens',
+  'total': '总计',
+  'unknown': '未知',
+  'unlimited': '无限',
+  'used': '已用',
+  'vs {branch}': '对比 {branch}',
+  'weekly remaining': '周剩余额度',
+  'zh-CN': 'en',
+  '{count} file | {count} files': '{count} 个文件',
+  '{count} files': '{count} 个文件',
+  '{count} image | {count} images': '{count} 张图片',
+  '{count} left': '{count} 剩余',
+  '{count} selected': '已选 {count} 个',
+  '{count} skill | {count} skills': '{count} 个技能',
+  '{count} skills': '{count} 个技能',
+  '{count} used': '{count} 已用',
+  '{failed} failed, attaching {remaining} files...': '{failed} 个失败，正在附加 {remaining} 个文件...',
+  '{name} skill disabled': '{name} 技能已禁用',
+  '{name} skill enabled': '{name} 技能已启用',
+  '{name} skill installed': '{name} 技能已安装',
+  '{name} skill uninstalled': '{name} 技能已卸载',
+  '{percent}% left': '剩余 {percent}%',
+  '{percent}% uploading ({processed}/{total})': '{percent}% 上传中 ({processed}/{total})',
+  '{succeeded} attached, {failed} failed.': '已附加 {succeeded} 个，{failed} 个失败。',
+  '{used} used / {total}': '{used} 已用 / {total}',
+  'Run...': '运行...',
+  'Add command...': '添加命令...',
+  'New': '新建',
+  'Run quick command': '运行快捷命令',
 }
 
 export default zh
diff --git a/src/main.ts b/src/main.ts
index 86870179..3bbfd9dc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,8 +3,6 @@ import App from './App.vue'
 import router from './router'
 import i18n from './i18n'
 import './style.css'
-import { t } from './composables/useUiLanguage'
-
 console.log('Welcome to codexui. github: https://github.com/friuns2/codexUI')
 
 createApp(App).use(router).use(i18n).mount('#app')
@@ -12,7 +10,7 @@ createApp(App).use(router).use(i18n).mount('#app')
 if ('serviceWorker' in navigator && import.meta.env.PROD) {
   window.addEventListener('load', () => {
     navigator.serviceWorker.register('/sw.js').catch((error) => {
-      console.error(t('Service worker registration failed.'), error)
+      console.error('Service worker registration failed.', error)
     })
   })
 }
\ No newline at end of file

From 85c123ca172a1475c659bfe1f17a2e97b2deb7bc Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 16:06:45 +0800
Subject: [PATCH 25/30] fix(ui): Preserve and reconcile live MCP tool calls by
 turn

- Add live MCP tool call state handling for started, progress, and completed events
- Merge recovered MCP tool call data into existing live items without downgrading richer records
- Anchor live overlays to turn ids and indices so streamed messages stay in the correct turn
- Track live message arrival order and project overlays into the persisted conversation backbone
- Force message reload on turn completion and remove live tool calls once persisted data arrives
---
 src/composables/useDesktopState.ts | 421 ++++++++++++++++++++++++++---
 src/server/codexAppServerBridge.ts |  31 ++-
 2 files changed, 415 insertions(+), 37 deletions(-)

diff --git a/src/composables/useDesktopState.ts b/src/composables/useDesktopState.ts
index 1c0c41f7..503b7ede 100644
--- a/src/composables/useDesktopState.ts
+++ b/src/composables/useDesktopState.ts
@@ -38,6 +38,7 @@ import type {
   CollaborationModeKind,
   CollaborationModeOption,
   CommandExecutionData,
+  McpToolCallData,
   UiPendingRequestState,
   ReasoningEffort,
   SpeedMode,
@@ -577,6 +578,20 @@ function areCommandExecutionsEqual(first?: CommandExecutionData, second?: Comman
   return first.status === second.status && first.aggregatedOutput === second.aggregatedOutput && first.exitCode === second.exitCode
 }
 
+function areMcpToolCallsEqual(first?: McpToolCallData, second?: McpToolCallData): boolean {
+  if (!first && !second) return true
+  if (!first || !second) return false
+  return (
+    first.server === second.server
+    && first.tool === second.tool
+    && first.status === second.status
+    && first.arguments === second.arguments
+    && first.result === second.result
+    && first.error === second.error
+    && first.durationMs === second.durationMs
+  )
+}
+
 function arePlanStepsEqual(first: UiPlanStep[] = [], second: UiPlanStep[] = []): boolean {
   if (first.length !== second.length) return false
   for (let index = 0; index < first.length; index += 1) {
@@ -618,6 +633,7 @@ function areMessageFieldsEqual(first: UiMessage, second: UiMessage): boolean {
     first.rawPayload === second.rawPayload &&
     first.isUnhandled === second.isUnhandled &&
     areCommandExecutionsEqual(first.commandExecution, second.commandExecution) &&
+    areMcpToolCallsEqual(first.mcpToolCall, second.mcpToolCall) &&
     arePlanDataEqual(first.plan, second.plan) &&
     first.turnId === second.turnId &&
     first.turnIndex === second.turnIndex &&
@@ -851,6 +867,67 @@ function insertTurnSummaryMessage(messages: UiMessage[], summary: TurnSummarySta
   return next
 }
 
+/**
+ * Returns a stable turn key for persisted and live messages that belong to the
+ * same assistant turn.
+ */
+function readMessageTurnKey(message: UiMessage): string | null {
+  if (typeof message.turnId === 'string' && message.turnId.length > 0) {
+    return `turn:${message.turnId}`
+  }
+  if (typeof message.turnIndex === 'number' && Number.isFinite(message.turnIndex)) {
+    return `turn-index:${message.turnIndex}`
+  }
+  return null
+}
+
+/**
+ * Keeps thread/read output as the canonical backbone and inserts live-only
+ * overlays into the tail of their owning turn instead of appending them to the
+ * end of the entire conversation.
+ */
+function insertLiveMessagesIntoBackbone(backbone: UiMessage[], liveMessages: UiMessage[]): UiMessage[] {
+  if (liveMessages.length === 0) return backbone
+  const liveByTurnKey = new Map<string, UiMessage[]>()
+  const tailMessages: UiMessage[] = []
+
+  for (const message of liveMessages) {
+    const turnKey = readMessageTurnKey(message)
+    if (!turnKey) {
+      tailMessages.push(message)
+      continue
+    }
+    const existing = liveByTurnKey.get(turnKey)
+    if (existing) existing.push(message)
+    else liveByTurnKey.set(turnKey, [message])
+  }
+
+  const lastBackboneIndexByTurnKey = new Map<string, number>()
+  backbone.forEach((message, index) => {
+    const turnKey = readMessageTurnKey(message)
+    if (turnKey) lastBackboneIndexByTurnKey.set(turnKey, index)
+  })
+
+  const projected: UiMessage[] = []
+  const insertedTurnKeys = new Set<string>()
+  backbone.forEach((message, index) => {
+    projected.push(message)
+    const turnKey = readMessageTurnKey(message)
+    if (!turnKey || insertedTurnKeys.has(turnKey)) return
+    if (lastBackboneIndexByTurnKey.get(turnKey) !== index) return
+    const liveForTurn = liveByTurnKey.get(turnKey)
+    if (!liveForTurn || liveForTurn.length === 0) return
+    projected.push(...liveForTurn)
+    insertedTurnKeys.add(turnKey)
+  })
+
+  for (const [turnKey, messages] of liveByTurnKey.entries()) {
+    if (!insertedTurnKeys.has(turnKey)) projected.push(...messages)
+  }
+  if (tailMessages.length > 0) projected.push(...tailMessages)
+  return projected
+}
+
 function omitKey<TValue>(record: Record<string, TValue>, key: string): Record<string, TValue> {
   if (!(key in record)) return record
   const next = { ...record }
@@ -1015,7 +1092,9 @@ export function useDesktopState() {
   const liveAgentMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
   const liveReasoningTextByThreadId = ref<Record<string, string>>({})
   const liveCommandsByThreadId = ref<Record<string, UiMessage[]>>({})
+  const liveToolCallsByThreadId = ref<Record<string, UiMessage[]>>({})
   const liveFileChangeMessagesByThreadId = ref<Record<string, UiMessage[]>>({})
+  const liveMessageSequenceByIdByThreadId = ref<Record<string, Record<string, number>>>({})
   const inProgressById = ref<Record<string, boolean>>({})
   type FileAttachment = { label: string; path: string; fsPath: string }
   type QueuedMessage = {
@@ -1139,6 +1218,7 @@ export function useDesktopState() {
   let activeReasoningItemId = ''
   let shouldAutoScrollOnNextAgentEvent = false
   const pendingTurnStartsById = new Map<string, TurnStartedInfo>()
+  let nextLiveMessageSequence = 0
   const fallbackRetryInFlightThreadIds = new Set<string>()
 
 
@@ -1194,16 +1274,75 @@ export function useDesktopState() {
     if (!threadId) return null
     return threadTokenUsageByThreadId.value[threadId] ?? null
   })
+  /**
+   * Records the first-seen arrival order for live message ids so turn-aware
+   * projection can merge separate live stores back into a single timeline.
+   */
+  function rememberLiveMessageOrder(threadId: string, messages: UiMessage[]): void {
+    if (!threadId || messages.length === 0) return
+    const previous = liveMessageSequenceByIdByThreadId.value[threadId] ?? {}
+    let next = previous
+    let changed = false
+    for (const message of messages) {
+      const messageId = message.id.trim()
+      if (!messageId || next[messageId] !== undefined) continue
+      if (!changed) next = { ...previous }
+      next[messageId] = nextLiveMessageSequence
+      nextLiveMessageSequence += 1
+      changed = true
+    }
+    if (!changed) return
+    liveMessageSequenceByIdByThreadId.value = {
+      ...liveMessageSequenceByIdByThreadId.value,
+      [threadId]: next,
+    }
+  }
+
+  function anchorLiveMessageToActiveTurn(threadId: string, message: UiMessage): UiMessage {
+    if (!threadId) return message
+    const turnId = message.turnId || activeTurnIdByThreadId.value[threadId] || undefined
+    const turnIndex = typeof message.turnIndex === 'number'
+      ? message.turnIndex
+      : (turnId ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId] : undefined)
+    if (turnId === message.turnId && turnIndex === message.turnIndex) {
+      return message
+    }
+    return {
+      ...message,
+      ...(turnId ? { turnId } : {}),
+      ...(typeof turnIndex === 'number' ? { turnIndex } : {}),
+    }
+  }
+
   const messages = computed<UiMessage[]>(() => {
     const threadId = selectedThreadId.value
     if (!threadId) return []
 
     const persisted = persistedMessagesByThreadId.value[threadId] ?? []
-    const livePlan = livePlanMessagesByThreadId.value[threadId] ?? []
-    const liveAgent = liveAgentMessagesByThreadId.value[threadId] ?? []
-    const liveCommands = liveCommandsByThreadId.value[threadId] ?? []
-    const liveFileChanges = liveFileChangeMessagesByThreadId.value[threadId] ?? []
-    const combined = [...persisted, ...livePlan, ...liveCommands, ...liveFileChanges, ...liveAgent]
+    const liveOrder = liveMessageSequenceByIdByThreadId.value[threadId] ?? {}
+    const persistedIds = new Set(persisted.map((message) => message.id))
+    const overlayCandidates = [
+      ...(livePlanMessagesByThreadId.value[threadId] ?? []),
+      ...(liveCommandsByThreadId.value[threadId] ?? []),
+      ...(liveToolCallsByThreadId.value[threadId] ?? []),
+      ...(liveFileChangeMessagesByThreadId.value[threadId] ?? []),
+      ...(liveAgentMessagesByThreadId.value[threadId] ?? []),
+    ]
+      .map((message) => anchorLiveMessageToActiveTurn(threadId, message))
+      .filter((message) => !persistedIds.has(message.id))
+    const dedupedOverlays = new Map<string, UiMessage>()
+    for (const message of overlayCandidates) {
+      if (!dedupedOverlays.has(message.id)) {
+        dedupedOverlays.set(message.id, message)
+      }
+    }
+    const orderedOverlays = [...dedupedOverlays.values()].sort((first, second) => {
+      const firstOrder = liveOrder[first.id] ?? Number.MAX_SAFE_INTEGER
+      const secondOrder = liveOrder[second.id] ?? Number.MAX_SAFE_INTEGER
+      if (firstOrder !== secondOrder) return firstOrder - secondOrder
+      return first.id.localeCompare(second.id)
+    })
+    const combined = insertLiveMessagesIntoBackbone(persisted, orderedOverlays)
 
     const summary = turnSummaryByThreadId.value[threadId]
     if (!summary) return combined
@@ -1390,6 +1529,7 @@ export function useDesktopState() {
         clearLivePlansForThread(threadId)
         setLiveAgentMessagesForThread(threadId, [])
         clearLiveReasoningForThread(threadId)
+        clearLiveToolCallsForThread(threadId)
         if (liveCommandsByThreadId.value[threadId]) {
           liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
         }
@@ -1748,7 +1888,9 @@ export function useDesktopState() {
     liveAgentMessagesByThreadId.value = pruneThreadStateMap(liveAgentMessagesByThreadId.value, activeThreadIds)
     liveReasoningTextByThreadId.value = pruneThreadStateMap(liveReasoningTextByThreadId.value, activeThreadIds)
     liveCommandsByThreadId.value = pruneThreadStateMap(liveCommandsByThreadId.value, activeThreadIds)
+    liveToolCallsByThreadId.value = pruneThreadStateMap(liveToolCallsByThreadId.value, activeThreadIds)
     liveFileChangeMessagesByThreadId.value = pruneThreadStateMap(liveFileChangeMessagesByThreadId.value, activeThreadIds)
+    liveMessageSequenceByIdByThreadId.value = pruneThreadStateMap(liveMessageSequenceByIdByThreadId.value, activeThreadIds)
     turnSummaryByThreadId.value = pruneThreadStateMap(turnSummaryByThreadId.value, activeThreadIds)
     turnActivityByThreadId.value = pruneThreadStateMap(turnActivityByThreadId.value, activeThreadIds)
     turnErrorByThreadId.value = pruneThreadStateMap(turnErrorByThreadId.value, activeThreadIds)
@@ -1803,7 +1945,11 @@ export function useDesktopState() {
     }
   }
 
-  function setThreadInProgress(threadId: string, nextInProgress: boolean): void {
+  function setThreadInProgress(
+    threadId: string,
+    nextInProgress: boolean,
+    options: { clearLiveState?: boolean } = {},
+  ): void {
     if (!threadId) return
     const currentValue = inProgressById.value[threadId] === true
     if (currentValue === nextInProgress) return
@@ -1814,7 +1960,9 @@ export function useDesktopState() {
       }
     } else {
       inProgressById.value = omitKey(inProgressById.value, threadId)
-      clearCompletedTurnLiveState(threadId)
+      if (options.clearLiveState !== false) {
+        clearCompletedTurnLiveState(threadId)
+      }
       clearInterruptPersistenceGate(threadId)
     }
     applyThreadFlags()
@@ -2035,6 +2183,7 @@ export function useDesktopState() {
 
   function setLiveAgentMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
     const previous = liveAgentMessagesByThreadId.value[threadId] ?? []
+    rememberLiveMessageOrder(threadId, nextMessages)
     if (areMessageArraysEqual(previous, nextMessages)) return
     liveAgentMessagesByThreadId.value = {
       ...liveAgentMessagesByThreadId.value,
@@ -2050,6 +2199,7 @@ export function useDesktopState() {
 
   function setLiveFileChangeMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
     const previous = liveFileChangeMessagesByThreadId.value[threadId] ?? []
+    rememberLiveMessageOrder(threadId, nextMessages)
     if (areMessageArraysEqual(previous, nextMessages)) return
     liveFileChangeMessagesByThreadId.value = {
       ...liveFileChangeMessagesByThreadId.value,
@@ -2059,6 +2209,7 @@ export function useDesktopState() {
 
   function setLivePlanMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
     const previous = livePlanMessagesByThreadId.value[threadId] ?? []
+    rememberLiveMessageOrder(threadId, nextMessages)
     if (areMessageArraysEqual(previous, nextMessages)) return
     livePlanMessagesByThreadId.value = {
       ...livePlanMessagesByThreadId.value,
@@ -2084,6 +2235,44 @@ export function useDesktopState() {
     setLiveFileChangeMessagesForThread(threadId, next)
   }
 
+  /**
+   * Mirrors the command execution live-store behavior for MCP tool calls so the
+   * streaming UI can render tool start, progress, and completion without waiting
+   * for thread/read recovery.
+   */
+  function setLiveToolCallMessagesForThread(threadId: string, nextMessages: UiMessage[]): void {
+    const previous = liveToolCallsByThreadId.value[threadId] ?? []
+    rememberLiveMessageOrder(threadId, nextMessages)
+    if (areMessageArraysEqual(previous, nextMessages)) return
+    liveToolCallsByThreadId.value = {
+      ...liveToolCallsByThreadId.value,
+      [threadId]: nextMessages,
+    }
+  }
+
+  function upsertLiveToolCall(threadId: string, nextMessage: UiMessage): void {
+    rememberLiveMessageOrder(threadId, [nextMessage])
+    const previous = liveToolCallsByThreadId.value[threadId] ?? []
+    const next = upsertMessage(previous, nextMessage)
+    setLiveToolCallMessagesForThread(threadId, next)
+  }
+
+  function removeLiveToolCallsPersistedIn(threadId: string, persistedMessages: UiMessage[]): void {
+    const current = liveToolCallsByThreadId.value[threadId]
+    if (!current || current.length === 0) return
+    const persistedIds = new Set(persistedMessages.map((message) => message.id))
+    const next = current.filter((message) => !persistedIds.has(message.id))
+    if (next.length === current.length) return
+    if (next.length === 0) {
+      liveToolCallsByThreadId.value = omitKey(liveToolCallsByThreadId.value, threadId)
+    } else {
+      liveToolCallsByThreadId.value = {
+        ...liveToolCallsByThreadId.value,
+        [threadId]: next,
+      }
+    }
+  }
+
   function setLiveReasoningText(threadId: string, text: string): void {
     if (!threadId) return
     const normalized = text.trim()
@@ -2124,10 +2313,19 @@ export function useDesktopState() {
     liveFileChangeMessagesByThreadId.value = omitKey(liveFileChangeMessagesByThreadId.value, threadId)
   }
 
+  function clearLiveToolCallsForThread(threadId: string): void {
+    if (!threadId) return
+    if (!(threadId in liveToolCallsByThreadId.value)) return
+    liveToolCallsByThreadId.value = omitKey(liveToolCallsByThreadId.value, threadId)
+  }
+
   function clearCompletedTurnLiveState(threadId: string): void {
     if (!threadId) return
     clearLivePlansForThread(threadId)
+    clearLiveAgentMessagesForThread(threadId)
     clearLiveReasoningForThread(threadId)
+    clearLiveFileChangesForThread(threadId)
+    clearLiveToolCallsForThread(threadId)
     setTurnActivityForThread(threadId, null)
     if (threadId === selectedThreadId.value) {
       activeReasoningItemId = ''
@@ -2135,6 +2333,9 @@ export function useDesktopState() {
     if (liveCommandsByThreadId.value[threadId]) {
       liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
     }
+    if (liveMessageSequenceByIdByThreadId.value[threadId]) {
+      liveMessageSequenceByIdByThreadId.value = omitKey(liveMessageSequenceByIdByThreadId.value, threadId)
+    }
     if (activeTurnIdByThreadId.value[threadId]) {
       activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, threadId)
     }
@@ -2960,16 +3161,28 @@ export function useDesktopState() {
     return ''
   }
 
-  function readAgentMessageDelta(notification: RpcNotification): { messageId: string; delta: string } | null {
+  function readAgentMessageDelta(notification: RpcNotification): UiMessage | null {
     const params = asRecord(notification.params)
     if (!params) return null
 
     // Канонический live-канал агентского текста.
     if (notification.method === 'item/agentMessage/delta') {
-      const messageId = readString(params.itemId)
+      const threadId = extractThreadIdFromNotification(notification)
+      const turnId = readString(params.turnId) || readString(params.turn_id)
+      const turnIndex = threadId && turnId
+        ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+        : undefined
+      const id = readString(params.itemId)
       const delta = readString(params.delta)
-      if (!messageId || !delta) return null
-      return { messageId, delta }
+      if (!id || !delta) return null
+      return {
+        id,
+        role: 'assistant',
+        text: delta,
+        messageType: 'agentMessage.live',
+        turnId: turnId || undefined,
+        turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
+      }
     }
 
     return null
@@ -2984,12 +3197,19 @@ export function useDesktopState() {
       if (!item || item.type !== 'agentMessage') return null
       const id = readString(item.id)
       const text = readString(item.text)
+      const threadId = extractThreadIdFromNotification(notification)
+      const turnId = readString(params?.turnId) || readString(params?.turn_id)
+      const turnIndex = threadId && turnId
+        ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+        : undefined
       if (!id || !text) return null
       return {
         id,
         role: 'assistant',
         text,
         messageType: 'agentMessage.live',
+        turnId: turnId || undefined,
+        turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
       }
     }
 
@@ -3016,6 +3236,102 @@ export function useDesktopState() {
     return `data:image/png;base64,${compact}`
   }
 
+  /**
+   * Normalizes structured MCP tool arguments, progress, and results into a
+   * display-friendly string without assuming the payload is already plain text.
+   */
+  function formatMcpToolCallValue(value: unknown): string {
+    if (value == null) return ''
+    if (typeof value === 'string') return value
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return String(value)
+    }
+  }
+
+  function normalizeMcpToolCallStatus(value: string): McpToolCallData['status'] {
+    if (value === 'failed') return 'failed'
+    if (value === 'declined') return 'declined'
+    if (value === 'interrupted') return 'interrupted'
+    if (value === 'inProgress' || value === 'in_progress') return 'inProgress'
+    return 'completed'
+  }
+
+  function readMcpToolCallStarted(notification: RpcNotification): UiMessage | null {
+    if (notification.method !== 'item/started') return null
+    const params = asRecord(notification.params)
+    const item = asRecord(params?.item)
+    if (!item || item.type !== 'mcpToolCall') return null
+    const id = readString(item.id)
+    const server = readString(item.server)
+    const tool = readString(item.tool)
+    if (!id || !server || !tool) return null
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const turnIndex = threadId && turnId
+      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+      : undefined
+    return {
+      id,
+      role: 'system',
+      text: `${server}/${tool}`,
+      messageType: 'mcpToolCall',
+      mcpToolCall: {
+        server,
+        tool,
+        status: normalizeMcpToolCallStatus(readString(item.status)),
+        arguments: formatMcpToolCallValue(item.arguments),
+        result: formatMcpToolCallValue(item.result),
+        error: formatMcpToolCallValue(item.error),
+        durationMs: readNumber(item.durationMs),
+      },
+      turnId: turnId || undefined,
+      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
+    }
+  }
+
+  function readMcpToolCallProgress(notification: RpcNotification): { itemId: string; message: string } | null {
+    if (notification.method !== 'item/mcpToolCall/progress') return null
+    const params = asRecord(notification.params)
+    const itemId = readString(params?.itemId)
+    const message = readString(params?.message)
+    return itemId && message ? { itemId, message } : null
+  }
+
+  function readMcpToolCallCompleted(notification: RpcNotification): UiMessage | null {
+    if (notification.method !== 'item/completed') return null
+    const params = asRecord(notification.params)
+    const item = asRecord(params?.item)
+    if (!item || item.type !== 'mcpToolCall') return null
+    const id = readString(item.id)
+    const server = readString(item.server)
+    const tool = readString(item.tool)
+    if (!id || !server || !tool) return null
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const turnIndex = threadId && turnId
+      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+      : undefined
+    return {
+      id,
+      role: 'system',
+      text: `${server}/${tool}`,
+      messageType: 'mcpToolCall',
+      mcpToolCall: {
+        server,
+        tool,
+        status: normalizeMcpToolCallStatus(readString(item.status)),
+        arguments: formatMcpToolCallValue(item.arguments),
+        result: formatMcpToolCallValue(item.result),
+        error: formatMcpToolCallValue(item.error),
+        durationMs: readNumber(item.durationMs),
+      },
+      turnId: turnId || undefined,
+      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
+    }
+  }
+
   function readCompletedImageView(notification: RpcNotification): UiMessage | null {
     if (notification.method !== 'item/completed') return null
     const params = asRecord(notification.params)
@@ -3023,6 +3339,11 @@ export function useDesktopState() {
     if (!item) return null
     const id = readString(item.id)
     if (!id) return null
+    const threadId = extractThreadIdFromNotification(notification)
+    const turnId = readString(params?.turnId) || readString(params?.turn_id)
+    const turnIndex = threadId && turnId
+      ? turnIndexByTurnIdByThreadId.value[threadId]?.[turnId]
+      : undefined
     if (item.type === 'imageView') {
       const path = readString(item.path)
       if (!path) return null
@@ -3032,6 +3353,8 @@ export function useDesktopState() {
         text: '',
         images: [toLocalImageUrl(path)],
         messageType: 'imageView',
+        turnId: turnId || undefined,
+        turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
       }
     }
     if (item.type !== 'imageGeneration' && item.type !== 'image_generation') return null
@@ -3044,6 +3367,8 @@ export function useDesktopState() {
       text: '',
       images: [imageUrl],
       messageType: 'imageView',
+      turnId: turnId || undefined,
+      turnIndex: typeof turnIndex === 'number' ? turnIndex : undefined,
 
     }
   }
@@ -3143,6 +3468,7 @@ export function useDesktopState() {
   }
 
   function upsertLiveCommand(threadId: string, msg: UiMessage): void {
+    rememberLiveMessageOrder(threadId, [msg])
     const previous = liveCommandsByThreadId.value[threadId] ?? []
     const next = upsertMessage(previous, msg)
     if (next === previous) return
@@ -3297,7 +3623,7 @@ export function useDesktopState() {
       if (activeTurnIdByThreadId.value[completedTurn.threadId]) {
         activeTurnIdByThreadId.value = omitKey(activeTurnIdByThreadId.value, completedTurn.threadId)
       }
-      setThreadInProgress(completedTurn.threadId, false)
+      setThreadInProgress(completedTurn.threadId, false, { clearLiveState: false })
       setTurnActivityForThread(completedTurn.threadId, null)
       markThreadUnreadByEvent(completedTurn.threadId)
       if (!shouldRetryWithFallback) {
@@ -3365,13 +3691,15 @@ export function useDesktopState() {
     const liveAgentMessageDelta = readAgentMessageDelta(notification)
     if (liveAgentMessageDelta) {
       const existing = (liveAgentMessagesByThreadId.value[notificationThreadId] ?? [])
-        .find((message) => message.id === liveAgentMessageDelta.messageId)
-      const nextText = `${existing?.text ?? ''}${liveAgentMessageDelta.delta}`
+        .find((message) => message.id === liveAgentMessageDelta.id)
+      const nextText = `${existing?.text ?? ''}${liveAgentMessageDelta.text}`
       upsertLiveAgentMessage(notificationThreadId, {
-        id: liveAgentMessageDelta.messageId,
-        role: 'assistant',
+        ...liveAgentMessageDelta,
         text: nextText,
-        messageType: 'agentMessage.live',
+        turnId: liveAgentMessageDelta.turnId ?? existing?.turnId,
+        turnIndex: typeof liveAgentMessageDelta.turnIndex === 'number'
+          ? liveAgentMessageDelta.turnIndex
+          : existing?.turnIndex,
       })
     }
 
@@ -3411,6 +3739,32 @@ export function useDesktopState() {
       }
     }
 
+    const mcpToolCallStarted = readMcpToolCallStarted(notification)
+    if (mcpToolCallStarted) {
+      upsertLiveToolCall(notificationThreadId, mcpToolCallStarted)
+      setTurnActivityForThread(notificationThreadId, {
+        label: 'Running tool',
+        details: [mcpToolCallStarted.text],
+      })
+    }
+
+    const mcpToolCallProgress = readMcpToolCallProgress(notification)
+    if (mcpToolCallProgress) {
+      const current = (liveToolCallsByThreadId.value[notificationThreadId] ?? []).find((message) => message.id === mcpToolCallProgress.itemId)
+      if (current?.mcpToolCall) {
+        const nextProgressOutput = current.mcpToolCall.result.trim().length > 0
+          ? `${current.mcpToolCall.result}\n\n${mcpToolCallProgress.message}`
+          : mcpToolCallProgress.message
+        upsertLiveToolCall(notificationThreadId, {
+          ...current,
+          mcpToolCall: { ...current.mcpToolCall, result: nextProgressOutput },
+        })
+      }
+    }
+
+    const mcpToolCallCompleted = readMcpToolCallCompleted(notification)
+    if (mcpToolCallCompleted) upsertLiveToolCall(notificationThreadId, mcpToolCallCompleted)
+
     const commandStarted = readCommandExecutionStarted(notification)
     if (commandStarted) {
       upsertLiveCommand(notificationThreadId, commandStarted)
@@ -3453,19 +3807,14 @@ export function useDesktopState() {
     if (notification.method === 'turn/completed') {
       activeReasoningItemId = ''
       shouldAutoScrollOnNextAgentEvent = false
-      clearLiveReasoningForThread(notificationThreadId)
-      if (liveCommandsByThreadId.value[notificationThreadId]) {
-        liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, notificationThreadId)
-      }
       const completedThreadId = extractThreadIdFromNotification(notification)
       if (completedThreadId) {
-        setThreadInProgress(completedThreadId, false)
-        setTurnActivityForThread(completedThreadId, null)
-        markThreadUnreadByEvent(completedThreadId)
-        if (!shouldRetryWithFallback) {
-          clearPendingTurnRequest(completedThreadId)
-          void processQueuedMessages(completedThreadId)
-        }
+        void loadMessages(completedThreadId, {
+          silent: true,
+          force: true,
+        }).catch(() => {
+          // Preserve live state when canonical reconciliation fails.
+        })
       }
     }
 
@@ -3709,7 +4058,7 @@ export function useDesktopState() {
     await loadThreadsPromise
   }
 
-  async function loadMessages(threadId: string, options: { silent?: boolean } = {}) {
+  async function loadMessages(threadId: string, options: { silent?: boolean; force?: boolean } = {}) {
     if (!threadId) {
       return
     }
@@ -3717,7 +4066,7 @@ export function useDesktopState() {
     const existingLoad = loadMessagePromiseByThreadId.get(threadId)
     if (existingLoad) {
       await existingLoad
-      return
+      if (options.force !== true) return
     }
 
     const alreadyLoaded = loadedMessagesByThreadId.value[threadId] === true
@@ -3733,6 +4082,7 @@ export function useDesktopState() {
       const loadedRecently =
         Date.now() - (lastMessageLoadAtByThreadId.get(threadId) ?? 0) < RECENT_THREAD_MESSAGE_LOAD_REUSE_MS
       const canReuseLoadedMessages =
+        options.force !== true &&
         alreadyLoaded &&
         (
           loadedRecently ||
@@ -3764,9 +4114,7 @@ export function useDesktopState() {
       replaceTurnIndexLookupForThread(threadId, turnIndexByTurnId)
       rebindLiveFileChangeTurnIndices(threadId)
       const previousPersisted = persistedMessagesByThreadId.value[threadId] ?? []
-      const mergedMessages = mergeMessages(previousPersisted, nextMessages, {
-        preserveMissing: options.silent === true,
-      })
+      const mergedMessages = mergeMessages(previousPersisted, nextMessages)
       setPersistedMessagesForThread(threadId, mergedMessages)
 
       const previousLiveAgent = liveAgentMessagesByThreadId.value[threadId] ?? []
@@ -3777,6 +4125,7 @@ export function useDesktopState() {
         clearLiveAgentMessagesForThread(threadId)
       }
       removeLiveCommandsPersistedIn(threadId, nextMessages)
+      removeLiveToolCallsPersistedIn(threadId, nextMessages)
       removeLiveFileChangesPersistedIn(threadId, nextMessages)
 
       loadedMessagesByThreadId.value = {
@@ -4002,6 +4351,7 @@ export function useDesktopState() {
       clearLivePlansForThread(forkedThreadId)
       setLiveAgentMessagesForThread(forkedThreadId, [])
       clearLiveReasoningForThread(forkedThreadId)
+      clearLiveToolCallsForThread(forkedThreadId)
       if (liveCommandsByThreadId.value[forkedThreadId]) {
         liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, forkedThreadId)
       }
@@ -4438,6 +4788,7 @@ export function useDesktopState() {
       setPersistedMessagesForThread(threadId, nextMessages)
       setLiveAgentMessagesForThread(threadId, [])
       clearLiveReasoningForThread(threadId)
+      clearLiveToolCallsForThread(threadId)
       if (liveCommandsByThreadId.value[threadId]) {
         liveCommandsByThreadId.value = omitKey(liveCommandsByThreadId.value, threadId)
       }
@@ -4824,7 +5175,9 @@ export function useDesktopState() {
     liveAgentMessagesByThreadId.value = {}
     liveReasoningTextByThreadId.value = {}
     liveCommandsByThreadId.value = {}
+    liveToolCallsByThreadId.value = {}
     liveFileChangeMessagesByThreadId.value = {}
+    liveMessageSequenceByIdByThreadId.value = {}
     turnIndexByTurnIdByThreadId.value = {}
     turnActivityByThreadId.value = {}
     turnSummaryByThreadId.value = {}
@@ -4937,4 +5290,4 @@ export function useDesktopState() {
     stopPolling,
     primeSelectedThread,
   }
-}
+}
\ No newline at end of file
diff --git a/src/server/codexAppServerBridge.ts b/src/server/codexAppServerBridge.ts
index 72ff8495..23f40fa2 100644
--- a/src/server/codexAppServerBridge.ts
+++ b/src/server/codexAppServerBridge.ts
@@ -1039,6 +1039,31 @@ function parseSessionMcpFunctionName(name: unknown): { server: string; tool: str
   return { server, tool }
 }
 
+/**
+ * Applies session-log completion data to a notification-captured MCP tool call
+ * without regressing a richer live record back to an older in-progress shape.
+ */
+function overlayRecoveredMcpToolCall(
+  existingItem: Record<string, unknown>,
+  recovered: SessionRecoveredMcpToolCall,
+): Record<string, unknown> {
+  const merged = { ...existingItem }
+  const existingId = readNonEmptyString(merged.id)
+  if (!existingId || existingId.startsWith('session-mcp-')) merged.id = recovered.id
+  if (!readNonEmptyString(merged.server)) merged.server = recovered.server
+  if (!readNonEmptyString(merged.tool)) merged.tool = recovered.tool
+  if (merged.arguments == null || merged.arguments === '') merged.arguments = recovered.arguments
+
+  const existingStatus = readNonEmptyString(merged.status)
+  if (recovered.status === 'completed' || recovered.status === 'failed' || !existingStatus) {
+    merged.status = recovered.status
+  }
+  if (recovered.result !== '') merged.result = recovered.result
+  if (recovered.error) merged.error = recovered.error
+  if (recovered.durationMs != null) merged.durationMs = recovered.durationMs
+  return merged
+}
+
 type SessionRecoveredFileChangeItem = {
   id: string
   type: 'fileChange'
@@ -1144,7 +1169,7 @@ function buildSessionItemOrder(sessionLogRaw: string, turnIds: Set<string>): Map
         if (!callId) continue
         if (rowTs > 0) callIdToTimestamp.set(callId, rowTs)
         const mcpToolCall: SessionRecoveredMcpToolCall = {
-          id: `session-mcp-${callId}`,
+          id: callId,
           type: 'mcpToolCall',
           server: mcpName.server,
           tool: mcpName.tool,
@@ -1548,7 +1573,7 @@ function mergeSessionCommandsIntoTurns(turns: unknown[], sessionLogRaw: string):
       } else if (slot.type === 'mcpToolCall' && slot.mcpToolCall) {
         const existingMcpToolCall = shiftExistingItem(mcpToolCalls)
         if (existingMcpToolCall) {
-          interleaved.push(existingMcpToolCall)
+          interleaved.push(overlayRecoveredMcpToolCall(existingMcpToolCall, slot.mcpToolCall))
         } else {
           interleaved.push(slot.mcpToolCall as unknown as Record<string, unknown>)
         }
@@ -4806,4 +4831,4 @@ export function createCodexBridgeMiddleware(): CodexBridgeMiddleware {
   }
 
   return middleware
-}
\ No newline at end of file
+}

From 89c097f2d0229dca3e826622d2adef9958dd8a58 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 16:18:59 +0800
Subject: [PATCH 26/30] fix(docker): Move ripgrep installation to the runtime
 image

- Remove `ripgrep` from the earlier build-stage package list
- Add `ripgrep` to the later image stage so it is available where needed
---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index 709b9b10..5e173b17 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,7 +8,6 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     python3 \
     make \
     g++ \
-    ripgrep \
     && rm -rf /var/lib/apt/lists/*
 
 RUN corepack enable
@@ -38,6 +37,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     python3 \
     make \
     g++ \
+    ripgrep \
     && rm -rf /var/lib/apt/lists/*
 
 RUN corepack enable

From e0c8c32e05f9f2993109858208bb09ebccd09de2 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 16:34:39 +0800
Subject: [PATCH 27/30] chore(config): Document SHELL setting in env example

- Add a sample `SHELL` variable to `.env.example`
- Explain recommended shell paths for Docker containers and macOS
- Preserve existing optional Telegram configuration entries
---
 .env.example | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 77b6e0b6..ae25f708 100644
--- a/.env.example
+++ b/.env.example
@@ -2,6 +2,10 @@
 # OpenAI API key for Codex
 OPENAI_API_KEY=sk-xxx
 
+# Terminal shell path
+# Docker containers typically need /bin/bash; macOS defaults to /bin/zsh
+SHELL=/bin/bash
+
 # ── Optional ─────────────────────────────────────────────
 # Codex config/session storage (default: ~/.codex)
 # CODEX_HOME=/root/.codex
@@ -27,4 +31,4 @@ OPENAI_API_KEY=sk-xxx
 # ── Telegram Integration (optional) ─────────────────────
 # TELEGRAM_BOT_TOKEN=
 # TELEGRAM_ALLOWED_USER_IDS=
-# TELEGRAM_DEFAULT_CWD=/workspace
+# TELEGRAM_DEFAULT_CWD=/workspace
\ No newline at end of file

From 7d54ac95c6c9616371b106d9566685192a7e81b5 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 16:38:35 +0800
Subject: [PATCH 28/30] chore(config): add missed environment variable to env
 example file

---
 .env.example | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/.env.example b/.env.example
index ae25f708..77f8e8d5 100644
--- a/.env.example
+++ b/.env.example
@@ -25,9 +25,25 @@ SHELL=/bin/bash
 # Approval policy for tool calls: suggest | auto-edit | never
 # CODEXUI_APPROVAL_POLICY=suggest
 
+# Custom Codex CLI binary path (default: auto-detected)
+# CODEXUI_CODEX_COMMAND=/usr/local/bin/codex
+
+# Custom ripgrep binary path (default: auto-detected)
+# CODEXUI_RG_COMMAND=/usr/local/bin/rg
+
 # OfficeCLI binary path (default: officecli in PATH)
 # OFFICECLI_PATH=/usr/local/bin/officecli
 
+# ── Performance Logging (optional) ──────────────────────
+# Enable API performance logging
+# CODEXUI_API_PERF_LOGGING=true
+
+# Log requests slower than this threshold in ms (default: 300)
+# CODEXUI_API_PERF_MS_THRESHOLD=300
+
+# Log responses larger than this threshold in MB (default: 1)
+# CODEXUI_API_PERF_BODY_MB_THRESHOLD=1
+
 # ── Telegram Integration (optional) ─────────────────────
 # TELEGRAM_BOT_TOKEN=
 # TELEGRAM_ALLOWED_USER_IDS=

From c6b05b35d1dc1d889aceec1de80845284f74a135 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 16:57:28 +0800
Subject: [PATCH 29/30] feat(content): Open linked files in preview modal from
 conversation

- Intercept clicks on local message file links and launch FilePreviewModal
- Derive file name, path, and extension from browse URLs for preview state
- Treat files without extensions as text previews instead of unsupported files
- Detect binary files on the server and return a user-friendly preview error
---
 src/components/content/FilePreviewModal.vue   |  4 ++-
 src/components/content/ThreadConversation.vue | 29 ++++++++++++++++++-
 src/server/fileRoutes.ts                      | 17 ++++++++++-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/components/content/FilePreviewModal.vue b/src/components/content/FilePreviewModal.vue
index 40abc32f..d2b46520 100644
--- a/src/components/content/FilePreviewModal.vue
+++ b/src/components/content/FilePreviewModal.vue
@@ -133,6 +133,7 @@ function getPreviewType(ext: string): string {
   if (MARKDOWN_EXTS.has(ext)) return 'markdown'
   if (ext in CODE_LANG_MAP) return 'code'
   if (TEXT_EXTS.has(ext)) return 'text'
+  if (!ext) return 'text'
   return 'unsupported'
 }
 
@@ -153,6 +154,7 @@ const fileSize = computed(() => {
 function mapServerError(msg: string): string {
   if (msg.includes('officecli not found')) return t('OfficeCLI is not installed. Office file preview requires OfficeCLI.')
   if (msg.includes('not a file')) return t('Path is not a file.')
+  if (msg.includes('Binary file')) return t('Preview is not available for this file type.')
   if (msg.includes('not found') || msg.includes('Not found')) return t('File or folder not found.')
   if (msg.includes('absolute')) return t('Invalid path.')
   if (msg.includes('not supported for preview')) return t('Preview is not available for this file type.')
@@ -378,4 +380,4 @@ onBeforeUnmount(() => {
 .fp-markdown :deep(li) { @apply my-0.5; }
 .fp-markdown :deep(img) { @apply max-w-full rounded; }
 .fp-markdown :deep(hr) { @apply border-zinc-200 my-4; }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/content/ThreadConversation.vue b/src/components/content/ThreadConversation.vue
index e124b4de..51128e10 100644
--- a/src/components/content/ThreadConversation.vue
+++ b/src/components/content/ThreadConversation.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="conversation-root" @contextmenu.capture="onConversationContextMenu">
+  <section class="conversation-root" @contextmenu.capture="onConversationContextMenu" @click.capture="onFileLinkClick">
     <p v-if="isLoading" class="conversation-loading">{{ $t('Loading messages...') }}</p>
 
     <p
@@ -864,6 +864,12 @@
         </Transition>
       </div>
     </div>
+
+    <FilePreviewModal
+      v-if="filePreviewEntry"
+      :entry="filePreviewEntry"
+      @close="filePreviewEntry = null"
+    />
   </section>
 </template>
 
@@ -878,6 +884,7 @@ import IconTablerCopy from '../icons/IconTablerCopy.vue'
 import IconTablerFilePencil from '../icons/IconTablerFilePencil.vue'
 import IconTablerGitFork from '../icons/IconTablerGitFork.vue'
 import IconTablerX from '../icons/IconTablerX.vue'
+import FilePreviewModal from './FilePreviewModal.vue'
 
 type HighlightJsModule = (typeof import('highlight.js/lib/common'))['default']
 
@@ -899,6 +906,7 @@ const fileLinkContextMenuX = ref(0)
 const fileLinkContextMenuY = ref(0)
 const fileLinkContextBrowseUrl = ref('')
 const fileLinkContextEditUrl = ref('')
+const filePreviewEntry = ref<{ name: string; path: string; extension: string; size: number } | null>(null)
 const { isMobile } = useMobile()
 
 function parsePlanFromMessageText(text: string): { explanation: string; steps: UiPlanStep[] } | null {
@@ -2638,6 +2646,25 @@ function toEditUrlFromBrowseHref(href: string): string {
   }
 }
 
+function onFileLinkClick(event: MouseEvent): void {
+  const target = event.target
+  if (!(target instanceof Element)) return
+  const anchor = target.closest('a.message-file-link')
+  if (!(anchor instanceof HTMLAnchorElement)) return
+  const href = (anchor.getAttribute('href') ?? '').trim()
+  if (!href || href === '#') return
+  const prefix = '/codex-local-browse'
+  if (!href.startsWith(prefix)) return
+  event.preventDefault()
+  event.stopPropagation()
+  const filePath = decodeURI(href.slice(prefix.length))
+  const lastSlash = filePath.lastIndexOf('/')
+  const name = lastSlash >= 0 ? filePath.slice(lastSlash + 1) : filePath
+  const dotIndex = name.lastIndexOf('.')
+  const extension = dotIndex > 0 ? name.slice(dotIndex).toLowerCase() : ''
+  filePreviewEntry.value = { name, path: filePath, extension, size: 0 }
+}
+
 function onConversationContextMenu(event: MouseEvent): void {
   const target = event.target
   if (!(target instanceof Element)) return
diff --git a/src/server/fileRoutes.ts b/src/server/fileRoutes.ts
index 56b977b5..ae8f5315 100644
--- a/src/server/fileRoutes.ts
+++ b/src/server/fileRoutes.ts
@@ -261,6 +261,21 @@ export async function handleFileRoutes(
         setJson(res, 400, { error: 'Path is not a file.' })
         return true
       }
+      // Binary detection: read first 8KB and check for null bytes
+      const probeSize = Math.min(8192, fileStat.size)
+      if (probeSize > 0) {
+        const fh = await fsOpen(filePath, 'r')
+        try {
+          const probe = Buffer.alloc(probeSize)
+          const { bytesRead } = await fh.read(probe, 0, probeSize, 0)
+          if (probe.subarray(0, bytesRead).includes(0)) {
+            setJson(res, 400, { error: 'Binary file — not supported for preview.' })
+            return true
+          }
+        } finally {
+          await fh.close()
+        }
+      }
       const maxSize = 1024 * 1024 // 1 MB
       if (fileStat.size > maxSize) {
         const fh = await fsOpen(filePath, 'r')
@@ -437,4 +452,4 @@ export async function handleFileRoutes(
   }
 
   return false
-}
+}
\ No newline at end of file

From 97bd87faa6a543927c599ae80f009b267f91c2b2 Mon Sep 17 00:00:00 2001
From: LimLLL <github@awebapp.useforall.com>
Date: Thu, 23 Apr 2026 17:07:11 +0800
Subject: [PATCH 30/30] docs: Update README with Docker setup and feature
 highlights
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add a Docker deployment section with startup steps and key environment variables
- Document i18n support, file manager capabilities, and multi-arch Docker images
- Refresh recent product features and fix the "Can’t" wording in troubleshooting
---
 README.md | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 728bc3a9..d00e3be3 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,32 @@ Notes:
 
 ---
 
+## 🐳 Docker Deployment
+
+```bash
+# Copy and configure environment
+cp .env.example .env
+# Edit .env — set OPENAI_API_KEY and SHELL at minimum
+
+# Start with docker-compose
+docker-compose up -d
+
+# Open in browser
+# http://localhost:5900
+```
+
+Key environment variables (see `.env.example` for full list):
+
+| Variable | Description | Default |
+|---|---|---|
+| `OPENAI_API_KEY` | OpenAI API key | *required* |
+| `SHELL` | Terminal shell path | `/bin/zsh` |
+| `CODEXUI_PASSWORD` | Web UI password | random on each start |
+| `CODEX_WORKSPACE` | Default workspace directory | — |
+| `CODEXUI_SANDBOX_MODE` | `read-only` / `workspace-write` / `danger-full-access` | — |
+
+---
+
 ## ✨ Features
 > **The payload.**
 
@@ -136,6 +162,9 @@ Notes:
 - ⚡ No global install required for quick experimentation
 - 🎙️ Built-in hold-to-dictate voice input with transcription to composer draft
 - 🤖 Optional Telegram bot bridge: send messages to bot, forward into mapped thread, send assistant reply back to Telegram
+- 🌐 i18n support with English/Chinese locale switching
+- 📁 Built-in file manager with inline preview (images, PDF, video, audio, markdown, code, Office documents)
+- 🐳 Docker support with multi-arch images publishing
 
 ### Telegram Bot Bridge (Optional)
 
@@ -175,6 +204,8 @@ Outgoing assistant messages are sent with Telegram `parse_mode=HTML` for formatt
 ## 🧩 Recent Product Features (from main commits)
 > **Not just launch. Actual UX upgrades.**
 
+- 📁 File manager with breadcrumbs, context menu, upload/download, and inline preview
+- 🌐 English/Chinese i18n with auto-detection and settings toggle
 - 🗂️ Searchable project picker in new-thread flow
 - ➕ "Create Project" button next to "Select folder" with browser prompt
 - 📌 New projects get pinned to top automatically
@@ -252,7 +283,7 @@ Outgoing assistant messages are sent with Telegram `parse_mode=HTML` for formatt
 | Port already in use | Run on a free port or stop old process |
 | `npx` fails | Update npm/node, then retry |
 | Termux install fails | `pkg update && pkg upgrade` then reinstall `nodejs` |
-| Can’t open from other device | Check firewall, bind address, and LAN routing |
+| Can't open from other device | Check firewall, bind address, and LAN routing |
 
 ---