@agent-native/core 0.75.4 → 0.76.0

package/corpus/templates/calendar/app/pages/Settings.tsx

@@ -27,7 +27,10 @@ import {
   AppearancePicker,
   callAction,
   ChangelogSettingsCard,
+  LanguagePicker,
+  openAgentSettings,
   type AppearancePresetId,
+  useT,
 } from "@agent-native/core/client";
 import changelog from "../../CHANGELOG.md?raw";
 import {
@@ -44,6 +47,7 @@ import {
 import { toast } from "sonner";
 
 export default function Settings() {
+  const t = useT();
   const { data: settings } = useSettings();
   const updateSettings = useUpdateSettings();
   const googleStatus = useGoogleAuthStatus();
@@ -54,7 +58,7 @@ export default function Settings() {
     startDesktopGoogleAuth,
   } = useGoogleDesktopAuth({
     onError: (issue) =>
-      toast.error(issue.message || issue.error || "Google sign-in failed"),
+      toast.error(issue.message || issue.error || t("settings.googleFailed")),
     onSuccess: () => window.location.reload(),
   });
   const zoomStatus = useZoomStatus();
@@ -86,8 +90,8 @@ export default function Settings() {
         defaultEventDuration: defaultDuration,
       },
       {
-        onSuccess: () => toast.success("Settings saved"),
-        onError: () => toast.error("Failed to save settings"),
+        onSuccess: () => toast.success(t("settings.saved")),
+        onError: () => toast.error(t("settings.saveFailed")),
       },
     );
   }
@@ -121,47 +125,74 @@ export default function Settings() {
       for (const account of accounts) {
         await disconnectGoogle.mutateAsync(account.email);
       }
-      toast.success("Google Calendar disconnected");
+      toast.success(t("settings.googleDisconnected"));
     } catch {
-      toast.error("Failed to disconnect");
+      toast.error(t("settings.disconnectFailed"));
     }
   }
 
   function handleConnectZoom() {
     connectZoom.mutate(undefined, {
-      onSuccess: () => toast("Zoom connection opened"),
+      onSuccess: () => toast(t("settings.zoomOpened")),
       onError: (error) =>
         toast.error(
-          error instanceof Error ? error.message : "Could not connect Zoom",
+          error instanceof Error
+            ? error.message
+            : t("settings.zoomConnectFailed"),
         ),
     });
   }
 
   function handleDisconnectZoom() {
     disconnectZoom.mutate(undefined, {
-      onSuccess: () => toast.success("Zoom disconnected"),
-      onError: () => toast.error("Failed to disconnect Zoom"),
+      onSuccess: () => toast.success(t("settings.zoomDisconnected")),
+      onError: () => toast.error(t("settings.zoomDisconnectFailed")),
     });
   }
 
   return (
     <div className="mx-auto max-w-2xl space-y-6 px-4 py-8 pb-12">
       <div>
-        <h1 className="text-2xl font-semibold">Settings</h1>
+        <h1 className="text-2xl font-semibold">{t("settings.title")}</h1>
         <p className="text-sm text-muted-foreground mt-1">
-          Configure your calendar and integrations.
+          {t("settings.description")}
         </p>
       </div>
 
       <ChangelogSettingsCard markdown={changelog} />
 
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">
+            {t("settings.languageTitle")}
+          </CardTitle>
+          <CardDescription>{t("settings.languageDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent className="max-w-xs space-y-1.5">
+          <Label>{t("settings.languageLabel")}</Label>
+          <LanguagePicker label={t("settings.languageLabel")} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t("settings.agentTitle")}</CardTitle>
+          <CardDescription>{t("settings.agentDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => openAgentSettings()}>
+            {t("settings.openAgentSettings")}
+          </Button>
+        </CardContent>
+      </Card>
+
       {/* Google Calendar Connection */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Google Calendar</CardTitle>
-          <CardDescription>
-            Connect your Google Calendar to sync events.
-          </CardDescription>
+          <CardTitle className="text-lg">
+            {t("settings.googleCalendar")}
+          </CardTitle>
+          <CardDescription>{t("settings.googleDescription")}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="flex items-center justify-between">
@@ -170,7 +201,9 @@ export default function Settings() {
                 <>
                   <IconCircleCheck className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
                   <div>
-                    <p className="text-sm font-medium">Connected</p>
+                    <p className="text-sm font-medium">
+                      {t("common.connected")}
+                    </p>
                     {googleStatus.data.accounts?.length > 0 && (
                       <p className="text-xs text-muted-foreground">
                         {googleStatus.data.accounts
@@ -183,7 +216,9 @@ export default function Settings() {
               ) : (
                 <>
                   <IconCircleX className="h-5 w-5 text-muted-foreground" />
-                  <p className="text-sm text-muted-foreground">Not connected</p>
+                  <p className="text-sm text-muted-foreground">
+                    {t("common.notConnected")}
+                  </p>
                 </>
               )}
             </div>
@@ -196,7 +231,7 @@ export default function Settings() {
                 disabled={disconnectGoogle.isPending}
               >
                 <IconUnlink className="mr-1.5 h-3.5 w-3.5" />
-                Disconnect
+                {t("common.disconnect")}
               </Button>
             ) : (
               <Button
@@ -209,7 +244,7 @@ export default function Settings() {
                 }
               >
                 <IconExternalLink className="mr-1.5 h-3.5 w-3.5" />
-                Connect
+                {t("common.connect")}
               </Button>
             )}
           </div>
@@ -307,14 +342,12 @@ export default function Settings() {
       {/* General Settings */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">General</CardTitle>
-          <CardDescription>
-            Calendar defaults and fallback booking copy.
-          </CardDescription>
+          <CardTitle className="text-lg">{t("settings.general")}</CardTitle>
+          <CardDescription>{t("settings.generalDescription")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="timezone">Timezone</Label>
+            <Label htmlFor="timezone">{t("settings.timezone")}</Label>
             <TimezoneCombobox value={timezone} onChange={setTimezone} />
           </div>
 
@@ -368,12 +401,14 @@ export default function Settings() {
 
           <div className="flex flex-wrap gap-2">
             <Button onClick={handleSave} disabled={updateSettings.isPending}>
-              {updateSettings.isPending ? "Saving..." : "Save Settings"}
+              {updateSettings.isPending
+                ? t("common.saving")
+                : t("settings.saveSettings")}
             </Button>
             <Button asChild variant="outline">
               <Link to="/booking-links">
                 <IconLink className="mr-1.5 h-3.5 w-3.5" />
-                Booking links
+                {t("navigation.bookingLinks")}
               </Link>
             </Button>
           </div>
@@ -383,9 +418,9 @@ export default function Settings() {
       {/* Appearance */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Appearance</CardTitle>
+          <CardTitle className="text-lg">{t("settings.appearance")}</CardTitle>
           <CardDescription>
-            Pick a color theme for your workspace. Or just ask the agent.
+            {t("settings.appearanceDescription")}
           </CardDescription>
         </CardHeader>
         <CardContent>

package/corpus/templates/calendar/app/root.tsx

@@ -4,7 +4,9 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLoaderData,
   useLocation,
+  useRouteLoaderData,
 } from "react-router";
 import { useCallback, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
@@ -17,14 +19,21 @@ import {
   appPath,
   configureTracking,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   getThemeInitScript,
+  type LocaleCode,
+  type LocaleMessages,
+  type LocalizationPreference,
   useCommandMenuShortcut,
   useDbSync,
+  useT,
 } from "@agent-native/core/client";
+import { resolveLocaleFromRequest } from "@agent-native/core/server";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import changelog from "../CHANGELOG.md?raw";
-import type { LinksFunction } from "react-router";
+import type { LinksFunction, LoaderFunctionArgs } from "react-router";
 import stylesheet from "./global.css?url";
+import { i18nCatalog } from "./i18n";
 configureTracking({
   getDefaultProps: (_name, properties) => ({
     ...properties,
@@ -36,11 +45,55 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
+interface RootLoaderData {
+  locale: LocaleCode;
+  preference: LocalizationPreference;
+  dir: "ltr" | "rtl";
+  messages: LocaleMessages;
+}
+
+export async function loader({
+  request,
+}: LoaderFunctionArgs): Promise<RootLoaderData> {
+  const resolved = resolveLocaleFromRequest({ request });
+  const messages =
+    ((await i18nCatalog.loadMessages?.(resolved.locale)) as
+      | LocaleMessages
+      | null
+      | undefined) ?? i18nCatalog.messages;
+  return {
+    locale: resolved.locale,
+    preference: resolved.preference,
+    dir: resolved.dir,
+    messages,
+  };
+}
+
 const THEME_INIT_SCRIPT = getThemeInitScript();
 
+const DEFAULT_LOADER_DATA: RootLoaderData = {
+  locale: "en-US",
+  preference: { locale: "system" },
+  dir: "ltr",
+  messages: i18nCatalog.messages,
+};
+
 export function Layout({ children }: { children: React.ReactNode }) {
+  const loaderData =
+    useRouteLoaderData<typeof loader>("root") ?? DEFAULT_LOADER_DATA;
+  const localeInitScript = getLocaleInitScript({
+    locale: loaderData.locale,
+    preference: loaderData.preference,
+    messages: loaderData.messages,
+  });
+
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang={loaderData.locale}
+      dir={loaderData.dir}
+      data-locale={loaderData.locale}
+      suppressHydrationWarning
+    >
       <head>
         <meta charSet="utf-8" />
         <meta
@@ -51,6 +104,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: localeInitScript }}
+        />
         <link rel="icon" type="image/svg+xml" href={appPath("/favicon.svg")} />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#00B5FF" />
@@ -105,6 +163,7 @@ function DbSyncSetup() {
 
 function ThemeToggleItem() {
   const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
   const isDark = resolvedTheme === "dark";
   return (
     <CommandMenu.Item
@@ -112,7 +171,7 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "mode"]}
     >
       {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      Toggle theme
+      {t("root.toggleTheme")}
     </CommandMenu.Item>
   );
 }
@@ -134,6 +193,7 @@ function isPublicBookingPath(pathname: string): boolean {
 
 function AppContent() {
   const [cmdkOpen, setCmdkOpen] = useState(false);
+  const t = useT();
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
     <>
@@ -144,10 +204,12 @@ function AppContent() {
         changelog={changelog}
         changelogKey="calendar"
       >
-        <CommandMenu.Group heading="Actions">
-          <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
+        <CommandMenu.Group heading={t("root.commandActions")}>
+          <CommandMenu.Item onSelect={() => {}}>
+            {t("root.commandSearch")}
+          </CommandMenu.Item>
         </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
+        <CommandMenu.Group heading={t("root.commandAppearance")}>
           <ThemeToggleItem />
         </CommandMenu.Group>
       </CommandMenu>
@@ -173,13 +235,22 @@ export default function Root() {
     }),
   );
   const location = useLocation();
+  const loaderData = useLoaderData<typeof loader>();
+  const isPublicPath = isPublicBookingPath(location.pathname);
 
   return (
     <AppProviders
       queryClient={queryClient}
-      isPublicPath={isPublicBookingPath(location.pathname)}
+      isPublicPath={isPublicPath}
       clientOnlyFallback={<DefaultSpinner />}
       toaster={<Toaster richColors position="bottom-center" />}
+      i18n={{
+        catalog: i18nCatalog,
+        initialLocale: loaderData.locale,
+        initialPreference: loaderData.preference,
+        initialMessages: loaderData.messages,
+        persistPreference: !isPublicPath,
+      }}
     >
       <AppContent />
     </AppProviders>

package/corpus/templates/calendar/changelog/2026-06-24-added-a-language-picker-and-localized-app-chrome-for-support.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-24
+---
+
+Added a language picker and localized app chrome for supported languages.

package/corpus/templates/calendar/changelog/2026-06-24-settings-now-link-directly-to-agent-settings-for-model-api-k.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-24
+---
+
+Settings now link directly to Agent settings for model, API key, automation, and voice preferences.

package/corpus/templates/chat/.agents/skills/adding-a-feature/SKILL.md

@@ -86,6 +86,10 @@ Instruction examples may name secret keys like `SLACK_WEBHOOK`, but must use
 placeholders such as `${keys.SLACK_WEBHOOK}` or `<SLACK_WEBHOOK>`. Do not paste
 real keys, internal data, or customer data into instructions as examples.
 
+If the feature adds or changes visible UI copy, prompts, toasts, labels, empty
+states, or formatting, read `internationalization` and update the app's i18n
+catalogs in the same change.
+
 For app-backed skills, declare skill visibility in the app-skill manifest:
 
 - `internal` — only the app's own agents should use it.
@@ -177,3 +181,4 @@ TL;DR: spread `ownableColumns()` into the resource table, pair it with `createSh
 - **create-skill** — How to create skills for new patterns (area 3 in detail)
 - **storing-data** — Where to store the feature's data
 - **real-time-sync** — How the UI stays in sync when the agent writes data
+- **internationalization** — How to update localized UI copy and catalogs

package/corpus/templates/chat/.agents/skills/self-modifying-code/SKILL.md

@@ -66,6 +66,11 @@ el.dataset.selectedId = selectedItem?.id || "";
 
 **Use configuration-driven rendering** — Extract visual decisions (colors, layouts, sizes) into JSON config files in `data/`. The agent can modify the config (Tier 1) instead of the component source (Tier 2).
 
+**Keep localized copy in catalogs** — When editing visible UI copy, labels,
+toasts, empty states, prompts, or formatting, read `internationalization` and
+update `app/i18n/en-US.ts` plus existing locale catalogs instead of leaving new
+inline strings in components.
+
 ## Don't
 
 - Don't modify `.env` files or files containing secrets
@@ -80,3 +85,4 @@ el.dataset.selectedId = selectedItem?.id || "";
 - **actions** — The agent can create or modify actions to add new capabilities
 - **delegate-to-agent** — Self-modification requests come through the agent chat
 - **real-time-sync** — Database writes trigger change events to update the UI
+- **internationalization** — UI copy, language catalogs, locale switching, and RTL-safe edits

package/corpus/templates/chat/app/components/layout/Header.tsx

@@ -1,19 +1,23 @@
 import { useLocation } from "react-router";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-import { AgentToggleButton } from "@agent-native/core/client";
+import {
+  AgentToggleButton,
+  LanguagePicker,
+  useT,
+} from "@agent-native/core/client";
 import { APP_TITLE } from "@/lib/app-config";
 
-const pageTitles: Record<string, string> = {
-  "/": "Chat",
-  "/observability": "Observability",
-  "/settings": "Settings",
-  "/team": "Team",
+const pageTitleKeys: Record<string, string> = {
+  "/": "navigation.chat",
+  "/observability": "navigation.observability",
+  "/settings": "navigation.settings",
+  "/team": "navigation.team",
 };
 
-function resolveTitle(pathname: string): string {
-  if (pageTitles[pathname]) return pageTitles[pathname];
-  if (pathname.startsWith("/extensions")) return "Extensions";
+function resolveTitle(pathname: string, t: (key: string) => string): string {
+  if (pageTitleKeys[pathname]) return t(pageTitleKeys[pathname]);
+  if (pathname.startsWith("/extensions")) return t("navigation.extensions");
   return APP_TITLE;
 }
 
@@ -23,6 +27,7 @@ interface HeaderProps {
 
 export function Header({ onOpenMobileSidebar }: HeaderProps) {
   const location = useLocation();
+  const t = useT();
   const title = useHeaderTitle();
   const actions = useHeaderActions();
 
@@ -32,7 +37,7 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
         <button
           type="button"
           onClick={onOpenMobileSidebar}
-          aria-label="Open navigation"
+          aria-label={t("navigation.openNavigation")}
           className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent md:hidden"
         >
           <IconMenu2 className="h-4 w-4" />
@@ -41,12 +46,13 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
       <div className="flex items-center gap-3 flex-1 min-w-0">
         {title ?? (
           <h1 className="text-lg font-semibold tracking-tight truncate">
-            {resolveTitle(location.pathname)}
+            {resolveTitle(location.pathname, t)}
           </h1>
         )}
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
+        <LanguagePicker variant="icon" />
         <AgentToggleButton />
       </div>
     </header>

package/corpus/templates/chat/app/components/layout/Layout.tsx

@@ -10,6 +10,7 @@ import {
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
+  useT,
 } from "@agent-native/core/client";
 import { APP_TITLE } from "@/lib/app-config";
 import { TAB_ID } from "@/lib/tab-id";
@@ -44,6 +45,7 @@ function routeOwnsToolbar(pathname: string): boolean {
 export function Layout({ children }: LayoutProps) {
   const location = useLocation();
   const navigate = useNavigate();
+  const t = useT();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const isChatRoute =
@@ -105,7 +107,7 @@ export function Layout({ children }: LayoutProps) {
             variant="ghost"
             size="icon"
             onClick={() => setMobileSidebarOpen(true)}
-            aria-label="Open navigation"
+            aria-label={t("navigation.openNavigation")}
           >
             <IconMenu2 className="size-4" />
           </Button>
@@ -116,7 +118,7 @@ export function Layout({ children }: LayoutProps) {
           <button
             type="button"
             onClick={() => setMobileSidebarOpen(true)}
-            aria-label="Open navigation"
+            aria-label={t("navigation.openNavigation")}
             className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <IconMenu2 className="h-4 w-4" />
@@ -142,9 +144,11 @@ export function Layout({ children }: LayoutProps) {
         </div>
         <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
           <SheetContent side="left" className="p-0 w-[260px]">
-            <SheetTitle className="sr-only">Navigation</SheetTitle>
+            <SheetTitle className="sr-only">
+              {t("navigation.navigation")}
+            </SheetTitle>
             <SheetDescription className="sr-only">
-              App navigation links
+              {t("navigation.navigationDescription")}
             </SheetDescription>
             <Sidebar collapsed={false} collapsible={false} />
           </SheetContent>
@@ -159,11 +163,11 @@ export function Layout({ children }: LayoutProps) {
             browserTabId={TAB_ID}
             openOnChatRunning={chatHomeHandoffActive}
             onFullscreenRequest={openAskAgentFullscreen}
-            emptyStateText="Ask the agent to inspect or change this app."
+            emptyStateText={t("chat.inspectEmptyState")}
             suggestions={[
-              "What can you do here?",
-              "Call hello for Builder",
-              "Add a new action and show it in the UI",
+              t("chat.inspectSuggestionCapabilities"),
+              t("chat.inspectSuggestionHello"),
+              t("chat.inspectSuggestionAction"),
             ]}
           >
             {contentFrame}