npm - @agent-native/core - Versions diffs - 0.75.5 → 0.76.0 - Mend

@agent-native/core 0.75.5 → 0.76.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/corpus/templates/content/app/root.tsx CHANGED Viewed

@@ -5,7 +5,9 @@ import {
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
+  useLoaderData,
   useLocation,
+  useRouteLoaderData,
   useRouteError,
 } from "react-router";
 import { useCallback, useEffect, useState } from "react";
@@ -21,15 +23,22 @@ import {
   appPath,
   CommandMenu,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   getThemeInitScript,
+  type LocaleCode,
+  type LocaleMessages,
+  type LocalizationPreference,
   useCommandMenuShortcut,
+  useT,
 } from "@agent-native/core/client";
+import { resolveLocaleFromRequest } from "@agent-native/core/server";
 import { useDbSync } from "./hooks/use-db-sync";
 import { useNavigationState } from "./hooks/use-navigation-state";
 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 { configureTracking } from "@agent-native/core/client";
+import { i18nCatalog } from "./i18n";
 configureTracking({
   getDefaultProps: (_name, properties) => ({
     ...properties,
@@ -41,9 +50,40 @@ 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,
+  };
+}
 // Pass args to match content's 3-way theme-cycle UX (no disableTransitionOnChange).
 const THEME_INIT_SCRIPT = getThemeInitScript("system", true);
+const DEFAULT_LOADER_DATA: RootLoaderData = {
+  locale: "en-US",
+  preference: { locale: "system" },
+  dir: "ltr",
+  messages: i18nCatalog.messages,
+};
 const themeOptions = [
   { value: "system", label: "System", icon: IconDeviceDesktop },
   { value: "light", label: "Light", icon: IconSun },
@@ -90,8 +130,21 @@ function nextTheme(theme: ThemeOption): ThemeOption {
 }
 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
@@ -102,6 +155,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="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#10B981" />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -132,6 +190,7 @@ function AppSetup() {
 function ThemeToggleItem() {
   const { theme, setTheme } = useTheme();
+  const t = useT();
   const [selectedTheme, setSelectedTheme] = useState<ThemeOption>("system");
   useEffect(() => {
@@ -156,9 +215,9 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "system", "mode"]}
     >
       <ActiveIcon size={16} />
-      Toggle theme
+      {t("root.toggleTheme")}
       <span className="ml-auto text-xs text-muted-foreground">
-        {activeOption.label}
+        {t(`theme.${activeOption.value}`)}
       </span>
     </CommandMenu.Item>
   );
@@ -166,6 +225,7 @@ function ThemeToggleItem() {
 function PublicAgentShell({ children }: { children: React.ReactNode }) {
   const [mounted, setMounted] = useState(false);
+  const t = useT();
   useEffect(() => setMounted(true), []);
@@ -195,11 +255,11 @@ function PublicAgentShell({ children }: { children: React.ReactNode }) {
       position="right"
       defaultOpen
       defaultSidebarWidth={420}
-      emptyStateText="Ask me anything about this document"
+      emptyStateText={t("chat.publicEmptyState")}
       suggestions={[
-        "Summarize this document",
-        "What are the key takeaways?",
-        "Turn this into an action plan",
+        t("chat.publicSuggestionSummary"),
+        t("chat.publicSuggestionTakeaways"),
+        t("chat.publicSuggestionActionPlan"),
       ]}
     >
       {content}
@@ -207,10 +267,38 @@ function PublicAgentShell({ children }: { children: React.ReactNode }) {
   );
 }
+function ContentCommandMenu({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const t = useT();
+  return (
+    <CommandMenu
+      open={open}
+      onOpenChange={onOpenChange}
+      changelog={changelog}
+      changelogKey="content"
+    >
+      <CommandMenu.Group heading={t("root.commandContent")}>
+        <CommandMenu.Item onSelect={() => {}}>
+          {t("root.commandSearchDocuments")}
+        </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);
   const location = useLocation();
+  const loaderData = useLoaderData<typeof loader>();
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   // Public document paths (/p/*) SSR real content without the ClientOnly gate
@@ -231,6 +319,13 @@ export default function Root() {
         isPublicPath
         disableThemeTransitions={false}
         toaster={contentToaster}
+        i18n={{
+          catalog: i18nCatalog,
+          initialLocale: loaderData.locale,
+          initialPreference: loaderData.preference,
+          initialMessages: loaderData.messages,
+          persistPreference: false,
+        }}
       >
         <Toaster />
         <PublicAgentShell>
@@ -245,24 +340,16 @@ export default function Root() {
       queryClient={queryClient}
       disableThemeTransitions={false}
       toaster={contentToaster}
+      i18n={{
+        catalog: i18nCatalog,
+        initialLocale: loaderData.locale,
+        initialPreference: loaderData.preference,
+        initialMessages: loaderData.messages,
+      }}
     >
       <AppSetup />
       <Toaster />
-      <CommandMenu
-        open={cmdkOpen}
-        onOpenChange={setCmdkOpen}
-        changelog={changelog}
-        changelogKey="content"
-      >
-        <CommandMenu.Group heading="Content">
-          <CommandMenu.Item onSelect={() => {}}>
-            Search documents
-          </CommandMenu.Item>
-        </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
-          <ThemeToggleItem />
-        </CommandMenu.Group>
-      </CommandMenu>
+      <ContentCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
       <Outlet />
     </AppProviders>
   );

package/corpus/templates/content/app/routes/_app.settings.tsx ADDED Viewed

@@ -0,0 +1,84 @@
+import { Link } from "react-router";
+import {
+  ChangelogSettingsCard,
+  LanguagePicker,
+  openAgentSettings,
+  useT,
+} from "@agent-native/core/client";
+import { useSetPageTitle } from "@/components/layout/HeaderActions";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import changelog from "../../CHANGELOG.md?raw";
+export function meta() {
+  return [{ title: "Settings - Content" }];
+}
+export default function SettingsRoute() {
+  const t = useT();
+  useSetPageTitle(t("settings.title"));
+  return (
+    <div className="flex-1 overflow-auto">
+      <main className="mx-auto w-full max-w-3xl space-y-6 px-4 py-6 sm:px-8 sm:py-10">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-bold tracking-tight">
+            {t("settings.title")}
+          </h1>
+          <p className="text-sm leading-6 text-muted-foreground">
+            {t("settings.description")}
+          </p>
+        </div>
+        <section className="rounded-lg border border-border bg-card p-5">
+          <div className="space-y-1">
+            <h2 className="text-base font-semibold">
+              {t("settings.languageTitle")}
+            </h2>
+            <p className="text-sm leading-6 text-muted-foreground">
+              {t("settings.languageDescription")}
+            </p>
+          </div>
+          <div className="mt-4 max-w-xs space-y-1.5">
+            <Label>{t("settings.languageLabel")}</Label>
+            <LanguagePicker label={t("settings.languageLabel")} />
+          </div>
+        </section>
+        <section className="rounded-lg border border-border bg-card p-5">
+          <div className="space-y-1">
+            <h2 className="text-base font-semibold">
+              {t("settings.workspaceTitle")}
+            </h2>
+            <p className="text-sm leading-6 text-muted-foreground">
+              {t("settings.workspaceDescription")}
+            </p>
+          </div>
+          <Button className="mt-4" variant="outline" asChild>
+            <Link to="/team">{t("settings.openTeamSettings")}</Link>
+          </Button>
+        </section>
+        <section className="rounded-lg border border-border bg-card p-5">
+          <div className="space-y-1">
+            <h2 className="text-base font-semibold">
+              {t("settings.agentTitle")}
+            </h2>
+            <p className="text-sm leading-6 text-muted-foreground">
+              {t("settings.agentDescription")}
+            </p>
+          </div>
+          <Button
+            className="mt-4"
+            variant="outline"
+            onClick={() => openAgentSettings()}
+          >
+            {t("settings.openAgentSettings")}
+          </Button>
+        </section>
+        <ChangelogSettingsCard markdown={changelog} />
+      </main>
+    </div>
+  );
+}

package/corpus/templates/content/changelog/2026-06-24-a-new-settings-page-gives-quick-access-to-language-workspace.md ADDED Viewed

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-24
+---
+A new Settings page gives quick access to language, workspace, and agent preferences.

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

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

package/corpus/templates/design/.agents/skills/self-modifying-code/SKILL.md CHANGED Viewed

@@ -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/design/app/components/layout/Header.tsx CHANGED Viewed

@@ -1,15 +1,19 @@
 import { useLocation } from "react-router";
-import { useActionQuery } from "@agent-native/core/client";
+import {
+  LanguagePicker,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 import { AgentToggleButton } from "@agent-native/core/client";
 import { RunsTray } from "@agent-native/core/client/progress";
-const pageTitles: Record<string, string> = {
-  "/": "Designs",
-  "/templates": "Templates",
-  "/design-systems": "Design Systems",
-  "/design-systems/setup": "Set up design system",
-  "/settings": "Settings",
+const pageTitleKeys: Record<string, string> = {
+  "/": "navigation.designs",
+  "/templates": "navigation.templates",
+  "/design-systems": "navigation.designSystems",
+  "/design-systems/setup": "navigation.setupDesignSystem",
+  "/settings": "navigation.settings",
 };
 function DesignTitle({ id }: { id: string }) {
@@ -21,7 +25,10 @@ function DesignTitle({ id }: { id: string }) {
 }
 function StaticTitle({ pathname }: { pathname: string }) {
-  const title = pageTitles[pathname] ?? "Design";
+  const t = useT();
+  const title = pageTitleKeys[pathname]
+    ? t(pageTitleKeys[pathname])
+    : t("navigation.brand");
   return (
     <h1 className="text-lg font-semibold tracking-tight truncate">{title}</h1>
   );
@@ -47,6 +54,7 @@ export function Header() {
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
+        <LanguagePicker variant="icon" />
         <RunsTray pollMs={1500} />
         <AgentToggleButton />
       </div>

package/corpus/templates/design/app/components/layout/Layout.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ import {
   AgentSidebar,
   isEmbedAuthActive,
   getBrowserTabId,
+  useT,
 } from "@agent-native/core/client";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { cn } from "@/lib/utils";
@@ -43,6 +44,7 @@ const EDITOR_PREFIXES = ["/design/", "/extensions"];
 export function Layout({ children }: LayoutProps) {
   useNavigationState();
   const location = useLocation();
+  const t = useT();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const openMobileSidebar = useCallback(() => setMobileSidebarOpen(true), []);
@@ -98,11 +100,11 @@ export function Layout({ children }: LayoutProps) {
       <MobileSidebarContext.Provider value={openMobileSidebar}>
         <AgentSidebar
           position="right"
-          emptyStateText="Describe a design to create"
+          emptyStateText={t("chat.emptyState")}
           suggestions={[
-            "Design a landing page for my startup",
-            "Make this match our brand",
-            "Add a mobile version of this",
+            t("chat.suggestionLandingPage"),
+            t("chat.suggestionBrandMatch"),
+            t("chat.suggestionMobile"),
           ]}
           scope={designScope}
           browserTabId={getBrowserTabId()}
@@ -131,12 +133,12 @@ export function Layout({ children }: LayoutProps) {
                   <button
                     onClick={openMobileSidebar}
                     className="-ml-1 mr-3 cursor-pointer rounded-md p-2.5 hover:bg-sidebar-accent/50"
-                    aria-label="Open navigation"
+                    aria-label={t("navigation.openNavigation")}
                   >
                     <IconMenu2 className="h-5 w-5 text-foreground" />
                   </button>
                   <span className="text-base font-bold tracking-tight">
-                    Design
+                    {t("navigation.brand")}
                   </span>
                 </div>
               )}

package/corpus/templates/design/app/components/layout/Sidebar.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import {
   DevDatabaseLink,
   FeedbackButton,
   appPath,
+  useT,
 } from "@agent-native/core/client";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { ThemeToggle } from "@/components/ThemeToggle";
@@ -24,16 +25,21 @@ import {
 } from "@/components/ui/tooltip";
 const navItems = [
-  { icon: IconPencil, label: "Designs", href: "/" },
-  { icon: IconTemplate, label: "Templates", href: "/templates" },
-  { icon: IconPalette, label: "Design Systems", href: "/design-systems" },
-  { icon: IconSettings, label: "Settings", href: "/settings" },
+  { icon: IconPencil, labelKey: "navigation.designs", href: "/" },
+  { icon: IconTemplate, labelKey: "navigation.templates", href: "/templates" },
+  {
+    icon: IconPalette,
+    labelKey: "navigation.designSystems",
+    href: "/design-systems",
+  },
+  { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 const COLLAPSE_KEY = "design.sidebar.collapsed";
 export function Sidebar() {
   const location = useLocation();
+  const t = useT();
   const [collapsed, setCollapsed] = useState<boolean>(() => {
     if (typeof window === "undefined") return false;
     try {
@@ -79,7 +85,9 @@ export function Sidebar() {
               aria-hidden="true"
               className="hidden h-4 w-auto dark:block"
             />
-            <span className="text-sm font-semibold tracking-tight">Design</span>
+            <span className="text-sm font-semibold tracking-tight">
+              {t("navigation.brand")}
+            </span>
           </div>
         )}
         <Tooltip delayDuration={0}>
@@ -87,7 +95,11 @@ export function Sidebar() {
             <button
               onClick={() => setCollapsed((c) => !c)}
               className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground"
-              aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-label={
+                collapsed
+                  ? t("navigation.expandSidebar")
+                  : t("navigation.collapseSidebar")
+              }
             >
               {collapsed ? (
                 <IconLayoutSidebarLeftExpand className="h-4 w-4" />
@@ -97,7 +109,9 @@ export function Sidebar() {
             </button>
           </TooltipTrigger>
           <TooltipContent side="right">
-            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+            {collapsed
+              ? t("navigation.expandSidebar")
+              : t("navigation.collapseSidebar")}
           </TooltipContent>
         </Tooltip>
       </div>
@@ -124,14 +138,16 @@ export function Sidebar() {
                 )}
               >
                 <Icon className="h-4 w-4 shrink-0" />
-                {!collapsed && item.label}
+                {!collapsed && t(item.labelKey)}
               </Link>
             );
             if (collapsed) {
               return (
                 <Tooltip key={item.href} delayDuration={0}>
                   <TooltipTrigger asChild>{link}</TooltipTrigger>
-                  <TooltipContent side="right">{item.label}</TooltipContent>
+                  <TooltipContent side="right">
+                    {t(item.labelKey)}
+                  </TooltipContent>
                 </Tooltip>
               );
             }

package/corpus/templates/design/app/i18n/ar-SA.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/de-DE.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/en-US.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/es-ES.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/fr-FR.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/hi-IN.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/index.ts ADDED Viewed

@@ -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/design/app/i18n/ja-JP.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/ko-KR.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/pt-BR.ts ADDED Viewed

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

package/corpus/templates/design/app/i18n/zh-CN.ts ADDED Viewed

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