@agent-native/core 0.75.4 → 0.76.0

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

@@ -0,0 +1,32 @@
+const messages = {
+  agent: {
+    emptyState: "可以问我任何关于邮件的问题",
+    suggestionSummarize: "总结我的未读邮件",
+    suggestionReplies: "今天哪些邮件需要我回复？",
+    suggestionWidget: "为我的收件箱创建自定义小组件",
+  },
+  settings: {
+    openAgentSettings: "打开代理设置",
+    agentDescription:
+      "打开代理侧边栏设置，管理模型、API 密钥、自动化、语音和其他代理控制项。",
+    agentTitle: "代理设置",
+    title: "设置",
+    general: "通用",
+    generalDescription: "Mail 的语言和账号级偏好设置。",
+    languageTitle: "语言",
+    languageDescription:
+      "选择此账号的界面语言。Mail 会在不同设备上记住你的选择。",
+    languageLabel: "界面语言",
+    whatsNew: "最新变化",
+    whatsNewDescription: "Agent-Native Mail 最近面向用户的更新。",
+    drafting: "起草",
+    automations: "自动化",
+    gmailFilters: "Gmail 筛选器",
+    aliases: "别名",
+    tracking: "跟踪",
+    slack: "Slack",
+    team: "团队",
+  },
+};
+
+export default messages;

package/corpus/templates/mail/app/pages/SettingsPage.tsx

@@ -7,6 +7,9 @@ import {
   useChatModels,
   useChangeVersions,
   ChangelogSettingsCard,
+  LanguagePicker,
+  openAgentSettings,
+  useT,
 } from "@agent-native/core/client";
 import { appApiPath } from "@agent-native/core/client";
 import changelog from "../../CHANGELOG.md?raw";
