@agent-native/core 0.77.3 → 0.77.6

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconTypography,
   IconH1,
@@ -27,8 +28,8 @@ interface ComposeSlashMenuProps {
 }
 
 interface CommandItem {
-  title: string;
-  description: string;
+  titleKey: string;
+  descriptionKey: string;
   icon: React.ElementType;
   action: (editor: Editor) => void;
   category?: string;
@@ -37,79 +38,79 @@ interface CommandItem {
 function createCommands(onGenerate: () => void): CommandItem[] {
   return [
     {
-      title: "Text",
-      description: "Plain text block",
+      titleKey: "mail.composeSlash.text",
+      descriptionKey: "mail.composeSlash.plainTextBlock",
       icon: IconTypography,
       category: "basic",
       action: (editor) => (editor.chain().focus() as any).setParagraph().run(),
     },
     {
-      title: "Heading 1",
-      description: "Large heading",
+      titleKey: "mail.composeSlash.heading1",
+      descriptionKey: "mail.composeSlash.largeHeading",
       icon: IconH1,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleHeading({ level: 1 }).run(),
     },
     {
-      title: "Heading 2",
-      description: "Medium heading",
+      titleKey: "mail.composeSlash.heading2",
+      descriptionKey: "mail.composeSlash.mediumHeading",
       icon: IconH2,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleHeading({ level: 2 }).run(),
     },
     {
-      title: "Heading 3",
-      description: "Small heading",
+      titleKey: "mail.composeSlash.heading3",
+      descriptionKey: "mail.composeSlash.smallHeading",
       icon: IconH3,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleHeading({ level: 3 }).run(),
     },
     {
-      title: "Bullet List",
-      description: "Unordered list",
+      titleKey: "mail.composeSlash.bulletList",
+      descriptionKey: "mail.composeSlash.unorderedList",
       icon: IconList,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleBulletList().run(),
     },
     {
-      title: "Numbered List",
-      description: "Ordered list",
+      titleKey: "mail.composeSlash.numberedList",
+      descriptionKey: "mail.composeSlash.orderedList",
       icon: IconListNumbers,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleOrderedList().run(),
     },
     {
-      title: "Quote",
-      description: "Block quote",
+      titleKey: "mail.composeSlash.quote",
+      descriptionKey: "mail.composeSlash.blockQuote",
       icon: IconQuote,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleBlockquote().run(),
     },
     {
-      title: "Code Block",
-      description: "Code snippet",
+      titleKey: "mail.composeSlash.codeBlock",
+      descriptionKey: "mail.composeSlash.codeSnippet",
       icon: IconCode,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).toggleCodeBlock().run(),
     },
     {
-      title: "Divider",
-      description: "Horizontal rule",
+      titleKey: "mail.composeSlash.divider",
+      descriptionKey: "mail.composeSlash.horizontalRule",
       icon: IconMinus,
       category: "basic",
       action: (editor) =>
         (editor.chain().focus() as any).setHorizontalRule().run(),
     },
     {
-      title: "Image",
-      description: "Upload an image",
+      titleKey: "mail.composeSlash.image",
+      descriptionKey: "mail.composeSlash.uploadImage",
       icon: IconPhoto,
       category: "media",
       action: (editor) => {
@@ -117,8 +118,8 @@ function createCommands(onGenerate: () => void): CommandItem[] {
       },
     },
     {
-      title: "Generate",
-      description: "AI-assisted writing",
+      titleKey: "mail.composeSlash.generate",
+      descriptionKey: "mail.composeSlash.aiAssistedWriting",
       icon: IconPencil,
       category: "ai",
       action: (_editor) => {
@@ -148,13 +149,14 @@ export function ComposeSlashMenu({
   } | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   const slashPosRef = useRef<number | null>(null);
+  const t = useT();
 
   const commands = createCommands(onGenerate);
 
   const filteredCommands = commands.filter(
     (cmd) =>
-      cmd.title.toLowerCase().includes(query.toLowerCase()) ||
-      cmd.description.toLowerCase().includes(query.toLowerCase()),
+      t(cmd.titleKey).toLowerCase().includes(query.toLowerCase()) ||
+      t(cmd.descriptionKey).toLowerCase().includes(query.toLowerCase()),
   );
 
   const executeCommand = useCallback(
@@ -294,14 +296,15 @@ export function ComposeSlashMenu({
         {basicCommands.length > 0 && (
           <>
             <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-              Blocks
+              {t("mail.composeSlash.blocks")}
             </div>
             {basicCommands.map((cmd) => {
               const globalIndex = filteredCommands.indexOf(cmd);
               return (
                 <CommandButton
-                  key={cmd.title}
+                  key={cmd.titleKey}
                   cmd={cmd}
+                  t={t}
                   isSelected={globalIndex === selectedIndex}
                   onExecute={() => executeCommand(cmd)}
                   onHover={() => setSelectedIndex(globalIndex)}
@@ -313,14 +316,15 @@ export function ComposeSlashMenu({
         {mediaCommands.length > 0 && (
           <>
             <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-              Media
+              {t("mail.composeSlash.media")}
             </div>
             {mediaCommands.map((cmd) => {
               const globalIndex = filteredCommands.indexOf(cmd);
               return (
                 <CommandButton
-                  key={cmd.title}
+                  key={cmd.titleKey}
                   cmd={cmd}
+                  t={t}
                   isSelected={globalIndex === selectedIndex}
                   onExecute={() => executeCommand(cmd)}
                   onHover={() => setSelectedIndex(globalIndex)}
@@ -332,14 +336,15 @@ export function ComposeSlashMenu({
         {aiCommands.length > 0 && (
           <>
             <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-              AI
+              {t("mail.composeSlash.ai")}
             </div>
             {aiCommands.map((cmd) => {
               const globalIndex = filteredCommands.indexOf(cmd);
               return (
                 <CommandButton
-                  key={cmd.title}
+                  key={cmd.titleKey}
                   cmd={cmd}
+                  t={t}
                   isSelected={globalIndex === selectedIndex}
                   onExecute={() => executeCommand(cmd)}
                   onHover={() => setSelectedIndex(globalIndex)}
@@ -355,11 +360,13 @@ export function ComposeSlashMenu({
 
 function CommandButton({
   cmd,
+  t,
   isSelected,
   onExecute,
   onHover,
 }: {
   cmd: CommandItem;
+  t: ReturnType<typeof useT>;
   isSelected: boolean;
   onExecute: () => void;
   onHover: () => void;
@@ -377,8 +384,12 @@ function CommandButton({
         <cmd.icon size={16} />
       </div>
       <div>
-        <div className="text-sm font-medium text-foreground">{cmd.title}</div>
-        <div className="text-xs text-muted-foreground">{cmd.description}</div>
+        <div className="text-sm font-medium text-foreground">
+          {t(cmd.titleKey)}
+        </div>
+        <div className="text-xs text-muted-foreground">
+          {t(cmd.descriptionKey)}
+        </div>
       </div>
     </button>
   );

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

@@ -1050,7 +1050,7 @@ export function EmailThread({
       const data = await res.json();
 
       if (data.ok) {
-        toast.success("Unsubscribe request sent");
+        toast.success(t("mail.toasts.unsubscribeSent"));
         // Also open the URL so user can confirm if needed
         if (data.url || unsubscribeInfo.url) {
           window.open(data.url || unsubscribeInfo.url, "_blank");
@@ -1060,7 +1060,7 @@ export function EmailThread({
         if (unsubscribeInfo.url) {
           window.open(unsubscribeInfo.url, "_blank");
         } else {
-          toast.error("Could not unsubscribe");
+          toast.error(t("mail.toasts.couldNotUnsubscribe"));
         }
       }
     } catch {
@@ -1835,7 +1835,9 @@ const ExpandedMessageCard = forwardRef<
                   <IconArrowBackUpDouble className="h-4 w-4 sm:h-[14px] sm:w-[14px] rtl:-scale-x-100" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Reply All</TooltipContent>
+              <TooltipContent>
+                {t("mail.mobileActions.replyAll")}
+              </TooltipContent>
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>

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

@@ -184,7 +184,7 @@ export const InlineReplyComposer = forwardRef<
   const handleSend = async () => {
     if (sendingRef.current) return;
     if (!draft.to.trim()) {
-      toast.error("Please add at least one recipient");
+      toast.error(t("mail.toasts.pleaseAddRecipient"));
       return;
     }
     sendingRef.current = true;
@@ -250,7 +250,7 @@ export const InlineReplyComposer = forwardRef<
         },
         {
           onError: () => {
-            toast.error("Failed to send email");
+            toast.error(t("mail.toasts.failedToSendEmail"));
             const { id: _id, ...reopenData } = draftSnapshot;
             onReopen(reopenData);
           },
@@ -279,9 +279,7 @@ export const InlineReplyComposer = forwardRef<
   const handleGenerate = async () => {
     if (!generatePrompt.trim()) return;
     if (!(await canUseAgentGenerate())) {
-      toast.error(
-        "Connect Builder or another AI engine before using Generate.",
-      );
+      toast.error(t("mail.toasts.aiEngineRequired"));
       window.dispatchEvent(new CustomEvent("agent-panel:open"));
       return;
     }
@@ -410,7 +408,7 @@ export const InlineReplyComposer = forwardRef<
       const existing = draft.attachments ?? [];
       onUpdate(draft.id, { attachments: [...existing, ...attachments] });
     } catch {
-      toast.error("Failed to attach file");
+      toast.error(t("mail.toasts.failedToAttachFile"));
     }
   };
 

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

@@ -57,7 +57,7 @@ type ProviderId = "apollo" | "hubspot" | "gong" | "pylon";
 interface IntegrationDef {
   id: ProviderId;
   name: string;
-  description: string;
+  descriptionKey: string;
   keyPlaceholder: string;
   helpUrl: string;
   helpSteps: string[];
@@ -68,7 +68,7 @@ const INTEGRATIONS: IntegrationDef[] = [
   {
     id: "apollo",
     name: "Apollo",
-    description: "Contact enrichment & company data",
+    descriptionKey: "mail.integrations.apolloDescription",
     keyPlaceholder: "Apollo API key...",
     helpUrl: "https://app.apollo.io/#/settings/integrations/api",
     helpSteps: [
@@ -105,7 +105,7 @@ const INTEGRATIONS: IntegrationDef[] = [
   {
     id: "hubspot",
     name: "HubSpot",
-    description: "CRM contacts, deals & tickets",
+    descriptionKey: "mail.integrations.hubspotDescription",
     keyPlaceholder: "HubSpot private app token...",
     helpUrl: "https://developers.hubspot.com/docs/api/private-apps",
     helpSteps: [
@@ -130,7 +130,7 @@ const INTEGRATIONS: IntegrationDef[] = [
   {
     id: "gong",
     name: "Gong",
-    description: "Recent calls & conversation intelligence",
+    descriptionKey: "mail.integrations.gongDescription",
     keyPlaceholder: "Gong API key or access_key:secret...",
     helpUrl: "https://app.gong.io/company/api",
     helpSteps: [
@@ -155,7 +155,7 @@ const INTEGRATIONS: IntegrationDef[] = [
   {
     id: "pylon",
     name: "Pylon",
-    description: "Support issues & account data",
+    descriptionKey: "mail.integrations.pylonDescription",
     keyPlaceholder: "Pylon API token...",
     helpUrl: "https://docs.usepylon.com/pylon-docs/developer/api",
     helpSteps: [
@@ -460,7 +460,7 @@ function IntegrationRow({
       <div className="flex-1 min-w-0">
         <p className="text-[12px] font-medium text-foreground/80">{def.name}</p>
         <p className="text-[10px] text-muted-foreground/70 truncate">
-          {def.description}
+          {t(def.descriptionKey)}
         </p>
       </div>
       {connected ? (
@@ -700,6 +700,7 @@ function IntegrationNotice({
 // ─── Apollo Section ─────────────────────────────────────────────────────────
 
 function ApolloSection({ email }: { email: string }) {
+  const t = useT();
   const { data: person, isLoading, error } = useApolloPerson(email);
 
   if (isLoading) return <SectionLoading />;
@@ -897,7 +898,7 @@ function ApolloSection({ email }: { email: string }) {
           <div className="h-px bg-border/30 mx-4" />
           <div className="px-4 py-3">
             <h4 className="text-[11px] font-medium text-muted-foreground/50 uppercase tracking-wider mb-2">
-              Experience
+              {t("mail.integrations.experience")}
             </h4>
             <div className="space-y-2">
               {person.employment_history.slice(0, 4).map((job, i) => (
@@ -921,6 +922,7 @@ function ApolloSection({ email }: { email: string }) {
 // ─── HubSpot Section ────────────────────────────────────────────────────────
 
 function HubSpotSection({ email }: { email: string }) {
+  const t = useT();
   const {
     data: contact,
     isLoading,
@@ -973,7 +975,7 @@ function HubSpotSection({ email }: { email: string }) {
         {contact.deals?.length > 0 && (
           <div className="mt-3">
             <p className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">
-              Deals
+              {t("mail.integrations.deals")}
             </p>
             {contact.deals.map((deal: any) => (
               <div key={deal.id} className="mb-1.5">
@@ -995,7 +997,7 @@ function HubSpotSection({ email }: { email: string }) {
         {contact.tickets?.length > 0 && (
           <div className="mt-3">
             <p className="text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">
-              Tickets
+              {t("mail.integrations.tickets")}
             </p>
             {contact.tickets.map((ticket: any) => (
               <div key={ticket.id} className="mb-1.5">
@@ -1018,6 +1020,7 @@ function HubSpotSection({ email }: { email: string }) {
 // ─── Gong Section ───────────────────────────────────────────────────────────
 
 function GongSection({ email }: { email: string }) {
+  const t = useT();
   const {
     data: calls,
     isLoading,
@@ -1042,7 +1045,10 @@ function GongSection({ email }: { email: string }) {
     <>
       <div className="h-px bg-border/30 mx-4" />
       <div className="px-4 py-3">
-        <SectionHeader logo={INTEGRATIONS[2].logo} label="Gong Calls" />
+        <SectionHeader
+          logo={INTEGRATIONS[2].logo}
+          label={t("mail.integrations.gongCalls")}
+        />
 
         <div className="space-y-2">
           {calls.map((call: any) => {

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { MobileActionId } from "@shared/types";
 import {
   IconArchive,
@@ -52,24 +53,24 @@ export const DEFAULT_MOBILE_ACTIONS: MobileActionId[] = [
   "next",
 ];
 
-/** Metadata for each action: icon SVG, label */
+/** Metadata for each action: stable id plus icon SVG. */
 const ACTION_META: Record<
   MobileActionId,
   {
-    label: string;
+    labelKey: string;
     icon: (active?: boolean) => React.ReactNode;
   }
 > = {
   archive: {
-    label: "Archive",
+    labelKey: "mail.mobileActions.archive",
     icon: () => <IconArchive className="h-5 w-5" />,
   },
   trash: {
-    label: "Trash",
+    labelKey: "mail.mobileActions.trash",
     icon: () => <IconTrash className="h-5 w-5" />,
   },
   star: {
-    label: "Star",
+    labelKey: "mail.mobileActions.star",
     icon: (active) =>
       active ? (
         <IconStarFilled className="h-5 w-5 text-yellow-500" />
@@ -78,27 +79,27 @@ const ACTION_META: Record<
       ),
   },
   reply: {
-    label: "Reply",
+    labelKey: "mail.mobileActions.reply",
     icon: () => <IconArrowBackUp className="h-5 w-5 rtl:-scale-x-100" />,
   },
   replyAll: {
-    label: "Reply All",
+    labelKey: "mail.mobileActions.replyAll",
     icon: () => <IconArrowBackUp className="h-5 w-5 rtl:-scale-x-100" />,
   },
   forward: {
-    label: "Forward",
+    labelKey: "mail.mobileActions.forward",
     icon: () => <IconArrowForwardUp className="h-5 w-5 rtl:-scale-x-100" />,
   },
   markUnread: {
-    label: "Unread",
+    labelKey: "mail.mobileActions.unread",
     icon: () => <IconMail className="h-5 w-5" />,
   },
   prev: {
-    label: "Prev",
+    labelKey: "mail.mobileActions.prev",
     icon: () => <IconChevronUp className="h-5 w-5" />,
   },
   next: {
-    label: "Next",
+    labelKey: "mail.mobileActions.next",
     icon: () => <IconChevronDown className="h-5 w-5" />,
   },
 };
@@ -117,6 +118,7 @@ export function MobileActionBar({
   onUpdateActions,
 }: MobileActionBarProps) {
   const [customizeOpen, setCustomizeOpen] = useState(false);
+  const t = useT();
 
   return (
     <>
@@ -133,15 +135,20 @@ export function MobileActionBar({
                   )}
                 >
                   <IconSettings className="h-5 w-5" />
-                  <span className="text-[10px] leading-tight">Settings</span>
+                  <span className="text-[10px] leading-tight">
+                    {t("mail.mobileActions.settings")}
+                  </span>
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Customize</TooltipContent>
+              <TooltipContent>
+                {t("mail.mobileActions.customize")}
+              </TooltipContent>
             </Tooltip>
           )}
           {actions.map((id) => {
             const meta = ACTION_META[id];
             if (!meta) return null;
+            const label = t(meta.labelKey);
             return (
               <Tooltip key={id}>
                 <TooltipTrigger asChild>
@@ -153,12 +160,10 @@ export function MobileActionBar({
                     )}
                   >
                     {meta.icon(id === "star" ? isStarred : false)}
-                    <span className="text-[10px] leading-tight">
-                      {meta.label}
-                    </span>
+                    <span className="text-[10px] leading-tight">{label}</span>
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>{meta.label}</TooltipContent>
+                <TooltipContent>{label}</TooltipContent>
               </Tooltip>
             );
           })}
@@ -169,13 +174,16 @@ export function MobileActionBar({
         <Drawer open={customizeOpen} onOpenChange={setCustomizeOpen}>
           <DrawerContent>
             <DrawerHeader>
-              <DrawerTitle>Customize Actions</DrawerTitle>
+              <DrawerTitle>
+                {t("mail.mobileActions.customizeActions")}
+              </DrawerTitle>
             </DrawerHeader>
             <div className="px-4 pb-6 space-y-1">
               {ALL_MOBILE_ACTIONS.map((id) => {
                 const meta = ACTION_META[id];
                 if (!meta) return null;
                 const enabled = actions.includes(id);
+                const label = t(meta.labelKey);
                 return (
                   <div
                     key={id}
@@ -195,7 +203,7 @@ export function MobileActionBar({
                       <span className="text-muted-foreground">
                         {meta.icon(false)}
                       </span>
-                      <span className="text-sm font-medium">{meta.label}</span>
+                      <span className="text-sm font-medium">{label}</span>
                     </div>
                     <Switch
                       checked={enabled}
@@ -218,7 +226,7 @@ export function MobileActionBar({
             <div className="px-4 pb-6">
               <DrawerClose asChild>
                 <button className="w-full rounded-lg bg-accent py-2.5 text-sm font-medium">
-                  Close
+                  {t("mail.mobileActions.close")}
                 </button>
               </DrawerClose>
             </div>

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

@@ -16,26 +16,29 @@ interface SendLaterButtonProps {
   isSending?: boolean;
 }
 
-function getPresets(): Array<{ label: string; date: Date }> {
+function getPresets(): Array<{ labelKey: string; date: Date }> {
   const now = new Date();
-  const presets: Array<{ label: string; date: Date }> = [];
+  const presets: Array<{ labelKey: string; date: Date }> = [];
 
   const laterToday = new Date(now);
   laterToday.setHours(Math.max(now.getHours() + 4, 18), 0, 0, 0);
   if (laterToday.getDate() === now.getDate()) {
-    presets.push({ label: "Later today", date: laterToday });
+    presets.push({ labelKey: "mail.sendLater.laterToday", date: laterToday });
   }
 
   const tomorrow = new Date(now);
   tomorrow.setDate(tomorrow.getDate() + 1);
   tomorrow.setHours(8, 0, 0, 0);
-  presets.push({ label: "Tomorrow morning", date: tomorrow });
+  presets.push({
+    labelKey: "mail.sendLater.tomorrowMorning",
+    date: tomorrow,
+  });
 
   const nextWeek = new Date(now);
   const daysUntilMon = (1 - now.getDay() + 7) % 7 || 7;
   nextWeek.setDate(now.getDate() + daysUntilMon);
   nextWeek.setHours(8, 0, 0, 0);
-  presets.push({ label: "Next week", date: nextWeek });
+  presets.push({ labelKey: "mail.sendLater.nextWeek", date: nextWeek });
 
   return presets;
 }
@@ -97,11 +100,13 @@ export function SendLaterButton({
             <div className="space-y-1">
               {presets.map((preset) => (
                 <button
-                  key={preset.label}
+                  key={preset.labelKey}
                   onClick={() => handleSendLater(preset.date)}
                   className="w-full flex items-center justify-between text-left px-2.5 py-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors group"
                 >
-                  <div className="text-sm font-medium">{preset.label}</div>
+                  <div className="text-sm font-medium">
+                    {t(preset.labelKey)}
+                  </div>
                   <div className="text-[11px] text-muted-foreground group-hover:text-accent-foreground/70">
                     {formatDate(preset.date)}
                   </div>

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

@@ -200,8 +200,13 @@ export function SnoozeModal({
       onClose();
       toast(
         snoozeTargets.length > 1
-          ? `Snoozed ${snoozeTargets.length} conversations until ${formatRight(opt.date, opt.sublabel)}`
-          : `Snoozed until ${formatRight(opt.date, opt.sublabel)}`,
+          ? t("mail.toasts.snoozedConversationsUntil", {
+              count: snoozeTargets.length,
+              time: formatRight(opt.date, opt.sublabel),
+            })
+          : t("mail.toasts.snoozedUntil", {
+              time: formatRight(opt.date, opt.sublabel),
+            }),
       );
       window.dispatchEvent(
         new CustomEvent("email:snoozed", {
@@ -225,11 +230,9 @@ export function SnoozeModal({
               msg.includes("scheduled_jobs") ||
               msg.includes("SQLITE")
             ) {
-              toast.error(
-                "Snooze DB not ready. Run: pnpm db:push in the mail template.",
-              );
+              toast.error(t("mail.toasts.snoozeDbNotReady"));
             } else {
-              toast.error(msg || "Couldn't snooze — check the server logs.");
+              toast.error(msg || t("mail.toasts.couldNotSnooze"));
             }
           });
       }