@agent-native/core 0.75.4 → 0.76.0

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

@@ -0,0 +1,59 @@
+const messages = {
+  root: {
+    commandForms: "양식",
+    searchForms: "양식 검색",
+    appearance: "모양",
+    toggleTheme: "테마 전환",
+  },
+  header: {
+    settings: "설정",
+    forms: "양식",
+    team: "팀",
+    responses: "응답",
+    form: "양식",
+    extensions: "확장",
+  },
+  navigation: {
+    settings: "설정",
+    brand: "양식",
+    askForms: "Ask Forms",
+    team: "팀",
+  },
+  settings: {
+    title: "설정",
+    description: "이 앱의 언어 및 워크스페이스 환경설정입니다.",
+    languageTitle: "언어",
+    languageDescription:
+      "인터페이스 언어를 선택하세요. 이 기본 설정은 계정에 저장됩니다.",
+    languageLabel: "인터페이스 언어",
+    workspaceTitle: "워크스페이스",
+    workspaceDescription:
+      "팀원, 조직 접근 권한, 공유 워크스페이스 환경설정을 관리합니다.",
+    openTeamSettings: "팀 설정 열기",
+    openResourceSettings: "리소스 설정 열기",
+    agentTitle: "에이전트 설정",
+    agentDescription:
+      "오른쪽 사이드바의 에이전트 설정을 열어 모델, API 키, 자동화, 음성 및 기타 제어를 관리합니다.",
+    openAgentSettings: "에이전트 설정 열기",
+  },
+  agent: {
+    emptyState: "양식에 대해 무엇이든 물어보세요",
+    suggestionSurvey: "고객 피드백 설문 만들기",
+    suggestionSubmissions: "일별 제출 보기",
+    suggestionExport: "응답을 CSV로 내보내기",
+  },
+  sidebar: {
+    formGenerationStale:
+      "양식 생성이 예상보다 오래 걸립니다. 다시 시도할 수 있습니다.",
+    untitledForm: "제목 없는 양식",
+    newForm: "새 양식",
+    describeFormPlaceholder: "양식을 설명하세요...",
+    skipPrompt: "프롬프트 건너뛰기",
+    submitShortcutSuffix: "+Enter로 제출",
+    sendPrompt: "프롬프트 보내기",
+    openAskFullScreen: "Ask Forms 전체 화면 열기",
+    openSidebar: "사이드바 열기",
+  },
+};
+
+export default messages;

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

@@ -0,0 +1,59 @@
+const messages = {
+  root: {
+    commandForms: "Formularios",
+    searchForms: "Pesquisar formularios",
+    appearance: "Aparencia",
+    toggleTheme: "Alternar tema",
+  },
+  header: {
+    settings: "Configurações",
+    forms: "Formularios",
+    team: "Equipe",
+    responses: "Respostas",
+    form: "Formulario",
+    extensions: "Extensoes",
+  },
+  navigation: {
+    settings: "Configurações",
+    brand: "Formularios",
+    askForms: "Perguntar ao Forms",
+    team: "Equipe",
+  },
+  settings: {
+    title: "Configurações",
+    description: "Preferências de idioma e espaço de trabalho deste app.",
+    languageTitle: "Idioma",
+    languageDescription:
+      "Escolha o idioma da interface. Essa preferência é salva na sua conta.",
+    languageLabel: "Idioma da interface",
+    workspaceTitle: "Espaço de trabalho",
+    workspaceDescription:
+      "Gerencie membros da equipe, acesso da organização e preferências compartilhadas.",
+    openTeamSettings: "Abrir configurações da equipe",
+    openResourceSettings: "Abrir configurações de recursos",
+    agentTitle: "Configurações do agente",
+    agentDescription:
+      "Abra as configurações do agente na barra lateral para modelos, chaves de API, automações, voz e outros controles.",
+    openAgentSettings: "Abrir configurações do agente",
+  },
+  agent: {
+    emptyState: "Pergunte qualquer coisa sobre seus formularios",
+    suggestionSurvey: "Criar uma pesquisa de feedback de clientes",
+    suggestionSubmissions: "Mostrar envios por dia",
+    suggestionExport: "Exportar respostas para CSV",
+  },
+  sidebar: {
+    formGenerationStale:
+      "A geracao do formulario esta demorando mais que o esperado. Voce pode tentar de novo.",
+    untitledForm: "Formulario sem titulo",
+    newForm: "Novo formulario",
+    describeFormPlaceholder: "Descreva seu formulario...",
+    skipPrompt: "Ignorar prompt",
+    submitShortcutSuffix: "+Enter para enviar",
+    sendPrompt: "Enviar prompt",
+    openAskFullScreen: "Abrir Ask Forms em tela cheia",
+    openSidebar: "Abrir barra lateral",
+  },
+};
+
+export default messages;

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

