@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/agents/slash-skill-menu.tsx

@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { ScrollText, Wand2 } from 'lucide-react'
 import { listSkillsFn } from '@/server/serverFns/agents/skill-crud'
+import { m } from "@/paraglide/messages.js";
 
 export interface SlashSkillMenuProps {
   open: boolean
@@ -23,9 +23,7 @@ export function SlashSkillMenu({
   onOpenChange,
   trigger,
   applyTemplate,
-}: SlashSkillMenuProps) {
-  const { t } = useTranslation('chat')
-  const { data: skills, isLoading } = useQuery({
+}: SlashSkillMenuProps) {const { data: skills, isLoading } = useQuery({
     queryKey: ['skills'],
     queryFn: () => listSkillsFn(),
     enabled: open,
@@ -38,11 +36,11 @@ export function SlashSkillMenu({
       <PopoverContent className="w-[240px] p-0" align="start" side="top">
         {isLoading ? (
           <div className="p-3 text-center text-xs text-muted-foreground">
-            {t('slashCommands.loading')}
+            {m.chat_slashCommands_loading()}
           </div>
         ) : skills && skills.length > 0 ? (
           <div className="flex flex-col max-h-60 overflow-y-auto">
-            {skills.map((skill) => (
+            {skills.map((skill: SlashSkillItem) => (
               <button
                 key={skill.id}
                 type="button"
@@ -61,7 +59,7 @@ export function SlashSkillMenu({
           <div className="flex flex-col items-center gap-1 p-4 text-center">
             <Wand2 className="size-4 text-muted-foreground" />
             <p className="text-xs text-muted-foreground">
-              {t('slashCommands.noSkills')}
+              {m.chat_slashCommands_noSkills()}
             </p>
           </div>
         )}

package/src/components/agents/use-agent-handlers.ts

@@ -1,22 +1,19 @@
 import { toast } from '@/components/ui/sonner'
-import { useTranslation } from 'react-i18next'
 import { ResourceLimitError } from '@/lib/resource-errors'
+import { m } from "@/paraglide/messages.js";
 
-export function useAgentHandlers() {
-  const { t } = useTranslation('agents')
-
-  const handleSaveError = (err: unknown, fallbackKey: string) => {
+export function useAgentHandlers() {const handleSaveError = (err: unknown, fallbackKey: string) => {
     if (err instanceof ResourceLimitError) {
       if (err.resource === 'agentQuota') {
-        toast.warning(t('agent.agentQuotaExceeded'))
+        toast.warning(m.agents_agent_agentQuotaExceeded())
         return
       }
       if (err.resource === 'skillQuota') {
-        toast.warning(t('skill.skillQuotaExceeded'))
+        toast.warning(m.agents_skill_skillQuotaExceeded())
         return
       }
     }
-    const msg = err instanceof Error ? err.message : t(fallbackKey)
+    const msg = err instanceof Error ? err.message : (m as any)[fallbackKey] ?? fallbackKey
     toast.error(msg)
   }
 

package/src/components/ai/ai-chat-prompt.tsx

@@ -18,7 +18,6 @@
 "use client";
 
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react";
-import { useTranslation } from "react-i18next";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -39,16 +38,16 @@ import { useSelectedModel } from "@/components/ai/use-selected-model";
 import { useKnowledgeBases } from "@/components/ai/use-knowledge-bases";
 import { WordRotate } from "@/components/magicui/word-rotate";
 import { stashPendingWorkspaceMessage } from "@/lib/chat-handoff";
+import { m } from "@/paraglide/messages.js";
 
 export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
-  const { t } = useTranslation('chat')
   const knowledgeBases = useKnowledgeBases();
   const [selectedModel, setSelectedModel] = useSelectedModel();
   const navigate = useNavigate();
 
   const { messages, sendMessage, isLoading, error } = useChat({
     connection: fetchServerSentEvents("/api/chat"),
-    body: { systemPrompts: [t('systemPrompt')], model: selectedModel },
+    body: { systemPrompts: [m.chat_systemPrompt()], model: selectedModel },
   });
 
   const configured = !!hasAiKey;
@@ -59,44 +58,23 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
 
         <h1 className="text-balance text-pretty text-center font-heading font-semibold text-[30px] text-foreground tracking-tighter sm:text-[32px] md:text-[46px] mt-10">
           <span className="inline-flex items-baseline gap-1.5">
-            {t('aiPrompt.describe')}
+            {m.chat_aiPrompt_describe()}
             <WordRotate
-              words={[t('aiPrompt.generate'), t('aiPrompt.build'), t('aiPrompt.launch')]}
+              words={[m.chat_aiPrompt_generate(), m.chat_aiPrompt_build(), m.chat_aiPrompt_launch()]}
               duration={4000}
               className="text-foreground"
             />
           </span>
         </h1>
         <h2 className="text-balance pb-4 text-center text-xl text-muted-foreground">
-          {t('aiPrompt.subtitle')}
+          {m.chat_aiPrompt_subtitle()}
         </h2>
 
-
-      {!configured && (
-        <div className="flex items-center gap-3 rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950">
-          <AlertCircle className="size-5 shrink-0 text-amber-600 dark:text-amber-400" />
-          <div className="flex-1 text-sm">
-            <p className="font-medium text-amber-800 dark:text-amber-200">
-              {t('aiPrompt.notConfigured')}
-            </p>
-            <p className="text-amber-700 dark:text-amber-300">
-              {t('aiPrompt.configHint')}
-            </p>
-          </div>
-          <Button asChild size="sm" variant="outline" className="shrink-0 gap-1.5">
-            <RouterLink to="/settings/ai">
-              <Settings className="size-3.5" />
-              {t('aiPrompt.goToConfig')}
-            </RouterLink>
-          </Button>
-        </div>
-      )}
-
       {error && (
         <div className="flex items-center gap-3 rounded-xl border border-destructive bg-destructive/10 p-4">
           <AlertCircle className="size-5 shrink-0 text-destructive" />
           <p className="flex-1 text-sm text-destructive">
-            {error.message || t('aiPrompt.requestFailed')}
+            {error.message || m.chat_aiPrompt_requestFailed()}
           </p>
         </div>
       )}
@@ -123,7 +101,7 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
             {isLoading && (
               <div className="flex items-center gap-2 text-muted-foreground mr-8">
                 <Loader2 className="size-4 animate-spin" />
-                <span className="text-sm">{t('aiPrompt.thinking')}</span>
+                <span className="text-sm">{m.chat_aiPrompt_thinking()}</span>
               </div>
             )}
           </div>
@@ -133,13 +111,28 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
       {!showHistory && isLoading && (
         <div className="flex items-center justify-center gap-2 text-muted-foreground py-2">
           <Loader2 className="size-4 animate-spin" />
-          <span className="text-sm">{t('aiPrompt.thinking')}</span>
+          <span className="text-sm">{m.chat_aiPrompt_thinking()}</span>
         </div>
       )}
 
       <div className="mt-30" >
       <AIPromptInput
         externalContextBar
+        headerMiddleSlot={
+          !configured ? (
+            <div className="flex min-w-0 items-center gap-1.5 rounded-lg border border-amber-200 bg-amber-50 px-2.5 py-1 text-xs text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
+              <AlertCircle className="size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+              <span className="truncate">{m.chat_aiPrompt_notConfigured()}</span>
+              <RouterLink
+                to="/settings/ai"
+                className="inline-flex shrink-0 items-center gap-0.5 font-medium text-amber-700 underline-offset-4 hover:underline dark:text-amber-300"
+              >
+                <Settings className="size-3" />
+                {m.chat_aiPrompt_goToConfig()}
+              </RouterLink>
+            </div>
+          ) : null
+        }
         headerRightSlot={
           <Tooltip>
             <TooltipTrigger asChild>
@@ -149,10 +142,10 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
                 </RouterLink>
               </Button>
             </TooltipTrigger>
-            <TooltipContent>{t('aiPrompt.enterFullChat')}</TooltipContent>
+            <TooltipContent>{m.chat_aiPrompt_enterFullChat()}</TooltipContent>
           </Tooltip>
         }
-        onSubmit={(input, hasContext) => {
+        onSubmit={(input: string, hasContext: boolean) => {
           if (!configured) return;
           if (!hasContext) {
             const stashed = stashPendingWorkspaceMessage(input);
@@ -164,7 +157,7 @@ export function AiChatPrompt({ hasAiKey }: { hasAiKey?: boolean | null }) {
           if (isLoading) return;
           void sendMessage(input);
         }}
-        placeholder={configured ? t('aiPrompt.placeholder') : t('aiPrompt.placeholderNotConfigured')}
+        placeholder={configured ? m.chat_aiPrompt_placeholder() : m.chat_aiPrompt_placeholderNotConfigured()}
         disabled={!configured}
         isLoading={isLoading}
         knowledgeBases={knowledgeBases}

package/src/components/ai/global-chat-panel.tsx

@@ -19,7 +19,6 @@
 
 import { useChat, fetchServerSentEvents } from "@tanstack/ai-react"
 import { useState } from "react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card } from "@/components/ui/card"
@@ -27,9 +26,9 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Bot, Send, X, Loader2, AlertCircle } from "lucide-react"
 import { Link as RouterLink } from "@tanstack/react-router"
 import { useSelectedModel } from "@/components/ai/use-selected-model"
+import { m } from "@/paraglide/messages.js";
 
 export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
-  const { t } = useTranslation('chat')
   const [isOpen, setIsOpen] = useState(false)
   const [input, setInput] = useState("")
   const [selectedModel] = useSelectedModel()
@@ -37,7 +36,7 @@ export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
 
   const { messages, sendMessage, isLoading, error } = useChat({
     connection: fetchServerSentEvents("/api/chat"),
-    body: { systemPrompts: [t('systemPrompt')], model: selectedModel },
+    body: { systemPrompts: [m.chat_systemPrompt()], model: selectedModel },
   })
 
   const handleSend = () => {
@@ -64,7 +63,7 @@ export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
       <div className="p-4 border-b flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Bot className="w-5 h-5" />
-          <span className="font-semibold">{t('globalChat.title')}</span>
+          <span className="font-semibold">{m.chat_globalChat_title()}</span>
         </div>
         <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
           <X className="w-4 h-4" />
@@ -75,10 +74,10 @@ export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
         <div className="mx-4 mt-3 flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
           <AlertCircle className="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
           <p className="flex-1 text-xs text-amber-700 dark:text-amber-300">
-            {t('globalChat.configHint')}
+            {m.chat_globalChat_configHint()}
           </p>
           <Button asChild size="sm" variant="outline" className="shrink-0 h-7 text-xs">
-            <RouterLink to="/settings/ai">{t('goToSettings')}</RouterLink>
+            <RouterLink to="/settings/ai">{m.chat_goToSettings()}</RouterLink>
           </Button>
         </div>
       )}
@@ -87,7 +86,7 @@ export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
         <div className="mx-4 mt-3 flex items-center gap-2 rounded-lg border border-destructive bg-destructive/10 p-3">
           <AlertCircle className="size-4 shrink-0 text-destructive" />
           <p className="flex-1 text-xs text-destructive">
-            {error.message || t('globalChat.requestFailed')}
+            {error.message || m.chat_globalChat_requestFailed()}
           </p>
         </div>
       )}
@@ -115,7 +114,7 @@ export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
         {isLoading && (
           <div className="flex items-center gap-2 text-muted-foreground">
             <Loader2 className="w-4 h-4 animate-spin" />
-            <span className="text-sm">{t('globalChat.thinking')}</span>
+            <span className="text-sm">{m.chat_globalChat_thinking()}</span>
           </div>
         )}
       </ScrollArea>
@@ -123,9 +122,9 @@ export function GlobalChatPanel({ hasAiKey }: { hasAiKey?: boolean | null }) {
         <div className="flex gap-2">
           <Input
             value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => e.key === "Enter" && handleSend()}
-            placeholder={configured ? t('globalChat.placeholder') : t('globalChat.placeholderNotConfigured')}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
+            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleSend()}
+            placeholder={configured ? m.chat_globalChat_placeholder() : m.chat_globalChat_placeholderNotConfigured()}
             disabled={!configured}
           />
           <Button onClick={handleSend} size="icon" disabled={!input.trim() || isLoading || !configured}>

package/src/components/ai/use-knowledge-bases.ts

@@ -29,9 +29,9 @@ export function useKnowledgeBases(): KnowledgeBaseItem[] {
 
   useEffect(() => {
     listKnowledgeFn()
-      .then((list) =>
+      .then((list: { id: string; name: string; icon: string }[]) =>
         setKnowledgeBases(
-          list.map((kb) => ({ id: kb.id, name: kb.name, icon: kb.icon })),
+          list.map((kb: { id: string; name: string; icon: string }) => ({ id: kb.id, name: kb.name, icon: kb.icon })),
         ),
       )
       .catch(() => {})

package/src/components/anyhub/anyhub-app-card.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,10 +16,8 @@
 // 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 { useState } from "react"
 import { useRouter } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
 import {
   Card,
   CardContent,
@@ -43,7 +42,6 @@ interface AnyHubAppCardProps {
 
 export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
   const router = useRouter()
-  const { t } = useTranslation("apps")
   const togglePin = anyHubActions.togglePin
   const uninstallApp = anyHubActions.uninstallApp
   const [showPermissions, setShowPermissions] = useState(false)
@@ -89,50 +87,50 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
             </div>
           </div>
           <DropdownMenu>
-            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+              <DropdownMenuTrigger asChild onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}>
               <Button variant="ghost" size="icon" className="size-8 opacity-0 group-hover:opacity-100">
                 <MoreVertical className="size-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem
-                onClick={(e) => {
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                   e.stopPropagation()
                   togglePin(app.id)
                 }}
               >
                 {app.pinned ? <PinOff className="mr-2 size-4" /> : <Pin className="mr-2 size-4" />}
-                {app.pinned ? t("anyhub.unpin") : t("anyhub.pin-to-sidebar")}
+                {app.pinned ? m.anyhub_unpin() : m['anyhub_pin-to-sidebar']()}
               </DropdownMenuItem>
               <DropdownMenuItem
-                onClick={(e) => {
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                   e.stopPropagation()
                   setShowPermissions(true)
                 }}
               >
                 <Settings className="mr-2 size-4" />
-                {t("anyhub.permissions")}
+                {m.anyhub_permissions()}
               </DropdownMenuItem>
               <DropdownMenuItem
-                onClick={async (e) => {
+                onClick={async (e: React.MouseEvent<HTMLDivElement>) => {
                   e.stopPropagation()
                   await router.navigate({ to: `/apps/anyhub/${app.id}` })
                 }}
               >
                 <RefreshCw className="mr-2 size-4" />
-                {t("anyhub.update")}
+                {m.anyhub_update()}
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-destructive"
-                onClick={(e) => {
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                   e.stopPropagation()
-                  uninstallApp(app.id).then((ok) => {
-                    if (ok) toast.success(t("anyhub.uninstalled"))
+                  uninstallApp(app.id).then((ok: boolean) => {
+                    if (ok) toast.success(m.anyhub_uninstalled())
                   })
                 }}
               >
                 <Trash2 className="mr-2 size-4" />
-                {t("anyhub.uninstall")}
+                {m.anyhub_uninstall()}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -140,7 +138,7 @@ export function AnyHubAppCard({ app }: AnyHubAppCardProps) {
       </Card>
       {showPermissions && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowPermissions(false)}>
-          <div className="w-96 rounded-lg border bg-background shadow-lg" onClick={(e) => e.stopPropagation()}>
+          <div className="w-96 rounded-lg border bg-background shadow-lg" onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
             <AnyHubPermissionPanel
               appId={app.id}
               appName={app.displayName}

package/src/components/anyhub/anyhub-app-runner.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,9 +16,7 @@
 // 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 { useEffect, useRef } from "react"
-import { useTranslation } from "react-i18next"
 import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
 import { initializeMessageBridge } from "@/lib/anyhub/anyhub-message-bridge"
 import { AnyHubTopNav } from "./anyhub-top-nav"
@@ -28,11 +27,10 @@ interface AnyHubAppRunnerProps {
 }
 
 export function AnyHubAppRunner({ appId }: AnyHubAppRunnerProps) {
-  const { t } = useTranslation("apps")
   const iframeRef = useRef<HTMLIFrameElement>(null)
-  const activeApp = useAnyHubStore((s) => s.activeApp)
+  const activeApp = useAnyHubStore((s: any) => s.activeApp)
   const setActiveApp = anyHubActions.setActiveApp
-  const topNavCollapsed = useAnyHubStore((s) => s.topNavCollapsed)
+  const topNavCollapsed = useAnyHubStore((s: any) => s.topNavCollapsed)
 
   useEffect(() => {
     if (!activeApp || activeApp.id !== appId) {
@@ -55,7 +53,7 @@ export function AnyHubAppRunner({ appId }: AnyHubAppRunnerProps) {
   if (!activeApp) {
     return (
       <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-muted-foreground">{t("anyhub.loading")}</p>
+        <p className="text-sm text-muted-foreground">{m.anyhub_loading()}</p>
       </div>
     )
   }
@@ -83,7 +81,7 @@ export function AnyHubAppRunner({ appId }: AnyHubAppRunnerProps) {
           />
         ) : (
           <div className="flex h-full items-center justify-center">
-            <p className="text-sm text-muted-foreground">{t("anyhub.no-entry")}</p>
+            <p className="text-sm text-muted-foreground">{m['anyhub_no-entry']()}</p>
           </div>
         )}
       </div>

package/src/components/anyhub/anyhub-install-dialog.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,9 +16,7 @@
 // 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 { useState } from "react"
-import { useTranslation } from "react-i18next"
 import {
   Dialog,
   DialogContent,
@@ -43,7 +42,6 @@ export function AnyHubInstallDialog({
   const [githubUrl, setGithubUrl] = useState("")
   const [localPath, setLocalPath] = useState("")
   const [installing, setInstalling] = useState(false)
-  const { t } = useTranslation("apps")
   const installApp = anyHubActions.installApp
 
   const handleGitHubInstall = async () => {
@@ -52,11 +50,11 @@ export function AnyHubInstallDialog({
     const result = await installApp("github", { githubUrl: githubUrl.trim() })
     setInstalling(false)
     if (result) {
-      toast.success(t("anyhub.install-success", { name: result.displayName }))
+      toast.success(m['anyhub_install-success']({ name: result.displayName }))
       setGithubUrl("")
       onOpenChange(false)
     } else {
-      toast.error(t("anyhub.install-failed"))
+      toast.error(m['anyhub_install-failed']())
     }
   }
 
@@ -66,11 +64,11 @@ export function AnyHubInstallDialog({
     const result = await installApp("local", { localPath: localPath.trim() })
     setInstalling(false)
     if (result) {
-      toast.success(t("anyhub.install-success", { name: result.displayName }))
+      toast.success(m['anyhub_install-success']({ name: result.displayName }))
       setLocalPath("")
       onOpenChange(false)
     } else {
-      toast.error(t("anyhub.install-failed"))
+      toast.error(m['anyhub_install-failed']())
     }
   }
 
@@ -78,46 +76,46 @@ export function AnyHubInstallDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
-          <DialogTitle>{t("anyhub.install-app")}</DialogTitle>
+          <DialogTitle>{m['anyhub_install-app']()}</DialogTitle>
         </DialogHeader>
         <Tabs defaultValue="market">
           <TabsList className="w-full">
-            <TabsTrigger value="market" className="flex-1">{t("anyhub.marketplace")}</TabsTrigger>
+            <TabsTrigger value="market" className="flex-1">{m.anyhub_marketplace()}</TabsTrigger>
             <TabsTrigger value="github" className="flex-1">GitHub</TabsTrigger>
-            <TabsTrigger value="local" className="flex-1">{t("anyhub.local-apps")}</TabsTrigger>
+            <TabsTrigger value="local" className="flex-1">{m['anyhub_local-apps']()}</TabsTrigger>
           </TabsList>
           <TabsContent value="market" className="mt-4 max-h-96 overflow-y-auto">
             <AnyHubMarketplaceView compact onInstallSuccess={() => onOpenChange(false)} />
           </TabsContent>
           <TabsContent value="github" className="mt-4 space-y-3">
             <p className="text-sm text-muted-foreground">
-              {t("anyhub.github-install-hint")}
+              {m['anyhub_github-install-hint']()}
             </p>
             <div className="flex gap-2">
               <Input
                 placeholder="https://github.com/owner/repo"
                 value={githubUrl}
-                onChange={(e) => setGithubUrl(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleGitHubInstall()}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGithubUrl(e.target.value)}
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleGitHubInstall()}
               />
               <Button onClick={handleGitHubInstall} disabled={installing || !githubUrl.trim()}>
-                {installing ? t("anyhub.installing") : t("anyhub.install")}
+                {installing ? m.anyhub_installing() : m.anyhub_install()}
               </Button>
             </div>
           </TabsContent>
           <TabsContent value="local" className="mt-4 space-y-3">
             <p className="text-sm text-muted-foreground">
-              {t("anyhub.local-install-hint")}
+              {m['anyhub_local-install-hint']()}
             </p>
             <div className="flex gap-2">
               <Input
                 placeholder="/path/to/app"
                 value={localPath}
-                onChange={(e) => setLocalPath(e.target.value)}
-                onKeyDown={(e) => e.key === "Enter" && handleLocalInstall()}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setLocalPath(e.target.value)}
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => e.key === "Enter" && handleLocalInstall()}
               />
               <Button onClick={handleLocalInstall} disabled={installing || !localPath.trim()}>
-                {installing ? t("anyhub.installing") : t("anyhub.install")}
+                {installing ? m.anyhub_installing() : m.anyhub_install()}
               </Button>
             </div>
           </TabsContent>

package/src/components/anyhub/anyhub-management-view.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,9 +16,7 @@
 // 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 { useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Plus } from "lucide-react"
 import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
@@ -25,9 +24,8 @@ import { AnyHubAppCard } from "./anyhub-app-card"
 import { AnyHubInstallDialog } from "./anyhub-install-dialog"
 
 export function AnyHubManagementView() {
-  const { t } = useTranslation("apps")
-  const installedApps = useAnyHubStore((s) => s.installedApps)
-  const loading = useAnyHubStore((s) => s.loading)
+  const installedApps = useAnyHubStore((s: any) => s.installedApps)
+  const loading = useAnyHubStore((s: any) => s.loading)
   const fetchInstalled = anyHubActions.fetchInstalled
   const [installOpen, setInstallOpen] = useState(false)
 
@@ -38,32 +36,32 @@ export function AnyHubManagementView() {
   return (
     <div>
       <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-lg font-semibold">{t("anyhub.installed")}</h2>
+        <h2 className="text-lg font-semibold">{m.anyhub_installed()}</h2>
         <Button size="sm" onClick={() => setInstallOpen(true)}>
           <Plus className="mr-1 size-4" />
-          {t("anyhub.install-app")}
+          {m['anyhub_install-app']()}
         </Button>
       </div>
 
       {loading ? (
           <div className="py-12 text-center text-sm text-muted-foreground">
-            {t("anyhub.loading")}
+            {m.anyhub_loading()}
           </div>
       ) : installedApps.length === 0 ? (
         <div className="py-12 text-center">
-          <p className="text-sm text-muted-foreground">{t("anyhub.no-installed-apps")}</p>
+          <p className="text-sm text-muted-foreground">{m['anyhub_no-installed-apps']()}</p>
           <Button
             variant="outline"
             className="mt-3"
             onClick={() => setInstallOpen(true)}
           >
             <Plus className="mr-1 size-4" />
-            {t("anyhub.install-first-app")}
+            {m['anyhub_install-first-app']()}
           </Button>
         </div>
       ) : (
         <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-          {installedApps.map((app) => (
+          {installedApps.map((app: any) => (
             <AnyHubAppCard key={app.id} app={app} />
           ))}
         </div>