@agent-native/core 0.77.2 → 0.77.4

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

@@ -15,10 +15,12 @@ import {
 import { Label } from "@agent-native/dispatch/components/ui/label";
 import { Link } from "react-router";
 
+import { messagesByLocale } from "@/i18n-data";
+
 import changelog from "../../CHANGELOG.md?raw";
 
 export function meta() {
-  return [{ title: "Settings - Dispatch" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.settings }];
 }
 
 export default function SettingsRoute() {

package/corpus/templates/dispatch/app/routes/tools.$id.tsx

@@ -1,5 +1,6 @@
 export { default } from "@agent-native/dispatch/routes/pages/tools.$id";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Extension \u2014 Dispatch" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.extension }];
 }

package/corpus/templates/dispatch/app/routes/tools._index.tsx

@@ -1,5 +1,6 @@
 export { default } from "@agent-native/dispatch/routes/pages/tools._index";
+import { messagesByLocale } from "@/i18n-data";
 
 export function meta() {
-  return [{ title: "Extensions \u2014 Dispatch" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.extensions }];
 }

package/corpus/templates/forms/app/components/CloudUpgrade.tsx

@@ -1,4 +1,4 @@
-import { agentNativePath, appApiPath } from "@agent-native/core/client";
+import { agentNativePath, appApiPath, useT } from "@agent-native/core/client";
 import {
   IconCheck,
   IconLoader2,
@@ -28,8 +28,9 @@ interface CloudUpgradeProps {
 
 interface Provider {
   id: string;
-  name: string;
-  description: string;
+  name?: string;
+  nameKey?: string;
+  descriptionKey: string;
   urlPrefix: string;
   needsAuthToken: boolean;
   steps: string[];
@@ -39,7 +40,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "turso",
     name: "Turso",
-    description: "SQLite at the edge",
+    descriptionKey: "cloudUpgrade.providerDescriptions.turso",
     urlPrefix: "libsql://",
     needsAuthToken: true,
     steps: [
@@ -53,7 +54,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "neon",
     name: "Neon",
-    description: "Serverless Postgres",
+    descriptionKey: "cloudUpgrade.providerDescriptions.neon",
     urlPrefix: "postgres://",
     needsAuthToken: false,
     steps: [
@@ -67,7 +68,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "supabase",
     name: "Supabase",
-    description: "Open source Firebase alternative",
+    descriptionKey: "cloudUpgrade.providerDescriptions.supabase",
     urlPrefix: "postgres://",
     needsAuthToken: false,
     steps: [
@@ -80,8 +81,8 @@ const PROVIDERS: Provider[] = [
   },
   {
     id: "d1",
-    name: "Cloudflare D1",
-    description: "SQLite on Cloudflare's edge",
+    nameKey: "cloudUpgrade.providerNames.d1",
+    descriptionKey: "cloudUpgrade.providerDescriptions.d1",
     urlPrefix: "d1://",
     needsAuthToken: true,
     steps: [
@@ -96,10 +97,11 @@ const PROVIDERS: Provider[] = [
 ];
 
 export function CloudUpgrade({
-  title = "Share Publicly",
-  description = "To share content publicly, connect a cloud database.",
+  title,
+  description,
   onClose,
 }: CloudUpgradeProps) {
+  const t = useT();
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [dbUrl, setDbUrl] = useState("");
   const [authToken, setAuthToken] = useState("");
@@ -110,13 +112,15 @@ export function CloudUpgrade({
   const connectingRef = useRef(false);
 
   const provider = PROVIDERS.find((p) => p.id === selectedProvider);
+  const providerName = (provider: Provider) =>
+    provider.nameKey ? t(provider.nameKey) : (provider.name ?? provider.id);
 
   const handleConnect = useCallback(async () => {
     if (connectingRef.current) return;
     connectingRef.current = true;
 
     if (!dbUrl.trim()) {
-      setErrorMsg("Database URL is required");
+      setErrorMsg(t("cloudUpgrade.databaseUrlRequired"));
       setStatus("error");
       connectingRef.current = false;
       return;
@@ -141,7 +145,7 @@ export function CloudUpgrade({
 
       if (!saveRes.ok) {
         const data = await saveRes.json().catch(() => ({}));
-        throw new Error(data.error || "Failed to save credentials");
+        throw new Error(data.error || t("cloudUpgrade.saveCredentialsFailed"));
       }
 
       // Poll db-health until it returns ok
@@ -162,9 +166,7 @@ export function CloudUpgrade({
       }
 
       if (!ok) {
-        throw new Error(
-          "Database connection failed after 30 attempts. Check your credentials.",
-        );
+        throw new Error(t("cloudUpgrade.connectionFailedAfterAttempts"));
       }
 
       setStatus("success");
@@ -172,12 +174,14 @@ export function CloudUpgrade({
         window.location.reload();
       }, 1500);
     } catch (e) {
-      setErrorMsg(e instanceof Error ? e.message : "Connection failed");
+      setErrorMsg(
+        e instanceof Error ? e.message : t("cloudUpgrade.connectionFailed"),
+      );
       setStatus("error");
     } finally {
       connectingRef.current = false;
     }
-  }, [dbUrl, authToken]);
+  }, [dbUrl, authToken, t]);
 
   const isConnecting = status === "saving" || status === "polling";
 
@@ -187,9 +191,13 @@ export function CloudUpgrade({
         <DialogHeader>
           <div className="flex items-center gap-2">
             <IconCloud className="h-5 w-5 text-primary" />
-            <DialogTitle>{title}</DialogTitle>
+            <DialogTitle>
+              {title ?? t("cloudUpgrade.sharePublicly")}
+            </DialogTitle>
           </div>
-          <DialogDescription>{description}</DialogDescription>
+          <DialogDescription>
+            {description ?? t("cloudUpgrade.sharePubliclyDescription")}
+          </DialogDescription>
         </DialogHeader>
 
         {/* Provider selection */}
@@ -213,10 +221,10 @@ export function CloudUpgrade({
                     : "text-foreground",
                 )}
               >
-                {p.name}
+                {providerName(p)}
               </span>
               <span className="mt-0.5 text-xs text-muted-foreground">
-                {p.description}
+                {t(p.descriptionKey)}
               </span>
             </button>
           ))}
@@ -226,7 +234,7 @@ export function CloudUpgrade({
         {provider && (
           <div className="rounded-lg border border-border bg-muted/30 p-3">
             <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Setup steps
+              {t("cloudUpgrade.setupSteps")}
             </p>
             <ol className="space-y-1">
               {provider.steps.map((step, i) => (
@@ -264,12 +272,14 @@ export function CloudUpgrade({
               <Label className="text-xs">
                 DATABASE_AUTH_TOKEN
                 {provider && !provider.needsAuthToken && (
-                  <span className="ml-1 text-muted-foreground">(optional)</span>
+                  <span className="ml-1 text-muted-foreground">
+                    ({t("common.optional")})
+                  </span>
                 )}
               </Label>
               <Input
                 type="password"
-                placeholder="Auth token"
+                placeholder={t("cloudUpgrade.authToken")}
                 value={authToken}
                 onChange={(e) => setAuthToken(e.target.value)}
                 disabled={isConnecting}
@@ -288,7 +298,7 @@ export function CloudUpgrade({
         {status === "success" && (
           <div className="flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400">
             <IconCheck className="h-3.5 w-3.5" />
-            <span>Connected successfully. Reloading...</span>
+            <span>{t("cloudUpgrade.connectedReloading")}</span>
           </div>
         )}
 
@@ -303,14 +313,14 @@ export function CloudUpgrade({
               <IconLoader2 className="h-4 w-4 animate-spin" />
               <span>
                 {status === "saving"
-                  ? "Saving credentials..."
-                  : "Testing connection..."}
+                  ? t("cloudUpgrade.savingCredentials")
+                  : t("cloudUpgrade.testingConnection")}
               </span>
             </>
           ) : (
             <>
               <IconDatabase className="h-4 w-4" />
-              <span>Test & Connect</span>
+              <span>{t("cloudUpgrade.testAndConnect")}</span>
             </>
           )}
         </Button>

package/corpus/templates/forms/app/components/ThemeToggle.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 
@@ -10,6 +11,7 @@ import {
 import { cn } from "@/lib/utils";
 
 export function ThemeToggle({ className }: { className?: string }) {
+  const t = useT();
   const { resolvedTheme, setTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
 
@@ -29,7 +31,7 @@ export function ThemeToggle({ className }: { className?: string }) {
           )}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>Toggle theme</TooltipContent>
+      <TooltipContent>{t("root.toggleTheme")}</TooltipContent>
     </Tooltip>
   );
 }

package/corpus/templates/forms/app/components/builder/FieldPropertiesPanel.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { FormField, FormFieldType } from "@shared/types";
 import { IconPlus, IconX } from "@tabler/icons-react";
 import { useState } from "react";
@@ -23,17 +24,17 @@ interface FieldPropertiesPanelProps {
 }
 
 const fieldTypeLabels: Record<FormFieldType, string> = {
-  text: "Short Text",
-  email: "Email",
-  number: "Number",
-  textarea: "Long Text",
-  select: "Dropdown",
-  multiselect: "Multi-select",
-  checkbox: "Checkbox",
-  radio: "Radio Buttons",
-  date: "Date",
-  rating: "Rating",
-  scale: "Scale",
+  text: "fieldProperties.fieldTypes.text", // i18n-ignore stable catalog key
+  email: "fieldProperties.fieldTypes.email", // i18n-ignore stable catalog key
+  number: "fieldProperties.fieldTypes.number", // i18n-ignore stable catalog key
+  textarea: "fieldProperties.fieldTypes.textarea", // i18n-ignore stable catalog key
+  select: "fieldProperties.fieldTypes.select", // i18n-ignore stable catalog key
+  multiselect: "fieldProperties.fieldTypes.multiselect", // i18n-ignore stable catalog key
+  checkbox: "fieldProperties.fieldTypes.checkbox", // i18n-ignore stable catalog key
+  radio: "fieldProperties.fieldTypes.radio", // i18n-ignore stable catalog key
+  date: "fieldProperties.fieldTypes.date", // i18n-ignore stable catalog key
+  rating: "fieldProperties.fieldTypes.rating", // i18n-ignore stable catalog key
+  scale: "fieldProperties.fieldTypes.scale", // i18n-ignore stable catalog key
 };
 
 const hasOptions: FormFieldType[] = ["select", "multiselect", "radio"];
@@ -43,6 +44,7 @@ export function FieldPropertiesPanel({
   onChange,
   onDelete,
 }: FieldPropertiesPanelProps) {
+  const t = useT();
   const [newOption, setNewOption] = useState("");
 
   function update(partial: Partial<FormField>) {
@@ -64,21 +66,21 @@ export function FieldPropertiesPanel({
   return (
     <div className="space-y-5 p-4">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-semibold">Field Properties</h3>
+        <h3 className="text-sm font-semibold">{t("fieldProperties.title")}</h3>
         <Button
           variant="ghost"
           size="sm"
           className="text-destructive h-7 px-2 text-xs"
           onClick={onDelete}
         >
-          Delete
+          {t("common.delete")}
         </Button>
       </div>
 
       <div className="space-y-3">
         {/* Field type */}
         <div className="space-y-1.5">
-          <Label className="text-xs">Type</Label>
+          <Label className="text-xs">{t("fieldProperties.type")}</Label>
           <Select
             value={field.type}
             onValueChange={(v) => update({ type: v as FormFieldType })}
@@ -87,9 +89,9 @@ export function FieldPropertiesPanel({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {Object.entries(fieldTypeLabels).map(([value, label]) => (
+              {Object.entries(fieldTypeLabels).map(([value, labelKey]) => (
                 <SelectItem key={value} value={value} className="text-xs">
-                  {label}
+                  {t(labelKey)}
                 </SelectItem>
               ))}
             </SelectContent>
@@ -98,7 +100,7 @@ export function FieldPropertiesPanel({
 
         {/* Label */}
         <div className="space-y-1.5">
-          <Label className="text-xs">Label</Label>
+          <Label className="text-xs">{t("fieldProperties.label")}</Label>
           <Input
             value={field.label}
             onChange={(e) => update({ label: e.target.value })}
@@ -108,7 +110,7 @@ export function FieldPropertiesPanel({
 
         {/* Placeholder */}
         <div className="space-y-1.5">
-          <Label className="text-xs">Placeholder</Label>
+          <Label className="text-xs">{t("fieldProperties.placeholder")}</Label>
           <Input
             value={field.placeholder || ""}
             onChange={(e) => update({ placeholder: e.target.value })}
@@ -118,7 +120,7 @@ export function FieldPropertiesPanel({
 
         {/* Description */}
         <div className="space-y-1.5">
-          <Label className="text-xs">Help text</Label>
+          <Label className="text-xs">{t("fieldProperties.helpText")}</Label>
           <Textarea
             value={field.description || ""}
             onChange={(e) => update({ description: e.target.value })}
@@ -131,7 +133,7 @@ export function FieldPropertiesPanel({
 
         {/* Required */}
         <div className="flex items-center justify-between">
-          <Label className="text-xs">Required</Label>
+          <Label className="text-xs">{t("fieldProperties.required")}</Label>
           <Switch
             checked={field.required}
             onCheckedChange={(checked) => update({ required: checked })}
@@ -140,7 +142,7 @@ export function FieldPropertiesPanel({
 
         {/* Width */}
         <div className="space-y-1.5">
-          <Label className="text-xs">Width</Label>
+          <Label className="text-xs">{t("fieldProperties.width")}</Label>
           <Select
             value={field.width || "full"}
             onValueChange={(v) => update({ width: v as "full" | "half" })}
@@ -150,10 +152,10 @@ export function FieldPropertiesPanel({
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="full" className="text-xs">
-                Full width
+                {t("fieldProperties.fullWidth")}
               </SelectItem>
               <SelectItem value="half" className="text-xs">
-                Half width
+                {t("fieldProperties.halfWidth")}
               </SelectItem>
             </SelectContent>
           </Select>
@@ -164,7 +166,7 @@ export function FieldPropertiesPanel({
           <>
             <Separator />
             <div className="space-y-2">
-              <Label className="text-xs">Options</Label>
+              <Label className="text-xs">{t("fieldProperties.options")}</Label>
               {(field.options || []).map((opt, i) => (
                 <div key={i} className="flex items-center gap-1">
                   <Input
@@ -181,7 +183,9 @@ export function FieldPropertiesPanel({
                     size="sm"
                     className="h-7 w-7 p-0"
                     onClick={() => removeOption(i)}
-                    aria-label={`Remove option ${opt}`}
+                    aria-label={t("fieldProperties.removeOption", {
+                      option: opt,
+                    })}
                   >
                     <IconX className="h-3 w-3" />
                   </Button>
@@ -191,7 +195,7 @@ export function FieldPropertiesPanel({
                 <Input
                   value={newOption}
                   onChange={(e) => setNewOption(e.target.value)}
-                  placeholder="Add option..."
+                  placeholder={t("fieldProperties.addOptionPlaceholder")}
                   className="h-7 text-xs flex-1"
                   onKeyDown={(e) => e.key === "Enter" && addOption()}
                 />
@@ -200,7 +204,7 @@ export function FieldPropertiesPanel({
                   size="sm"
                   className="h-7 w-7 p-0"
                   onClick={addOption}
-                  aria-label="Add option"
+                  aria-label={t("fieldProperties.addOption")}
                 >
                   <IconPlus className="h-3 w-3" />
                 </Button>
@@ -215,7 +219,7 @@ export function FieldPropertiesPanel({
             <Separator />
             <div className="grid grid-cols-2 gap-2">
               <div className="space-y-1.5">
-                <Label className="text-xs">Min</Label>
+                <Label className="text-xs">{t("fieldProperties.min")}</Label>
                 <Input
                   type="number"
                   value={field.validation?.min ?? ""}
@@ -233,7 +237,7 @@ export function FieldPropertiesPanel({
                 />
               </div>
               <div className="space-y-1.5">
-                <Label className="text-xs">Max</Label>
+                <Label className="text-xs">{t("fieldProperties.max")}</Label>
                 <Input
                   type="number"
                   value={field.validation?.max ?? ""}