@allbluecn/web-app 0.9.5 → 0.10.2

package/src/components/settings/ai/create-custom-provider-dialog.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useTranslation } from "react-i18next"
 import { toast } from '@/components/ui/sonner'
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -14,6 +13,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { createCustomProviderFn } from "@/server/serverFns/ai/providers"
+import { m } from "@/paraglide/messages.js";
 
 interface FormState {
   displayName: string
@@ -37,7 +37,6 @@ export function CreateCustomProviderDialog({
   onOpenChange: (v: boolean) => void
 }) {
   const [form, setForm] = useState<FormState>(EMPTY_FORM)
-  const { t } = useTranslation("settings")
   const queryClient = useQueryClient()
 
   useEffect(() => {
@@ -58,20 +57,20 @@ export function CreateCustomProviderDialog({
       onOpenChange(false)
       await queryClient.invalidateQueries({ queryKey: ["ai-providers"] })
       await queryClient.invalidateQueries({ queryKey: ["ai-enabled-models"] })
-      toast.success(t("ai.providerCreated"))
+      toast.success(m.settings_ai_providerCreated())
     },
     onError: (err) => {
-      toast.error(err instanceof Error ? err.message : t("ai.operationFailed"))
+      toast.error(err instanceof Error ? err.message : m.settings_ai_operationFailed())
     },
   })
 
   const handleSubmit = () => {
     if (!form.displayName.trim()) {
-      toast.error(`${t("ai.customProviderName")} 不能为空`)
+      toast.error(`${m.settings_ai_customProviderName()} 不能为空`)
       return
     }
     if (!form.defaultModel.trim()) {
-      toast.error(`${t("ai.customDefaultModel")} 不能为空`)
+      toast.error(`${m.settings_ai_customDefaultModel()} 不能为空`)
       return
     }
     mutation.mutate()
@@ -86,31 +85,31 @@ export function CreateCustomProviderDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>{t("ai.createCustomProvider")}</DialogTitle>
+          <DialogTitle>{m.settings_ai_createCustomProvider()}</DialogTitle>
           <DialogDescription>
-            {t("ai.createCustomProviderDescription")}
+            {m.settings_ai_createCustomProviderDescription()}
           </DialogDescription>
         </DialogHeader>
 
         <div className="grid gap-4">
           <div className="grid gap-1.5">
-            <Label>{t("ai.customProviderName")} <span className="text-red-500">*</span></Label>
+            <Label>{m.settings_ai_customProviderName()} <span className="text-red-500">*</span></Label>
             <Input
               value={form.displayName}
               onChange={(e) => update("displayName", e.target.value)}
-              placeholder={t("ai.customProviderNamePlaceholder")}
+              placeholder={m.settings_ai_customProviderNamePlaceholder()}
             />
           </div>
           <div className="grid gap-1.5">
-            <Label>{t("ai.customBaseUrl")}</Label>
+            <Label>{m.settings_ai_customBaseUrl()}</Label>
             <Input
               value={form.baseUrl}
               onChange={(e) => update("baseUrl", e.target.value)}
-              placeholder={t("ai.customBaseUrlPlaceholder")}
+              placeholder={m.settings_ai_customBaseUrlPlaceholder()}
             />
           </div>
           <div className="grid gap-1.5">
-            <Label>{t("ai.customApiKey")}</Label>
+            <Label>{m.settings_ai_customApiKey()}</Label>
             <Input
               type="password"
               value={form.apiKey}
@@ -119,11 +118,11 @@ export function CreateCustomProviderDialog({
             />
           </div>
           <div className="grid gap-1.5">
-            <Label>{t("ai.customDefaultModel")} <span className="text-red-500">*</span></Label>
+            <Label>{m.settings_ai_customDefaultModel()} <span className="text-red-500">*</span></Label>
             <Input
               value={form.defaultModel}
               onChange={(e) => update("defaultModel", e.target.value)}
-              placeholder={t("ai.customDefaultModelPlaceholder")}
+              placeholder={m.settings_ai_customDefaultModelPlaceholder()}
             />
           </div>
         </div>
@@ -136,7 +135,7 @@ export function CreateCustomProviderDialog({
             onClick={handleSubmit}
             disabled={mutation.isPending || !isValid}
           >
-            {mutation.isPending ? t("ai.creatingProvider") : t("ai.createProvider")}
+            {mutation.isPending ? m.settings_ai_creatingProvider() : m.settings_ai_createProvider()}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/settings/ai/model-card.tsx

@@ -26,7 +26,23 @@ import { Badge } from "@/components/ui/badge"
 import { Switch } from "@/components/ui/switch"
 import { cn } from "@/lib/utils"
 import { ProviderLogo } from "./provider-logo"
-import { useTranslation } from "react-i18next"
+import { m } from "@/paraglide/messages.js";
+
+const TAG_LABELS: Record<string, () => string> = {
+  custom: m.settings_ai_tagLabels_custom,
+  flagship: m.settings_ai_tagLabels_flagship,
+  fast: m.settings_ai_tagLabels_fast,
+  recommended: m.settings_ai_tagLabels_recommended,
+  apiFetched: m.settings_ai_tagLabels_apiFetched,
+};
+
+const CAPABILITY_LABELS: Record<string, () => string> = {
+  text: m.settings_ai_capabilitiesMap_text,
+  vision: m.settings_ai_capabilitiesMap_vision,
+  tools: m.settings_ai_capabilitiesMap_tools,
+  reasoning: m.settings_ai_capabilitiesMap_reasoning,
+  audio: m.settings_ai_capabilitiesMap_audio,
+};
 
 /** 自定义标签预设配色，未命中的 fallback 到 muted */
 const TAG_STYLES: Record<string, string> = {
@@ -99,9 +115,9 @@ function ModelIcon({
   return <ProviderLogo provider={provider} size={size} />
 }
 
-function formatPrice(price?: number, t?: (k: string) => string): string {
+function formatPrice(price?: number): string {
   if (price === undefined || price === null) return "—"
-  if (price === 0) return t ? t("ai.freePrice") : "Free"
+  if (price === 0) return m.settings_ai_freePrice()
   return `$${price}`
 }
 
@@ -124,7 +140,6 @@ export function ModelCard({
 }) {
   const tags = model.tags ?? []
   const caps = model.capabilities ?? []
-  const { t } = useTranslation("settings")
 
   return (
     <div
@@ -138,7 +153,7 @@ export function ModelCard({
           ref={dragHandleRef}
           type="button"
           className="-ml-1 flex size-6 shrink-0 cursor-grab items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing"
-          aria-label={t("ai.dragToSort")}
+          aria-label={m.settings_ai_dragToSort()}
         >
           <GripVertical className="size-4" />
         </button>
@@ -162,7 +177,7 @@ export function ModelCard({
                   TAG_STYLES[tagKey] ?? "",
                 )}
               >
-                {t(`ai.tagLabels.${tagKey}`, { defaultValue: tag })}
+                {TAG_LABELS[tagKey]?.() ?? tag}
               </Badge>
             );
           })}
@@ -172,7 +187,7 @@ export function ModelCard({
               variant="secondary"
               className="h-5 shrink-0 px-1.5 text-[10px]"
             >
-              {t(`ai.capabilitiesMap.${c}`) ?? c}
+              {CAPABILITY_LABELS[c]?.() ?? c}
             </Badge>
           ))}
         </div>
@@ -186,17 +201,17 @@ export function ModelCard({
           )}
           <span className="inline-flex items-center gap-0.5">
             <Coins className="size-3" />
-            {formatPrice(model.inputPrice, t)} / {formatPrice(model.outputPrice, t)}
+            {formatPrice(model.inputPrice)} / {formatPrice(model.outputPrice)}
           </span>
           {!!model.contextWindow && (
-            <span>{t("ai.contextWindowK", { k: Math.round(model.contextWindow / 1000) })}</span>
+            <span>{m.settings_ai_contextWindowK({ k: Math.round(model.contextWindow / 1000) })}</span>
           )}
         </div>
       </div>
       <Switch
         checked={active}
         onCheckedChange={(next) => onToggle(model.id, next)}
-        aria-label={t("ai.toggleModel", { name: model.displayName })}
+        aria-label={m.settings_ai_toggleModel({ name: model.displayName })}
       />
     </div>
   )

package/src/components/settings/ai/model-manager.tsx

@@ -17,7 +17,6 @@
 
 import { useMemo, useState } from "react"
 import { useMutation } from "@tanstack/react-query"
-import { useTranslation } from "react-i18next"
 import { toast } from '@/components/ui/sonner'
 import { DragDropProvider, type DragEndEvent } from "@dnd-kit/react"
 import { useSortable } from "@dnd-kit/react/sortable"
@@ -36,6 +35,16 @@ import { cn } from "@/lib/utils"
 import { ModelCard } from "./model-card"
 import { CreateCustomModelDialog } from "./create-custom-model-dialog"
 import { refreshModelsFn } from "@/server/serverFns/ai/providers"
+import { m } from "@/paraglide/messages.js";
+
+const TAB_LABELS: Record<string, () => string> = {
+  all: m.settings_ai_tabs_all,
+  text: m.settings_ai_tabs_text,
+  reasoning: m.settings_ai_tabs_reasoning,
+  vision: m.settings_ai_tabs_vision,
+  tools: m.settings_ai_tabs_tools,
+  video: m.settings_ai_tabs_video,
+};
 
 function arrayMove<T>(arr: T[], from: number, to: number): T[] {
   const copy = [...arr]
@@ -120,7 +129,6 @@ export function ModelManager({
   const [activeTab, setActiveTab] = useState<ModelTab>("all")
   const [search, setSearch] = useState("")
   const [createOpen, setCreateOpen] = useState(false)
-  const { t } = useTranslation("settings")
 
   const allModels = useMemo(
     () => dedupeById([...globalModels, ...customModels]),
@@ -157,7 +165,7 @@ export function ModelManager({
       onChanged?.()
     },
     onError: (err) =>
-      toast.error(err instanceof Error ? err.message : t("ai.fetchFailed")),
+      toast.error(err instanceof Error ? err.message : m.settings_ai_fetchFailed()),
   })
 
   function toggle(id: string, next: boolean) {
@@ -210,9 +218,9 @@ export function ModelManager({
     <div className="space-y-4">
       <div className="flex flex-wrap items-center gap-2">
         <div className="text-sm text-muted-foreground">
-          {t("ai.totalModels", { count: allModels.length })}
+          {m.settings_ai_totalModels({ count: allModels.length })}
           {customModels.length > 0 && (
-            <span className="text-[11px]">{t("ai.includesCustom", { count: customModels.length })}</span>
+            <span className="text-[11px]">{m.settings_ai_includesCustom({ count: customModels.length })}</span>
           )}
         </div>
         <div className="relative ml-auto">
@@ -220,7 +228,7 @@ export function ModelManager({
           <Input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder={t("ai.searchModels")}
+            placeholder={m.settings_ai_searchModels()}
             className="h-9 w-56 pl-9"
           />
         </div>
@@ -235,11 +243,11 @@ export function ModelManager({
           ) : (
             <RefreshCw className="size-4" data-icon="inline-start" />
           )}
-          {t("ai.fetchModels")}
+          {m.settings_ai_fetchModels()}
         </Button>
         <Button size="sm" onClick={() => setCreateOpen(true)}>
           <Plus className="size-4" data-icon="inline-start" />
-          {t("ai.createModel")}
+          {m.settings_ai_createModel()}
         </Button>
       </div>
 
@@ -259,7 +267,7 @@ export function ModelManager({
                   : "border-transparent text-muted-foreground hover:text-foreground",
               )}
             >
-              {t(`ai.tabs.${tTab.value}`)}
+              {TAB_LABELS[tTab.value]?.() ?? tTab.value}
               <span className="ml-1 text-[11px] text-muted-foreground">
                 {count}
               </span>
@@ -271,18 +279,18 @@ export function ModelManager({
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium">{t("ai.enabled")}</h4>
+            <h4 className="text-sm font-medium">{m.settings_ai_enabled()}</h4>
             <span className="text-xs text-muted-foreground">
               {enabledFiltered.length} / {filtered.length}
             </span>
           </div>
           <div className="flex items-center gap-2">
-            <span className="text-xs text-muted-foreground">{t("ai.enableAll")}</span>
+            <span className="text-xs text-muted-foreground">{m.settings_ai_enableAll()}</span>
             <Switch
               checked={allEnabledInView}
               onCheckedChange={setAllEnabled}
               disabled={filtered.length === 0}
-              aria-label={t("ai.toggleAllFiltered")}
+              aria-label={m.settings_ai_toggleAllFiltered()}
             />
             <Button
               variant="ghost"
@@ -292,15 +300,15 @@ export function ModelManager({
               disabled={enabledFiltered.length === 0}
             >
               <Power className="size-3.5" />
-              {t("ai.disableAll")}
+              {m.settings_ai_disableAll()}
             </Button>
           </div>
         </div>
         {enabledFiltered.length === 0 ? (
           <p className="rounded-lg border border-dashed py-6 text-center text-xs text-muted-foreground">
             {search || activeTab !== "all"
-              ? t("ai.noEnabledInFilter")
-              : t("ai.noEnabledYet")}
+              ? m.settings_ai_noEnabledInFilter()
+              : m.settings_ai_noEnabledYet()}
           </p>
         ) : (
           <DragDropProvider onDragEnd={handleDragEnd}>
@@ -323,7 +331,7 @@ export function ModelManager({
       {disabledFiltered.length > 0 && (
         <div className="space-y-2">
           <div className="flex items-center gap-2">
-            <h4 className="text-sm font-medium">{t("ai.disabled")}</h4>
+            <h4 className="text-sm font-medium">{m.settings_ai_disabled()}</h4>
             <span className="text-xs text-muted-foreground">
               {disabledFiltered.length}
             </span>

package/src/components/settings/ai/provider-card.tsx

@@ -19,7 +19,6 @@
 import { useMutation } from "@tanstack/react-query"
 import { Link, useRouter } from "@tanstack/react-router"
 import { AlertTriangle, Check } from "lucide-react"
-import { useTranslation } from "react-i18next"
 import { toast } from '@/components/ui/sonner'
 import type { AiProviderMeta } from "@allbluecn/kernel"
 import { PROVIDER_BADGE_STYLES } from "@allbluecn/kernel"
@@ -28,6 +27,7 @@ import { Switch } from "@/components/ui/switch"
 import { cn } from "@/lib/utils"
 import { updateAiProviderFn } from "@/server/serverFns/ai/providers"
 import { ProviderIcon } from "./provider-icon"
+import { m } from "@/paraglide/messages.js";
 
 export type ProviderCardData = {
   meta: AiProviderMeta
@@ -47,8 +47,6 @@ export function ProviderCard({ data }: { data: ProviderCardData }) {
   const isReady = config.enabled && (config.hasKey || meta.isLocal)
   const modelCount = config.models.length > 0 ? config.models.length : meta.models.length
   const router = useRouter()
-  const { t } = useTranslation("settings")
-
   const toggleMutation = useMutation({
     mutationFn: (enabled: boolean) =>
       updateAiProviderFn({ data: { providerId: meta.providerId, enabled } }),
@@ -56,7 +54,7 @@ export function ProviderCard({ data }: { data: ProviderCardData }) {
       await router.invalidate()
     },
     onError: (err) =>
-      toast.error(err instanceof Error ? err.message : t("ai.operationFailed")),
+      toast.error(err instanceof Error ? err.message : m.settings_ai_operationFailed()),
   })
 
   const badgeStyle = meta.badge
@@ -79,12 +77,12 @@ export function ProviderCard({ data }: { data: ProviderCardData }) {
         {isReady ? (
           <Badge variant="default" className="gap-1">
             <Check className="size-3" />
-            {t("ai.providerEnabled")}
+            {m.settings_ai_providerEnabled()}
           </Badge>
         ) : isConfigured ? (
-          <Badge variant="secondary">{t("ai.providerConfigured")}</Badge>
+          <Badge variant="secondary">{m.settings_ai_providerConfigured()}</Badge>
         ) : (
-          <Badge variant="outline">{meta.isLocal ? t("ai.providerLocal") : t("ai.providerNotConfigured")}</Badge>
+          <Badge variant="outline">{meta.isLocal ? m.settings_ai_providerLocal() : m.settings_ai_providerNotConfigured()}</Badge>
         )}
       </div>
 
@@ -99,7 +97,7 @@ export function ProviderCard({ data }: { data: ProviderCardData }) {
           {!platformEnabled && (
             <AlertTriangle
               className="size-3.5 text-amber-500"
-              aria-label={t("ai.platformDepreciated")}
+              aria-label={m.settings_ai_platformDepreciated()}
             />
           )}
         </div>
@@ -107,7 +105,7 @@ export function ProviderCard({ data }: { data: ProviderCardData }) {
       </div>
 
       <div className="mt-auto flex items-center justify-between text-xs text-muted-foreground">
-        <span>{t("ai.modelCount", { count: modelCount })}</span>
+        <span>{m.settings_ai_modelCount({ count: modelCount })}</span>
         <div
           className="flex items-center gap-1.5"
           onClick={(e) => e.preventDefault()}
@@ -115,14 +113,14 @@ export function ProviderCard({ data }: { data: ProviderCardData }) {
           <Switch
             checked={config.enabled}
             onCheckedChange={(checked) => toggleMutation.mutate(checked)}
-            aria-label={config.enabled ? t("ai.disable") : t("ai.enable")}
+            aria-label={config.enabled ? m.settings_ai_disable() : m.settings_ai_enable()}
           />
         </div>
       </div>
 
       {!platformEnabled && (
         <p className="rounded bg-amber-500/10 px-2 py-1 text-[10px] text-amber-700 dark:text-amber-400">
-          {t("ai.platformDepreciatedNotice")}
+          {m.settings_ai_platformDepreciatedNotice()}
         </p>
       )}
     </Link>

package/src/components/settings/ai/provider-detail-form.tsx

@@ -31,7 +31,6 @@ import {
   Zap,
 } from "lucide-react"
 import { toast } from "@/components/ui/sonner"
-import { useTranslation } from "react-i18next"
 import type { AiModelMeta, AiProviderMeta } from "@allbluecn/kernel"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -61,6 +60,7 @@ import {
   providerDetailSchema,
   type ProviderDetailValues,
 } from "./schemas/provider-detail"
+import { m } from "@/paraglide/messages.js";
 
 export type ProviderDetail = Awaited<ReturnType<typeof getAiProviderFn>>
 
@@ -75,7 +75,6 @@ type PersistData = {
 type SaveState = "idle" | "saving" | "saved" | "error"
 
 export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
-  const { t } = useTranslation("settings")
   const router = useRouter()
   const meta = initial.meta as AiProviderMeta
   const initialConfig = initial.config
@@ -118,7 +117,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
     onError: (err) => {
       setSaveState("error")
       toast.error(
-        t("ai.saveFailedReason", { message: err instanceof Error ? err.message : t("ai.unknownError") }),
+        m.settings_ai_saveFailedReason({ message: err instanceof Error ? err.message : m.settings_ai_unknownError() }),
       )
     },
   })
@@ -151,12 +150,12 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
     mutationFn: (providerId: string) =>
       deleteAiProviderConfigFn({ data: { providerId } }),
     onSuccess: () => {
-      toast.success(t("ai.configDeleted"))
+      toast.success(m.settings_ai_configDeleted())
       router.navigate({ to: "/settings/ai" })
     },
     onError: (err) =>
       toast.error(
-        t("ai.deleteFailedReason", { message: err instanceof Error ? err.message : t("ai.unknownError") }),
+        m.settings_ai_deleteFailedReason({ message: err instanceof Error ? err.message : m.settings_ai_unknownError() }),
       ),
   })
 
@@ -174,7 +173,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
       else toast.error(result.message)
     },
     onError: (err) =>
-      toast.error(t("ai.testFailedReason", { message: err instanceof Error ? err.message : t("ai.unknownError") })),
+      toast.error(m.settings_ai_testFailedReason({ message: err instanceof Error ? err.message : m.settings_ai_unknownError() })),
   })
 
   function handleApiKeyBlur() {
@@ -192,7 +191,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
     <div className="space-y-6">
       <div className="flex items-center gap-2">
         <Button asChild variant="ghost" size="icon">
-          <Link to="/settings/ai" aria-label={t("ai.back")}>
+          <Link to="/settings/ai" aria-label={m.settings_ai_back()}>
             <ArrowLeft className="size-4" />
           </Link>
         </Button>
@@ -204,8 +203,8 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
         <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-700 dark:text-amber-400">
           <AlertTriangle className="mt-0.5 size-4 shrink-0" />
           <div>
-            <p className="font-medium">{t("ai.platformDelistedTitle")}</p>
-            <p>{t("ai.platformDelistedDesc")}</p>
+            <p className="font-medium">{m.settings_ai_platformDelistedTitle()}</p>
+            <p>{m.settings_ai_platformDelistedDesc()}</p>
           </div>
         </div>
       )}
@@ -221,10 +220,10 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
             {meta.category === "recommended" && (
               <Badge variant="default" className="gap-1">
                 <Sparkles className="size-3" />
-                {t("ai.recommended")}
+                {m.settings_ai_recommended()}
               </Badge>
             )}
-            {meta.isLocal && <Badge variant="secondary">{t("ai.providerLocal")}</Badge>}
+            {meta.isLocal && <Badge variant="secondary">{m.settings_ai_providerLocal()}</Badge>}
             <Badge
               variant={enabledValue ? "default" : "outline"}
               className={cn(
@@ -234,7 +233,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
                   : "text-muted-foreground",
               )}
             >
-              {enabledValue ? t("ai.enabled") : t("ai.disabled")}
+              {enabledValue ? m.settings_ai_enabled() : m.settings_ai_disabled()}
             </Badge>
           </div>
           <p className="text-sm text-muted-foreground">{meta.description}</p>
@@ -247,7 +246,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
                 className="inline-flex items-center gap-1 text-primary hover:underline"
               >
                 <ExternalLink className="size-3" />
-                {t("ai.docs")}
+                {m.settings_ai_docs()}
               </a>
             )}
             {meta.keyUrl && !meta.isLocal && (
@@ -258,7 +257,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
                 className="inline-flex items-center gap-1 text-primary hover:underline"
               >
                 <ExternalLink className="size-3" />
-                {t("ai.getApiKey")}
+                {m.settings_ai_getApiKey()}
               </a>
             )}
           </div>
@@ -273,7 +272,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
                   field.handleChange(!!next)
                   persistImmediate({ enabled: !!next })
                 }}
-                aria-label={t("ai.enableProvider")}
+                aria-label={m.settings_ai_enableProvider()}
               />
             </div>
           )}
@@ -281,7 +280,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
       </div>
 
       <FieldSet>
-        <FieldLegend>{t("ai.setupConfig")}</FieldLegend>
+        <FieldLegend>{m.settings_ai_setupConfig()}</FieldLegend>
 
         <FieldGroup>
           <ApiKeyField
@@ -311,9 +310,9 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
             children={(field) => (
               <Field orientation="horizontal">
                 <FieldContent>
-                  <FieldLabel>{t("ai.baseUrlLabel")}</FieldLabel>
+                  <FieldLabel>{m.settings_ai_baseUrlLabel()}</FieldLabel>
                   <FieldDescription className="text-xs space-y-1">
-                    {t("ai.baseUrlHint")}
+                    {m.settings_ai_baseUrlHint()}
                     {meta.defaultBaseUrl && (
                       <code className="rounded bg-muted px-1.5 py-0.5">
                         {meta.defaultBaseUrl}
@@ -337,9 +336,9 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
       </FieldSet>
 
       <FieldSet className="mt-20">
-        <FieldLegend>{t("ai.modelManagement")}</FieldLegend>
+        <FieldLegend>{m.settings_ai_modelManagement()}</FieldLegend>
         <FieldDescription className="text-xs">
-          {t("ai.modelManagementDesc")}
+          {m.settings_ai_modelManagementDesc()}
         </FieldDescription>
         <ModelManager
           globalModels={meta.models}
@@ -374,7 +373,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
           }}
           disabled={!initialConfig.hasKey && !initialConfig.enabled}
         >
-          {t("ai.clearConfig")}
+          {m.settings_ai_clearConfig()}
         </Button>
         <Button
           variant="outline"
@@ -386,7 +385,7 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
           ) : (
             <Zap className="size-4" data-icon="inline-start" />
           )}
-          {t("ai.testConnection")}
+          {m.settings_ai_testConnection()}
         </Button>
       </div>
     </div>
@@ -394,12 +393,11 @@ export function ProviderDetailForm({ initial }: { initial: ProviderDetail }) {
 }
 
 function SaveStatusIndicator({ state }: { state: SaveState }) {
-  const { t } = useTranslation("settings")
   if (state === "saving") {
     return (
       <span className="text-xs text-muted-foreground inline-flex items-center gap-1">
         <Loader2 className="size-3 animate-spin" />
-        {t("ai.saving")}
+        {m.settings_ai_saving()}
       </span>
     )
   }
@@ -407,12 +405,12 @@ function SaveStatusIndicator({ state }: { state: SaveState }) {
     return (
       <span className="text-xs text-emerald-600 dark:text-emerald-400 inline-flex items-center gap-1">
         <Check className="size-3" />
-        {t("ai.saved")}
+        {m.settings_ai_saved()}
       </span>
     )
   }
   if (state === "error") {
-    return <span className="text-xs text-destructive">{t("ai.saveShort")}</span>
+    return <span className="text-xs text-destructive">{m.settings_ai_saveShort()}</span>
   }
   return null
 }