@agent-native/core 0.77.3 → 0.77.4

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

@@ -1,13 +1,17 @@
+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 - Brain" }];
+  return [{ title: messagesByLocale["en-US"].routeTitles.team }];
 }
 
 export default function TeamRoute() {
+  const t = useT();
   return (
     <main className="mx-auto w-full max-w-5xl px-4 py-6 sm:px-6 sm:py-10">
-      <TeamPage createOrgDescription="Set up a team to share Brain sources, reviewed knowledge, and settings with your colleagues." />
+      <TeamPage createOrgDescription={t("team.createOrgDescription")} />
     </main>
   );
 }

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

@@ -1,4 +1,4 @@
-import { agentNativePath } from "@agent-native/core/client";
+import { agentNativePath, useT } from "@agent-native/core/client";
 import {
   IconX,
   IconCheck,
@@ -20,69 +20,44 @@ interface CloudUpgradeProps {
 interface Provider {
   id: string;
   name: string;
-  description: string;
+  descriptionKey: string;
   urlPrefix: string;
   needsAuthToken: boolean;
-  steps: string[];
+  stepKeys: string[];
 }
 
 const PROVIDERS: Provider[] = [
   {
     id: "turso",
     name: "Turso",
-    description: "SQLite at the edge",
+    descriptionKey: "cloudUpgrade.providers.turso.description",
     urlPrefix: "libsql://",
     needsAuthToken: true,
-    steps: [
-      "Install CLI: curl -sSfL https://get.tur.so/install.sh | bash",
-      "Sign up / login: turso auth login (opens browser)",
-      "Create a database: turso db create my-app",
-      "Copy the URL: turso db show my-app --url → starts with libsql://",
-      "Create an auth token: turso db tokens create my-app → paste below",
-    ],
+    stepKeys: ["step1", "step2", "step3", "step4", "step5"],
   },
   {
     id: "neon",
     name: "Neon",
-    description: "Serverless Postgres",
+    descriptionKey: "cloudUpgrade.providers.neon.description",
     urlPrefix: "postgres://",
     needsAuthToken: false,
-    steps: [
-      "Go to console.neon.tech and sign up or log in",
-      'Click "New Project" → pick a name and region → click Create',
-      "On the project dashboard, find the Connection Details panel",
-      'Select "Connection string" tab → copy the postgres://... URL',
-      "Paste the full connection string (includes password) below",
-    ],
+    stepKeys: ["step1", "step2", "step3", "step4", "step5"],
   },
   {
     id: "supabase",
     name: "Supabase",
-    description: "Open source Firebase alternative",
+    descriptionKey: "cloudUpgrade.providers.supabase.description",
     urlPrefix: "postgres://",
     needsAuthToken: false,
-    steps: [
-      "Go to supabase.com/dashboard and sign up or log in",
-      'Click "New Project" → set a name and database password → click Create',
-      "Wait for the project to finish provisioning (~30 seconds)",
-      "Go to Project Settings → Database → Connection string",
-      'Select "URI" tab → copy the postgres://... string (replace [YOUR-PASSWORD] with your DB password)',
-    ],
+    stepKeys: ["step1", "step2", "step3", "step4", "step5"],
   },
   {
     id: "d1",
-    name: "Cloudflare D1",
-    description: "SQLite on Cloudflare's edge",
+    name: "Cloudflare D1", // i18n-ignore stable provider name
+    descriptionKey: "cloudUpgrade.providers.d1.description",
     urlPrefix: "d1://",
     needsAuthToken: true,
-    steps: [
-      "Go to dash.cloudflare.com → Workers & Pages → D1 SQL Database",
-      'Click "Create" → name your database → click Create',
-      "Copy the Database ID from the database overview page",
-      "For the auth token: go to My Profile → API Tokens → Create Token",
-      'Select "Edit Cloudflare Workers" template → Create Token → copy it',
-      "Paste as: d1://<database-id> with the API token below",
-    ],
+    stepKeys: ["step1", "step2", "step3", "step4", "step5", "step6"],
   },
 ];
 
@@ -91,6 +66,7 @@ export function CloudUpgrade({
   description = "To share content publicly, connect a cloud database.",
   onClose,
 }: CloudUpgradeProps) {
+  const t = useT();
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [dbUrl, setDbUrl] = useState("");
   const [authToken, setAuthToken] = useState("");
@@ -107,7 +83,7 @@ export function CloudUpgrade({
     connectingRef.current = true;
 
     if (!dbUrl.trim()) {
-      setErrorMsg("Database URL is required");
+      setErrorMsg(t("cloudUpgrade.databaseUrlRequired"));
       setStatus("error");
       connectingRef.current = false;
       return;
@@ -132,7 +108,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("googleConnect.failedSaveCredentials"));
       }
 
       // Poll db-health until it returns ok
@@ -163,12 +139,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";
 
@@ -218,7 +196,7 @@ export function CloudUpgrade({
               {p.name}
             </span>
             <span className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
-              {p.description}
+              {t(p.descriptionKey)}
             </span>
           </button>
         ))}
@@ -228,16 +206,18 @@ export function CloudUpgrade({
       {provider && (
         <div className="mb-5 rounded-lg border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
           <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
-            Setup steps
+            {t("cloudUpgrade.setupSteps")}
           </p>
           <ol className="space-y-1">
-            {provider.steps.map((step, i) => (
+            {provider.stepKeys.map((stepKey, i) => (
               <li
                 key={i}
                 className="flex items-start gap-2 text-xs text-zinc-600 dark:text-zinc-300"
               >
                 <IconChevronRight className="mt-0.5 h-3 w-3 shrink-0 text-zinc-400" />
-                <span className="font-mono">{step}</span>
+                <span className="font-mono">
+                  {t(`cloudUpgrade.providers.${provider.id}.steps.${stepKey}`)}
+                </span>
               </li>
             ))}
           </ol>
@@ -269,12 +249,14 @@ export function CloudUpgrade({
             <label className="mb-1 block text-xs font-medium text-zinc-700 dark:text-zinc-300">
               DATABASE_AUTH_TOKEN
               {provider && !provider.needsAuthToken && (
-                <span className="ml-1 text-zinc-400">(optional)</span>
+                <span className="ml-1 text-zinc-400">
+                  {t("bookingLinks.optional")}
+                </span>
               )}
             </label>
             <input
               type="password"
-              placeholder="Auth token"
+              placeholder={t("cloudUpgrade.authToken")}
               value={authToken}
               onChange={(e) => setAuthToken(e.target.value)}
               disabled={isConnecting}
@@ -295,7 +277,7 @@ export function CloudUpgrade({
       {status === "success" && (
         <div className="mt-3 flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">
           <IconCheck className="h-3.5 w-3.5" />
-          <span>Connected successfully. Reloading...</span>
+          <span>{t("cloudUpgrade.connectedReloading")}</span>
         </div>
       )}
 
@@ -310,14 +292,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/calendar/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";
 
@@ -12,6 +13,7 @@ import { cn } from "@/lib/utils";
 export function ThemeToggle({ className }: { className?: string }) {
   const { resolvedTheme, setTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
+  const t = useT();
 
   return (
     <Tooltip>
@@ -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/calendar/app/components/TimezoneCombobox.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCheck, IconChevronDown } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -67,6 +68,7 @@ export function TimezoneCombobox({
   onChange: (timezone: string) => void;
 }) {
   const [open, setOpen] = useState(false);
+  const t = useT();
   const options = getSupportedTimezones(value).map((timezone) => {
     const city = getTimezoneCity(timezone);
     const region = getTimezoneRegion(timezone);
@@ -93,7 +95,7 @@ export function TimezoneCombobox({
           <span className="min-w-0 truncate text-left">
             {selected
               ? `${selected.city} (${selected.timezone})`
-              : "Select timezone"}
+              : t("timezone.select")}
           </span>
           <IconChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
@@ -103,9 +105,9 @@ export function TimezoneCombobox({
         className="w-[--radix-popover-trigger-width] p-0"
       >
         <Command>
-          <CommandInput placeholder="Search timezone or city..." />
+          <CommandInput placeholder={t("timezone.searchPlaceholder")} />
           <CommandList className="max-h-[320px]">
-            <CommandEmpty>No timezone found.</CommandEmpty>
+            <CommandEmpty>{t("timezone.empty")}</CommandEmpty>
             <CommandGroup>
               {options.map((option) => (
                 <CommandItem

package/corpus/templates/calendar/app/components/booking/BookingConfirmation.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { Booking, CustomField } from "@shared/api";
 import { IconCircleCheck, IconVideo } from "@tabler/icons-react";
 import { format, parseISO } from "date-fns";
@@ -18,6 +19,7 @@ export function BookingConfirmation({
   customFields = [],
   onReset,
 }: BookingConfirmationProps) {
+  const t = useT();
   const responses = booking.fieldResponses;
   const fieldsWithResponses = customFields.filter(
     (f) =>
@@ -31,37 +33,49 @@ export function BookingConfirmation({
       <IconCircleCheck className="h-16 w-16 text-emerald-600 dark:text-emerald-400" />
 
       <div className="space-y-2">
-        <h2 className="text-2xl font-semibold">Booking Confirmed</h2>
+        <h2 className="text-2xl font-semibold">
+          {t("bookingLinks.bookingConfirmed")}
+        </h2>
         <p className="text-muted-foreground">
-          You're all set! A confirmation has been sent to your email.
+          {t("bookingLinks.confirmationSent")}
         </p>
       </div>
 
       <div className="w-full max-w-sm rounded-lg border border-border bg-card p-4 text-left space-y-2">
         <div>
-          <span className="text-xs text-muted-foreground">Event</span>
+          <span className="text-xs text-muted-foreground">
+            {t("eventForm.event")}
+          </span>
           <p className="font-medium">{booking.eventTitle}</p>
         </div>
         <div>
-          <span className="text-xs text-muted-foreground">Date</span>
+          <span className="text-xs text-muted-foreground">
+            {t("bookingLinks.date")}
+          </span>
           <p className="font-medium">
             {format(parseISO(booking.start), "EEEE, MMMM d, yyyy")}
           </p>
         </div>
         <div>
-          <span className="text-xs text-muted-foreground">Time</span>
+          <span className="text-xs text-muted-foreground">
+            {t("bookingLinks.time")}
+          </span>
           <p className="font-medium">
             {format(parseISO(booking.start), "h:mm a")} -{" "}
             {format(parseISO(booking.end), "h:mm a")}
           </p>
         </div>
         <div>
-          <span className="text-xs text-muted-foreground">Name</span>
+          <span className="text-xs text-muted-foreground">
+            {t("bookingLinks.name")}
+          </span>
           <p className="font-medium">{booking.name}</p>
         </div>
         {booking.meetingLink && (
           <div>
-            <span className="text-xs text-muted-foreground">Meeting Link</span>
+            <span className="text-xs text-muted-foreground">
+              {t("bookingLinks.meetingLink")}
+            </span>
             <a
               href={booking.meetingLink}
               target="_blank"
@@ -69,7 +83,7 @@ export function BookingConfirmation({
               className={`flex items-center gap-1.5 hover:underline ${BRAND_LINK_CLASS}`}
             >
               <IconVideo className="h-4 w-4" />
-              Join Meeting
+              {t("eventForm.joinMeeting")}
             </a>
           </div>
         )}
@@ -79,8 +93,8 @@ export function BookingConfirmation({
             <p className="font-medium">
               {typeof responses![field.id] === "boolean"
                 ? responses![field.id]
-                  ? "Yes"
-                  : "No"
+                  ? t("bookingLinks.yes")
+                  : t("bookingLinks.no")
                 : String(responses![field.id])}
             </p>
           </div>
@@ -89,18 +103,18 @@ export function BookingConfirmation({
 
       {booking.cancelToken && (
         <p className="text-xs text-muted-foreground">
-          Need to make changes?{" "}
+          {t("bookingLinks.needToMakeChanges")}{" "}
           <Link
             to={`/booking/manage/${booking.cancelToken}`}
             className={`hover:underline ${BRAND_LINK_CLASS}`}
           >
-            Cancel or reschedule
+            {t("bookingLinks.cancelOrReschedule")}
           </Link>
         </p>
       )}
 
       <Button variant="outline" onClick={onReset}>
-        Book Another
+        {t("bookingLinks.bookAnother")}
       </Button>
     </div>
   );

package/corpus/templates/calendar/app/components/booking/BookingForm.tsx

@@ -1,4 +1,4 @@
-import { Turnstile } from "@agent-native/core/client";
+import { Turnstile, useT } from "@agent-native/core/client";
 import type { CustomField } from "@shared/api";
 import { useState } from "react";
 
@@ -43,6 +43,7 @@ export function BookingForm({
   loading,
   customFields = [],
 }: BookingFormProps) {
+  const t = useT();
   const [captchaToken, setCaptchaToken] = useState<string | undefined>();
   const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
 
@@ -72,7 +73,9 @@ export function BookingForm({
           value === "" ||
           value === false
         ) {
-          errors[field.id] = `${field.label} is required`;
+          errors[field.id] = t("bookingLinks.fieldRequired", {
+            label: field.label,
+          });
           continue;
         }
       }
@@ -82,7 +85,7 @@ export function BookingForm({
           if (!re.test(value)) {
             errors[field.id] =
               field.patternError ||
-              `${field.label} does not match the expected format`;
+              t("bookingLinks.fieldFormatError", { label: field.label });
           }
         } catch {}
       }
@@ -113,18 +116,18 @@ export function BookingForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       <div className="space-y-2">
-        <Label htmlFor="booking-name">Name</Label>
+        <Label htmlFor="booking-name">{t("bookingLinks.name")}</Label>
         <Input
           id="booking-name"
           value={name}
           onChange={(e) => updateValue({ name: e.target.value })}
-          placeholder="Your name"
+          placeholder={t("bookingLinks.yourName")}
           required
         />
       </div>
 
       <div className="space-y-2">
-        <Label htmlFor="booking-email">Email</Label>
+        <Label htmlFor="booking-email">{t("bookingLinks.email")}</Label>
         <Input
           id="booking-email"
           type="email"
@@ -142,16 +145,18 @@ export function BookingForm({
           value={fieldResponses[field.id]}
           error={fieldErrors[field.id]}
           onChange={(val) => setFieldValue(field.id, val)}
+          optionalLabel={t("bookingLinks.optional")}
+          selectPlaceholder={t("bookingLinks.selectPlaceholder")}
         />
       ))}
 
       <div className="space-y-2">
-        <Label htmlFor="booking-notes">Notes (optional)</Label>
+        <Label htmlFor="booking-notes">{t("bookingLinks.notesOptional")}</Label>
         <Textarea
           id="booking-notes"
           value={notes}
           onChange={(e) => updateValue({ notes: e.target.value })}
-          placeholder="Anything you'd like to share"
+          placeholder={t("bookingLinks.notesPlaceholder")}
           rows={3}
         />
       </div>
@@ -159,7 +164,7 @@ export function BookingForm({
       <Turnstile onVerify={setCaptchaToken} />
 
       <Button type="submit" className="w-full" disabled={loading}>
-        {loading ? "Booking..." : "Confirm Booking"}
+        {loading ? t("bookingLinks.booking") : t("bookingLinks.confirmBooking")}
       </Button>
     </form>
   );
@@ -169,11 +174,15 @@ function CustomFieldInput({
   field,
   value,
   error,
+  optionalLabel,
+  selectPlaceholder,
   onChange,
 }: {
   field: CustomField;
   value: string | boolean | undefined;
   error?: string;
+  optionalLabel: string;
+  selectPlaceholder: string;
   onChange: (value: string | boolean) => void;
 }) {
   const id = `custom-field-${field.id}`;
@@ -209,13 +218,13 @@ function CustomFieldInput({
           {!field.required && (
             <span className="text-muted-foreground font-normal">
               {" "}
-              (optional)
+              {optionalLabel}
             </span>
           )}
         </Label>
         <Select value={strValue} onValueChange={(val) => onChange(val)}>
           <SelectTrigger id={id}>
-            <SelectValue placeholder={field.placeholder || "Select..."} />
+            <SelectValue placeholder={field.placeholder || selectPlaceholder} />
           </SelectTrigger>
           <SelectContent>
             {field.options.map((opt) => (
@@ -238,7 +247,7 @@ function CustomFieldInput({
           {!field.required && (
             <span className="text-muted-foreground font-normal">
               {" "}
-              (optional)
+              {optionalLabel}
             </span>
           )}
         </Label>
@@ -260,7 +269,10 @@ function CustomFieldInput({
       <Label htmlFor={id}>
         {field.label}
         {!field.required && (
-          <span className="text-muted-foreground font-normal"> (optional)</span>
+          <span className="text-muted-foreground font-normal">
+            {" "}
+            {optionalLabel}
+          </span>
         )}
       </Label>
       <Input

package/corpus/templates/calendar/app/components/booking/TimeSlotPicker.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { format, parseISO } from "date-fns";
 
 import { Button } from "@/components/ui/button";
@@ -16,6 +17,8 @@ export function TimeSlotPicker({
   onSelect,
   loading,
 }: TimeSlotPickerProps) {
+  const t = useT();
+
   if (loading) {
     return (
       <div className="grid grid-cols-3 gap-2">
@@ -29,7 +32,7 @@ export function TimeSlotPicker({
   if (slots.length === 0) {
     return (
       <p className="text-sm text-muted-foreground text-center py-4">
-        No available slots for this date.
+        {t("bookingLinks.noAvailableSlotsForDate")}
       </p>
     );
   }