@agent-native/core 0.75.4 → 0.76.0

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

@@ -10,8 +10,10 @@ import {
   configureTracking,
   createAgentNativeQueryClient,
   getBrowserTabId,
+  getLocaleInitScript,
   getThemeInitScript,
   useCommandMenuShortcut,
+  useT,
 } from "@agent-native/core/client";
 import { Toaster } from "@/components/ui/sonner";
 import { IconSun, IconMoon } from "@tabler/icons-react";
@@ -19,6 +21,7 @@ import { Layout as AppLayout } from "@/components/layout/Layout";
 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) => ({
@@ -32,6 +35,7 @@ export const links: LinksFunction = () => [
 ];
 
 const THEME_INIT_SCRIPT = getThemeInitScript();
+const LOCALE_INIT_SCRIPT = getLocaleInitScript();
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -46,6 +50,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="#71717A" />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -87,6 +96,7 @@ function DbSyncSetup() {
 
 function ThemeToggleItem() {
   const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
   const isDark = resolvedTheme === "dark";
   return (
     <CommandMenu.Item
@@ -94,32 +104,47 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "mode"]}
     >
       {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      Toggle {isDark ? "light" : "dark"} mode
+      {t("root.toggleTheme")}
     </CommandMenu.Item>
   );
 }
 
+function AssetsCommandMenu({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const t = useT();
+  return (
+    <CommandMenu
+      open={open}
+      onOpenChange={onOpenChange}
+      changelog={changelog}
+      changelogKey="assets"
+    >
+      <CommandMenu.Group heading={t("root.commandActions")}>
+        <CommandMenu.Item onSelect={() => {}}>
+          {t("root.commandSearch")}
+        </CommandMenu.Item>
+      </CommandMenu.Group>
+      <CommandMenu.Group heading={t("root.commandAppearance")}>
+        <ThemeToggleItem />
+      </CommandMenu.Group>
+    </CommandMenu>
+  );
+}
+
 export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   const [cmdkOpen, setCmdkOpen] = useState(false);
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   return (
-    <AppProviders queryClient={queryClient}>
+    <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
       <DbSyncSetup />
       <Toaster richColors position="bottom-left" />
-      <CommandMenu
-        open={cmdkOpen}
-        onOpenChange={setCmdkOpen}
-        changelog={changelog}
-        changelogKey="assets"
-      >
-        <CommandMenu.Group heading="Actions">
-          <CommandMenu.Item onSelect={() => {}}>Search</CommandMenu.Item>
-        </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
-          <ThemeToggleItem />
-        </CommandMenu.Group>
-      </CommandMenu>
+      <AssetsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
       <AppLayout>
         <Outlet />
       </AppLayout>

package/corpus/templates/assets/app/routes/_index.tsx

@@ -6,6 +6,7 @@ import {
   markAgentChatHomeHandoff,
   readClientAppState,
   sendToAgentChat,
+  useT,
   writeClientAppState,
 } from "@agent-native/core/client";
 import { IconPhoto, IconSparkles, IconVideo } from "@tabler/icons-react";
@@ -69,6 +70,7 @@ function chatThreadPath(threadId: string | null) {
 export default function CreatePage() {
   const { threadId } = useParams();
   const navigate = useNavigate();
+  const t = useT();
   const [imageModel, setImageModel] = useState<string>(DEFAULT_IMAGE_MODEL);
 
   useEffect(() => {
@@ -133,26 +135,23 @@ export default function CreatePage() {
             label: option.label,
           })),
           onChange: handleImageModelChange,
-          label: "Image model",
+          label: t("create.imageModel"),
         }}
         showHeader={false}
         showTabBar={false}
         dynamicSuggestions={false}
         suggestions={[]}
-        emptyStateText="Ask Assets what to create."
+        emptyStateText={t("create.emptyState")}
         emptyStateDisplay="hidden"
         centerComposerWhenEmpty
         composerLayoutVariant="hero"
-        composerPlaceholder="Describe the asset - attach images or text context with +"
+        composerPlaceholder={t("create.composerPlaceholder")}
         composerSlot={
           <div className="assets-create-chat-intro">
-            <h1>What asset should we make?</h1>
-            <p>
-              Start with a hero image, product reveal, reference edit, or a
-              direction you want to explore.
-            </p>
+            <h1>{t("create.heroTitle")}</h1>
+            <p>{t("create.heroDescription")}</p>
             <div className="assets-create-chat-pill-row">
-              {CHAT_STARTERS.map(({ key, Icon, label, prompt }) => (
+              {CHAT_STARTERS.map(({ key, Icon, prompt }) => (
                 <button
                   key={key}
                   type="button"
@@ -165,7 +164,7 @@ export default function CreatePage() {
                   }
                 >
                   <Icon className="size-3.5" />
-                  {label}
+                  {t(`create.starters.${key}`)}
                 </button>
               ))}
             </div>

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

@@ -1,9 +1,12 @@
 import {
   ChangelogSettingsCard,
+  LanguagePicker,
   agentNativePath,
+  openAgentSettings,
   useActionQuery,
   useBuilderConnectFlow,
   useBuilderStatus,
+  useT,
 } from "@agent-native/core/client";
 import changelog from "../../CHANGELOG.md?raw";
 import {
@@ -67,14 +70,15 @@ type ImageGenerationConfig = {
 type FormOnboardingMethod = Extract<OnboardingMethod, { kind: "form" }>;
 
 export default function SettingsPage() {
+  const t = useT();
   const { data } = useActionQuery("list-libraries", { compact: true }) as {
     data?: { count?: number };
   };
 
   return (
     <PageShell
-      title="Settings"
-      description="Asset generation, storage, and brand kit access."
+      title={t("settings.title")}
+      description={t("settings.description")}
       className="max-w-4xl space-y-6"
     >
       <div className="max-w-2xl">
@@ -82,14 +86,41 @@ export default function SettingsPage() {
       </div>
 
       <div className="max-w-2xl">
-        <h2 className="text-lg font-semibold tracking-tight">Connections</h2>
+        <h2 className="text-lg font-semibold tracking-tight">
+          {t("settings.connections")}
+        </h2>
         <p className="mt-1 text-sm leading-6 text-muted-foreground">
-          Keep Assets ready to generate, save, and share brand-safe media.
-          Builder is the simplest path; manual keys stay available when you need
-          them.
+          {t("settings.connectionsDescription")}
         </p>
       </div>
 
+      <Card className="max-w-2xl">
+        <CardHeader>
+          <CardTitle className="text-base">
+            {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 className="max-w-2xl">
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.agentTitle")}
+          </CardTitle>
+          <CardDescription>{t("settings.agentDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => openAgentSettings()}>
+            {t("settings.openAgentSettings")}
+          </Button>
+        </CardContent>
+      </Card>
+
       <section id="asset-generation-setup" className="scroll-mt-4">
         <AssetsSetupCard libraryCount={data?.count ?? 0} />
       </section>

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

@@ -6,6 +6,7 @@ import {
   navigateWithAgentChatViewTransition,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
+  useT,
 } from "@agent-native/core/client";
 import { IconMenu2 } from "@tabler/icons-react";
 import { Sidebar } from "@/components/layout/Sidebar";
@@ -21,6 +22,7 @@ import { Button } from "@/components/ui/button";
 export function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation();
   const navigate = useNavigate();
+  const t = useT();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isAskRoute = location.pathname === "/";
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
@@ -41,9 +43,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </div>
       <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
         <SheetContent side="left" className="w-[min(18rem,88vw)] p-0">
-          <SheetTitle className="sr-only">Brain navigation</SheetTitle>
+          <SheetTitle className="sr-only">
+            {t("navigation.brainNavigation")}
+          </SheetTitle>
           <SheetDescription className="sr-only">
-            Navigate between Brain work surfaces.
+            {t("navigation.brainNavigationDescription")}
           </SheetDescription>
           <Sidebar />
         </SheetContent>
@@ -59,11 +63,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
           variant="ghost"
           size="icon"
           onClick={() => setMobileSidebarOpen(true)}
-          aria-label="Open navigation"
+          aria-label={t("navigation.openNavigation")}
         >
           <IconMenu2 className="size-4" />
         </Button>
-        <span className="text-sm font-semibold">Brain</span>
+        <span className="text-sm font-semibold">{t("navigation.brand")}</span>
       </div>
       <main className="min-w-0 flex-1 overflow-y-auto overscroll-contain">
         {children}
@@ -95,11 +99,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
         browserTabId={TAB_ID}
         openOnChatRunning={chatHomeHandoffActive}
         onFullscreenRequest={openAskAgentFullscreen}
-        emptyStateText="Ask Brain about the company."
+        emptyStateText={t("chat.emptyState")}
         suggestions={[
-          "What do we tell enterprise prospects about security?",
-          "Find stale onboarding facts that need review.",
-          "Which sources have sync problems?",
+          t("chat.suggestionSecurity"),
+          t("chat.suggestionStaleFacts"),
+          t("chat.suggestionSyncProblems"),
         ]}
       >
         {contentFrame}

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

@@ -14,6 +14,7 @@ import {
   FeedbackButton,
   navigateWithAgentChatViewTransition,
   useChatThreads,
+  useT,
   type ChatThreadSummary,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
@@ -80,6 +81,7 @@ function persistedActiveThreadId() {
 
 function BrainChatsSection() {
   const navigate = useNavigate();
+  const t = useT();
   const {
     threads,
     activeThreadId,
@@ -156,7 +158,7 @@ function BrainChatsSection() {
       threadId === activeThreadId || threadId === persistedActiveThreadId();
     const archived = await archiveThread(threadId);
     if (!archived) {
-      toast.error("Could not archive chat.");
+      toast.error(t("chat.archiveFailed"));
       return;
     }
     if (wasActive) {
@@ -186,7 +188,7 @@ function BrainChatsSection() {
     setRenameDraft("");
     if (title) {
       const renamed = await renameThread(threadId, title);
-      if (!renamed) toast.error("Could not rename chat.");
+      if (!renamed) toast.error(t("chat.renameFailed"));
     }
     committingRenameRef.current = false;
   }
@@ -200,7 +202,7 @@ function BrainChatsSection() {
     <div className="mt-2 border-l border-sidebar-border/70 pl-3">
       <div className="mb-1 flex h-7 items-center gap-2 pr-1">
         <div className="min-w-0 flex-1 text-xs font-medium text-sidebar-foreground/70">
-          Chats
+          {t("chat.chats")}
         </div>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -208,12 +210,12 @@ function BrainChatsSection() {
               type="button"
               onClick={handleNewChat}
               className="flex size-6 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-              aria-label="New Brain chat"
+              aria-label={t("chat.newBrainChat")}
             >
               <IconPlus className="size-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>New chat</TooltipContent>
+          <TooltipContent>{t("chat.newChat")}</TooltipContent>
         </Tooltip>
       </div>
       <div className="grid gap-0.5">
@@ -247,7 +249,9 @@ function BrainChatsSection() {
                       }
                     }}
                     maxLength={160}
-                    aria-label={`Rename ${threadTitle(thread)}`}
+                    aria-label={t("chat.renameThread", {
+                      title: threadTitle(thread),
+                    })}
                     className="h-6 min-w-0 rounded-sm border-sidebar-border bg-background px-1.5 text-xs"
                   />
                 </form>
@@ -270,7 +274,9 @@ function BrainChatsSection() {
                       <DropdownMenuTrigger asChild>
                         <button
                           type="button"
-                          aria-label={`Chat options for ${threadTitle(thread)}`}
+                          aria-label={t("chat.optionsFor", {
+                            title: threadTitle(thread),
+                          })}
                           className="absolute right-1 flex size-6 items-center justify-center rounded-md text-sidebar-foreground/65 opacity-0 transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
                         >
                           <IconDots className="size-4" />
@@ -285,7 +291,7 @@ function BrainChatsSection() {
                           onSelect={() => startRenameThread(thread)}
                         >
                           <IconEdit className="size-4" />
-                          Rename chat
+                          {t("chat.renameChat")}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           onSelect={() =>
@@ -293,14 +299,16 @@ function BrainChatsSection() {
                           }
                         >
                           <IconPin className="size-4" />
-                          {thread.pinnedAt ? "Unpin chat" : "Pin chat"}
+                          {thread.pinnedAt
+                            ? t("chat.unpinChat")
+                            : t("chat.pinChat")}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           variant="destructive"
                           onSelect={() => void handleArchiveThread(thread.id)}
                         >
                           <IconArchive className="size-4" />
-                          Archive chat
+                          {t("chat.archiveChat")}
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </DropdownMenu>
@@ -318,6 +326,7 @@ function BrainChatsSection() {
 export function Sidebar() {
   const location = useLocation();
   const navigate = useNavigate();
+  const t = useT();
   const isAskRoute = location.pathname === "/";
   const navClass = ({ isActive }: { isActive: boolean }) =>
     cn(
@@ -348,7 +357,7 @@ export function Sidebar() {
           />
           <div className="min-w-0">
             <p className="truncate text-sm font-semibold text-sidebar-accent-foreground">
-              Brain
+              {t("navigation.brand")}
             </p>
           </div>
         </Link>
@@ -379,7 +388,9 @@ export function Sidebar() {
                   className={navClass}
                 >
                   <Icon className="size-4 shrink-0" />
-                  <span className="truncate">{item.label}</span>
+                  <span className="truncate">
+                    {t(`navigation.${item.view}`)}
+                  </span>
                 </NavLink>
                 {item.view === "ask" && isAskRoute ? (
                   <BrainChatsSection />

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

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["ar-SA"];

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

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["de-DE"];

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

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["en-US"];

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

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["es-ES"];

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

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["fr-FR"];

package/corpus/templates/brain/app/i18n/hi-IN.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["hi-IN"];

package/corpus/templates/brain/app/i18n/index.ts

@@ -0,0 +1,31 @@
+import enUS from "./en-US";
+import type { AgentNativeI18nCatalog } from "@agent-native/core/client";
+
+export const i18nCatalog = {
+  sourceLocale: "en-US",
+  messages: enUS,
+  loadMessages: async (locale) => {
+    switch (locale) {
+      case "zh-CN":
+        return (await import("./zh-CN")).default;
+      case "es-ES":
+        return (await import("./es-ES")).default;
+      case "fr-FR":
+        return (await import("./fr-FR")).default;
+      case "de-DE":
+        return (await import("./de-DE")).default;
+      case "ja-JP":
+        return (await import("./ja-JP")).default;
+      case "ko-KR":
+        return (await import("./ko-KR")).default;
+      case "pt-BR":
+        return (await import("./pt-BR")).default;
+      case "hi-IN":
+        return (await import("./hi-IN")).default;
+      case "ar-SA":
+        return (await import("./ar-SA")).default;
+      default:
+        return null;
+    }
+  },
+} satisfies AgentNativeI18nCatalog;

package/corpus/templates/brain/app/i18n/ja-JP.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["ja-JP"];

package/corpus/templates/brain/app/i18n/ko-KR.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["ko-KR"];

package/corpus/templates/brain/app/i18n/pt-BR.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["pt-BR"];

package/corpus/templates/brain/app/i18n/zh-CN.ts

@@ -0,0 +1,3 @@
+import { messagesByLocale } from "../i18n-data";
+
+export default messagesByLocale["zh-CN"];