@agent-native/core 0.77.2 → 0.77.4

package/corpus/templates/clips/app/routes/_app.notifications.tsx

@@ -1,4 +1,8 @@
-import { useActionQuery, useActionMutation } from "@agent-native/core/client";
+import {
+  useActionQuery,
+  useActionMutation,
+  useT,
+} from "@agent-native/core/client";
 import { IconSend } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
@@ -13,9 +17,10 @@ import {
   type NotificationItem,
   type NotificationKind,
 } from "@/components/workspace/notifications-list";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Notifications · Clips" }];
+  return [{ title: enMessages.notificationsRoute.pageTitle }];
 }
 
 function inLast30Days(iso: string): boolean {
@@ -28,6 +33,7 @@ function inLast30Days(iso: string): boolean {
 }
 
 export default function NotificationsRoute() {
+  const t = useT();
   const [filter, setFilter] = useState<"all" | NotificationKind>("all");
   const [replyFor, setReplyFor] = useState<NotificationItem | null>(null);
   const [replyText, setReplyText] = useState("");
@@ -39,9 +45,7 @@ export default function NotificationsRoute() {
 
   const items: NotificationItem[] = useMemo(() => {
     if (aggregated?.items?.length) {
-      return (aggregated.items as NotificationItem[]).filter((it) =>
-        inLast30Days(it.createdAt),
-      );
+      return aggregated.items.filter((it) => inLast30Days(it.createdAt));
     }
     return [];
   }, [aggregated]);
@@ -69,13 +73,15 @@ export default function NotificationsRoute() {
         content,
         threadId: replyFor.id.replace(/^c:/, ""),
       });
-      toast.success("Reply sent");
+      toast.success(t("notificationsRoute.replySent"));
       setReplyText("");
       setReplyFor(null);
       qc.invalidateQueries({ queryKey: ["action", "list-notifications"] });
       qc.invalidateQueries({ queryKey: ["action", "list-comments"] });
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to send");
+      toast.error(
+        err instanceof Error ? err.message : t("notificationsRoute.sendFailed"),
+      );
     }
   }
 
