@hed-hog/core 0.0.387 → 0.0.393

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

@@ -0,0 +1,150 @@
+'use client';
+
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Switch } from '@/components/ui/switch';
+import { useApp } from '@hed-hog/next-app-provider';
+import { AlertTriangle, Play } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+
+import type { VariableSpec } from '../_lib/prompt-template';
+import { getErrorMessage, type AiInstructionPreview } from '../_lib/types';
+
+type AiInstructionPreviewPanelProps = {
+  /** The unsaved draft currently in the textarea. */
+  content: string;
+  slug: string;
+  variables: Record<string, VariableSpec>;
+};
+
+export function AiInstructionPreviewPanel({
+  content,
+  slug,
+  variables,
+}: AiInstructionPreviewPanelProps) {
+  const { request } = useApp();
+  const t = useTranslations('core.AiInstructionPage');
+
+  const [values, setValues] = useState<Record<string, string | boolean>>({});
+  const [preview, setPreview] = useState<AiInstructionPreview | null>(null);
+  const [isRendering, setIsRendering] = useState(false);
+
+  const entries = useMemo(() => Object.entries(variables), [variables]);
+
+  // Prefill from the declared samples so "Render" is useful on first click.
+  useEffect(() => {
+    setValues((current) => {
+      const next: Record<string, string | boolean> = { ...current };
+      for (const [name, spec] of entries) {
+        if (next[name] !== undefined) continue;
+        next[name] = spec.type === 'boolean' ? true : (spec.sample ?? '');
+      }
+      return next;
+    });
+  }, [entries]);
+
+  const handleRender = async () => {
+    setIsRendering(true);
+    try {
+      const response = await request<AiInstructionPreview>({
+        url: '/ai-instruction/preview',
+        method: 'POST',
+        data: {
+          slug,
+          content,
+          variables_schema: { version: 1, variables },
+          variables: values,
+        },
+      });
+      setPreview(response.data);
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('previewError')));
+    } finally {
+      setIsRendering(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {entries.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{t('previewNoVariables')}</p>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {entries.map(([name, spec]) => (
+            <div key={name} className="space-y-1">
+              <Label className="font-mono text-xs">
+                {name}
+                {spec.required ? <span className="text-destructive"> *</span> : null}
+              </Label>
+
+              {spec.type === 'boolean' ? (
+                <div className="flex h-9 items-center">
+                  <Switch
+                    checked={Boolean(values[name])}
+                    onCheckedChange={(checked) =>
+                      setValues((current) => ({ ...current, [name]: checked }))
+                    }
+                  />
+                </div>
+              ) : (
+                <Input
+                  type={spec.type === 'number' ? 'number' : 'text'}
+                  value={String(values[name] ?? '')}
+                  placeholder={spec.sample || ''}
+                  onChange={(event) =>
+                    setValues((current) => ({ ...current, [name]: event.target.value }))
+                  }
+                />
+              )}
+
+              {spec.description ? (
+                <p className="text-xs text-muted-foreground">{spec.description}</p>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <Button type="button" onClick={handleRender} disabled={isRendering}>
+        <Play className="h-4 w-4" />
+        {isRendering ? t('previewRendering') : t('previewRender')}
+      </Button>
+
+      {preview ? (
+        <div className="space-y-3">
+          {preview.render_error ? (
+            <Alert variant="destructive">
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>{preview.render_error}</AlertDescription>
+            </Alert>
+          ) : null}
+
+          {preview.warnings.map((warning) => (
+            <Alert key={warning}>
+              <AlertTriangle className="h-4 w-4" />
+              <AlertDescription>{warning}</AlertDescription>
+            </Alert>
+          ))}
+
+          <p className="text-xs text-muted-foreground">
+            {t('charCountWithTokens', {
+              chars: preview.char_count,
+              tokens: preview.estimated_tokens,
+            })}
+          </p>
+
+          <ScrollArea className="h-80 rounded-md border bg-muted/30">
+            <pre className="whitespace-pre-wrap p-3 font-mono text-xs leading-relaxed">
+              {preview.rendered}
+            </pre>
+          </ScrollArea>
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,199 @@
+'use client';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatDateTime } from '@/lib/format-date';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { History, RotateCcw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { getErrorMessage, type AiInstruction, type AiInstructionVersion } from '../_lib/types';
+import { PromptDiff } from './prompt-diff';
+
+type AiInstructionVersionsProps = {
+  instruction: AiInstruction;
+  onRestored: () => void;
+};
+
+export function AiInstructionVersions({
+  instruction,
+  onRestored,
+}: AiInstructionVersionsProps) {
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const t = useTranslations('core.AiInstructionPage');
+
+  const [selected, setSelected] = useState<AiInstructionVersion | null>(null);
+  const [versionToRestore, setVersionToRestore] = useState<AiInstructionVersion | null>(null);
+  const [isRestoring, setIsRestoring] = useState(false);
+
+  const { data, isLoading, refetch } = useQuery<AiInstructionVersion[]>({
+    queryKey: ['ai-instruction-versions', instruction.id, instruction.version],
+    queryFn: async () => {
+      const response = await request<AiInstructionVersion[]>({
+        url: `/ai-instruction/${instruction.id}/versions`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const versions = data ?? [];
+
+  const handleRestore = async () => {
+    if (!versionToRestore) return;
+
+    setIsRestoring(true);
+    try {
+      await request({
+        url: `/ai-instruction/${instruction.id}/versions/${versionToRestore.version}/restore`,
+        method: 'POST',
+      });
+      toast.success(t('restoreSuccess', { version: versionToRestore.version }));
+      setVersionToRestore(null);
+      setSelected(null);
+      await refetch();
+      onRestored();
+    } catch (error) {
+      toast.error(getErrorMessage(error, t('restoreError')));
+    } finally {
+      setIsRestoring(false);
+    }
+  };
+
+  if (isLoading) {
+    return <p className="text-sm text-muted-foreground">{t('loading')}</p>;
+  }
+
+  if (!versions.length) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-8 text-muted-foreground">
+        <History className="h-8 w-8" />
+        <p className="text-sm">{t('versionsEmpty')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-14">v</TableHead>
+            <TableHead>{t('columnVersionDate')}</TableHead>
+            <TableHead>{t('columnVersionAuthor')}</TableHead>
+            <TableHead>{t('columnVersionNote')}</TableHead>
+            <TableHead className="text-right">{t('columnVersionSize')}</TableHead>
+            <TableHead className="w-12" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {versions.map((version) => {
+            const isCurrent = version.version === instruction.version;
+
+            return (
+              <TableRow
+                key={version.id}
+                onClick={() => setSelected(version)}
+                className={cn(
+                  'cursor-pointer',
+                  selected?.id === version.id && 'bg-muted/60'
+                )}
+              >
+                <TableCell className="font-mono">
+                  {version.version}
+                  {isCurrent ? (
+                    <Badge variant="secondary" className="ml-1">
+                      {t('versionCurrent')}
+                    </Badge>
+                  ) : null}
+                </TableCell>
+                <TableCell className="whitespace-nowrap">
+                  {formatDateTime(
+                    new Date(version.created_at),
+                    getSettingValue,
+                    currentLocaleCode
+                  )}
+                </TableCell>
+                <TableCell>{version.created_by_name || '—'}</TableCell>
+                <TableCell className="max-w-60 truncate" title={version.change_note || ''}>
+                  {version.change_note || '—'}
+                </TableCell>
+                <TableCell className="text-right font-mono text-xs">
+                  {version.content.length}
+                </TableCell>
+                <TableCell>
+                  {isCurrent ? null : (
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      title={t('restoreVersion')}
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        setVersionToRestore(version);
+                      }}
+                    >
+                      <RotateCcw className="h-4 w-4" />
+                    </Button>
+                  )}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+
+      {selected ? (
+        <PromptDiff
+          before={selected.content}
+          after={instruction.content}
+          beforeLabel={t('diffVersionLabel', { version: selected.version })}
+          afterLabel={t('diffCurrentLabel')}
+          emptyLabel={t('diffIdentical')}
+        />
+      ) : (
+        <p className="text-sm text-muted-foreground">{t('versionsSelectHint')}</p>
+      )}
+
+      <AlertDialog
+        open={Boolean(versionToRestore)}
+        onOpenChange={(open) => !open && setVersionToRestore(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('restoreDialogTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('restoreDialogDescription', { version: versionToRestore?.version ?? 0 })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRestoring}>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleRestore} disabled={isRestoring}>
+              {isRestoring ? t('restoring') : t('restoreVersion')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/hedhog/frontend/app/ai_instruction/_components/prompt-diff.tsx.ejs

@@ -0,0 +1,63 @@
+'use client';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+import { useMemo } from 'react';
+
+import { diffLines, diffStats } from '../_lib/line-diff';
+
+type PromptDiffProps = {
+  before: string;
+  after: string;
+  beforeLabel: string;
+  afterLabel: string;
+  emptyLabel: string;
+};
+
+export function PromptDiff({
+  before,
+  after,
+  beforeLabel,
+  afterLabel,
+  emptyLabel,
+}: PromptDiffProps) {
+  const lines = useMemo(() => diffLines(before, after), [before, after]);
+  const stats = useMemo(() => diffStats(lines), [lines]);
+
+  if (!stats.added && !stats.removed) {
+    return <p className="text-sm text-muted-foreground">{emptyLabel}</p>;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+        <span className="text-red-600 dark:text-red-400">
+          − {beforeLabel} ({stats.removed})
+        </span>
+        <span className="text-green-600 dark:text-green-400">
+          + {afterLabel} ({stats.added})
+        </span>
+      </div>
+
+      <ScrollArea className="h-80 rounded-md border">
+        <pre className="p-3 font-mono text-xs leading-relaxed">
+          {lines.map((line, index) => (
+            <div
+              key={`${line.type}-${index}`}
+              className={cn(
+                'whitespace-pre-wrap px-1',
+                line.type === 'added' && 'bg-green-500/10 text-green-700 dark:text-green-300',
+                line.type === 'removed' && 'bg-red-500/10 text-red-700 dark:text-red-300'
+              )}
+            >
+              <span className="select-none opacity-60">
+                {line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' '}{' '}
+              </span>
+              {line.text || ' '}
+            </div>
+          ))}
+        </pre>
+      </ScrollArea>
+    </div>
+  );
+}

package/hedhog/frontend/app/ai_instruction/_lib/line-diff.spec.ts.ejs

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+
+import { diffLines, diffStats } from './line-diff';
+
+describe('diffLines', () => {
+  it('marca tudo como contexto quando os textos são iguais', () => {
+    const result = diffLines('a\nb', 'a\nb');
+    expect(result.map((l) => l.type)).toEqual(['context', 'context']);
+  });
+
+  it('detecta linha adicionada', () => {
+    const result = diffLines('a\nc', 'a\nb\nc');
+    expect(result).toEqual([
+      { type: 'context', text: 'a', leftNo: 1, rightNo: 1 },
+      { type: 'added', text: 'b', rightNo: 2 },
+      { type: 'context', text: 'c', leftNo: 2, rightNo: 3 },
+    ]);
+  });
+
+  it('detecta linha removida', () => {
+    const result = diffLines('a\nb\nc', 'a\nc');
+    expect(result).toEqual([
+      { type: 'context', text: 'a', leftNo: 1, rightNo: 1 },
+      { type: 'removed', text: 'b', leftNo: 2 },
+      // Os numeros de linha sao independentes por lado: "c" e a 3a linha do
+      // texto antigo e a 2a do novo.
+      { type: 'context', text: 'c', leftNo: 3, rightNo: 2 },
+    ]);
+  });
+
+  it('representa uma linha alterada como remoção + adição', () => {
+    const result = diffLines('antes', 'depois');
+    expect(result.map((l) => [l.type, l.text])).toEqual([
+      ['removed', 'antes'],
+      ['added', 'depois'],
+    ]);
+  });
+
+  it('lida com texto vazio nos dois lados', () => {
+    expect(diffLines('', '')).toEqual([{ type: 'context', text: '', leftNo: 1, rightNo: 1 }]);
+  });
+
+  it('preserva linhas em branco no meio', () => {
+    const result = diffLines('a\n\nb', 'a\n\nb\nc');
+    expect(result.map((l) => l.type)).toEqual(['context', 'context', 'context', 'added']);
+  });
+
+  it('escolhe o menor conjunto de mudanças em blocos deslocados', () => {
+    const result = diffLines('1\n2\n3\n4', '1\n2\nX\n3\n4');
+    expect(diffStats(result)).toEqual({ added: 1, removed: 0 });
+  });
+});
+
+describe('diffStats', () => {
+  it('conta adições e remoções', () => {
+    const result = diffLines('a\nb', 'a\nc\nd');
+    expect(diffStats(result)).toEqual({ added: 2, removed: 1 });
+  });
+});

package/hedhog/frontend/app/ai_instruction/_lib/line-diff.ts.ejs

@@ -0,0 +1,72 @@
+/**
+ * Line diff for the prompt version history.
+ *
+ * Hand-rolled instead of adding a dependency: prompts are at most a few dozen
+ * lines, so a classic LCS is more than fast enough and this is the only place in
+ * the admin that needs a diff.
+ */
+
+export type DiffLine = {
+  type: 'context' | 'added' | 'removed';
+  text: string;
+  leftNo?: number;
+  rightNo?: number;
+};
+
+export function diffLines(before: string, after: string): DiffLine[] {
+  const left = before.split('\n');
+  const right = after.split('\n');
+
+  // A flat table keeps every access in bounds by construction, which matters
+  // with noUncheckedIndexedAccess on.
+  // lcs(i, j) = length of the longest common subsequence of left[i:] / right[j:]
+  const width = right.length + 1;
+  const lcs = new Int32Array((left.length + 1) * width);
+  const at = (i: number, j: number) => lcs[i * width + j] ?? 0;
+
+  for (let i = left.length - 1; i >= 0; i -= 1) {
+    for (let j = right.length - 1; j >= 0; j -= 1) {
+      lcs[i * width + j] =
+        left[i] === right[j] ? at(i + 1, j + 1) + 1 : Math.max(at(i + 1, j), at(i, j + 1));
+    }
+  }
+
+  const result: DiffLine[] = [];
+  let i = 0;
+  let j = 0;
+
+  while (i < left.length && j < right.length) {
+    const leftLine = left[i] ?? '';
+    const rightLine = right[j] ?? '';
+
+    if (leftLine === rightLine) {
+      result.push({ type: 'context', text: leftLine, leftNo: i + 1, rightNo: j + 1 });
+      i += 1;
+      j += 1;
+    } else if (at(i + 1, j) >= at(i, j + 1)) {
+      result.push({ type: 'removed', text: leftLine, leftNo: i + 1 });
+      i += 1;
+    } else {
+      result.push({ type: 'added', text: rightLine, rightNo: j + 1 });
+      j += 1;
+    }
+  }
+
+  while (i < left.length) {
+    result.push({ type: 'removed', text: left[i] ?? '', leftNo: i + 1 });
+    i += 1;
+  }
+  while (j < right.length) {
+    result.push({ type: 'added', text: right[j] ?? '', rightNo: j + 1 });
+    j += 1;
+  }
+
+  return result;
+}
+
+export function diffStats(lines: DiffLine[]): { added: number; removed: number } {
+  return {
+    added: lines.filter((line) => line.type === 'added').length,
+    removed: lines.filter((line) => line.type === 'removed').length,
+  };
+}