@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/src/client/components/CodeRequiredDialog.tsx

@@ -9,11 +9,10 @@ import {
 } from "@tabler/icons-react";
 import { agentNativePath } from "../api-path.js";
 import { trackEvent } from "../analytics.js";
+import { useT } from "../i18n.js";
 import { withBuilderConnectTrackingParams } from "../settings/useBuilderStatus.js";
 
 const DESKTOP_DOWNLOAD_URL = "https://www.agent-native.com/download";
-const CODE_CHANGE_FALLBACK_DETAIL =
-  "Edit locally or use Builder.io to edit this code in the cloud and continue customizing the app any way you like.";
 
 export interface CodeRequiredDialogProps {
   open: boolean;
@@ -54,6 +53,7 @@ export function CodeRequiredDialog({
   onClose,
   featureLabel,
 }: CodeRequiredDialogProps) {
+  const t = useT();
   const {
     connected: builderConnected,
     cloudAgentsAvailable,
@@ -106,8 +106,7 @@ export function CodeRequiredDialog({
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
-            userMessage:
-              featureLabel || "Make the requested code changes to this app",
+            userMessage: featureLabel || t("codeRequired.defaultFeature"),
           }),
         },
       );
@@ -118,7 +117,7 @@ export function CodeRequiredDialog({
       const data = await res.json();
       setBranchUrl(data.url || null);
     } catch (err: any) {
-      setError(err?.message || "Failed to create branch");
+      setError(err?.message || t("codeRequired.branchError"));
     } finally {
       setSubmitting(false);
     }
@@ -140,11 +139,13 @@ export function CodeRequiredDialog({
             <IconPackageExport size={20} />
           </div>
           <div>
-            <h2 style={s.title}>Code changes required</h2>
+            <h2 style={s.title}>{t("codeRequired.title")}</h2>
             <p style={s.subtitle}>
               {featureLabel
-                ? `"${featureLabel}" creates or modifies source code, which needs Desktop or Builder from this surface.`
-                : "This action creates or modifies source code, which needs Desktop or Builder from this surface."}
+                ? t("codeRequired.subtitleWithFeature", {
+                    feature: featureLabel,
+                  })
+                : t("codeRequired.subtitle")}
             </p>
           </div>
         </div>
@@ -167,10 +168,11 @@ export function CodeRequiredDialog({
               <IconCode size={24} />
             </div>
             <div style={s.optionText}>
-              <span style={s.optionTitle}>Use Agent Native Desktop</span>
+              <span style={s.optionTitle}>
+                {t("codeRequired.desktopTitle")}
+              </span>
               <span style={s.optionDesc}>
-                Open the project in the desktop app to enable source edits and
-                CLI access.
+                {t("codeRequired.desktopDescription")}
               </span>
             </div>
           </a>
@@ -202,10 +204,11 @@ export function CodeRequiredDialog({
                 )}
               </div>
               <div style={s.optionText}>
-                <span style={s.optionTitle}>Use Builder.io Agent</span>
+                <span style={s.optionTitle}>
+                  {t("codeRequired.builderAgentTitle")}
+                </span>
                 <span style={s.optionDesc}>
-                  Let our cloud agent make the changes for you. You'll get a
-                  link to preview and deploy.
+                  {t("codeRequired.builderAgentDescription")}
                 </span>
               </div>
             </button>
@@ -221,10 +224,14 @@ export function CodeRequiredDialog({
                 <IconExternalLink size={24} />
               </div>
               <div style={s.optionText}>
-                <span style={s.optionTitle}>This requires a code change</span>
-                <span style={s.optionDesc}>{CODE_CHANGE_FALLBACK_DETAIL}</span>
+                <span style={s.optionTitle}>
+                  {t("codeRequired.codeChangeTitle")}
+                </span>
+                <span style={s.optionDesc}>
+                  {t("codeRequired.fallbackDetail")}
+                </span>
               </div>
-              <span style={s.badge}>Code change</span>
+              <span style={s.badge}>{t("codeRequired.codeChangeBadge")}</span>
             </div>
           ) : (
             <a
@@ -254,13 +261,16 @@ export function CodeRequiredDialog({
                 <IconExternalLink size={24} />
               </div>
               <div style={s.optionText}>
-                <span style={s.optionTitle}>Connect Builder.io</span>
+                <span style={s.optionTitle}>
+                  {t("codeRequired.connectBuilderTitle")}
+                </span>
                 <span style={s.optionDesc}>
-                  Connect Builder to enable cloud-based code changes from this
-                  app.
+                  {t("codeRequired.connectBuilderDescription")}
                 </span>
               </div>
-              {!connectUrl && <span style={s.badge}>Setup required</span>}
+              {!connectUrl && (
+                <span style={s.badge}>{t("codeRequired.setupRequired")}</span>
+              )}
             </a>
           )}
         </div>
@@ -269,7 +279,7 @@ export function CodeRequiredDialog({
         {branchUrl && (
           <div style={s.result}>
             <span style={{ fontSize: 13, fontWeight: 600 }}>
-              Branch created
+              {t("codeRequired.branchCreated")}
             </span>
             <a
               href={branchUrl}
@@ -289,7 +299,11 @@ export function CodeRequiredDialog({
         )}
 
         {/* Close */}
-        <button style={s.closeButton} onClick={onClose} aria-label="Close">
+        <button
+          style={s.closeButton}
+          onClick={onClose}
+          aria-label={t("codeRequired.close")}
+        >
           <IconX size={16} />
         </button>
       </div>

package/corpus/core/src/client/extensions/EmbeddedExtension.tsx

@@ -26,6 +26,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
+import { useT } from "../i18n.js";
 import {
   deleteOrHideExtension,
   invalidateExtensionRemoval,
@@ -329,6 +330,7 @@ function EmbeddedToolMenu({
   toolName: string;
   canDelete?: boolean;
 }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
   const queryClient = useQueryClient();
@@ -381,13 +383,15 @@ function EmbeddedToolMenu({
               <button
                 type="button"
                 className="absolute top-1 right-1 flex h-6 w-6 items-center justify-center rounded-md bg-background/60 text-muted-foreground/60 opacity-0 hover:bg-accent hover:text-foreground hover:opacity-100 group-hover/embedded-extension:opacity-100 cursor-pointer transition-opacity"
-                aria-label={`${toolName} options`}
+                aria-label={t("extensions.optionsFor", { name: toolName })}
               >
                 <IconDots className="h-3.5 w-3.5" />
               </button>
             </PopoverTrigger>
           </TooltipTrigger>
-          <TooltipContent>{`${toolName} options`}</TooltipContent>
+          <TooltipContent>
+            {t("extensions.optionsFor", { name: toolName })}
+          </TooltipContent>
         </Tooltip>
       </TooltipProvider>
       <PopoverContent align="end" sideOffset={4} className="w-56 p-1">
@@ -402,7 +406,7 @@ function EmbeddedToolMenu({
               className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left"
             >
               <IconExternalLink className="h-3.5 w-3.5" />
-              <span>Open full view</span>
+              <span>{t("extensions.openFullView")}</span>
             </button>
             <button
               type="button"
@@ -410,7 +414,7 @@ function EmbeddedToolMenu({
               className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] hover:bg-accent cursor-pointer text-left"
             >
               <IconLayoutSidebarRightCollapse className="h-3.5 w-3.5" />
-              <span>Remove from this widget area</span>
+              <span>{t("extensions.removeFromWidgetArea")}</span>
             </button>
             {canDelete !== false && (
               <>
@@ -421,7 +425,7 @@ function EmbeddedToolMenu({
                   className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] text-destructive hover:bg-destructive/10 cursor-pointer text-left"
                 >
                   <IconTrash className="h-3.5 w-3.5" />
-                  <span>Delete extension...</span>
+                  <span>{t("extensions.deleteExtensionEllipsis")}</span>
                 </button>
               </>
             )}
@@ -429,8 +433,8 @@ function EmbeddedToolMenu({
         ) : (
           <div className="flex flex-col gap-2 p-2">
             <p className="text-[12px]">
-              Delete <span className="font-medium">{toolName}</span>? This
-              removes the extension everywhere, for everyone it's shared with.
+              {t("extensions.deleteQuestion", { name: toolName })}{" "}
+              {t("extensions.deleteEverywhereConfirmation")}
             </p>
             <div className="flex justify-end gap-1">
               <button
@@ -438,14 +442,14 @@ function EmbeddedToolMenu({
                 onClick={() => setConfirmingDelete(false)}
                 className="rounded-md px-2 py-1 text-[12px] hover:bg-accent cursor-pointer"
               >
-                Cancel
+                {t("extensions.cancel")}
               </button>
               <button
                 type="button"
                 onClick={deleteExtension}
                 className="rounded-md bg-destructive px-2 py-1 text-[12px] text-destructive-foreground hover:bg-destructive/90 cursor-pointer"
               >
-                Delete
+                {t("extensions.delete")}
               </button>
             </div>
           </div>

package/corpus/core/src/client/extensions/ExtensionEditor.tsx

@@ -21,6 +21,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
+import { useT } from "../i18n.js";
 import {
   deleteOrHideExtension,
   invalidateExtensionRemoval,
@@ -46,6 +47,7 @@ export interface ExtensionEditorProps {
 }
 
 export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
+  const t = useT();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const isEdit = !!extensionId;
@@ -184,12 +186,14 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                   : "/extensions"
               }
               className="inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-              aria-label="Back"
+              aria-label={t("extensions.back")}
             >
               <IconArrowLeft className="h-4 w-4" />
             </Link>
             <h1 className="text-sm font-semibold">
-              {isEdit ? "Edit Extension" : "New Extension"}
+              {isEdit
+                ? t("extensions.editExtension")
+                : t("extensions.newExtension")}
             </h1>
           </div>
           <div className="flex items-center gap-2">
@@ -203,7 +207,11 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
               )}
             >
               <IconDeviceFloppy className="h-3.5 w-3.5" />
-              {saving ? "Saving..." : isEdit ? "Save" : "Create"}
+              {saving
+                ? t("extensions.saving")
+                : isEdit
+                  ? t("extensions.save")
+                  : t("extensions.create")}
             </button>
             {isEdit && (
               <Popover
@@ -219,29 +227,30 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                       <button
                         type="button"
                         className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                        aria-label="More options"
+                        aria-label={t("extensions.moreOptions")}
                       >
                         <IconDots className="h-4 w-4" />
                       </button>
                     </PopoverTrigger>
                   </TooltipTrigger>
-                  <TooltipContent>More options</TooltipContent>
+                  <TooltipContent>{t("extensions.moreOptions")}</TooltipContent>
                 </Tooltip>
                 <PopoverContent align="end" sideOffset={4} className="w-72 p-0">
                   {!confirmingDelete ? (
                     <>
                       <div className="px-3 py-2 border-b border-border/40">
-                        <p className="text-[12px] font-medium">Appears in</p>
+                        <p className="text-[12px] font-medium">
+                          {t("extensions.appearsIn")}
+                        </p>
                         {slots.length === 0 ? (
                           <p className="text-[11px] text-muted-foreground/70 mt-0.5">
-                            Not installed in any widget areas. Ask the agent to
-                            add it somewhere.
+                            {t("extensions.noWidgetAreas")}
                           </p>
                         ) : (
                           <p className="text-[11px] text-muted-foreground/70 mt-0.5">
-                            This extension can render in {slots.length} widget
-                            area
-                            {slots.length === 1 ? "" : "s"}.
+                            {t("extensions.widgetAreaCount", {
+                              count: slots.length,
+                            })}
                           </p>
                         )}
                       </div>
@@ -263,13 +272,15 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                                       handleRemoveFromSlot(s.slotId)
                                     }
                                     className="rounded p-1 text-muted-foreground/60 hover:bg-accent hover:text-foreground cursor-pointer"
-                                    aria-label="Remove from this widget area"
+                                    aria-label={t(
+                                      "extensions.removeFromWidgetArea",
+                                    )}
                                   >
                                     <IconX className="h-3.5 w-3.5" />
                                   </button>
                                 </TooltipTrigger>
                                 <TooltipContent>
-                                  Remove from this widget area (for me)
+                                  {t("extensions.removeFromWidgetAreaForMe")}
                                 </TooltipContent>
                               </Tooltip>
                             </div>
@@ -285,8 +296,8 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                           <IconTrash className="h-3.5 w-3.5" />
                           <span>
                             {existingTool?.canDelete === false
-                              ? "Remove from my list..."
-                              : "Delete extension..."}
+                              ? t("extensions.removeFromMyListEllipsis")
+                              : t("extensions.deleteExtensionEllipsis")}
                           </span>
                         </button>
                       </div>
@@ -295,12 +306,11 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                     <div className="flex flex-col gap-2 p-3">
                       <p className="text-[12px]">
                         {existingTool?.canDelete === false
-                          ? "Remove "
-                          : "Delete "}
-                        <span className="font-medium">{name}</span>?
+                          ? t("extensions.removeQuestion", { name })
+                          : t("extensions.deleteQuestion", { name })}{" "}
                         {existingTool?.canDelete === false
-                          ? " This hides it from your Extensions list without deleting it for anyone else."
-                          : " This removes the extension everywhere, for everyone it's shared with."}
+                          ? t("extensions.hideForYouDescription")
+                          : t("extensions.deleteEverywhereConfirmation")}
                       </p>
                       <div className="flex justify-end gap-1">
                         <button
@@ -308,7 +318,7 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                           onClick={() => setConfirmingDelete(false)}
                           className="rounded-md px-2 py-1 text-[12px] hover:bg-accent cursor-pointer"
                         >
-                          Cancel
+                          {t("extensions.cancel")}
                         </button>
                         <button
                           type="button"
@@ -321,11 +331,11 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                         >
                           {deleting
                             ? existingTool?.canDelete === false
-                              ? "Removing..."
-                              : "Deleting..."
+                              ? t("extensions.removing")
+                              : t("extensions.deleting")
                             : existingTool?.canDelete === false
-                              ? "Remove"
-                              : "Delete"}
+                              ? t("extensions.remove")
+                              : t("extensions.delete")}
                         </button>
                       </div>
                     </div>
@@ -340,25 +350,25 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
           <div className="flex w-1/2 flex-col gap-4 overflow-auto border-r p-4">
             <div>
               <label className="mb-1.5 block text-sm font-medium text-foreground">
-                Name
+                {t("extensions.nameLabel")}
               </label>
               <input
                 type="text"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                placeholder="My Extension"
+                placeholder={t("extensions.namePlaceholder")}
                 className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
               />
             </div>
 
             <div>
               <label className="mb-1.5 block text-sm font-medium text-foreground">
-                Description
+                {t("extensions.descriptionLabel")}
               </label>
               <textarea
                 value={description}
                 onChange={(e) => setDescription(e.target.value)}
-                placeholder="What does this extension do?"
+                placeholder={t("extensions.descriptionPlaceholder")}
                 rows={2}
                 className="w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
               />
@@ -366,12 +376,12 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
 
             <div className="flex flex-1 flex-col">
               <label className="mb-1.5 block text-sm font-medium text-foreground">
-                Content
+                {t("extensions.contentLabel")}
               </label>
               <textarea
                 value={content}
                 onChange={(e) => setContent(e.target.value)}
-                placeholder="<html>...</html>"
+                placeholder={t("extensions.contentPlaceholder")}
                 className="flex-1 resize-none rounded-md border border-input bg-background p-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                 spellCheck={false}
               />
@@ -384,11 +394,11 @@ export function ExtensionEditor({ extensionId }: ExtensionEditorProps) {
                 srcDoc={content}
                 className="h-full w-full border-0"
                 sandbox="allow-scripts allow-forms"
-                title="Extension preview"
+                title={t("extensions.previewTitle")}
               />
             ) : (
               <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-                Preview will appear here
+                {t("extensions.previewEmpty")}
               </div>
             )}
           </div>

package/corpus/core/src/client/extensions/ExtensionSlot.tsx

@@ -15,6 +15,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
+import { useT } from "../i18n.js";
 
 interface SlotInstall {
   installId: string;
@@ -110,6 +111,7 @@ export function ExtensionSlot({
 }
 
 function SlotEmptyAffordance({ slotId }: { slotId: string }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const { data: available = [], isLoading } = useQuery<AvailableTool[]>({
     queryKey: ["slot-available", slotId],
@@ -167,12 +169,12 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
   const requestNew = () => {
     setOpen(false);
     sendToAgentChat({
-      message: `Create a new widget that fits in slot "${slotId}". I'll describe what it should do next.`,
+      message: t("extensions.createWidgetPrompt", { slotId }),
       submit: false,
       openSidebar: true,
     });
   };
-  const slotDescription = describeSlot(slotId);
+  const slotDescription = describeSlot(slotId, t);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -187,11 +189,11 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
                 <div className="h-5 w-5 rounded-md border border-dashed border-border/40 flex items-center justify-center shrink-0">
                   <IconPlus className="h-3 w-3" />
                 </div>
-                <span>Add widget</span>
+                <span>{t("extensions.addWidget")}</span>
               </button>
             </PopoverTrigger>
           </TooltipTrigger>
-          <TooltipContent>Add a widget</TooltipContent>
+          <TooltipContent>{t("extensions.addWidget")}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
       <PopoverContent
@@ -209,12 +211,12 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
         <div className="max-h-72 overflow-y-auto py-1">
           {isLoading && (
             <div className="px-3 py-3 text-[12px] text-muted-foreground/60">
-              Loading…
+              {t("extensions.loading")}
             </div>
           )}
           {!isLoading && available.length === 0 && (
             <div className="px-3 py-3 text-[12px] text-muted-foreground/60">
-              No widgets available for this slot yet.
+              {t("extensions.noWidgetsAvailable")}
             </div>
           )}
           {available.map((extension) => (
@@ -244,7 +246,7 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
             className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-[12px] text-muted-foreground hover:bg-accent hover:text-foreground cursor-pointer"
           >
             <IconPlus className="h-3.5 w-3.5" />
-            <span>Build a new widget</span>
+            <span>{t("extensions.buildNewWidget")}</span>
           </button>
         </div>
       </PopoverContent>
@@ -252,17 +254,19 @@ function SlotEmptyAffordance({ slotId }: { slotId: string }) {
   );
 }
 
-function describeSlot(slotId: string): { title: string; description: string } {
+function describeSlot(
+  slotId: string,
+  t: ReturnType<typeof useT>,
+): { title: string; description: string } {
   if (slotId === "mail.contact-sidebar.bottom") {
     return {
-      title: "Contact sidebar widget",
-      description:
-        "Appears beside the current conversation with contact and thread context.",
+      title: t("extensions.contactSidebarWidget"),
+      description: t("extensions.contactSidebarDescription"),
     };
   }
 
   return {
-    title: "Add widget here",
+    title: t("extensions.addWidgetHere"),
     description: slotId,
   };
 }