@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/components/library/folder-tree.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconChevronRight,
   IconFolder,
@@ -75,12 +76,13 @@ export function FolderTree({
   buildPath,
   activeFolderId,
 }: FolderTreeProps) {
+  const t = useT();
   const tree = useMemo(() => buildTree(folders), [folders]);
 
   if (folders.length === 0) {
     return (
       <p className="px-2 py-1 text-[11px] text-muted-foreground/70">
-        No folders yet
+        {t("folderTree.noFolders")}
       </p>
     );
   }
@@ -119,6 +121,7 @@ function FolderItem({
   organizationId,
   spaceId,
 }: FolderItemProps) {
+  const t = useT();
   const [open, setOpen] = useState(true);
   const [renameOpen, setRenameOpen] = useState(false);
   const [renameValue, setRenameValue] = useState(node.name);
@@ -184,7 +187,7 @@ function FolderItem({
               setRenameOpen(true);
             }}
           >
-            <IconEdit className="h-3.5 w-3.5 me-2" /> Rename
+            <IconEdit className="h-3.5 w-3.5 me-2" /> {t("folderTree.rename")}
           </ContextMenuItem>
           <ContextMenuItem
             onSelect={() => {
@@ -192,14 +195,15 @@ function FolderItem({
               setNewOpen(true);
             }}
           >
-            <IconFolderPlus className="h-3.5 w-3.5 me-2" /> New subfolder
+            <IconFolderPlus className="h-3.5 w-3.5 me-2" />{" "}
+            {t("folderTree.newSubfolder")}
           </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem
             onSelect={() => setConfirmDelete(true)}
             className="text-destructive"
           >
-            <IconTrash className="h-3.5 w-3.5 me-2" /> Delete
+            <IconTrash className="h-3.5 w-3.5 me-2" /> {t("folderTree.delete")}
           </ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
@@ -224,7 +228,7 @@ function FolderItem({
       <AlertDialog open={renameOpen} onOpenChange={setRenameOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Rename folder</AlertDialogTitle>
+            <AlertDialogTitle>{t("folderTree.renameFolder")}</AlertDialogTitle>
           </AlertDialogHeader>
           <input
             autoFocus
@@ -233,7 +237,7 @@ function FolderItem({
             className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
           />
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => {
                 const name = renameValue.trim();
@@ -241,15 +245,15 @@ function FolderItem({
                 renameFolder.mutate(
                   { id: node.id, name },
                   {
-                    onSuccess: () => toast.success("Folder renamed"),
+                    onSuccess: () => toast.success(t("folderTree.renamed")),
                     onError: (err: any) =>
-                      toast.error(err?.message ?? "Rename failed"),
+                      toast.error(err?.message ?? t("folderTree.renameFailed")),
                   },
                 );
                 setRenameOpen(false);
               }}
             >
-              Save
+              {t("common.save")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -259,20 +263,20 @@ function FolderItem({
       <AlertDialog open={newOpen} onOpenChange={setNewOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>New subfolder</AlertDialogTitle>
+            <AlertDialogTitle>{t("folderTree.newSubfolder")}</AlertDialogTitle>
             <AlertDialogDescription>
-              Create a folder inside "{node.name}".
+              {t("folderTree.createInside", { name: node.name })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <input
             autoFocus
             value={newValue}
             onChange={(e) => setNewValue(e.target.value)}
-            placeholder="Folder name"
+            placeholder={t("folderTree.folderName")}
             className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
           />
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={() => {
                 const name = newValue.trim();
@@ -285,15 +289,15 @@ function FolderItem({
                     parentId: node.id,
                   },
                   {
-                    onSuccess: () => toast.success("Folder created"),
+                    onSuccess: () => toast.success(t("folderTree.created")),
                     onError: (err: any) =>
-                      toast.error(err?.message ?? "Create failed"),
+                      toast.error(err?.message ?? t("folderTree.createFailed")),
                   },
                 );
                 setNewOpen(false);
               }}
             >
-              Create
+              {t("common.create")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -303,30 +307,28 @@ function FolderItem({
       <AlertDialog open={confirmDelete} onOpenChange={setConfirmDelete}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete folder?</AlertDialogTitle>
+            <AlertDialogTitle>{t("folderTree.deleteFolder")}</AlertDialogTitle>
             <AlertDialogDescription>
-              Recordings inside will move to the parent scope (library root or
-              the parent folder). Nested subfolders are removed. This cannot be
-              undone.
+              {t("folderTree.deleteDescription")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
               onClick={() => {
                 deleteFolder.mutate(
                   { id: node.id },
                   {
-                    onSuccess: () => toast.success("Folder deleted"),
+                    onSuccess: () => toast.success(t("folderTree.deleted")),
                     onError: (err: any) =>
-                      toast.error(err?.message ?? "Delete failed"),
+                      toast.error(err?.message ?? t("folderTree.deleteFailed")),
                   },
                 );
                 setConfirmDelete(false);
               }}
             >
-              Delete
+              {t("folderTree.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/corpus/templates/clips/app/components/library/library-grid.tsx

@@ -2,17 +2,30 @@ import {
   getBrowserTabId,
   sendToAgentChat,
   setClientAppState,
+  useSession,
+  useT,
 } from "@agent-native/core/client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { ShareRecordingDialog } from "@/components/player/share-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { isDefaultTitle } from "@/hooks/use-auto-title";
 import {
   useFolders,
   useRecordings,
   useTrashRecording,
   useArchiveRecording,
   useRestoreRecording,
+  useRenameRecording,
   useMoveRecording,
   type ListRecordingsArgs,
   type RecordingSummary,
@@ -93,10 +106,14 @@ export function LibraryGrid({
   onClearTag,
   extraActions,
 }: LibraryGridProps) {
+  const t = useT();
   const [sort, setSort] = useState<SortKey>("recent");
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const selectionMode = selected.size > 0;
+  const [renamingRec, setRenamingRec] = useState<RecordingSummary | null>(null);
+  const [renameValue, setRenameValue] = useState("");
   const [sharingRec, setSharingRec] = useState<RecordingSummary | null>(null);
+  const renameInputRef = useRef<HTMLInputElement>(null);
   const [isBulkPending, setIsBulkPending] = useState(false);
   const selectionStateKey = useMemo(() => `selection:${getBrowserTabId()}`, []);
 
@@ -113,10 +130,13 @@ export function LibraryGrid({
 
   const { data, isLoading } = useRecordings(args);
   const recordings = data?.recordings ?? [];
+  const { session } = useSession();
+  const currentUserEmail = session?.email?.toLowerCase();
 
   const trashRecording = useTrashRecording();
   const archiveRecording = useArchiveRecording();
   const restoreRecording = useRestoreRecording();
+  const renameRecording = useRenameRecording();
   const moveRecording = useMoveRecording();
   const canMoveSelection = view === "library" || view === "space";
   const { data: scopedFolders } = useFolders(
@@ -140,10 +160,12 @@ export function LibraryGrid({
               }),
             ),
             folderId ?? null,
-            view === "space" ? "Space root" : "Library root",
+            view === "space"
+              ? t("libraryGrid.spaceRoot")
+              : t("libraryGrid.libraryRoot"),
           )
         : [],
-    [canMoveSelection, folderId, scopedFolders, view],
+    [canMoveSelection, folderId, scopedFolders, t, view],
   );
 
   useEffect(() => {
@@ -194,17 +216,41 @@ export function LibraryGrid({
         ids: selectedIds,
         folderId: targetFolderId,
       });
-      toast.success(
-        `${selectedIds.length} clip${selectedIds.length === 1 ? "" : "s"} moved`,
-      );
+      toast.success(t("libraryGrid.clipsMoved", { count: selectedIds.length }));
       clearSelection();
     } catch (err: any) {
-      toast.error(err?.message ?? "Failed to move clips");
+      toast.error(err?.message ?? t("libraryGrid.moveFailed"));
     } finally {
       setIsBulkPending(false);
     }
   };
 
+  const openRenameDialog = (rec: RecordingSummary) => {
+    setRenamingRec(rec);
+    setRenameValue(isDefaultTitle(rec.title) ? "" : (rec.title ?? ""));
+    // Focus the input after dialog opens
+    setTimeout(() => renameInputRef.current?.select(), 50);
+  };
+
+  const submitRename = () => {
+    if (!renamingRec) return;
+    const trimmed = renameValue.trim();
+    if (!trimmed) {
+      toast.error(t("libraryGrid.titleRequired"));
+      return;
+    }
+    renameRecording.mutate(
+      { id: renamingRec.id, title: trimmed },
+      {
+        onSuccess: () => {
+          toast.success(t("libraryGrid.clipRenamed"));
+          setRenamingRec(null);
+        },
+        onError: () => toast.error(t("libraryGrid.renameFailed")),
+      },
+    );
+  };
+
   const chips: FilterChip[] = [];
   if (tagFilter) {
     chips.push({
@@ -241,6 +287,48 @@ export function LibraryGrid({
         />
       )}
 
+      {/* Rename dialog */}
+      <Dialog
+        open={!!renamingRec}
+        onOpenChange={(open) => {
+          if (!open) setRenamingRec(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t("libraryGrid.renameClip")}</DialogTitle>
+          </DialogHeader>
+          <Input
+            ref={renameInputRef}
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") submitRename();
+            }}
+            placeholder={t("libraryGrid.clipTitle")}
+            className="mt-1"
+            autoFocus
+          />
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setRenamingRec(null)}
+              disabled={renameRecording.isPending}
+            >
+              {t("common.cancel")}
+            </Button>
+            <Button
+              onClick={submitRename}
+              disabled={renameRecording.isPending || !renameValue.trim()}
+            >
+              {renameRecording.isPending
+                ? t("common.saving")
+                : t("common.save")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
       {/* Page header — rendered into the top app bar */}
       <PageHeader>
         <div className="min-w-0 flex-1">
@@ -287,6 +375,16 @@ export function LibraryGrid({
                   selectionMode={selectionMode}
                   onToggleSelect={toggleSelect}
                   onShare={(rec) => setSharingRec(rec)}
+                  canRenameTitle={
+                    !!currentUserEmail &&
+                    r.ownerEmail.toLowerCase() === currentUserEmail
+                  }
+                  onRename={
+                    currentUserEmail &&
+                    r.ownerEmail.toLowerCase() === currentUserEmail
+                      ? openRenameDialog
+                      : undefined
+                  }
                   onMove={(rec) => {
                     sendToAgentChat({
                       message: `Move the clip "${rec.title}" (id: ${rec.id}) to a folder. Ask me which folder to move it to, or list available folders.`,
@@ -297,7 +395,8 @@ export function LibraryGrid({
                     trashRecording.mutate(
                       { id: rec.id },
                       {
-                        onSuccess: () => toast.success("Moved to trash"),
+                        onSuccess: () =>
+                          toast.success(t("libraryGrid.movedToTrash")),
                       },
                     );
                   }}
@@ -307,14 +406,15 @@ export function LibraryGrid({
                         { id: rec.id },
                         {
                           onSuccess: () =>
-                            toast.success("Restored from archive"),
+                            toast.success(t("libraryGrid.restoredFromArchive")),
                         },
                       );
                     } else {
                       archiveRecording.mutate(
                         { id: rec.id },
                         {
-                          onSuccess: () => toast.success("Archived"),
+                          onSuccess: () =>
+                            toast.success(t("libraryGrid.archived")),
                         },
                       );
                     }
@@ -345,7 +445,9 @@ export function LibraryGrid({
                     const failed = ids.length - succeededIds.length;
                     if (succeededIds.length > 0) {
                       toast.success(
-                        `${succeededIds.length} clip${succeededIds.length === 1 ? "" : "s"} archived`,
+                        t("libraryGrid.clipsArchived", {
+                          count: succeededIds.length,
+                        }),
                       );
                       setSelected((prev) => {
                         const next = new Set(prev);
@@ -355,7 +457,7 @@ export function LibraryGrid({
                     }
                     if (failed > 0) {
                       toast.error(
-                        `${failed} clip${failed === 1 ? "" : "s"} could not be archived`,
+                        t("libraryGrid.clipsArchiveFailed", { count: failed }),
                       );
                     }
                   } finally {
@@ -375,7 +477,9 @@ export function LibraryGrid({
                     const failed = ids.length - succeededIds.length;
                     if (succeededIds.length > 0) {
                       toast.success(
-                        `${succeededIds.length} clip${succeededIds.length === 1 ? "" : "s"} moved to trash`,
+                        t("libraryGrid.clipsMovedToTrash", {
+                          count: succeededIds.length,
+                        }),
                       );
                       setSelected((prev) => {
                         const next = new Set(prev);
@@ -385,7 +489,7 @@ export function LibraryGrid({
                     }
                     if (failed > 0) {
                       toast.error(
-                        `${failed} clip${failed === 1 ? "" : "s"} could not be moved to trash`,
+                        t("libraryGrid.clipsTrashFailed", { count: failed }),
                       );
                     }
                   } finally {

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -585,7 +585,9 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                       <IconX className="h-4 w-4" />
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>I already have it</TooltipContent>
+                  <TooltipContent>
+                    {t("clipsFinalRaw.alreadyHaveIt")}
+                  </TooltipContent>
                 </Tooltip>
               </div>
             )}

package/corpus/templates/clips/app/components/library/organization-switcher.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   useOrg,
   useSwitchOrg,
@@ -36,6 +37,7 @@ interface OrganizationSwitcherProps {
 }
 
 export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
+  const t = useT();
   const [createOpen, setCreateOpen] = useState(false);
   const [newName, setNewName] = useState("");
 
@@ -67,11 +69,12 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
             </div>
             <div className="min-w-0 flex-1">
               <div className="text-xs font-semibold text-foreground truncate">
-                {currentName ?? "No organization"}
+                {currentName ?? t("organizationSwitcher.noOrganization")}
               </div>
               <div className="text-[10px] text-muted-foreground truncate">
-                {orgs.length} organization
-                {orgs.length === 1 ? "" : "s"}
+                {t("organizationSwitcher.organizationCount", {
+                  count: orgs.length,
+                })}
               </div>
             </div>
             <IconChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
@@ -79,12 +82,14 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="w-64">
           <DropdownMenuLabel className="text-[10px] uppercase tracking-wide text-muted-foreground">
-            Organizations
+            {t("organizationSwitcher.organizations")}
           </DropdownMenuLabel>
           {orgs.length === 0 && (
             <DropdownMenuItem disabled>
               <IconBuilding className="h-3.5 w-3.5 me-2" />
-              <span className="text-xs">No organizations yet</span>
+              <span className="text-xs">
+                {t("organizationSwitcher.noOrganizations")}
+              </span>
             </DropdownMenuItem>
           )}
           {orgs.map((o) => (
@@ -95,7 +100,7 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
                 switchOrg.mutate(o.orgId, {
                   onError: (err: any) =>
                     toast.error(
-                      err?.message ?? "Failed to switch organization",
+                      err?.message ?? t("organizationSwitcher.switchFailed"),
                     ),
                 });
               }}
@@ -113,7 +118,9 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => setCreateOpen(true)}>
             <IconPlus className="h-3.5 w-3.5 me-2" />
-            <span className="text-xs">New organization</span>
+            <span className="text-xs">
+              {t("organizationSwitcher.newOrganization")}
+            </span>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
@@ -121,17 +128,19 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
       <AlertDialog open={createOpen} onOpenChange={setCreateOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Create organization</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("organizationSwitcher.createOrganization")}
+            </AlertDialogTitle>
           </AlertDialogHeader>
           <input
             autoFocus
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
-            placeholder="Organization name"
+            placeholder={t("organizationSwitcher.organizationName")}
             className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30"
           />
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               disabled={createOrg.isPending}
               onClick={() => {
@@ -139,18 +148,20 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
                 if (!name) return;
                 createOrg.mutate(name, {
                   onSuccess: () => {
-                    toast.success(`Created "${name}"`);
+                    toast.success(t("organizationSwitcher.created", { name }));
                     setCreateOpen(false);
                     setNewName("");
                   },
                   onError: (err: any) =>
                     toast.error(
-                      err?.message ?? "Failed to create organization",
+                      err?.message ?? t("organizationSwitcher.createFailed"),
                     ),
                 });
               }}
             >
-              {createOrg.isPending ? "Creating…" : "Create"}
+              {createOrg.isPending
+                ? t("organizationSwitcher.creating")
+                : t("common.create")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>