@hed-hog/core 0.0.303 → 0.0.305

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

@@ -53,12 +53,16 @@ import {
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { useDebounce } from '@/hooks/use-debounce';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { Bot, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -88,8 +92,39 @@ type FormValues = {
   instructions?: string;
 };
 
+type AgentDraftPayload = {
+  mode: 'create' | 'edit';
+  agentId: number | null;
+  values: FormValues;
+};
+
+const AI_AGENT_FORM_DRAFT_STORAGE_KEY = 'core-ai-agent-form-draft';
+
+function getErrorMessage(error: unknown, fallback: string) {
+  if (error && typeof error === 'object') {
+    const record = error as {
+      message?: string;
+      response?: {
+        data?: {
+          message?: string;
+          error?: string;
+        };
+      };
+    };
+
+    return (
+      record.response?.data?.message ||
+      record.response?.data?.error ||
+      record.message ||
+      fallback
+    );
+  }
+
+  return fallback;
+}
+
 export default function AiAgentPage() {
-  const { request } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.AiAgentPage');
   const formSchema = z.object({
     slug: z.string().min(2, t('validationSlugMinLength')),
@@ -116,6 +151,62 @@ export default function AiAgentPage() {
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<AgentDraftPayload>({
+    storageKey: AI_AGENT_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      mode: editingAgent ? 'edit' : 'create',
+      agentId: editingAgent?.id ?? null,
+      values: {
+        slug: watchedValues.slug ?? '',
+        provider: watchedValues.provider ?? 'openai',
+        model: watchedValues.model ?? '',
+        instructions: watchedValues.instructions ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.slug ?? '').trim() ||
+      (watchedValues.model ?? '').trim() ||
+      (watchedValues.instructions ?? '').trim() ||
+      watchedValues.provider === 'gemini'
+    ),
+    enabled: isDialogOpen,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
   const { data, isLoading, refetch } = useQuery<PaginatedResponse<Agent>>({
     queryKey: ['ai-agents', page, pageSize, debouncedSearch],
     queryFn: async () => {
@@ -141,23 +232,41 @@ export default function AiAgentPage() {
   };
 
   useEffect(() => {
+    if (!isDialogOpen) {
+      return;
+    }
+
+    const storedDraft = loadDraft();
+    const shouldRestoreEditDraft =
+      Boolean(editingAgent) &&
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.agentId === editingAgent?.id;
+
     if (editingAgent) {
-      form.reset({
-        slug: editingAgent.slug,
-        provider: editingAgent.provider,
-        model: editingAgent.model || '',
-        instructions: editingAgent.instructions || '',
-      });
+      form.reset(
+        shouldRestoreEditDraft
+          ? storedDraft.payload.values
+          : {
+              slug: editingAgent.slug,
+              provider: editingAgent.provider,
+              model: editingAgent.model || '',
+              instructions: editingAgent.instructions || '',
+            }
+      );
       return;
     }
 
-    form.reset({
-      slug: '',
-      provider: 'openai',
-      model: '',
-      instructions: '',
-    });
-  }, [editingAgent, form]);
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : {
+            slug: '',
+            provider: 'openai',
+            model: '',
+            instructions: '',
+          }
+    );
+  }, [editingAgent, form, isDialogOpen, loadDraft]);
 
   const handleOpenCreate = () => {
     setEditingAgent(null);
@@ -197,16 +306,12 @@ export default function AiAgentPage() {
         toast.success(t('toastCreatedSuccess'));
       }
 
+      clearDraft();
       setIsDialogOpen(false);
       setEditingAgent(null);
       await refetch();
-    } catch (error: any) {
-      const message =
-        error?.response?.data?.message ||
-        error?.response?.data?.error ||
-        error?.message ||
-        t('toastSaveError');
-      toast.error(String(message));
+    } catch (error: unknown) {
+      toast.error(String(getErrorMessage(error, t('toastSaveError'))));
     }
   };
 
@@ -223,13 +328,8 @@ export default function AiAgentPage() {
       toast.success(t('toastDeletedSuccess'));
       setAgentToDelete(null);
       await refetch();
-    } catch (error: any) {
-      const message =
-        error?.response?.data?.message ||
-        error?.response?.data?.error ||
-        error?.message ||
-        t('toastDeleteError');
-      toast.error(String(message));
+    } catch (error: unknown) {
+      toast.error(String(getErrorMessage(error, t('toastDeleteError'))));
     }
   };
 
@@ -337,7 +437,15 @@ export default function AiAgentPage() {
         }}
       />
 
-      <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <Sheet
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          setIsDialogOpen(open);
+          if (!open) {
+            setEditingAgent(null);
+          }
+        }}
+      >
         <SheetContent side="right" className="sm:max-w-xl overflow-y-auto">
           <SheetHeader>
             <SheetTitle>
@@ -435,6 +543,12 @@ export default function AiAgentPage() {
                 )}
               />
 
+              {draftStatusContent ? (
+                <p className="text-xs text-muted-foreground">
+                  {draftStatusContent}
+                </p>
+              ) : null}
+
               <SheetFooter className="p-0">
                 <Button type="submit">
                   <Bot className="h-4 w-4" />

package/hedhog/frontend/app/configurations/layout.tsx.ejs

@@ -307,7 +307,7 @@ export default function ConfigurationsLayout({ children }: IProps) {
         }
       />
 
-      <div className="sticky top-0 z-20 -mx-4 mb-6 border-b border-border bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="sticky top-0 z-20 -mx-4 mb-6 border-b border-border bg-background/95 px-4 backdrop-blur supports-backdrop-filter:bg-background/80">
         <div className="min-w-0 overflow-x-hidden">
           <div className="pb-4 pt-2 md:hidden">
             <Select

package/hedhog/frontend/app/dashboard/[slug]/dashboard-content.tsx.ejs

@@ -39,6 +39,13 @@ interface DashboardContentProps {
   dashboardSlug: string;
   showHeader?: boolean;
   headerActionsTargetId?: string;
+  externalHeaderActions?: boolean;
+  requestSaveSignal?: number;
+  onRuntimeActionsStateChange?: (state: {
+    hasChanges: boolean;
+    isSaving: boolean;
+    isAutosavePending: boolean;
+  }) => void;
   openWidgetPickerSignal?: number;
   onOpenWidgetPickerHandled?: () => void;
 }
@@ -154,6 +161,9 @@ export const DashboardContent = ({
   dashboardSlug,
   showHeader = true,
   headerActionsTargetId,
+  externalHeaderActions = false,
+  requestSaveSignal,
+  onRuntimeActionsStateChange,
   openWidgetPickerSignal,
   onOpenWidgetPickerHandled,
 }: DashboardContentProps) => {
@@ -180,6 +190,7 @@ export const DashboardContent = ({
     useState<HTMLElement | null>(null);
   const lastSavedLayoutSignatureRef = useRef('[]');
   const latestLayoutRef = useRef(layout);
+  const lastHandledSaveSignalRef = useRef<number | undefined>(undefined);
 
   const debouncedComponentsSearch = useDebounce(componentsSearchQuery, 400);
   const debouncedLayout = useDebounce(layout, LAYOUT_AUTOSAVE_DELAY);
@@ -316,6 +327,14 @@ export const DashboardContent = ({
   const isAutosavePending =
     hasChanges && !isSaving && layoutSignature !== debouncedLayoutSignature;
 
+  useEffect(() => {
+    onRuntimeActionsStateChange?.({
+      hasChanges,
+      isSaving,
+      isAutosavePending,
+    });
+  }, [hasChanges, isAutosavePending, isSaving, onRuntimeActionsStateChange]);
+
   useEffect(() => {
     if (!isAutosavePending && !isSaving) {
       stopProgress(150);
@@ -394,6 +413,22 @@ export const DashboardContent = ({
     [dashboardSlug, isSaving, layout, request]
   );
 
+  useEffect(() => {
+    if (!requestSaveSignal) {
+      return;
+    }
+
+    if (lastHandledSaveSignalRef.current === requestSaveSignal) {
+      return;
+    }
+
+    lastHandledSaveSignalRef.current = requestSaveSignal;
+
+    if (!isSaving && hasChanges) {
+      void handleSaveLayout();
+    }
+  }, [handleSaveLayout, hasChanges, isSaving, requestSaveSignal]);
+
   useEffect(() => {
     if (!hasChanges || isSaving) {
       return;
@@ -646,7 +681,8 @@ export const DashboardContent = ({
     </>
   );
 
-  const hasExternalActionTarget = !showHeader && Boolean(headerActionsTarget);
+  const hasExternalActionTarget =
+    !externalHeaderActions && !showHeader && Boolean(headerActionsTarget);
 
   return (
     <>
@@ -678,7 +714,7 @@ export const DashboardContent = ({
             </div>
           </div>
         </header>
-      ) : !hasExternalActionTarget ? (
+      ) : !externalHeaderActions && !hasExternalActionTarget ? (
         <div className="flex w-full items-center justify-end gap-2 px-4 pt-2">
           {dashboardActions}
         </div>
@@ -686,6 +722,35 @@ export const DashboardContent = ({
       {hasExternalActionTarget && headerActionsTarget
         ? createPortal(dashboardActions, headerActionsTarget)
         : null}
+      {externalHeaderActions ? (
+        <AddWidgetSelectorDialog
+          availableComponents={availableComponents}
+          totalItems={totalAvailableComponents}
+          currentPage={availableComponentsResponse?.page ?? componentsPage}
+          pageSize={availableComponentsResponse?.pageSize ?? componentsPageSize}
+          isLoading={isLoadingComponents}
+          searchQuery={componentsSearchQuery}
+          onSearchQueryChange={(value) => {
+            setComponentsSearchQuery(value);
+            setComponentsPage(1);
+          }}
+          moduleFilter={componentsModuleFilter}
+          modules={availableComponentModules}
+          onModuleFilterChange={(value) => {
+            setComponentsModuleFilter(value);
+            setComponentsPage(1);
+          }}
+          onPageChange={setComponentsPage}
+          onPageSizeChange={(nextPageSize) => {
+            setComponentsPageSize(nextPageSize);
+            setComponentsPage(1);
+          }}
+          onAdd={handleAddWidget}
+          hideTrigger
+          openSignal={openWidgetPickerSignal}
+          onOpenSignalHandled={onOpenWidgetPickerHandled}
+        />
+      ) : null}
       <div className="flex flex-1 flex-col gap-4 overflow-auto pt-0">
         {widgets.length > 0 ? (
           <div className="min-h-105 sm:min-h-130 lg:min-h-150">

package/hedhog/frontend/app/dashboard/components/add-widget-selector-dialog.tsx.ejs

@@ -64,6 +64,7 @@ interface AddWidgetSelectorDialogProps {
   onAdd: (slugs: string[]) => Promise<void> | void;
   buttonLabel?: string;
   buttonVariant?: 'default' | 'outline';
+  hideTrigger?: boolean;
   openSignal?: number;
   onOpenSignalHandled?: () => void;
 }
@@ -153,6 +154,7 @@ export function AddWidgetSelectorDialog({
   onAdd,
   buttonLabel,
   buttonVariant = 'outline',
+  hideTrigger = false,
   openSignal,
   onOpenSignalHandled,
 }: AddWidgetSelectorDialogProps) {
@@ -210,15 +212,17 @@ export function AddWidgetSelectorDialog({
 
   return (
     <>
-      <Button
-        size="sm"
-        variant={buttonVariant}
-        className="cursor-pointer gap-2"
-        onClick={() => setOpenWidgets(true)}
-      >
-        <IconPlus className="size-4" />
-        {buttonLabel || tMenu('addWidgets')}
-      </Button>
+      {!hideTrigger ? (
+        <Button
+          size="sm"
+          variant={buttonVariant}
+          className="cursor-pointer gap-2"
+          onClick={() => setOpenWidgets(true)}
+        >
+          <IconPlus className="size-4" />
+          {buttonLabel || tMenu('addWidgets')}
+        </Button>
+      ) : null}
 
       <Sheet
         open={openWidgets}