@@ -0,0 +1,56 @@
+const messages = {
+  root: {
+    commandForms: "表单",
+    searchForms: "搜索表单",
+    appearance: "外观",
+    toggleTheme: "切换主题",
+  },
+  header: {
+    settings: "设置",
+    forms: "表单",
+    team: "团队",
+    responses: "回复",
+    form: "表单",
+    extensions: "扩展",
+  },
+  navigation: {
+    settings: "设置",
+    brand: "表单",
+    askForms: "询问表单",
+    team: "团队",
+  },
+  settings: {
+    title: "设置",
+    description: "此应用的语言和工作区偏好设置。",
+    languageTitle: "语言",
+    languageDescription: "选择界面语言。此偏好会保存到你的账户。",
+    languageLabel: "界面语言",
+    workspaceTitle: "工作区",
+    workspaceDescription: "管理团队成员、组织访问权限和共享工作区偏好。",
+    openTeamSettings: "打开团队设置",
+    openResourceSettings: "打开资源设置",
+    agentTitle: "代理设置",
+    agentDescription:
+      "打开代理侧边栏设置，管理模型、API 密钥、自动化、语音和其他代理控制项。",
+    openAgentSettings: "打开代理设置",
+  },
+  agent: {
+    emptyState: "可以问我任何关于表单的问题",
+    suggestionSurvey: "创建客户反馈调查",
+    suggestionSubmissions: "按天显示提交",
+    suggestionExport: "将回复导出为 CSV",
+  },
+  sidebar: {
+    formGenerationStale: "表单生成时间比预期更长。你可以重试。",
+    untitledForm: "未命名表单",
+    newForm: "新建表单",
+    describeFormPlaceholder: "描述你的表单...",
+    skipPrompt: "跳过提示",
+    submitShortcutSuffix: "+Enter 提交",
+    sendPrompt: "发送提示",
+    openAskFullScreen: "全屏打开询问表单",
+    openSidebar: "打开侧边栏",
+  },
+};
+
+export default messages;

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

@@ -19,17 +19,20 @@ import {
   CommandMenu,
   appPath,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   useCommandMenuShortcut,
   getThemeInitScript,
   configureTracking,
   markAgentChatHomeHandoff,
   navigateWithAgentChatViewTransition,
   setClientAppState,
+  useT,
 } from "@agent-native/core/client";
 import type { LinksFunction } from "react-router";
 import changelog from "../CHANGELOG.md?raw";
 import stylesheet from "./global.css?url";
 import { TAB_ID } from "@/lib/tab-id";
