@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/slides/app/pages/Index.tsx

@@ -3,6 +3,7 @@ import {
   askUserQuestion,
   callAction,
   useSession,
+  useT,
 } from "@agent-native/core/client";
 import { extractGoogleDocUrls } from "@shared/google-docs";
 import { IconPlus, IconStack2, IconUserCircle } from "@tabler/icons-react";
@@ -126,6 +127,7 @@ function describeUploadedFilesForAgent(
 }
 
 export default function Index() {
+  const t = useT();
   const {
     decks,
     createDeck,
@@ -315,17 +317,20 @@ export default function Index() {
 
     // One quick, skippable decision so the agent doesn't guess the deck size.
     const deckLength = await askUserQuestion({
-      question: "How long should this deck be?",
-      header: "Deck length",
+      question: t("home.deckLengthQuestion"),
+      header: t("home.deckLengthHeader"),
       options: [
-        { label: "Short (3–5 slides)", value: "3–5 slides" },
+        { label: t("home.deckLengthShort"), value: "3–5 slides" },
         {
-          label: "Medium (6–10 slides)",
+          label: t("home.deckLengthMedium"),
           value: "6–10 slides",
           recommended: true,
         },
-        { label: "Long (11+ slides)", value: "11+ slides" },
-        { label: "Just one visual", value: "a single standalone visual slide" },
+        { label: t("home.deckLengthLong"), value: "11+ slides" },
+        {
+          label: t("home.deckLengthSingleVisual"),
+          value: "a single standalone visual slide",
+        },
       ],
       allowFreeText: false,
     });
@@ -402,9 +407,8 @@ export default function Index() {
       setNewDeckRetryFiles(filesForGeneration);
       deleteDeck(deck.id);
       toast({
-        title: "Couldn't start deck generation",
-        description:
-          "The new deck did not finish saving, so the agent was not started against a missing deck. Your prompt was saved so you can try again.",
+        title: t("home.generationStartFailed"),
+        description: t("home.generationStartFailedDescription"),
       });
       setShowNewDeckPrompt(true);
       return;
@@ -452,7 +456,7 @@ export default function Index() {
     [navigate],
   );
 
-  useSetPageTitle("Decks");
+  useSetPageTitle(t("home.decksTitle"));
 
   // Inject "New Deck" into the global header actions slot.
   useSetHeaderActions(
@@ -460,10 +464,10 @@ export default function Index() {
       () => (
         <Button onClick={openNewDeck} size="sm" className="cursor-pointer">
           <IconPlus className="w-3.5 h-3.5" />
-          New Deck
+          {t("home.newDeck")}
         </Button>
       ),
-      [openNewDeck],
+      [openNewDeck, t],
     ),
   );
 
@@ -503,30 +507,29 @@ export default function Index() {
             >
               <ToggleGroupItem
                 value="all"
-                aria-label="Show all decks"
+                aria-label={t("home.showAllDecks")}
                 className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
               >
                 <IconStack2 className="me-1.5 h-3.5 w-3.5" />
-                All
+                {t("home.all")}
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="mine"
-                aria-label="Show decks created by me"
+                aria-label={t("home.showMineDecks")}
                 className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
               >
                 <IconUserCircle className="me-1.5 h-3.5 w-3.5" />
-                Mine
+                {t("home.mine")}
               </ToggleGroupItem>
             </ToggleGroup>
             <span className="text-xs text-muted-foreground/70">
               {deckFilter === "mine"
                 ? `${visibleDecks.length} of ${decks.length}`
                 : decks.length}{" "}
-              deck
-              {(deckFilter === "mine" ? visibleDecks.length : decks.length) !==
-              1
-                ? "s"
-                : ""}
+              {t("home.deckCount", {
+                count:
+                  deckFilter === "mine" ? visibleDecks.length : decks.length,
+              })}
             </span>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
@@ -542,10 +545,10 @@ export default function Index() {
               </div>
               <div className="p-4">
                 <h3 className="font-medium text-sm text-muted-foreground group-hover:text-foreground/70">
-                  New Deck
+                  {t("home.newDeck")}
                 </h3>
                 <div className="text-xs text-muted-foreground/70 mt-1">
-                  Create a deck or visual
+                  {t("home.createDeckOrVisual")}
                 </div>
               </div>
             </button>
@@ -567,7 +570,7 @@ export default function Index() {
             ))}
             {visibleDecks.length === 0 && (
               <div className="rounded-xl border border-border bg-card p-6 text-sm text-muted-foreground">
-                No decks created by you yet.
+                {t("home.noMineDecks")}
               </div>
             )}
           </div>
@@ -581,19 +584,18 @@ export default function Index() {
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete Deck?</AlertDialogTitle>
+            <AlertDialogTitle>{t("home.deleteDeckTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
-              This will permanently delete this deck and all its slides. This
-              action cannot be undone.
+              {t("home.deleteDeckDescription")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("home.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleConfirmDelete}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              Delete
+              {t("home.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -602,10 +604,10 @@ export default function Index() {
       <PromptPopover
         open={showNewDeckPrompt}
         onOpenChange={setNewDeckPromptOpen}
-        title="New deck"
-        placeholder="Describe your deck, visual, or diagram..."
+        title={t("home.newDeckPromptTitle")}
+        placeholder={t("home.newDeckPlaceholder")}
         onSkip={handleCreateDeckBlank}
-        skipLabel="Skip prompt"
+        skipLabel={t("home.skipPrompt")}
         onSubmit={handleCreateDeckWithPrompt}
         onBeforeUpload={(prompt, files) => {
           if (session) return true;
@@ -621,21 +623,21 @@ export default function Index() {
         {designSystems.length > 0 && (
           <div className="border-t border-border px-3.5 py-2">
             <label className="mb-1.5 block text-[11px] font-medium text-muted-foreground">
-              Design system
+              {t("home.designSystem")}
             </label>
             <Select
               value={selectedDesignSystemId || "none"}
               onValueChange={setSelectedDesignSystemId}
             >
               <SelectTrigger className="h-8 w-full bg-accent/40 text-xs">
-                <SelectValue placeholder="Choose a design system" />
+                <SelectValue placeholder={t("raw.chooseDesignSystem")} />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="none">None</SelectItem>
+                <SelectItem value="none">{t("home.none")}</SelectItem>
                 {designSystems.map((ds) => (
                   <SelectItem key={ds.id} value={ds.id}>
                     {ds.title}
-                    {ds.isDefault ? " (Default)" : ""}
+                    {ds.isDefault ? t("home.defaultSuffix") : ""}
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -650,15 +652,15 @@ export default function Index() {
       <AlertDialog open={showSignInDialog} onOpenChange={setSignInDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Sign in to create a deck</AlertDialogTitle>
+            <AlertDialogTitle>{t("home.signInTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
               {signInPromptHadFiles
-                ? "You need to sign in before generating a deck. We've saved your prompt; reattach any files once you're back."
-                : "You need to sign in before generating a deck. We've saved your prompt — once you're back, it'll be ready to go."}
+                ? t("home.signInDescriptionWithFiles")
+                : t("home.signInDescription")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("home.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => {
                 const ret = window.location.pathname + window.location.search;
@@ -667,7 +669,7 @@ export default function Index() {
                   `?return=${encodeURIComponent(ret)}`;
               }}
             >
-              Sign in
+              {t("home.signIn")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -681,17 +683,17 @@ function EmptyState({
 }: {
   onCreateDeck: (e: React.MouseEvent<HTMLElement>) => void;
 }) {
+  const t = useT();
   return (
     <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
       <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#609FF8]/20 to-[#4080E0]/20 border border-[#609FF8]/20 flex items-center justify-center mb-6">
         <IconStack2 className="w-7 h-7 text-[#609FF8]" />
       </div>
       <h2 className="text-xl font-semibold text-foreground mb-2">
-        Create your first deck or visual
+        {t("home.emptyTitle")}
       </h2>
       <p className="text-sm text-muted-foreground max-w-sm mb-8 leading-relaxed">
-        Build beautiful presentations, standalone visuals, diagrams, and
-        image-rich stories with AI-powered generation.
+        {t("home.emptyDescription")}
       </p>
       <Button
         onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
@@ -699,7 +701,7 @@ function EmptyState({
         }
       >
         <IconPlus className="w-4 h-4" />
-        New Deck
+        {t("home.newDeck")}
       </Button>
     </div>
   );

package/corpus/templates/slides/app/pages/SharedPresentation.tsx

@@ -1,4 +1,4 @@
-import { appBasePath } from "@agent-native/core/client";
+import { appBasePath, useT } from "@agent-native/core/client";
 import type { SharedDeckResponse } from "@shared/api";
 import { IconAlertCircle } from "@tabler/icons-react";
 import { useState, useEffect } from "react";
@@ -16,6 +16,7 @@ export default function SharedPresentation({
   initialDeck = null,
   initialError = "",
 }: SharedPresentationProps) {
+  const t = useT();
   const { token } = useParams<{ token: string }>();
   const [deck, setDeck] = useState<SharedDeckResponse | null>(initialDeck);
   const [error, setError] = useState(initialError);
@@ -65,10 +66,10 @@ export default function SharedPresentation({
             <IconAlertCircle className="w-6 h-6 text-red-400" />
           </div>
           <h1 className="text-lg font-semibold text-white/90">
-            Presentation Not Found
+            {t("raw.presentationNotFound")}
           </h1>
           <p className="text-sm text-white/50">
-            {error || "This shared presentation doesn't exist or has expired."}
+            {error || t("raw.sharedPresentationExpired")}
           </p>
         </div>
       </div>

package/corpus/templates/slides/app/routes/$.tsx

@@ -1,7 +1,8 @@
+import messages from "@/i18n/en-US";
 import NotFound from "@/pages/NotFound";
 
 export function meta() {
-  return [{ title: "Not Found - Slides" }];
+  return [{ title: messages.raw.routeNotFoundTitle }];
 }
 
 export default function CatchAllRoute() {

package/corpus/templates/slides/app/routes/deck.$id.tsx

@@ -1,7 +1,8 @@
+import messages from "@/i18n/en-US";
 import DeckEditor from "@/pages/DeckEditor";
 
 export function meta() {
-  return [{ title: "Editor — Slides" }];
+  return [{ title: messages.raw.routeEditorTitle }];
 }
 
 export default function DeckEditorRoute() {

package/corpus/templates/slides/app/routes/design-systems.tsx

@@ -1,7 +1,8 @@
+import messages from "@/i18n/en-US";
 import DesignSystems from "@/pages/DesignSystems";
 
 export function meta() {
-  return [{ title: "Design Systems - Slides" }];
+  return [{ title: messages.raw.routeDesignSystemsTitle }];
 }
 
 export default function DesignSystemsRoute() {

package/corpus/templates/slides/app/routes/settings.tsx

@@ -16,11 +16,12 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
+import messages from "@/i18n/en-US";
 
 import changelog from "../../CHANGELOG.md?raw";
 
 export function meta() {
-  return [{ title: "Settings - Slides" }];
+  return [{ title: messages.raw.routeSettingsTitle }];
 }
 
 export default function SettingsRoute() {

package/corpus/templates/slides/app/routes/share.$token.tsx

@@ -2,6 +2,7 @@ import type { SharedDeckResponse } from "@shared/api";
 import type { LoaderFunctionArgs } from "react-router";
 import { useLoaderData } from "react-router";
 
+import messages from "@/i18n/en-US";
 import SharedPresentation from "@/pages/SharedPresentation";
 
 type LoaderData =
@@ -47,7 +48,7 @@ export async function loader({
 }
 
 export function meta() {
-  return [{ title: "Shared Presentation" }];
+  return [{ title: messages.raw.routeSharedTitle }];
 }
 
 export default function SharedPresentationRoute() {

package/corpus/templates/slides/app/routes/slide.tsx

@@ -2,6 +2,7 @@ import {
   appBasePath,
   isInAgentEmbed,
   postNavigate,
+  useT,
 } from "@agent-native/core/client";
 import { IconExternalLink } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
@@ -9,18 +10,20 @@ import { useSearchParams } from "react-router";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { Slide } from "@/context/DeckContext";
+import messages from "@/i18n/en-US";
 import type { AspectRatio } from "@/lib/aspect-ratios";
 
 export function meta() {
-  return [{ title: "Slide Preview" }];
+  return [{ title: messages.raw.slidePreviewTitle }];
 }
 
 function SlideError({ message }: { message: string }) {
+  const t = useT();
   return (
     <div className="flex h-screen w-screen items-center justify-center bg-black">
       <div className="text-center">
         <div className="text-sm font-medium text-white/60">
-          Slide unavailable
+          {t("raw.slideUnavailable")}
         </div>
         <div className="mt-1 text-xs text-white/35">{message}</div>
       </div>
@@ -29,6 +32,7 @@ function SlideError({ message }: { message: string }) {
 }
 
 export default function SlideRoute() {
+  const t = useT();
   const [params] = useSearchParams();
   const deckId = params.get("deckId");
   const slideNumberParam = params.get("slideNumber");
@@ -90,10 +94,12 @@ export default function SlideRoute() {
         setLoading(false);
       })
       .catch((err: unknown) => {
-        setError(err instanceof Error ? err.message : "Could not load slide.");
+        setError(
+          err instanceof Error ? err.message : t("raw.couldNotLoadSlide"),
+        );
         setLoading(false);
       });
-  }, [deckId, slideIndex, slideIndexParam, slideNumber, slideNumberParam]);
+  }, [deckId, slideIndex, slideIndexParam, slideNumber, slideNumberParam, t]);
 
   if (loading) {
     return <div className="h-screen w-screen bg-black" />;
@@ -121,7 +127,7 @@ export default function SlideRoute() {
           className="absolute bottom-3 right-3 z-10 flex items-center gap-1.5 rounded-md bg-white/10 px-2.5 py-1.5 text-xs font-medium text-white/70 backdrop-blur-sm hover:bg-white/20 hover:text-white"
         >
           <IconExternalLink className="h-3.5 w-3.5" />
-          Open in app
+          {t("raw.openInApp")}
         </button>
       )}
     </div>

package/corpus/templates/slides/app/routes/team.tsx

@@ -1,17 +1,20 @@
+import { useT } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
 
 import { useSetPageTitle } from "@/components/layout/HeaderActions";
+import messages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Team — Slides" }];
+  return [{ title: messages.raw.routeTeamTitle }];
 }
 
 export default function TeamRoute() {
-  useSetPageTitle("Team");
+  const t = useT();
+  useSetPageTitle(t("navigation.team"));
   return (
     <div className="flex-1 overflow-y-auto">
       <main className="max-w-6xl mx-auto px-4 sm:px-6 py-6 sm:py-10">
-        <TeamPage createOrgDescription="Set up a team to share presentations with your colleagues." />
+        <TeamPage createOrgDescription={t("raw.teamDescription")} />
       </main>
     </div>
   );

package/corpus/templates/videos/app/components/CameraControls.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconArrowLeftRight,
   IconArrowsUpDown,
@@ -87,6 +88,7 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
   onSeek,
   durationInFrames = 240,
 }) => {
+  const t = useT();
   const [localState, setLocalState] = useState<CameraState>(DEFAULT_CAMERA);
   const [isOnKeyframe, setIsOnKeyframe] = useState(false);
   const [keyframeCount, setKeyframeCount] = useState(0);
@@ -279,9 +281,11 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
       {/* Keyframe status message */}
       {!isOnKeyframe && (
         <div className="text-center py-6 px-4 bg-muted/30 rounded-lg border border-dashed border-border">
-          <p className="text-xs text-muted-foreground">No keyframe selected</p>
+          <p className="text-xs text-muted-foreground">
+            {t("raw.camera.noKeyframeSelected")}
+          </p>
           <p className="text-xs text-muted-foreground/60 mt-1">
-            Use the camera toolbar above the video to create keyframes
+            {t("raw.camera.createKeyframesHelp")}
           </p>
         </div>
       )}
@@ -303,7 +307,7 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
             <div className="space-y-1.5">
               <Label className="text-xs text-muted-foreground flex items-center gap-1.5">
                 <IconArrowLeftRight className="w-3 h-3" />
-                Pan X
+                {t("raw.camera.panX")}
               </Label>
               <input
                 type="number"
@@ -322,7 +326,7 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
             <div className="space-y-1.5">
               <Label className="text-xs text-muted-foreground flex items-center gap-1.5">
                 <IconArrowsUpDown className="w-3 h-3" />
-                Pan Y
+                {t("raw.camera.panY")}
               </Label>
               <input
                 type="number"
@@ -341,7 +345,7 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
             <div className="space-y-1.5">
               <Label className="text-xs text-muted-foreground flex items-center gap-1.5">
                 <IconRotateClockwise2 className="w-3 h-3" />
-                Tilt X
+                {t("raw.camera.tiltX")}
               </Label>
               <input
                 type="number"
@@ -363,7 +367,7 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
                   className="w-3 h-3"
                   style={{ transform: "rotate(90deg)" }}
                 />
-                Tilt Y
+                {t("raw.camera.tiltY")}
               </Label>
               <input
                 type="number"
@@ -429,7 +433,7 @@ export const CameraControls: React.FC<CameraControlsProps> = ({
             onDuplicate={handleDuplicateKeyframe}
             onReset={handleResetToDefaults}
             onRemove={removeKeyframe}
-            resetTooltip="Reset camera to default view for this keyframe"
+            resetTooltip={t("raw.camera.resetToDefaultView")}
           />
         </div>
       )}

package/corpus/templates/videos/app/components/CameraToolbar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconCamera,
   IconArrowsMove,
@@ -63,6 +64,7 @@ export const CameraToolbar: React.FC<CameraToolbarProps> = ({
   durationInFrames = 240,
   videoContainerRef,
 }) => {
+  const t = useT();
   // Allow unlimited zoom - high max for flexibility
   const maxZoom = 10;
   const [activeTool, setActiveTool] = useState<CameraTool>("none");
@@ -324,20 +326,20 @@ export const CameraToolbar: React.FC<CameraToolbarProps> = ({
     {
       id: "pan" as const,
       icon: IconArrowsMove,
-      label: "Pan",
-      hint: "Click and drag to move camera",
+      label: t("raw.camera.pan"),
+      hint: t("raw.camera.panHint"),
     },
     {
       id: "zoom" as const,
       icon: IconZoomIn,
-      label: "Zoom",
-      hint: "Drag up/down to zoom",
+      label: t("raw.camera.zoom"),
+      hint: t("raw.camera.zoomHint"),
     },
     {
       id: "tilt" as const,
       icon: IconRotateClockwise2,
-      label: "Tilt",
-      hint: "Drag to rotate 3D",
+      label: t("raw.camera.tilt"),
+      hint: t("raw.camera.tiltHint"),
     },
   ];
 
@@ -379,17 +381,17 @@ export const CameraToolbar: React.FC<CameraToolbarProps> = ({
               className="flex items-center gap-1 px-2 py-1.5 sm:py-1 rounded text-[11px] font-medium bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/30 flex-shrink-0"
             >
               <IconPlus className="w-3.5 h-3.5 sm:w-3 sm:h-3" />
-              <span className="hidden sm:inline">Add Keyframe</span>
+              <span className="hidden sm:inline">
+                {t("raw.camera.addKeyframe")}
+              </span>
             </button>
           </TooltipTrigger>
-          <TooltipContent>
-            Create camera keyframe at current frame
-          </TooltipContent>
+          <TooltipContent>{t("raw.camera.createKeyframe")}</TooltipContent>
         </Tooltip>
 
         {isDragging && (
           <div className="ml-2 text-[11px] text-blue-400 font-mono animate-pulse flex-shrink-0">
-            Adjusting...
+            {t("raw.camera.adjusting")}
           </div>
         )}
       </div>