@agent-native/core 0.75.4 → 0.76.0

package/corpus/templates/clips/chrome-extension/src/permission.html

@@ -52,6 +52,9 @@
       * {
         box-sizing: border-box;
       }
+      [hidden] {
+        display: none !important;
+      }
       body {
         margin: 0;
         min-height: 100vh;
@@ -143,6 +146,45 @@
         color: var(--fg-subtle);
         font-size: 12px;
       }
+      .success-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        margin-top: -4px;
+        padding: 18px 16px;
+        border: 1px solid var(--status-ok);
+        border-radius: var(--radius-sm);
+        background: rgba(34, 197, 94, 0.1);
+        text-align: center;
+      }
+      .success-icon {
+        display: inline-flex;
+        width: 58px;
+        height: 58px;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid var(--status-ok);
+        border-radius: 50%;
+        background: var(--bg);
+        color: var(--status-ok);
+      }
+      .success-icon svg {
+        width: 32px;
+        height: 32px;
+      }
+      .success-title {
+        margin: 0;
+        color: var(--fg);
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 1.2;
+      }
+      .success-copy {
+        margin: 0;
+        color: var(--fg-muted);
+        font-size: 13.5px;
+      }
       button {
         font: inherit;
         appearance: none;
@@ -219,6 +261,24 @@
           >
         </div>
       </div>
+      <div class="success-state" id="success-state" role="status" hidden>
+        <div class="success-icon" aria-hidden="true">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 6 9 17l-5-5" />
+          </svg>
+        </div>
+        <div class="success-title" id="success-title">You're all done</div>
+        <p class="success-copy" id="success-copy">
+          You can close this tab and start recording from the Clips icon.
+        </p>
+      </div>
       <button id="enable">Enable camera &amp; microphone</button>
       <div class="status" id="status"></div>
     </div>

package/corpus/templates/clips/chrome-extension/src/permission.ts

@@ -7,6 +7,11 @@
 
 const enableBtn = document.getElementById("enable") as HTMLButtonElement;
 const statusEl = document.getElementById("status") as HTMLDivElement;
+const successEl = document.getElementById("success-state") as HTMLDivElement;
+const successTitle = document.getElementById("success-title") as HTMLDivElement;
+const successCopy = document.getElementById(
+  "success-copy",
+) as HTMLParagraphElement;
 const rowMic = document.getElementById("row-mic") as HTMLDivElement;
 const rowCam = document.getElementById("row-cam") as HTMLDivElement;
 const checkMic = document.getElementById("check-mic") as HTMLSpanElement;
@@ -20,6 +25,25 @@ function setStatus(text: string, isError = false): void {
   statusEl.classList.toggle("error", isError);
 }
 
+function showEnableButton(text: string, disabled: boolean): void {
+  enableBtn.hidden = false;
+  enableBtn.textContent = text;
+  enableBtn.disabled = disabled;
+  successEl.hidden = true;
+}
+
+function showSuccess(title: string): void {
+  enableBtn.hidden = true;
+  enableBtn.disabled = true;
+  successTitle.textContent = title;
+  successCopy.textContent =
+    "You can close this tab and start recording from the Clips icon.";
+  successEl.hidden = false;
+  setStatus(
+    "Chrome still asks you what to share before each recording starts.",
+  );
+}
+
 function markRow(kind: "mic" | "cam", granted: boolean): void {
   const row = kind === "mic" ? rowMic : rowCam;
   const check = kind === "mic" ? checkMic : checkCam;
@@ -59,16 +83,9 @@ function finish(camOk: boolean, micOk: boolean): void {
   markRow("mic", micOk);
   markRow("cam", camOk);
   if (camOk || micOk) {
-    enableBtn.textContent = "All set — you can close this tab";
-    enableBtn.disabled = true;
-    setStatus(
-      camOk && micOk
-        ? "Camera and microphone are ready. Click the Clips icon to record."
-        : "Saved. Click the Clips icon to record.",
-    );
+    showSuccess(camOk && micOk ? "You're all done" : "Saved");
   } else {
-    enableBtn.disabled = false;
-    enableBtn.textContent = "Try again";
+    showEnableButton("Try again", false);
     setStatus(
       "Access was blocked. Click the camera icon in Chrome's address bar to allow it, then try again.",
       true,
@@ -77,7 +94,7 @@ function finish(camOk: boolean, micOk: boolean): void {
 }
 
 async function enable(): Promise<void> {
-  enableBtn.disabled = true;
+  showEnableButton(enableBtn.textContent ?? "Enable camera & microphone", true);
   setStatus("Waiting for Chrome's permission prompt…");
   // Request separately so a camera denial doesn't also block the microphone.
   const micOk = await requestOne("mic");
@@ -96,10 +113,6 @@ void (async () => {
   markRow("mic", mic === "granted");
   markRow("cam", cam === "granted");
   if (cam === "granted" && mic === "granted") {
-    enableBtn.textContent = "Already enabled — you can close this tab";
-    enableBtn.disabled = true;
-    setStatus(
-      "Camera and microphone are ready. Click the Clips icon to record.",
-    );
+    showSuccess("You're all done");
   }
 })();

package/corpus/templates/content/.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/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"];