@agent-native/core 0.76.10 → 0.76.12

package/corpus/templates/mail/app/components/email/EmailList.tsx

@@ -53,6 +53,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useT } from "@agent-native/core/client";
 
 type EmailsPage = { emails: EmailMessage[]; nextPageToken?: string };
 type InfiniteEmails = InfiniteData<EmailsPage, string | undefined>;
@@ -119,34 +120,35 @@ const INBOX_ZERO_PHOTOS = [
   "photo-1552083375-1447ce886485", // Japanese garden
 ];
 
-function emptyStateHintForView(view: string): string {
+function emptyStateHintKeyForView(view: string): string {
   switch (view) {
     case "snoozed":
-      return "No snoozed emails right now.";
+      return "mail.empty.snoozed";
     case "drafts":
-      return "Drafts you save will appear here.";
+      return "mail.empty.drafts";
     case "starred":
-      return "Star an email to keep it close at hand.";
+      return "mail.empty.starred";
     case "sent":
-      return "Emails you send will appear here.";
+      return "mail.empty.sent";
     case "scheduled":
-      return "Scheduled sends will appear here.";
+      return "mail.empty.scheduled";
     case "archive":
-      return "Archived emails will appear here.";
+      return "mail.empty.archive";
     case "trash":
-      return "Trashed emails appear here for 30 days.";
+      return "mail.empty.trash";
     case "spam":
-      return "Spam Gmail flags will appear here.";
+      return "mail.empty.spam";
     case "all":
-      return "All your mail will appear here.";
+      return "mail.empty.all";
     case "unread":
-      return "You're caught up — no unread mail.";
+      return "mail.empty.unread";
     default:
-      return "Emails matching this view will appear here.";
+      return "mail.empty.default";
   }
 }
 
 export function InboxZero() {
+  const t = useT();
   const [loaded, setLoaded] = useState(false);
   const isEmbedded = isMcpEmbedSurface();
 
@@ -195,10 +197,10 @@ export function InboxZero() {
       {/* Bottom text */}
       <div className="relative mt-auto px-6 pb-6">
         <p className="text-[15px] font-medium text-white/90 drop-shadow-lg">
-          You&rsquo;ve hit Inbox Zero
+          {t("mail.empty.inboxZeroTitle")}
         </p>
         <p className="text-[13px] text-white/60 drop-shadow-lg mt-0.5">
-          You&rsquo;re all caught up
+          {t("mail.empty.inboxZeroSubtitle")}
         </p>
       </div>
     </div>
@@ -261,6 +263,7 @@ function EmailErrorState({
   onRetry: () => unknown;
   containerRef: React.RefObject<HTMLDivElement | null>;
 }) {
+  const t = useT();
   const rateLimitRetryMs = isQuotaError ? getRateLimitRetryMs(message) : 0;
   const [cooldownRemaining, setCooldownRemaining] = useState(rateLimitRetryMs);
   const autoRetryFired = useRef(false);
@@ -305,11 +308,11 @@ function EmailErrorState({
 
   let buttonLabel: string;
   if (isFetching) {
-    buttonLabel = "Retrying…";
+    buttonLabel = t("mail.error.retrying");
   } else if (cooldownRemaining > 0) {
-    buttonLabel = `Try again in ${cooldownSeconds}s`;
+    buttonLabel = t("mail.error.tryAgainIn", { seconds: cooldownSeconds });
   } else {
-    buttonLabel = "Try again";
+    buttonLabel = t("mail.error.tryAgain");
   }
 
   return (
@@ -321,12 +324,12 @@ function EmailErrorState({
           </div>
           <div className="space-y-1">
             <p className="text-sm font-medium text-foreground">
-              {isQuotaError ? "Gmail rate limit hit" : "Unable to load emails"}
+              {isQuotaError
+                ? t("mail.error.rateLimitTitle")
+                : t("mail.error.loadTitle")}
             </p>
             <p className="text-xs text-muted-foreground">
-              {isQuotaError
-                ? "Too many recent requests to Google. Waiting a moment before retrying."
-                : message}
+              {isQuotaError ? t("mail.error.rateLimitDescription") : message}
             </p>
           </div>
           <button
@@ -363,6 +366,7 @@ export function EmailList({
   onDraftOpen,
   onNavigateThread,
 }: EmailListProps) {
+  const t = useT();
   const navigate = useNavigate();
   const { view = "inbox", threadId } = useParams<{
     view: string;
@@ -648,9 +652,9 @@ export function EmailList({
       setUndoAction(undo);
       toast(
         threadKeys.length > 1
-          ? `Archived ${threadKeys.length} conversations.`
-          : "Archived.",
-        { action: { label: "UNDO", onClick: undo } },
+          ? t("mail.toasts.archivedMany", { count: threadKeys.length })
+          : t("mail.toasts.archived"),
+        { action: { label: t("mail.actions.undo"), onClick: undo } },
       );
       for (const t of targets) {
         archiveEmail.mutate({
@@ -740,9 +744,9 @@ export function EmailList({
       setUndoAction(undo);
       toast(
         threadKeys.length > 1
-          ? `Trashed ${threadKeys.length} conversations.`
-          : "Moved to Trash.",
-        { action: { label: "UNDO", onClick: undo } },
+          ? t("mail.toasts.trashedMany", { count: threadKeys.length })
+          : t("mail.toasts.trashed"),
+        { action: { label: t("mail.actions.undo"), onClick: undo } },
       );
       for (const id of emailIds) trashEmail.mutate(id);
       setSelectedIds(new Set());
@@ -1131,12 +1135,12 @@ export function EmailList({
     const jobId = getScheduledJobId(thread.latestMessage);
     if (!jobId) return;
     sendScheduledJobNow.mutate(jobId, {
-      onSuccess: () => toast("Scheduled email sent."),
+      onSuccess: () => toast(t("mail.toasts.scheduledSent")),
       onError: (error) =>
         toast.error(
           error instanceof Error
             ? error.message
-            : "Failed to send scheduled email",
+            : t("mail.toasts.scheduledSendFailed"),
         ),
     });
   };
@@ -1149,8 +1153,8 @@ export function EmailList({
     const jobId = getScheduledJobId(thread.latestMessage);
     if (!jobId) return;
     cancelScheduledJob.mutate(jobId, {
-      onSuccess: () => toast("Scheduled email cancelled."),
-      onError: () => toast.error("Failed to cancel scheduled email"),
+      onSuccess: () => toast(t("mail.toasts.scheduledCancelled")),
+      onError: () => toast.error(t("mail.toasts.scheduledCancelFailed")),
     });
   };
 
@@ -1202,8 +1206,8 @@ export function EmailList({
         unarchiveEmail.mutate(id);
       };
       setUndoAction(undo);
-      toast("Archived.", {
-        action: { label: "UNDO", onClick: undo },
+      toast(t("mail.toasts.archived"), {
+        action: { label: t("mail.actions.undo"), onClick: undo },
       });
       archiveEmail.mutate({
         id,
@@ -1253,15 +1257,15 @@ export function EmailList({
               type="button"
               onClick={clearSelection}
               className="flex size-5 items-center justify-center rounded transition-colors hover:bg-accent hover:text-foreground"
-              aria-label="Clear selection"
+              aria-label={t("mail.selection.clear")}
             >
               <IconX className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Clear selection</TooltipContent>
+          <TooltipContent>{t("mail.selection.clear")}</TooltipContent>
         </Tooltip>
         <span className="whitespace-nowrap text-xs font-medium text-foreground/80">
-          {selectedIds.size} selected
+          {t("mail.selection.selected", { count: selectedIds.size })}
         </span>
         <DropdownMenu>
           <Tooltip>
@@ -1270,13 +1274,13 @@ export function EmailList({
                 <button
                   type="button"
                   className="flex size-5 items-center justify-center rounded transition-colors hover:bg-accent hover:text-foreground"
-                  aria-label="Selection actions"
+                  aria-label={t("mail.selection.actions")}
                 >
                   <IconDots className="h-3.5 w-3.5" />
                 </button>
               </DropdownMenuTrigger>
             </TooltipTrigger>
-            <TooltipContent>Selection actions</TooltipContent>
+            <TooltipContent>{t("mail.selection.actions")}</TooltipContent>
           </Tooltip>
           <DropdownMenuContent align="end" className="w-56">
             <DropdownMenuItem
@@ -1284,27 +1288,27 @@ export function EmailList({
               className="gap-2 text-xs"
             >
               <IconArchive className="h-3.5 w-3.5" />
-              Archive
+              {t("mail.actions.archive")}
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={markFocusedRead}
               className="gap-2 text-xs"
             >
               <IconMailOpened className="h-3.5 w-3.5" />
-              Mark read
+              {t("mail.actions.markRead")}
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={markFocusedUnread}
               className="gap-2 text-xs"
             >
               <IconMail className="h-3.5 w-3.5" />
-              Mark unread
+              {t("mail.actions.markUnread")}
             </DropdownMenuItem>
             {movableLabels.length > 0 && (
               <DropdownMenuSub>
                 <DropdownMenuSubTrigger className="gap-2 text-xs">
                   <IconFolder className="h-3.5 w-3.5" />
-                  Move to
+                  {t("mail.actions.moveTo")}
                 </DropdownMenuSubTrigger>
                 <DropdownMenuSubContent className="max-h-72 w-56 overflow-y-auto">
                   {movableLabels.map((label) => (
@@ -1325,34 +1329,34 @@ export function EmailList({
                 className="gap-2 text-xs text-destructive focus:text-destructive"
               >
                 <IconTrash className="h-3.5 w-3.5" />
-                Move to Trash
+                {t("mail.actions.moveToTrash")}
               </DropdownMenuItem>
             )}
             <DropdownMenuSeparator />
-            <DropdownMenuLabel>Select</DropdownMenuLabel>
+            <DropdownMenuLabel>{t("mail.selection.select")}</DropdownMenuLabel>
             <DropdownMenuItem onClick={selectAllThreads} className="text-xs">
-              All
+              {t("mail.selection.all")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={clearSelection} className="text-xs">
-              None
+              {t("mail.selection.none")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={selectReadThreads} className="text-xs">
-              Read
+              {t("mail.selection.read")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={selectUnreadThreads} className="text-xs">
-              Unread
+              {t("mail.views.unread")}
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={selectStarredThreads}
               className="text-xs"
             >
-              Starred
+              {t("mail.views.starred")}
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={selectUnstarredThreads}
               className="text-xs"
             >
-              Unstarred
+              {t("mail.selection.unstarred")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -1417,10 +1421,10 @@ export function EmailList({
                 </svg>
               </div>
               <p className="text-sm font-medium text-foreground/80">
-                No results for &ldquo;{searchQuery}&rdquo;
+                {t("mail.empty.noSearchResults", { query: searchQuery })}
               </p>
               <p className="text-xs text-muted-foreground mt-1">
-                Try different keywords
+                {t("mail.empty.tryDifferentKeywords")}
               </p>
             </div>
           </div>
@@ -1435,10 +1439,10 @@ export function EmailList({
         <div className="flex flex-1 flex-col items-center justify-center">
           <div className="text-center px-8">
             <p className="text-sm font-medium text-foreground/80">
-              Nothing here yet
+              {t("mail.empty.nothingHere")}
             </p>
             <p className="text-xs text-muted-foreground mt-1">
-              {emptyStateHintForView(view)}
+              {t(emptyStateHintKeyForView(view))}
             </p>
           </div>
         </div>
@@ -1515,7 +1519,7 @@ export function EmailList({
             {isFetchingNextPage && (
               <div className="flex items-center gap-2 text-xs text-muted-foreground">
                 <Spinner className="size-3 text-muted-foreground" />
-                Loading more...
+                {t("mail.empty.loadingMore")}
               </div>
             )}
           </div>

package/corpus/templates/mail/app/components/email/EmailListItem.tsx

@@ -21,6 +21,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useT } from "@agent-native/core/client";
 
 interface EmailListItemProps {
   email: EmailMessage;
@@ -158,6 +159,7 @@ export const EmailListItem = memo(function EmailListItem({
   onSwipeSnooze,
   highlight,
 }: EmailListItemProps) {
+  const t = useT();
   const { allAccounts } = useAccountFilter();
   const isMultiAccount = allAccounts.length > 1;
 
@@ -597,7 +599,7 @@ export const EmailListItem = memo(function EmailListItem({
                     <IconSend className="h-3.5 w-3.5 rtl:-scale-x-100" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Send now</TooltipContent>
+                <TooltipContent>{t("mail.sendLater.sendNow")}</TooltipContent>
               </Tooltip>
             )}
             {onCancelSchedule && (
@@ -611,7 +613,9 @@ export const EmailListItem = memo(function EmailListItem({
                     <IconX className="h-3.5 w-3.5" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Cancel scheduled send</TooltipContent>
+                <TooltipContent>
+                  {t("mail.sendLater.cancelScheduledSend")}
+                </TooltipContent>
               </Tooltip>
             )}
             {onTrash && (
@@ -625,7 +629,7 @@ export const EmailListItem = memo(function EmailListItem({
                     <IconTrash className="h-3.5 w-3.5" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Move to Trash</TooltipContent>
+                <TooltipContent>{t("mail.actions.moveToTrash")}</TooltipContent>
               </Tooltip>
             )}
             <Tooltip>

package/corpus/templates/mail/app/components/email/EmailThread.tsx

@@ -34,7 +34,7 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { ensureThread, warmThreads } from "@/lib/thread-cache";
 import { getResolvedTheme } from "@/lib/theme";
-import { appApiPath } from "@agent-native/core/client";
+import { appApiPath, useT } from "@agent-native/core/client";
 import {
   decodeHtmlEntities,
   processHtmlImages,
@@ -111,6 +111,7 @@ export function EmailThread({
   isMaximized?: boolean;
   onToggleMaximize?: () => void;
 }) {
+  const t = useT();
   const { view = "inbox", threadId: routeThreadId } = useParams<{
     view: string;
     threadId: string;
@@ -1211,7 +1212,7 @@ export function EmailThread({
                         className="inline-flex items-center gap-1.5 text-[12px] text-muted-foreground/50 hover:text-muted-foreground transition-colors"
                       >
                         <IconExternalLink className="h-3 w-3" />
-                        View Pull Request
+                        {t("mail.thread.viewPullRequest")}
                       </a>
                     </TooltipTrigger>
                     <TooltipContent
@@ -1219,7 +1220,7 @@ export function EmailThread({
                       align="start"
                       className="flex items-center gap-1.5 text-[12px] font-medium"
                     >
-                      View Pull Request
+                      {t("mail.thread.viewPullRequest")}
                       <kbd className="flex items-center justify-center rounded border border-border/60 bg-muted px-1 text-[10px] text-muted-foreground">
                         {formatShortcut("cmd")}
                       </kbd>
@@ -1238,11 +1239,13 @@ export function EmailThread({
                         className="inline-flex items-center gap-1.5 text-[12px] text-muted-foreground/50 hover:text-muted-foreground transition-colors disabled:opacity-50"
                       >
                         <IconMailOff className="h-3 w-3" />
-                        {unsubscribing ? "Unsubscribing..." : "Unsubscribe"}
+                        {unsubscribing
+                          ? t("mail.thread.unsubscribing")
+                          : t("mail.thread.unsubscribe")}
                       </button>
                     </TooltipTrigger>
                     <TooltipContent>
-                      Unsubscribe from this mailing list
+                      {t("mail.thread.unsubscribeTooltip")}
                     </TooltipContent>
                   </Tooltip>
                 )}
@@ -1679,6 +1682,7 @@ const ExpandedMessageCard = forwardRef<
   },
   ref,
 ) {
+  const t = useT();
   const [showDetails, setShowDetails] = useState(false);
   const senderName = email.from.name || email.from.email;
   const recipients = [
@@ -1960,7 +1964,7 @@ const ExpandedMessageCard = forwardRef<
                 className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
               >
                 <IconDownload className="h-3 w-3" />
-                Download all
+                {t("mail.thread.downloadAll")}
               </button>
             )}
           </div>
@@ -2070,6 +2074,7 @@ function PlainTextBody({
   searchTerm?: string;
   activeLocalIdx?: number | null;
 }) {
+  const t = useT();
   const [showQuoted, setShowQuoted] = useState(false);
   const [showSig, setShowSig] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -2169,7 +2174,7 @@ function PlainTextBody({
       {hasSig && !showSig && !forceShowAll && (
         <button
           type="button"
-          aria-label="Show signature"
+          aria-label={t("mail.thread.showSignature")}
           onClick={() => setShowSig(true)}
           className="mt-1 inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground/50 transition-colors hover:bg-accent hover:text-muted-foreground"
         >
@@ -2179,7 +2184,7 @@ function PlainTextBody({
       {hasQuoted && !showQuoted && !forceShowAll && (showSig || !hasSig) && (
         <button
           type="button"
-          aria-label="Show quoted text"
+          aria-label={t("mail.thread.showQuotedText")}
           onClick={() => setShowQuoted(true)}
           className="mt-1 inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground/50 transition-colors hover:bg-accent hover:text-muted-foreground"
         >
@@ -2541,6 +2546,7 @@ function HtmlEmailBody({
   searchTerm?: string;
   activeLocalIdx?: number | null;
 }) {
+  const t = useT();
   const frameHostRef = useRef<HTMLDivElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [height, setHeight] = useState(200);
@@ -2977,7 +2983,7 @@ function HtmlEmailBody({
         if (lightened) el.setAttribute("color", lightened);
       });
 
-      // Transform dark text color rules in <style> blocks
+      // Transform dark text color rules in <style> blocks // i18n-ignore
       doc.querySelectorAll("style").forEach((tag) => {
         const text = tag.textContent || "";
         tag.textContent = text.replace(
@@ -3287,8 +3293,8 @@ function HtmlEmailBody({
           <IconPhoto className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
           <span>
             {isEmbedded
-              ? "Remote images hidden in this embed."
-              : "Images blocked."}
+              ? t("mail.thread.remoteImagesHidden")
+              : t("mail.thread.imagesBlocked")}
           </span>
           {!isEmbedded && (
             <>
@@ -3296,14 +3302,16 @@ function HtmlEmailBody({
                 onClick={() => setShowImagesForThread(true)}
                 className="text-primary hover:text-primary/80 font-medium transition-colors"
               >
-                Show images
+                {t("mail.thread.showImages")}
               </button>
               {senderEmail && (
                 <button
                   onClick={handleAlwaysTrust}
                   className="text-muted-foreground/60 hover:text-muted-foreground font-medium transition-colors"
                 >
-                  Always from {senderEmail.split("@")[1]}
+                  {t("mail.thread.alwaysFrom", {
+                    domain: senderEmail.split("@")[1],
+                  })}
                 </button>
               )}
             </>
@@ -3321,7 +3329,7 @@ function HtmlEmailBody({
           colorScheme: useDarkIframeCss ? "dark" : "light",
           borderRadius: hasDesignedBg && isDark ? "6px" : undefined,
         }}
-        title="Email content"
+        title={t("mail.thread.emailContent")}
       />
     </div>
   );
@@ -3348,6 +3356,7 @@ function ThreadSearchBar({
   totalMatches: number;
   inputRef: React.RefObject<HTMLInputElement | null>;
 }) {
+  const t = useT();
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Escape") {
       e.preventDefault();
@@ -3368,7 +3377,7 @@ function ThreadSearchBar({
         value={query}
         onChange={(e) => onChange(e.target.value)}
         onKeyDown={handleKeyDown}
-        placeholder="Search in conversation…"
+        placeholder={t("mail.thread.searchConversation")}
         className="flex-1 bg-transparent text-[13px] text-foreground placeholder:text-muted-foreground/40 outline-none min-w-0"
         autoComplete="off"
         spellCheck={false}
@@ -3376,7 +3385,7 @@ function ThreadSearchBar({
       {query && (
         <span className="text-[12px] text-muted-foreground/50 tabular-nums shrink-0 select-none">
           {totalMatches === 0
-            ? "No matches"
+            ? t("mail.search.noMatches")
             : `${matchIdx + 1} / ${totalMatches}`}
         </span>
       )}