@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/design/app/pages/Index.tsx

@@ -1,4 +1,8 @@
-import { useActionQuery, useActionMutation } from "@agent-native/core/client";
+import {
+  useActionQuery,
+  useActionMutation,
+  useT,
+} from "@agent-native/core/client";
 import type { PromptComposerSubmitOptions } from "@agent-native/core/client";
 import {
   IconChecks,
@@ -69,6 +73,7 @@ interface Design {
 }
 
 export default function Index() {
+  const t = useT();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const [search, setSearch] = useState("");
@@ -104,7 +109,7 @@ export default function Index() {
     isLoading: designSystemsLoading,
   } = useDesignSystems();
 
-  const designs: Design[] = designsData?.designs ?? [];
+  const designs = designsData?.designs ?? [];
 
   const filtered = search
     ? designs.filter(
@@ -373,13 +378,9 @@ export default function Index() {
   }, [renameId, renameDraft, queryClient, updateMutation]);
 
   const projectTypeBadge = (type: ProjectType) => {
-    const labels: Record<ProjectType, string> = {
-      prototype: "Prototype",
-      other: "Other",
-    };
     return (
       <Badge variant="secondary" className="text-[10px] font-medium">
-        {labels[type] ?? type}
+        {type === "prototype" ? t("home.prototype") : t("home.other")}
       </Badge>
     );
   };
@@ -394,7 +395,7 @@ export default function Index() {
     });
   };
 
-  useSetPageTitle("Designs");
+  useSetPageTitle(t("home.pageTitle"));
 
   useSetHeaderActions(
     <div className="flex items-center gap-3">
@@ -404,14 +405,14 @@ export default function Index() {
           <Input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search designs..."
+            placeholder={t("home.searchPlaceholder")}
             className="ps-8 h-8 w-48 bg-accent/50 border-border text-sm text-foreground/90 placeholder:text-muted-foreground/70"
           />
         </div>
       ) : null}
       <Button size="sm" onClick={openNewDesign} className="cursor-pointer">
         <IconPlus className="w-3.5 h-3.5" />
-        New Design
+        {t("home.newDesign")}
       </Button>
     </div>,
   );
