@hed-hog/core 0.0.398 → 0.0.400

package/hedhog/frontend/app/account/components/tokens.tsx.ejs

@@ -57,17 +57,16 @@ type ApiToken = {
 
 function daysSince(
   date: string | null,
-  t: (key: string, values?: Record<string, unknown>) => string,
+  t: (key: string, values?: Record<string, unknown>) => string
 ): string {
   if (!date) return t('never');
-  const days = Math.floor(
-    (Date.now() - new Date(date).getTime()) / 86400000,
-  );
+  const days = Math.floor((Date.now() - new Date(date).getTime()) / 86400000);
   if (days === 0) return t('today');
   return t('daysAgo', { days });
 }
 
 function CopyButton({ value }: { value: string }) {
+  const t = useTranslations('core.Tokens');
   const [copied, setCopied] = useState(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(value);
@@ -75,7 +74,13 @@ function CopyButton({ value }: { value: string }) {
     setTimeout(() => setCopied(false), 2000);
   };
   return (
-    <Button variant="ghost" size="icon" className="size-7 shrink-0" onClick={handleCopy}>
+    <Button
+      variant="ghost"
+      size="icon"
+      className="size-7 shrink-0"
+      onClick={handleCopy}
+      tooltip={t('copy')}
+    >
       {copied ? (
         <Check className="size-3.5 text-green-500" />
       ) : (
@@ -150,7 +155,8 @@ export function Tokens() {
     paginationOptions: { pageSizeOptions },
   });
 
-  const apiUrl = (getSettingValue('api-url') as string | null)?.replace(/\/$/, '') ?? '';
+  const apiUrl =
+    (getSettingValue('api-url') as string | null)?.replace(/\/$/, '') ?? '';
   const mcpUrl = apiUrl ? `${apiUrl}/mcp` : '/mcp';
 
   const handleCreate = async () => {
@@ -201,7 +207,9 @@ export function Tokens() {
         <CardHeader className="flex flex-row items-start justify-between">
           <div>
             <CardTitle>{t('title')}</CardTitle>
-            <CardDescription className="mt-1">{t('description')}</CardDescription>
+            <CardDescription className="mt-1">
+              {t('description')}
+            </CardDescription>
           </div>
           <Button size="sm" onClick={() => setIsSheetOpen(true)}>
             <Plus className="size-4 mr-2" />
@@ -255,6 +263,7 @@ export function Tokens() {
                         size="icon"
                         className="size-8 text-destructive hover:text-destructive"
                         onClick={() => setKeyToRevoke(key.id)}
+                        tooltip={t('revoke')}
                       >
                         <Trash2 className="size-4" />
                       </Button>
@@ -304,14 +313,19 @@ export function Tokens() {
       </AlertDialog>
 
       {/* Create token sheet */}
-      <Sheet open={isSheetOpen} onOpenChange={(open) => !open && handleCloseSheet()}>
+      <Sheet
+        open={isSheetOpen}
+        onOpenChange={(open) => !open && handleCloseSheet()}
+      >
         <ResizableSheetContent sheetId="create-token" defaultWidth={520}>
           <SheetHeader>
             <SheetTitle>
               {createdToken ? t('tokenCreatedTitle') : t('createTokenTitle')}
             </SheetTitle>
             <SheetDescription>
-              {createdToken ? t('tokenCreatedWarning') : t('createTokenDescription')}
+              {createdToken
+                ? t('tokenCreatedWarning')
+                : t('createTokenDescription')}
             </SheetDescription>
           </SheetHeader>
 
@@ -360,18 +374,24 @@ export function Tokens() {
 
                 {newKeyType === 'mcp' ? (
                   <div className="space-y-3">
-                    <p className="text-xs text-muted-foreground">{t('mcpUsageDesc')}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('mcpUsageDesc')}
+                    </p>
                     <CodeRow label={t('serverUrlLabel')} value={mcpUrl} />
                     <div className="space-y-1">
-                      <p className="text-xs text-muted-foreground">{t('mcpUsageHeader')}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('mcpUsageHeader')}
+                      </p>
                       <pre className="rounded bg-muted px-3 py-2 text-xs overflow-x-auto">
                         {`Authorization: Bearer <${t('yourToken')}>`}
                       </pre>
                     </div>
                     <div className="space-y-1">
-                      <p className="text-xs text-muted-foreground">{t('mcpUsageExampleLabel')}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('mcpUsageExampleLabel')}
+                      </p>
                       <pre className="rounded bg-muted px-3 py-2 text-xs overflow-x-auto whitespace-pre-wrap break-all">
-{`{
+                        {`{
   "mcpServers": {
     "hub": {
       "type": "sse",
@@ -387,16 +407,25 @@ export function Tokens() {
                   </div>
                 ) : (
                   <div className="space-y-3">
-                    <p className="text-xs text-muted-foreground">{t('apiUsageDesc')}</p>
-                    <CodeRow label={t('serverUrlLabel')} value={apiUrl || '/api'} />
+                    <p className="text-xs text-muted-foreground">
+                      {t('apiUsageDesc')}
+                    </p>
+                    <CodeRow
+                      label={t('serverUrlLabel')}
+                      value={apiUrl || '/api'}
+                    />
                     <div className="space-y-1">
-                      <p className="text-xs text-muted-foreground">{t('apiUsageHeader')}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('apiUsageHeader')}
+                      </p>
                       <pre className="rounded bg-muted px-3 py-2 text-xs overflow-x-auto">
                         {`Authorization: Bearer <${t('yourToken')}>`}
                       </pre>
                     </div>
                     <div className="space-y-1">
-                      <p className="text-xs text-muted-foreground">{t('apiUsageExampleLabel')}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {t('apiUsageExampleLabel')}
+                      </p>
                       <pre className="rounded bg-muted px-3 py-2 text-xs overflow-x-auto whitespace-pre-wrap break-all">
                         {`curl -H "Authorization: Bearer <${t('yourToken')}>" \\\n  ${apiUrl || '/api'}/users/me`}
                       </pre>
@@ -421,6 +450,7 @@ export function Tokens() {
                     size="icon"
                     onClick={handleCopyToken}
                     className="shrink-0"
+                    tooltip={t('copyToken')}
                   >
                     {isCopied ? (
                       <Check className="size-4 text-green-500" />

package/hedhog/frontend/app/ai_agent/page.tsx.ejs

@@ -6,6 +6,7 @@ import {
   PageHeader,
   PaginationFooter,
   SearchBar,
+  SortableTableHead,
 } from '@/components/entity-list';
 import {
   AlertDialog,
@@ -55,6 +56,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useFormDraft } from '@/hooks/use-form-draft';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -126,6 +128,17 @@ function getErrorMessage(error: unknown, fallback: string) {
 
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 
+type AiAgentSortField = 'slug' | 'provider' | 'model' | 'external_agent_id';
+
+const SORT_COLUMNS: readonly SortableColumn<AiAgentSortField>[] = [
+  'slug',
+  'provider',
+  'model',
+  'external_agent_id',
+];
+
+const DEFAULT_SORT = { field: 'slug', order: 'asc' } as const;
+
 export default function AiAgentPage() {
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.AiAgentPage');
@@ -173,6 +186,11 @@ export default function AiAgentPage() {
   });
   const [searchQuery, setSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 400);
+  const sort = useTableSort<AiAgentSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
@@ -245,11 +263,20 @@ export default function AiAgentPage() {
   }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
 
   const { data, isLoading, refetch } = useQuery<PaginatedResponse<Agent>>({
-    queryKey: ['ai-agents', page, pageSize, debouncedSearch],
+    queryKey: [
+      'ai-agents',
+      page,
+      pageSize,
+      debouncedSearch,
+      sort.sortField,
+      sort.sortOrder,
+    ],
     queryFn: async () => {
       const params = new URLSearchParams();
       params.set('page', String(page));
       params.set('pageSize', String(pageSize));
+      params.set('sortField', sort.sortField);
+      params.set('sortOrder', sort.sortOrder);
       if (debouncedSearch) params.set('search', debouncedSearch);
 
       const response = await request<PaginatedResponse<Agent>>({
@@ -405,10 +432,22 @@ export default function AiAgentPage() {
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Slug</TableHead>
-                  <TableHead>{t('columnProvider')}</TableHead>
-                  <TableHead>{t('columnModel')}</TableHead>
-                  <TableHead>{t('columnExternalId')}</TableHead>
+                  <SortableTableHead
+                    label="Slug"
+                    {...sort.getSortProps('slug')}
+                  />
+                  <SortableTableHead
+                    label={t('columnProvider')}
+                    {...sort.getSortProps('provider')}
+                  />
+                  <SortableTableHead
+                    label={t('columnModel')}
+                    {...sort.getSortProps('model')}
+                  />
+                  <SortableTableHead
+                    label={t('columnExternalId')}
+                    {...sort.getSortProps('external_agent_id')}
+                  />
                   <TableHead className="text-right">
                     {t('columnActions')}
                   </TableHead>
@@ -434,6 +473,7 @@ export default function AiAgentPage() {
                             variant="outline"
                             size="icon"
                             onClick={() => handleOpenEdit(agent)}
+                            tooltip={t('editTitle')}
                           >
                             <Pencil className="h-4 w-4" />
                           </Button>
@@ -441,6 +481,7 @@ export default function AiAgentPage() {
                             variant="destructive"
                             size="icon"
                             onClick={() => setAgentToDelete(agent)}
+                            tooltip={t('delete')}
                           >
                             <Trash2 className="h-4 w-4" />
                           </Button>

package/hedhog/frontend/app/ai_instruction/_components/ai-instruction-form.tsx.ejs

@@ -28,7 +28,13 @@ import { Textarea } from '@/components/ui/textarea';
 import { useFormDraft } from '@/hooks/use-form-draft';
 import { cn } from '@/lib/utils';
 import { useApp } from '@hed-hog/next-app-provider';
-import { AlertTriangle, Copy, Lock, RotateCcw, ShieldAlert } from 'lucide-react';
+import {
+  AlertTriangle,
+  Copy,
+  Lock,
+  RotateCcw,
+  ShieldAlert,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -75,8 +81,10 @@ function toFormState(instruction: AiInstruction): FormState {
     locale: instruction.locale,
     is_active: instruction.is_active,
     model: instruction.model ?? '',
-    temperature: instruction.temperature === null ? '' : String(instruction.temperature),
-    max_tokens: instruction.max_tokens === null ? '' : String(instruction.max_tokens),
+    temperature:
+      instruction.temperature === null ? '' : String(instruction.temperature),
+    max_tokens:
+      instruction.max_tokens === null ? '' : String(instruction.max_tokens),
     change_note: '',
   };
 }
@@ -106,7 +114,10 @@ export function AiInstructionForm({
   const contentChanged = state.content !== instruction.content;
   const readOnly = instruction.is_locked && !isUnlocked;
 
-  const { clearDraft, loadDraft } = useFormDraft<{ id: number; values: FormState }>({
+  const { clearDraft, loadDraft } = useFormDraft<{
+    id: number;
+    values: FormState;
+  }>({
     storageKey: DRAFT_STORAGE_KEY,
     value: { id: instruction.id, values: state },
     hasData: isDirty,
@@ -139,7 +150,10 @@ export function AiInstructionForm({
     [state.content]
   );
 
-  const declaredNames = useMemo(() => new Set(Object.keys(variables)), [variables]);
+  const declaredNames = useMemo(
+    () => new Set(Object.keys(variables)),
+    [variables]
+  );
 
   const missingPhrases = useMemo(() => {
     const phrases = registryEntry?.required_phrases ?? [];
@@ -169,8 +183,10 @@ export function AiInstructionForm({
           is_active: state.is_active,
           // Empty means "inherit from the profile / code default".
           model: state.model.trim() || null,
-          temperature: state.temperature.trim() === '' ? null : Number(state.temperature),
-          max_tokens: state.max_tokens.trim() === '' ? null : Number(state.max_tokens),
+          temperature:
+            state.temperature.trim() === '' ? null : Number(state.temperature),
+          max_tokens:
+            state.max_tokens.trim() === '' ? null : Number(state.max_tokens),
           change_note: state.change_note.trim() || undefined,
           allow_missing_variables: allowMissingVariables || undefined,
           acknowledge_security_review: instruction.is_locked ? true : undefined,
@@ -204,7 +220,11 @@ export function AiInstructionForm({
                 {registryEntry.required_phrases.map((phrase) => (
                   <Badge
                     key={phrase}
-                    variant={missingPhrases.includes(phrase) ? 'destructive' : 'secondary'}
+                    variant={
+                      missingPhrases.includes(phrase)
+                        ? 'destructive'
+                        : 'secondary'
+                    }
                   >
                     {phrase}
                   </Badge>
@@ -246,12 +266,16 @@ export function AiInstructionForm({
             <div className="space-y-1 sm:col-span-2">
               <Label>{t('fieldSlug')}</Label>
               <div className="flex gap-2">
-                <Input readOnly value={instruction.slug} className="font-mono text-xs" />
+                <Input
+                  readOnly
+                  value={instruction.slug}
+                  className="font-mono text-xs"
+                />
                 <Button
                   type="button"
                   variant="outline"
                   size="icon"
-                  title={t('copySlug')}
+                  tooltip={t('copySlug')}
                   onClick={() => {
                     navigator.clipboard?.writeText(instruction.slug);
                     toast.success(t('slugCopied'));
@@ -260,7 +284,9 @@ export function AiInstructionForm({
                   <Copy className="h-4 w-4" />
                 </Button>
               </div>
-              <p className="text-xs text-muted-foreground">{t('slugImmutable')}</p>
+              <p className="text-xs text-muted-foreground">
+                {t('slugImmutable')}
+              </p>
             </div>
 
             <div className="space-y-1">
@@ -270,7 +296,10 @@ export function AiInstructionForm({
                 maxLength={200}
                 readOnly={readOnly}
                 onChange={(event) =>
-                  setState((current) => ({ ...current, name: event.target.value }))
+                  setState((current) => ({
+                    ...current,
+                    name: event.target.value,
+                  }))
                 }
               />
             </div>
@@ -280,7 +309,9 @@ export function AiInstructionForm({
               <Select
                 value={state.locale}
                 disabled={readOnly}
-                onValueChange={(value) => setState((current) => ({ ...current, locale: value }))}
+                onValueChange={(value) =>
+                  setState((current) => ({ ...current, locale: value }))
+                }
               >
                 <SelectTrigger>
                   <SelectValue />
@@ -301,7 +332,9 @@ export function AiInstructionForm({
                 }
               />
               <Label>{t('fieldIsActive')}</Label>
-              <span className="text-xs text-muted-foreground">{t('isActiveHint')}</span>
+              <span className="text-xs text-muted-foreground">
+                {t('isActiveHint')}
+              </span>
             </div>
           </div>
 
@@ -328,7 +361,10 @@ export function AiInstructionForm({
               readOnly={readOnly}
               className="font-mono text-xs leading-relaxed"
               onChange={(event) =>
-                setState((current) => ({ ...current, content: event.target.value }))
+                setState((current) => ({
+                  ...current,
+                  content: event.target.value,
+                }))
               }
             />
 
@@ -346,7 +382,9 @@ export function AiInstructionForm({
                   .map((name) => (
                     <Badge
                       key={name}
-                      variant={declaredNames.has(name) ? 'secondary' : 'destructive'}
+                      variant={
+                        declaredNames.has(name) ? 'secondary' : 'destructive'
+                      }
                       className="font-mono text-xs"
                     >
                       {`{{${name}}}`}
@@ -381,15 +419,21 @@ export function AiInstructionForm({
               <Alert>
                 <AlertTriangle className="h-4 w-4" />
                 <AlertDescription>
-                  {t('missingPhrasesWarning', { phrases: missingPhrases.join(', ') })}
+                  {t('missingPhrasesWarning', {
+                    phrases: missingPhrases.join(', '),
+                  })}
                 </AlertDescription>
               </Alert>
             ) : null}
           </div>
 
           <div className="space-y-2 rounded-md border p-3">
-            <Label className="text-sm font-medium">{t('modelParamsTitle')}</Label>
-            <p className="text-xs text-muted-foreground">{t('modelParamsHint')}</p>
+            <Label className="text-sm font-medium">
+              {t('modelParamsTitle')}
+            </Label>
+            <p className="text-xs text-muted-foreground">
+              {t('modelParamsHint')}
+            </p>
 
             <div className="grid gap-3 sm:grid-cols-3">
               <div className="space-y-1">
@@ -397,9 +441,14 @@ export function AiInstructionForm({
                 <Input
                   value={state.model}
                   readOnly={readOnly}
-                  placeholder={registryEntry?.defaults?.model || t('inheritPlaceholder')}
+                  placeholder={
+                    registryEntry?.defaults?.model || t('inheritPlaceholder')
+                  }
                   onChange={(event) =>
-                    setState((current) => ({ ...current, model: event.target.value }))
+                    setState((current) => ({
+                      ...current,
+                      model: event.target.value,
+                    }))
                   }
                 />
               </div>
@@ -418,7 +467,10 @@ export function AiInstructionForm({
                       : t('inheritPlaceholder')
                   }
                   onChange={(event) =>
-                    setState((current) => ({ ...current, temperature: event.target.value }))
+                    setState((current) => ({
+                      ...current,
+                      temperature: event.target.value,
+                    }))
                   }
                 />
               </div>
@@ -435,7 +487,10 @@ export function AiInstructionForm({
                       : t('inheritPlaceholder')
                   }
                   onChange={(event) =>
-                    setState((current) => ({ ...current, max_tokens: event.target.value }))
+                    setState((current) => ({
+                      ...current,
+                      max_tokens: event.target.value,
+                    }))
                   }
                 />
               </div>
@@ -450,7 +505,10 @@ export function AiInstructionForm({
                 maxLength={500}
                 placeholder={t('changeNotePlaceholder')}
                 onChange={(event) =>
-                  setState((current) => ({ ...current, change_note: event.target.value }))
+                  setState((current) => ({
+                    ...current,
+                    change_note: event.target.value,
+                  }))
                 }
               />
             </div>
@@ -469,7 +527,9 @@ export function AiInstructionForm({
             </Button>
             <Button
               type="button"
-              disabled={isSaving || readOnly || validation.unbalancedBlocks.length > 0}
+              disabled={
+                isSaving || readOnly || validation.unbalancedBlocks.length > 0
+              }
               onClick={() => handleSave(validation.missingRequired.length > 0)}
             >
               {isSaving ? t('saving') : t('save')}
@@ -479,11 +539,15 @@ export function AiInstructionForm({
 
         <TabsContent value="variables" className="space-y-3 pt-4">
           {Object.keys(variables).length === 0 ? (
-            <p className="text-sm text-muted-foreground">{t('variablesEmpty')}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('variablesEmpty')}
+            </p>
           ) : (
             <>
               {registryEntry ? (
-                <p className="text-xs text-muted-foreground">{t('variablesFromCode')}</p>
+                <p className="text-xs text-muted-foreground">
+                  {t('variablesFromCode')}
+                </p>
               ) : null}
               <div className="overflow-x-auto">
                 <table className="w-full text-sm">
@@ -502,7 +566,9 @@ export function AiInstructionForm({
                         <td className="p-2">{spec.type}</td>
                         <td className="p-2">
                           {spec.required ? (
-                            <Badge variant="secondary">{t('variableRequired')}</Badge>
+                            <Badge variant="secondary">
+                              {t('variableRequired')}
+                            </Badge>
                           ) : (
                             '—'
                           )}
@@ -533,7 +599,10 @@ export function AiInstructionForm({
         </TabsContent>
 
         <TabsContent value="history" className="pt-4">
-          <AiInstructionVersions instruction={instruction} onRestored={onSaved} />
+          <AiInstructionVersions
+            instruction={instruction}
+            onRestored={onSaved}
+          />
         </TabsContent>
       </Tabs>
 
@@ -547,7 +616,9 @@ export function AiInstructionForm({
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{t('unlockDialogTitle')}</AlertDialogTitle>
-            <AlertDialogDescription>{t('unlockDialogDescription')}</AlertDialogDescription>
+            <AlertDialogDescription>
+              {t('unlockDialogDescription')}
+            </AlertDialogDescription>
           </AlertDialogHeader>
 
           <div className="space-y-1">

package/hedhog/frontend/app/ai_instruction/_components/ai-instruction-versions.tsx.ejs

@@ -28,7 +28,11 @@ import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
-import { getErrorMessage, type AiInstruction, type AiInstructionVersion } from '../_lib/types';
+import {
+  getErrorMessage,
+  type AiInstruction,
+  type AiInstructionVersion,
+} from '../_lib/types';
 import { PromptDiff } from './prompt-diff';
 
 type AiInstructionVersionsProps = {
@@ -44,7 +48,8 @@ export function AiInstructionVersions({
   const t = useTranslations('core.AiInstructionPage');
 
   const [selected, setSelected] = useState<AiInstructionVersion | null>(null);
-  const [versionToRestore, setVersionToRestore] = useState<AiInstructionVersion | null>(null);
+  const [versionToRestore, setVersionToRestore] =
+    useState<AiInstructionVersion | null>(null);
   const [isRestoring, setIsRestoring] = useState(false);
 
   const { data, isLoading, refetch } = useQuery<AiInstructionVersion[]>({
@@ -103,7 +108,9 @@ export function AiInstructionVersions({
             <TableHead>{t('columnVersionDate')}</TableHead>
             <TableHead>{t('columnVersionAuthor')}</TableHead>
             <TableHead>{t('columnVersionNote')}</TableHead>
-            <TableHead className="text-right">{t('columnVersionSize')}</TableHead>
+            <TableHead className="text-right">
+              {t('columnVersionSize')}
+            </TableHead>
             <TableHead className="w-12" />
           </TableRow>
         </TableHeader>
@@ -136,7 +143,10 @@ export function AiInstructionVersions({
                   )}
                 </TableCell>
                 <TableCell>{version.created_by_name || '—'}</TableCell>
-                <TableCell className="max-w-60 truncate" title={version.change_note || ''}>
+                <TableCell
+                  className="max-w-60 truncate"
+                  title={version.change_note || ''}
+                >
                   {version.change_note || '—'}
                 </TableCell>
                 <TableCell className="text-right font-mono text-xs">
@@ -147,7 +157,7 @@ export function AiInstructionVersions({
                     <Button
                       variant="outline"
                       size="icon"
-                      title={t('restoreVersion')}
+                      tooltip={t('restoreVersion')}
                       onClick={(event) => {
                         event.stopPropagation();
                         setVersionToRestore(version);
@@ -172,7 +182,9 @@ export function AiInstructionVersions({
           emptyLabel={t('diffIdentical')}
         />
       ) : (
-        <p className="text-sm text-muted-foreground">{t('versionsSelectHint')}</p>
+        <p className="text-sm text-muted-foreground">
+          {t('versionsSelectHint')}
+        </p>
       )}
 
       <AlertDialog
@@ -183,11 +195,15 @@ export function AiInstructionVersions({
           <AlertDialogHeader>
             <AlertDialogTitle>{t('restoreDialogTitle')}</AlertDialogTitle>
             <AlertDialogDescription>
-              {t('restoreDialogDescription', { version: versionToRestore?.version ?? 0 })}
+              {t('restoreDialogDescription', {
+                version: versionToRestore?.version ?? 0,
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isRestoring}>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogCancel disabled={isRestoring}>
+              {t('cancel')}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleRestore} disabled={isRestoring}>
               {isRestoring ? t('restoring') : t('restoreVersion')}
             </AlertDialogAction>