@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/mail/app/components/settings/AiFilterSection.tsx

@@ -0,0 +1,401 @@
+import { useT } from "@agent-native/core/client/i18n";
+import type { AiFilterDecision, AiFilterTarget } from "@shared/ai-filter";
+import { AI_FILTER_LABEL, AI_FILTER_RULE_NAME } from "@shared/ai-filter";
+import type { AutomationRule } from "@shared/types";
+import {
+  IconArrowUpRight,
+  IconLoader2,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import { AiFilterDialog } from "@/components/email/AiFilterDialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  latestAiFilterDecisions,
+  useAiFilter,
+  useManageAiFilter,
+} from "@/hooks/use-ai-filter";
+import {
+  useAutomations,
+  useCreateAutomation,
+  useDeleteAutomation,
+  useUpdateAutomation,
+} from "@/hooks/use-automations";
+import { cn } from "@/lib/utils";
+
+const THRESHOLD_OPTIONS = [0.85, 0.92, 0.97];
+
+function decisionTarget(decision: AiFilterDecision): AiFilterTarget {
+  return {
+    id: decision.messageId,
+    threadId: decision.threadId,
+    accountEmail: decision.accountEmail,
+    sender: decision.sender,
+    subject: decision.subject,
+  };
+}
+
+function formatDecisionDate(timestamp: number): string {
+  return new Date(timestamp).toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+function InstructionRow({ rule }: { rule: AutomationRule }) {
+  const t = useT();
+  const update = useUpdateAutomation();
+  const remove = useDeleteAutomation();
+
+  return (
+    <div className="group flex items-start gap-3 border-b border-border/40 px-1 py-3 last:border-0">
+      <Switch
+        checked={rule.enabled}
+        onCheckedChange={(enabled) => update.mutate({ id: rule.id, enabled })}
+        className="mt-0.5 scale-90"
+        aria-label={t("mail.aiFilter.toggleInstruction", {
+          instruction: rule.condition,
+        })}
+      />
+      <p
+        className={cn(
+          "min-w-0 flex-1 text-sm leading-5",
+          rule.enabled ? "text-foreground" : "text-muted-foreground/50",
+        )}
+      >
+        {rule.condition}
+      </p>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
+            onClick={() => remove.mutate(rule.id)}
+            disabled={remove.isPending}
+            aria-label={t("mail.aiFilter.deleteInstruction")}
+          >
+            {remove.isPending ? (
+              <IconLoader2 className="size-3.5 animate-spin" />
+            ) : (
+              <IconTrash className="size-3.5" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{t("mail.aiFilter.deleteInstruction")}</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
+
+function DecisionRow({
+  decision,
+  onReview,
+}: {
+  decision: AiFilterDecision;
+  onReview: (action: "filter" | "keep", decision: AiFilterDecision) => void;
+}) {
+  const t = useT();
+  const isSuggested = decision.disposition === "suggested";
+  const isFiltered = decision.disposition === "filtered";
+
+  return (
+    <div className="flex items-start gap-3 border-b border-border/40 px-1 py-3 last:border-0">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-[13px] font-medium text-foreground">
+            {decision.sender || t("mail.aiFilter.unknownSender")}
+          </span>
+          <span className="shrink-0 text-[11px] tabular-nums text-muted-foreground/60">
+            {formatDecisionDate(decision.createdAt)}
+          </span>
+        </div>
+        <p className="truncate text-[12px] text-muted-foreground">
+          {decision.subject || t("mail.aiFilter.noSubject")}
+        </p>
+        {decision.reason && (
+          <p
+            className="mt-1 line-clamp-1 text-[11px] leading-4 text-muted-foreground/70"
+            title={decision.reason}
+          >
+            {decision.reason}
+          </p>
+        )}
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {isSuggested && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              onClick={() => onReview("keep", decision)}
+            >
+              {t("mail.aiFilter.keepButton")}
+            </Button>
+            <Button
+              size="sm"
+              className="h-7 px-2 text-[11px]"
+              onClick={() => onReview("filter", decision)}
+            >
+              {t("mail.aiFilter.filterButton")}
+            </Button>
+          </>
+        )}
+        {isFiltered && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 px-2 text-[11px]"
+            onClick={() => onReview("keep", decision)}
+          >
+            {t("mail.aiFilter.keepButton")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function AiFilterSection() {
+  const t = useT();
+  const { data: state, isLoading } = useAiFilter();
+  const { data: rules = [] } = useAutomations();
+  const createRule = useCreateAutomation();
+  const manage = useManageAiFilter();
+  const [instruction, setInstruction] = useState("");
+  const [review, setReview] = useState<{
+    action: "filter" | "keep";
+    decision: AiFilterDecision;
+  } | null>(null);
+
+  const instructions = useMemo(
+    () =>
+      rules.filter(
+        (rule) =>
+          rule.kind === "ai-filter" && rule.name !== AI_FILTER_RULE_NAME,
+      ),
+    [rules],
+  );
+  const decisions = latestAiFilterDecisions(state).slice(0, 8);
+  const updateSettings = (patch: {
+    enabled?: boolean;
+    autoFilter?: boolean;
+    autoFilterThreshold?: number;
+  }) => {
+    manage.mutate(
+      { mode: "settings", settings: patch },
+      {
+        onError: (error) =>
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : t("mail.aiFilter.settingsFailed"),
+          ),
+      },
+    );
+  };
+
+  const addInstruction = () => {
+    const condition = instruction.trim();
+    if (!condition || createRule.isPending) return;
+    createRule.mutate(
+      {
+        name: `AI filter: ${condition.slice(0, 72)}`,
+        condition,
+        actions: [
+          { type: "label", labelName: AI_FILTER_LABEL },
+          { type: "archive" },
+        ],
+        kind: "ai-filter",
+      },
+      {
+        onSuccess: () => setInstruction(""),
+        onError: (error) =>
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : t("mail.aiFilter.instructionFailed"),
+          ),
+      },
+    );
+  };
+
+  if (isLoading || !state) {
+    return (
+      <div className="max-w-2xl space-y-3">
+        <Skeleton className="h-20 w-full" />
+        <Skeleton className="h-36 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="max-w-2xl space-y-5">
+        <div className="flex items-center justify-between border-b border-border/50 pb-3">
+          <h2 className="text-[16px] font-semibold text-foreground">
+            {t("mail.aiFilter.title")}
+          </h2>
+          <Switch
+            checked={state.enabled}
+            onCheckedChange={(enabled) => updateSettings({ enabled })}
+            aria-label={t("mail.aiFilter.toggle")}
+          />
+        </div>
+
+        <div className="rounded-lg border border-border/50 bg-card/50">
+          <div className="flex items-center justify-between gap-3 px-4 py-3">
+            <p className="text-[13px] font-medium text-foreground">
+              {t("mail.aiFilter.autoFilterTitle")}
+            </p>
+            <div className="flex items-center gap-2">
+              <Select
+                value={String(state.autoFilterThreshold)}
+                onValueChange={(value) =>
+                  updateSettings({
+                    autoFilterThreshold: Number(value),
+                  })
+                }
+                disabled={!state.autoFilter || manage.isPending}
+              >
+                <SelectTrigger
+                  className="h-8 w-[76px] text-xs"
+                  aria-label={t("mail.aiFilter.thresholdLabel")}
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {THRESHOLD_OPTIONS.map((threshold) => (
+                    <SelectItem key={threshold} value={String(threshold)}>
+                      {Math.round(threshold * 100)}%
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Switch
+                checked={state.autoFilter}
+                onCheckedChange={(autoFilter) => updateSettings({ autoFilter })}
+                aria-label={t("mail.aiFilter.autoFilterToggle")}
+              />
+            </div>
+          </div>
+          <div className="flex items-center justify-between border-t border-border/40 px-4 py-3">
+            <div className="flex min-w-0 items-center gap-2 text-[12px] text-muted-foreground">
+              <span className="shrink-0 font-medium text-foreground">
+                {t("mail.aiFilter.labelName")}
+              </span>
+              <code className="truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                {AI_FILTER_LABEL}
+              </code>
+            </div>
+            <Link
+              to={`/all?label=${encodeURIComponent(AI_FILTER_LABEL)}`}
+              className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
+            >
+              {t("mail.aiFilter.reviewLabel")}
+              <IconArrowUpRight className="size-3.5" />
+            </Link>
+          </div>
+        </div>
+
+        <section>
+          <h3 className="mb-2 text-[13px] font-semibold text-foreground">
+            {t("mail.aiFilter.instructionsTitle")}
+          </h3>
+          <div className="rounded-lg border border-border/50 bg-card/50 px-3">
+            <div className="flex items-end gap-2 border-b border-border/40 py-3">
+              <Input
+                value={instruction}
+                onChange={(event) => setInstruction(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") addInstruction();
+                }}
+                placeholder={t("mail.aiFilter.instructionPlaceholder")}
+                className="h-8 flex-1 text-xs"
+                maxLength={500}
+              />
+              <Button
+                size="sm"
+                className="h-8 shrink-0 px-2.5 text-xs"
+                onClick={addInstruction}
+                disabled={!instruction.trim() || createRule.isPending}
+              >
+                {createRule.isPending ? (
+                  <IconLoader2 className="size-3.5 animate-spin" />
+                ) : (
+                  <IconPlus className="size-3.5" />
+                )}
+                {t("mail.aiFilter.addInstruction")}
+              </Button>
+            </div>
+            {instructions.length > 0 &&
+              instructions.map((rule) => (
+                <InstructionRow key={rule.id} rule={rule} />
+              ))}
+          </div>
+        </section>
+
+        <section>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-[13px] font-semibold text-foreground">
+              {t("mail.aiFilter.activityTitle")}
+            </h3>
+            <Link
+              to={`/all?label=${encodeURIComponent(AI_FILTER_LABEL)}`}
+              className="text-[11px] font-medium text-primary hover:underline"
+            >
+              {t("mail.aiFilter.viewAll")}
+            </Link>
+          </div>
+          <div className="rounded-lg border border-border/50 bg-card/50 px-3">
+            {decisions.length === 0 ? (
+              <div className="py-6 text-center text-xs text-muted-foreground">
+                {t("mail.aiFilter.noActivity")}
+              </div>
+            ) : (
+              decisions.map((decision) => (
+                <DecisionRow
+                  key={decision.id}
+                  decision={decision}
+                  onReview={(action, next) =>
+                    setReview({ action, decision: next })
+                  }
+                />
+              ))
+            )}
+          </div>
+        </section>
+      </div>
+
+      {review && (
+        <AiFilterDialog
+          open
+          onOpenChange={(open) => !open && setReview(null)}
+          action={review.action}
+          targets={[decisionTarget(review.decision)]}
+        />
+      )}
+    </>
+  );
+}

package/corpus/templates/mail/app/hooks/use-ai-filter.ts

@@ -0,0 +1,48 @@
+import { callAction, useChangeVersions } from "@agent-native/core/client/hooks";
+import type {
+  AiFilterDecision,
+  AiFilterState,
+  AiFilterTarget,
+} from "@shared/ai-filter";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export function useAiFilter() {
+  const changeVersion = useChangeVersions(["settings", "action"]);
+  return useQuery<AiFilterState>({
+    queryKey: ["ai-filter", changeVersion],
+    queryFn: () => callAction("get-ai-filter", {}, { method: "GET" }),
+    staleTime: 30_000,
+    placeholderData: (previous) => previous,
+  });
+}
+
+type AiFilterSettingsPatch = Partial<
+  Pick<
+    AiFilterState,
+    "enabled" | "autoFilter" | "autoFilterThreshold" | "suggestionThreshold"
+  >
+>;
+
+export function useManageAiFilter() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (input: {
+      mode: "filter" | "keep" | "settings";
+      targets?: AiFilterTarget[];
+      comment?: string;
+      settings?: AiFilterSettingsPatch;
+    }) => callAction("apply-ai-filter", input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["ai-filter"] });
+      void queryClient.invalidateQueries({ queryKey: ["automations"] });
+      void queryClient.invalidateQueries({ queryKey: ["emails"] });
+      void queryClient.invalidateQueries({ queryKey: ["labels"] });
+    },
+  });
+}
+
+export function latestAiFilterDecisions(
+  state: AiFilterState | undefined,
+): AiFilterDecision[] {
+  return state ? [...state.decisions].reverse() : [];
+}

package/corpus/templates/mail/app/hooks/use-automations.ts

@@ -36,6 +36,7 @@ export function useCreateAutomation() {
       condition: string;
       actions: AutomationAction[];
       domain?: AutomationRule["domain"];
+      kind?: AutomationRule["kind"];
     }) => callAction("create-automation", data) as Promise<AutomationRule>,
     onSuccess: () => qc.invalidateQueries({ queryKey: ["automations"] }),
   });

package/corpus/templates/mail/app/hooks/use-emails.ts

@@ -1468,10 +1468,18 @@ export function useContacts() {
 
 export const EMPTY_LABELS: Label[] = [];
 
-export function useLabels() {
+export function useLabels(accountEmails?: readonly string[]) {
+  const accountFilter = accountEmails?.length
+    ? [...new Set(accountEmails.map((email) => email.toLowerCase()))].sort()
+    : undefined;
   return useQuery<Label[]>({
-    queryKey: ["labels"],
-    queryFn: () => apiFetch("/api/labels"),
+    queryKey: ["labels", accountFilter],
+    queryFn: () => {
+      const params = accountFilter?.length
+        ? `?accountEmails=${encodeURIComponent(accountFilter.join(","))}`
+        : "";
+      return apiFetch(`/api/labels${params}`);
+    },
     // A failed background refresh must not erase the last complete label map.
     // The layout still surfaces isError so an initial failure has an explicit
     // retry path instead of looking like an empty mailbox.

package/corpus/templates/mail/app/i18n/en-US.ts

@@ -379,6 +379,60 @@ const messages = {
       newFilter: "New filter",
       noFilters: "No Gmail filters yet.",
     },
+    aiFilter: {
+      title: "AI filter",
+      subtitle: "A reversible label that learns from your decisions.",
+      lunaBadge: "Luna when available",
+      toggle: "Toggle AI filter",
+      autoFilterTitle: "Auto-filter high confidence",
+      autoFilterDescription:
+        "Move only clear matches out of Inbox; review the rest here.",
+      autoFilterToggle: "Auto-filter high-confidence mail",
+      thresholdLabel: "Auto-filter confidence threshold",
+      labelName: "Gmail label",
+      labelHelp:
+        "agent-native-filtered stays visible in Gmail and other clients. It is not Gmail Spam.",
+      reviewLabel: "Review filtered",
+      instructionsTitle: "Instructions",
+      instructionCount: "{{count}} instruction(s)",
+      instructionPlaceholder:
+        "e.g. Subjects like “question for you, Steve” are unwanted",
+      addInstruction: "Add",
+      noInstructions: "No instructions yet.",
+      instructionExample: "Try “all political campaign emails are unwanted.”",
+      toggleInstruction: "Toggle instruction: {{instruction}}",
+      deleteInstruction: "Delete instruction",
+      activityTitle: "Recent activity",
+      suggestionCount: "{{count}} to review",
+      viewAll: "View all",
+      noActivity: "No AI filter activity yet.",
+      unknownSender: "Unknown sender",
+      noSubject: "(no subject)",
+      filterTitle: "Filter with AI",
+      keepTitle: "Keep in inbox",
+      filterDescription:
+        "This archives {{count}} conversation(s) and adds the agent-native-filtered label.",
+      keepDescription:
+        "This restores {{count}} conversation(s) to Inbox and teaches the filter.",
+      labelNote:
+        "Adds the agent-native-filtered label and archives the conversation. You can undo it anytime.",
+      learningNote:
+        "Keeps the message in Inbox and teaches the filter not to repeat the mistake.",
+      rememberLabel: "Remember for future mail (optional)",
+      correctLabel: "What should it learn? (optional)",
+      rememberPlaceholder:
+        "e.g. Messages like this from political campaigns are unwanted",
+      correctPlaceholder:
+        "e.g. This sender is a customer; keep future messages in Inbox",
+      commentHint: "Your note becomes an editable rule or learning example.",
+      filterButton: "Filter",
+      keepButton: "Keep",
+      filteredToast: "Filtered {{count}} conversation(s).",
+      keptToast: "Kept {{count}} conversation(s) in Inbox.",
+      actionFailed: "Could not update the AI filter.",
+      settingsFailed: "Could not save AI filter settings.",
+      instructionFailed: "Could not save AI filter instruction.",
+    },
     draftQueue: {
       title: "Draft queue",
       queueDraft: "Queue a draft",
@@ -556,6 +610,7 @@ const messages = {
     deleteSnippetDescription:
       'Delete snippet "{{name}}"? This cannot be undone.',
     automations: "Automations",
+    aiFilter: "AI filter",
     gmailFilters: "Gmail Filters",
     aliases: "Aliases",
     tracking: "Tracking",

package/corpus/templates/mail/app/lib/automation-visibility.ts

@@ -0,0 +1,17 @@
+export interface MailFrameworkAutomation {
+  appId?: string;
+  domain?: string;
+  event?: string;
+  triggerType?: string;
+}
+
+export function isMailFrameworkAutomation(
+  automation: MailFrameworkAutomation,
+): boolean {
+  return (
+    automation.appId === "mail" ||
+    automation.domain === "mail" ||
+    (automation.triggerType === "event" &&
+      automation.event?.startsWith("mail.") === true)
+  );
+}

package/corpus/templates/mail/app/pages/InboxPage.tsx

@@ -388,7 +388,9 @@ export function InboxPage() {
     !!activeLabel &&
     view === "inbox" &&
     mailLabelsInclude(triageLabels, activeLabel);
-  const clientSliceTab = isPinnedTab && !searchQuery;
+  const mailboxWideLabelTab =
+    view === "inbox" && !!activeLabel && !isInboxScopedAppLabel(activeLabel);
+  const clientSliceTab = isPinnedTab && !searchQuery && !mailboxWideLabelTab;
   const isOtherTab =
     view === "inbox" &&
     activeInboxTab === OTHER_INBOX_TAB_PARAM &&
@@ -396,6 +398,7 @@ export function InboxPage() {
   const effectiveLabel = clientSliceTab
     ? undefined
     : (activeLabel ?? undefined);
+  const emailView = mailboxWideLabelTab ? "all" : view;
   const {
     data: rawEmails,
     isLoading,
@@ -407,7 +410,7 @@ export function InboxPage() {
     fetchNextPage,
     isFetchingNextPage,
     isFetchNextPageError,
-  } = useEmails(view, searchQuery, effectiveLabel);
+  } = useEmails(emailView, searchQuery, effectiveLabel);
   const hasEmailData = rawEmails !== undefined;
   const emailListLoading =
     isLoading ||

package/corpus/templates/mail/app/pages/SettingsPage.tsx

@@ -47,6 +47,7 @@ import { useState, useEffect, useRef, useMemo } from "react";
 import { useSearchParams } from "react-router";
 import { toast } from "sonner";
 
+import { AiFilterSection } from "@/components/settings/AiFilterSection";
 import { GmailFiltersSection } from "@/components/settings/GmailFiltersSection";
 import { SnippetsSection } from "@/components/settings/SnippetsSection";
 import {
@@ -90,6 +91,7 @@ import {
 } from "@/hooks/use-automations";
 import { useSettings, useUpdateSettings } from "@/hooks/use-emails";
 import { useNavigationState } from "@/hooks/use-navigation-state";
+import { isMailFrameworkAutomation } from "@/lib/automation-visibility";
 import { openFilePicker, uploadFile } from "@/lib/upload";
 import { cn } from "@/lib/utils";
 
@@ -732,6 +734,7 @@ function AutomationRow({
 interface FrameworkTrigger {
   id: string;
   name: string;
+  appId?: string;
   triggerType: string;
   event?: string;
   condition?: string;
@@ -752,12 +755,7 @@ function TriggersSubsection() {
       const res = await fetch(agentNativePath("/_agent-native/automations"));
       if (!res.ok) return [];
       const all: FrameworkTrigger[] = await res.json();
-      // Filter to mail domain triggers only (event-based)
-      return all.filter(
-        (t) =>
-          t.domain === "mail" ||
-          (t.triggerType === "event" && t.event && t.event.startsWith("mail.")),
-      );
+      return all.filter(isMailFrameworkAutomation);
     },
     staleTime: 30_000,
   });
@@ -935,6 +933,7 @@ function AutomationsSection() {
     )?.value ||
     modelOptions[0]?.value ||
     "loading";
+  const automationRules = rules.filter((rule) => rule.kind !== "ai-filter");
 
   const handleModelChange = async (value: string) => {
     const [engine, model] = value.split("::");
@@ -1087,7 +1086,7 @@ function AutomationsSection() {
           ))}
 
         {/* Empty state */}
-        {!isLoading && rules.length === 0 && !showNewForm && (
+        {!isLoading && automationRules.length === 0 && !showNewForm && (
           <div className="rounded-lg border border-border/20 bg-card/50 py-12 text-center">
             <IconBolt className="h-8 w-8 text-muted-foreground/20 mx-auto mb-3" />
             <p className="text-[13px] text-muted-foreground/50 mb-1">
@@ -1100,7 +1099,7 @@ function AutomationsSection() {
         )}
 
         {/* Rule list */}
-        {rules.map((rule) => (
+        {automationRules.map((rule) => (
           <AutomationRow
             key={rule.id}
             rule={rule}
@@ -1626,6 +1625,15 @@ export function SettingsPage() {
         content: <AutomationsSection />,
         keywords: "automations rules triggers events labels model",
       },
+      {
+        id: "ai-filter",
+        label: t("settings.aiFilter"),
+        icon: IconFilter,
+        group: "automation",
+        content: <AiFilterSection />,
+        keywords:
+          "ai filter spam auto label unwanted mail suggestions feedback",
+      },
       {
         id: "gmail-filters",
         label: t("settings.gmailFilters"),

package/corpus/templates/mail/app/pages/inbox-zero.ts

@@ -22,8 +22,7 @@ export function shouldShowInboxZero({
   hasNextPage,
 }: InboxZeroState): boolean {
   return (
-    view === "inbox" &&
-    (!activeLabel || activeLabel === "important") &&
+    (view === "inbox" || Boolean(activeLabel)) &&
     hasEmailData &&
     !isLoading &&
     !isError &&