@allbluecn/web-app 0.9.5 → 0.10.2

package/src/components/agents/agent-form-dialog.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+
+import { m } from '@/paraglide/messages.js'
 import { useForm } from '@tanstack/react-form'
 import { toast } from '@/components/ui/sonner'
 import {
@@ -43,9 +44,7 @@ interface AgentFormDialogProps {
   onSuccess?: () => void
 }
 
-export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentFormDialogProps) {
-  const { t } = useTranslation('agents')
-  const isEdit = !!agent
+export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentFormDialogProps) {const isEdit = !!agent
   const { handleSaveError } = useAgentHandlers()
   const knowledgeBases = useKnowledgeBases()
   const [saving, setSaving] = useState(false)
@@ -84,10 +83,10 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
 
       if (isEdit && agent) {
         await updateAgentFn({ data: { id: agent.id, ...payload } })
-        toast.success(t('agent.updated'))
+        toast.success(m.agents_agent_updated())
       } else {
         await createAgentFn({ data: payload })
-        toast.success(t('agent.created'))
+        toast.success(m.agents_agent_created())
       }
       onOpenChange(false)
       onSuccess?.()
@@ -109,25 +108,25 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="max-h-[90vh] max-w-200 overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>{isEdit ? t('agentForm.title.edit') : t('agentForm.title.create')}</DialogTitle>
+          <DialogTitle>{isEdit ? m.agents_agentForm_title_edit() : m.agents_agentForm_title_create()}</DialogTitle>
           <DialogDescription>
-            {isEdit ? t('agentForm.description.edit') : t('agentForm.description.create')}
+            {isEdit ? m.agents_agentForm_description_edit() : m.agents_agentForm_description_create()}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-5 py-4">
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="flex flex-col gap-2">
-              <Label>{t('agentForm.nameLabel')}</Label>
+              <Label>{m.agents_agentForm_nameLabel()}</Label>
               <form.Field name="name">
                 {(field) => (
                   <div>
                     <Input
                       id={field.name}
                       value={field.value ?? ''}
-                      onChange={(e) => field.handleChange(e.target.value)}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
                       onBlur={field.handleBlur}
-                      placeholder={t('agentForm.namePlaceholder')}
+                      placeholder={m.agents_agentForm_namePlaceholder()}
                       maxLength={64}
                       autoFocus
                     />
@@ -140,15 +139,15 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
             </div>
 
             <div className="flex flex-col gap-2">
-              <Label>{t('agentForm.descriptionLabel')}</Label>
+              <Label>{m.agents_agentForm_descriptionLabel()}</Label>
               <form.Field name="description">
                 {(field) => (
                   <Input
                     id={field.name}
                     value={field.value ?? ''}
-                    onChange={(e) => field.handleChange(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
                     onBlur={field.handleBlur}
-                    placeholder={t('agentForm.descriptionPlaceholder')}
+                    placeholder={m.agents_agentForm_descriptionPlaceholder()}
                     maxLength={512}
                   />
                 )}
@@ -157,16 +156,16 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
           </div>
 
           <div className="flex flex-col gap-2">
-            <Label>{t('agentForm.systemPromptLabel')}</Label>
+            <Label>{m.agents_agentForm_systemPromptLabel()}</Label>
             <form.Field name="systemPrompt">
               {(field) => (
                 <div>
                   <Textarea
                     id={field.name}
                     value={field.value ?? ''}
-                    onChange={(e) => field.handleChange(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => field.handleChange(e.target.value)}
                     onBlur={field.handleBlur}
-                    placeholder={t('agentForm.systemPromptPlaceholder')}
+                    placeholder={m.agents_agentForm_systemPromptPlaceholder()}
                     maxLength={4000}
                     rows={5}
                   />
@@ -179,18 +178,18 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
           </div>
 
           <div className="flex flex-col gap-2">
-            <Label>{t('agentForm.greetingLabel')}</Label>
+            <Label>{m.agents_agentForm_greetingLabel()}</Label>
             <p className="text-xs text-muted-foreground">
-              {t('agentForm.greetingOptional')}
+              {m.agents_agentForm_greetingOptional()}
             </p>
             <form.Field name="greeting">
               {(field) => (
                 <Textarea
                   id={field.name}
                   value={field.value ?? ''}
-                  onChange={(e) => field.handleChange(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => field.handleChange(e.target.value)}
                   onBlur={field.handleBlur}
-                  placeholder={t('agentForm.greetingPlaceholder')}
+                  placeholder={m.agents_agentForm_greetingPlaceholder()}
                   maxLength={1000}
                   rows={2}
                 />
@@ -200,18 +199,18 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
 
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="flex flex-col gap-2">
-              <Label>{t('agentForm.modelLabel')}</Label>
+              <Label>{m.agents_agentForm_modelLabel()}</Label>
               <p className="text-xs text-muted-foreground">
-                {t('agentForm.modelOptional')}
+                {m.agents_agentForm_modelOptional()}
               </p>
               <form.Field name="model">
                 {(field) => (
                   <Input
                     id={field.name}
                     value={field.value ?? ''}
-                    onChange={(e) => field.handleChange(e.target.value)}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
                     onBlur={field.handleBlur}
-                    placeholder={t('agentForm.modelPlaceholder')}
+                    placeholder={m.agents_agentForm_modelPlaceholder()}
                     maxLength={128}
                   />
                 )}
@@ -220,7 +219,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
 
             <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between">
-                <Label>{t('agentForm.temperatureLabel')}</Label>
+                <Label>{m.agents_agentForm_temperatureLabel()}</Label>
                 <form.Field name="temperature">
                   {(field) => (
                     <span className="text-xs font-medium text-muted-foreground">
@@ -230,7 +229,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                 </form.Field>
               </div>
               <p className="text-xs text-muted-foreground">
-                {t('agentForm.temperatureHint')}
+                {m.agents_agentForm_temperatureHint()}
               </p>
               <form.Field name="temperature">
                 {(field) => (
@@ -241,7 +240,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                     max="2"
                     step="0.1"
                     value={field.value ?? 0.7}
-                    onChange={(e) => field.handleChange(parseFloat(e.target.value))}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(parseFloat(e.target.value))}
                     className="w-full cursor-pointer accent-primary"
                   />
                 )}
@@ -250,9 +249,9 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
           </div>
 
           <div className="flex flex-col gap-2">
-            <Label>{t('agentForm.suggestedPromptsLabel')}</Label>
+            <Label>{m.agents_agentForm_suggestedPromptsLabel()}</Label>
             <p className="text-xs text-muted-foreground">
-              {t('agentForm.suggestedPromptsHint')}
+              {m.agents_agentForm_suggestedPromptsHint()}
             </p>
             <div className="space-y-2">
               <form.Field name="suggestedPrompts">
@@ -264,12 +263,12 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                         <div key={idx} className="flex gap-2">
                           <Input
                             value={(prompts[idx] as string) ?? ''}
-                            onChange={(e) => {
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                               const next = [...prompts]
                               next[idx] = e.target.value
                               field.handleChange(next)
                             }}
-                            placeholder={t('agentForm.suggestedPromptPlaceholder')}
+                            placeholder={m.agents_agentForm_suggestedPromptPlaceholder()}
                             maxLength={200}
                           />
                           <Button
@@ -296,7 +295,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                         }}
                       >
                         <Plus className="size-3" />
-                        {t('agentForm.addSuggestedPrompt')}
+                        {m.agents_agentForm_addSuggestedPrompt()}
                       </Button>
                     </>
                   )
@@ -306,9 +305,9 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
           </div>
 
           <div className="flex flex-col gap-2">
-            <Label>{t('agentForm.allowedToolsLabel')}</Label>
+            <Label>{m.agents_agentForm_allowedToolsLabel()}</Label>
             <p className="text-xs text-muted-foreground">
-              {t('agentForm.allowedToolsHint')}
+              {m.agents_agentForm_allowedToolsHint()}
             </p>
             <form.Field name="allowedTools">
               {(field) => {
@@ -323,7 +322,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                         <Checkbox
                           id={`tool-${key}`}
                           checked={(tools as string[]).includes(key)}
-                          onCheckedChange={(checked) => {
+                          onCheckedChange={(checked: boolean) => {
                             const next = checked
                               ? [...(tools as string[]), key]
                               : (tools as string[]).filter((k: string) => k !== key)
@@ -334,7 +333,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                           htmlFor={`tool-${key}`}
                           className="text-sm leading-none cursor-pointer"
                         >
-                          {t(`tools.${key}`)}
+                          {(m as any)[`tools_${key}`] ?? key}
                         </label>
                       </div>
                     ))}
@@ -345,9 +344,9 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
           </div>
 
           <div className="flex flex-col gap-2">
-            <Label>{t('agentForm.knowledgeBasesLabel')}</Label>
+            <Label>{m.agents_agentForm_knowledgeBasesLabel()}</Label>
             <p className="text-xs text-muted-foreground">
-              {t('agentForm.knowledgeBasesHint')}
+              {m.agents_agentForm_knowledgeBasesHint()}
             </p>
             <form.Field name="knowledgeBaseIds">
               {(field) => {
@@ -356,7 +355,7 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
                   <div className="flex flex-wrap gap-2">
                     {knowledgeBases.length === 0 ? (
                       <span className="text-xs text-muted-foreground">
-                        {t('card.noKnowledgeBases')}
+                        {m.agents_card_noKnowledgeBases()}
                       </span>
                     ) : (
                       knowledgeBases.map((kb: KnowledgeBaseItem) => {
@@ -389,13 +388,13 @@ export function AgentFormDialog({ open, onOpenChange, agent, onSuccess }: AgentF
 
         <DialogFooter>
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
-            {t('agentForm.cancel')}
+            {m.agents_agentForm_cancel()}
           </Button>
           <Button
             onClick={handleSubmit}
             disabled={saving}
           >
-            {saving ? (isEdit ? t('agentForm.saving') : t('agentForm.creating')) : (isEdit ? t('agentForm.save') : t('agentForm.create'))}
+            {saving ? (isEdit ? m.agents_agentForm_saving() : m.agents_agentForm_creating()) : (isEdit ? m.agents_agentForm_save() : m.agents_agentForm_create())}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/agents/agent-selector.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useQuery } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
 import {
   Select,
   SelectContent,
@@ -11,6 +10,7 @@ import {
 } from '@/components/ui/select'
 import { listAgentsFn } from '@/server/serverFns/agents/agent-crud'
 import type { AgentData } from './agents-page'
+import { m } from "@/paraglide/messages.js";
 
 export interface AgentSelectorProps {
   value?: string
@@ -24,9 +24,7 @@ export function AgentSelector({
   onValueChange,
   agents: externalAgents,
   className,
-}: AgentSelectorProps) {
-  const { t } = useTranslation('chat')
-  const { data: agents } = useQuery({
+}: AgentSelectorProps) {const { data: agents } = useQuery({
     queryKey: ['agents'],
     queryFn: () => listAgentsFn(),
     staleTime: 30_000,
@@ -37,20 +35,20 @@ export function AgentSelector({
   return (
     <Select
       value={selectValue}
-      onValueChange={(v) => onValueChange(v === '__default__' ? undefined : v)}
+      onValueChange={(v: string) => onValueChange(v === '__default__' ? undefined : v)}
     >
       <SelectTrigger className="h-8 w-[180px] gap-1.5 text-xs">
         <span className="text-base">🤖</span>
-        <SelectValue placeholder={t('agentSelector.placeholder')} />
+        <SelectValue placeholder={m.chat_agentSelector_placeholder()} />
       </SelectTrigger>
       <SelectContent>
         <SelectItem value="__default__">
           <span className="flex items-center gap-1">
             <span>🤖</span>
-            {t('agentSelector.default')}
+            {m.chat_agentSelector_default()}
           </span>
         </SelectItem>
-        {agentList.map((agent) => (
+        {agentList.map((agent: AgentData) => (
           <SelectItem key={agent.id} value={agent.id}>
             <span className="flex items-center gap-1">
               <span>{agent.avatarEmoji || '🤖'}</span>

package/src/components/agents/agents-page.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   Bot,
@@ -23,6 +22,7 @@ import { AgentFormDialog } from './agent-form-dialog'
 import { SkillFormDialog } from './skill-form-dialog'
 import { SkillCard } from './skill-card'
 import { useAgentHandlers } from './use-agent-handlers'
+import { m } from "@/paraglide/messages.js";
 
 export interface AgentData {
   id: string
@@ -49,9 +49,7 @@ export interface SkillData {
   updatedAt: Date | string
 }
 
-export function AgentsPage() {
-  const { t } = useTranslation('agents')
-  const queryClient = useQueryClient()
+export function AgentsPage() {const queryClient = useQueryClient()
   const { handleSaveError } = useAgentHandlers()
   const [activeTab, setActiveTab] = useState<'agents' | 'skills'>('agents')
   const [createAgentOpen, setCreateAgentOpen] = useState(false)
@@ -116,8 +114,8 @@ export function AgentsPage() {
     <div className="flex h-full flex-col p-4">
       <div className="flex shrink-0 items-center justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-semibold">{t('page.title')}</h1>
-          <p className="text-sm text-muted-foreground">{t('page.description')}</p>
+          <h1 className="text-2xl font-semibold">{m.agents_page_title()}</h1>
+          <p className="text-sm text-muted-foreground">{m.agents_page_description()}</p>
         </div>
         <div className="flex gap-2">
           <FeatureGate feature="customAgents">
@@ -127,14 +125,14 @@ export function AgentsPage() {
               onClick={() => setCreateSkillOpen(true)}
             >
               <ScrollText className="mr-1 size-4" />
-              {t('skill.create')}
+              {m.agents_skill_create()}
             </Button>
             <Button
               size="sm"
               onClick={() => setCreateAgentOpen(true)}
             >
               <Plus className="mr-1 size-4" />
-              {t('agent.create')}
+              {m.agents_agent_create()}
             </Button>
           </FeatureGate>
         </div>
@@ -142,17 +140,17 @@ export function AgentsPage() {
 
       <Tabs
         value={activeTab}
-        onValueChange={(v) => setActiveTab(v as 'agents' | 'skills')}
+        onValueChange={(v: string) => setActiveTab(v as 'agents' | 'skills')}
         className="mt-4 flex flex-1 flex-col min-h-0"
       >
         <TabsList className="grid w-fit grid-cols-2">
           <TabsTrigger value="agents">
             <Bot className="mr-2 size-4" />
-            {t('page.tabs.agents')}
+            {m.agents_page_tabs_agents()}
           </TabsTrigger>
           <TabsTrigger value="skills">
             <ScrollText className="mr-2 size-4" />
-            {t('page.tabs.skills')}
+            {m.agents_page_tabs_skills()}
           </TabsTrigger>
         </TabsList>
 
@@ -160,20 +158,20 @@ export function AgentsPage() {
           {agentsEmpty ? (
             <div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center">
               <Bot className="size-10 text-muted-foreground" />
-              <p className="text-lg font-medium">{t('agent.empty.title')}</p>
+              <p className="text-lg font-medium">{m.agents_agent_empty_title()}</p>
               <p className="max-w-sm text-sm text-muted-foreground">
-                {t('agent.empty.description')}
+                {m.agents_agent_empty_description()}
               </p>
               <FeatureGate feature="customAgents">
                 <Button size="sm" onClick={() => setCreateAgentOpen(true)}>
                   <Plus className="mr-1 size-4" />
-                  {t('agent.empty.createFirst')}
+                  {m.agents_agent_empty_createFirst()}
                 </Button>
               </FeatureGate>
             </div>
           ) : (
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {agentsQuery.data?.map((agent) => (
+              {agentsQuery.data?.map((agent: AgentData) => (
                 <AgentCard
                   key={agent.id}
                   agent={agent}
@@ -189,20 +187,20 @@ export function AgentsPage() {
           {skillsEmpty ? (
             <div className="flex h-full flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center">
               <ScrollText className="size-10 text-muted-foreground" />
-              <p className="text-lg font-medium">{t('skill.empty.title')}</p>
+              <p className="text-lg font-medium">{m.agents_skill_empty_title()}</p>
               <p className="max-w-sm text-sm text-muted-foreground">
-                {t('skill.empty.description')}
+                {m.agents_skill_empty_description()}
               </p>
               <FeatureGate feature="customAgents">
                 <Button size="sm" onClick={() => setCreateSkillOpen(true)}>
                   <Plus className="mr-1 size-4" />
-                  {t('skill.empty.createFirst')}
+                  {m.agents_skill_empty_createFirst()}
                 </Button>
               </FeatureGate>
             </div>
           ) : (
             <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {skillsQuery.data?.map((skill) => (
+              {skillsQuery.data?.map((skill: SkillData) => (
                 <SkillCard
                   key={skill.id}
                   skill={skill}
@@ -217,7 +215,7 @@ export function AgentsPage() {
 
       <AgentFormDialog
         open={createAgentOpen || !!editingAgent}
-        onOpenChange={(open) => {
+        onOpenChange={(open: boolean) => {
           if (!open) {
             setCreateAgentOpen(false)
             setEditingAgent(null)
@@ -237,12 +235,12 @@ export function AgentsPage() {
       {agentToDelete && (
         <NameConfirmDialog
           open={!!agentToDelete}
-          onOpenChange={(open) => {
+          onOpenChange={(open: boolean) => {
             if (!open) setAgentToDelete(null)
           }}
-          title={t('agent.deleteConfirmTitle')}
-          description={t('agent.deleteConfirmDesc', { name: agentToDelete.name })}
-          confirmText={t('agent.deleteConfirmText')}
+          title={m.agents_agent_deleteConfirmTitle()}
+          description={m.agents_agent_deleteConfirmDesc({ name: agentToDelete.name })}
+          confirmText={m.agents_agent_deleteConfirmText()}
           expectedName={agentToDelete.name}
           onConfirm={handleDeleteAgent}
         />
@@ -251,12 +249,12 @@ export function AgentsPage() {
       {skillToDelete && (
         <NameConfirmDialog
           open={!!skillToDelete}
-          onOpenChange={(open) => {
+          onOpenChange={(open: boolean) => {
             if (!open) setSkillToDelete(null)
           }}
-          title={t('skill.deleteConfirmTitle')}
-          description={t('skill.deleteConfirmDesc', { name: skillToDelete.title })}
-          confirmText={t('skill.deleteConfirmText')}
+          title={m.agents_skill_deleteConfirmTitle()}
+          description={m.agents_skill_deleteConfirmDesc({ name: skillToDelete.title })}
+          confirmText={m.agents_skill_deleteConfirmText()}
           expectedName={skillToDelete.title}
           onConfirm={handleDeleteSkill}
         />

package/src/components/agents/skill-card.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import {
   Pencil,
   Trash2,
@@ -14,9 +13,7 @@ interface SkillCardProps {
   onRefresh: () => void
 }
 
-export function SkillCard({ skill, onDelete, onRefresh }: SkillCardProps) {
-  const { t } = useTranslation('agents')
-  const [editOpen, setEditOpen] = useState(false)
+export function SkillCard({ skill, onDelete, onRefresh }: SkillCardProps) {const [editOpen, setEditOpen] = useState(false)
 
   return (
     <div className="group flex flex-col gap-2 rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md">

package/src/components/agents/skill-form-dialog.tsx

@@ -1,4 +1,3 @@
-import { useTranslation } from 'react-i18next'
 import { useForm } from '@tanstack/react-form'
 import { toast } from '@/components/ui/sonner'
 import {
@@ -16,6 +15,7 @@ import { createSkillFn, updateSkillFn } from '@/server/serverFns/agents/skill-cr
 import { skillFormSchema, type SkillFormValues } from './schemas/agent-form'
 import { useAgentHandlers } from './use-agent-handlers'
 import type { SkillData } from './agents-page'
+import { m } from "@/paraglide/messages.js";
 
 interface SkillFormDialogProps {
   open: boolean
@@ -24,9 +24,7 @@ interface SkillFormDialogProps {
   onSuccess?: () => void
 }
 
-export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillFormDialogProps) {
-  const { t } = useTranslation('agents')
-  const isEdit = !!skill
+export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillFormDialogProps) {const isEdit = !!skill
   const { handleSaveError } = useAgentHandlers()
 
   const form = useForm({
@@ -44,16 +42,16 @@ export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillF
 
       if (isEdit && skill) {
         await updateSkillFn({ data: { id: skill.id, ...values } })
-        toast.success(t('skill.updated'))
+        toast.success(m.agents_skill_updated())
       } else {
         await createSkillFn({ data: values })
-        toast.success(t('skill.created'))
+        toast.success(m.agents_skill_created())
       }
       onOpenChange(false)
       onSuccess?.()
     } catch (err) {
       if (err instanceof Error && err.message.includes('已存在')) {
-        toast.error(t('skill.nameConflict'))
+        toast.error(m.agents_skill_nameConflict())
         return
       }
       handleSaveError(err, 'skill.saveFailed')
@@ -64,9 +62,9 @@ export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillF
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle>{isEdit ? t('skillForm.title.edit') : t('skillForm.title.create')}</DialogTitle>
+          <DialogTitle>{isEdit ? m.agents_skillForm_title_edit() : m.agents_skillForm_title_create()}</DialogTitle>
           <DialogDescription>
-            {isEdit ? t('skillForm.description.edit') : t('skillForm.description.create')}
+            {isEdit ? m.agents_skillForm_description_edit() : m.agents_skillForm_description_create()}
           </DialogDescription>
         </DialogHeader>
 
@@ -75,19 +73,19 @@ export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillF
             {(field) => (
               <div className="space-y-2">
                 <label className="text-sm font-medium" htmlFor={field.name}>
-                  {t('skillForm.nameLabel')}
+                  {m.agents_skillForm_nameLabel()}
                 </label>
                 <Input
                   id={field.name}
                   value={field.value ?? ''}
-                  onChange={(e) => field.handleChange(e.target.value.toLowerCase())}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value.toLowerCase())}
                   onBlur={field.handleBlur}
-                  placeholder={t('skillForm.namePlaceholder')}
+                  placeholder={m.agents_skillForm_namePlaceholder()}
                   maxLength={64}
                   autoFocus
                 />
                 <p className="text-xs text-muted-foreground">
-                  {t('skillForm.nameInvalid')}
+                  {m.agents_skillForm_nameInvalid()}
                 </p>
               </div>
             )}
@@ -97,14 +95,14 @@ export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillF
             {(field) => (
               <div className="space-y-2">
                 <label className="text-sm font-medium" htmlFor={field.name}>
-                  {t('skillForm.titleLabel')}
+                  {m.agents_skillForm_titleLabel()}
                 </label>
                 <Input
                   id={field.name}
                   value={field.value ?? ''}
-                  onChange={(e) => field.handleChange(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => field.handleChange(e.target.value)}
                   onBlur={field.handleBlur}
-                  placeholder={t('skillForm.titlePlaceholder')}
+                  placeholder={m.agents_skillForm_titlePlaceholder()}
                   maxLength={64}
                 />
               </div>
@@ -115,14 +113,14 @@ export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillF
             {(field) => (
               <div className="space-y-2">
                 <label className="text-sm font-medium" htmlFor={field.name}>
-                  {t('skillForm.templateLabel')}
+                  {m.agents_skillForm_templateLabel()}
                 </label>
                 <Textarea
                   id={field.name}
                   value={field.value ?? ''}
-                  onChange={(e) => field.handleChange(e.target.value)}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => field.handleChange(e.target.value)}
                   onBlur={field.handleBlur}
-                  placeholder={t('skillForm.templatePlaceholder')}
+                  placeholder={m.agents_skillForm_templatePlaceholder()}
                   maxLength={4000}
                   rows={6}
                 />
@@ -136,10 +134,10 @@ export function SkillFormDialog({ open, onOpenChange, skill, onSuccess }: SkillF
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t('skillForm.cancel')}
+            {m.agents_skillForm_cancel()}
           </Button>
           <Button onClick={handleSubmit}>
-            {isEdit ? t('skillForm.save') : t('skillForm.create')}
+            {isEdit ? m.agents_skillForm_save() : m.agents_skillForm_create()}
           </Button>
         </DialogFooter>
       </DialogContent>