@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/project/project-activity-list.tsx

@@ -14,38 +14,35 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useTranslation } from "react-i18next"
-import { getClientI18n } from "@/i18n/client"
 import { UserAvatar } from "@/components/shared-kit";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 import { cn } from "@/lib/utils";
 import { formatDate } from "@/lib/datetime";
 import { useTimezone } from "@/providers/timezone-provider";
 import type { ProjectActivity } from "@/types/project";
+import { m } from "@/paraglide/messages.js";
 
-const ACTION_TEXT: Record<string, string> = {
-  created: "project.activity.created",
-  updated: "project.activity.updated",
-  deleted: "project.activity.deleted",
-  member_invited: "project.activity.memberInvited",
-  member_joined: "project.activity.memberJoined",
-  member_removed: "project.activity.memberRemoved",
-  role_changed: "project.activity.roleChanged",
-  module_viewed: "project.activity.moduleViewed",
+const ACTION_TEXT: Record<string, () => string> = {
+  created: m.projects_project_activity_created,
+  updated: m.projects_project_activity_updated,
+  deleted: m.projects_project_activity_deleted,
+  member_invited: m.projects_project_activity_memberInvited,
+  member_joined: m.projects_project_activity_memberJoined,
+  member_removed: m.projects_project_activity_memberRemoved,
+  role_changed: m.projects_project_activity_roleChanged,
+  module_viewed: m.projects_project_activity_moduleViewed,
 };
 
 function relativeTime(date: Date, timezone: string): string {
   const diff = Date.now() - new Date(date).getTime();
   const minutes = Math.floor(diff / 60000);
-  const i18n = getClientI18n()
-  if (minutes < 1) return i18n.t("project.activity.justNow");
-  if (minutes < 60) return i18n.t("project.activity.minutesAgo", { count: minutes });
+  if (minutes < 1) return m.projects_project_activity_justNow();
+  if (minutes < 60) return m.projects_project_activity_minutesAgo({ count: minutes });
   const hours = Math.floor(minutes / 60);
-  if (hours < 24) return i18n.t("project.activity.hoursAgo", { count: hours });
+  if (hours < 24) return m.projects_project_activity_hoursAgo({ count: hours });
   const days = Math.floor(hours / 24);
-  if (days < 30) return i18n.t("project.activity.daysAgo", { count: days });
-  return formatDate(date, timezone, getClientI18n().t('projects:project.activity.dateFormat'));
+  if (days < 30) return m.projects_project_activity_daysAgo({ count: days });
+  return new Date(date).toLocaleDateString(timezone);
 }
 
 interface ProjectActivityListProps {
@@ -58,12 +55,11 @@ export function ProjectActivityList({
   className,
 }: ProjectActivityListProps) {
   const timezone = useTimezone();
-  const { t } = useTranslation("projects");
 
   if (activities.length === 0) {
     return (
       <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
-        {t("project.activity.noRecords")}
+        {m.projects_project_activity_noRecords()}
       </div>
     );
   }
@@ -72,8 +68,7 @@ export function ProjectActivityList({
     <ol className={cn("space-y-1", className)}>
       {activities.map((activity, idx) => {
         const isLast = idx === activities.length - 1;
-        const actionKey = ACTION_TEXT[activity.action] ?? activity.action;
-        const actionText = t(actionKey, { defaultValue: actionKey });
+        const actionText = ACTION_TEXT[activity.action]?.() ?? activity.action;
         const meta = activity.metadata;
         const invitedName =
           meta && typeof meta === "object" && !Array.isArray(meta) && "username" in meta
@@ -96,10 +91,10 @@ export function ProjectActivityList({
             />
             <div className="flex min-w-0 flex-1 flex-col gap-0.5 pt-1">
               <p className="text-sm leading-snug">
-                <span className="font-medium">{activity.user?.username ?? t("project.activity.unknownUser")}</span>
+                <span className="font-medium">{activity.user?.username ?? m.projects_project_activity_unknownUser()}</span>
                 <span className="text-muted-foreground"> {actionText}</span>
                 {typeof invitedName === "string" && (
-                  <span className="text-muted-foreground"> · {invitedName}</span>
+                  <span className="text-muted-foreground">  {invitedName}</span>
                 )}
               </p>
               <span className="text-xs text-muted-foreground">

package/src/components/project/project-member-manager.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { MoreHorizontal, UserPlus, Trash2, Crown } from "lucide-react";
 import { toast } from '@/components/ui/sonner';
 import { Button } from "@/components/ui/button";
@@ -47,6 +46,7 @@ import {
   updateMemberRoleFn,
 } from "@/server/serverFns/project";
 import type { ProjectMember } from "@/types/project";
+import { m } from "@/paraglide/messages.js";
 
 interface ProjectMemberManagerProps {
   projectId: string;
@@ -56,11 +56,11 @@ interface ProjectMemberManagerProps {
   onRefresh: () => void;
 }
 
-const ROLE_BADGE: Record<string, { labelKey: string; variant: "default" | "secondary" | "outline" }> = {
-  owner: { labelKey: "project.member.owner", variant: "default" },
-  admin: { labelKey: "project.member.admin", variant: "secondary" },
-  member: { labelKey: "project.member.member", variant: "outline" },
-  viewer: { labelKey: "project.member.viewer", variant: "outline" },
+const ROLE_BADGE: Record<string, { label: () => string; variant: "default" | "secondary" | "outline" }> = {
+  owner: { label: m.projects_project_member_owner, variant: "default" },
+  admin: { label: m.projects_project_member_admin, variant: "secondary" },
+  member: { label: m.projects_project_member_member, variant: "outline" },
+  viewer: { label: m.projects_project_member_viewer, variant: "outline" },
 };
 
 export function ProjectMemberManager({
@@ -70,7 +70,6 @@ export function ProjectMemberManager({
   currentUserId,
   onRefresh,
 }: ProjectMemberManagerProps) {
-  const { t } = useTranslation("projects");
   const [inviteOpen, setInviteOpen] = useState(false);
   const [removing, setRemoving] = useState<ProjectMember | null>(null);
   const [acting, setActing] = useState(false);
@@ -85,10 +84,10 @@ export function ProjectMemberManager({
     setActing(true);
     try {
       await updateMemberRoleFn({ data: { projectId, memberId, role } });
-      toast.success(t("project.member.roleUpdated"));
+      toast.success(m.projects_project_member_roleUpdated());
       onRefresh();
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : t("form.operationFailed"));
+      toast.error(err instanceof Error ? err.message : m.common_form_operationFailed());
     } finally {
       setActing(false);
     }
@@ -101,11 +100,11 @@ export function ProjectMemberManager({
       await removeProjectMemberFn({
         data: { projectId, memberId: removing.id },
       });
-      toast.success(t("project.member.removed"));
+      toast.success(m.projects_project_member_removed());
       setRemoving(null);
       onRefresh();
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : t("project.member.removeFailed"));
+      toast.error(err instanceof Error ? err.message : m.projects_project_member_removeFailed());
     } finally {
       setActing(false);
     }
@@ -115,13 +114,13 @@ export function ProjectMemberManager({
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold">{t("project.member.management")}</h2>
-          <p className="text-sm text-muted-foreground">{t("project.member.totalMembers", { count: members.length })}</p>
+          <h2 className="text-lg font-semibold">{m.projects_project_member_management()}</h2>
+          <p className="text-sm text-muted-foreground">{m.projects_project_member_totalMembers({ count: members.length })}</p>
         </div>
         {canManage && (
           <Button onClick={() => setInviteOpen(true)}>
             <UserPlus className="size-4" />
-            {t("project.member.invite")}
+            {m.projects_project_member_invite()}
           </Button>
         )}
       </div>
@@ -130,7 +129,7 @@ export function ProjectMemberManager({
         {members.length === 0 ? (
           <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
             <p className="text-sm text-muted-foreground">
-              {t("project.member.noTeamMembers")}
+              {m.projects_project_member_noTeamMembers()}
             </p>
           </div>
         ) : members.map((member) => {
@@ -153,16 +152,16 @@ export function ProjectMemberManager({
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
                   <span className="truncate font-medium">
-                    {member.user?.username ?? t("project.activity.unknownUser")}
-                    {isSelf && <span className="text-muted-foreground">（{t("project.member.self")}）</span>}
+                    {member.user?.username ?? m.projects_project_activity_unknownUser()}
+                    {isSelf && <span className="text-muted-foreground">（{m.projects_project_member_self()}）</span>}
                   </span>
                   {member.role === "owner" && (
                     <Crown className="size-3.5 text-amber-500" />
                   )}
-                  <Badge variant={badge.variant}>{t(badge.labelKey)}</Badge>
+                  <Badge variant={badge.variant}>{badge.label()}</Badge>
                   {member.status === "invited" && (
                     <Badge variant="outline" className="text-muted-foreground">
-                      {t("project.member.pending")}
+                      {m.projects_project_member_pending()}
                     </Badge>
                   )}
                 </div>
@@ -183,21 +182,21 @@ export function ProjectMemberManager({
                   <DropdownMenuContent align="end">
                     {canChangeRole && member.role !== "owner" && (
                       <>
-                        <DropdownMenuLabel>{t("project.member.setRole")}</DropdownMenuLabel>
+                        <DropdownMenuLabel>{m.projects_project_member_setRole()}</DropdownMenuLabel>
                         <DropdownMenuItem
                           onClick={() => handleChangeRole(member.id, "admin")}
                         >
-                          {t("project.member.setAdmin")}
+                          {m.projects_project_member_setAdmin()}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onClick={() => handleChangeRole(member.id, "member")}
                         >
-                          {t("project.member.setMember")}
+                          {m.projects_project_member_setMember()}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onClick={() => handleChangeRole(member.id, "viewer")}
                         >
-                          {t("project.member.setViewer")}
+                          {m.projects_project_member_setViewer()}
                         </DropdownMenuItem>
                         {canRemoveThis && <DropdownMenuSeparator />}
                       </>
@@ -208,7 +207,7 @@ export function ProjectMemberManager({
                         onClick={() => setRemoving(member)}
                       >
                         <Trash2 className="size-4" />
-                        {t("project.member.removeMember")}
+                        {m.projects_project_member_removeMember()}
                       </DropdownMenuItem>
                     )}
                   </DropdownMenuContent>
@@ -229,19 +228,19 @@ export function ProjectMemberManager({
       <AlertDialog open={!!removing} onOpenChange={(v) => !v && setRemoving(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t("project.member.confirmRemove")}</AlertDialogTitle>
+            <AlertDialogTitle>{m.projects_project_member_confirmRemove()}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t("project.member.confirmRemoveDesc", { username: removing?.user?.username })}
+              {m.projects_project_member_confirmRemoveDesc({ username: removing?.user?.username ?? "" })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={acting}>{t("button.cancel")}</AlertDialogCancel>
+            <AlertDialogCancel disabled={acting}>{m.common_button_cancel()}</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleRemove}
               disabled={acting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {acting ? t("project.member.removing") : t("project.member.confirmRemoveAction")}
+              {acting ? m.projects_project_member_removing() : m.projects_project_member_confirmRemoveAction()}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/src/components/project/project-module-card.tsx

@@ -16,29 +16,28 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Link } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
 import { ChevronRight } from "lucide-react";
 import { Card } from "@/components/ui/card";
 import type { ProjectModuleOverview } from "@/types/project";
+import { m } from "@/paraglide/messages.js";
 
 interface ProjectModuleCardProps {
   module: ProjectModuleOverview;
   projectId: string;
 }
 
-function formatRelative(date: Date | null, t: (key: string, opts?: Record<string, unknown>) => string): string {
+function formatRelative(date: Date | null): string {
   if (!date) return "—";
   const diff = Date.now() - new Date(date).getTime();
   const days = Math.floor(diff / 86400000);
-  if (days < 1) return t("project.moduleCard.today");
-  if (days < 30) return t("project.activity.daysAgo", { count: days });
+  if (days < 1) return m.projects_project_moduleCard_today();
+  if (days < 30) return m.projects_project_activity_daysAgo({ count: days });
   return new Intl.DateTimeFormat("zh-CN", { month: "long", day: "numeric" }).format(
     new Date(date),
   );
 }
 
 export function ProjectModuleCard({ module, projectId }: ProjectModuleCardProps) {
-  const { t } = useTranslation("projects");
   const Icon = module.icon;
   return (
     <Card className="group relative overflow-hidden p-5 transition-colors hover:bg-accent/40">
@@ -59,7 +58,7 @@ export function ProjectModuleCard({ module, projectId }: ProjectModuleCardProps)
         <p className="text-sm text-muted-foreground line-clamp-2">{module.description}</p>
       </div>
       <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
-        <span>{t("project.moduleCard.lastUpdate")}{formatRelative(module.lastUpdatedAt, t)}</span>
+        <span>{m.projects_project_moduleCard_lastUpdate()}{formatRelative(module.lastUpdatedAt)}</span>
         <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5" />
       </div>
     </Card>

package/src/components/project/schemas/create-project.ts

@@ -16,16 +16,14 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { z } from "zod"
-import { getClientI18n } from "@/i18n/client"
-
-const t = (key: string) => getClientI18n().t(key)
+import { m } from '@/paraglide/messages.js'
 
 export const createProjectSchema = z.object({
-  name: z.string().min(1, t("form.projectNameRequired")),
+  name: z.string().min(1, m.common_form_projectNameRequired()),
   description: z.string(),
   icon: z.string().default("folder-kanban"),
   displayId: z.string(),
-  workspaceId: z.string().min(1, t("form.workspaceRequired")),
+  workspaceId: z.string().min(1, m.common_form_workspaceRequired()),
 })
 
 export type CreateProjectValues = z.infer<typeof createProjectSchema>

package/src/components/prototype/component/GenericPrototype.tsx

@@ -15,7 +15,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import React from "react";
 
 export function GenericPrototype({ props, style }: { props?: Record<string, any>; style?: Record<string, any> }) {

package/src/components/prototype/component-preview.tsx

@@ -15,7 +15,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
 import React, { useMemo } from "react";
 import { cn } from "./utils";
 

package/src/components/settings/ai/api-key-field.tsx

@@ -18,7 +18,6 @@
 // apps/web/src/components/settings/ai/api-key-field.tsx
 import { useState } from "react"
 import { Eye, EyeOff, KeyRound, Trash2 } from "lucide-react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -27,6 +26,7 @@ import {
   FieldDescription,
   FieldLabel,
 } from "@/components/ui/field"
+import { m } from "@/paraglide/messages.js";
 
 export function ApiKeyField({
   hasKey,
@@ -48,15 +48,13 @@ export function ApiKeyField({
   const [value, setValue] = useState("")
   const [show, setShow] = useState(false)
   const [clearKey, setClearKey] = useState(false)
-  const { t } = useTranslation("settings")
-
   if (isLocal) {
     return (
       <Field orientation="horizontal">
         <FieldContent>
           <FieldLabel>API Key</FieldLabel>
           <FieldDescription className="text-xs">
-            {t("ai.localNoKeyNeeded")}
+            {m.settings_ai_localNoKeyNeeded()}
           </FieldDescription>
         </FieldContent>
       </Field>
@@ -68,7 +66,7 @@ export function ApiKeyField({
       <FieldContent>
         <FieldLabel>API Key</FieldLabel>
         <FieldDescription className="text-xs space-y-1">
-          <p>{t("ai.keyStoredEncrypted")}
+          <p>{m.settings_ai_keyStoredEncrypted()}
             {keyUrl && (
             <a
               href={keyUrl}
@@ -77,14 +75,14 @@ export function ApiKeyField({
               className="inline-flex items-center gap-1 text-primary hover:underline"
             >
               <KeyRound className="size-3" />
-              {t("ai.getKey")}
+              {m.settings_ai_getKey()}
             </a>
           )}
           </p>
 
           {hasKey && !clearKey && (
             <p>
-              {t("ai.current")}:
+              {m.settings_ai_current()}:
               <code className="rounded bg-muted px-1.5 py-0.5">{apiKeyMasked}</code>
             </p>
           )}
@@ -102,7 +100,7 @@ export function ApiKeyField({
             }}
             onBlur={onBlurApiKey}
             placeholder={
-              hasKey && !clearKey ? t("ai.keepCurrentKey") : keyPlaceholder
+              hasKey && !clearKey ? m.settings_ai_keepCurrentKey() : keyPlaceholder
             }
             autoComplete="off"
             className="w-72 pr-10"
@@ -113,7 +111,7 @@ export function ApiKeyField({
             size="icon"
             onClick={() => setShow((v) => !v)}
             className="absolute right-0 top-0 size-8"
-            aria-label={show ? t("ai.hideKey") : t("ai.showKey")}
+            aria-label={show ? m.settings_ai_hideKey() : m.settings_ai_showKey()}
           >
             {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
           </Button>
@@ -130,7 +128,7 @@ export function ApiKeyField({
             }}
             aria-pressed={clearKey}
             className="border-destructive text-destructive"
-            aria-label={t("ai.deleteSavedKey")}
+            aria-label={m.settings_ai_deleteSavedKey()}
           >
             <Trash2 className="size-4" />
           </Button>

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

@@ -18,7 +18,6 @@
 // apps/web/src/components/settings/ai/create-custom-model-dialog.tsx
 import { useState } from "react"
 import { useMutation } from "@tanstack/react-query"
-import { useTranslation } from "react-i18next"
 import { toast } from '@/components/ui/sonner'
 import { MODEL_CAPABILITY_OPTIONS } from "@allbluecn/kernel"
 import type { ModelCapability } from "@allbluecn/kernel"
@@ -35,6 +34,15 @@ import {
 } from "@/components/ui/dialog"
 import { cn } from "@/lib/utils"
 import { createCustomModelFn } from "@/server/serverFns/ai/providers"
+import { m } from "@/paraglide/messages.js";
+
+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,
+};
 
 interface FormState {
   id: string
@@ -72,7 +80,6 @@ export function CreateCustomModelDialog({
   onCreated?: () => void
 }) {
   const [form, setForm] = useState<FormState>(EMPTY_FORM)
-  const { t } = useTranslation("settings")
 
   const mutation = useMutation({
     mutationFn: () =>
@@ -116,7 +123,7 @@ export function CreateCustomModelDialog({
       }
     },
     onError: (err) =>
-      toast.error(err instanceof Error ? err.message : t("ai.createFailed")),
+      toast.error(err instanceof Error ? err.message : m.settings_ai_createFailed()),
   })
 
   function update<K extends keyof FormState>(key: K, value: FormState[K]) {
@@ -138,35 +145,35 @@ export function CreateCustomModelDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>{t("ai.createCustomModel")}</DialogTitle>
+          <DialogTitle>{m.settings_ai_createCustomModel()}</DialogTitle>
           <DialogDescription>
-            {t("ai.createCustomModelDescription")}
+            {m.settings_ai_createCustomModelDescription()}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-3 py-2">
           <div className="space-y-1.5">
-            <Label htmlFor="cm-id">{t("ai.modelId")}</Label>
+            <Label htmlFor="cm-id">{m.settings_ai_modelId()}</Label>
             <Input
               id="cm-id"
               value={form.id}
               onChange={(e) => update("id", e.target.value)}
-              placeholder={t("ai.modelIdPlaceholder", { example: "ft:gpt-4o:my-org:1" })}
+              placeholder={m.settings_ai_modelIdPlaceholder({ example: "ft:gpt-4o:my-org:1" })}
               className="font-mono text-xs"
             />
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="cm-name">{t("ai.displayName")}</Label>
+            <Label htmlFor="cm-name">{m.settings_ai_displayName()}</Label>
             <Input
               id="cm-name"
               value={form.displayName}
               onChange={(e) => update("displayName", e.target.value)}
-              placeholder={t("ai.displayNamePlaceholder")}
+              placeholder={m.settings_ai_displayNamePlaceholder()}
             />
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
-              <Label htmlFor="cm-ctx">{t("ai.contextWindow")}</Label>
+              <Label htmlFor="cm-ctx">{m.settings_ai_contextWindow()}</Label>
               <Input
                 id="cm-ctx"
                 type="number"
@@ -176,7 +183,7 @@ export function CreateCustomModelDialog({
               />
             </div>
             <div className="space-y-1.5">
-              <Label htmlFor="cm-date">{t("ai.releaseDate")}</Label>
+              <Label htmlFor="cm-date">{m.settings_ai_releaseDate()}</Label>
               <Input
                 id="cm-date"
                 type="date"
@@ -187,7 +194,7 @@ export function CreateCustomModelDialog({
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
-              <Label htmlFor="cm-in">{t("ai.inputPrice")}</Label>
+              <Label htmlFor="cm-in">{m.settings_ai_inputPrice()}</Label>
               <Input
                 id="cm-in"
                 type="number"
@@ -198,7 +205,7 @@ export function CreateCustomModelDialog({
               />
             </div>
             <div className="space-y-1.5">
-              <Label htmlFor="cm-out">{t("ai.outputPrice")}</Label>
+              <Label htmlFor="cm-out">{m.settings_ai_outputPrice()}</Label>
               <Input
                 id="cm-out"
                 type="number"
@@ -210,7 +217,7 @@ export function CreateCustomModelDialog({
             </div>
           </div>
           <div className="space-y-1.5">
-            <Label>{t("ai.capabilitiesSection")}</Label>
+            <Label>{m.settings_ai_capabilitiesSection()}</Label>
             <div className="flex flex-wrap gap-1.5">
               {MODEL_CAPABILITY_OPTIONS.map((c) => {
                 const active = form.capabilities.includes(c.value)
@@ -226,39 +233,39 @@ export function CreateCustomModelDialog({
                         : "border-border hover:bg-muted",
                     )}
                   >
-                    {t(`ai.capabilitiesMap.${c.value}`)}
+                    {CAPABILITY_LABELS[c.value]?.() ?? c.value}
                   </button>
                 )
               })}
             </div>
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="cm-icon">{t("ai.iconSlug")}</Label>
+            <Label htmlFor="cm-icon">{m.settings_ai_iconSlug()}</Label>
             <Input
               id="cm-icon"
               value={form.iconSlug}
               onChange={(e) => update("iconSlug", e.target.value)}
-              placeholder={t("ai.iconSlugPlaceholder")}
+              placeholder={m.settings_ai_iconSlugPlaceholder()}
               className="text-xs"
             />
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="cm-tags">{t("ai.tags")}</Label>
+            <Label htmlFor="cm-tags">{m.settings_ai_tags()}</Label>
             <Input
               id="cm-tags"
               value={form.tags}
               onChange={(e) => update("tags", e.target.value)}
-              placeholder={t("ai.tagsPlaceholder")}
+              placeholder={m.settings_ai_tagsPlaceholder()}
             />
           </div>
         </div>
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t("common.cancel")}
+            {m.common_cancel()}
           </Button>
           <Button onClick={() => mutation.mutate()} disabled={!canSubmit}>
-            {mutation.isPending ? t("ai.creating") : t("ai.createModel")}
+            {mutation.isPending ? m.settings_ai_creating() : m.settings_ai_createModel()}
           </Button>
         </DialogFooter>
       </DialogContent>