@hed-hog/core 0.0.387 → 0.0.393

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

@@ -0,0 +1,422 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { FilterBar } from '@/components/ui/filter-bar';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useDebounce } from '@/hooks/use-debounce';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Pencil, ShieldAlert, Sparkles } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { AiInstructionForm } from './_components/ai-instruction-form';
+import {
+  AI_INSTRUCTION_LAYERS,
+  type AiInstruction,
+  type AiInstructionLayer,
+  type AiPromptRegistryEntry,
+  type PaginatedResponse,
+} from './_lib/types';
+
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+const ALL = 'all';
+
+export default function AiInstructionPage() {
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const t = useTranslations('core.AiInstructionPage');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Filters live in the URL so the shortcut on a module's settings tab can deep
+  // link into this screen (?module=lms) and the result stays shareable.
+  const layerFilter = searchParams.get('layer') || ALL;
+  const moduleFilter = searchParams.get('module') || ALL;
+  const statusFilter = searchParams.get('status') || ALL;
+
+  const setFilter = useCallback(
+    (key: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (!value || value === ALL) {
+        params.delete(key);
+      } else {
+        params.set(key, value);
+      }
+      router.replace(`?${params.toString()}`);
+    },
+    [router, searchParams]
+  );
+
+  const activeFilterCount = [layerFilter, moduleFilter, statusFilter].filter(
+    (value) => value !== ALL
+  ).length;
+
+  const clearFilters = useCallback(() => {
+    router.replace('?');
+  }, [router]);
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({ url: '/setting/group/general', method: 'GET' });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
+  });
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 400);
+
+  const [editing, setEditing] = useState<AiInstruction | null>(null);
+
+  useEffect(() => {
+    setPage(1);
+  }, [layerFilter, moduleFilter, statusFilter, debouncedSearch]);
+
+  const { data: modules } = useQuery<string[]>({
+    queryKey: ['ai-instruction-modules'],
+    queryFn: async () => {
+      const response = await request<string[]>({
+        url: '/ai-instruction/modules',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: registry } = useQuery<AiPromptRegistryEntry[]>({
+    queryKey: ['ai-instruction-registry'],
+    queryFn: async () => {
+      const response = await request<AiPromptRegistryEntry[]>({
+        url: '/ai-instruction/registry',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const registryBySlug = useMemo(() => {
+    const map = new Map<string, AiPromptRegistryEntry>();
+    for (const entry of registry ?? []) map.set(entry.slug, entry);
+    return map;
+  }, [registry]);
+
+  const { data, isLoading, refetch } = useQuery<PaginatedResponse<AiInstruction>>({
+    queryKey: [
+      'ai-instructions',
+      page,
+      pageSize,
+      debouncedSearch,
+      layerFilter,
+      moduleFilter,
+      statusFilter,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      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'));
+
+      const response = await request<PaginatedResponse<AiInstruction>>({
+        url: `/ai-instruction?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const list = data ?? { data: [], total: 0, page: 1, pageSize, totalPages: 1 };
+
+  const renderModelParams = (instruction: AiInstruction) => {
+    const parts = [
+      instruction.model,
+      instruction.temperature === null ? null : `t=${instruction.temperature}`,
+      instruction.max_tokens === null ? null : `${instruction.max_tokens} tok`,
+    ].filter(Boolean);
+
+    return parts.length ? parts.join(' · ') : '—';
+  };
+
+  const renderState = (instruction: AiInstruction) => {
+    const entry = registryBySlug.get(instruction.slug);
+
+    return (
+      <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')}
+          </Badge>
+        ) : null}
+        {instruction.is_locked ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="destructive" className="gap-1">
+                <ShieldAlert className="h-3 w-3" />
+                {t('badgeLocked')}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent>{t('lockedDescription')}</TooltipContent>
+          </Tooltip>
+        ) : null}
+        {instruction.is_active ? null : (
+          <Badge variant="outline">{t('badgeInactive')}</Badge>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbDashboard'), href: '/' },
+          { label: t('breadcrumbManagement'), href: '/core/management' },
+          { label: t('breadcrumbCurrent') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      {/* FilterBar already renders the search input, so no separate SearchBar. */}
+      <FilterBar
+        searchPlaceholder={t('searchPlaceholder')}
+        searchValue={searchQuery}
+        onSearchChange={setSearchQuery}
+        activeFilters={activeFilterCount}
+        onClearFilters={activeFilterCount ? clearFilters : undefined}
+        filters={[
+          {
+            id: 'layer',
+            label: t('filterLayer'),
+            value: layerFilter,
+            onChange: (value) => setFilter('layer', value),
+            options: [
+              { value: ALL, label: t('filterAllLayers') },
+              ...AI_INSTRUCTION_LAYERS.map((layer) => ({
+                value: layer,
+                label: t(`layer_${layer}` as never),
+              })),
+            ],
+          },
+          {
+            id: 'module',
+            label: t('filterModule'),
+            value: moduleFilter,
+            onChange: (value) => setFilter('module', value),
+            options: [
+              { value: ALL, label: t('filterAllModules') },
+              ...(modules ?? []).map((slug) => ({ value: slug, label: slug })),
+            ],
+          },
+          {
+            id: 'status',
+            label: t('filterStatus'),
+            value: statusFilter,
+            onChange: (value) => setFilter('status', value),
+            options: [
+              { value: ALL, label: t('filterAllStatuses') },
+              { value: 'active', label: t('filterActive') },
+              { value: 'inactive', label: t('filterInactive') },
+            ],
+          },
+        ]}
+      />
+
+      {isLoading || list.data.length > 0 ? (
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Slug</TableHead>
+                  <TableHead>{t('columnName')}</TableHead>
+                  <TableHead>{t('columnLayer')}</TableHead>
+                  <TableHead>{t('columnModule')}</TableHead>
+                  <TableHead>{t('columnParams')}</TableHead>
+                  <TableHead>{t('columnState')}</TableHead>
+                  <TableHead className="text-right">v</TableHead>
+                  <TableHead>{t('columnUpdatedAt')}</TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={9}>{t('loading')}</TableCell>
+                  </TableRow>
+                ) : (
+                  list.data.map((instruction) => (
+                    <TableRow
+                      key={instruction.id}
+                      className="cursor-pointer"
+                      onClick={() => setEditing(instruction)}
+                    >
+                      <TableCell className="max-w-72 font-mono text-xs">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="block truncate">{instruction.slug}</span>
+                          </TooltipTrigger>
+                          <TooltipContent>{instruction.slug}</TooltipContent>
+                        </Tooltip>
+                      </TableCell>
+                      <TableCell className="max-w-60 truncate">{instruction.name}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          {t(`layer_${instruction.layer}` as never)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        {instruction.module_slug ? (
+                          <Badge variant="secondary">{instruction.module_slug}</Badge>
+                        ) : (
+                          '—'
+                        )}
+                      </TableCell>
+                      <TableCell className="font-mono text-xs">
+                        {renderModelParams(instruction)}
+                      </TableCell>
+                      <TableCell>{renderState(instruction)}</TableCell>
+                      <TableCell className="text-right font-mono text-xs">
+                        {instruction.version}
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap text-xs">
+                        {formatDateTime(
+                          new Date(instruction.updated_at),
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          title={t('edit')}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setEditing(instruction);
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          icon={<Sparkles className="h-12 w-12" />}
+          title={t('empty')}
+          description={t('emptyDescription')}
+        />
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={list.total}
+        onPageChange={setPage}
+        onPageSizeChange={(value) => {
+          setPageSize(value);
+          setPage(1);
+        }}
+        pageSizeOptions={pageSizeOptions}
+      />
+
+      <Sheet open={Boolean(editing)} onOpenChange={(open) => !open && setEditing(null)}>
+        <ResizableSheetContent
+          sheetId="core-ai-instruction-form-sheet"
+          defaultWidth={900}
+          minWidth={560}
+          maxWidth={1500}
+          side="right"
+          className="overflow-y-auto sm:max-w-none"
+        >
+          <SheetHeader>
+            <SheetTitle>{editing?.name}</SheetTitle>
+            <SheetDescription className="font-mono text-xs">{editing?.slug}</SheetDescription>
+          </SheetHeader>
+
+          <div className="px-4 pb-6">
+            {editing ? (
+              <AiInstructionForm
+                key={editing.id}
+                instruction={editing}
+                registryEntry={registryBySlug.get(editing.slug)}
+                onSaved={async () => {
+                  await refetch();
+                  setEditing(null);
+                }}
+                onClose={() => setEditing(null)}
+              />
+            ) : null}
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
+    </Page>
+  );
+}