+import { i18nCatalog } from "./i18n";
 
 configureTracking({
   getDefaultProps: (_name, properties) => ({
@@ -42,7 +45,31 @@ export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
 
-const THEME_INIT_SCRIPT = getThemeInitScript();
+const THEME_INIT_SCRIPT_SELECTOR = "script[data-agent-native-theme-init]";
+const LOCALE_INIT_SCRIPT_SELECTOR = "script[data-agent-native-locale-init]";
+
+function getHydrationStableThemeInitScript() {
+  if (typeof document !== "undefined") {
+    const existing = document.querySelector<HTMLScriptElement>(
+      THEME_INIT_SCRIPT_SELECTOR,
+    );
+    if (existing?.innerHTML) return existing.innerHTML;
+  }
+  return getThemeInitScript();
+}
+
+function getHydrationStableLocaleInitScript() {
+  if (typeof document !== "undefined") {
+    const existing = document.querySelector<HTMLScriptElement>(
+      LOCALE_INIT_SCRIPT_SELECTOR,
+    );
+    if (existing?.innerHTML) return existing.innerHTML;
+  }
+  return getLocaleInitScript();
+}
+
+const THEME_INIT_SCRIPT = getHydrationStableThemeInitScript();
+const LOCALE_INIT_SCRIPT = getHydrationStableLocaleInitScript();
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -54,9 +81,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
         />
         <script
+          data-agent-native-theme-init
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: LOCALE_INIT_SCRIPT }}
+        />
         <link rel="icon" type="image/svg+xml" href={appPath("/favicon.svg")} />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#06B6D4" />
@@ -177,6 +210,7 @@ function OpenLinkInterceptor() {
 
 function ThemeToggleItem() {
   const { resolvedTheme, setTheme } = useTheme();
+  const t = useT();
   const isDark = resolvedTheme === "dark";
   return (
     <CommandMenu.Item
@@ -184,34 +218,49 @@ function ThemeToggleItem() {
       keywords={["theme", "dark", "light", "mode"]}
     >
       {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-      Toggle theme
+      {t("root.toggleTheme")}
     </CommandMenu.Item>
   );
 }
 
+function FormsCommandMenu({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const t = useT();
+  return (
+    <CommandMenu
+      open={open}
+      onOpenChange={onOpenChange}
+      changelog={changelog}
+      changelogKey="forms"
+    >
+      <CommandMenu.Group heading={t("root.commandForms")}>
+        <CommandMenu.Item onSelect={() => {}}>
+          {t("root.searchForms")}
+        </CommandMenu.Item>
+      </CommandMenu.Group>
+      <CommandMenu.Group heading={t("root.appearance")}>
+        <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 />
       <NavigationStateSync />
       <UrlStateSync />
       <OpenLinkInterceptor />
-      <CommandMenu
-        open={cmdkOpen}
-        onOpenChange={setCmdkOpen}
-        changelog={changelog}
-        changelogKey="forms"
-      >
-        <CommandMenu.Group heading="Forms">
-          <CommandMenu.Item onSelect={() => {}}>Search forms</CommandMenu.Item>
-        </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
-          <ThemeToggleItem />
-        </CommandMenu.Group>
-      </CommandMenu>
+      <FormsCommandMenu open={cmdkOpen} onOpenChange={setCmdkOpen} />
       <Outlet />
     </AppProviders>
   );

package/corpus/templates/forms/app/routes/_app.settings.tsx

@@ -0,0 +1,85 @@
+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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import changelog from "../../CHANGELOG.md?raw";
+
+export function meta() {
+  return [{ title: "Settings - Forms" }];
+}
+
+export default function SettingsRoute() {
+  const t = useT();
+  useSetPageTitle(t("settings.title"));
+
+  return (
+    <main className="mx-auto w-full max-w-3xl space-y-6 px-4 py-6 sm:px-6 sm:py-10">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          {t("settings.title")}
+        </h1>
+        <p className="text-sm leading-6 text-muted-foreground">
+          {t("settings.description")}
+        </p>
+      </div>
+
+      <Card>
+        <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>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.workspaceTitle")}
+          </CardTitle>
+          <CardDescription>
+            {t("settings.workspaceDescription")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" asChild>
+            <Link to="/team">{t("settings.openTeamSettings")}</Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <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>
+
+      <ChangelogSettingsCard markdown={changelog} />
+    </main>
+  );
+}

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

@@ -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/forms/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/macros/app/components/layout/AppLayout.tsx

@@ -12,6 +12,7 @@ import {
   FeedbackButton,
   agentNativePath,
   appPath,
+  useT,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
 import { OrgSwitcher } from "@agent-native/core/client/org";
@@ -36,15 +37,16 @@ import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
 
 const navItems = [
-  { icon: IconFlame, label: "Entry", href: "/" },
-  { icon: IconChartBar, label: "Analytics", href: "/analytics" },
-  { icon: IconSettings, label: "Settings", href: "/settings" },
+  { icon: IconFlame, labelKey: "navigation.entry", href: "/" },
+  { icon: IconChartBar, labelKey: "navigation.analytics", href: "/analytics" },
+  { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   const location = useLocation();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const t = useT();
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [desktopSidebarCollapsed, setDesktopSidebarCollapsed] = useState(() => {
@@ -53,6 +55,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
   });
 
   const isAnalytics = location.pathname === "/analytics";
+  const isSettings = location.pathname.startsWith("/settings");
 
   // Auto-close sidebar on route change (mobile)
   useEffect(() => {
@@ -68,12 +71,12 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
 
   // Navigation state sync - write current view to application state
   useEffect(() => {
-    const view = isAnalytics ? "analytics" : "entry";
+    const view = isSettings ? "settings" : isAnalytics ? "analytics" : "entry";
     apiFetch(agentNativePath("/_agent-native/application-state/navigation"), {
       method: "PUT",
       body: JSON.stringify({ view, path: location.pathname }),
     }).catch(() => {});
-  }, [location.pathname, isAnalytics]);
+  }, [location.pathname, isAnalytics, isSettings]);
 
   // Poll for navigate commands from the agent
   const { data: navCommand } = useQuery({
@@ -102,6 +105,8 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
           : commandValue;
       if (cmd.view === "analytics") {
         navigate("/analytics");
+      } else if (cmd.view === "settings") {
+        navigate("/settings");
       } else if (cmd.view === "entry") {
         navigate("/");
       }
@@ -119,11 +124,11 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
         position="right"
         defaultOpen={false}
         animateMobile
-        emptyStateText="Just tell me what you ate — I'll estimate the macros"
+        emptyStateText={t("agent.emptyState")}
         suggestions={[
-          "Chicken burrito bowl for lunch",
-          "What are my macros today?",
-          "I ran 30 minutes this morning",
+          t("agent.suggestionLunch"),
+          t("agent.suggestionMacros"),
+          t("agent.suggestionRun"),
         ]}
       >
         <div className="flex flex-1 overflow-hidden">
@@ -146,7 +151,9 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
           {/* Mobile sidebar sheet */}
           <Sheet open={sidebarOpen} onOpenChange={setSidebarOpen}>
             <SheetContent side="left" className="w-56 p-0">
-              <SheetTitle className="sr-only">Navigation</SheetTitle>
+              <SheetTitle className="sr-only">
+                {t("sidebar.navigation")}
+              </SheetTitle>
               <SidebarContent pathname={location.pathname} />
             </SheetContent>
           </Sheet>
@@ -172,6 +179,7 @@ function SidebarContent({
   collapsed?: boolean;
   onToggleCollapsed?: () => void;
 }) {
+  const t = useT();
   const ToggleIcon = collapsed
     ? IconLayoutSidebarLeftExpand
     : IconLayoutSidebarLeftCollapse;
@@ -199,7 +207,7 @@ function SidebarContent({
               className="hidden h-4 w-auto shrink-0 dark:block"
             />
             <span className="font-logo truncate text-sm font-bold tracking-tight text-foreground">
-              Macros
+              {t("navigation.brand")}
             </span>
           </div>
         )}
@@ -211,7 +219,9 @@ function SidebarContent({
                 variant="ghost"
                 size="icon"
                 aria-label={
-                  collapsed ? "Expand left sidebar" : "Collapse left sidebar"
+                  collapsed
+                    ? t("sidebar.expandLeftSidebar")
+                    : t("sidebar.collapseLeftSidebar")
                 }
                 className={cn(
                   "hidden h-8 w-8 text-muted-foreground hover:text-foreground md:inline-flex",
@@ -223,7 +233,7 @@ function SidebarContent({
               </Button>
             </TooltipTrigger>
             <TooltipContent side="right">
-              {collapsed ? "Expand sidebar" : "Collapse sidebar"}
+              {collapsed ? t("sidebar.expand") : t("sidebar.collapse")}
             </TooltipContent>
           </Tooltip>
         )}
@@ -232,6 +242,7 @@ function SidebarContent({
       <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-2">
         {navItems.map((item) => {
           const Icon = item.icon;
+          const label = t(item.labelKey);
           const isActive =
             item.href === "/"
               ? pathname === "/" || pathname === "/entry"
@@ -240,7 +251,7 @@ function SidebarContent({
             <Link
               key={item.href}
               to={item.href}
-              aria-label={collapsed ? item.label : undefined}
+              aria-label={collapsed ? label : undefined}
               className={cn(
                 "flex h-9 items-center rounded-lg text-sm transition-colors",
                 collapsed ? "justify-center px-0" : "gap-3 px-3",
@@ -250,13 +261,13 @@ function SidebarContent({
               )}
             >
               <Icon className="h-4 w-4 shrink-0" />
-              {!collapsed && item.label}
+              {!collapsed && label}
             </Link>
           );
           return collapsed ? (
             <Tooltip key={item.href}>
               <TooltipTrigger asChild>{link}</TooltipTrigger>
-              <TooltipContent side="right">{item.label}</TooltipContent>
+              <TooltipContent side="right">{label}</TooltipContent>
             </Tooltip>
           ) : (
             link
@@ -282,6 +293,7 @@ function SidebarContent({
 }
 
 function SyncIndicator({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
+  const t = useT();
   const refetchingActions = useIsFetching({
     predicate: (query) =>
       query.queryKey[0] === "action" && query.state.dataUpdatedAt > 0,
@@ -326,7 +338,7 @@ function SyncIndicator({ sidebarCollapsed }: { sidebarCollapsed: boolean }) {
       )}
     >
       <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-      Syncing…
+      {t("sidebar.syncing")}
     </div>
   );
 }

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

@@ -1,20 +1,24 @@
 import { useLocation } from "react-router";
 import { IconMenu2 } from "@tabler/icons-react";
-import { AgentToggleButton } from "@agent-native/core/client";
+import {
+  AgentToggleButton,
+  LanguagePicker,
+  useT,
+} from "@agent-native/core/client";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 
 const pageTitles: Record<string, string> = {
-  "/": "Entry",
-  "/entry": "Entry",
-  "/analytics": "Analytics",
-  "/settings": "Settings",
-  "/extensions": "Extensions",
+  "/": "header.entry",
+  "/entry": "header.entry",
+  "/analytics": "header.analytics",
+  "/settings": "header.settings",
+  "/extensions": "header.extensions",
 };
 
 function resolveTitle(pathname: string): string {
   if (pageTitles[pathname]) return pageTitles[pathname];
-  if (pathname.startsWith("/extensions")) return "Extensions";
-  return "Macros";
+  if (pathname.startsWith("/extensions")) return "header.extensions";
+  return "header.macros";
 }
 
 interface HeaderProps {
@@ -25,25 +29,27 @@ export function Header({ onOpenSidebar }: HeaderProps) {
   const location = useLocation();
   const title = useHeaderTitle();
   const actions = useHeaderActions();
+  const t = useT();
 
   return (
     <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-3 md:px-4">
       <button
         onClick={onOpenSidebar}
         className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground md:hidden"
-        aria-label="Open menu"
+        aria-label={t("sidebar.openMenu")}
       >
         <IconMenu2 className="h-5 w-5" />
       </button>
       <div className="flex min-w-0 flex-1 items-center gap-3">
         {title ?? (
           <h1 className="truncate text-sm font-semibold text-foreground">
-            {resolveTitle(location.pathname)}
+            {t(resolveTitle(location.pathname))}
           </h1>
         )}
       </div>
       <div className="flex shrink-0 items-center gap-2">
         {actions}
+        <LanguagePicker variant="icon" />
         <AgentToggleButton />
       </div>
     </header>