@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/plan/app/components/plan/PlanContentRenderer.tsx

@@ -2,7 +2,7 @@ import {
   BlockRegistryProvider,
   type BlockRenderContext,
 } from "@agent-native/core/blocks";
-import type { RichMarkdownCollabUser } from "@agent-native/core/client";
+import { useT, type RichMarkdownCollabUser } from "@agent-native/core/client";
 import type { PlanFileTreeBlock } from "@shared/plan-content";
 import type {
   PlanAnnotation,
@@ -187,6 +187,7 @@ export function PlanContentRenderer({
   recapScreenshotTheme = null,
   sourceUrl,
 }: PlanContentRendererProps) {
+  const t = useT();
   // Deep-link scroll on load/reload/back-forward (TOC clicks aside).
   usePlanHashScroll(content.blocks);
   const planLabel = isRecap
@@ -681,7 +682,9 @@ export function PlanContentRenderer({
         {autosaveFailed && (
           <div className="pointer-events-none absolute bottom-4 left-1/2 z-50 -translate-x-1/2">
             <div className="pointer-events-auto flex items-center gap-2 rounded-full border border-border/80 bg-background/95 px-3 py-1.5 text-sm shadow-lg backdrop-blur-sm">
-              <span className="text-muted-foreground">Couldn't save</span>
+              <span className="text-muted-foreground">
+                {t("raw.content.saveFailed")}
+              </span>
               <Button
                 type="button"
                 variant="link"
@@ -739,7 +742,7 @@ export function PlanContentRenderer({
                     value={content.title || fallbackTitle}
                     editable={metadataEditable}
                     className="max-w-3xl text-[1.8rem] font-bold leading-[1.15] tracking-[-0.02em] sm:text-[2.25rem]"
-                    placeholder="Untitled plan"
+                    placeholder={t("raw.content.untitledPlan")}
                     onCommit={(title) => onMetadataChange?.({ title })}
                   />
                   {metadataEditable ? (
@@ -748,7 +751,7 @@ export function PlanContentRenderer({
                       value={content.brief || fallbackBrief}
                       editable
                       className="mt-4 max-w-2xl plan-doc-body text-plan-muted"
-                      placeholder="Add a short plan summary"
+                      placeholder={t("raw.content.addSummary")}
                       onCommit={(brief) => onMetadataChange?.({ brief })}
                     />
                   ) : (
@@ -1183,6 +1186,7 @@ function RecapStatStrip({
   fileTreeBlock: PlanFileTreeBlock | undefined;
   className?: string;
 }) {
+  const t = useT();
   const stats = computeRecapStats(fileTreeBlock);
   if (!stats) return null;
   const { files, added, removed } = stats;
@@ -1193,7 +1197,7 @@ function RecapStatStrip({
   return (
     <p
       className={cn("text-xs tabular-nums text-plan-muted/80", className)}
-      aria-label="Change statistics"
+      aria-label={t("raw.content.changeStatistics")}
     >
       {parts.join(" · ")}
     </p>

package/corpus/templates/plan/app/components/plan/PlanImageNode.tsx

@@ -1,4 +1,8 @@
-import { SharedImage, uploadEditorImage } from "@agent-native/core/client";
+import {
+  SharedImage,
+  uploadEditorImage,
+  useT,
+} from "@agent-native/core/client";
 import {
   NodeViewWrapper,
   ReactNodeViewRenderer,
@@ -26,6 +30,7 @@ function PlanImageNodeView({
   updateAttributes,
   selected,
 }: NodeViewProps) {
+  const t = useT();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const src = (node.attrs.src as string) || "";
   const alt = (node.attrs.alt as string) || "";
@@ -37,14 +42,14 @@ function PlanImageNodeView({
     event.currentTarget.value = "";
     if (!file) return;
 
-    const toastId = toast.loading("Replacing image…");
+    const toastId = toast.loading(t("raw.document.replacingImage"));
     try {
       const { src: nextSrc, alt: nextAlt } = await uploadEditorImage(file);
       updateAttributes({ src: nextSrc, alt: nextAlt ?? alt });
-      toast.success("Image replaced.", { id: toastId });
+      toast.success(t("raw.document.imageReplaced"), { id: toastId });
     } catch (error) {
       console.error("Image replace failed:", error);
-      toast.error("Could not replace the image.", { id: toastId });
+      toast.error(t("raw.document.replaceImageFailed"), { id: toastId });
     }
   }
 

package/corpus/templates/plan/app/components/plan/PlanImageViewer.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   IconCopy,
@@ -24,7 +25,11 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 
-import { copyImage, downloadImage } from "./image-actions";
+import {
+  copyImage,
+  downloadImage,
+  type ImageActionMessages,
+} from "./image-actions";
 
 /**
  * Shared image presentation for every plan surface — the editor's image node
@@ -79,6 +84,14 @@ export function PlanImageViewer({
   showControls = false,
   uploading = false,
 }: PlanImageViewerProps) {
+  const t = useT();
+  const imageActionMessages = {
+    downloadStarted: t("raw.imageActions.downloadStarted"),
+    openedNewTab: t("raw.imageActions.openedNewTab"),
+    imageCopied: t("raw.imageActions.imageCopied"),
+    copiedUrl: t("raw.imageActions.copiedUrl"),
+    copyFailed: t("raw.imageActions.copyFailed"),
+  };
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -92,7 +105,11 @@ export function PlanImageViewer({
         )}
       >
         <IconPhoto className="size-5" />
-        <span>{uploading ? "Uploading image…" : alt || "Image"}</span>
+        <span>
+          {uploading
+            ? t("raw.imageViewer.uploadingImage")
+            : alt || t("raw.imageViewer.image")}
+        </span>
       </span>
     );
   }
@@ -129,8 +146,8 @@ export function PlanImageViewer({
         <button
           type="button"
           className={ACTION_BTN_CLASS}
-          aria-label="View full size"
-          title="View full size"
+          aria-label={t("raw.imageViewer.viewFullSize")}
+          title={t("raw.imageViewer.viewFullSize")}
           onMouseDown={swallowMouseDown}
           onClick={() => setLightboxOpen(true)}
         >
@@ -142,8 +159,8 @@ export function PlanImageViewer({
             <button
               type="button"
               className={ACTION_BTN_CLASS}
-              aria-label="Image options"
-              title="More"
+              aria-label={t("raw.imageViewer.imageOptions")}
+              title={t("raw.imageViewer.more")}
             >
               <IconDots size={16} />
             </button>
@@ -161,31 +178,35 @@ export function PlanImageViewer({
                 {onEdit ? (
                   <DropdownMenuItem onSelect={() => onEdit()}>
                     <IconPencil size={16} className="mr-2" />
-                    Edit details
+                    {t("raw.imageViewer.editDetails")}
                   </DropdownMenuItem>
                 ) : null}
                 {onReplace ? (
                   <DropdownMenuItem onSelect={() => onReplace()}>
                     <IconRefresh size={16} className="mr-2" />
-                    Replace image
+                    {t("raw.imageViewer.replaceImage")}
                   </DropdownMenuItem>
                 ) : null}
                 <DropdownMenuSeparator />
               </>
             ) : null}
-            <DropdownMenuItem onSelect={() => void downloadImage(src, alt)}>
+            <DropdownMenuItem
+              onSelect={() => void downloadImage(src, alt, imageActionMessages)}
+            >
               <IconDownload size={16} className="mr-2" />
-              Download
+              {t("raw.imageViewer.download")}
             </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => void copyImage(src)}>
+            <DropdownMenuItem
+              onSelect={() => void copyImage(src, imageActionMessages)}
+            >
               <IconCopy size={16} className="mr-2" />
-              Copy image
+              {t("raw.imageViewer.copyImage")}
             </DropdownMenuItem>
             <DropdownMenuItem
               onSelect={() => window.open(src, "_blank", "noopener,noreferrer")}
             >
               <IconExternalLink size={16} className="mr-2" />
-              Open original
+              {t("raw.imageViewer.openOriginal")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -196,6 +217,7 @@ export function PlanImageViewer({
         onOpenChange={setLightboxOpen}
         src={src}
         alt={alt}
+        actionMessages={imageActionMessages}
       />
     </span>
   );
@@ -206,6 +228,7 @@ type PlanImageLightboxProps = {
   onOpenChange: (open: boolean) => void;
   src: string;
   alt: string;
+  actionMessages?: ImageActionMessages;
 };
 
 function PlanImageLightbox({
@@ -213,7 +236,9 @@ function PlanImageLightbox({
   onOpenChange,
   src,
   alt,
+  actionMessages,
 }: PlanImageLightboxProps) {
+  const t = useT();
   const [zoomed, setZoomed] = useState(false);
 
   function handleOpenChange(next: boolean) {
@@ -231,7 +256,7 @@ function PlanImageLightbox({
           onOpenAutoFocus={(event) => event.preventDefault()}
         >
           <DialogTitle className="sr-only">
-            {alt || "Image preview"}
+            {alt || t("raw.imageViewer.closePreview")}
           </DialogTitle>
 
           <div
@@ -258,19 +283,21 @@ function PlanImageLightbox({
             <button
               type="button"
               className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 disabled:cursor-default disabled:opacity-40"
-              aria-label="Fit to screen"
+              aria-label={t("raw.imageViewer.fitToScreen")}
               disabled={!zoomed}
               onClick={() => setZoomed(false)}
             >
               <IconMinus size={17} />
             </button>
             <span className="min-w-[5.5rem] text-center text-xs font-medium tabular-nums">
-              {zoomed ? "Actual size" : "Fit"}
+              {zoomed
+                ? t("raw.imageViewer.actualSize")
+                : t("raw.imageViewer.fitToScreen")}
             </span>
             <button
               type="button"
               className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 disabled:cursor-default disabled:opacity-40"
-              aria-label="Actual size"
+              aria-label={t("raw.imageViewer.actualSize")}
               disabled={zoomed}
               onClick={() => setZoomed(true)}
             >
@@ -280,8 +307,8 @@ function PlanImageLightbox({
             <button
               type="button"
               className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15"
-              aria-label="Download image"
-              onClick={() => void downloadImage(src, alt)}
+              aria-label={t("raw.imageViewer.downloadImage")}
+              onClick={() => void downloadImage(src, alt, actionMessages)}
             >
               <IconDownload size={17} />
             </button>
@@ -289,7 +316,7 @@ function PlanImageLightbox({
             <button
               type="button"
               className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15"
-              aria-label="Close image preview"
+              aria-label={t("raw.imageViewer.closePreview")}
               onClick={() => handleOpenChange(false)}
             >
               <IconX size={17} />

package/corpus/templates/plan/app/components/plan/PlanMarkdownReader.tsx

@@ -1,4 +1,5 @@
 import { CodeSurface } from "@agent-native/core/blocks";
+import { useT } from "@agent-native/core/client";
 import { IconLink } from "@tabler/icons-react";
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
 import { isValidElement, useCallback, useRef } from "react";
@@ -78,6 +79,7 @@ export function PlanMarkdownReader({
   // Reset the counter each render (new markdown / blockId) so ids are stable.
   headingIndexRef.current = 0;
   const textDirection = detectPlanTextDirection(markdown);
+  const t = useT();
 
   const makeHeading = useCallback(
     (Tag: ElementType, { children }: { children?: ReactNode }) => {
@@ -92,7 +94,7 @@ export function PlanMarkdownReader({
           {children}
           <a
             href={`#${id}`}
-            aria-label="Copy link to this section"
+            aria-label={t("raw.markdown.copySectionLink")}
             className="plan-heading-anchor ml-2 inline-flex size-4 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity group-hover/heading:opacity-60 hover:!opacity-100"
             onClick={(event) => {
               event.preventDefault();
@@ -113,7 +115,7 @@ export function PlanMarkdownReader({
         </Tag>
       );
     },
-    [blockId],
+    [blockId, t],
   );
 
   return (

package/corpus/templates/plan/app/components/plan/PlanTableOfContents.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { PlanContent } from "@shared/plan-content";
 import { IconChevronRight } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
@@ -44,6 +45,7 @@ export function PlanTableOfContents({
    * its heading) so a link never resolves to a hidden element. */
   omitBlockIds?: string[];
 }) {
+  const t = useT();
   const navRef = useRef<HTMLElement>(null);
   const elementsRef = useRef<Map<string, HTMLElement>>(new Map());
   const [activeId, setActiveId] = useState("");
@@ -211,7 +213,10 @@ export function PlanTableOfContents({
   return (
     <>
       {/* Wide layout: the contents live in the right-hand side rail. */}
-      <aside className="plan-document-toc" aria-label="Plan sections">
+      <aside
+        className="plan-document-toc"
+        aria-label={t("raw.toc.planSections")}
+      >
         <nav ref={navRef} className="plan-document-toc__nav">
           <p className="plan-document-toc__heading">{heading}</p>
           <ol className="plan-document-toc__list">{items.map(renderLink)}</ol>

package/corpus/templates/plan/app/components/plan/PlanVisualSurface.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { PlanBlock, PlanContent } from "@shared/plan-content";
 import type { PlanAnnotation } from "@shared/plan-content";
 import {
@@ -58,6 +59,7 @@ export function PlanVisualSurface({
   onVisualModeChange,
   onDesignElementStyleChange,
 }: PlanVisualSurfaceProps) {
+  const t = useT();
   const designCanvas = isDesignCanvas(canvas);
   const [selectedDesignElement, setSelectedDesignElement] =
     useState<DesignElementSelection | null>(null);
@@ -130,7 +132,7 @@ export function PlanVisualSurface({
         <div
           className="absolute left-4 top-4 z-40"
           data-plan-interactive
-          aria-label="Visual review mode"
+          aria-label={t("raw.visual.visualReviewMode")}
         >
           <TabsList className="h-9 rounded-lg border border-plan-line bg-plan-chrome/90 p-1 shadow-xl backdrop-blur">
             <TabsTrigger
@@ -138,7 +140,7 @@ export function PlanVisualSurface({
               className="h-7 gap-1.5 px-2.5 text-xs"
             >
               <IconClick className="size-3.5" aria-hidden="true" />
-              Prototype
+              {t("raw.visual.prototype")}
             </TabsTrigger>
             <TabsTrigger
               value="wireframes"
@@ -149,7 +151,9 @@ export function PlanVisualSurface({
               ) : (
                 <IconLayoutBoard className="size-3.5" aria-hidden="true" />
               )}
-              {designCanvas ? "Design" : "Wireframes"}
+              {designCanvas
+                ? t("raw.visual.design")
+                : t("raw.visual.wireframes")}
             </TabsTrigger>
           </TabsList>
         </div>
@@ -241,6 +245,7 @@ function DesignStyleInspector({
     styles: Record<string, string | null>,
   ) => Promise<void> | void;
 }) {
+  const t = useT();
   if (!selection) return null;
   const canEdit = Boolean(onStyleChange);
   const apply = (property: string, value: string) => {
@@ -256,7 +261,7 @@ function DesignStyleInspector({
       <div className="mb-3 flex items-start gap-2">
         <div className="min-w-0 flex-1">
           <p className="truncate text-xs font-semibold uppercase tracking-[0.12em] text-plan-muted">
-            Design element
+            {t("raw.visual.designElement")}
           </p>
           <p className="mt-0.5 truncate text-sm font-semibold text-plan-text">
             {selection.elementId}
@@ -272,7 +277,7 @@ function DesignStyleInspector({
           size="icon"
           className="size-7"
           onClick={onClear}
-          aria-label="Clear design selection"
+          aria-label={t("raw.visual.clearDesignSelection")}
         >
           <IconX className="size-4" />
         </Button>

package/corpus/templates/plan/app/components/plan/PrototypeViewer.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { PlanPrototype } from "@shared/plan-content";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -18,6 +19,7 @@ export function PrototypeViewer({
   standalone = false,
   className,
 }: PrototypeViewerProps) {
+  const t = useT();
   const screenById = useMemo(
     () => new Map(prototype.screens.map((screen) => [screen.id, screen])),
     [prototype.screens],
@@ -60,7 +62,7 @@ export function PrototypeViewer({
         className,
       )}
       data-plan-prototype-viewer
-      aria-label="Prototype viewer"
+      aria-label={t("raw.visual.prototype")}
     >
       <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(var(--plan-grid-line)_1px,transparent_1px),linear-gradient(90deg,var(--plan-grid-line)_1px,transparent_1px)] bg-[length:28px_28px]" />
 

package/corpus/templates/plan/app/components/plan/image-actions.ts

@@ -25,7 +25,11 @@ export function imageDownloadName(src: string, alt: string): string {
 }
 
 /** Download the image to disk, falling back to opening it in a new tab. */
-export async function downloadImage(src: string, alt: string): Promise<void> {
+export async function downloadImage(
+  src: string,
+  alt: string,
+  messages: ImageActionMessages = defaultImageActionMessages,
+): Promise<void> {
   const filename = imageDownloadName(src, alt);
 
   try {
@@ -40,7 +44,7 @@ export async function downloadImage(src: string, alt: string): Promise<void> {
     anchor.click();
     anchor.remove();
     URL.revokeObjectURL(url);
-    toast.success("Image download started.");
+    toast.success(messages.downloadStarted);
   } catch {
     const anchor = document.createElement("a");
     anchor.href = src;
@@ -50,7 +54,7 @@ export async function downloadImage(src: string, alt: string): Promise<void> {
     document.body.append(anchor);
     anchor.click();
     anchor.remove();
-    toast.info("Opened image in a new tab.");
+    toast.info(messages.openedNewTab);
   }
 }
 
@@ -76,7 +80,10 @@ async function blobToPng(blob: Blob): Promise<Blob> {
 }
 
 /** Copy the rendered image to the clipboard, falling back to copying its URL. */
-export async function copyImage(src: string): Promise<void> {
+export async function copyImage(
+  src: string,
+  messages: ImageActionMessages = defaultImageActionMessages,
+): Promise<void> {
   try {
     if (!navigator.clipboard || typeof ClipboardItem === "undefined") {
       throw new Error("Image clipboard unavailable");
@@ -98,13 +105,28 @@ export async function copyImage(src: string): Promise<void> {
     await navigator.clipboard.write([
       new ClipboardItem({ [imageType]: imageBlob }),
     ]);
-    toast.success("Image copied.");
+    toast.success(messages.imageCopied);
   } catch {
     try {
       await navigator.clipboard.writeText(src);
-      toast.info("Copied image URL.");
+      toast.info(messages.copiedUrl);
     } catch {
-      toast.error("Could not copy image.");
+      toast.error(messages.copyFailed);
     }
   }
 }
+export type ImageActionMessages = {
+  downloadStarted: string;
+  openedNewTab: string;
+  imageCopied: string;
+  copiedUrl: string;
+  copyFailed: string;
+};
+
+const defaultImageActionMessages: ImageActionMessages = {
+  downloadStarted: "Image download started.",
+  openedNewTab: "Opened image in a new tab.",
+  imageCopied: "Image copied.",
+  copiedUrl: "Copied image URL.",
+  copyFailed: "Could not copy image.",
+};

package/corpus/templates/plan/app/components/plan/planBlocks.tsx

@@ -14,6 +14,7 @@ import {
 } from "@agent-native/core/blocks";
 import {
   sendToAgentChat,
+  useT,
   type RichMarkdownCollabUser,
 } from "@agent-native/core/client";
 import type { PlanBlock } from "@shared/plan-content";
@@ -78,13 +79,13 @@ const PLAN_LIBRARY_OVERRIDES: LibraryBlockOverrides = {
       spec: JSON.stringify(
         {
           openapi: "3.0.0",
-          info: { title: "Example API", version: "1.0.0" },
-          tags: [{ name: "widgets", description: "Manage widgets" }],
+          info: { title: "Example API", version: "1.0.0" }, // i18n-ignore example OpenAPI fixture data
+          tags: [{ name: "widgets", description: "Manage widgets" }], // i18n-ignore example OpenAPI fixture data
           paths: {
             "/widgets": {
               get: {
                 tags: ["widgets"],
-                summary: "List widgets",
+                summary: "List widgets", // i18n-ignore example OpenAPI fixture data
                 responses: {
                   "200": {
                     description: "OK",
@@ -101,7 +102,7 @@ const PLAN_LIBRARY_OVERRIDES: LibraryBlockOverrides = {
               },
               post: {
                 tags: ["widgets"],
-                summary: "Create a widget",
+                summary: "Create a widget", // i18n-ignore example OpenAPI fixture data
                 requestBody: {
                   content: {
                     "application/json": {
@@ -309,6 +310,7 @@ export function PlanAiBlockAction({
   blockData: unknown;
   planId?: string | null;
 }) {
+  const t = useT();
   const submitPrompt = (prompt: string) => {
     const trimmed = prompt.trim();
     if (!trimmed) return;
@@ -337,8 +339,10 @@ export function PlanAiBlockAction({
 
   return (
     <InlinePromptField
-      placeholder="Describe a change…"
-      ariaLabel={`Describe a change to ${label.toLowerCase()}`}
+      placeholder={t("raw.blocks.describeChange")}
+      ariaLabel={t("raw.blocks.describeChangeTo", {
+        label: label.toLowerCase(),
+      })}
       onSubmit={submitPrompt}
     />
   );
@@ -355,6 +359,7 @@ function PlanAiFieldAction({
   instructions,
   companionFields = [],
 }: BlockAiFieldActionProps) {
+  const t = useT();
   const submitPrompt = (prompt: string) => {
     const trimmed = prompt.trim();
     if (!trimmed) return;
@@ -394,8 +399,10 @@ function PlanAiFieldAction({
     <InlinePromptField
       size="sm"
       subtle
-      placeholder="Describe a change…"
-      ariaLabel={`Describe a change to the ${fieldLabel.toLowerCase()}`}
+      placeholder={t("raw.blocks.describeChange")}
+      ariaLabel={t("raw.blocks.describeChangeTo", {
+        label: fieldLabel.toLowerCase(),
+      })}
       onSubmit={submitPrompt}
       disabled={disabled}
       fieldActionLabel={fieldLabel}
@@ -463,6 +470,7 @@ function InlinePromptField({
         disabled={disabled}
         aria-label={ariaLabel}
         data-ai-field-action={fieldActionLabel}
+        data-plan-block-edit-prompt
         placeholder={placeholder}
         spellCheck={false}
         onChange={(event) => setValue(event.target.value)}