@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/components/meetings/share-meeting-dialog.tsx

@@ -1,4 +1,4 @@
-import { appPath, useActionQuery } from "@agent-native/core/client";
+import { appPath, useActionQuery, useT } from "@agent-native/core/client";
 import { IconLink, IconMail } from "@tabler/icons-react";
 import { useMemo, type ReactNode } from "react";
 import { toast } from "sonner";
@@ -56,6 +56,7 @@ function ShareMeetingContent({
   meetingId: string;
   meetingTitle?: string;
 }) {
+  const t = useT();
   const shareUrl = useMemo(
     () => `${window.location.origin}${appPath(`/share/meeting/${meetingId}`)}`,
     [meetingId],
@@ -68,7 +69,9 @@ function ShareMeetingContent({
 
   const data = sharesQuery.data;
   const canManage = data?.role === "owner" || data?.role === "admin";
-  const titleText = meetingTitle ? `Share "${meetingTitle}"` : "Share meeting";
+  const titleText = meetingTitle
+    ? t("clipsFinalRaw.shareNamedMeeting", { title: meetingTitle })
+    : t("clipsFinalRaw.shareMeeting");
 
   return (
     <>
@@ -78,11 +81,11 @@ function ShareMeetingContent({
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="link" className="gap-1.5">
             <IconLink size={14} />
-            Link
+            {t("clipsFinalRaw.link")}
           </TabsTrigger>
           <TabsTrigger value="invite" className="gap-1.5">
             <IconMail size={14} />
-            Invite
+            {t("clipsFinalRaw.invite")}
           </TabsTrigger>
         </TabsList>
 
@@ -106,8 +109,8 @@ function ShareMeetingContent({
                 err instanceof Error
                   ? err.message
                   : action === "invite"
-                    ? "Couldn't invite person"
-                    : "Couldn't remove person",
+                    ? t("clipsFinalRaw.inviteFailed")
+                    : t("clipsFinalRaw.removePersonFailed"),
               )
             }
           />
@@ -128,6 +131,7 @@ function LinkTab({
   sharesQuery: SharesQuery;
   canManage: boolean;
 }) {
+  const t = useT();
   const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
     "meeting",
     meetingId,
@@ -147,7 +151,7 @@ function LinkTab({
         onChange={(next) => setResourceVisibility(next)}
       />
 
-      <CopyField label="Share link" value={shareUrl} />
+      <CopyField label={t("clipsFinalRaw.shareLink")} value={shareUrl} />
 
       {!isPublic && canManage ? (
         <MakePublicCard

package/corpus/templates/clips/app/components/meetings/transcript-bubbles.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconNotes } from "@tabler/icons-react";
 import { useEffect, useMemo, useRef } from "react";
 
@@ -63,6 +64,7 @@ export function TranscriptBubbles({
   onSeek,
   registerScrollTo,
 }: TranscriptBubblesProps) {
+  const t = useT();
   const containerRef = useRef<HTMLDivElement>(null);
   const liveEndRef = useRef<HTMLDivElement>(null);
   const userPausedRef = useRef(false);
@@ -116,16 +118,16 @@ export function TranscriptBubbles({
             <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-60" />
             <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500" />
           </span>
-          Listening…
+          {t("transcriptBubbles.listening")}
         </div>
       );
     }
     return (
       <div className="flex flex-col items-center justify-center h-full text-center text-sm text-muted-foreground gap-2 px-6">
         <IconNotes className="h-6 w-6 text-muted-foreground/50" />
-        <span>No transcript yet.</span>
+        <span>{t("transcriptBubbles.noTranscript")}</span>
         <span className="text-xs">
-          The live transcript will appear here once notes start.
+          {t("transcriptBubbles.liveTranscriptDescription")}
         </span>
       </div>
     );
@@ -150,7 +152,9 @@ export function TranscriptBubbles({
                     "text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70 px-1",
                   )}
                 >
-                  {isMe ? "Me" : "Them"}
+                  {isMe
+                    ? t("transcriptBubbles.me")
+                    : t("transcriptBubbles.them")}
                 </div>
                 {group.segments.map(({ seg, index }) => {
                   const clickable = !!recordingId;

package/corpus/templates/clips/app/components/player/access-password-prompt.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconLock } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -15,6 +16,7 @@ export function AccessPasswordPrompt({
   error,
   title,
 }: AccessPasswordPromptProps) {
+  const t = useT();
   const [value, setValue] = useState("");
 
   return (
@@ -23,11 +25,11 @@ export function AccessPasswordPrompt({
         <div className="flex items-center gap-2 text-primary">
           <IconLock className="h-5 w-5" />
           <h1 className="text-lg font-semibold">
-            {title ?? "Password required"}
+            {title ?? t("embedRoute.passwordRequired")}
           </h1>
         </div>
         <p className="text-sm text-muted-foreground">
-          This video is protected. Enter the password to watch.
+          {t("clipsFinalRaw.passwordProtectedDescription")}
         </p>
         <form
           onSubmit={(e) => {
@@ -40,7 +42,7 @@ export function AccessPasswordPrompt({
             type="password"
             value={value}
             onChange={(e) => setValue(e.target.value)}
-            placeholder="Password"
+            placeholder={t("clipsFinalRaw.password")}
             autoFocus
           />
           {error ? <p className="text-xs text-red-500">{error}</p> : null}
@@ -49,7 +51,7 @@ export function AccessPasswordPrompt({
             className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"
             disabled={!value}
           >
-            Unlock
+            {t("clipsFinalRaw.unlock")}
           </Button>
         </form>
       </div>

package/corpus/templates/clips/app/components/player/comments-panel.tsx

@@ -1,4 +1,4 @@
-import { useActionMutation } from "@agent-native/core/client";
+import { useActionMutation, useT } from "@agent-native/core/client";
 import {
   IconSend,
   IconCheck,
@@ -426,6 +426,7 @@ function EmptyCommentsState({
   enableComments: boolean;
   isSharePresentation: boolean;
 }) {
+  const t = useT();
   if (!enableComments) {
     return (
       <div
@@ -436,7 +437,7 @@ function EmptyCommentsState({
             : "p-6",
         )}
       >
-        Comments are disabled for this recording.
+        {t("commentsPanel.disabled")}
       </div>
     );
   }
@@ -455,12 +456,12 @@ function EmptyCommentsState({
         </span>
       </div>
       <p className="text-base font-semibold text-foreground">
-        Be the first to comment
+        {t("commentsPanel.beFirst")}
       </p>
       <p className="mt-2 max-w-[240px] text-sm leading-5 text-muted-foreground">
         {isSharePresentation
-          ? "Leave a note at the top of this panel."
-          : "Leave a note at the current timestamp."}
+          ? t("commentsPanel.leaveNotePanel")
+          : t("commentsPanel.leaveNoteTimestamp")}
       </p>
     </div>
   );
@@ -491,10 +492,11 @@ function CommentComposer({
   onSubmit: () => void;
   onUnauthenticated?: (intent: "comment" | "react") => void;
 }) {
+  const t = useT();
   if (!enableComments) {
     return (
       <div className="border-t border-border p-3 text-xs text-muted-foreground">
-        Comments are disabled for this recording.
+        {t("commentsPanel.disabled")}
       </div>
     );
   }
@@ -512,7 +514,9 @@ function CommentComposer({
               A
             </AvatarFallback>
           </Avatar>
-          <span className="min-w-0 flex-1 truncate">Leave a comment...</span>
+          <span className="min-w-0 flex-1 truncate">
+            {t("commentsPanel.leaveComment")}
+          </span>
           <IconMoodSmile className="size-4 shrink-0 text-muted-foreground" />
         </button>
       );
@@ -521,14 +525,14 @@ function CommentComposer({
     return (
       <div className="flex items-center justify-between gap-3 border-t border-border bg-background p-3">
         <span className="text-xs text-muted-foreground">
-          Sign in to leave a comment.
+          {t("commentsPanel.signInToComment")}
         </span>
         <Button
           size="sm"
           onClick={() => onUnauthenticated("comment")}
           className="shrink-0 bg-primary text-primary-foreground hover:bg-primary/90"
         >
-          Sign in
+          {t("commentsPanel.signIn")}
         </Button>
       </div>
     );
@@ -546,18 +550,19 @@ function CommentComposer({
       {replyTo ? (
         <div className="flex items-center justify-between rounded bg-accent/50 px-2 py-1 text-xs text-muted-foreground">
           <span>
-            Replying to{" "}
+            {t("commentsPanel.replyingTo")}{" "}
             <span className="font-medium text-foreground">
               {displayName(replyTo)}
             </span>
           </span>
           <button onClick={onCancelReply} className="hover:text-foreground">
-            Cancel
+            {t("common.cancel")}
           </button>
         </div>
       ) : !isSharePresentation ? (
         <div className="px-1 text-[11px] text-muted-foreground">
-          Comment at <span className="font-mono">{msToClock(currentMs)}</span>
+          {t("commentsPanel.commentAt")}{" "}
+          <span className="font-mono">{msToClock(currentMs)}</span>
         </div>
       ) : null}
       <div
@@ -577,7 +582,11 @@ function CommentComposer({
         <Textarea
           value={draft}
           onChange={(e) => onDraftChange(e.target.value)}
-          placeholder={replyTo ? "Write a reply..." : "Leave a comment..."}
+          placeholder={
+            replyTo
+              ? t("commentsPanel.writeReply")
+              : t("commentsPanel.leaveComment")
+          }
           className={cn(
             "resize-none text-sm",
             isSharePresentation

package/corpus/templates/clips/app/components/player/delete-recording-menu.tsx

@@ -1,5 +1,5 @@
-import { useActionMutation } from "@agent-native/core/client";
-import { IconDots, IconDownload, IconTrash } from "@tabler/icons-react";
+import { useActionMutation, useT } from "@agent-native/core/client";
+import { IconDots, IconTrash } from "@tabler/icons-react";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 
@@ -18,47 +18,30 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
 interface DeleteRecordingMenuProps {
   recordingId: string;
   onDeleted?: () => void;
-  /** Whether to show the Delete item. Defaults to true. */
-  canDelete?: boolean;
-  /** Whether to show the Download item. Requires `videoUrl`. */
-  canDownload?: boolean;
-  videoUrl?: string | null;
-  recordingTitle?: string | null;
-  videoFormat?: string | null;
-}
-
-function sanitizeFilename(name: string): string {
-  return name.replace(/[^a-z0-9-_]+/gi, "-").toLowerCase() || "clip";
 }
 
 export function DeleteRecordingMenu({
   recordingId,
   onDeleted,
-  canDelete = true,
-  canDownload = false,
-  videoUrl,
-  recordingTitle,
-  videoFormat,
 }: DeleteRecordingMenuProps) {
+  const t = useT();
   const [open, setOpen] = useState(false);
-  const [downloading, setDownloading] = useState(false);
   const trashRecording = useActionMutation<any, { id: string }>(
     "trash-recording",
     {
       onSuccess: () => {
-        toast.success("Clip moved to trash");
+        toast.success(t("deleteRecordingMenu.movedToTrash"));
         setOpen(false);
         onDeleted?.();
       },
       onError: (err: any) =>
-        toast.error(err?.message ?? "Failed to delete clip"),
+        toast.error(err?.message ?? t("deleteRecordingMenu.deleteFailed")),
     },
   );
 
@@ -67,32 +50,6 @@ export function DeleteRecordingMenu({
     trashRecording.mutate({ id: recordingId });
   }, [recordingId, trashRecording]);
 
-  const handleDownload = useCallback(async () => {
-    if (!videoUrl || downloading) return;
-    setDownloading(true);
-    try {
-      const res = await fetch(videoUrl);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const blob = await res.blob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${sanitizeFilename(recordingTitle ?? "clip")}.${videoFormat ?? "mp4"}`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-    } catch {
-      // Cross-origin URLs that block fetch still open in a new tab so the
-      // viewer can save the file from there.
-      window.open(videoUrl, "_blank", "noopener,noreferrer");
-    } finally {
-      setDownloading(false);
-    }
-  }, [videoUrl, recordingTitle, videoFormat, downloading]);
-
-  const showDownload = canDownload && Boolean(videoUrl);
-
   return (
     <AlertDialog
       open={open}
@@ -106,50 +63,36 @@ export function DeleteRecordingMenu({
             variant="ghost"
             size="icon"
             className="shrink-0"
-            aria-label="Clip options"
+            aria-label={t("deleteRecordingMenu.clipOptions")}
           >
             <IconDots className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-44">
-          {showDownload ? (
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                void handleDownload();
-              }}
-              disabled={downloading}
-            >
-              <IconDownload className="mr-2 h-4 w-4" />
-              {downloading ? "Downloading…" : "Download video"}
-            </DropdownMenuItem>
-          ) : null}
-          {showDownload && canDelete ? <DropdownMenuSeparator /> : null}
-          {canDelete ? (
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                setOpen(true);
-              }}
-              className="text-destructive focus:text-destructive"
-            >
-              <IconTrash className="mr-2 h-4 w-4" />
-              Delete
-            </DropdownMenuItem>
-          ) : null}
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              setOpen(true);
+            }}
+            className="text-destructive focus:text-destructive"
+          >
+            <IconTrash className="mr-2 h-4 w-4" />
+            {t("deleteRecordingMenu.delete")}
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Move this clip to trash?</AlertDialogTitle>
+          <AlertDialogTitle>
+            {t("deleteRecordingMenu.moveTitle")}
+          </AlertDialogTitle>
           <AlertDialogDescription>
-            This removes the clip from your library. You can restore it from
-            Trash or delete it forever later.
+            {t("deleteRecordingMenu.moveDescription")}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={trashRecording.isPending}>
-            Cancel
+            {t("common.cancel")}
           </AlertDialogCancel>
           <AlertDialogAction
             disabled={trashRecording.isPending}
@@ -159,7 +102,9 @@ export function DeleteRecordingMenu({
             }}
             className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
           >
-            {trashRecording.isPending ? "Deleting..." : "Move to trash"}
+            {trashRecording.isPending
+              ? t("deleteRecordingMenu.deleting")
+              : t("deleteRecordingMenu.moveToTrash")}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

package/corpus/templates/clips/app/components/player/insights-panel.tsx

@@ -1,4 +1,4 @@
-import { useActionQuery } from "@agent-native/core/client";
+import { useActionQuery, useT } from "@agent-native/core/client";
 import {
   IconEye,
   IconUser,
@@ -37,6 +37,7 @@ interface Insights {
 }
 
 export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
+  const t = useT();
   const q = useActionQuery<Insights>("get-recording-insights", { recordingId });
   const vq = useActionQuery<{ viewers: Insights["topViewers"] }>(
     "list-viewers",
@@ -45,15 +46,19 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
 
   if (q.isLoading) {
     return (
-      <div className="p-4 text-sm text-muted-foreground">Loading insights…</div>
+      <div className="p-4 text-sm text-muted-foreground">
+        {t("recordingInsights.loading")}
+      </div>
     );
   }
   const data = q.data;
-  const viewers: Insights["topViewers"] = vq.data?.viewers ?? [];
+  const viewers = vq.data?.viewers ?? [];
 
   if (!data) {
     return (
-      <div className="p-4 text-sm text-muted-foreground">No data yet.</div>
+      <div className="p-4 text-sm text-muted-foreground">
+        {t("recordingInsights.noData")}
+      </div>
     );
   }
 
@@ -62,29 +67,29 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
       <div className="grid grid-cols-2 gap-3">
         <Stat
           icon={<IconEye className="h-4 w-4" />}
-          label="Views"
+          label={t("recordingInsights.views")}
           value={data.views}
         />
         <Stat
           icon={<IconUser className="h-4 w-4" />}
-          label="Unique viewers"
+          label={t("recordingInsights.uniqueViewers")}
           value={data.uniqueViewers}
         />
         <Stat
           icon={<IconPercentage className="h-4 w-4" />}
-          label="Completion"
+          label={t("recordingInsights.completion")}
           value={`${Math.round(data.completionRate)}%`}
         />
         <Stat
           icon={<IconTarget className="h-4 w-4" />}
-          label="CTA conversion"
+          label={t("recordingInsights.ctaConversion")}
           value={`${Math.round(data.ctaConversionRate)}%`}
         />
       </div>
 
       <div>
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
-          Drop-off
+          {t("recordingInsights.dropOff")}
         </div>
         <div className="h-40 rounded-lg border border-border bg-card p-3">
           <ResponsiveContainer width="100%" height="100%">
@@ -102,7 +107,10 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
               />
               <YAxis stroke="#6b7280" fontSize={10} />
               <ReTooltip
-                formatter={(v) => [`${v} viewers`, "Watching"]}
+                formatter={(v) => [
+                  t("recordingInsights.viewersCount", { count: Number(v) }),
+                  t("recordingInsights.watching"),
+                ]}
                 labelFormatter={(b) =>
                   msCompact(((b as number) / 100) * durationMs)
                 }
@@ -121,17 +129,19 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
 
       <div>
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
-          Recent viewers
+          {t("recordingInsights.recentViewers")}
         </div>
         {viewers.length === 0 ? (
-          <p className="text-sm text-muted-foreground">No viewers yet.</p>
+          <p className="text-sm text-muted-foreground">
+            {t("recordingInsights.noViewers")}
+          </p>
         ) : (
           <div className="flex flex-wrap gap-2">
             {viewers.slice(0, 12).map((v, i) => (
               <div
                 key={i}
                 className="flex items-center gap-2 rounded-full border border-border bg-card pr-3 pl-0.5 py-0.5"
-                title={v.viewerEmail ?? "Anonymous"}
+                title={v.viewerEmail ?? t("recordingInsights.anonymous")}
               >
                 <Avatar className="h-6 w-6">
                   <AvatarFallback className="text-[10px] bg-primary text-primary-foreground">
@@ -140,7 +150,9 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
                 </Avatar>
                 <span className="text-xs">
                   {v.viewerName ||
-                    (v.viewerEmail ? v.viewerEmail.split("@")[0] : "Anon")}
+                    (v.viewerEmail
+                      ? v.viewerEmail.split("@")[0]
+                      : t("recordingInsights.anon"))}
                   <span className="text-muted-foreground ml-1">
                     {Math.round(v.completedPct)}%
                   </span>
@@ -149,7 +161,9 @@ export function InsightsPanel({ recordingId, durationMs }: InsightsPanelProps) {
             ))}
             {viewers.length > 12 ? (
               <span className="text-xs text-muted-foreground self-center">
-                +{viewers.length - 12} more
+                {t("recordingInsights.moreViewers", {
+                  count: viewers.length - 12,
+                })}
               </span>
             ) : null}
           </div>

package/corpus/templates/clips/app/components/player/player-controls.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconPlayerPlay,
   IconPlayerPause,
@@ -64,6 +65,7 @@ export interface PlayerControlsProps {
 }
 
 export function PlayerControls(props: PlayerControlsProps) {
+  const t = useT();
   const {
     isPlaying,
     durationMs,
@@ -199,7 +201,7 @@ export function PlayerControls(props: PlayerControlsProps) {
                 </button>
               </DropdownMenuTrigger>
             </TooltipTrigger>
-            <TooltipContent>Playback speed</TooltipContent>
+            <TooltipContent>{t("playerControls.playbackSpeed")}</TooltipContent>
           </Tooltip>
           <DropdownMenuContent
             align="end"