@agent-native/core 0.75.4 → 0.76.0

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

@@ -16,8 +16,10 @@ import {
   CommandMenu,
   appPath,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   getThemeInitScript,
   useCommandMenuShortcut,
+  useT,
 } from "@agent-native/core/client";
 import { configureTracking } from "@agent-native/core/client";
 import { Layout as AppLayout } from "@/components/layout/Layout";
@@ -27,6 +29,7 @@ import { TAB_ID } from "@/lib/tab-id";
 import changelog from "../CHANGELOG.md?raw";
 import type { LinksFunction } from "react-router";
 import stylesheet from "./global.css?url";
+import { i18nCatalog } from "./i18n";
 
 configureTracking({
   getDefaultProps: (_name, properties) => ({
@@ -52,6 +55,7 @@ function getHydrationStableThemeInitScript() {
 }
 
 const THEME_INIT_SCRIPT = getHydrationStableThemeInitScript();
+const LOCALE_INIT_SCRIPT = getLocaleInitScript();
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -67,6 +71,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: LOCALE_INIT_SCRIPT }}
+        />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#18181b" />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -120,6 +129,7 @@ function DbSyncSetup() {
 
 function ThemeToggleItem() {
   const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
   const isDark = resolvedTheme === "dark";
   return (
     <CommandMenu.Item
@@ -127,7 +137,7 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "mode"]}
     >
       {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      Toggle {isDark ? "light" : "dark"} mode
+      {t("root.toggleTheme")}
     </CommandMenu.Item>
   );
 }
@@ -135,6 +145,7 @@ function ThemeToggleItem() {
 function AppContent() {
   const [cmdkOpen, setCmdkOpen] = useState(false);
   const navigate = useNavigate();
+  const t = useT();
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
     <>
@@ -144,33 +155,33 @@ function AppContent() {
         changelog={changelog}
         changelogKey="brain"
       >
-        <CommandMenu.Group heading="Navigate">
+        <CommandMenu.Group heading={t("root.commandNavigate")}>
           <CommandMenu.Item onSelect={() => navigate("/")}>
-            Ask Brain
+            {t("navigation.askBrain")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/search")}>
-            Search
+            {t("navigation.search")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/knowledge")}>
-            Knowledge
+            {t("navigation.knowledge")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/review")}>
-            Review queue
+            {t("navigation.reviewQueue")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/sources")}>
-            Sources
+            {t("navigation.sources")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/ops")}>
-            Ops
+            {t("navigation.ops")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/extensions")}>
-            Extensions
+            {t("navigation.extensions")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => navigate("/settings")}>
-            Settings
+            {t("navigation.settings")}
           </CommandMenu.Item>
         </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
+        <CommandMenu.Group heading={t("root.commandAppearance")}>
           <ThemeToggleItem />
         </CommandMenu.Group>
       </CommandMenu>
@@ -201,7 +212,11 @@ export default function Root() {
   );
 
   return (
-    <AppProviders queryClient={queryClient} tooltipDelayDuration={250}>
+    <AppProviders
+      queryClient={queryClient}
+      tooltipDelayDuration={250}
+      i18n={{ catalog: i18nCatalog }}
+    >
       <DbSyncSetup />
       <AppContent />
     </AppProviders>

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

@@ -1,8 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import {
   ChangelogSettingsCard,
+  LanguagePicker,
+  openAgentSettings,
   useActionMutation,
   useActionQuery,
+  useT,
 } from "@agent-native/core/client";
 import changelog from "../../CHANGELOG.md?raw";
 import {
@@ -89,6 +92,7 @@ type ToneValue = (typeof toneOptions)[number]["value"];
 type SourcePolicyValue = (typeof sourcePolicyOptions)[number]["value"];
 
 export default function SettingsRoute() {
+  const t = useT();
   const settingsQuery = useActionQuery<SettingsResponse>(
     "get-brain-settings" as any,
     {} as any,
@@ -129,9 +133,9 @@ export default function SettingsRoute() {
   return (
     <div className="min-h-full bg-background">
       <PageHeader
-        eyebrow="Customize"
-        title="Customize Brain"
-        description="Name the assistant, shape its voice, and set the policies it follows when turning company sources into knowledge."
+        eyebrow={t("settings.eyebrow")}
+        title={t("settings.title")}
+        description={t("settings.description")}
         actions={
           <Button
             size="sm"
@@ -141,10 +145,10 @@ export default function SettingsRoute() {
           >
             <IconDeviceFloppy className="size-4" />
             {saveSettings.isPending
-              ? "Saving"
+              ? t("common.saving")
               : isDirty
-                ? "Save changes"
-                : "Saved"}
+                ? t("common.saveChanges")
+                : t("common.saved")}
           </Button>
         }
       />
@@ -391,14 +395,47 @@ export default function SettingsRoute() {
         </main>
 
         <aside className="grid content-start gap-5">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base">
+                <IconAdjustments className="size-4 text-primary" />
+                {t("settings.languageTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.languageDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-1.5">
+              <Label>{t("settings.languageLabel")}</Label>
+              <LanguagePicker label={t("settings.languageLabel")} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2 text-base">
+                <IconAdjustments className="size-4 text-primary" />
+                {t("settings.agentTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.agentDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="outline" onClick={() => openAgentSettings()}>
+                {t("settings.openAgentSettings")}
+              </Button>
+            </CardContent>
+          </Card>
+
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2 text-base">
                 <IconFileText className="size-4 text-primary" />
-                Current Policy
+                {t("settings.currentPolicy")}
               </CardTitle>
               <CardDescription>
-                The effective settings saved for this Brain workspace.
+                {t("settings.currentPolicyDescription")}
               </CardDescription>
             </CardHeader>
             <CardContent className="grid gap-3 text-sm">

package/corpus/templates/brain/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/brain/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/calendar/.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/calendar/app/components/layout/AppLayout.tsx

@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button";
 import {
   AgentSidebar,
   AgentToggleButton,
+  LanguagePicker,
   NotificationsBell,
   useAppearanceSync,
 } from "@agent-native/core/client";
@@ -287,6 +288,7 @@ export function AppLayout({ children }: AppLayoutProps) {
                 </div>
                 <div className="flex shrink-0 items-center gap-2">
                   {headerControls?.right}
+                  <LanguagePicker variant="icon" />
                   {!isMobile && (
                     <NotificationsBell emptyDescription="Calendar can pop browser alerts while this app is open. Clips desktop handles fuller meeting prompts with one-click notes." />
                   )}

package/corpus/templates/calendar/app/components/layout/Sidebar.tsx

@@ -52,6 +52,7 @@ import {
   appPath,
   DevDatabaseLink,
   FeedbackButton,
+  useT,
 } from "@agent-native/core/client";
 import { EVENT_CATEGORY_COLORS } from "@/lib/event-colors";
 import {
@@ -85,10 +86,14 @@ import { OrgSwitcher } from "@agent-native/core/client/org";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 
 const navItems = [
-  { path: "/", label: "Calendar", icon: IconCalendar },
-  { path: "/booking-links", label: "Booking Links", icon: IconLink },
-  { path: "/team", label: "Team", icon: IconUsers },
-  { path: "/settings", label: "Settings", icon: IconSettings },
+  { path: "/", labelKey: "navigation.calendar", icon: IconCalendar },
+  {
+    path: "/booking-links",
+    labelKey: "navigation.bookingLinks",
+    icon: IconLink,
+  },
+  { path: "/team", labelKey: "navigation.team", icon: IconUsers },
+  { path: "/settings", labelKey: "navigation.settings", icon: IconSettings },
 ];
 
 interface SidebarProps {
@@ -304,6 +309,7 @@ function MiniCalendar({
 }
 
 function GoogleConnectSidebarButton() {
+  const t = useT();
   const [wantAuthUrl, setWantAuthUrl] = useState(false);
   const authUrl = useGoogleAuthUrl(wantAuthUrl);
   const {
@@ -332,10 +338,10 @@ function GoogleConnectSidebarButton() {
     <div className="border-t border-border p-3">
       <div className="rounded-lg bg-primary/10 p-3">
         <p className="mb-1 text-xs font-semibold text-foreground">
-          Connect Google Calendar
+          {t("settings.connectGoogleCalendar")}
         </p>
         <p className="mb-2.5 text-[11px] leading-relaxed text-muted-foreground">
-          Sync your events and manage everything in one place.
+          {t("settings.connectGoogleDescription")}
         </p>
         <Button
           size="sm"
@@ -348,7 +354,7 @@ function GoogleConnectSidebarButton() {
           }
         >
           <IconExternalLink className="h-3 w-3" />
-          {authUrl.isLoading ? "Connecting..." : "Connect"}
+          {authUrl.isLoading ? t("common.connecting") : t("common.connect")}
         </Button>
       </div>
     </div>
@@ -590,6 +596,7 @@ function GoogleAccountsSection({
 export function Sidebar({ open, onClose }: SidebarProps) {
   const location = useLocation();
   const navigate = useNavigate();
+  const t = useT();
   const {
     selectedDate,
     setSelectedDate,
@@ -669,7 +676,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
               className="hidden h-4 w-auto shrink-0 dark:block"
             />
             <span className="text-base font-semibold tracking-tight">
-              Calendar
+              {t("navigation.brand")}
             </span>
           </Link>
         </div>
@@ -702,7 +709,7 @@ export function Sidebar({ open, onClose }: SidebarProps) {
                   )}
                 >
                   <item.icon className="h-4 w-4" />
-                  {item.label}
+                  {t(item.labelKey)}
                 </Link>
               );
             })}

package/corpus/templates/calendar/app/i18n/ar-SA.ts

@@ -0,0 +1,57 @@
+const messages = {
+  common: {
+    connect: "اتصال",
+    connected: "متصل",
+    connecting: "جار الاتصال",
+    disconnect: "قطع الاتصال",
+    notConnected: "غير متصل",
+    saving: "جار الحفظ...",
+  },
+  navigation: {
+    bookingLinks: "روابط الحجز",
+    brand: "التقويم",
+    calendar: "التقويم",
+    settings: "الإعدادات",
+    team: "الفريق",
+  },
+  root: {
+    commandActions: "الإجراءات",
+    commandAppearance: "المظهر",
+    commandSearch: "بحث",
+    toggleTheme: "تبديل السمة",
+  },
+  settings: {
+    openAgentSettings: "فتح إعدادات الوكيل",
+    agentDescription:
+      "افتح إعدادات الوكيل في الشريط الجانبي لإدارة النموذج ومفاتيح API والأتمتة والصوت وعناصر التحكم الأخرى.",
+    agentTitle: "إعدادات الوكيل",
+    appearance: "المظهر",
+    appearanceDescription: "Customize how the app looks.",
+    connectGoogleCalendar: "Connect Google Calendar",
+    connectGoogleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    description: "إدارة التفضيلات والخدمات المتصلة.",
+    disconnectFailed: "Disconnect failed",
+    general: "عام",
+    generalDescription: "General workspace preferences.",
+    googleCalendar: "Google Calendar",
+    googleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    googleDisconnected: "Google Calendar disconnected",
+    googleFailed: "Google Calendar failed",
+    languageDescription: "اختر لغة الواجهة لمساحة العمل هذه.",
+    languageLabel: "لغة الواجهة",
+    languageTitle: "اللغة",
+    saveFailed: "Failed to save settings",
+    saveSettings: "Save settings",
+    saved: "Settings saved",
+    timezone: "Timezone",
+    title: "الإعدادات",
+    zoomConnectFailed: "Failed to connect Zoom",
+    zoomDisconnectFailed: "Failed to disconnect Zoom",
+    zoomDisconnected: "Zoom disconnected",
+    zoomOpened: "Zoom connection opened",
+  },
+};
+
+export default messages;

package/corpus/templates/calendar/app/i18n/de-DE.ts

@@ -0,0 +1,58 @@
+const messages = {
+  common: {
+    connect: "Verbinden",
+    connected: "Verbunden",
+    connecting: "Verbindung wird hergestellt",
+    disconnect: "Trennen",
+    notConnected: "Nicht verbunden",
+    saving: "Speichern...",
+  },
+  navigation: {
+    bookingLinks: "Buchungslinks",
+    brand: "Kalender",
+    calendar: "Kalender",
+    settings: "Einstellungen",
+    team: "Team",
+  },
+  root: {
+    commandActions: "Aktionen",
+    commandAppearance: "Darstellung",
+    commandSearch: "Suchen",
+    toggleTheme: "Design wechseln",
+  },
+  settings: {
+    openAgentSettings: "Agent-Einstellungen öffnen",
+    agentDescription:
+      "Öffne die Agent-Einstellungen in der Seitenleiste für Modell, API-Schlüssel, Automatisierungen, Sprache und weitere Steuerungen.",
+    agentTitle: "Agent-Einstellungen",
+    appearance: "Darstellung",
+    appearanceDescription: "Customize how the app looks.",
+    connectGoogleCalendar: "Connect Google Calendar",
+    connectGoogleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    description: "Verwalte Einstellungen und verbundene Dienste.",
+    disconnectFailed: "Disconnect failed",
+    general: "Allgemein",
+    generalDescription: "General workspace preferences.",
+    googleCalendar: "Google Calendar",
+    googleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    googleDisconnected: "Google Calendar disconnected",
+    googleFailed: "Google Calendar failed",
+    languageDescription:
+      "Wähle die Oberflächensprache für diesen Arbeitsbereich.",
+    languageLabel: "Oberflächensprache",
+    languageTitle: "Sprache",
+    saveFailed: "Failed to save settings",
+    saveSettings: "Save settings",
+    saved: "Settings saved",
+    timezone: "Timezone",
+    title: "Einstellungen",
+    zoomConnectFailed: "Failed to connect Zoom",
+    zoomDisconnectFailed: "Failed to disconnect Zoom",
+    zoomDisconnected: "Zoom disconnected",
+    zoomOpened: "Zoom connection opened",
+  },
+};
+
+export default messages;

package/corpus/templates/calendar/app/i18n/en-US.ts

@@ -0,0 +1,57 @@
+const messages = {
+  common: {
+    connect: "Connect",
+    connected: "Connected",
+    connecting: "Connecting",
+    disconnect: "Disconnect",
+    notConnected: "Not connected",
+    saving: "Saving...",
+  },
+  navigation: {
+    bookingLinks: "Booking links",
+    brand: "Calendar",
+    calendar: "Calendar",
+    settings: "Settings",
+    team: "Team",
+  },
+  root: {
+    commandActions: "Actions",
+    commandAppearance: "Appearance",
+    commandSearch: "Search",
+    toggleTheme: "Toggle theme",
+  },
+  settings: {
+    openAgentSettings: "Open agent settings",
+    agentDescription:
+      "Open the agent sidebar settings for model, API keys, automations, voice, and other agent controls.",
+    agentTitle: "Agent settings",
+    appearance: "Appearance",
+    appearanceDescription: "Customize how the app looks.",
+    connectGoogleCalendar: "Connect Google Calendar",
+    connectGoogleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    description: "Manage preferences and connected services.",
+    disconnectFailed: "Disconnect failed",
+    general: "General",
+    generalDescription: "General workspace preferences.",
+    googleCalendar: "Google Calendar",
+    googleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    googleDisconnected: "Google Calendar disconnected",
+    googleFailed: "Google Calendar failed",
+    languageDescription: "Choose the interface language for this workspace.",
+    languageLabel: "Interface language",
+    languageTitle: "Language",
+    saveFailed: "Failed to save settings",
+    saveSettings: "Save settings",
+    saved: "Settings saved",
+    timezone: "Timezone",
+    title: "Settings",
+    zoomConnectFailed: "Failed to connect Zoom",
+    zoomDisconnectFailed: "Failed to disconnect Zoom",
+    zoomDisconnected: "Zoom disconnected",
+    zoomOpened: "Zoom connection opened",
+  },
+};
+
+export default messages;

package/corpus/templates/calendar/app/i18n/es-ES.ts

@@ -0,0 +1,58 @@
+const messages = {
+  common: {
+    connect: "Conectar",
+    connected: "Conectado",
+    connecting: "Conectando",
+    disconnect: "Desconectar",
+    notConnected: "No conectado",
+    saving: "Guardando...",
+  },
+  navigation: {
+    bookingLinks: "Enlaces de reserva",
+    brand: "Calendario",
+    calendar: "Calendario",
+    settings: "Ajustes",
+    team: "Equipo",
+  },
+  root: {
+    commandActions: "Acciones",
+    commandAppearance: "Apariencia",
+    commandSearch: "Buscar",
+    toggleTheme: "Cambiar tema",
+  },
+  settings: {
+    openAgentSettings: "Abrir ajustes del agente",
+    agentDescription:
+      "Abre los ajustes del agente en la barra lateral para modelos, claves API, automatizaciones, voz y otros controles.",
+    agentTitle: "Ajustes del agente",
+    appearance: "Apariencia",
+    appearanceDescription: "Customize how the app looks.",
+    connectGoogleCalendar: "Connect Google Calendar",
+    connectGoogleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    description: "Gestiona preferencias y servicios conectados.",
+    disconnectFailed: "Disconnect failed",
+    general: "General",
+    generalDescription: "General workspace preferences.",
+    googleCalendar: "Google Calendar",
+    googleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    googleDisconnected: "Google Calendar disconnected",
+    googleFailed: "Google Calendar failed",
+    languageDescription:
+      "Elige el idioma de la interfaz para este espacio de trabajo.",
+    languageLabel: "Idioma de la interfaz",
+    languageTitle: "Idioma",
+    saveFailed: "Failed to save settings",
+    saveSettings: "Save settings",
+    saved: "Settings saved",
+    timezone: "Timezone",
+    title: "Ajustes",
+    zoomConnectFailed: "Failed to connect Zoom",
+    zoomDisconnectFailed: "Failed to disconnect Zoom",
+    zoomDisconnected: "Zoom disconnected",
+    zoomOpened: "Zoom connection opened",
+  },
+};
+
+export default messages;

package/corpus/templates/calendar/app/i18n/fr-FR.ts

@@ -0,0 +1,58 @@
+const messages = {
+  common: {
+    connect: "Connecter",
+    connected: "Connecté",
+    connecting: "Connexion",
+    disconnect: "Déconnecter",
+    notConnected: "Non connecté",
+    saving: "Enregistrement...",
+  },
+  navigation: {
+    bookingLinks: "Liens de réservation",
+    brand: "Calendrier",
+    calendar: "Calendrier",
+    settings: "Paramètres",
+    team: "Équipe",
+  },
+  root: {
+    commandActions: "Actions",
+    commandAppearance: "Apparence",
+    commandSearch: "Rechercher",
+    toggleTheme: "Changer de thème",
+  },
+  settings: {
+    openAgentSettings: "Ouvrir les paramètres de l’agent",
+    agentDescription:
+      "Ouvrez les paramètres de l’agent dans la barre latérale pour les modèles, clés API, automatisations, voix et autres contrôles.",
+    agentTitle: "Paramètres de l’agent",
+    appearance: "Apparence",
+    appearanceDescription: "Customize how the app looks.",
+    connectGoogleCalendar: "Connect Google Calendar",
+    connectGoogleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    description: "Gérez les préférences et les services connectés.",
+    disconnectFailed: "Disconnect failed",
+    general: "Général",
+    generalDescription: "General workspace preferences.",
+    googleCalendar: "Google Calendar",
+    googleDescription:
+      "Connect Google Calendar to sync events and availability.",
+    googleDisconnected: "Google Calendar disconnected",
+    googleFailed: "Google Calendar failed",
+    languageDescription:
+      "Choisissez la langue de l’interface pour cet espace de travail.",
+    languageLabel: "Langue de l’interface",
+    languageTitle: "Langue",
+    saveFailed: "Failed to save settings",
+    saveSettings: "Save settings",
+    saved: "Settings saved",
+    timezone: "Timezone",
+    title: "Paramètres",
+    zoomConnectFailed: "Failed to connect Zoom",
+    zoomDisconnectFailed: "Failed to disconnect Zoom",
+    zoomDisconnected: "Zoom disconnected",
+    zoomOpened: "Zoom connection opened",
+  },
+};
+
+export default messages;