@agent-native/core 0.75.5 → 0.76.0

package/corpus/templates/content/app/components/EmptyState.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { useCreateDocument } from "@/hooks/use-documents";
 import type { Document } from "@shared/api";
 import { toast } from "sonner";
+import { useT } from "@agent-native/core/client";
 
 function nanoid(size = 12): string {
   const chars =
@@ -17,6 +18,7 @@ export function EmptyState() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const createDocument = useCreateDocument();
+  const t = useT();
 
   const handleCreate = async () => {
     const id = nanoid();
@@ -55,9 +57,9 @@ export function EmptyState() {
         queryKey: ["action", "get-document", { id }],
       });
       navigate("/");
-      toast.error("Failed to create page", {
+      toast.error(t("empty.createFailed"), {
         description:
-          err instanceof Error ? err.message : "Something went wrong",
+          err instanceof Error ? err.message : t("empty.genericError"),
       });
     }
   };
@@ -69,14 +71,14 @@ export function EmptyState() {
           <IconFileText size={24} className="text-muted-foreground" />
         </div>
         <h2 className="text-lg font-semibold text-foreground mb-2">
-          No page selected
+          {t("empty.noPageTitle")}
         </h2>
         <p className="text-sm text-muted-foreground leading-relaxed mb-6">
-          Select a page from the sidebar or create a new one to get started.
+          {t("empty.noPageDescription")}
         </p>
         <Button onClick={handleCreate} size="sm">
           <IconPlus size={14} className="mr-1.5" />
-          New page
+          {t("empty.newPage")}
         </Button>
       </div>
     </div>

package/corpus/templates/content/app/components/ThemeToggle.tsx

@@ -8,6 +8,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { useT } from "@agent-native/core/client";
 
 const themeOptions = [
   { value: "system", label: "System theme", icon: IconDeviceDesktop },
@@ -56,6 +57,7 @@ function nextTheme(theme: ThemeOption): ThemeOption {
 
 export function ThemeToggle({ className }: { className?: string }) {
   const { theme, setTheme } = useTheme();
+  const t = useT();
   const [mounted, setMounted] = useState(false);
   const [selectedTheme, setSelectedTheme] = useState<ThemeOption>("system");
 
@@ -84,7 +86,7 @@ export function ThemeToggle({ className }: { className?: string }) {
         <Button
           variant="ghost"
           size="icon"
-          aria-label={activeOption.label}
+          aria-label={t(`theme.${activeOption.value}`)}
           onClick={handleClick}
           className={cn(
             "size-8 rounded-md text-sidebar-muted hover:text-sidebar-foreground",
@@ -94,7 +96,7 @@ export function ThemeToggle({ className }: { className?: string }) {
           <ActiveIcon size={14} />
         </Button>
       </TooltipTrigger>
-      <TooltipContent>{activeOption.label}</TooltipContent>
+      <TooltipContent>{t(`theme.${activeOption.value}`)}</TooltipContent>
     </Tooltip>
   );
 }

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

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
 import {
   AgentToggleButton,
+  LanguagePicker,
   NotificationsBell,
 } from "@agent-native/core/client";
 
@@ -41,6 +42,7 @@ export function Header({ sidebarTrigger }: HeaderProps) {
       </div>
       <div className="flex items-center gap-2 shrink-0">
         {actions}
+        <LanguagePicker variant="icon" />
         <NotificationsBell />
         <AgentToggleButton />
       </div>

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

@@ -9,7 +9,7 @@ import {
 import { useLocation } from "react-router";
 import { DocumentSidebar } from "@/components/sidebar/DocumentSidebar";
 import { useCreatePage } from "@/hooks/use-create-page";
-import { AgentSidebar, getBrowserTabId } from "@agent-native/core/client";
+import { AgentSidebar, getBrowserTabId, useT } from "@agent-native/core/client";
 import { InvitationBanner } from "@agent-native/core/client/org";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
@@ -44,6 +44,7 @@ interface LayoutProps {
 
 export function Layout({ children }: LayoutProps) {
   const location = useLocation();
+  const t = useT();
   const activeDocumentId =
     location.pathname.match(/^\/page\/([^/]+)/)?.[1] ?? null;
   // Bind chat to the currently-open document. Everywhere else (list view,
@@ -92,7 +93,7 @@ export function Layout({ children }: LayoutProps) {
   const mobileSidebarTrigger = isMobile ? (
     <button
       type="button"
-      aria-label="Open sidebar"
+      aria-label={t("navigation.openSidebar")}
       className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:hidden"
       onClick={() => setMobileSidebarOpen(true)}
     >
@@ -127,7 +128,7 @@ export function Layout({ children }: LayoutProps) {
             {showHeader ? null : (
               <button
                 type="button"
-                aria-label="Open sidebar"
+                aria-label={t("navigation.openSidebar")}
                 className="fixed left-3 top-3 z-30 flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground md:hidden"
                 onClick={() => setMobileSidebarOpen(true)}
               >
@@ -147,11 +148,11 @@ export function Layout({ children }: LayoutProps) {
         <AgentSidebar
           position="right"
           defaultOpen={!isMobile}
-          emptyStateText="Ask me anything about your documents"
+          emptyStateText={t("chat.emptyState")}
           suggestions={[
-            "Draft a PRD for a new feature",
-            "Summarize this page in 5 bullets",
-            "Pull this page from Notion",
+            t("chat.suggestionPrd"),
+            t("chat.suggestionSummary"),
+            t("chat.suggestionNotion"),
           ]}
           scope={documentScope}
           browserTabId={getBrowserTabId()}

package/corpus/templates/content/app/components/sidebar/DocumentSidebar.tsx

@@ -21,6 +21,7 @@ import {
   IconPlus,
   IconSearch,
   IconStar,
+  IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconFolderOpen,
@@ -35,6 +36,7 @@ import {
   FeedbackButton,
   appPath,
   useCodeMode,
+  useT,
 } from "@agent-native/core/client";
 import {
   ExtensionSlot,
@@ -143,6 +145,7 @@ export function DocumentSidebar({
   const navigate = useNavigate();
   const location = useLocation();
   const queryClient = useQueryClient();
+  const t = useT();
   const { data: documents = [], isLoading } = useDocuments();
   const createDocument = useCreateDocument();
   const deleteDocument = useDeleteDocument();
@@ -165,6 +168,7 @@ export function DocumentSidebar({
     organization: false,
   });
   const localFilesActive = location.pathname.startsWith("/local-files");
+  const settingsActive = location.pathname.startsWith("/settings");
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 6 },
@@ -588,6 +592,23 @@ export function DocumentSidebar({
     </button>
   );
 
+  const renderSettingsNavButton = () => (
+    <button
+      className={cn(
+        "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm",
+        settingsActive
+          ? "bg-accent text-accent-foreground"
+          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+      )}
+      onClick={() => navigate("/settings")}
+    >
+      <IconSettings size={15} className="shrink-0" />
+      <span className="min-w-0 flex-1 truncate text-left">
+        {t("navigation.settings")}
+      </span>
+    </button>
+  );
+
   const toggleSection = (id: SidebarSectionId) => {
     setCollapsedSections((current) => ({
       ...current,
@@ -714,6 +735,22 @@ export function DocumentSidebar({
           </TooltipTrigger>
           <TooltipContent>Local files</TooltipContent>
         </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              className={cn(
+                "w-10 h-10 flex items-center justify-center rounded-lg hover:bg-accent",
+                settingsActive
+                  ? "bg-accent text-accent-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+              onClick={() => navigate("/settings")}
+            >
+              <IconSettings size={16} />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{t("navigation.settings")}</TooltipContent>
+        </Tooltip>
       </div>
     );
   }
@@ -921,7 +958,10 @@ export function DocumentSidebar({
       </ScrollArea>
 
       <div className="shrink-0 border-t border-border px-3 py-2">
-        {renderLocalFilesNavButton()}
+        <div className="space-y-1">
+          {renderLocalFilesNavButton()}
+          {renderSettingsNavButton()}
+        </div>
       </div>
 
       <div className="shrink-0 border-t border-border">

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

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

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

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

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

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

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

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

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

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

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

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

package/corpus/templates/content/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/content/app/i18n/ja-JP.ts

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

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

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

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

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

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

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