@agent-native/core 0.75.5 → 0.76.1

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/knowledge.tsx

@@ -163,12 +163,12 @@ export default function KnowledgeRoute() {
         <Card>
           <CardContent className="flex flex-col gap-3 p-4 lg:flex-row lg:items-center">
             <div className="relative min-w-0 flex-1">
-              <IconSearch className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <IconSearch className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 value={query}
                 onChange={(event) => updateParam("q", event.target.value)}
                 placeholder="Search memories, topics, source names..."
-                className="pl-9"
+                className="ps-9"
               />
             </div>
             <div className="flex flex-col gap-2 sm:flex-row">
@@ -217,8 +217,8 @@ export default function KnowledgeRoute() {
                   <TableHead>Source</TableHead>
                   <TableHead>Status</TableHead>
                   <TableHead>Company context</TableHead>
-                  <TableHead className="text-right">Confidence</TableHead>
-                  <TableHead className="text-right">Cites</TableHead>
+                  <TableHead className="text-end">Confidence</TableHead>
+                  <TableHead className="text-end">Cites</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -262,12 +262,12 @@ export default function KnowledgeRoute() {
                         onPreview={() => void openCanonicalPreview(row)}
                       />
                     </TableCell>
-                    <TableCell className="text-right">
+                    <TableCell className="text-end">
                       {typeof row.confidence === "number"
                         ? formatPercent(row.confidence)
                         : "n/a"}
                     </TableCell>
-                    <TableCell className="text-right">
+                    <TableCell className="text-end">
                       {row.citations ?? 0}
                     </TableCell>
                   </TableRow>

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

@@ -416,11 +416,11 @@ export default function OpsRoute() {
                   <TableHead>Status</TableHead>
                   <TableHead>Capture</TableHead>
                   <TableHead>Source</TableHead>
-                  <TableHead className="text-right">Attempts</TableHead>
+                  <TableHead className="text-end">Attempts</TableHead>
                   <TableHead>Run after</TableHead>
                   <TableHead>Updated</TableHead>
                   <TableHead>Reason</TableHead>
-                  <TableHead className="text-right">Action</TableHead>
+                  <TableHead className="text-end">Action</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -474,7 +474,7 @@ export default function OpsRoute() {
                         </p>
                       </div>
                     </TableCell>
-                    <TableCell className="text-right tabular-nums">
+                    <TableCell className="text-end tabular-nums">
                       {item.attempts}
                     </TableCell>
                     <TableCell className="whitespace-nowrap text-sm text-muted-foreground">
@@ -491,7 +491,7 @@ export default function OpsRoute() {
                           "No issue recorded"}
                       </p>
                     </TableCell>
-                    <TableCell className="text-right">
+                    <TableCell className="text-end">
                       <Button
                         size="sm"
                         variant="outline"

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

@@ -144,12 +144,12 @@ export default function SearchRoute() {
         <Card>
           <CardContent className="grid gap-3 p-4">
             <div className="relative">
-              <IconSearch className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <IconSearch className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
               <Input
                 value={query}
                 onChange={(event) => updateParam("q", event.target.value)}
                 placeholder="Search decisions, customer facts, source names, transcripts, or policy snippets..."
-                className="h-11 pl-9 text-base"
+                className="h-11 ps-9 text-base"
                 autoFocus
               />
             </div>
@@ -420,10 +420,10 @@ function SearchResultDetails({
               </Badge>
             ) : null}
           </div>
-          <SheetTitle className="text-left text-xl leading-7">
+          <SheetTitle className="text-start text-xl leading-7">
             {result.title}
           </SheetTitle>
-          <SheetDescription className="text-left leading-6">
+          <SheetDescription className="text-start leading-6">
             {body}
           </SheetDescription>
         </SheetHeader>

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">
@@ -571,9 +608,9 @@ function NumberField({
           max={max}
           value={value}
           onChange={(event) => onChange(Number(event.target.value))}
-          className="rounded-r-none"
+          className="rounded-e-none"
         />
-        <div className="flex min-w-20 items-center justify-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground">
+        <div className="flex min-w-20 items-center justify-center rounded-e-md border border-s-0 border-input bg-muted px-3 text-sm text-muted-foreground">
           {suffix}
         </div>
       </div>
@@ -616,7 +653,7 @@ function PolicyRow({ label, value }: { label: string; value: string }) {
   return (
     <div className="flex items-center justify-between gap-3">
       <span className="min-w-0 text-muted-foreground">{label}</span>
-      <span className="max-w-40 truncate text-right font-medium capitalize">
+      <span className="max-w-40 truncate text-end font-medium capitalize">
         {value.replace(/_/g, " ")}
       </span>
     </div>

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

@@ -1074,7 +1074,7 @@ function ProviderCatalog({
                     variant="outline"
                     className={`${grantStateClass(grantState)} w-fit max-w-full`}
                   >
-                    <GrantIcon className="mr-1 size-3" />
+                    <GrantIcon className="me-1 size-3" />
                     {grantStateLabel(grantState)}
                   </Badge>
                   <Badge
@@ -2037,7 +2037,7 @@ export default function SourcesRoute() {
                       {enqueueCapturesDistillation.isPending ? (
                         <IconLoader2 className="size-4 animate-spin" />
                       ) : (
-                        <IconSend className="size-4" />
+                        <IconSend className="size-4 rtl:-scale-x-100" />
                       )}
                       Queue selected
                     </Button>
@@ -2205,7 +2205,7 @@ export default function SourcesRoute() {
                           {enqueueDistillation.isPending ? (
                             <IconLoader2 className="size-4 animate-spin" />
                           ) : (
-                            <IconSend className="size-4" />
+                            <IconSend className="size-4 rtl:-scale-x-100" />
                           )}
                           {queueActionLabel(queue)}
                         </Button>

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;