@allbluecn/admin-app 0.2.0 → 0.2.1

package/src/components/market/market-app-form.tsx

@@ -15,9 +15,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 { useEffect, useState } from "react"
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { useTheme } from "next-themes"
 import { MarketAppFormData } from "@/lib/anyhub/types"
 import { CAPABILITY_GROUPS } from "@/lib/anyhub/capabilities"
@@ -49,6 +48,15 @@ interface MarketAppFormProps {
 
 const CATEGORY_KEYS = ["productivity", "ai-assistant", "project-mgmt", "docs-collab", "data-analysis", "other"] as const
 
+const CATEGORY_LABELS: Record<string, () => string> = {
+  productivity: m.common_market_categories_productivity,
+  "ai-assistant": m['common_market_categories_ai-assistant'],
+  "project-mgmt": m['common_market_categories_project-mgmt'],
+  "docs-collab": m['common_market_categories_docs-collab'],
+  "data-analysis": m['common_market_categories_data-analysis'],
+  other: m.common_market_categories_other,
+}
+
 const emptyForm: MarketAppFormData = {
   name: "",
   displayName: "",
@@ -63,7 +71,6 @@ const emptyForm: MarketAppFormData = {
 export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: MarketAppFormProps) {
   const [form, setForm] = useState<MarketAppFormData>(emptyForm)
   const [loading, setLoading] = useState(false)
-  const { t } = useTranslation('common')
 
   useEffect(() => {
     if (editData) {
@@ -74,11 +81,11 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
   }, [editData, open])
 
   const updateField = (field: keyof MarketAppFormData, value: string) => {
-    setForm((prev) => ({ ...prev, [field]: value }))
+    setForm((prev: MarketAppFormData) => ({ ...prev, [field]: value }))
   }
 
   const toggleCapability = (capId: string) => {
-    setForm((prev) => ({
+    setForm((prev: MarketAppFormData) => ({
       ...prev,
       capabilities: { ...prev.capabilities, [capId]: !prev.capabilities[capId] },
     }))
@@ -86,7 +93,7 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
 
   const handleSubmit = async () => {
     if (!form.name.trim() || !form.displayName.trim() || !form.entryUrl.trim()) {
-      toast.error(t('market.form.fillRequired'))
+      toast.error(m.common_market_form_fillRequired())
       return
     }
 
@@ -102,14 +109,14 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
 
       if (!res.ok) {
         const err = await res.json()
-        throw new Error(err.error || t('market.form.operationFailed'))
+        throw new Error(err.error || m.common_market_form_operationFailed())
       }
 
-      toast.success(editData ? t('market.form.updated') : t('market.form.created'))
+      toast.success(editData ? m.common_market_form_updated() : m.common_market_form_created())
       onOpenChange(false)
       onSuccess()
     } catch (e) {
-      toast.error(e instanceof Error ? e.message : t('market.form.operationFailed'))
+      toast.error(e instanceof Error ? e.message : m.common_market_form_operationFailed())
     } finally {
       setLoading(false)
     }
@@ -119,67 +126,67 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>{editData ? t('market.form.edit') : t('market.form.create')}</DialogTitle>
+          <DialogTitle>{editData ? m.common_market_form_edit() : m.common_market_form_create()}</DialogTitle>
         </DialogHeader>
 
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-            <Label>{t('market.form.name')}</Label>
+            <Label>{m.common_market_form_name()}</Label>
             <Input
               value={form.name}
-              onChange={(e) => updateField("name", e.target.value)}
-              placeholder={t('market.form.namePlaceholder')}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateField("name", e.target.value)}
+              placeholder={m.common_market_form_namePlaceholder()}
               disabled={!!editData}
             />
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.displayName')}</Label>
+            <Label>{m.common_market_form_displayName()}</Label>
             <Input
               value={form.displayName}
-              onChange={(e) => updateField("displayName", e.target.value)}
-              placeholder={t('market.form.displayNamePlaceholder')}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateField("displayName", e.target.value)}
+              placeholder={m.common_market_form_displayNamePlaceholder()}
             />
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.entryUrl')}</Label>
+            <Label>{m.common_market_form_entryUrl()}</Label>
             <Input
               value={form.entryUrl}
-              onChange={(e) => updateField("entryUrl", e.target.value)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateField("entryUrl", e.target.value)}
               placeholder="https://..."
             />
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.description')}</Label>
+            <Label>{m.common_market_form_description()}</Label>
             <Input
               value={form.description || ""}
-              onChange={(e) => updateField("description", e.target.value)}
-              placeholder={t('market.form.descriptionPlaceholder')}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateField("description", e.target.value)}
+              placeholder={m.common_market_form_descriptionPlaceholder()}
             />
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.icon')}</Label>
+            <Label>{m.common_market_form_icon()}</Label>
             <Input
               value={form.icon || ""}
-              onChange={(e) => updateField("icon", e.target.value)}
-              placeholder={t('market.form.iconPlaceholder')}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateField("icon", e.target.value)}
+              placeholder={m.common_market_form_iconPlaceholder()}
             />
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.category')}</Label>
-            <Select value={form.category || ""} onValueChange={(v) => updateField("category", v === "__none__" ? "" : v)}>
+            <Label>{m.common_market_form_category()}</Label>
+            <Select value={form.category || ""} onValueChange={(v: string) => updateField("category", v === "__none__" ? "" : v)}>
               <SelectTrigger>
-                <SelectValue placeholder={t('market.form.categoryPlaceholder')} />
+                <SelectValue placeholder={m.common_market_form_categoryPlaceholder()} />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="__none__">{t('common.none')}</SelectItem>
+                <SelectItem value="__none__">{m.common_common_none()}</SelectItem>
                 {CATEGORY_KEYS.map((k) => (
-                  <SelectItem key={k} value={t(`market.categories.${k}`)}>
-                    {t(`market.categories.${k}`)}
+                  <SelectItem key={k} value={(CATEGORY_LABELS[k] ?? (() => k))()}>
+                    {(CATEGORY_LABELS[k] ?? (() => k))()}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -187,22 +194,22 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.tags')}</Label>
+            <Label>{m.common_market_form_tags()}</Label>
             <Input
               value={form.tags || ""}
-              onChange={(e) => updateField("tags", e.target.value)}
-              placeholder={t('market.form.tagsPlaceholder')}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateField("tags", e.target.value)}
+              placeholder={m.common_market_form_tagsPlaceholder()}
             />
           </div>
 
           <div className="grid gap-2">
-            <Label>{t('market.form.capabilities')}</Label>
+            <Label>{m.common_market_form_capabilities()}</Label>
             <div className="space-y-3 rounded-md border p-3">
-              {CAPABILITY_GROUPS.map((group) => (
+              {CAPABILITY_GROUPS.map((group: any) => (
                 <div key={group.id}>
                   <p className="mb-1.5 text-sm font-medium">{group.label}</p>
                   <div className="flex flex-wrap gap-3">
-                    {group.capabilities.map((cap) => (
+                    {group.capabilities.map((cap: any) => (
                       <label
                         key={cap.id}
                         className="flex cursor-pointer items-center gap-1.5 text-sm"
@@ -225,10 +232,10 @@ export function MarketAppForm({ open, onOpenChange, editData, onSuccess }: Marke
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            {t('common.cancel')}
+            {m.common_common_cancel()}
           </Button>
           <Button onClick={handleSubmit} disabled={loading}>
-            {loading ? t('status.loading') : editData ? t('common.save') : t('common.create')}
+            {loading ? m.common_status_loading() : editData ? m.common_button_save() : m.common_common_create()}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/market/market-app-list.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useCallback, useEffect, useState } from "react"
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { DataTable } from "@/components/data-table/data-table"
 import { getMarketColumns, MarketAppRow } from "./columns"
 import { MarketAppForm } from "./market-app-form"
@@ -37,7 +37,6 @@ import {
 } from "@/components/ui/alert-dialog"
 
 export function MarketAppList() {
-  const { t } = useTranslation('common')
   const [apps, setApps] = useState<MarketAppRow[]>([])
   const [loading, setLoading] = useState(true)
   const [formOpen, setFormOpen] = useState(false)
@@ -47,7 +46,7 @@ export function MarketAppList() {
   const fetchApps = useCallback(async () => {
     try {
       const data = await listMarketAppsFn({ data: {} })
-      setApps(data.items.map((app) => ({
+      setApps(data.items.map((app: any) => ({
         ...app,
         capabilities: (app.capabilities || {}) as Record<string, boolean>,
         createdAt: app.createdAt.toISOString(),
@@ -55,11 +54,11 @@ export function MarketAppList() {
         publishedAt: app.publishedAt?.toISOString() ?? null,
       })))
     } catch {
-      toast.error(t('market.fetchFailed'))
+      toast.error(m.common_market_fetchFailed())
     } finally {
       setLoading(false)
     }
-  }, [t])
+  }, [])
 
   useEffect(() => {
     fetchApps()
@@ -86,10 +85,10 @@ export function MarketAppList() {
     const newStatus = app.status === "PUBLISHED" ? "UNPUBLISHED" : "PUBLISHED"
     try {
       await updateMarketAppFn({ data: { id: app.id, isPublished: newStatus === "PUBLISHED" } })
-      toast.success(t('market.statusUpdated', { status: newStatus === "PUBLISHED" ? 'published' : 'unpublished' }))
+      toast.success(m.common_market_statusUpdated({ status: newStatus === "PUBLISHED" ? 'published' : 'unpublished' }))
       fetchApps()
     } catch {
-      toast.error(t('market.operationFailed'))
+      toast.error(m.common_market_operationFailed())
     }
   }
 
@@ -97,11 +96,11 @@ export function MarketAppList() {
     if (!deleteTarget) return
     try {
       await deleteMarketAppFn({ data: { id: deleteTarget.id } })
-      toast.success(t('market.deleted'))
+      toast.success(m.common_market_deleted())
       setDeleteTarget(null)
       fetchApps()
     } catch {
-      toast.error(t('market.deleteFailed'))
+      toast.error(m.common_market_deleteFailed())
     }
   }
 
@@ -110,7 +109,7 @@ export function MarketAppList() {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">{t('market.title')}</h1>
+        <h1 className="text-2xl font-bold">{m.common_market_title()}</h1>
         <Button
           onClick={() => {
             setEditData(null)
@@ -118,12 +117,12 @@ export function MarketAppList() {
           }}
         >
           <PlusIcon className="mr-2 size-4" />
-          {t('market.addApp')}
+          {m.common_market_addApp()}
         </Button>
       </div>
 
       {loading ? (
-        <p className="text-muted-foreground">{t('common.loading')}</p>
+        <p className="text-muted-foreground">{m.common_status_loading()}</p>
       ) : (
         <DataTable columns={columns} data={apps} />
       )}
@@ -135,18 +134,18 @@ export function MarketAppList() {
         onSuccess={fetchApps}
       />
 
-      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
+      <AlertDialog open={!!deleteTarget} onOpenChange={(open: boolean) => !open && setDeleteTarget(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('market.deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>{m.common_market_deleteConfirmTitle()}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t('market.deleteConfirmDesc', { name: deleteTarget?.displayName })}
+              {m.common_market_deleteConfirmDesc({ name: deleteTarget?.displayName ?? '' })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>{m.common_common_cancel()}</AlertDialogCancel>
             <AlertDialogAction onClick={handleDelete} className="bg-destructive text-white hover:bg-destructive/90">
-              {t('common.delete')}
+              {m.common_common_delete()}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/src/components/monitoring/error-list.tsx

@@ -16,21 +16,21 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { m } from '@/paraglide/messages.js'
 import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
 
-function formatRelativeTime(dateStr: string, t: (key: string, params?: Record<string, number | string>) => string): string {
+function formatRelativeTime(dateStr: string): string {
   const now = new Date()
   const target = new Date(dateStr)
   const diff = now.getTime() - target.getTime()
   const seconds = Math.floor(diff / 1000)
-  if (seconds < 60) return t('common.timeAgo.seconds', { count: seconds })
+  if (seconds < 60) return m.common_common_timeAgo_seconds({ count: seconds })
   const minutes = Math.floor(seconds / 60)
-  if (minutes < 60) return t('common.timeAgo.minutes', { count: minutes })
+  if (minutes < 60) return m.common_common_timeAgo_minutes({ count: minutes })
   const hours = Math.floor(minutes / 60)
-  if (hours < 24) return t('common.timeAgo.hours', { count: hours })
+  if (hours < 24) return m.common_common_timeAgo_hours({ count: hours })
   const days = Math.floor(hours / 24)
-  return t('common.timeAgo.days', { count: days })
+  return m.common_common_timeAgo_days({ count: days })
 }
 
 interface ErrorItem {
@@ -49,22 +49,21 @@ interface ErrorListProps {
 }
 
 export function ErrorList({ errors }: ErrorListProps) {
-  const { t } = useTranslation('common')
   const [expandedId, setExpandedId] = useState<string | null>(null)
 
   const columns: AdminColumnDef<ErrorItem>[] = [
     {
-      header: t('errorList.columns.lastSeen'),
+      header: m.common_errorList_columns_lastSeen(),
       accessorKey: 'lastSeen',
       meta: { style: { width: 60 } },
       cell: ({ row }: { row: { original: ErrorItem } }) => (
         <span className="text-xs text-muted-foreground">
-          {formatRelativeTime(row.original.lastSeen, t)}
+          {formatRelativeTime(row.original.lastSeen)}
         </span>
       ),
     },
     {
-      header: t('errorList.columns.errorName'),
+      header: m.common_errorList_columns_errorName(),
       accessorKey: 'errorName',
       meta: { style: { width: 120 } },
       cell: ({ row }: { row: { original: ErrorItem } }) => (
@@ -74,7 +73,7 @@ export function ErrorList({ errors }: ErrorListProps) {
       ),
     },
     {
-      header: t('errorList.columns.errorMessage'),
+      header: m.common_errorList_columns_errorMessage(),
       accessorKey: 'errorMessage',
       meta: { style: { width: 280 } },
       cell: ({ row }: { row: { original: ErrorItem } }) => {
@@ -83,7 +82,7 @@ export function ErrorList({ errors }: ErrorListProps) {
       },
     },
     {
-      header: t('errorList.columns.count'),
+      header: m.common_errorList_columns_count(),
       accessorKey: 'count',
       meta: { style: { width: 60, textAlign: 'right' } },
       cell: ({ row }: { row: { original: ErrorItem } }) => (
@@ -91,12 +90,12 @@ export function ErrorList({ errors }: ErrorListProps) {
       ),
     },
     {
-      header: t('errorList.columns.firstSeen'),
+      header: m.common_errorList_columns_firstSeen(),
       accessorKey: 'firstSeen',
       meta: { style: { width: 60 } },
       cell: ({ row }: { row: { original: ErrorItem } }) => (
         <span className="text-xs text-muted-foreground">
-          {formatRelativeTime(row.original.firstSeen, t)}
+          {formatRelativeTime(row.original.firstSeen)}
         </span>
       ),
     },
@@ -107,24 +106,24 @@ export function ErrorList({ errors }: ErrorListProps) {
       <DataTable
         columns={columns}
         data={errors}
-        onRowClick={(item) => {
+        onRowClick={(item: any) => {
           setExpandedId(expandedId === item.id ? null : item.id)
         }}
       />
       {expandedId && (
-        <ErrorDetail errors={errors} expandedId={expandedId} t={t} />
+        <ErrorDetail errors={errors} expandedId={expandedId} />
       )}
     </div>
   )
 }
 
-function ErrorDetail({ errors, expandedId, t }: { errors: ErrorItem[]; expandedId: string; t: (key: string) => string }) {
+function ErrorDetail({ errors, expandedId }: { errors: ErrorItem[]; expandedId: string }) {
   const error = errors.find((e) => e.id === expandedId)
   if (!error) return null
 
   return (
     <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
-      <div className="font-medium text-sm">{t('errorList.detail.title')}</div>
+      <div className="font-medium text-sm">{m.common_errorList_detail_title()}</div>
       {error.stackTrace && (
         <pre className="text-xs bg-background rounded-md p-3 overflow-auto max-h-40 border">
           {error.stackTrace}
@@ -132,7 +131,7 @@ function ErrorDetail({ errors, expandedId, t }: { errors: ErrorItem[]; expandedI
       )}
       {error.context && JSON.stringify(error.context, null, 2) && (
         <div>
-          <div className="text-xs font-medium text-muted-foreground mb-1">{t('errorList.detail.context')}</div>
+          <div className="text-xs font-medium text-muted-foreground mb-1">{m.common_errorList_detail_context()}</div>
           <pre className="text-xs bg-background rounded-md p-3 overflow-auto border">
             {JSON.stringify(error.context, null, 2)}
           </pre>

package/src/components/monitoring/health-cards.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,8 +16,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 { useTranslation } from 'react-i18next'
-
 interface HealthCardData {
   status?: string
   checks?: {
@@ -70,7 +69,6 @@ interface HealthCardsProps {
 }
 
 export function HealthCards({ health }: HealthCardsProps) {
-  const { t } = useTranslation('common')
   const db = health.checks?.database
   const mem = health.checks?.memory
   const cpu = health.checks?.cpu
@@ -81,24 +79,24 @@ export function HealthCards({ health }: HealthCardsProps) {
   return (
     <div className="grid gap-3 md:grid-cols-3 lg:grid-cols-5">
       <div className="rounded-lg border p-3">
-        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.database')}</p>
+        <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_database()}</p>
         <p className={`text-sm font-semibold mt-1 ${db?.status === 'connected' ? 'text-green-600' : 'text-red-600'}`}>
-          {db?.status === 'connected' ? t('monitoring.healthCards.connected') : t('monitoring.healthCards.disconnected')}
+          {db?.status === 'connected' ? m.common_monitoring_healthCards_connected() : m.common_monitoring_healthCards_disconnected()}
         </p>
         {db?.status === 'connected' && db.latency != null && (
-          <p className="text-xs text-muted-foreground mt-0.5">{t('monitoring.healthCards.latency', { latency: db.latency })}ms</p>
+          <p className="text-xs text-muted-foreground mt-0.5">{m.common_monitoring_healthCards_latency({ latency: db.latency })}ms</p>
         )}
       </div>
 
       <div className="rounded-lg border p-3">
-        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.memoryRSS')}</p>
+        <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_memoryRSS()}</p>
         <p className="text-sm font-semibold mt-1">
           {mem?.rss ? formatBytes(mem.rss) : '-'}
         </p>
       </div>
 
       <div className="rounded-lg border p-3">
-        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.heapUsage')}</p>
+        <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_heapUsage()}</p>
         <p className="text-sm font-semibold mt-1">
           {mem?.heapUsed && mem?.heapTotal ? `${((mem.heapUsed / mem.heapTotal) * 100).toFixed(1)}%` : '-'}
         </p>
@@ -108,7 +106,7 @@ export function HealthCards({ health }: HealthCardsProps) {
       </div>
 
       <div className="rounded-lg border p-3">
-        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.cpuCores', { cores: cpu?.cores })}</p>
+        <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_cpuCores({ cores: cpu?.cores ?? 0 })}</p>
         <p className="text-sm font-semibold mt-1">
           {cpu?.usage != null ? `${cpu.usage.toFixed(1)}%` : '-'}
         </p>
@@ -118,7 +116,7 @@ export function HealthCards({ health }: HealthCardsProps) {
       </div>
 
       <div className="rounded-lg border p-3">
-        <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.systemLoad')}</p>
+        <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_systemLoad()}</p>
         <p className="text-sm font-semibold mt-1">
           {load?.one != null ? `${load.one.toFixed(2)} / ${load.five?.toFixed(2) ?? '-'} / ${load.fifteen?.toFixed(2) ?? '-'}` : '-'}
         </p>
@@ -126,19 +124,19 @@ export function HealthCards({ health }: HealthCardsProps) {
 
       {disk && (
         <div className="rounded-lg border p-3">
-          <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.diskUsage')}</p>
+          <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_diskUsage()}</p>
           <p className="text-sm font-semibold mt-1">
             {disk.usedPct != null ? `${disk.usedPct.toFixed(1)}%` : '-'}
           </p>
           <p className="text-xs text-muted-foreground mt-0.5">
-            {t('monitoring.healthCards.available', { free: disk.free != null ? formatBytes(disk.free) : '-', total: disk.total != null ? formatBytes(disk.total) : '-' })}
+            {m.common_monitoring_healthCards_available({ free: disk.free != null ? formatBytes(disk.free) : '-', total: disk.total != null ? formatBytes(disk.total) : '-' })}
           </p>
         </div>
       )}
 
       {system && (
         <div className="rounded-lg border p-3">
-          <p className="text-xs text-muted-foreground">{t('monitoring.healthCards.runtime')}</p>
+          <p className="text-xs text-muted-foreground">{m.common_monitoring_healthCards_runtime()}</p>
           <p className="text-sm font-semibold mt-1">
             {system.platform} {system.release}
           </p>

package/src/components/monitoring/metrics-stats.tsx

@@ -15,8 +15,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 { useTranslation } from 'react-i18next'
 import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+import { m } from '@/paraglide/messages.js'
 import { describeMetric } from '@/lib/monitoring-descriptions'
 import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
 import { ArrowDown, ArrowUp, Info } from 'lucide-react'
@@ -78,24 +78,23 @@ function BenchmarkCell({ value, metric }: BenchmarkCellProps) {
   )
 }
 
-function BenchmarkInfoTooltip({ t }: { t: (key: string) => string }) {
+function BenchmarkInfoTooltip() {
   return (
     <span
       className="inline-flex items-center gap-1 text-xs text-muted-foreground"
-      title={t('metricsStats.benchmarkSource')}
+      title={m.common_metricsStats_benchmarkSource()}
     >
       <Info className="size-3" />
-      {t('metricsStats.compareBenchmark')}
+      {m.common_metricsStats_compareBenchmark()}
     </span>
   )
 }
 
 export function MetricsStats({ data }: MetricsStatsProps) {
-  const { t } = useTranslation('common')
 
   const columns: AdminColumnDef<MetricRow>[] = [
     {
-      header: t('metricsStats.columns.metricName'),
+      header: m.common_metricsStats_columns_metricName(),
       accessorKey: 'metric',
       meta: { style: { width: 160 } },
       cell: ({ row }: { row: { original: MetricRow } }) => (
@@ -105,7 +104,7 @@ export function MetricsStats({ data }: MetricsStatsProps) {
       ),
     },
     {
-      header: t('metricsStats.columns.description'),
+      header: m.common_metricsStats_columns_description(),
       accessorKey: 'metric',
       meta: { style: { width: 30 } },
       cell: ({ row }: { row: { original: MetricRow } }) => (
@@ -115,15 +114,15 @@ export function MetricsStats({ data }: MetricsStatsProps) {
       ),
     },
     {
-      header: t('metricsStats.columns.count'),
+      header: m.common_metricsStats_columns_count(),
       accessorKey: 'count',
       meta: { style: { width: 18, textAlign: 'right' } },
     },
     {
       header: () => (
         <span className="flex items-center gap-1">
-          {t('metricsStats.columns.avg')}
-          <BenchmarkInfoTooltip t={t} />
+          {m.common_metricsStats_columns_avg()}
+          <BenchmarkInfoTooltip />
         </span>
       ),
       accessorKey: 'avg',
@@ -157,7 +156,7 @@ export function MetricsStats({ data }: MetricsStatsProps) {
       ),
     },
     {
-      header: t('metricsStats.columns.min'),
+      header: m.common_metricsStats_columns_min(),
       accessorKey: 'min',
       meta: { style: { width: 30, textAlign: 'right' } },
       cell: ({ row }: { row: { original: MetricRow } }) => (
@@ -165,7 +164,7 @@ export function MetricsStats({ data }: MetricsStatsProps) {
       ),
     },
     {
-      header: t('metricsStats.columns.max'),
+      header: m.common_metricsStats_columns_max(),
       accessorKey: 'max',
       meta: { style: { width: 30, textAlign: 'right' } },
       cell: ({ row }: { row: { original: MetricRow } }) => (