@agent-native/core 0.77.2 → 0.77.4

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -4,6 +4,7 @@ import {
   agentNativePath,
   sendToAgentChat,
   usePinchZoom,
+  useT,
   useAvatarUrl,
   type CollabUser,
 } from "@agent-native/core/client";
@@ -404,7 +405,7 @@ function rectsIntersect(
 ): boolean {
   return !(
     a.right < b.left ||
-    a.left > b.right ||
+    a.left > b.right || // i18n-ignore geometry comparison
     a.bottom < b.top ||
     a.top > b.bottom
   );
@@ -516,6 +517,7 @@ export default function SlideEditor({
   onInlineEditStart,
   presentUsers = [],
 }: SlideEditorProps) {
+  const t = useT();
   const content = typeof slide.content === "string" ? slide.content : "";
   const isHtmlSlide =
     content.includes('class="fmd-slide"') ||
@@ -1299,10 +1301,6 @@ export default function SlideEditor({
       // then run the existing single-select / style-editing flow.
       if (multiSelection.size > 0) clearMultiSelection();
 
-      // Read-only viewers can't replace images or restyle elements — don't
-      // open the image overlay or enter style-editing mode on a plain click.
-      if (readOnly) return;
-
       showImageOverlay(target);
 
       // Send style-editing postMessage with a unique selector for the clicked element
@@ -1320,20 +1318,18 @@ export default function SlideEditor({
       multiSelection,
       applyMultiSelection,
       clearMultiSelection,
-      readOnly,
     ],
   );
 
   const handleSlideContextMenu = useCallback(
     (e: React.MouseEvent) => {
-      if (readOnly) return;
       const target = e.target as HTMLElement;
       if (target.tagName === "IMG" || target.closest(".fmd-img-placeholder")) {
         e.preventDefault();
         showImageOverlay(target);
       }
     },
-    [showImageOverlay, readOnly],
+    [showImageOverlay],
   );
 
   // --- Pending visual updates ---
@@ -1414,12 +1410,12 @@ export default function SlideEditor({
                       className="h-6 w-6 cursor-pointer"
                       onClick={canvasZoomOut}
                       disabled={canvasZoom <= MIN_CANVAS_ZOOM}
-                      aria-label="Zoom out"
+                      aria-label={t("raw.zoomOut")}
                     >
                       <IconZoomOut className="h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>Zoom out</TooltipContent>
+                  <TooltipContent>{t("raw.zoomOut")}</TooltipContent>
                 </Tooltip>
                 <span className="w-11 text-center text-xs tabular-nums text-muted-foreground">
                   {canvasZoom}%
@@ -1435,12 +1431,12 @@ export default function SlideEditor({
                         canvasZoom >=
                         CANVAS_ZOOM_PRESETS[CANVAS_ZOOM_PRESETS.length - 1]
                       }
-                      aria-label="Zoom in"
+                      aria-label={t("raw.zoomIn")}
                     >
                       <IconZoomIn className="h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>Zoom in</TooltipContent>
+                  <TooltipContent>{t("raw.zoomIn")}</TooltipContent>
                 </Tooltip>
                 <div className="mx-0.5 h-4 w-px bg-border" />
                 <Tooltip>
@@ -1450,12 +1446,12 @@ export default function SlideEditor({
                       size="icon"
                       className="h-6 w-6 cursor-pointer"
                       onClick={fitCanvasToScreen}
-                      aria-label="Fit slide to screen"
+                      aria-label={t("raw.fitSlideToScreen")}
                     >
                       <IconMaximize className="h-3.5 w-3.5" />
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>Fit to screen</TooltipContent>
+                  <TooltipContent>{t("raw.fitToScreen")}</TooltipContent>
                 </Tooltip>
               </div>
               <div
@@ -1475,10 +1471,6 @@ export default function SlideEditor({
                     style={{ width: canvasWidth, maxWidth: canvasWidth }}
                   >
                     <div
-                      // `data-editable` gates all hover affordances (text
-                      // outline, image pointer/glow) in global.css. Read-only
-                      // viewers can't edit, so they shouldn't see editable cues.
-                      data-editable={readOnly ? undefined : "true"}
                       className="slide-image-clickable relative"
                       onClick={handleSlideClick}
                       onContextMenu={handleSlideContextMenu}
@@ -1486,29 +1478,22 @@ export default function SlideEditor({
                       onPointerDown={handleSlidePointerDown}
                       onDragOver={handleSlideDragOver}
                       onDrop={handleSlideDrop}
-                      onMouseEnter={
-                        readOnly ? undefined : () => setIsHoveringText(true)
-                      }
-                      onMouseLeave={
-                        readOnly ? undefined : () => setIsHoveringText(false)
-                      }
+                      onMouseEnter={() => setIsHoveringText(true)}
+                      onMouseLeave={() => setIsHoveringText(false)}
                     >
                       <SlideRenderer
                         slide={slide}
-                        className={`shadow-2xl shadow-black/40 ${isHoveringText && !readOnly ? "ring-2 ring-[#609FF8]/60" : ""}`}
+                        className={`shadow-2xl shadow-black/40 ${isHoveringText ? "ring-2 ring-[#609FF8]/60" : ""}`}
                         designSystem={designSystem}
                         aspectRatio={aspectRatio}
                         onOverflowChange={handleOverflowChange}
                       />
-                      {/* Double-click hint — only shown for editable HTML slides that support inline editing */}
-                      {isHoveringText &&
-                        !editingEl &&
-                        isHtmlSlide &&
-                        !readOnly && (
-                          <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-black/60 px-2 py-0.5 text-xs text-white/40 pointer-events-none select-none">
-                            Double-click any text to edit
-                          </div>
-                        )}
+                      {/* Double-click hint — only shown for HTML slides that support inline editing */}
+                      {isHoveringText && !editingEl && isHtmlSlide && (
+                        <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded bg-black/60 px-2 py-0.5 text-xs text-white/40 pointer-events-none select-none">
+                          {t("raw.doubleClickEdit")}
+                        </div>
+                      )}
                       {agentActive && (
                         <div className="absolute top-2 right-2 z-10 pointer-events-none">
                           <AgentPresenceChip active={agentActive} />

package/corpus/templates/slides/app/components/editor/SlideInlineEditor.tsx

@@ -1,4 +1,4 @@
-import { isReconcileLeadClient } from "@agent-native/core/client";
+import { isReconcileLeadClient, useT } from "@agent-native/core/client";
 import { Extension } from "@tiptap/core";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCaret from "@tiptap/extension-collaboration-caret";
@@ -193,6 +193,7 @@ export function SlideInlineEditor({
   agentActive,
   onComment,
 }: SlideInlineEditorProps) {
+  const t = useT();
   const { bgClass, bgStyle } = resolveBackground(slide.background);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Guard flag: prevents the seeding setContent from triggering onContentChange
@@ -271,7 +272,7 @@ export function SlideInlineEditor({
         ...(ydoc ? ({ history: false } as any) : {}),
       }),
       Placeholder.configure({
-        placeholder: "Start typing… or press / for commands",
+        placeholder: t("raw.startTypingCommands"),
       }),
       Link.configure({
         openOnClick: false,
@@ -481,7 +482,7 @@ export function SlideInlineEditor({
       {agentActive && (
         <div className="absolute top-2 right-2 z-10 flex items-center gap-1.5 px-2 py-1 rounded-full bg-[#00B5FF]/20 border border-[#00B5FF]/40 text-[#00B5FF] text-xs font-medium animate-pulse pointer-events-none">
           <div className="w-1.5 h-1.5 rounded-full bg-[#00B5FF]" />
-          AI editing
+          {t("raw.aiEditing")}
         </div>
       )}
     </div>
@@ -497,17 +498,17 @@ function SlideEditorCanvas({
   slide: Slide;
 }) {
   const layoutPadding: Record<string, string> = {
-    title: "px-[110px] py-[80px]",
-    content: "px-[110px] py-[80px]",
+    title: "px-[110px] py-[80px]", // i18n-ignore Tailwind class list
+    content: "px-[110px] py-[80px]", // i18n-ignore Tailwind class list
     "two-column": "px-[70px] py-[50px]",
-    section: "px-[110px] py-[80px]",
-    statement: "px-[110px] py-[60px]",
+    section: "px-[110px] py-[80px]", // i18n-ignore Tailwind class list
+    statement: "px-[110px] py-[60px]", // i18n-ignore Tailwind class list
     image: "px-[80px] py-[60px]",
     "full-image": "p-0",
     blank: "p-8",
   };
 
-  const padding = layoutPadding[slide.layout] ?? "px-[110px] py-[80px]";
+  const padding = layoutPadding[slide.layout] ?? "px-[110px] py-[80px]"; // i18n-ignore Tailwind class list
 
   return (
     <div

package/corpus/templates/slides/app/components/editor/SlideSlashMenu.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconH1,
   IconH2,
@@ -28,55 +29,55 @@ const SLASH_MENU_KEY = new PluginKey("slideSlashMenu");
 type AnyIcon = React.ComponentType<any>;
 
 interface SlashCommand {
-  title: string;
-  description: string;
+  titleKey: string;
+  descriptionKey: string;
   icon: AnyIcon;
   command: (editor: Editor) => void;
 }
 
 const SLASH_COMMANDS: SlashCommand[] = [
   {
-    title: "Text",
-    description: "Plain paragraph",
+    titleKey: "slideSlashMenu.text",
+    descriptionKey: "slideSlashMenu.plainParagraph",
     icon: IconLetterT,
     command: (editor) => editor.chain().focus().setParagraph().run(),
   },
   {
-    title: "Heading 1",
-    description: "Large slide heading",
+    titleKey: "slideSlashMenu.heading1",
+    descriptionKey: "slideSlashMenu.largeSlideHeading",
     icon: IconH1,
     command: (editor) =>
       editor.chain().focus().toggleHeading({ level: 1 }).run(),
   },
   {
-    title: "Heading 2",
-    description: "Medium heading",
+    titleKey: "slideSlashMenu.heading2",
+    descriptionKey: "slideSlashMenu.mediumHeading",
     icon: IconH2,
     command: (editor) =>
       editor.chain().focus().toggleHeading({ level: 2 }).run(),
   },
   {
-    title: "Heading 3",
-    description: "Small heading",
+    titleKey: "slideSlashMenu.heading3",
+    descriptionKey: "slideSlashMenu.smallHeading",
     icon: IconH3,
     command: (editor) =>
       editor.chain().focus().toggleHeading({ level: 3 }).run(),
   },
   {
-    title: "Bullet List",
-    description: "Unordered list",
+    titleKey: "slideSlashMenu.bulletList",
+    descriptionKey: "slideSlashMenu.unorderedList",
     icon: IconList,
     command: (editor) => editor.chain().focus().toggleBulletList().run(),
   },
   {
-    title: "Numbered List",
-    description: "Ordered list",
+    titleKey: "slideSlashMenu.numberedList",
+    descriptionKey: "slideSlashMenu.orderedList",
     icon: IconListNumbers,
     command: (editor) => editor.chain().focus().toggleOrderedList().run(),
   },
   {
-    title: "Quote",
-    description: "Blockquote",
+    titleKey: "slideSlashMenu.quote",
+    descriptionKey: "slideSlashMenu.blockquote",
     icon: IconBlockquote,
     command: (editor) => editor.chain().focus().toggleBlockquote().run(),
   },
@@ -94,14 +95,18 @@ export const SlashMenuUI = forwardRef<
   { moveUp: () => void; moveDown: () => void; select: () => void },
   SlashMenuUIProps
 >(({ position, query, onCommand }, ref) => {
+  const t = useT();
   const [selectedIndex, setSelectedIndex] = useState(0);
 
-  const filtered = SLASH_COMMANDS.filter(
-    (cmd) =>
+  const filtered = SLASH_COMMANDS.filter((cmd) => {
+    const title = t(cmd.titleKey);
+    const description = t(cmd.descriptionKey);
+    return (
       !query ||
-      cmd.title.toLowerCase().includes(query.toLowerCase()) ||
-      cmd.description.toLowerCase().includes(query.toLowerCase()),
-  );
+      title.toLowerCase().includes(query.toLowerCase()) ||
+      description.toLowerCase().includes(query.toLowerCase())
+    );
+  });
 
   useImperativeHandle(ref, () => ({
     moveUp: () =>
@@ -128,13 +133,15 @@ export const SlashMenuUI = forwardRef<
       style={{ top: position.y, left: position.x }}
     >
       <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground/70 uppercase tracking-widest">
-        Blocks
+        {t("slideSlashMenu.blocks")}
       </div>
       {filtered.map((cmd, i) => {
         const Icon = cmd.icon;
+        const title = t(cmd.titleKey);
+        const description = t(cmd.descriptionKey);
         return (
           <button
-            key={cmd.title}
+            key={cmd.titleKey}
             className={cn(
               "w-full flex items-center gap-3 px-3 py-2 text-left",
               i === selectedIndex
@@ -148,11 +155,9 @@ export const SlashMenuUI = forwardRef<
               <Icon size={14} stroke={2} />
             </div>
             <div>
-              <div className="text-sm font-medium leading-tight">
-                {cmd.title}
-              </div>
+              <div className="text-sm font-medium leading-tight">{title}</div>
               <div className="text-xs text-muted-foreground leading-tight">
-                {cmd.description}
+                {description}
               </div>
             </div>
           </button>

package/corpus/templates/slides/app/components/editor/SpeakerNotesPanel.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconChevronUp, IconChevronDown } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -14,6 +15,7 @@ export function SpeakerNotesPanel({
   slideIndex,
   slideCount,
 }: SpeakerNotesPanelProps) {
+  const t = useT();
   const [expanded, setExpanded] = useState(() => {
     try {
       return localStorage.getItem("speaker-notes-expanded") !== "false";
@@ -37,7 +39,10 @@ export function SpeakerNotesPanel({
         className="w-full flex items-center justify-between px-4 py-1.5 cursor-pointer"
       >
         <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
-          Speaker Notes — Slide {slideIndex + 1} / {slideCount}
+          {t("raw.speakerNotesForSlide", {
+            index: slideIndex + 1,
+            count: slideCount,
+          })}
         </span>
         {expanded ? (
           <IconChevronDown className="w-3 h-3 text-muted-foreground" />
@@ -50,7 +55,7 @@ export function SpeakerNotesPanel({
           <textarea
             value={notes || ""}
             onChange={(e) => onChange(e.target.value)}
-            placeholder="Add speaker notes..."
+            placeholder={t("raw.addSpeakerNotes")}
             className="w-full h-20 bg-transparent text-muted-foreground text-xs font-mono placeholder:text-muted-foreground/70 resize-none outline-none"
           />
         </div>

package/corpus/templates/slides/app/components/layout/AgentWorkIndicator.tsx

@@ -1,4 +1,4 @@
-import { focusAgentChat } from "@agent-native/core/client";
+import { focusAgentChat, useT } from "@agent-native/core/client";
 import { IconLoader2, IconMessageCircle } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 
@@ -47,6 +47,7 @@ function useAgentSidebarVisible() {
 }
 
 export function AgentWorkIndicator() {
+  const t = useT();
   const [running, setRunning] = useState(false);
   const sidebarVisible = useAgentSidebarVisible();
 
@@ -68,7 +69,9 @@ export function AgentWorkIndicator() {
       <div className="pointer-events-auto flex items-center justify-between gap-3 rounded-lg border border-border bg-popover/95 px-3 py-2 text-popover-foreground shadow-xl shadow-black/20 backdrop-blur">
         <div className="flex min-w-0 items-center gap-2">
           <IconLoader2 className="h-4 w-4 shrink-0 animate-spin text-[#609FF8]" />
-          <span className="truncate text-sm font-medium">Agent is working</span>
+          <span className="truncate text-sm font-medium">
+            {t("raw.agentWorking")}
+          </span>
         </div>
         <button
           type="button"
@@ -83,7 +86,7 @@ export function AgentWorkIndicator() {
           className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <IconMessageCircle className="h-3.5 w-3.5" />
-          Open chat
+          {t("raw.openChat")}
         </button>
       </div>
     </div>

package/corpus/templates/slides/app/components/presentation/PresentationView.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconChevronLeft,
   IconChevronRight,
@@ -153,6 +154,7 @@ export default function PresentationView({
   startIndex = 0,
   aspectRatio,
 }: PresentationViewProps) {
+  const t = useT();
   const safeSlides = useMemo(
     () =>
       (Array.isArray(slides) ? slides : [])
@@ -236,7 +238,7 @@ export default function PresentationView({
   const goNext = useCallback(() => {
     if (animating) return;
     // Reveal next paragraph step if enabled
-    if (maxSteps > 0 && currentStep < maxSteps) {
+    if (maxSteps > 0 && currentStep < maxSteps /* i18n-ignore */) {
       setCurrentStep((prev) => prev + 1);
       return;
     }
@@ -404,7 +406,7 @@ export default function PresentationView({
           onClick={exit}
           className="rounded-lg bg-white/10 px-4 py-3 text-sm text-white transition-colors hover:bg-white/20"
         >
-          No slides to present
+          {t("presentation.noSlides")}
         </button>
       </div>
     );
@@ -481,7 +483,7 @@ export default function PresentationView({
               onClick={goPrev}
               disabled={currentIndex === 0}
               className="p-3 sm:p-2 rounded-lg bg-white/10 hover:bg-white/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              aria-label="Previous slide"
+              aria-label={t("presentation.previousSlide")}
             >
               <IconChevronLeft className="w-5 h-5 sm:w-4 sm:h-4 text-white" />
             </button>
@@ -489,10 +491,11 @@ export default function PresentationView({
               onClick={goNext}
               disabled={
                 currentIndex === safeSlides.length - 1 &&
-                (maxSteps === 0 || currentStep >= maxSteps)
+                (maxSteps === 0 || // i18n-ignore: boolean expression, not visible copy.
+                  currentStep >= maxSteps)
               }
               className="p-3 sm:p-2 rounded-lg bg-white/10 hover:bg-white/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              aria-label="Next slide"
+              aria-label={t("presentation.nextSlide")}
             >
               <IconChevronRight className="w-5 h-5 sm:w-4 sm:h-4 text-white" />
             </button>
@@ -501,7 +504,7 @@ export default function PresentationView({
           <button
             onClick={exit}
             className="p-3 sm:p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
-            aria-label="Exit presentation"
+            aria-label={t("presentation.exitPresentation")}
           >
             <IconX className="w-5 h-5 sm:w-4 sm:h-4 text-white" />
           </button>
@@ -529,10 +532,10 @@ export default function PresentationView({
             enterFullscreen();
           }}
           className="fixed top-4 right-4 z-[102] flex items-center gap-2 rounded-lg bg-white/10 px-4 py-3 text-sm text-white hover:bg-white/20 transition-colors"
-          aria-label="Enter fullscreen"
+          aria-label={t("presentation.enterFullscreen")}
         >
           <IconMaximize className="w-4 h-4" />
-          Click to enter fullscreen
+          {t("presentation.clickToEnterFullscreen")}
         </button>
       )}
     </div>

package/corpus/templates/slides/app/components/visual-editor/CanvasCommentPins.tsx

@@ -1,4 +1,4 @@
-import { sendToAgentChat } from "@agent-native/core/client";
+import { sendToAgentChat, useT } from "@agent-native/core/client";
 import { IconMessage, IconSend, IconX } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
@@ -138,6 +138,7 @@ export function CanvasCommentPins({
   contextId,
   contextLabel,
 }: CanvasCommentPinsProps) {
+  const t = useT();
   const [pins, setPins] = useState<CanvasPin[]>([]);
   const [activePinId, setActivePinId] = useState<string | null>(null);
   const containerRef = useRef<HTMLElement | null>(null);
@@ -291,10 +292,10 @@ export function CanvasCommentPins({
         >
           <IconMessage className="w-3.5 h-3.5 text-[#609FF8]" />
           <span className="text-[11px] text-foreground">
-            Click anywhere to drop a comment pin
+            {t("raw.pinDropHint")}
           </span>
           <span className="text-[10px] text-muted-foreground ml-1">
-            Esc to exit
+            {t("raw.escExit")}
           </span>
         </div>
       )}
@@ -352,7 +353,7 @@ export function CanvasCommentPins({
                 })()}
               >
                 <p className="mb-2 text-xs font-semibold text-foreground">
-                  Edit slide
+                  {t("raw.editSlide")}
                 </p>
                 <Textarea
                   autoFocus
@@ -375,7 +376,7 @@ export function CanvasCommentPins({
                       removePin(pin.id);
                     }
                   }}
-                  placeholder="Tell the agent what to change…"
+                  placeholder={t("raw.tellAgentChange")}
                   className="resize-none text-xs min-h-[60px]"
                 />
                 {pin.targetText && (

package/corpus/templates/slides/app/components/visual-editor/DrawOverlay.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconEraser,
   IconArrowBackUp,
@@ -83,6 +84,7 @@ interface Stroke {
  * be `position: relative`.
  */
 export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
+  const t = useT();
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [color, setColor] = useState(PRESET_COLORS[0].color);
@@ -298,7 +300,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
             }}
             className="h-7 w-48 border-primary bg-background text-sm"
             autoFocus
-            placeholder="Type annotation…"
+            placeholder={t("raw.typeAnnotation")}
           />
         </div>
       )}
@@ -373,7 +375,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconCursorText className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Type anywhere on the canvas</TooltipContent>
+          <TooltipContent>{t("raw.typeAnywhere")}</TooltipContent>
         </Tooltip>
 
         {/* Undo last stroke */}
@@ -387,7 +389,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconArrowBackUp className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Undo stroke</TooltipContent>
+          <TooltipContent>{t("raw.undoStroke")}</TooltipContent>
         </Tooltip>
 
         {/* Clear all */}
@@ -401,7 +403,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconEraser className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Clear all</TooltipContent>
+          <TooltipContent>{t("raw.drawClearAll")}</TooltipContent>
         </Tooltip>
 
         <div className="mx-1 h-4 w-px bg-border" />
@@ -414,7 +416,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
             if (e.key === "Enter" && hasContent) send();
             if (e.key === "Escape") onClose();
           }}
-          placeholder="Tell the agent what to do…"
+          placeholder={t("raw.tellAgentDo")}
           className="h-7 w-48 border-border bg-background text-xs sm:w-56"
         />
 
@@ -439,7 +441,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconX className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Exit draw mode</TooltipContent>
+          <TooltipContent>{t("raw.drawExitMode")}</TooltipContent>
         </Tooltip>
       </div>
     </div>

package/corpus/templates/slides/app/components/visual-editor/MultiSelectChip.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconX, IconArrowRight } from "@tabler/icons-react";
 import { createPortal } from "react-dom";
 
@@ -26,6 +27,7 @@ export function MultiSelectChip({
   onClear,
   onSendToAgent,
 }: MultiSelectChipProps) {
+  const t = useT();
   if (count === 0) return null;
 
   // Position the chip top-center relative to the anchor (the slide canvas).
@@ -60,7 +62,9 @@ export function MultiSelectChip({
       }}
     >
       <span style={{ color: "#609FF8" }}>{count}</span>
-      <span style={{ color: "rgba(255,255,255,0.85)" }}>selected</span>
+      <span style={{ color: "rgba(255,255,255,0.85)" }}>
+        {t("raw.selected")}
+      </span>
       <button
         type="button"
         onClick={onSendToAgent}
@@ -79,13 +83,13 @@ export function MultiSelectChip({
           cursor: "pointer",
         }}
       >
-        Send to agent
+        {t("raw.sendToAgent")}
         <IconArrowRight size={12} stroke={3} />
       </button>
       <button
         type="button"
         onClick={onClear}
-        aria-label="Clear selection"
+        aria-label={t("raw.clearSelection")}
         style={{
           display: "inline-flex",
           alignItems: "center",

package/corpus/templates/slides/app/components/visual-editor/SaveStatusIndicator.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCloudOff } from "@tabler/icons-react";
 
 import { cn } from "@/lib/utils";
@@ -14,18 +15,19 @@ export function SaveStatusIndicator({
   offline,
   className,
 }: SaveStatusIndicatorProps) {
+  const t = useT();
   if (offline) {
     return (
       <div
         data-save-status="offline"
-        title="Changes will save when reconnected"
+        title={t("raw.saveReconnect")}
         className={cn(
           "flex items-center gap-1 text-[11px] text-amber-500 whitespace-nowrap",
           className,
         )}
       >
         <IconCloudOff className="w-3 h-3" />
-        <span className="hidden xl:inline">Offline</span>
+        <span className="hidden xl:inline">{t("raw.offline")}</span>
       </div>
     );
   }