@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/clips/app/components/workspace/invite-dialog.tsx

@@ -1,4 +1,4 @@
-import { useActionMutation } from "@agent-native/core/client";
+import { useActionMutation, useT } from "@agent-native/core/client";
 import { IconMailFast, IconUserPlus } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
@@ -43,6 +43,7 @@ function isValidEmail(s: string): boolean {
 }
 
 export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [emailsRaw, setEmailsRaw] = useState("");
   const [role, setRole] = useState<InviteRole>("member");
@@ -56,13 +57,15 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
     e.preventDefault();
     const emails = parseEmails(emailsRaw);
     if (!emails.length) {
-      toast.error("Enter at least one email address.");
+      toast.error(t("inviteDialog.enterEmail"));
       return;
     }
 
     const invalid = emails.filter((e) => !isValidEmail(e));
     if (invalid.length) {
-      toast.error(`Invalid email(s): ${invalid.join(", ")}`);
+      toast.error(
+        t("inviteDialog.invalidEmails", { emails: invalid.join(", ") }),
+      );
       return;
     }
 
@@ -75,14 +78,20 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
       } catch (err) {
         fail += 1;
         toast.error(
-          `${email}: ${err instanceof Error ? err.message : "Failed"}`,
+          t("inviteDialog.emailFailed", {
+            email,
+            message:
+              err instanceof Error ? err.message : t("inviteDialog.failed"),
+          }),
         );
       }
     }
 
     if (ok > 0) {
       toast.success(
-        `Sent ${ok} invite${ok === 1 ? "" : "s"}${fail ? `, ${fail} failed` : ""}.`,
+        fail
+          ? t("inviteDialog.sentWithFailures", { sent: ok, failed: fail })
+          : t("inviteDialog.sent", { count: ok }),
       );
       qc.invalidateQueries({
         queryKey: ["action", "list-organization-state"],
@@ -102,20 +111,17 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
           className="bg-primary hover:bg-primary/90 text-primary-foreground"
         >
           <IconUserPlus className="size-4 me-1.5" />
-          Invite members
+          {t("inviteDialog.title")}
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Invite members</DialogTitle>
-          <DialogDescription>
-            Paste one or more emails separated by commas or new lines. Invites
-            expire in 7 days.
-          </DialogDescription>
+          <DialogTitle>{t("inviteDialog.title")}</DialogTitle>
+          <DialogDescription>{t("inviteDialog.description")}</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-1.5">
-            <Label htmlFor="emails">Emails</Label>
+            <Label htmlFor="emails">{t("inviteDialog.emails")}</Label>
             <Textarea
               id="emails"
               value={emailsRaw}
@@ -128,7 +134,7 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
             />
           </div>
           <div className="space-y-1.5">
-            <Label htmlFor="role">Role</Label>
+            <Label htmlFor="role">{t("organizationSettings.role")}</Label>
             <Select
               value={role}
               onValueChange={(v) => setRole(v as InviteRole)}
@@ -138,9 +144,11 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="member">
-                  Member — record, edit, share
+                  {t("inviteDialog.memberRole")}
+                </SelectItem>
+                <SelectItem value="admin">
+                  {t("inviteDialog.adminRole")}
                 </SelectItem>
-                <SelectItem value="admin">Admin — full control</SelectItem>
               </SelectContent>
             </Select>
           </div>
@@ -151,7 +159,7 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
               onClick={() => setOpen(false)}
               disabled={invite.isPending}
             >
-              Cancel
+              {t("common.cancel")}
             </Button>
             <Button
               type="submit"
@@ -159,7 +167,9 @@ export function InviteDialog({ organizationId, disabled }: InviteDialogProps) {
               className="bg-primary hover:bg-primary/90 text-primary-foreground"
             >
               <IconMailFast className="size-4 me-1.5" />
-              {invite.isPending ? "Sending…" : "Send invites"}
+              {invite.isPending
+                ? t("inviteDialog.sending")
+                : t("inviteDialog.sendInvites")}
             </Button>
           </DialogFooter>
         </form>

package/corpus/templates/clips/app/components/workspace/members-list.tsx

@@ -1,4 +1,4 @@
-import { useActionMutation } from "@agent-native/core/client";
+import { useActionMutation, useT } from "@agent-native/core/client";
 import { IconCrown, IconUserX } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
@@ -56,9 +56,9 @@ function initials(email: string): string {
   return (name || email).slice(0, 2).toUpperCase();
 }
 
-const ROLE_OPTIONS: { value: MemberRole; label: string }[] = [
-  { value: "member", label: "Member" },
-  { value: "admin", label: "Admin" },
+const ROLE_OPTIONS: { value: MemberRole; labelKey: string }[] = [
+  { value: "member", labelKey: "membersList.memberRole" },
+  { value: "admin", labelKey: "membersList.adminRole" },
 ];
 
 export function MembersList({
@@ -68,6 +68,7 @@ export function MembersList({
   currentUserRole,
   disabled,
 }: MembersListProps) {
+  const t = useT();
   const isAdmin = !disabled && currentUserRole === "admin";
   const [pendingRemove, setPendingRemove] = useState<MemberRow | null>(null);
   const qc = useQueryClient();
@@ -88,12 +89,16 @@ export function MembersList({
         email: member.email,
         role,
       });
-      toast.success(`Updated ${member.email}'s role to ${role}`);
+      toast.success(
+        t("membersList.roleUpdated", { email: member.email, role }),
+      );
       qc.invalidateQueries({
         queryKey: ["action", "list-organization-state"],
       });
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to update role");
+      toast.error(
+        err instanceof Error ? err.message : t("membersList.updateFailed"),
+      );
     }
   }
 
@@ -104,13 +109,13 @@ export function MembersList({
         organizationId,
         email: pendingRemove.email,
       });
-      toast.success(`Removed ${pendingRemove.email} from the organization`);
+      toast.success(t("membersList.removed", { email: pendingRemove.email }));
       qc.invalidateQueries({
         queryKey: ["action", "list-organization-state"],
       });
     } catch (err) {
       toast.error(
-        err instanceof Error ? err.message : "Failed to remove member",
+        err instanceof Error ? err.message : t("membersList.removeFailed"),
       );
     } finally {
       setPendingRemove(null);
@@ -120,7 +125,7 @@ export function MembersList({
   if (!members.length) {
     return (
       <div className="py-6 text-center text-sm text-muted-foreground">
-        No members yet.
+        {t("membersList.noMembers")}
       </div>
     );
   }
@@ -131,9 +136,11 @@ export function MembersList({
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Member</TableHead>
-              <TableHead className="w-40">Role</TableHead>
-              <TableHead className="w-32">Joined</TableHead>
+              <TableHead>{t("membersList.member")}</TableHead>
+              <TableHead className="w-40">
+                {t("organizationSettings.role")}
+              </TableHead>
+              <TableHead className="w-32">{t("membersList.joined")}</TableHead>
               {isAdmin ? <TableHead className="w-20"></TableHead> : null}
             </TableRow>
           </TableHeader>
@@ -157,7 +164,7 @@ export function MembersList({
                           ) : null}
                           {isSelf ? (
                             <span className="text-xs text-muted-foreground">
-                              (you)
+                              {t("membersList.you")}
                             </span>
                           ) : null}
                         </div>
@@ -178,7 +185,7 @@ export function MembersList({
                         <SelectContent>
                           {ROLE_OPTIONS.map((opt) => (
                             <SelectItem key={opt.value} value={opt.value}>
-                              {opt.label}
+                              {t(opt.labelKey)}
                             </SelectItem>
                           ))}
                         </SelectContent>
@@ -202,7 +209,9 @@ export function MembersList({
                           size="icon"
                           className="h-8 w-8 text-muted-foreground hover:text-red-600"
                           onClick={() => setPendingRemove(m)}
-                          aria-label={`Remove ${m.email}`}
+                          aria-label={t("membersList.removeMemberLabel", {
+                            email: m.email,
+                          })}
                         >
                           <IconUserX className="size-4" />
                         </Button>
@@ -222,20 +231,22 @@ export function MembersList({
       >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Remove member?</AlertDialogTitle>
+            <AlertDialogTitle>{t("membersList.removeTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
               {pendingRemove
-                ? `${pendingRemove.email} will lose access to this organization. You can always invite them back.`
+                ? t("membersList.removeDescription", {
+                    email: pendingRemove.email,
+                  })
                 : ""}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleRemove}
               className="bg-red-600 hover:bg-red-700"
             >
-              Remove
+              {t("membersList.remove")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/corpus/templates/clips/app/components/workspace/notifications-list.tsx

@@ -1,3 +1,4 @@
+import { useFormatters, useT } from "@agent-native/core/client";
 import {
   IconMessage,
   IconMoodSmile,
@@ -32,20 +33,6 @@ function initials(email: string | null): string {
   return (name || email).slice(0, 2).toUpperCase();
 }
 
-function formatTime(iso: string): string {
-  try {
-    const d = new Date(iso);
-    const now = Date.now();
-    const delta = (now - d.getTime()) / 1000;
-    if (delta < 60) return "just now";
-    if (delta < 60 * 60) return `${Math.floor(delta / 60)}m ago`;
-    if (delta < 60 * 60 * 24) return `${Math.floor(delta / 3600)}h ago`;
-    return d.toLocaleDateString();
-  } catch {
-    return iso;
-  }
-}
-
 function KindIcon({ kind }: { kind: NotificationKind }) {
   const base = "size-4";
   if (kind === "comment")
@@ -59,11 +46,13 @@ function KindIcon({ kind }: { kind: NotificationKind }) {
 }
 
 export function NotificationsList({ items, onReply }: NotificationsListProps) {
+  const t = useT();
+  const { formatDate, formatRelativeTime } = useFormatters();
   if (!items.length) {
     return (
       <div className="text-center py-16 text-sm text-muted-foreground">
         <IconBell className="size-10 mx-auto mb-3 text-muted-foreground/50" />
-        You're all caught up.
+        {t("clipsFinalRaw.allCaughtUp")}
       </div>
     );
   }
@@ -81,16 +70,20 @@ export function NotificationsList({ items, onReply }: NotificationsListProps) {
             <div className="flex items-center gap-2 text-sm">
               <KindIcon kind={item.kind} />
               <span className="font-medium truncate">
-                {item.authorEmail ?? "Someone"}
+                {item.authorEmail ?? t("clipsFinalRaw.someone")}
               </span>
               <span className="text-muted-foreground">
-                {labelFor(item.kind)}
+                {labelFor(item.kind, t)}
               </span>
               <span className="text-muted-foreground truncate">
                 {item.recordingTitle}
               </span>
               <span className="text-muted-foreground/70 ml-auto flex-shrink-0">
-                {formatTime(item.createdAt)}
+                {formatNotificationTime(
+                  item.createdAt,
+                  formatDate,
+                  formatRelativeTime,
+                )}
               </span>
             </div>
             {item.preview ? (
@@ -103,14 +96,14 @@ export function NotificationsList({ items, onReply }: NotificationsListProps) {
                 to={`/r/${item.recordingId}`}
                 className="text-primary hover:underline"
               >
-                View
+                {t("clipsFinalRaw.view")}
               </Link>
               {item.kind === "comment" && onReply ? (
                 <button
                   className="text-primary hover:underline"
                   onClick={() => onReply(item)}
                 >
-                  Reply
+                  {t("clipsFinalRaw.reply")}
                 </button>
               ) : null}
             </div>
@@ -121,17 +114,36 @@ export function NotificationsList({ items, onReply }: NotificationsListProps) {
   );
 }
 
-function labelFor(kind: NotificationKind): string {
+function labelFor(kind: NotificationKind, t: ReturnType<typeof useT>): string {
   switch (kind) {
     case "comment":
-      return "commented on";
+      return t("clipsFinalRaw.commentedOn");
     case "reaction":
-      return "reacted to";
+      return t("clipsFinalRaw.reactedTo");
     case "mention":
-      return "mentioned you in";
+      return t("clipsFinalRaw.mentionedYouIn");
     case "share":
-      return "shared";
+      return t("clipsFinalRaw.shared");
     default:
       return "";
   }
 }
+
+function formatNotificationTime(
+  iso: string,
+  formatDate: ReturnType<typeof useFormatters>["formatDate"],
+  formatRelativeTime: ReturnType<typeof useFormatters>["formatRelativeTime"],
+): string {
+  try {
+    const date = new Date(iso);
+    const delta = (date.getTime() - Date.now()) / 1000;
+    const abs = Math.abs(delta);
+    if (abs < 60) return formatRelativeTime(Math.round(delta), "second");
+    if (abs < 3600) return formatRelativeTime(Math.round(delta / 60), "minute");
+    if (abs < 86400)
+      return formatRelativeTime(Math.round(delta / 3600), "hour");
+    return formatDate(date);
+  } catch {
+    return iso;
+  }
+}

package/corpus/templates/clips/app/components/workspace/top-creators-table.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
   Table,
@@ -25,10 +27,11 @@ function initials(email: string): string {
 }
 
 export function TopCreatorsTable({ rows }: TopCreatorsTableProps) {
+  const t = useT();
   if (!rows.length) {
     return (
       <div className="py-6 text-center text-sm text-muted-foreground">
-        No creators yet.
+        {t("clipsFinalRaw.noCreatorsYet")}
       </div>
     );
   }
@@ -38,10 +41,16 @@ export function TopCreatorsTable({ rows }: TopCreatorsTableProps) {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Creator</TableHead>
-            <TableHead className="text-end w-24">Recordings</TableHead>
-            <TableHead className="text-end w-20">Views</TableHead>
-            <TableHead className="text-end w-28">Engagement</TableHead>
+            <TableHead>{t("clipsFinalRaw.creator")}</TableHead>
+            <TableHead className="text-end w-24">
+              {t("insightsHub.recordings")}
+            </TableHead>
+            <TableHead className="text-end w-20">
+              {t("insightsHub.views")}
+            </TableHead>
+            <TableHead className="text-end w-28">
+              {t("clipsFinalRaw.engagement")}
+            </TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>