@hed-hog/core 0.0.399 → 0.0.401

package/hedhog/frontend/app/access-log/page.tsx.ejs

@@ -31,7 +31,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { useDebounce } from '@/hooks/use-debounce';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
+import { useListUrlState } from '@/hooks/use-list-url-state';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import { formatDateTime } from '@/lib/format-date';
 import { getPhotoUrl } from '@/lib/get-photo-url';
@@ -124,15 +125,33 @@ export default function AccessLogPage() {
   const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
   const [isUserSheetOpen, setIsUserSheetOpen] = useState(false);
 
-  const [searchTerm, setSearchTerm] = useState('');
-  const [filterUserId, setFilterUserId] = useState<number | null>(null);
-  const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
-  const [simulatedFilter, setSimulatedFilter] = useState<SimulatedFilter>('all');
-  const [createdAtFrom, setCreatedAtFrom] = useState('');
-  const [createdAtTo, setCreatedAtTo] = useState('');
+  // Busca, filtros e página vivem na URL: voltar do detalhe de um log
+  // recupera a mesma consulta, e o link pode ser passado adiante.
+  const urlState = useListUrlState({
+    filters: {
+      userId: { param: 'userId', defaultValue: '' },
+      type: { param: 'type', defaultValue: 'all' },
+      simulated: { param: 'simulated', defaultValue: 'all' },
+      createdAtFrom: { param: 'createdAtFrom', defaultValue: '' },
+      createdAtTo: { param: 'createdAtTo', defaultValue: '' },
+    },
+  });
+  const {
+    search: searchTerm,
+    setSearch: setSearchTerm,
+    debouncedSearch,
+    page,
+    setPage,
+  } = urlState;
+  const filterUserId = urlState.filters.userId
+    ? Number(urlState.filters.userId)
+    : null;
+  const typeFilter = urlState.filters.type as TypeFilter;
+  const simulatedFilter = urlState.filters.simulated as SimulatedFilter;
+  const createdAtFrom = urlState.filters.createdAtFrom;
+  const createdAtTo = urlState.filters.createdAtTo;
   const [viewMode, setViewMode] = useState<ViewMode>('table');
   const [isLive, setIsLive] = useState(true);
-  const [page, setPage] = useState(1);
   const { data: generalSettings } = useQuery<{
     data: Array<{ slug: string; value: string }>;
   }>({
@@ -169,8 +188,6 @@ export default function AccessLogPage() {
     allowedValues: pageSizeOptions,
   });
 
-  const debouncedSearch = useDebounce(searchTerm);
-
   const {
     data: logsResult,
     isLoading,
@@ -218,12 +235,11 @@ export default function AccessLogPage() {
 
   const clearFilters = () => {
     setSearchTerm('');
-    setFilterUserId(null);
-    setTypeFilter('all');
-    setSimulatedFilter('all');
-    setCreatedAtFrom('');
-    setCreatedAtTo('');
-    setPage(1);
+    urlState.setFilter('userId', '');
+    urlState.setFilter('type', 'all');
+    urlState.setFilter('simulated', 'all');
+    urlState.setFilter('createdAtFrom', '');
+    urlState.setFilter('createdAtTo', '');
   };
 
   const searchControls = useMemo<SearchBarControl[]>(
@@ -232,10 +248,7 @@ export default function AccessLogPage() {
         id: 'type',
         type: 'select',
         value: typeFilter,
-        onChange: (value) => {
-          setTypeFilter(value as TypeFilter);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('type', value),
         placeholder: t('filterByType'),
         options: [
           { value: 'all', label: t('typeAll') },
@@ -247,10 +260,7 @@ export default function AccessLogPage() {
         id: 'simulated',
         type: 'select',
         value: simulatedFilter,
-        onChange: (value) => {
-          setSimulatedFilter(value as SimulatedFilter);
-          setPage(1);
-        },
+        onChange: (value) => urlState.setFilter('simulated', value),
         placeholder: t('filterBySimulated'),
         options: [
           { value: 'all', label: t('simulatedAll') },
@@ -258,28 +268,9 @@ export default function AccessLogPage() {
           { value: 'exclude', label: t('simulatedExclude') },
         ],
       },
-      {
-        id: 'created-at-from',
-        type: 'date',
-        value: createdAtFrom,
-        onChange: (value) => {
-          setCreatedAtFrom(value);
-          setPage(1);
-        },
-        max: createdAtTo || undefined,
-      },
-      {
-        id: 'created-at-to',
-        type: 'date',
-        value: createdAtTo,
-        onChange: (value) => {
-          setCreatedAtTo(value);
-          setPage(1);
-        },
-        min: createdAtFrom || undefined,
-      },
     ],
-    [createdAtFrom, createdAtTo, typeFilter, simulatedFilter, t]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typeFilter, simulatedFilter, t]
   );
 
   const kpiCards = useMemo<KpiCardItem[]>(() => {
@@ -441,10 +432,7 @@ export default function AccessLogPage() {
         <div className="flex-1">
           <SearchBar
             searchQuery={searchTerm}
-            onSearchChange={(v) => {
-              setSearchTerm(v);
-              setPage(1);
-            }}
+            onSearchChange={setSearchTerm}
             onSearch={() => setPage(1)}
             placeholder={t('searchPlaceholder')}
             controls={searchControls}
@@ -452,6 +440,15 @@ export default function AccessLogPage() {
         </div>
 
         <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap xl:justify-end">
+          <DateRangePicker
+            fromDate={createdAtFrom}
+            toDate={createdAtTo}
+            onFromDateChange={(value) =>
+              urlState.setFilter('createdAtFrom', value)
+            }
+            onToDateChange={(value) => urlState.setFilter('createdAtTo', value)}
+          />
+
           <EntityPicker<UserPickerOption>
             placeholder={t('userPickerPlaceholder')}
             emptySelectionLabel={t('userPickerPlaceholder')}
@@ -459,10 +456,7 @@ export default function AccessLogPage() {
             clearable
             allowEmptySelection
             value={filterUserId !== null ? String(filterUserId) : ''}
-            onChange={(val) => {
-              setFilterUserId(val ? Number(val) : null);
-              setPage(1);
-            }}
+            onChange={(val) => urlState.setFilter('userId', val ? String(val) : '')}
             getOptionValue={(o) => o.id}
             getOptionLabel={(o) => o.name}
             loadOptions={async ({ page, pageSize, search }) => {

package/hedhog/frontend/app/account/components/active-sessions.tsx.ejs

@@ -33,7 +33,7 @@ import { formatDate, formatDateTime } from '@/lib/format-date';
 import { parseBrowser, parseDeviceType, parseOS } from '@/lib/session';
 import { UserSession } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { Calendar, Clock, LogOut, MapPin, VenetianMask } from 'lucide-react';
+import { Calendar, Clock, LogOut, MapPin, Plug, VenetianMask } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
@@ -288,12 +288,33 @@ function SessionRow({
       <TableCell>
         <div className="flex items-center gap-3">
           <div>
-            <p className="font-medium capitalize">
-              {parseDeviceType(session.user_agent)}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {parseOS(session.user_agent)}
-            </p>
+            {/* Sessão de app conectado (OAuth) não tem dispositivo para mostrar:
+                ela nasce na nuvem do fornecedor, com um user agent que o parser
+                não reconhece e geolocalizada no país dele. Repetir isso aqui faz
+                a linha parecer invasão de conta — o nome do app é a informação
+                que o usuário precisa para reconhecer o que autorizou. */}
+            {session.oauth_client ? (
+              <p className="font-medium">{session.oauth_client.name}</p>
+            ) : (
+              <>
+                <p className="font-medium capitalize">
+                  {parseDeviceType(session.user_agent)}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {parseOS(session.user_agent)}
+                </p>
+              </>
+            )}
+
+            {session.oauth_client && (
+              <Badge
+                variant="outline"
+                className="mt-1 border-sky-500/30 bg-sky-500/10 text-xs text-sky-700"
+              >
+                <Plug className="mr-1 size-3" />
+                {t('connectedApp')}
+              </Badge>
+            )}
             {/* Esta é a tela de segurança do próprio usuário: é aqui que ele
                 precisa enxergar que alguém entrou na conta dele por simulação
                 de acesso, e quem foi. */}
@@ -314,7 +335,11 @@ function SessionRow({
         </div>
       </TableCell>
       <TableCell>
-        <div>{parseBrowser(session.user_agent)}</div>
+        <div>
+          {session.oauth_client
+            ? t('viaConnector')
+            : parseBrowser(session.user_agent)}
+        </div>
 
         {session.revoked_at === null && (
           <Badge variant="default" className="mt-1 text-xs">

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

@@ -165,7 +165,9 @@ export function McpTokens() {
         <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={() => setIsCreateDialogOpen(true)}>
             <Plus className="size-4 mr-2" />
@@ -174,10 +176,22 @@ export function McpTokens() {
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2">
-            <span className="text-sm text-muted-foreground shrink-0">{t('mcpUrlLabel')}:</span>
+            <span className="text-sm text-muted-foreground shrink-0">
+              {t('mcpUrlLabel')}:
+            </span>
             <code className="flex-1 text-sm break-all">{mcpUrl}</code>
-            <Button variant="ghost" size="icon" className="size-7 shrink-0" onClick={handleCopyUrl}>
-              {isCopiedUrl ? <Check className="size-3.5 text-green-500" /> : <Copy className="size-3.5" />}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7 shrink-0"
+              onClick={handleCopyUrl}
+              tooltip={t('copyUrl')}
+            >
+              {isCopiedUrl ? (
+                <Check className="size-3.5 text-green-500" />
+              ) : (
+                <Copy className="size-3.5" />
+              )}
             </Button>
           </div>
 
@@ -207,7 +221,9 @@ export function McpTokens() {
                       </code>
                     </TableCell>
                     <TableCell className="text-muted-foreground text-sm">
-                      {key.last_used_at ? formatDateTime(key.last_used_at, getSettingValue) : t('never')}
+                      {key.last_used_at
+                        ? formatDateTime(key.last_used_at, getSettingValue)
+                        : t('never')}
                     </TableCell>
                     <TableCell className="text-muted-foreground text-sm">
                       {formatDateTime(key.created_at, getSettingValue)}
@@ -218,6 +234,7 @@ export function McpTokens() {
                         size="icon"
                         className="size-8 text-destructive hover:text-destructive"
                         onClick={() => setKeyToRevoke(key.id)}
+                        tooltip={t('revoke')}
                       >
                         <Trash2 className="size-4" />
                       </Button>
@@ -243,11 +260,16 @@ export function McpTokens() {
       </Card>
 
       {/* Revoke confirmation */}
-      <AlertDialog open={keyToRevoke !== null} onOpenChange={(open) => !open && setKeyToRevoke(null)}>
+      <AlertDialog
+        open={keyToRevoke !== null}
+        onOpenChange={(open) => !open && setKeyToRevoke(null)}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>{t('revokeTokenTitle')}</AlertDialogTitle>
-            <AlertDialogDescription>{t('revokeTokenDescription')}</AlertDialogDescription>
+            <AlertDialogDescription>
+              {t('revokeTokenDescription')}
+            </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
@@ -262,13 +284,18 @@ export function McpTokens() {
       </AlertDialog>
 
       {/* Create token dialog */}
-      <Dialog open={isCreateDialogOpen} onOpenChange={(open) => !open && handleCloseCreateDialog()}>
+      <Dialog
+        open={isCreateDialogOpen}
+        onOpenChange={(open) => !open && handleCloseCreateDialog()}
+      >
         <DialogContent className="sm:max-w-md">
           {createdToken === null ? (
             <>
               <DialogHeader>
                 <DialogTitle>{t('createTokenTitle')}</DialogTitle>
-                <DialogDescription>{t('createTokenDescription')}</DialogDescription>
+                <DialogDescription>
+                  {t('createTokenDescription')}
+                </DialogDescription>
               </DialogHeader>
               <div className="space-y-2 py-2">
                 <Label htmlFor="token-name">{t('tokenNameLabel')}</Label>
@@ -281,7 +308,9 @@ export function McpTokens() {
                 />
               </div>
               <DialogFooter>
-                <Button variant="outline" onClick={handleCloseCreateDialog}>{t('cancel')}</Button>
+                <Button variant="outline" onClick={handleCloseCreateDialog}>
+                  {t('cancel')}
+                </Button>
                 <Button onClick={handleCreate} disabled={!newKeyName.trim()}>
                   {t('createToken')}
                 </Button>
@@ -302,14 +331,26 @@ export function McpTokens() {
                     <code className="flex-1 rounded border bg-muted px-3 py-2 text-xs break-all">
                       {createdToken}
                     </code>
-                    <Button variant="outline" size="icon" onClick={handleCopyToken} className="shrink-0">
-                      {isCopied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={handleCopyToken}
+                      className="shrink-0"
+                      tooltip={t('copyToken')}
+                    >
+                      {isCopied ? (
+                        <Check className="size-4 text-green-500" />
+                      ) : (
+                        <Copy className="size-4" />
+                      )}
                     </Button>
                   </div>
                 </div>
               </div>
               <DialogFooter>
-                <Button onClick={handleCloseCreateDialog}>{t('closeDialog')}</Button>
+                <Button onClick={handleCloseCreateDialog}>
+                  {t('closeDialog')}
+                </Button>
               </DialogFooter>
             </>
           )}

package/hedhog/frontend/app/account/components/mfa-method-card.tsx.ejs

@@ -75,6 +75,7 @@ export function MfaMethodCard({
             setEditName(method.name);
             setIsEditOpen(true);
           }}
+          tooltip={t('editMfaName')}
         >
           <Edit2 className="w-4 h-4" />
         </Button>
@@ -106,7 +107,12 @@ export function MfaMethodCard({
             </form>
           </DialogContent>
         </Dialog>
-        <Button variant="ghost" size="icon" onClick={() => onRemove(method)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onRemove(method)}
+          tooltip={t('removeMfa')}
+        >
           <Trash2 className="size-4 text-destructive" />
         </Button>
       </div>

package/hedhog/frontend/app/account/components/recovery-codes-dialog.tsx.ejs

@@ -122,6 +122,7 @@ export function RecoveryCodesDialog({
                     variant="ghost"
                     size="icon"
                     onClick={() => handleCopyCode(code)}
+                    tooltip={t('copyCode')}
                   >
                     <Copy className="w-4 h-4" />
                   </Button>

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>