@@ -432,9 +433,8 @@ export default function Index() {
               <div className="-mt-4 mb-3 flex flex-wrap items-center justify-between gap-3 px-1 py-1 sm:-mt-6">
                 <div className="text-sm text-muted-foreground">
                   <span className="font-medium text-foreground">
-                    {selectedDesignCount}
-                  </span>{" "}
-                  selected
+                    {t("home.selected", { count: selectedDesignCount })}
+                  </span>
                 </div>
                 <div className="flex items-center gap-1">
                   <Tooltip>
@@ -445,8 +445,8 @@ export default function Index() {
                         onClick={toggleVisibleSelection}
                         aria-label={
                           allVisibleSelected
-                            ? "Clear visible selection"
-                            : "Select visible designs"
+                            ? t("home.clearVisibleSelection")
+                            : t("home.selectVisibleDesigns")
                         }
                         className="h-8 w-8 cursor-pointer"
                       >
@@ -455,8 +455,8 @@ export default function Index() {
                     </TooltipTrigger>
                     <TooltipContent>
                       {allVisibleSelected
-                        ? "Clear visible selection"
-                        : "Select visible designs"}
+                        ? t("home.clearVisibleSelection")
+                        : t("home.selectVisibleDesigns")}
                     </TooltipContent>
                   </Tooltip>
                   <Tooltip>
@@ -465,13 +465,13 @@ export default function Index() {
                         variant="ghost"
                         size="icon"
                         onClick={clearSelection}
-                        aria-label="Clear selection"
+                        aria-label={t("home.clearSelection")}
                         className="h-8 w-8 cursor-pointer"
                       >
                         <IconX className="w-4 h-4" />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>Clear selection</TooltipContent>
+                    <TooltipContent>{t("home.clearSelection")}</TooltipContent>
                   </Tooltip>
                   <Button
                     variant="destructive"
@@ -480,7 +480,7 @@ export default function Index() {
                     className="cursor-pointer"
                   >
                     <IconTrash className="w-3.5 h-3.5" />
-                    Delete
+                    {t("home.delete")}
                   </Button>
                 </div>
               </div>
@@ -499,10 +499,10 @@ export default function Index() {
                 </div>
                 <div className="p-4">
                   <h3 className="font-medium text-sm text-muted-foreground group-hover:text-foreground/70">
-                    New Design
+                    {t("home.newDesign")}
                   </h3>
                   <div className="text-xs text-muted-foreground/70 mt-1">
-                    Create a design project
+                    {t("home.createDesignProject")}
                   </div>
                 </div>
               </button>
@@ -555,11 +555,15 @@ export default function Index() {
                               toggleDesignSelection(design.id)
                             }
                             onClick={(event) => event.stopPropagation()}
-                            aria-label={`Select ${design.title}`}
+                            aria-label={t("home.selectDesign", {
+                              title: design.title,
+                            })}
                             className="h-5 w-5 border-white/70 bg-black/65 text-white shadow-sm data-[state=checked]:border-[#609FF8] data-[state=checked]:bg-[#609FF8]"
                           />
                         </TooltipTrigger>
-                        <TooltipContent>{`Select ${design.title}`}</TooltipContent>
+                        <TooltipContent>
+                          {t("home.selectDesign", { title: design.title })}
+                        </TooltipContent>
                       </Tooltip>
                     </div>
                     {/* Three-dot menu */}
@@ -569,7 +573,9 @@ export default function Index() {
                           <Button
                             variant="ghost"
                             size="icon"
-                            aria-label={`Actions for ${design.title}`}
+                            aria-label={t("home.actionsForDesign", {
+                              title: design.title,
+                            })}
                             className="h-7 w-7 bg-black/60 hover:bg-black/80 cursor-pointer"
                           >
                             <IconDots className="w-3.5 h-3.5 text-foreground/70" />
@@ -581,21 +587,21 @@ export default function Index() {
                             className="cursor-pointer"
                           >
                             <IconPencil className="w-3.5 h-3.5 me-2" />
-                            Rename
+                            {t("home.rename")}
                           </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => handleDuplicate(design.id)}
                             className="cursor-pointer"
                           >
                             <IconCopy className="w-3.5 h-3.5 me-2" />
-                            Duplicate
+                            {t("home.duplicate")}
                           </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => setDeleteId(design.id)}
                             className="text-red-400 focus:text-red-400 cursor-pointer"
                           >
                             <IconTrash className="w-3.5 h-3.5 me-2" />
-                            Delete
+                            {t("home.delete")}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
@@ -611,8 +617,8 @@ export default function Index() {
       <PromptPopover
         open={showNewPrompt}
         onOpenChange={handleNewPromptOpenChange}
-        title="New design"
-        placeholder="Describe what you want to build..."
+        title={t("home.newDesignLower")}
+        placeholder={t("home.describeBuild")}
         onSubmit={handleSubmitPrompt}
         anchorRef={anchorRef}
         designSystems={designSystems}
@@ -639,30 +645,34 @@ export default function Index() {
           <AlertDialogHeader>
             <AlertDialogTitle>
               {bulkDeleteOpen
-                ? `Delete ${selectedDesignCount} ${
-                    selectedDesignCount === 1 ? "Design" : "Designs"
-                  }?`
-                : "Delete Design?"}
+                ? selectedDesignCount === 1
+                  ? t("home.deleteSingleDesignsTitle", {
+                      count: selectedDesignCount,
+                    })
+                  : t("home.deleteDesignsTitle", {
+                      count: selectedDesignCount,
+                    })
+                : t("home.deleteDesignTitle")}
             </AlertDialogTitle>
             <AlertDialogDescription>
               {bulkDeleteOpen
-                ? `This will permanently delete ${
-                    selectedDesignCount === 1
-                      ? "this design and all its files"
-                      : `these ${selectedDesignCount} designs and all their files`
-                  }. This action cannot be undone.`
-                : "This will permanently delete this design and all its files. This action cannot be undone."}
+                ? selectedDesignCount === 1
+                  ? t("home.deleteDesignDescription")
+                  : t("home.deleteDesignsDescription", {
+                      count: selectedDesignCount,
+                    })
+                : t("home.deleteDesignDescription")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel className="cursor-pointer">
-              Cancel
+              {t("home.cancel")}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={bulkDeleteOpen ? handleBulkDelete : handleDelete}
               className="bg-red-600 hover:bg-red-700 cursor-pointer"
             >
-              Delete
+              {t("home.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -677,7 +687,7 @@ export default function Index() {
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Rename design</AlertDialogTitle>
+            <AlertDialogTitle>{t("home.renameDesign")}</AlertDialogTitle>
           </AlertDialogHeader>
           <Input
             value={renameDraft}
@@ -689,19 +699,19 @@ export default function Index() {
                 commitRename();
               }
             }}
-            placeholder="Design name"
+            placeholder={t("home.designName")}
             className="h-9 text-sm"
           />
           <AlertDialogFooter>
             <AlertDialogCancel className="cursor-pointer">
-              Cancel
+              {t("home.cancel")}
             </AlertDialogCancel>
             <AlertDialogAction
               onClick={commitRename}
               disabled={!renameDraft.trim()}
               className="cursor-pointer"
             >
-              Save
+              {t("home.save")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -743,6 +753,7 @@ function derivePromptTitle(prompt: string): string {
  * granting arbitrary design HTML access to the host origin.
  */
 function DesignThumbnail({ html }: { html: string | null }) {
+  const t = useT();
   const containerRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(0.25);
 
@@ -784,7 +795,7 @@ function DesignThumbnail({ html }: { html: string | null }) {
         loading="lazy"
         tabIndex={-1}
         aria-hidden
-        title="Design preview"
+        title={t("home.designPreview")}
         style={{
           width: `${NATURAL_WIDTH}px`,
           height: `${NATURAL_HEIGHT}px`,
@@ -824,24 +835,24 @@ function LoadingSkeleton() {
 // an empty composer. Keep these distinct enough that the four results would
 // all look meaningfully different — same approach as Phase 2 variant
 // generation in the design agent.
-const STARTER_PROMPTS: { label: string; prompt: string }[] = [
+const STARTER_PROMPTS: { labelKey: string; prompt: string }[] = [
   {
-    label: "SaaS landing page",
+    labelKey: "home.starterSaas",
     prompt:
       "A modern SaaS landing page with a dark theme, hero section, three feature cards, and a final CTA section.",
   },
   {
-    label: "Dashboard",
+    labelKey: "home.starterDashboard",
     prompt:
       "A clean analytics dashboard with a sidebar nav, four KPI tiles, a chart, and a recent-activity table.",
   },
   {
-    label: "Mobile app",
+    labelKey: "home.starterMobile",
     prompt:
       "A mobile app prototype shown on a phone frame, with a tab bar at the bottom and three list cards on the home screen.",
   },
   {
-    label: "Pricing page",
+    labelKey: "home.starterPricing",
     prompt:
       "A three-tier pricing page with a monthly/annual toggle, feature checklists, and a highlighted recommended tier.",
   },
@@ -854,26 +865,27 @@ function EmptyState({
   onCreateDesign: (e: React.MouseEvent<HTMLElement>) => void;
   onStarterPrompt: (prompt: string) => void;
 }) {
+  const t = useT();
   return (
     <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
       <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#609FF8]/20 to-[#4080E0]/20 border border-[#609FF8]/20 flex items-center justify-center mb-6">
         <IconPalette className="w-7 h-7 text-[#609FF8]" />
       </div>
       <h2 className="text-xl font-semibold text-foreground mb-2">
-        Create your first design
+        {t("home.createFirstDesign")}
       </h2>
       <p className="text-sm text-muted-foreground max-w-sm mb-6 leading-relaxed">
-        Pick a starting point or write your own prompt.
+        {t("home.pickStartingPoint")}
       </p>
       <div className="flex flex-wrap items-center justify-center gap-2 max-w-md mb-6">
         {STARTER_PROMPTS.map((s) => (
           <button
-            key={s.label}
+            key={s.labelKey}
             type="button"
             onClick={() => onStarterPrompt(s.prompt)}
             className="cursor-pointer rounded-full border border-border bg-card px-3 py-1.5 text-xs text-foreground/80 hover:border-foreground/30 hover:text-foreground/95 transition-colors"
           >
-            {s.label}
+            {t(s.labelKey)}
           </button>
         ))}
       </div>
@@ -885,7 +897,7 @@ function EmptyState({
         className="cursor-pointer"
       >
         <IconPlus className="w-4 h-4" />
-        New Design
+        {t("home.newDesign")}
       </Button>
     </div>
   );

package/corpus/templates/design/app/pages/NotFound.tsx

@@ -1,19 +1,21 @@
+import { useT } from "@agent-native/core/client";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { Link } from "react-router";
 
 import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
+  const t = useT();
   return (
     <div className="flex min-h-full w-full flex-col items-center justify-center bg-background px-4 py-12">
       <h1 className="text-6xl font-bold text-muted-foreground/60 mb-4">404</h1>
       <p className="text-sm text-muted-foreground mb-6">
-        The page you are looking for does not exist.
+        {t("pages.notFoundDescription")}
       </p>
       <Button asChild variant="outline" className="cursor-pointer">
         <Link to="/">
           <IconArrowLeft className="w-4 h-4 rtl:-scale-x-100" />
-          Back to designs
+          {t("pages.notFoundBackToDesigns")}
         </Link>
       </Button>
     </div>

package/corpus/templates/design/app/pages/Present.tsx

@@ -109,7 +109,7 @@ export default function Present() {
 
       {/* Exit hint */}
       <div className="fixed top-4 right-4 text-xs text-white/20">
-        Press Esc to exit
+        {t("pages.presentExitHint")}
       </div>
     </div>
   );

package/corpus/templates/design/app/pages/Templates.tsx

@@ -4,6 +4,7 @@ import {
   useActionMutation,
   useActionQuery,
   useSession,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconAd,
@@ -60,6 +61,7 @@ function isAuthUnavailableError(error: unknown): boolean {
 }
 
 export default function Templates() {
+  const t = useT();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const createMutation = useActionMutation("create-design");
@@ -84,7 +86,7 @@ export default function Templates() {
     );
   }, [defaultDesignSystem]);
 
-  useSetPageTitle("Templates");
+  useSetPageTitle(t("navigation.templates"));
 
   const handleUseTemplate = async (template: DesignTemplate) => {
     if (sessionLoading) return;
@@ -98,17 +100,22 @@ export default function Templates() {
     let format: unknown = null;
     try {
       format = await askUserQuestion({
-        question: `What format should this ${template.title.toLowerCase()} target?`,
-        header: "Format",
+        question: t("templatesPage.formatQuestion", {
+          title: template.title.toLowerCase(),
+        }),
+        header: t("templatesPage.formatHeader"),
         options: [
           {
-            label: "Desktop",
+            label: t("templatesPage.desktop"),
             value: "desktop, 1280px wide",
             recommended: true,
           },
-          { label: "Mobile", value: "mobile, 390px wide" },
-          { label: "Tablet", value: "tablet, 1024px wide" },
-          { label: "Social square", value: "social square, 1080×1080" },
+          { label: t("templatesPage.mobile"), value: "mobile, 390px wide" },
+          { label: t("templatesPage.tablet"), value: "tablet, 1024px wide" },
+          {
+            label: t("templatesPage.socialSquare"),
+            value: "social square, 1080×1080",
+          },
         ],
         allowFreeText: false,
       });
@@ -199,16 +206,15 @@ export default function Templates() {
         <div className="mb-8 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
           <div>
             <h2 className="text-base font-semibold text-foreground">
-              Marketing templates
+              {t("templatesPage.title")}
             </h2>
             <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Sized, editable starter designs for launches, ads, decks, events,
-              and PDF handouts.
+              {t("templatesPage.description")}
             </p>
           </div>
           {defaultDesignSystem ? (
             <div className="rounded-full border border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground">
-              Brand: {defaultDesignSystem.title}
+              {t("templatesPage.brand", { title: defaultDesignSystem.title })}
             </div>
           ) : null}
         </div>
@@ -247,7 +253,7 @@ export default function Templates() {
                     onClick={() => handleUseTemplate(template)}
                     className="w-full cursor-pointer"
                   >
-                    Use template
+                    {t("templatesPage.useTemplate")}
                     <IconArrowRight className="h-3.5 w-3.5 rtl:-scale-x-100" />
                   </Button>
                 </div>

package/corpus/templates/design/app/routes/$.tsx

@@ -1,7 +1,8 @@
+import { messagesByLocale } from "@/i18n-data";
 import NotFound from "@/pages/NotFound";
 
 export function meta() {
-  return [{ title: "Not Found - Design" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.notFound }];
 }
 
 export default function CatchAllRoute() {

package/corpus/templates/design/app/routes/design-systems.tsx

@@ -1,5 +1,6 @@
 export { default } from "../pages/DesignSystems";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Design Systems" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.designSystems }];
 }

package/corpus/templates/design/app/routes/design-systems_.setup.tsx

@@ -1,5 +1,6 @@
 export { default } from "../pages/DesignSystemSetup";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Design System Setup" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.designSystemSetup }];
 }

package/corpus/templates/design/app/routes/design.$id.tsx

@@ -1,5 +1,6 @@
 export { default } from "../pages/DesignEditor";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Design Editor" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.designEditor }];
 }

package/corpus/templates/design/app/routes/examples.tsx

@@ -1,11 +1,13 @@
 import { redirect } from "react-router";
 
+import { messagesByLocale } from "@/i18n-data";
+
 export function loader() {
   return redirect("/templates", 301);
 }
 
 export function meta() {
-  return [{ title: "Design Templates" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.designTemplates }];
 }
 
 export default function ExamplesRedirect() {

package/corpus/templates/design/app/routes/extensions.$id.tsx

@@ -1,7 +1,9 @@
 import { ExtensionViewerPage } from "@agent-native/core/client/extensions";
 
+import { messagesByLocale } from "@/i18n-data";
+
 export function meta() {
-  return [{ title: "Tool — Design" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.toolDesign }];
 }
 
 export default function ExtensionViewerRoute() {

package/corpus/templates/design/app/routes/extensions._index.tsx

@@ -1,7 +1,9 @@
 import { ExtensionsListPage } from "@agent-native/core/client/extensions";
 
+import { messagesByLocale } from "@/i18n-data";
+
 export function meta() {
-  return [{ title: "Extensions — Design" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.extensionsDesign }];
 }
 
 export default function ExtensionsRoute() {

package/corpus/templates/design/app/routes/extensions.tsx

@@ -1,7 +1,9 @@
 import { Outlet } from "react-router";
 
+import { messagesByLocale } from "@/i18n-data";
+
 export function meta() {
-  return [{ title: "Extensions — Design" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.extensionsDesign }];
 }
 
 export default function ExtensionsLayout() {

package/corpus/templates/design/app/routes/observability.tsx

@@ -1,7 +1,9 @@
 import { ObservabilityDashboard } from "@agent-native/core/client";
 
+import { messagesByLocale } from "@/i18n-data";
+
 export function meta() {
-  return [{ title: "Agent Observability" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.agentObservability }];
 }
 
 export default function ObservabilityPage() {

package/corpus/templates/design/app/routes/present.$id.tsx

@@ -1,5 +1,6 @@
 export { default } from "../pages/Present";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Design Preview" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.designPreview }];
 }

package/corpus/templates/design/app/routes/settings.tsx

@@ -15,11 +15,12 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import { messagesByLocale } from "@/i18n-data";
 
 import changelog from "../../CHANGELOG.md?raw";
 
 export function meta() {
-  return [{ title: "Settings — Design" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.settingsDesign }];
 }
 
 export default function SettingsRoute() {

package/corpus/templates/design/app/routes/team.tsx

@@ -1,8 +1,10 @@
 import { useT } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 
+import { messagesByLocale } from "@/i18n-data";
+
 export function meta() {
-  return [{ title: "Team - Design" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.teamDesign }];
 }
 
 export default function TeamRoute() {

package/corpus/templates/design/app/routes/templates.tsx

@@ -1,5 +1,6 @@
 export { default } from "../pages/Templates";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Design Templates" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.designTemplates }];
 }