@@ -27,6 +30,7 @@ import {
   IconFilter,
   IconInfoCircle,
   IconHistory,
+  IconSettings,
 } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -1384,15 +1388,60 @@ function SlackIntakeSection() {
 
 // ─── What's New Section ──────────────────────────────────────────────────────
 
+function GeneralSection() {
+  const t = useT();
+  return (
+    <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+      <div className="mb-6">
+        <h2 className="text-[16px] font-semibold text-foreground">
+          {t("settings.general")}
+        </h2>
+        <p className="mt-0.5 text-[13px] text-muted-foreground">
+          {t("settings.generalDescription")}
+        </p>
+      </div>
+
+      <div className="max-w-2xl rounded-lg border border-border/20 bg-card/50 p-4">
+        <div className="mb-3">
+          <h3 className="text-[13px] font-semibold text-foreground">
+            {t("settings.languageTitle")}
+          </h3>
+          <p className="mt-0.5 text-[12px] text-muted-foreground">
+            {t("settings.languageDescription")}
+          </p>
+        </div>
+        <div className="max-w-sm">
+          <LanguagePicker label={t("settings.languageLabel")} />
+        </div>
+      </div>
+
+      <div className="mt-4 max-w-2xl rounded-lg border border-border/20 bg-card/50 p-4">
+        <div className="mb-3">
+          <h3 className="text-[13px] font-semibold text-foreground">
+            {t("settings.agentTitle")}
+          </h3>
+          <p className="mt-0.5 text-[12px] text-muted-foreground">
+            {t("settings.agentDescription")}
+          </p>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => openAgentSettings()}>
+          {t("settings.openAgentSettings")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function WhatsNewSection() {
+  const t = useT();
   return (
     <div className="flex-1 overflow-y-auto p-4 sm:p-8">
       <div className="mb-6">
         <h2 className="text-[16px] font-semibold text-foreground">
-          What's new
+          {t("settings.whatsNew")}
         </h2>
         <p className="mt-0.5 text-[13px] text-muted-foreground">
-          Recent user-facing changes to Agent-Native Mail.
+          {t("settings.whatsNewDescription")}
         </p>
       </div>
 
@@ -1406,6 +1455,7 @@ function WhatsNewSection() {
 // ─── Settings Page ────────────────────────────────────────────────────────────
 
 type SettingsSection =
+  | "general"
   | "whats-new"
   | "drafting"
   | "automations"
@@ -1417,17 +1467,18 @@ type SettingsSection =
 
 const navItems: {
   id: SettingsSection;
-  label: string;
+  labelKey: string;
   icon: React.ComponentType<{ className?: string }>;
 }[] = [
-  { id: "whats-new", label: "What's new", icon: IconHistory },
-  { id: "drafting", label: "Drafting", icon: IconSignature },
-  { id: "automations", label: "Automations", icon: IconBolt },
-  { id: "gmail-filters", label: "Gmail Filters", icon: IconFilter },
-  { id: "aliases", label: "Aliases", icon: IconUsers },
-  { id: "tracking", label: "Tracking", icon: IconChartBar },
-  { id: "slack", label: "Slack", icon: IconBolt },
-  { id: "team", label: "Team", icon: IconUsers },
+  { id: "general", labelKey: "settings.general", icon: IconSettings },
+  { id: "whats-new", labelKey: "settings.whatsNew", icon: IconHistory },
+  { id: "drafting", labelKey: "settings.drafting", icon: IconSignature },
+  { id: "automations", labelKey: "settings.automations", icon: IconBolt },
+  { id: "gmail-filters", labelKey: "settings.gmailFilters", icon: IconFilter },
+  { id: "aliases", labelKey: "settings.aliases", icon: IconUsers },
+  { id: "tracking", labelKey: "settings.tracking", icon: IconChartBar },
+  { id: "slack", labelKey: "settings.slack", icon: IconBolt },
+  { id: "team", labelKey: "settings.team", icon: IconUsers },
 ];
 
 function isSettingsSection(value: string | null): value is SettingsSection {
@@ -1435,6 +1486,7 @@ function isSettingsSection(value: string | null): value is SettingsSection {
 }
 
 export function SettingsPage() {
+  const t = useT();
   const [searchParams, setSearchParams] = useSearchParams();
   const navState = useNavigationState();
   const [activeSection, setActiveSection] =
@@ -1460,11 +1512,12 @@ export function SettingsPage() {
       {/* Top tabs on mobile, left sidebar on desktop */}
       <div className="sm:w-[200px] shrink-0 sm:border-r border-b sm:border-b-0 border-border/30 bg-muted/50 dark:bg-[hsl(220,6%,5%)] sm:p-3 flex sm:flex-col gap-0.5 overflow-x-auto">
         <p className="hidden sm:block px-2 py-1.5 text-[10px] font-medium text-muted-foreground/40 uppercase tracking-wider mb-1">
-          Settings
+          {t("settings.title")}
         </p>
         {navItems.map((item) => {
           const Icon = item.icon;
           const isActive = activeSection === item.id;
+          const label = t(item.labelKey);
           return (
             <button
               key={item.id}
@@ -1482,7 +1535,7 @@ export function SettingsPage() {
                   isActive ? "text-indigo-400" : "text-muted-foreground/60",
                 )}
               />
-              {item.label}
+              {label}
             </button>
           );
         })}
@@ -1490,6 +1543,7 @@ export function SettingsPage() {
 
       {/* Right content panel */}
       <div className="flex flex-1 overflow-hidden bg-background">
+        {activeSection === "general" && <GeneralSection />}
         {activeSection === "whats-new" && <WhatsNewSection />}
         {activeSection === "drafting" && <DraftingSection />}
         {activeSection === "automations" && <AutomationsSection />}

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

@@ -18,6 +18,7 @@ import {
   appPath,
   appApiPath,
   createAgentNativeQueryClient,
+  getLocaleInitScript,
   getThemeInitScript,
 } from "@agent-native/core/client";
 import { TAB_ID } from "@/lib/tab-id";
@@ -27,6 +28,7 @@ import { Button } from "@/components/ui/button";
 import type { LinksFunction } 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,
@@ -39,6 +41,7 @@ export const links: LinksFunction = () => [
 ];
 
 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") {
@@ -50,7 +53,18 @@ function getHydrationStableThemeInitScript() {
   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 (
@@ -66,6 +80,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="icon" type="image/svg+xml" href={appPath("/favicon.svg")} />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#3B82F6" />
@@ -262,6 +281,7 @@ export default function Root() {
       themeAttribute={["class", "data-theme"]}
       tooltipDelayDuration={300}
       toaster={MAIL_TOASTER}
+      i18n={{ catalog: i18nCatalog }}
     >
       <RequireSession bypass={isMcpEmbedSurface()}>
         <AutoFocus />

package/corpus/templates/mail/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/mail/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/plan/.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/plan/.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/plan/.agents/skills/visual-plan/references/wireframe.md

@@ -64,6 +64,13 @@ themes. For any inline border, background, or text color, reference a token:
 and `--wf-radius`. Never hard-code a hex color and never set `font-family` — the
 renderer owns the sketch/clean font.
 
+**Use literal CSS lengths for spacing.** The `--wf-*` tokens are for colors and
+renderer-owned visual styling, not layout spacing. Do not use guessed spacing
+tokens such as `var(--wf-space-4)`, Tailwind spacing classes, or theme spacing
+variables inside wireframe HTML; if a token is unavailable in the Plan renderer,
+padding collapses and content hugs the border. Use explicit CSS lengths for
+layout: `padding:16px`, `gap:12px`, `margin-top:18px`, `minmax(0,1fr)`.
+
 **Lay out with inline `style` flex/grid.** You write the real layout —
 `display:flex; flex-direction:column; gap:10px; padding:16px` and so on — and the
 renderer never repositions anything. Compose the actual product: reproduce the
@@ -148,10 +155,21 @@ check/serve or verify command for `<plan-dir>`.
 **Treat the wireframe border as part of the visible design.** Always wrap HTML
 wireframe content in a root container with real inner padding before drawing
 cards, fields, pills, labels, or controls. Use at least 14-16px of padding,
-`box-sizing: border-box`, `height: 100%`, and `gap` between child rows so the
-first row never sits flush against the screen border. Keep text away from
-borders: every container, field, button, menu item, and annotation needs enough
-padding and line-height to read cleanly in the rendered Plan view.
+`box-sizing: border-box`, `height: 100%`, and `gap` between child rows on the
+root node itself so the first row never sits flush against the screen border. Do
+not rely on padding on a nested page section as the first visible inset; the
+outermost element must create the breathing room. Keep text away from borders:
+every container, field, button, menu item, and annotation needs enough padding
+and line-height to read cleanly in the rendered Plan view.
+
+**For feature-cloud or abundance visuals, optimize the composition over line-by-line
+reading.** Some marketing/product sections need to feel like a large surface area
+of capability rather than a precise app workflow. In those cases, use one padded
+root with a short headline and a dense, aesthetic cloud of short feature labels,
+chips, rings, or columns. Vary scale and opacity with tokens, cluster by meaning,
+and let many labels be glanceable rather than individually essential. Do not
+force dozens of features into equal cards with long wrapped sentences; that
+usually creates a messy unreadable mockup.
 
 **Lay out children safely so they never collide.** Use HTML flex/grid with
 `gap`, `min-width: 0`, and sensible overflow. Avoid negative margins, absolute

package/corpus/templates/plan/.agents/skills/visual-recap/references/wireframe.md

@@ -64,6 +64,13 @@ themes. For any inline border, background, or text color, reference a token:
 and `--wf-radius`. Never hard-code a hex color and never set `font-family` — the
 renderer owns the sketch/clean font.
 
+**Use literal CSS lengths for spacing.** The `--wf-*` tokens are for colors and
+renderer-owned visual styling, not layout spacing. Do not use guessed spacing
+tokens such as `var(--wf-space-4)`, Tailwind spacing classes, or theme spacing
+variables inside wireframe HTML; if a token is unavailable in the Plan renderer,
+padding collapses and content hugs the border. Use explicit CSS lengths for
+layout: `padding:16px`, `gap:12px`, `margin-top:18px`, `minmax(0,1fr)`.
+
 **Lay out with inline `style` flex/grid.** You write the real layout —
 `display:flex; flex-direction:column; gap:10px; padding:16px` and so on — and the
 renderer never repositions anything. Compose the actual product: reproduce the
@@ -148,10 +155,21 @@ check/serve or verify command for `<plan-dir>`.
 **Treat the wireframe border as part of the visible design.** Always wrap HTML
 wireframe content in a root container with real inner padding before drawing
 cards, fields, pills, labels, or controls. Use at least 14-16px of padding,
-`box-sizing: border-box`, `height: 100%`, and `gap` between child rows so the
-first row never sits flush against the screen border. Keep text away from
-borders: every container, field, button, menu item, and annotation needs enough
-padding and line-height to read cleanly in the rendered Plan view.
+`box-sizing: border-box`, `height: 100%`, and `gap` between child rows on the
+root node itself so the first row never sits flush against the screen border. Do
+not rely on padding on a nested page section as the first visible inset; the
+outermost element must create the breathing room. Keep text away from borders:
+every container, field, button, menu item, and annotation needs enough padding
+and line-height to read cleanly in the rendered Plan view.
+
+**For feature-cloud or abundance visuals, optimize the composition over line-by-line
+reading.** Some marketing/product sections need to feel like a large surface area
+of capability rather than a precise app workflow. In those cases, use one padded
+root with a short headline and a dense, aesthetic cloud of short feature labels,
+chips, rings, or columns. Vary scale and opacity with tokens, cluster by meaning,
+and let many labels be glanceable rather than individually essential. Do not
+force dozens of features into equal cards with long wrapped sentences; that
+usually creates a messy unreadable mockup.
 
 **Lay out children safely so they never collide.** Use HTML flex/grid with
 `gap`, `min-width: 0`, and sensible overflow. Avoid negative margins, absolute

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

@@ -1,21 +1,25 @@
 import { useLocation } from "react-router";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-import { AgentToggleButton } from "@agent-native/core/client";
+import {
+  AgentToggleButton,
+  LanguagePicker,
+  useT,
+} from "@agent-native/core/client";
 import { APP_TITLE } from "@/lib/app-config";
 
-const pageTitles: Record<string, string> = {
-  "/": "Plan",
-  "/plans": "Plan",
-  "/settings": "Settings",
-  "/team": "Team",
+const pageTitleKeys: Record<string, string> = {
+  "/": "header.plan",
+  "/plans": "header.plan",
+  "/settings": "header.settings",
+  "/team": "header.team",
 };
 
 function resolveTitle(pathname: string): string {
-  if (pageTitles[pathname]) return pageTitles[pathname];
-  if (pathname.startsWith("/plans")) return "Plan";
-  if (pathname.startsWith("/extensions")) return "Extensions";
-  return APP_TITLE;
+  if (pageTitleKeys[pathname]) return pageTitleKeys[pathname];
+  if (pathname.startsWith("/plans")) return "header.plan";
+  if (pathname.startsWith("/extensions")) return "header.extensions";
+  return "header.appTitle";
 }
 
 interface HeaderProps {
@@ -26,6 +30,8 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
   const location = useLocation();
   const title = useHeaderTitle();
   const actions = useHeaderActions();
+  const t = useT();
+  const resolvedTitle = resolveTitle(location.pathname);
 
   return (
     <header className="flex h-12 items-center gap-3 border-b border-border bg-background px-4 lg:px-6 shrink-0">
@@ -33,7 +39,7 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
         <button
           type="button"
           onClick={onOpenMobileSidebar}
-          aria-label="Open navigation"
+          aria-label={t("sidebar.openNavigation")}
           className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent md:hidden"
         >
           <IconMenu2 className="h-4 w-4" />
@@ -42,12 +48,13 @@ export function Header({ onOpenMobileSidebar }: HeaderProps) {
       <div className="flex items-center gap-3 flex-1 min-w-0">
         {title ?? (
           <h1 className="text-lg font-semibold tracking-tight truncate">
-            {resolveTitle(location.pathname)}
+            {resolvedTitle === "header.appTitle" ? APP_TITLE : t(resolvedTitle)}
           </h1>
         )}
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
+        <LanguagePicker variant="icon" />
         <AgentToggleButton />
       </div>
     </header>

package/corpus/templates/plan/app/components/layout/Layout.tsx

@@ -8,6 +8,7 @@ import {
   AgentSidebar,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
+  useT,
 } from "@agent-native/core/client";
 import {
   Sheet,
@@ -43,6 +44,7 @@ function isPlanDetailRoute(pathname: string): boolean {
 
 export function Layout({ children }: LayoutProps) {
   const location = useLocation();
+  const t = useT();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     if (typeof window === "undefined") return true;
@@ -136,7 +138,7 @@ export function Layout({ children }: LayoutProps) {
             <button
               type="button"
               onClick={() => setMobileSidebarOpen(true)}
-              aria-label="Open navigation"
+              aria-label={t("sidebar.openNavigation")}
               className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent"
             >
               <IconMenu2 className="h-4 w-4" />
@@ -163,9 +165,11 @@ export function Layout({ children }: LayoutProps) {
         )}
         <Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
           <SheetContent side="left" className="p-0 w-[260px]">
-            <SheetTitle className="sr-only">Navigation</SheetTitle>
+            <SheetTitle className="sr-only">
+              {t("sidebar.navigation")}
+            </SheetTitle>
             <SheetDescription className="sr-only">
-              App navigation links
+              {t("sidebar.navigationDescription")}
             </SheetDescription>
             <Sidebar collapsed={false} collapsible={false} />
           </SheetContent>
@@ -179,11 +183,11 @@ export function Layout({ children }: LayoutProps) {
             chatViewTransition
             storageKey="plans"
             openOnChatRunning={chatHomeHandoffActive}
-            emptyStateText="Ask the Plan agent to search merged PR recaps, inspect this document, add diagrams, or answer code questions as visual plans."
+            emptyStateText={t("agent.emptyState")}
             suggestions={[
-              "What shipped in the last week?",
-              "What does this UI look like?",
-              "What is the shape of this API?",
+              t("agent.suggestionShipped"),
+              t("agent.suggestionUi"),
+              t("agent.suggestionApi"),
             ]}
           >
             {pageContent}