@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/clips/app/components/editor/stitch-manager.tsx

@@ -2,6 +2,7 @@ import {
   agentNativePath,
   useActionMutation,
   useActionQuery,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconPuzzle,
@@ -62,10 +63,11 @@ export function StitchManager({
   onOpenChange,
   seedRecordingId,
 }: StitchManagerProps) {
+  const t = useT();
   const [queue, setQueue] = useState<RecordingLite[]>([]);
   const [busy, setBusy] = useState(false);
   const [progress, setProgress] = useState(0);
-  const [title, setTitle] = useState("Stitched recording");
+  const [title, setTitle] = useState(t("stitchManager.defaultTitle"));
   const [dragIndex, setDragIndex] = useState<number | null>(null);
 
   const listQuery = useActionQuery("list-recordings", {});
@@ -116,11 +118,11 @@ export function StitchManager({
 
   const handleCombine = async () => {
     if (queue.length < 2) {
-      toast.error("Pick at least 2 recordings to stitch together");
+      toast.error(t("stitchManager.pickAtLeastTwo"));
       return;
     }
     if (queue.some((r) => !r.videoUrl)) {
-      toast.error("One or more recordings don't have a ready video URL yet");
+      toast.error(t("stitchManager.videoUrlMissing"));
       return;
     }
     setBusy(true);
@@ -142,9 +144,7 @@ export function StitchManager({
       );
       const videoUrl = upload?.url ?? null;
       if (!videoUrl) {
-        throw new Error(
-          "Connect Builder.io or S3-compatible storage before stitching recordings.",
-        );
+        throw new Error(t("stitchManager.connectStorage"));
       }
 
       // 3) Create the stitched recording row.
@@ -155,12 +155,12 @@ export function StitchManager({
         videoUrl,
         durationMs: totalDuration,
       });
-      toast.success(`Stitched recording created`);
+      toast.success(t("stitchManager.created"));
       onOpenChange(false);
       return result;
     } catch (err: any) {
       console.error(err);
-      toast.error(err?.message ?? "Failed to stitch recordings");
+      toast.error(err?.message ?? t("stitchManager.failed"));
     } finally {
       setBusy(false);
       setProgress(0);
@@ -173,19 +173,19 @@ export function StitchManager({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <IconPuzzle className="w-4 h-4 text-primary" />
-            Stitch recordings
+            {t("stitchManager.title")}
           </DialogTitle>
         </DialogHeader>
 
         <div className="grid grid-cols-2 gap-3 min-h-[320px]">
           <div className="flex flex-col border rounded-md">
             <div className="px-3 py-2 text-xs font-medium border-b">
-              Library
+              {t("navigation.library")}
             </div>
             <ScrollArea className="flex-1">
               {available.length === 0 ? (
                 <div className="p-3 text-xs text-muted-foreground">
-                  No other recordings available.
+                  {t("stitchManager.noOtherRecordings")}
                 </div>
               ) : (
                 available.map((r) => (
@@ -216,7 +216,7 @@ export function StitchManager({
 
           <div className="flex flex-col border rounded-md">
             <div className="px-3 py-2 text-xs font-medium border-b flex items-center justify-between">
-              <span>Combine order</span>
+              <span>{t("stitchManager.combineOrder")}</span>
               <span className="text-muted-foreground">
                 {queue.length} ·{" "}
                 {formatMs(queue.reduce((s, r) => s + r.durationMs, 0))}
@@ -225,8 +225,7 @@ export function StitchManager({
             <ScrollArea className="flex-1">
               {queue.length === 0 ? (
                 <div className="p-3 text-xs text-muted-foreground">
-                  Click recordings on the left to add them here. Drag to
-                  reorder.
+                  {t("stitchManager.emptyQueue")}
                 </div>
               ) : (
                 queue.map((r, i) => (
@@ -265,7 +264,9 @@ export function StitchManager({
         </div>
 
         <div className="flex items-center gap-2">
-          <label className="text-xs text-muted-foreground">Title</label>
+          <label className="text-xs text-muted-foreground">
+            {t("stitchManager.titleLabel")}
+          </label>
           <input
             value={title}
             onChange={(e) => setTitle(e.target.value)}
@@ -276,14 +277,15 @@ export function StitchManager({
         {busy && (
           <div className="text-xs text-muted-foreground flex items-center gap-2">
             <IconLoader2 className="w-4 h-4 animate-spin" />
-            Combining with ffmpeg.wasm — {Math.round(progress * 100)}%. Large
-            stitches may take a minute.
+            {t("stitchManager.combining", {
+              progress: Math.round(progress * 100),
+            })}
           </div>
         )}
 
         <DialogFooter>
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t("common.cancel")}
           </Button>
           <Button onClick={handleCombine} disabled={busy || queue.length < 2}>
             {busy ? (
@@ -291,7 +293,7 @@ export function StitchManager({
             ) : (
               <IconPuzzle className="w-4 h-4 mr-1" />
             )}
-            Combine
+            {t("stitchManager.combine")}
           </Button>
         </DialogFooter>
       </DialogContent>

package/corpus/templates/clips/app/components/editor/thumbnail-picker.tsx

@@ -1,4 +1,4 @@
-import { useActionMutation } from "@agent-native/core/client";
+import { useActionMutation, useT } from "@agent-native/core/client";
 import {
   IconPhoto,
   IconPhotoEdit,
@@ -44,6 +44,7 @@ export function ThumbnailPicker({
   durationMs,
   currentThumbnailUrl,
 }: ThumbnailPickerProps) {
+  const t = useT();
   const [tab, setTab] = useState<Tab>("frame");
   const [frameTime, setFrameTime] = useState(0);
   const [gifStart, setGifStart] = useState(0);
@@ -93,7 +94,7 @@ export function ThumbnailPicker({
       setFrameDataUrl(dataUrl);
     } catch (err) {
       console.error(err);
-      toast.error("Failed to capture frame");
+      toast.error(t("thumbnailPicker.failedCapture"));
     }
   };
 
@@ -112,7 +113,7 @@ export function ThumbnailPicker({
       setGifProgress(null);
     } catch (err) {
       console.error(err);
-      toast.error("Failed to generate GIF — try a shorter range");
+      toast.error(t("thumbnailPicker.failedGif"));
       setGifProgress(null);
     }
   };
@@ -147,14 +148,14 @@ export function ThumbnailPicker({
           durationMs: gifDuration,
         });
       } else {
-        toast.error("Nothing to apply yet");
+        toast.error(t("thumbnailPicker.nothingToApply"));
         return;
       }
-      toast.success("Thumbnail updated");
+      toast.success(t("thumbnailPicker.updated"));
       onOpenChange(false);
     } catch (err: any) {
       console.error(err);
-      toast.error(err?.message ?? "Failed to update thumbnail");
+      toast.error(err?.message ?? t("thumbnailPicker.failedUpdate"));
     }
   };
 
@@ -164,7 +165,7 @@ export function ThumbnailPicker({
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <IconPhotoEdit className="w-4 h-4 text-primary" />
-            Thumbnail
+            {t("thumbnailPicker.thumbnail")}
           </DialogTitle>
         </DialogHeader>
 
@@ -172,17 +173,19 @@ export function ThumbnailPicker({
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="upload">
               <IconUpload className="w-4 h-4 mr-1" />
-              Upload
+              {t("thumbnailPicker.upload")}
             </TabsTrigger>
             <TabsTrigger value="frame">
               <IconPhoto className="w-4 h-4 mr-1" />
-              Frame
+              {t("thumbnailPicker.frame")}
+            </TabsTrigger>
+            <TabsTrigger value="gif">
+              {t("thumbnailPicker.animatedGif")}
             </TabsTrigger>
-            <TabsTrigger value="gif">Animated GIF</TabsTrigger>
           </TabsList>
 
           <TabsContent value="upload" className="py-4 space-y-3">
-            <Label>Upload an image</Label>
+            <Label>{t("thumbnailPicker.uploadImage")}</Label>
             <input
               type="file"
               accept="image/*"
@@ -198,13 +201,13 @@ export function ThumbnailPicker({
             {uploadDataUrl ? (
               <img
                 src={uploadDataUrl}
-                alt="Uploaded preview"
+                alt={t("thumbnailPicker.uploadedPreview")}
                 className="max-h-60 rounded border border-border"
               />
             ) : currentThumbnailUrl ? (
               <img
                 src={currentThumbnailUrl}
-                alt="Current thumbnail"
+                alt={t("thumbnailPicker.currentThumbnail")}
                 className="max-h-60 rounded border border-border opacity-60"
               />
             ) : null}
@@ -223,7 +226,9 @@ export function ThumbnailPicker({
                 />
                 <div className="mt-2 space-y-1">
                   <Label className="text-xs">
-                    Frame at {formatMs(frameTime)}
+                    {t("thumbnailPicker.frameAt", {
+                      time: formatMs(frameTime),
+                    })}
                   </Label>
                   <Slider
                     min={0}
@@ -237,21 +242,23 @@ export function ThumbnailPicker({
                     variant="secondary"
                     onClick={handleFrameCapture}
                   >
-                    Capture frame
+                    {t("thumbnailPicker.captureFrame")}
                   </Button>
                 </div>
               </div>
               <div>
-                <Label className="text-xs">Preview</Label>
+                <Label className="text-xs">
+                  {t("thumbnailPicker.preview")}
+                </Label>
                 {frameDataUrl ? (
                   <img
                     src={frameDataUrl}
-                    alt="Captured frame"
+                    alt={t("thumbnailPicker.capturedFrame")}
                     className="w-full rounded border border-border mt-1"
                   />
                 ) : (
                   <div className="w-full aspect-video rounded border border-dashed border-border flex items-center justify-center text-xs text-muted-foreground mt-1">
-                    Capture a frame to preview
+                    {t("thumbnailPicker.capturePreview")}
                   </div>
                 )}
               </div>
@@ -271,7 +278,9 @@ export function ThumbnailPicker({
                 <div className="mt-2 space-y-2">
                   <div>
                     <Label className="text-xs">
-                      Start: {formatMs(gifStart)}
+                      {t("thumbnailPicker.start", {
+                        time: formatMs(gifStart),
+                      })}
                     </Label>
                     <Slider
                       min={0}
@@ -283,7 +292,9 @@ export function ThumbnailPicker({
                   </div>
                   <div>
                     <Label className="text-xs">
-                      Duration: {formatMs(gifDuration)}
+                      {t("thumbnailPicker.duration", {
+                        time: formatMs(gifDuration),
+                      })}
                     </Label>
                     <Slider
                       min={500}
@@ -305,22 +316,24 @@ export function ThumbnailPicker({
                         {Math.round(gifProgress * 100)}%
                       </>
                     ) : (
-                      "Generate GIF"
+                      t("thumbnailPicker.generateGif")
                     )}
                   </Button>
                 </div>
               </div>
               <div>
-                <Label className="text-xs">Preview</Label>
+                <Label className="text-xs">
+                  {t("thumbnailPicker.preview")}
+                </Label>
                 {gifDataUrl ? (
                   <img
                     src={gifDataUrl}
-                    alt="Animated thumbnail preview"
+                    alt={t("thumbnailPicker.animatedPreview")}
                     className="w-full rounded border border-border mt-1"
                   />
                 ) : (
                   <div className="w-full aspect-video rounded border border-dashed border-border flex items-center justify-center text-xs text-muted-foreground mt-1">
-                    Generate a GIF to preview
+                    {t("thumbnailPicker.generateGifPreview")}
                   </div>
                 )}
               </div>
@@ -330,7 +343,7 @@ export function ThumbnailPicker({
 
         <DialogFooter>
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t("thumbnailPicker.cancel")}
           </Button>
           <Button
             onClick={handleApply}
@@ -344,7 +357,7 @@ export function ThumbnailPicker({
             {mutation.isPending && (
               <IconLoader2 className="w-4 h-4 mr-1 animate-spin" />
             )}
-            Save thumbnail
+            {t("thumbnailPicker.saveThumbnail")}
           </Button>
         </DialogFooter>
       </DialogContent>

package/corpus/templates/clips/app/components/editor/transcript-editor.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconScissors } from "@tabler/icons-react";
 import { useMemo, useRef, useState } from "react";
 
@@ -51,6 +52,7 @@ export function TranscriptEditor({
   onTrimRange,
   className,
 }: TranscriptEditorProps) {
+  const t = useT();
   const rootRef = useRef<HTMLDivElement | null>(null);
   const [selection, setSelection] = useState<Selection | null>(null);
 
@@ -121,14 +123,16 @@ export function TranscriptEditor({
     <div className={cn("flex flex-col h-full min-h-0", className)}>
       <div className="flex items-center justify-between gap-3 border-b border-border px-3 py-2 text-xs text-muted-foreground">
         <div>
-          Transcript{" "}
+          {t("transcriptEditor.transcript")}{" "}
           {selection ? (
             <span className="text-foreground">
-              · selection {formatMs(selection.startMs)} →{" "}
-              {formatMs(selection.endMs)}
+              {t("transcriptEditor.selectionRange", {
+                start: formatMs(selection.startMs),
+                end: formatMs(selection.endMs),
+              })}
             </span>
           ) : (
-            <span>· select text to trim</span>
+            <span>{t("transcriptEditor.selectTextToTrim")}</span>
           )}
         </div>
         {selection ? (
@@ -145,7 +149,7 @@ export function TranscriptEditor({
             }}
           >
             <IconScissors className="mr-1 h-3.5 w-3.5" />
-            Cut selection
+            {t("transcriptEditor.cutSelection")}
           </Button>
         ) : null}
       </div>
@@ -159,7 +163,7 @@ export function TranscriptEditor({
       >
         {segments.length === 0 ? (
           <div className="text-muted-foreground text-sm">
-            No transcript yet.
+            {t("transcriptEditor.noTranscript")}
           </div>
         ) : (
           rendered

package/corpus/templates/clips/app/components/library/bulk-action-toolbar.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconArchive, IconFolder, IconTrash, IconX } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
@@ -37,6 +38,7 @@ export function BulkActionToolbar({
   moveTargets = [],
   isPending = false,
 }: BulkActionToolbarProps) {
+  const t = useT();
   if (count === 0) return null;
   const canMove = Boolean(onMove && moveTargets.length > 0);
 
@@ -48,7 +50,7 @@ export function BulkActionToolbar({
       )}
     >
       <span className="pe-2 text-xs font-medium text-foreground">
-        {count} selected
+        {t("clipsFinalRaw.selectedCount", { count })}
       </span>
       <div className="h-4 w-px bg-border" />
       <Button
@@ -58,7 +60,7 @@ export function BulkActionToolbar({
         onClick={onArchive}
         disabled={isPending}
       >
-        <IconArchive className="h-3.5 w-3.5" /> Archive
+        <IconArchive className="h-3.5 w-3.5" /> {t("navigation.archive")}
       </Button>
       {canMove && (
         <DropdownMenu>
@@ -69,11 +71,13 @@ export function BulkActionToolbar({
               className="h-8 gap-1.5"
               disabled={isPending}
             >
-              <IconFolder className="h-3.5 w-3.5" /> Move
+              <IconFolder className="h-3.5 w-3.5" /> {t("clipsFinalRaw.move")}
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="center" side="top" className="w-64">
-            <DropdownMenuLabel>Move {count} selected</DropdownMenuLabel>
+            <DropdownMenuLabel>
+              {t("clipsFinalRaw.moveSelected", { count })}
+            </DropdownMenuLabel>
             <DropdownMenuSeparator />
             {moveTargets.map((target, index) => (
               <DropdownMenuItem
@@ -89,7 +93,7 @@ export function BulkActionToolbar({
                 </span>
                 {target.disabled && (
                   <span className="ms-auto text-xs text-muted-foreground">
-                    Current
+                    {t("clipsFinalRaw.current")}
                   </span>
                 )}
               </DropdownMenuItem>
@@ -104,14 +108,14 @@ export function BulkActionToolbar({
         onClick={onTrash}
         disabled={isPending}
       >
-        <IconTrash className="h-3.5 w-3.5" /> Trash
+        <IconTrash className="h-3.5 w-3.5" /> {t("navigation.trash")}
       </Button>
       <div className="h-4 w-px bg-border mx-1" />
       <button
         type="button"
         onClick={onClear}
         className="rounded p-1 text-muted-foreground hover:bg-accent"
-        aria-label="Clear selection"
+        aria-label={t("clipsFinalRaw.clearSelection")}
       >
         <IconX className="h-3.5 w-3.5" />
       </button>

package/corpus/templates/clips/app/components/library/create-space-dialog.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconLoader2 } from "@tabler/icons-react";
 import { FormEvent, useState } from "react";
 import { toast } from "sonner";
@@ -40,6 +41,7 @@ export function CreateSpaceDialog({
   organizationId,
   onCreated,
 }: CreateSpaceDialogProps) {
+  const t = useT();
   const createSpace = useCreateSpace();
   const [name, setName] = useState("");
   const [color, setColor] = useState(SPACE_COLORS[0]);
@@ -63,13 +65,13 @@ export function CreateSpaceDialog({
       },
       {
         onSuccess: (space) => {
-          toast.success("Space created");
+          toast.success(t("createSpaceDialog.spaceCreated"));
           reset();
           onOpenChange(false);
           onCreated?.(space);
         },
         onError: (err: any) => {
-          toast.error(err?.message ?? "Could not create space");
+          toast.error(err?.message ?? t("createSpaceDialog.createFailed"));
         },
       },
     );
@@ -85,14 +87,14 @@ export function CreateSpaceDialog({
     >
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>New space</DialogTitle>
+          <DialogTitle>{t("createSpaceDialog.newSpace")}</DialogTitle>
           <DialogDescription className="sr-only">
-            Create a space in the current organization.
+            {t("createSpaceDialog.description")}
           </DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-5">
           <div className="space-y-1.5">
-            <Label htmlFor="space-name">Name</Label>
+            <Label htmlFor="space-name">{t("createSpaceDialog.name")}</Label>
             <Input
               id="space-name"
               autoFocus
@@ -104,13 +106,15 @@ export function CreateSpaceDialog({
           </div>
 
           <div className="space-y-2">
-            <Label>Color</Label>
+            <Label>{t("createSpaceDialog.color")}</Label>
             <div className="grid grid-cols-8 gap-2">
               {SPACE_COLORS.map((value) => (
                 <button
                   key={value}
                   type="button"
-                  aria-label={`Use color ${value}`}
+                  aria-label={t("createSpaceDialog.useColor", {
+                    color: value,
+                  })}
                   aria-pressed={color === value}
                   onClick={() => setColor(value)}
                   className={cn(
@@ -130,7 +134,7 @@ export function CreateSpaceDialog({
               onClick={() => onOpenChange(false)}
               disabled={createSpace.isPending}
             >
-              Cancel
+              {t("common.cancel")}
             </Button>
             <Button
               type="submit"
@@ -139,7 +143,7 @@ export function CreateSpaceDialog({
               {createSpace.isPending && (
                 <IconLoader2 className="h-4 w-4 animate-spin" />
               )}
-              Create
+              {t("common.create")}
             </Button>
           </DialogFooter>
         </form>