@agent-native/core 0.77.3 → 0.77.4

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

@@ -1,4 +1,4 @@
-import { appBasePath } from "@agent-native/core/client";
+import { appBasePath, useT } from "@agent-native/core/client";
 import {
   IconDownload,
   IconFileTypePdf,
@@ -35,6 +35,7 @@ export function ExportMenu({
   onShareLink,
   onShareTeam,
 }: ExportMenuProps) {
+  const t = useT();
   const triggerBlobDownload = (blob: Blob, filename: string) => {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -73,7 +74,7 @@ export function ExportMenu({
     });
     if (!res.ok) {
       throw new Error(
-        await readErrorMessage(res, "Could not generate PPTX file."),
+        await readErrorMessage(res, t("editorExport.pptxFailed")),
       );
     }
     return {
@@ -92,11 +93,11 @@ export function ExportMenu({
     } catch (err) {
       console.error("Export failed:", err);
       toast({
-        title: "Export failed",
+        title: t("editorExport.exportFailed"),
         description:
           err instanceof Error
             ? err.message
-            : "Something went wrong exporting as PPTX.",
+            : t("editorExport.exportPptxError"),
         variant: "destructive",
       });
     }
@@ -107,18 +108,17 @@ export function ExportMenu({
       const { blob, filename } = await fetchPptxExport();
       triggerBlobDownload(blob, filename);
       toast({
-        title: "Downloaded for Google Slides",
-        description:
-          "Open Google Slides, choose File → Import slides, then select the downloaded .pptx.",
+        title: t("editorExport.googleSlidesDownloaded"),
+        description: t("editorExport.googleSlidesImportHint"),
       });
     } catch (err) {
       console.error("Export failed:", err);
       toast({
-        title: "Export failed",
+        title: t("editorExport.exportFailed"),
         description:
           err instanceof Error
             ? err.message
-            : "Something went wrong exporting to Google Slides.",
+            : t("editorExport.exportGoogleSlidesError"),
         variant: "destructive",
       });
     }
@@ -133,7 +133,7 @@ export function ExportMenu({
       });
       if (!res.ok) {
         throw new Error(
-          await readErrorMessage(res, "Could not generate HTML file."),
+          await readErrorMessage(res, t("editorExport.htmlFailed")),
         );
       }
       const blob = await res.blob();
@@ -145,11 +145,11 @@ export function ExportMenu({
     } catch (err) {
       console.error("Export failed:", err);
       toast({
-        title: "Export failed",
+        title: t("editorExport.exportFailed"),
         description:
           err instanceof Error
             ? err.message
-            : "Something went wrong exporting as HTML.",
+            : t("editorExport.exportHtmlError"),
         variant: "destructive",
       });
     }
@@ -160,49 +160,49 @@ export function ExportMenu({
       <DropdownMenuTrigger asChild>
         <button className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent text-xs cursor-pointer whitespace-nowrap">
           <IconDownload className="w-3.5 h-3.5" />
-          <span className="hidden md:inline">Export</span>
+          <span className="hidden md:inline">{t("editorExport.export")}</span>
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-52">
         <DropdownMenuLabel className="text-[11px] text-muted-foreground">
-          Export & Duplicate
+          {t("editorExport.exportAndDuplicate")}
         </DropdownMenuLabel>
         {onShareTeam && (
           <DropdownMenuItem onClick={onShareTeam} className="cursor-pointer">
             <IconShare2 className="w-4 h-4 mr-2" />
-            Share with team...
+            {t("editorExport.shareWithTeam")}
           </DropdownMenuItem>
         )}
         {onShareLink && (
           <DropdownMenuItem onClick={onShareLink} className="cursor-pointer">
             <IconShare2 className="w-4 h-4 mr-2" />
-            Public share link...
+            {t("editorExport.publicShareLink")}
           </DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={handleExportHtml} className="cursor-pointer">
           <IconCode className="w-4 h-4 mr-2" />
-          Download as HTML
+          {t("editorExport.downloadHtml")}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onExportPdf} className="cursor-pointer">
           <IconFileTypePdf className="w-4 h-4 mr-2" />
-          Export as PDF
+          {t("editorExport.exportPdf")}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={handleExportPptx} className="cursor-pointer">
           <IconDownload className="w-4 h-4 mr-2" />
-          Export as PPTX
+          {t("editorExport.exportPptx")}
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={handleExportGoogleSlides}
           className="cursor-pointer"
         >
           <IconBrandGoogle className="w-4 h-4 mr-2" />
-          Download for Google Slides
+          {t("editorExport.downloadGoogleSlides")}
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer">
           <IconCopy className="w-4 h-4 mr-2" />
-          Duplicate deck
+          {t("editorExport.duplicateDeck")}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

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

@@ -1,4 +1,4 @@
-import { useActionMutation } from "@agent-native/core/client";
+import { useActionMutation, useT } from "@agent-native/core/client";
 import type { SlideGenerateResponse } from "@shared/api";
 import { IconLoader2, IconPhoto } from "@tabler/icons-react";
 import { useState } from "react";
@@ -33,6 +33,7 @@ export default function GenerateSlidesDialog({
   onOpenChange,
   onGenerated,
 }: GenerateSlidesDialogProps) {
+  const t = useT();
   const [topic, setTopic] = useState("");
   const [slideCount, setSlideCount] = useState(8);
   const [style, setStyle] = useState("");
@@ -86,11 +87,10 @@ export default function GenerateSlidesDialog({
       <DialogContent className="bg-card border-border max-w-lg">
         <DialogHeader>
           <DialogTitle className="text-foreground flex items-center gap-2">
-            Generate Slides with AI
+            {t("generateSlides.title")}
           </DialogTitle>
           <DialogDescription className="text-muted-foreground">
-            Describe your presentation topic and AI will generate slides for
-            you.
+            {t("generateSlides.description")}
           </DialogDescription>
         </DialogHeader>
 
@@ -98,12 +98,12 @@ export default function GenerateSlidesDialog({
           {/* Topic */}
           <div>
             <label className="text-xs font-medium text-muted-foreground block mb-1.5">
-              Topic
+              {t("generateSlides.topic")}
             </label>
             <textarea
               value={topic}
               onChange={(e) => setTopic(e.target.value)}
-              placeholder="e.g. Introduction to React Hooks, Q4 Sales Report, Product Roadmap 2025..."
+              placeholder={t("generateSlides.topicPlaceholder")}
               className="w-full h-20 bg-accent/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/70 outline-none focus:border-[#609FF8]/50 resize-none"
             />
           </div>
@@ -112,7 +112,7 @@ export default function GenerateSlidesDialog({
           <div className="flex gap-3">
             <div className="flex-1">
               <label className="text-xs font-medium text-muted-foreground block mb-1.5">
-                Slides
+                {t("generateSlides.slides")}
               </label>
               <Select
                 value={String(slideCount)}
@@ -124,7 +124,7 @@ export default function GenerateSlidesDialog({
                 <SelectContent>
                   {[4, 6, 8, 10].map((n) => (
                     <SelectItem key={n} value={String(n)}>
-                      {n} slides
+                      {t("generateSlides.slideCount", { count: n })}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -132,12 +132,12 @@ export default function GenerateSlidesDialog({
             </div>
             <div className="flex-1">
               <label className="text-xs font-medium text-muted-foreground block mb-1.5">
-                Style (optional)
+                {t("generateSlides.styleOptional")}
               </label>
               <input
                 value={style}
                 onChange={(e) => setStyle(e.target.value)}
-                placeholder="e.g. minimal, corporate..."
+                placeholder={t("generateSlides.stylePlaceholder")}
                 className="w-full bg-accent/50 border border-border rounded-lg px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/70 outline-none focus:border-[#609FF8]/50"
               />
             </div>
@@ -160,10 +160,10 @@ export default function GenerateSlidesDialog({
             </button>
             <div>
               <span className="text-sm text-foreground/90">
-                Generate images
+                {t("generateSlides.generateImages")}
               </span>
               <p className="text-xs text-muted-foreground">
-                AI will generate images for visual slides using Gemini
+                {t("generateSlides.generateImagesDescription")}
               </p>
             </div>
           </div>
@@ -173,7 +173,7 @@ export default function GenerateSlidesDialog({
             <div>
               <label className="text-xs font-medium text-muted-foreground block mb-1.5">
                 <IconPhoto className="w-3 h-3 inline mr-1" />
-                Reference Images (optional, for brand consistency)
+                {t("generateSlides.referenceImages")}
               </label>
               <div className="flex flex-wrap gap-2 mb-2">
                 {referenceImages.map((img, i) => (
@@ -210,7 +210,7 @@ export default function GenerateSlidesDialog({
                 </label>
               </div>
               <p className="text-[11px] text-muted-foreground/70">
-                Upload images to match their visual style in generated images
+                {t("generateSlides.referenceImagesDescription")}
               </p>
             </div>
           )}
@@ -230,10 +230,10 @@ export default function GenerateSlidesDialog({
             {loading ? (
               <>
                 <IconLoader2 className="w-4 h-4 animate-spin" />
-                Generating slides...
+                {t("generateSlides.generating")}
               </>
             ) : (
-              <>Generate Slides</>
+              <>{t("generateSlides.generate")}</>
             )}
           </button>
         </div>

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

@@ -1,16 +1,18 @@
+import { useT } from "@agent-native/core/client";
 import { IconLoader2 } from "@tabler/icons-react";
 
 export default function GeneratingOverlay() {
+  const t = useT();
   return (
     <div className="flex-1 flex items-center justify-center bg-background">
       <div className="flex max-w-sm flex-col items-center gap-4 px-6 text-center">
         <IconLoader2 className="w-8 h-8 text-[#609FF8] animate-spin" />
         <div className="space-y-1">
           <p className="text-sm font-medium text-foreground">
-            Preparing the first slides
+            {t("raw.firstSlidesTitle")}
           </p>
           <p className="text-xs leading-relaxed text-muted-foreground">
-            The deck will start filling in here as soon as each slide lands.
+            {t("raw.firstSlidesDescription")}
           </p>
         </div>
       </div>

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

@@ -1,4 +1,8 @@
-import { agentNativePath, oauthRedirectUri } from "@agent-native/core/client";
+import {
+  agentNativePath,
+  oauthRedirectUri,
+  useT,
+} from "@agent-native/core/client";
 import { extractGoogleDocUrls } from "@shared/google-docs";
 import {
   IconAlertCircle,
@@ -118,7 +122,7 @@ function buildSourceContext(doc: ImportedGoogleDoc): string {
   const title = doc.title.replace(/"/g, "'");
   return [
     "Imported Google Docs source material:",
-    `<google-doc title="${title}" documentId="${doc.documentId}" source="${doc.source}" charCount="${doc.charCount}" truncated="${doc.truncated}">`,
+    `<google-doc title="${title}" documentId="${doc.documentId}" source="${doc.source}" charCount="${doc.charCount}" truncated="${doc.truncated}">`, // i18n-ignore source-context wrapper, not UI copy
     doc.text,
     "</google-doc>",
     doc.note ?? "",
@@ -131,6 +135,7 @@ export function GoogleDocImportHint({
   promptText,
   onSourceContextChange,
 }: GoogleDocImportHintProps) {
+  const t = useT();
   const googleDocUrl = useMemo(
     () => extractGoogleDocUrls(promptText)[0] ?? "",
     [promptText],
@@ -384,13 +389,12 @@ export function GoogleDocImportHint({
           </p>
           {!configured && (
             <p className="mt-1 text-[11px] text-amber-500">
-              Google OAuth is not configured for this deployment.
+              {t("raw.googleOAuthNotConfigured")}
             </p>
           )}
           {pickerMissing && (
             <p className="mt-1 text-[11px] text-amber-500">
-              Google Picker needs GOOGLE_PICKER_API_KEY and
-              GOOGLE_PICKER_APP_ID.
+              {t("raw.googlePickerNeedsKeys")}
             </p>
           )}
         </div>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconArrowLeft,
   IconHistory,
@@ -18,7 +19,7 @@ import {
   SheetTitle,
 } from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
-import type { Slide, SlideLayout } from "@/context/DeckContext";
+import type { Slide } from "@/context/DeckContext";
 import {
   useDeckVersion,
   useDeckVersions,
@@ -27,18 +28,7 @@ import {
 import { toast } from "@/hooks/use-toast";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
-import type { DeckVersion, DeckVersionSummary } from "../../../shared/api";
-
-const SLIDE_LAYOUTS = new Set<SlideLayout>([
-  "title",
-  "section",
-  "content",
-  "two-column",
-  "image",
-  "statement",
-  "full-image",
-  "blank",
-]);
+import type { DeckVersionSummary } from "../../../shared/api";
 
 interface HistoryPanelProps {
   deckId: string;
@@ -48,23 +38,28 @@ interface HistoryPanelProps {
   anchorRef?: RefObject<HTMLButtonElement | null>;
 }
 
-function formatRelativeTime(dateStr: string): string {
+type Translate = ReturnType<typeof useT>;
+
+function formatRelativeTime(dateStr: string, translate: Translate): string {
   const then = new Date(dateStr).getTime();
-  if (!Number.isFinite(then)) return "Unknown time";
+  if (!Number.isFinite(then)) return translate("history.unknownTime");
   const diffMs = Date.now() - then;
   const diffMin = Math.floor(diffMs / 60_000);
   const diffHr = Math.floor(diffMs / 3_600_000);
   const diffDay = Math.floor(diffMs / 86_400_000);
 
-  if (diffMin < 1) return "Just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  if (diffHr < 24) return `${diffHr}h ago`;
-  if (diffDay < 7) return `${diffDay}d ago`;
+  if (diffMin < 1) return translate("history.justNow");
+  if (diffMin < 60) return translate("history.minutesAgo", { count: diffMin });
+  if (diffHr < 24) return translate("history.hoursAgo", { count: diffHr });
+  if (diffDay < 7) return translate("history.daysAgo", { count: diffDay });
   return new Date(dateStr).toLocaleDateString();
 }
 
-function slideLabel(version: Pick<DeckVersionSummary, "slideCount">): string {
-  return `${version.slideCount} slide${version.slideCount === 1 ? "" : "s"}`;
+function slideLabel(
+  version: Pick<DeckVersionSummary, "slideCount">,
+  translate: Translate,
+): string {
+  return translate("history.slideCount", { count: version.slideCount });
 }
 
 function normalizeSlides(slides: DeckVersionSummary["slidePreviews"]): string {
@@ -74,18 +69,13 @@ function normalizeSlides(slides: DeckVersionSummary["slidePreviews"]): string {
     .join(" / ");
 }
 
-function normalizeSlideLayout(layout: string | undefined): SlideLayout {
-  return layout && SLIDE_LAYOUTS.has(layout as SlideLayout)
-    ? (layout as SlideLayout)
-    : "blank";
-}
-
 export default function HistoryPanel({
   deckId,
   open,
   onOpenChange,
   canRestore = true,
 }: HistoryPanelProps) {
+  const t = useT();
   const [selectedVersionId, setSelectedVersionId] = useState<string | null>(
     null,
   );
@@ -93,18 +83,16 @@ export default function HistoryPanel({
   const versionQuery = useDeckVersion(open ? deckId : null, selectedVersionId);
   const restoreVersion = useRestoreDeckVersion();
 
-  const versions: DeckVersionSummary[] = versionsQuery.data?.versions ?? [];
+  const versions = versionsQuery.data?.versions ?? [];
   const selectedVersion = versionQuery.data;
-  const selectedVersionSlides: DeckVersion["slides"] =
-    selectedVersion?.slides ?? [];
-  const selectedSlides = useMemo<Slide[]>(
+  const selectedSlides = useMemo(
     () =>
-      selectedVersionSlides.map((slide) => ({
+      (selectedVersion?.slides ?? []).map((slide) => ({
+        notes: "",
+        layout: "blank",
         ...slide,
-        notes: slide.notes ?? "",
-        layout: normalizeSlideLayout(slide.layout),
-      })),
-    [selectedVersionSlides],
+      })) as Slide[],
+    [selectedVersion?.slides],
   );
 
   const handleClose = (nextOpen: boolean) => {
@@ -120,17 +108,17 @@ export default function HistoryPanel({
         versionId: selectedVersionId,
       });
       toast({
-        title: "Version restored",
-        description: "The deck was rolled back to the selected snapshot.",
+        title: t("history.versionRestored"),
+        description: t("history.versionRestoredDescription"),
       });
       handleClose(false);
     } catch (error) {
       toast({
-        title: "Restore failed",
+        title: t("history.restoreFailed"),
         description:
           error instanceof Error
             ? error.message
-            : "Could not restore this deck version.",
+            : t("history.restoreFailedDescription"),
         variant: "destructive",
       });
     }
@@ -148,17 +136,17 @@ export default function HistoryPanel({
                 className="inline-flex min-w-0 items-center gap-1.5 text-muted-foreground transition-colors hover:text-foreground"
               >
                 <IconArrowLeft size={15} />
-                <span>Back to saved versions</span>
+                <span>{t("history.backToSavedVersions")}</span>
               </button>
             ) : (
               <>
                 <IconHistory size={16} className="text-[#609FF8]" />
-                <span>Saved versions</span>
+                <span>{t("history.savedVersions")}</span>
               </>
             )}
           </SheetTitle>
           <SheetDescription className="sr-only">
-            Browse saved deck versions and restore a previous snapshot.
+            {t("history.description")}
           </SheetDescription>
         </SheetHeader>
 
@@ -175,12 +163,12 @@ export default function HistoryPanel({
               ) : (
                 <>
                   <p className="truncate text-sm font-medium">
-                    {selectedVersion?.title || "Untitled"}
+                    {selectedVersion?.title || t("history.untitled")}
                   </p>
                   <p className="mt-0.5 text-[11px] text-muted-foreground">
                     {selectedVersion
-                      ? `${new Date(selectedVersion.createdAt).toLocaleString()} · ${slideLabel(selectedVersion)}`
-                      : "Snapshot unavailable"}
+                      ? `${new Date(selectedVersion.createdAt).toLocaleString()} · ${slideLabel(selectedVersion, t)}`
+                      : t("history.snapshotUnavailable")}
                   </p>
                 </>
               )}
@@ -208,13 +196,13 @@ export default function HistoryPanel({
                         className="border border-border bg-black"
                       />
                       <p className="mt-1.5 truncate text-[11px] text-muted-foreground">
-                        Slide {index + 1}
+                        {t("history.slideNumber", { number: index + 1 })}
                       </p>
                     </div>
                   ))
                 ) : (
                   <div className="col-span-full py-12 text-center text-xs text-muted-foreground">
-                    No slides in this snapshot.
+                    {t("history.noSlidesInSnapshot")}
                   </div>
                 )}
               </div>
@@ -233,7 +221,7 @@ export default function HistoryPanel({
                   ) : (
                     <IconRestore size={15} className="mr-1.5" />
                   )}
-                  Restore this version
+                  {t("history.restoreThisVersion")}
                 </Button>
               </div>
             ) : null}
@@ -262,14 +250,14 @@ export default function HistoryPanel({
                         <div className="min-w-0 flex-1">
                           <div className="flex min-w-0 items-center gap-2">
                             <p className="truncate text-sm font-medium">
-                              {version.title || "Untitled"}
+                              {version.title || t("history.untitled")}
                             </p>
                             <span className="flex-shrink-0 text-[10px] text-muted-foreground">
-                              {slideLabel(version)}
+                              {slideLabel(version, t)}
                             </span>
                           </div>
                           <p className="mt-0.5 text-[11px] text-muted-foreground">
-                            {formatRelativeTime(version.createdAt)}
+                            {formatRelativeTime(version.createdAt, t)}
                             {version.label ? ` · ${version.label}` : ""}
                           </p>
                           {preview ? (
@@ -289,9 +277,11 @@ export default function HistoryPanel({
                   size={24}
                   className="mx-auto mb-3 text-muted-foreground/60"
                 />
-                <p className="text-sm font-medium">No saved versions yet</p>
+                <p className="text-sm font-medium">
+                  {t("history.noSavedVersions")}
+                </p>
                 <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
-                  Versions are saved automatically before future deck edits.
+                  {t("history.noSavedVersionsDescription")}
                 </p>
               </div>
             )}

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

@@ -1,4 +1,4 @@
-import { appBasePath, sendToAgentChat } from "@agent-native/core/client";
+import { appBasePath, sendToAgentChat, useT } from "@agent-native/core/client";
 import { IconLoader2, IconX } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -41,6 +41,7 @@ export default function ImageDropPromptPopover({
   contextHint,
   onClose,
 }: ImageDropPromptPopoverProps) {
+  const t = useT();
   const [prompt, setPrompt] = useState("");
   const [uploading, setUploading] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
@@ -152,16 +153,14 @@ export default function ImageDropPromptPopover({
 
       onClose();
       toast({
-        title: "Sent to agent",
+        title: t("raw.sentToAgent"),
         description: file.name,
       });
     } catch (err) {
       toast({
-        title: "Image upload failed",
+        title: t("raw.imageUploadFailed"),
         description:
-          err instanceof Error
-            ? err.message
-            : "Something went wrong uploading this image.",
+          err instanceof Error ? err.message : t("raw.imageUploadGenericError"),
         variant: "destructive",
       });
     } finally {
@@ -173,13 +172,13 @@ export default function ImageDropPromptPopover({
     <div
       ref={panelRef}
       role="dialog"
-      aria-label="What should we do with this image?"
+      aria-label={t("raw.imagePromptTitle")}
       className="fixed z-[210] rounded-xl border border-border bg-popover shadow-2xl shadow-black/60"
       style={{ width: POPOVER_WIDTH, ...computedPosition }}
     >
       <div className="flex items-start justify-between gap-2 px-3.5 pt-3 pb-2">
         <span className="text-sm font-medium text-foreground/90">
-          What should we do with this image?
+          {t("raw.imagePromptTitle")}
         </span>
         <button
           type="button"
@@ -220,7 +219,7 @@ export default function ImageDropPromptPopover({
               if (!uploading) void handleSubmit();
             }
           }}
-          placeholder="e.g. Use as the title-slide hero. Or: replace the headshot on slide 3."
+          placeholder={t("raw.imagePromptPlaceholder")}
           rows={3}
           disabled={uploading}
           className="resize-none text-sm"
@@ -244,10 +243,10 @@ export default function ImageDropPromptPopover({
             {uploading ? (
               <span className="inline-flex items-center gap-1.5">
                 <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
-                Uploading…
+                {t("raw.uploading")}
               </span>
             ) : (
-              "Send to agent"
+              t("raw.sendToAgent")
             )}
           </Button>
         </div>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { DEFAULT_STYLE_REFERENCE_URLS } from "@shared/api";
 import { IconX } from "@tabler/icons-react";
 import { IconLoader2 } from "@tabler/icons-react";
@@ -26,6 +27,7 @@ export default function ImageGenPanel({
   slideContext,
   anchorRef,
 }: ImageGenPanelProps) {
+  const t = useT();
   const [prompt, setPrompt] = useState("");
   const [disabledDefaults, setDisabledDefaults] = useState<Set<number>>(
     new Set(),
@@ -155,7 +157,7 @@ export default function ImageGenPanel({
     >
       <div className="px-4 pt-3 pb-2 flex items-center justify-between">
         <h3 className="text-sm font-semibold text-foreground">
-          Generate Image
+          {t("editorToolbar.generateImage")}
         </h3>
         <button
           onClick={() => onOpenChange(false)}
@@ -217,7 +219,7 @@ export default function ImageGenPanel({
           {generating ? (
             <>
               <IconLoader2 className="w-4 h-4 animate-spin" />
-              Generating...
+              {t("raw.generatingImage")}
             </>
           ) : (
             "Generate"