@@ -83,29 +89,36 @@ export default function NotificationsRoute() {
     <>
       <PageHeader>
         <h1 className="text-base font-semibold tracking-tight truncate">
-          Notifications
+          {t("notificationsRoute.title")}
         </h1>
       </PageHeader>
       <div className="p-6 max-w-3xl mx-auto">
         <p className="text-sm text-muted-foreground mb-4">
-          Comments, reactions, mentions, and shares on your recordings in the
-          last 30 days.
+          {t("notificationsRoute.description")}
         </p>
 
         <Tabs value={filter} onValueChange={(v) => setFilter(v as any)}>
           <TabsList>
-            <TabsTrigger value="all">All</TabsTrigger>
-            <TabsTrigger value="comment">Comments</TabsTrigger>
-            <TabsTrigger value="reaction">Reactions</TabsTrigger>
-            <TabsTrigger value="mention">Mentions</TabsTrigger>
-            <TabsTrigger value="share">Shares</TabsTrigger>
+            <TabsTrigger value="all">{t("notificationsRoute.all")}</TabsTrigger>
+            <TabsTrigger value="comment">
+              {t("notificationsRoute.comments")}
+            </TabsTrigger>
+            <TabsTrigger value="reaction">
+              {t("notificationsRoute.reactions")}
+            </TabsTrigger>
+            <TabsTrigger value="mention">
+              {t("notificationsRoute.mentions")}
+            </TabsTrigger>
+            <TabsTrigger value="share">
+              {t("notificationsRoute.shares")}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
 
         <div className="mt-4">
           {isLoading ? (
             <div className="py-16 text-center text-sm text-muted-foreground">
-              Loading…
+              {t("notificationsRoute.loading")}
             </div>
           ) : (
             <NotificationsList items={filtered} onReply={setReplyFor} />
@@ -115,7 +128,9 @@ export default function NotificationsRoute() {
         {replyFor ? (
           <div className="mt-6 rounded-md border bg-muted/30 p-3">
             <div className="text-xs text-muted-foreground mb-1.5">
-              Reply to {replyFor.authorEmail} on{" "}
+              {t("notificationsRoute.replyTo", {
+                email: replyFor.authorEmail,
+              })}{" "}
               <span className="font-medium text-foreground">
                 {replyFor.recordingTitle}
               </span>
@@ -124,7 +139,7 @@ export default function NotificationsRoute() {
               <Input
                 value={replyText}
                 onChange={(e) => setReplyText(e.target.value)}
-                placeholder="Write a reply…"
+                placeholder={t("notificationsRoute.replyPlaceholder")}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey) {
                     e.preventDefault();
@@ -141,7 +156,7 @@ export default function NotificationsRoute() {
                 <IconSend className="size-4" />
               </Button>
               <Button variant="ghost" onClick={() => setReplyFor(null)}>
-                Cancel
+                {t("common.cancel")}
               </Button>
             </div>
           </div>

package/corpus/templates/clips/app/routes/_app.settings._index.tsx

@@ -63,12 +63,13 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { useVideoStorageStatus } from "@/hooks/use-video-storage-status";
+import enMessages from "@/i18n/en-US";
 import { cn } from "@/lib/utils";
 
 import changelog from "../../CHANGELOG.md?raw";
 
 export function meta() {
-  return [{ title: "Settings · Clips" }];
+  return [{ title: enMessages.settings.pageTitle }];
 }
 
 const SPEEDS = ["1", "1.2", "1.5", "1.75", "2"];
@@ -76,37 +77,37 @@ const SPEEDS = ["1", "1.2", "1.5", "1.75", "2"];
 const S3_STORAGE_FIELDS = [
   {
     key: "S3_ENDPOINT",
-    label: "Endpoint URL",
+    labelKey: "settings.s3EndpointLabel",
     placeholder: "https://s3.us-east-1.amazonaws.com",
     required: true,
   },
   {
     key: "S3_BUCKET",
-    label: "Bucket",
+    labelKey: "settings.s3BucketLabel",
     placeholder: "my-clips-bucket",
     required: true,
   },
   {
     key: "S3_ACCESS_KEY_ID",
-    label: "Access key ID",
+    labelKey: "settings.s3AccessKeyLabel",
     placeholder: "AKIA...",
     required: true,
   },
   {
     key: "S3_SECRET_ACCESS_KEY",
-    label: "Secret access key",
+    labelKey: "settings.s3SecretAccessKeyLabel",
     placeholder: "••••••••",
     required: true,
     secret: true,
   },
   {
     key: "S3_REGION",
-    label: "Region",
+    labelKey: "settings.s3RegionLabel",
     placeholder: "us-east-1",
   },
   {
     key: "S3_PUBLIC_BASE_URL",
-    label: "Public base URL",
+    labelKey: "settings.s3PublicBaseUrlLabel",
     placeholder: "https://cdn.example.com",
   },
 ] as const;
@@ -574,7 +575,7 @@ export default function SettingsIndexRoute() {
       }
     } catch (err) {
       toast.error(
-        err instanceof Error ? err.message : "Failed to connect Slack",
+        err instanceof Error ? err.message : t("settings.slackConnectFailed"),
       );
     } finally {
       setConnectingSlack(false);
@@ -592,7 +593,9 @@ export default function SettingsIndexRoute() {
       toast.success(t("settings.slackDisconnectedToast"));
     } catch (err) {
       toast.error(
-        err instanceof Error ? err.message : "Failed to disconnect Slack",
+        err instanceof Error
+          ? err.message
+          : t("settings.slackDisconnectFailed"),
       );
     } finally {
       setDisconnectingSlack(false);
@@ -619,8 +622,7 @@ export default function SettingsIndexRoute() {
   const configuredApiKeyCount = AI_PROVIDER_FIELDS.filter(
     (field) => apiKeyStatus[field.key],
   ).length;
-  const slackInstallations: SlackInstallation[] =
-    slackStatus.data?.installations ?? [];
+  const slackInstallations = slackStatus.data?.installations ?? [];
   const slackOauthConfigured = slackStatus.data?.oauthConfigured ?? false;
   const slackSigningConfigured = slackStatus.data?.signingConfigured ?? false;
   const slackConnected = slackInstallations.length > 0;
@@ -798,7 +800,9 @@ export default function SettingsIndexRoute() {
                         <div className="grid gap-4 sm:grid-cols-2">
                           {S3_STORAGE_FIELDS.map((field) => (
                             <div key={field.key} className="space-y-1.5">
-                              <Label htmlFor={field.key}>{field.label}</Label>
+                              <Label htmlFor={field.key}>
+                                {t(field.labelKey)}
+                              </Label>
                               <Input
                                 id={field.key}
                                 type={

package/corpus/templates/clips/app/routes/_app.settings.organization.tsx

@@ -1,4 +1,4 @@
-import { useActionQuery, useSession } from "@agent-native/core/client";
+import { useActionQuery, useSession, useT } from "@agent-native/core/client";
 import { IconMailFast, IconUsers } from "@tabler/icons-react";
 import { useMemo } from "react";
 
@@ -20,9 +20,10 @@ import {
   MembersList,
   type MemberRole,
 } from "@/components/workspace/members-list";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Organization settings · Clips" }];
+  return [{ title: enMessages.organizationSettings.pageTitle }];
 }
 
 interface OrganizationStateResponse {
@@ -50,6 +51,7 @@ interface OrganizationStateResponse {
 }
 
 export default function OrganizationSettingsRoute() {
+  const t = useT();
   const { session } = useSession();
   const email = session?.email ?? "";
 
@@ -59,8 +61,8 @@ export default function OrganizationSettingsRoute() {
   );
 
   const organization = data?.organization ?? null;
-  const members: OrganizationStateResponse["members"] = data?.members ?? [];
-  const invites: OrganizationStateResponse["invites"] = data?.invites ?? [];
+  const members = data?.members ?? [];
+  const invites = data?.invites ?? [];
 
   const isOwner = !!(
     organization?.ownerEmail && organization.ownerEmail === email
@@ -79,7 +81,7 @@ export default function OrganizationSettingsRoute() {
       <>
         <PageHeader>
           <h1 className="text-base font-semibold tracking-tight truncate">
-            Organization · Settings
+            {t("organizationSettings.title")}
           </h1>
         </PageHeader>
         <div className="p-6 max-w-3xl mx-auto space-y-4">
@@ -96,14 +98,13 @@ export default function OrganizationSettingsRoute() {
       <>
         <PageHeader>
           <h1 className="text-base font-semibold tracking-tight truncate">
-            Organization · Settings
+            {t("organizationSettings.title")}
           </h1>
         </PageHeader>
         <div className="p-6 max-w-2xl mx-auto">
           <Card>
             <CardContent className="py-12 text-center text-sm text-muted-foreground">
-              No organization yet. Create one from the organization switcher to
-              get started.
+              {t("organizationSettings.noOrganization")}
             </CardContent>
           </Card>
         </div>
@@ -115,12 +116,12 @@ export default function OrganizationSettingsRoute() {
     <>
       <PageHeader>
         <h1 className="text-base font-semibold tracking-tight truncate">
-          {organization.name} · Settings
+          {t("organizationSettings.namedTitle", { name: organization.name })}
         </h1>
       </PageHeader>
       <div className="p-6 max-w-3xl mx-auto space-y-6">
         <p className="text-sm text-muted-foreground">
-          Organization admin: branding, members, invites.
+          {t("organizationSettings.description")}
         </p>
 
         {isAdmin ? (
@@ -133,7 +134,9 @@ export default function OrganizationSettingsRoute() {
         ) : (
           <Card>
             <CardHeader>
-              <CardTitle className="text-base">Branding</CardTitle>
+              <CardTitle className="text-base">
+                {t("brandingEditor.title")}
+              </CardTitle>
             </CardHeader>
             <CardContent>
               <div className="flex items-center gap-3">
@@ -144,7 +147,7 @@ export default function OrganizationSettingsRoute() {
                 <div>
                   <div className="font-medium">{organization.name}</div>
                   <div className="text-xs text-muted-foreground">
-                    Only admins can edit branding.
+                    {t("organizationSettings.adminsOnlyBranding")}
                   </div>
                 </div>
               </div>
@@ -156,7 +159,7 @@ export default function OrganizationSettingsRoute() {
           <CardHeader className="flex flex-row items-center justify-between">
             <CardTitle className="text-base flex items-center gap-2">
               <IconUsers className="size-4 text-primary" />
-              Members
+              {t("organizationSettings.members")}
             </CardTitle>
             {isAdmin ? <InviteDialog organizationId={organization.id} /> : null}
           </CardHeader>
@@ -174,22 +177,26 @@ export default function OrganizationSettingsRoute() {
           <CardHeader>
             <CardTitle className="text-base flex items-center gap-2">
               <IconMailFast className="size-4 text-primary" />
-              Pending invites
+              {t("organizationSettings.pendingInvites")}
             </CardTitle>
           </CardHeader>
           <CardContent>
             {invites.length === 0 ? (
               <div className="py-4 text-center text-sm text-muted-foreground">
-                No pending invites.
+                {t("organizationSettings.noPendingInvites")}
               </div>
             ) : (
               <div className="rounded-md border">
                 <Table>
                   <TableHeader>
                     <TableRow>
-                      <TableHead>Email</TableHead>
-                      <TableHead className="w-32">Role</TableHead>
-                      <TableHead className="w-32">Sent</TableHead>
+                      <TableHead>{t("organizationSettings.email")}</TableHead>
+                      <TableHead className="w-32">
+                        {t("organizationSettings.role")}
+                      </TableHead>
+                      <TableHead className="w-32">
+                        {t("organizationSettings.sent")}
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>

package/corpus/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx

@@ -1,14 +1,17 @@
+import { useT } from "@agent-native/core/client";
 import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
 import { useFolders } from "@/hooks/use-library";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Folder · Clips" }];
+  return [{ title: enMessages.clipsFinalRaw.folderPageTitle }];
 }
 
 export default function SpaceFolderRoute() {
+  const t = useT();
   const { spaceId, folderId } = useParams<{
     spaceId: string;
     folderId: string;
@@ -29,7 +32,7 @@ export default function SpaceFolderRoute() {
       spaceId={spaceId}
       folderId={folderId}
       emptyKind="folder"
-      title={folder?.name ?? "Folder"}
+      title={folder?.name ?? t("navigation.folder")}
     />
   );
 }

package/corpus/templates/clips/app/routes/_app.spaces.$spaceId.tsx

@@ -1,15 +1,18 @@
+import { useT } from "@agent-native/core/client";
 import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { FolderTree, type FolderNode } from "@/components/library/folder-tree";
 import { LibraryGrid } from "@/components/library/library-grid";
 import { useFolders, useSpaces, useOrganizations } from "@/hooks/use-library";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Space · Clips" }];
+  return [{ title: enMessages.clipsFinalRaw.spacePageTitle }];
 }
 
 export default function SpaceRoute() {
+  const t = useT();
   const { spaceId } = useParams<{ spaceId: string }>();
   const { data: organizations } = useOrganizations();
   const currentOrganizationId =
@@ -46,16 +49,16 @@ export default function SpaceRoute() {
             >
               {(space as any)?.iconEmoji ??
                 (space as any)?.name?.slice(0, 1).toUpperCase() ??
-                "S"}
+                t("navigation.space").slice(0, 1)}
             </div>
             <span className="text-xs font-semibold text-foreground truncate">
-              {(space as any)?.name ?? "Space"}
+              {(space as any)?.name ?? t("navigation.space")}
             </span>
           </div>
         </div>
         <div className="mt-2">
           <div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            Folders
+            {t("navigation.folders")}
           </div>
           <FolderTree
             folders={folderList}
@@ -72,7 +75,7 @@ export default function SpaceRoute() {
           spaceId={spaceId}
           folderId={null}
           emptyKind="space"
-          title={(space as any)?.name ?? "Space"}
+          title={(space as any)?.name ?? t("navigation.space")}
         />
       </div>
     </div>

package/corpus/templates/clips/app/routes/_app.spaces._index.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPlus, IconUsersGroup } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -7,9 +8,10 @@ import { PageHeader } from "@/components/library/page-header";
 import { SpaceCard, type SpaceCardData } from "@/components/library/space-card";
 import { Button } from "@/components/ui/button";
 import { useSpaces, useOrganizations } from "@/hooks/use-library";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Spaces · Clips" }];
+  return [{ title: enMessages.clipsFinalRaw.spacesPageTitle }];
 }
 
 function Skeleton() {
@@ -25,6 +27,7 @@ function Skeleton() {
 }
 
 export default function SpacesIndexRoute() {
+  const t = useT();
   const [createOpen, setCreateOpen] = useState(false);
   const { data: organizations } = useOrganizations();
   const currentOrganizationId =
@@ -46,7 +49,9 @@ export default function SpacesIndexRoute() {
       <PageHeader>
         <div className="flex items-center gap-2">
           <IconUsersGroup className="h-4 w-4 text-primary" />
-          <h1 className="text-base font-semibold text-foreground">Spaces</h1>
+          <h1 className="text-base font-semibold text-foreground">
+            {t("navigation.spaces")}
+          </h1>
         </div>
         <div className="ml-auto">
           <Button
@@ -54,7 +59,7 @@ export default function SpacesIndexRoute() {
             className="gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90"
             onClick={() => setCreateOpen(true)}
           >
-            <IconPlus className="h-4 w-4" /> New space
+            <IconPlus className="h-4 w-4" /> {t("createSpaceDialog.newSpace")}
           </Button>
         </div>
       </PageHeader>

package/corpus/templates/clips/app/routes/_app.trash.tsx

@@ -19,9 +19,10 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { useRecordings, type RecordingSummary } from "@/hooks/use-library";
+import enMessages from "@/i18n/en-US";
 
 export function meta() {
-  return [{ title: "Trash · Clips" }];
+  return [{ title: enMessages.clipsFinalRaw.trashPageTitle }];
 }
 
 function Skeleton() {