@hed-hog/core 0.0.399 → 0.0.401

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>

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

@@ -5,6 +5,7 @@ import {
   Page,
   PageHeader,
   PaginationFooter,
+  SortableTableHead,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -32,6 +33,7 @@ import {
 } from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 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 { Pencil, ShieldAlert, Sparkles } from 'lucide-react';
@@ -51,6 +53,25 @@ import {
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 const ALL = 'all';
 
+type AiInstructionSortField =
+  | 'slug'
+  | 'name'
+  | 'layer'
+  | 'module_slug'
+  | 'version'
+  | 'updated_at';
+
+const SORT_COLUMNS: readonly SortableColumn<AiInstructionSortField>[] = [
+  'slug',
+  'name',
+  'layer',
+  'module_slug',
+  'version',
+  { field: 'updated_at', initialOrder: 'desc' },
+];
+
+const DEFAULT_SORT = { field: 'layer', order: 'asc' } as const;
+
 export default function AiInstructionPage() {
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.AiInstructionPage');
@@ -122,6 +143,11 @@ export default function AiInstructionPage() {
   });
   const [searchQuery, setSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 400);
+  const sort = useTableSort<AiInstructionSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
 
   const [editing, setEditing] = useState<AiInstruction | null>(null);
 
@@ -159,7 +185,9 @@ export default function AiInstructionPage() {
     return map;
   }, [registry]);
 
-  const { data, isLoading, refetch } = useQuery<PaginatedResponse<AiInstruction>>({
+  const { data, isLoading, refetch } = useQuery<
+    PaginatedResponse<AiInstruction>
+  >({
     queryKey: [
       'ai-instructions',
       page,
@@ -168,15 +196,20 @@ export default function AiInstructionPage() {
       layerFilter,
       moduleFilter,
       statusFilter,
+      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);
       if (layerFilter !== ALL) params.set('layer', layerFilter);
       if (moduleFilter !== ALL) params.set('module_slug', moduleFilter);
-      if (statusFilter !== ALL) params.set('is_active', String(statusFilter === 'active'));
+      if (statusFilter !== ALL)
+        params.set('is_active', String(statusFilter === 'active'));
 
       const response = await request<PaginatedResponse<AiInstruction>>({
         url: `/ai-instruction?${params.toString()}`,
@@ -205,7 +238,9 @@ export default function AiInstructionPage() {
       <div className="flex flex-wrap items-center gap-1">
         {entry ? (
           <Badge variant={entry.db_matches_fallback ? 'outline' : 'secondary'}>
-            {entry.db_matches_fallback ? t('badgeDefault') : t('badgeCustomized')}
+            {entry.db_matches_fallback
+              ? t('badgeDefault')
+              : t('badgeCustomized')}
           </Badge>
         ) : null}
         {instruction.is_locked ? (
@@ -289,14 +324,33 @@ export default function AiInstructionPage() {
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Slug</TableHead>
-                  <TableHead>{t('columnName')}</TableHead>
-                  <TableHead>{t('columnLayer')}</TableHead>
-                  <TableHead>{t('columnModule')}</TableHead>
+                  <SortableTableHead
+                    label="Slug"
+                    {...sort.getSortProps('slug')}
+                  />
+                  <SortableTableHead
+                    label={t('columnName')}
+                    {...sort.getSortProps('name')}
+                  />
+                  <SortableTableHead
+                    label={t('columnLayer')}
+                    {...sort.getSortProps('layer')}
+                  />
+                  <SortableTableHead
+                    label={t('columnModule')}
+                    {...sort.getSortProps('module_slug')}
+                  />
                   <TableHead>{t('columnParams')}</TableHead>
                   <TableHead>{t('columnState')}</TableHead>
-                  <TableHead className="text-right">v</TableHead>
-                  <TableHead>{t('columnUpdatedAt')}</TableHead>
+                  <SortableTableHead
+                    align="right"
+                    label="v"
+                    {...sort.getSortProps('version')}
+                  />
+                  <SortableTableHead
+                    label={t('columnUpdatedAt')}
+                    {...sort.getSortProps('updated_at')}
+                  />
                   <TableHead className="w-12" />
                 </TableRow>
               </TableHeader>
@@ -315,12 +369,16 @@ export default function AiInstructionPage() {
                       <TableCell className="max-w-72 font-mono text-xs">
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <span className="block truncate">{instruction.slug}</span>
+                            <span className="block truncate">
+                              {instruction.slug}
+                            </span>
                           </TooltipTrigger>
                           <TooltipContent>{instruction.slug}</TooltipContent>
                         </Tooltip>
                       </TableCell>
-                      <TableCell className="max-w-60 truncate">{instruction.name}</TableCell>
+                      <TableCell className="max-w-60 truncate">
+                        {instruction.name}
+                      </TableCell>
                       <TableCell>
                         <Badge variant="outline">
                           {t(`layer_${instruction.layer}` as never)}
@@ -328,7 +386,9 @@ export default function AiInstructionPage() {
                       </TableCell>
                       <TableCell>
                         {instruction.module_slug ? (
-                          <Badge variant="secondary">{instruction.module_slug}</Badge>
+                          <Badge variant="secondary">
+                            {instruction.module_slug}
+                          </Badge>
                         ) : (
                           '—'
                         )}
@@ -351,7 +411,7 @@ export default function AiInstructionPage() {
                         <Button
                           variant="outline"
                           size="icon"
-                          title={t('edit')}
+                          tooltip={t('edit')}
                           onClick={(event) => {
                             event.stopPropagation();
                             setEditing(instruction);
@@ -387,7 +447,10 @@ export default function AiInstructionPage() {
         pageSizeOptions={pageSizeOptions}
       />
 
-      <Sheet open={Boolean(editing)} onOpenChange={(open) => !open && setEditing(null)}>
+      <Sheet
+        open={Boolean(editing)}
+        onOpenChange={(open) => !open && setEditing(null)}
+      >
         <ResizableSheetContent
           sheetId="core-ai-instruction-form-sheet"
           defaultWidth={900}
@@ -398,7 +461,9 @@ export default function AiInstructionPage() {
         >
           <SheetHeader>
             <SheetTitle>{editing?.name}</SheetTitle>
-            <SheetDescription className="font-mono text-xs">{editing?.slug}</SheetDescription>
+            <SheetDescription className="font-mono text-xs">
+              {editing?.slug}
+            </SheetDescription>
           </SheetHeader>
 
           <div className="px-4 pb-6">