@agent-native/core 0.76.5 → 0.76.6

package/corpus/templates/forms/app/pages/FormsListPage.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
-import { format } from "date-fns";
 import {
   IconPlus,
   IconDots,
@@ -18,7 +17,12 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Skeleton } from "@/components/ui/skeleton";
-import { VisibilityBadge, callAction } from "@agent-native/core/client";
+import {
+  VisibilityBadge,
+  callAction,
+  useFormatters,
+  useT,
+} from "@agent-native/core/client";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -61,6 +65,8 @@ const statusColors: Record<string, string> = {
 };
 
 export function FormsListPage() {
+  const t = useT();
+  const { formatDate, formatNumber } = useFormatters();
   const navigate = useNavigate();
   const [view, setView] = useState<"active" | "archive">("active");
   const {
@@ -99,12 +105,12 @@ export function FormsListPage() {
     const tempId = crypto.randomUUID().replace(/-/g, "").slice(0, 10);
     navigate(`/forms/${tempId}`);
     createForm.mutate(
-      { title: "Untitled Form" },
+      { title: t("forms.untitled") },
       { onSuccess: (form) => navigate(`/forms/${form.id}`, { replace: true }) },
     );
   }
 
-  useSetPageTitle("Forms");
+  useSetPageTitle(t("header.forms"));
 
   const headerActions = useMemo(
     () => (
@@ -114,8 +120,8 @@ export function FormsListPage() {
         className="shrink-0 cursor-pointer"
       >
         <IconPlus className="h-3.5 w-3.5" />
-        <span className="hidden sm:inline">New Form</span>
-        <span className="sm:hidden">New</span>
+        <span className="hidden sm:inline">{t("forms.newForm")}</span>
+        <span className="sm:hidden">{t("forms.new")}</span>
       </Button>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -130,20 +136,20 @@ export function FormsListPage() {
       const full = await callAction("get-form", { id: form.id });
       createForm.mutate(
         {
-          title: `${full.title} (copy)`,
+          title: t("forms.copyTitle", { title: full.title }),
           description: full.description,
           fields: full.fields,
           settings: full.settings,
         },
         {
           onSuccess: (newForm) => {
-            toast.success("Form duplicated");
+            toast.success(t("forms.duplicated"));
             navigate(`/forms/${newForm.id}`);
           },
         },
       );
     } catch {
-      toast.error("Failed to duplicate form");
+      toast.error(t("forms.duplicateFailed"));
     }
   }
 
@@ -151,7 +157,7 @@ export function FormsListPage() {
     deleteForm.mutate(
       { id },
       {
-        onSuccess: () => toast.success("Form moved to Archive"),
+        onSuccess: () => toast.success(t("forms.movedToArchive")),
       },
     );
   }
@@ -160,7 +166,7 @@ export function FormsListPage() {
     restoreForm.mutate(
       { id },
       {
-        onSuccess: () => toast.success("Form restored"),
+        onSuccess: () => toast.success(t("forms.restored")),
       },
     );
   }
@@ -172,7 +178,7 @@ export function FormsListPage() {
     deleteForm.mutate(
       { id, purge: true },
       {
-        onSuccess: () => toast.success("Form permanently deleted"),
+        onSuccess: () => toast.success(t("forms.permanentlyDeleted")),
       },
     );
   }
@@ -220,11 +226,17 @@ export function FormsListPage() {
       toast.success(
         ids.length === 1
           ? purge
-            ? "Form permanently deleted"
-            : "Form moved to Archive"
+            ? t("forms.permanentlyDeleted")
+            : t("forms.movedToArchive")
           : purge
-            ? `${ids.length} forms permanently deleted`
-            : `${ids.length} forms moved to Archive`,
+            ? t("forms.bulkPermanentlyDeleted", {
+                count: ids.length,
+                formattedCount: formatNumber(ids.length),
+              })
+            : t("forms.bulkMovedToArchive", {
+                count: ids.length,
+                formattedCount: formatNumber(ids.length),
+              }),
       );
       setSelectedIds(new Set());
       setSelectionMode(false);
@@ -245,7 +257,9 @@ export function FormsListPage() {
       {
         onSuccess: () =>
           toast.success(
-            newStatus === "published" ? "Form published" : "Form unpublished",
+            newStatus === "published"
+              ? t("forms.published")
+              : t("forms.unpublished"),
           ),
       },
     );
@@ -287,7 +301,7 @@ export function FormsListPage() {
       return (
         <div className="flex flex-col items-center justify-center h-full gap-3">
           <p className="text-sm text-muted-foreground">
-            Sign in to see your forms.
+            {t("forms.signInPrompt")}
           </p>
           <Button
             variant="outline"
@@ -299,7 +313,7 @@ export function FormsListPage() {
               window.location.href = `/login?next=${next}`;
             }}
           >
-            Sign in
+            {t("common.signIn")}
           </Button>
         </div>
       );
@@ -307,7 +321,7 @@ export function FormsListPage() {
     const reason =
       error instanceof Error
         ? error.message.replace(/^Action list-forms failed:\s*/, "")
-        : "Couldn't load forms";
+        : t("forms.loadFailed");
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 px-4 text-center">
         <p className="text-sm text-muted-foreground max-w-sm">{reason}</p>
@@ -318,7 +332,7 @@ export function FormsListPage() {
           className="gap-2"
         >
           <IconRefresh className="h-3.5 w-3.5" />
-          Retry
+          {t("common.retry")}
         </Button>
       </div>
     );
@@ -338,11 +352,11 @@ export function FormsListPage() {
         >
           <TabsList>
             <TabsTrigger value="active" className="text-xs gap-1.5">
-              Forms
+              {t("header.forms")}
             </TabsTrigger>
             <TabsTrigger value="archive" className="text-xs gap-1.5">
               <IconArchive className="h-3.5 w-3.5" />
-              Archive
+              {t("forms.archive")}
             </TabsTrigger>
           </TabsList>
         </Tabs>
@@ -360,7 +374,7 @@ export function FormsListPage() {
             }}
           >
             <IconChecks className="h-3.5 w-3.5" />
-            {selectionMode ? "Done" : "Select"}
+            {selectionMode ? t("common.done") : t("common.select")}
           </Button>
         )}
       </div>
@@ -368,7 +382,10 @@ export function FormsListPage() {
       {selectionMode && forms.length > 0 && (
         <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2">
           <span className="text-xs font-medium text-foreground">
-            {selectedCount} selected
+            {t("forms.selectedCount", {
+              count: selectedCount,
+              formattedCount: formatNumber(selectedCount),
+            })}
           </span>
           <div className="h-4 w-px bg-border" />
           <Button
@@ -377,7 +394,7 @@ export function FormsListPage() {
             className="h-8 text-xs"
             onClick={toggleSelectAll}
           >
-            {allFormsSelected ? "Clear all" : "Select all"}
+            {allFormsSelected ? t("common.clearAll") : t("common.selectAll")}
           </Button>
           <Button
             variant="ghost"
@@ -389,14 +406,14 @@ export function FormsListPage() {
             disabled={selectedCount === 0 || bulkDeletePending}
           >
             <IconTrash className="h-3.5 w-3.5" />
-            {isArchive ? "Delete forever" : "Move to Archive"}
+            {isArchive ? t("forms.deleteForever") : t("forms.moveToArchive")}
           </Button>
           <Button
             variant="ghost"
             size="icon"
             className="ms-auto h-8 w-8"
             onClick={clearSelection}
-            aria-label="Exit selection mode"
+            aria-label={t("forms.exitSelectionMode")}
           >
             <IconX className="h-3.5 w-3.5" />
           </Button>
@@ -407,21 +424,22 @@ export function FormsListPage() {
         <div className="flex flex-col items-center justify-center py-20 border border-dashed border-border rounded-xl">
           {isArchive ? (
             <>
-              <h3 className="font-medium mb-1">Archive is empty</h3>
+              <h3 className="font-medium mb-1">
+                {t("forms.archiveEmptyTitle")}
+              </h3>
               <p className="text-sm text-muted-foreground">
-                Deleted forms appear here. Their responses are kept until you
-                permanently delete them.
+                {t("forms.archiveEmptyDescription")}
               </p>
             </>
           ) : (
             <>
-              <h3 className="font-medium mb-1">No forms yet</h3>
+              <h3 className="font-medium mb-1">{t("forms.emptyTitle")}</h3>
               <p className="text-sm text-muted-foreground mb-4">
-                Create your first form to get started
+                {t("forms.emptyDescription")}
               </p>
               <Button onClick={handleCreate} size="sm" className="gap-2">
                 <IconPlus className="h-4 w-4" />
-                Create Form
+                {t("forms.createForm")}
               </Button>
             </>
           )}
@@ -481,7 +499,9 @@ export function FormsListPage() {
                         checked={selected}
                         onCheckedChange={() => toggleSelection(form.id)}
                         onClick={(e) => e.stopPropagation()}
-                        aria-label={`Select ${form.title}`}
+                        aria-label={t("forms.selectForm", {
+                          title: form.title,
+                        })}
                         className="mt-0.5 shrink-0"
                       />
                     )}
@@ -512,7 +532,7 @@ export function FormsListPage() {
                           variant="ghost"
                           size="sm"
                           className="h-10 w-10 sm:h-8 sm:w-8 p-0 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100"
-                          aria-label="Form actions"
+                          aria-label={t("forms.formActions")}
                         >
                           <IconDots className="h-4 w-4" />
                         </Button>
@@ -527,7 +547,7 @@ export function FormsListPage() {
                               }}
                             >
                               <IconChartBar className="h-4 w-4 me-2" />
-                              View Responses
+                              {t("forms.viewResponses")}
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               onClick={(e) => {
@@ -536,7 +556,7 @@ export function FormsListPage() {
                               }}
                             >
                               <IconArchiveOff className="h-4 w-4 me-2" />
-                              Restore
+                              {t("forms.restore")}
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               className="text-destructive"
@@ -546,7 +566,7 @@ export function FormsListPage() {
                               }}
                             >
                               <IconTrash className="h-4 w-4 me-2" />
-                              Delete forever
+                              {t("forms.deleteForever")}
                             </DropdownMenuItem>
                           </>
                         ) : (
@@ -575,7 +595,7 @@ export function FormsListPage() {
                                   }}
                                 >
                                   <IconExternalLink className="h-4 w-4 me-2" />
-                                  Open
+                                  {t("common.open")}
                                 </DropdownMenuItem>
                               );
                             }
@@ -588,7 +608,7 @@ export function FormsListPage() {
                                   }}
                                 >
                                   <IconChartBar className="h-4 w-4 me-2" />
-                                  View Responses
+                                  {t("forms.viewResponses")}
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
                                   onClick={(e) => {
@@ -598,8 +618,8 @@ export function FormsListPage() {
                                 >
                                   <IconExternalLink className="h-4 w-4 me-2" />
                                   {form.status === "published"
-                                    ? "Unpublish"
-                                    : "Publish"}
+                                    ? t("forms.unpublish")
+                                    : t("forms.publish")}
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
                                   onClick={(e) => {
@@ -608,7 +628,7 @@ export function FormsListPage() {
                                   }}
                                 >
                                   <IconCopy className="h-4 w-4 me-2" />
-                                  Duplicate
+                                  {t("forms.duplicate")}
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
                                   className="text-destructive"
@@ -618,7 +638,7 @@ export function FormsListPage() {
                                   }}
                                 >
                                   <IconTrash className="h-4 w-4 me-2" />
-                                  Delete
+                                  {t("common.delete")}
                                 </DropdownMenuItem>
                               </>
                             );
@@ -641,12 +661,23 @@ export function FormsListPage() {
                   </Badge>
                   <div className="flex min-w-0 flex-wrap items-center justify-end gap-x-3 gap-y-1 text-xs text-muted-foreground">
                     <span className="block min-w-0 max-w-full truncate">
-                      {form.responseCount ?? 0} responses
+                      {t("responses.totalCount", {
+                        count: form.responseCount ?? 0,
+                        formattedCount: formatNumber(form.responseCount ?? 0),
+                      })}
                     </span>
                     <span className="block min-w-0 max-w-full truncate">
                       {isArchive && (form as any).deletedAt
-                        ? `Deleted ${format(new Date((form as any).deletedAt), "MMM d")}`
-                        : format(new Date(form.createdAt), "MMM d")}
+                        ? t("forms.deletedDate", {
+                            date: formatDate((form as any).deletedAt, {
+                              month: "short",
+                              day: "numeric",
+                            }),
+                          })
+                        : formatDate(form.createdAt, {
+                            month: "short",
+                            day: "numeric",
+                          })}
                     </span>
                   </div>
                 </div>
@@ -664,19 +695,18 @@ export function FormsListPage() {
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Permanently delete this form?</AlertDialogTitle>
+            <AlertDialogTitle>{t("forms.purgeTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
-              The form and all its responses will be deleted forever. This
-              cannot be undone.
+              {t("forms.purgeDescription")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={handlePurge}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              Delete forever
+              {t("forms.deleteForever")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -685,25 +715,24 @@ export function FormsListPage() {
       <AlertDialog open={bulkPurgeOpen} onOpenChange={setBulkPurgeOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>
-              Permanently delete selected forms?
-            </AlertDialogTitle>
+            <AlertDialogTitle>{t("forms.bulkPurgeTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
-              The {selectedCount} selected{" "}
-              {selectedCount === 1 ? "form" : "forms"} and their responses will
-              be deleted forever. This cannot be undone.
+              {t("forms.bulkPurgeDescription", {
+                count: selectedCount,
+                formattedCount: formatNumber(selectedCount),
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={bulkDeletePending}>
-              Cancel
+              {t("common.cancel")}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={() => handleBulkDelete(true)}
               disabled={bulkDeletePending}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              Delete forever
+              {t("forms.deleteForever")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -711,8 +740,8 @@ export function FormsListPage() {
 
       {showCloudUpgrade && (
         <CloudUpgrade
-          title="Publish Form"
-          description="To publish forms publicly, connect a cloud database so submissions can be received from anywhere."
+          title={t("forms.publishCloudTitle")}
+          description={t("forms.publishCloudDescription")}
           onClose={() => setShowCloudUpgrade(false)}
         />
       )}

package/corpus/templates/forms/app/pages/ResponsesPage.tsx

@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useFormatters, useT } from "@agent-native/core/client";
 import { cn } from "@/lib/utils";
 import { normalizeFields } from "@/lib/normalize-fields";
 import { useForm } from "@/hooks/use-forms";
@@ -81,6 +82,8 @@ function compareValues(a: unknown, b: unknown): number {
 }
 
 export function ResponsesPage() {
+  const t = useT();
+  const { formatDate, formatNumber } = useFormatters();
   const { id } = useParams<{ id: string }>();
   const { data: form } = useForm(id!);
   const { data, isLoading, error, refetch } = useFormResponses(id!);
@@ -244,7 +247,7 @@ export function ResponsesPage() {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
         <p className="text-sm text-muted-foreground">
-          Failed to load responses
+          {t("responses.failedLoad")}
         </p>
         <Button
           variant="outline"
@@ -253,7 +256,7 @@ export function ResponsesPage() {
           className="gap-2"
         >
           <IconRefresh className="h-3.5 w-3.5" />
-          Retry
+          {t("common.retry")}
         </Button>
       </div>
     );
@@ -272,8 +275,10 @@ export function ResponsesPage() {
           >
             <Link to={`/forms/${id}`}>
               <IconArrowLeft className="h-3.5 w-3.5" />
-              <span className="hidden sm:inline">Back to Builder</span>
-              <span className="sm:hidden">Back</span>
+              <span className="hidden sm:inline">
+                {t("responses.backToBuilder")}
+              </span>
+              <span className="sm:hidden">{t("common.back")}</span>
             </Link>
           </Button>
           <span className="text-sm font-medium truncate hidden sm:block">
@@ -281,8 +286,14 @@ export function ResponsesPage() {
           </span>
           <Badge variant="secondary" className="text-xs shrink-0">
             {search.trim() && filteredSorted.length !== total
-              ? `${filteredSorted.length} of ${total}`
-              : `${total} response${total !== 1 ? "s" : ""}`}
+              ? t("responses.filteredCount", {
+                  count: formatNumber(filteredSorted.length),
+                  total: formatNumber(total),
+                })
+              : t("responses.totalCount", {
+                  count: total,
+                  formattedCount: formatNumber(total),
+                })}
           </Badge>
         </div>
         <div className="flex items-center gap-2 shrink-0">
@@ -292,7 +303,7 @@ export function ResponsesPage() {
               <Input
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                placeholder="Filter responses..."
+                placeholder={t("responses.filterPlaceholder")}
                 className="h-8 pl-7 w-48 text-xs"
               />
             </div>
@@ -305,8 +316,8 @@ export function ResponsesPage() {
             disabled={filteredSorted.length === 0}
           >
             <IconDownload className="h-3.5 w-3.5" />
-            <span className="hidden sm:inline">Export CSV</span>
-            <span className="sm:hidden">Export</span>
+            <span className="hidden sm:inline">{t("responses.exportCsv")}</span>
+            <span className="sm:hidden">{t("responses.export")}</span>
           </Button>
         </div>
       </div>
@@ -319,7 +330,7 @@ export function ResponsesPage() {
             <Input
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              placeholder="Filter responses..."
+              placeholder={t("responses.filterPlaceholder")}
               className="h-8 pl-7 text-xs"
             />
           </div>
@@ -329,16 +340,16 @@ export function ResponsesPage() {
       {/* Table */}
       {responses.length === 0 ? (
         <div className="flex flex-col items-center justify-center flex-1 py-20">
-          <h3 className="font-medium mb-1">No responses yet</h3>
+          <h3 className="font-medium mb-1">{t("responses.emptyTitle")}</h3>
           <p className="text-sm text-muted-foreground">
-            Share your form to start collecting responses
+            {t("responses.emptyDescription")}
           </p>
         </div>
       ) : filteredSorted.length === 0 ? (
         <div className="flex flex-col items-center justify-center flex-1 py-20">
-          <h3 className="font-medium mb-1">No matches</h3>
+          <h3 className="font-medium mb-1">{t("responses.noMatchesTitle")}</h3>
           <p className="text-sm text-muted-foreground">
-            No responses contain "{search}"
+            {t("responses.noMatchesDescription", { search })}
           </p>
         </div>
       ) : (
@@ -367,14 +378,14 @@ export function ResponsesPage() {
                     #
                   </th>
                   <SortableHeader
-                    label="Submitted"
+                    label={t("responses.submitted")}
                     active={sortKey === "_submitted"}
                     dir={sortDir}
                     onClick={() => toggleSort("_submitted")}
                   />
                   {hasSubmitterEmail ? (
                     <SortableHeader
-                      label="Email"
+                      label={t("responses.email")}
                       active={sortKey === "_email"}
                       dir={sortDir}
                       onClick={() => toggleSort("_email")}
@@ -382,7 +393,7 @@ export function ResponsesPage() {
                   ) : null}
                   {hasPageUrl ? (
                     <SortableHeader
-                      label="Page"
+                      label={t("responses.page")}
                       active={sortKey === "_page"}
                       dir={sortDir}
                       onClick={() => toggleSort("_page")}
@@ -390,7 +401,7 @@ export function ResponsesPage() {
                   ) : null}
                   {hasClientSurface ? (
                     <SortableHeader
-                      label="Source"
+                      label={t("responses.source")}
                       active={sortKey === "_source"}
                       dir={sortDir}
                       onClick={() => toggleSort("_source")}
@@ -417,7 +428,12 @@ export function ResponsesPage() {
                       {filteredSorted.length - idx}
                     </td>
                     <td className="min-w-36 px-4 py-2.5 text-xs text-muted-foreground whitespace-nowrap">
-                      {format(new Date(response.submittedAt), "MMM d, h:mm a")}
+                      {formatDate(response.submittedAt, {
+                        month: "short",
+                        day: "numeric",
+                        hour: "numeric",
+                        minute: "2-digit",
+                      })}
                     </td>
                     {hasSubmitterEmail ? (
                       <td className="w-56 px-4 py-3 align-top text-xs text-muted-foreground whitespace-normal break-words">
@@ -506,6 +522,7 @@ function SortableHeader(props: {
   dir: SortDir;
   onClick: () => void;
 }) {
+  const t = useT();
   const { label, active, dir, onClick } = props;
   const Icon = !active
     ? IconArrowsSort
@@ -524,7 +541,7 @@ function SortableHeader(props: {
           "inline-flex items-center gap-1 cursor-pointer hover:text-foreground",
           active && "text-foreground",
         )}
-        aria-label={`Sort by ${label}`}
+        aria-label={t("responses.sortBy", { label })}
       >
         {label}
         <Icon className="h-3 w-3 opacity-60" />