@agent-native/core 0.77.3 → 0.77.6

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

@@ -1,4 +1,5 @@
 import {
+  useT,
   useActionMutation,
   useReconciledState,
 } from "@agent-native/core/client";
@@ -58,6 +59,7 @@ export interface SettingsPanelProps {
 }
 
 export function SettingsPanel(props: SettingsPanelProps) {
+  const t = useT();
   const {
     recording,
     visibility,
@@ -104,7 +106,7 @@ export function SettingsPanel(props: SettingsPanelProps) {
     <div className="flex flex-col h-full bg-background">
       {showHeader ? (
         <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-          <h2 className="text-sm font-medium">Settings</h2>
+          <h2 className="text-sm font-medium">{t("playerSettings.title")}</h2>
           <Button variant="ghost" size="icon" onClick={onClose}>
             <IconX className="h-4 w-4" />
           </Button>
@@ -117,12 +119,12 @@ export function SettingsPanel(props: SettingsPanelProps) {
           <div className="flex items-center gap-2">
             <IconLock className="h-4 w-4 text-muted-foreground" />
             <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Privacy
+              {t("playerSettings.privacy")}
             </h3>
           </div>
 
           <div>
-            <Label className="text-xs">Visibility</Label>
+            <Label className="text-xs">{t("playerSettings.visibility")}</Label>
             <Select
               value={visibility}
               onValueChange={(v) =>
@@ -137,15 +139,23 @@ export function SettingsPanel(props: SettingsPanelProps) {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="private">Private</SelectItem>
-                <SelectItem value="org">Organization</SelectItem>
-                <SelectItem value="public">Public</SelectItem>
+                <SelectItem value="private">
+                  {t("playerSettings.visibilityPrivate")}
+                </SelectItem>
+                <SelectItem value="org">
+                  {t("playerSettings.visibilityOrg")}
+                </SelectItem>
+                <SelectItem value="public">
+                  {t("playerSettings.visibilityPublic")}
+                </SelectItem>
               </SelectContent>
             </Select>
           </div>
 
           <div>
-            <Label className="text-xs">Password protection</Label>
+            <Label className="text-xs">
+              {t("playerSettings.passwordProtection")}
+            </Label>
             <div className="flex gap-2 mt-1">
               <Input
                 type="text"
@@ -153,8 +163,8 @@ export function SettingsPanel(props: SettingsPanelProps) {
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder={
                   recording.hasPassword
-                    ? "Password is set — type to replace, leave empty + Save to clear"
-                    : "No password"
+                    ? t("playerSettings.passwordSetPlaceholder")
+                    : t("playerSettings.noPasswordPlaceholder")
                 }
                 className="flex-1"
               />
@@ -166,14 +176,14 @@ export function SettingsPanel(props: SettingsPanelProps) {
                 }}
                 disabled={update.isPending}
               >
-                Save
+                {t("common.save")}
               </Button>
             </div>
           </div>
 
           <div>
             <Label className="text-xs flex items-center gap-1">
-              <IconClock className="h-3 w-3" /> Expiry
+              <IconClock className="h-3 w-3" /> {t("playerSettings.expiry")}
             </Label>
             <div className="flex gap-2 mt-1">
               <Input
@@ -195,7 +205,7 @@ export function SettingsPanel(props: SettingsPanelProps) {
                 onClick={() => patch({ expiresAt: expiresAt || null })}
                 disabled={update.isPending}
               >
-                Save
+                {t("common.save")}
               </Button>
             </div>
           </div>
@@ -206,29 +216,29 @@ export function SettingsPanel(props: SettingsPanelProps) {
         {/* Toggles */}
         <section className="space-y-3">
           <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Viewer options
+            {t("playerSettings.viewerOptions")}
           </h3>
           <ToggleRow
             icon={<IconMessage className="h-4 w-4" />}
-            label="Comments"
+            label={t("playerSettings.comments")}
             checked={recording.enableComments}
             onChange={(v) => patch({ enableComments: v })}
           />
           <ToggleRow
             icon={<IconMoodSmile className="h-4 w-4" />}
-            label="Reactions"
+            label={t("playerSettings.reactions")}
             checked={recording.enableReactions}
             onChange={(v) => patch({ enableReactions: v })}
           />
           <ToggleRow
             icon={<IconDownload className="h-4 w-4" />}
-            label="Allow downloads"
+            label={t("playerSettings.allowDownloads")}
             checked={recording.enableDownloads}
             onChange={(v) => patch({ enableDownloads: v })}
           />
           <ToggleRow
             icon={<IconPhoto className="h-4 w-4" />}
-            label="Animated thumbnail"
+            label={t("playerSettings.animatedThumbnail")}
             checked={recording.animatedThumbnailEnabled}
             onChange={(v) => patch({ animatedThumbnailEnabled: v })}
           />
@@ -239,7 +249,7 @@ export function SettingsPanel(props: SettingsPanelProps) {
         {/* Default speed */}
         <section className="space-y-2">
           <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-            Default playback speed
+            {t("playerSettings.defaultPlaybackSpeed")}
           </h3>
           <Select
             value={recording.defaultSpeed}
@@ -264,7 +274,7 @@ export function SettingsPanel(props: SettingsPanelProps) {
         <section className="space-y-3">
           <div className="flex items-center justify-between">
             <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              Call to action
+              {t("playerSettings.callToAction")}
             </h3>
             <Button
               size="sm"
@@ -272,20 +282,20 @@ export function SettingsPanel(props: SettingsPanelProps) {
               onClick={() =>
                 createCta.mutate({
                   recordingId: recording.id,
-                  label: "Learn more",
+                  label: t("playerSettings.defaultCtaLabel"),
                   url: "https://example.com",
                   color: "hsl(var(--primary))",
                   placement: "throughout",
                 } as any)
               }
             >
-              + Add
+              {t("playerSettings.addCta")}
             </Button>
           </div>
 
           {ctas.length === 0 ? (
             <p className="text-xs text-muted-foreground">
-              No CTAs yet. Add a button that appears during or after the video.
+              {t("playerSettings.noCtas")}
             </p>
           ) : (
             <div className="space-y-3">
@@ -293,6 +303,7 @@ export function SettingsPanel(props: SettingsPanelProps) {
                 <CtaEditor
                   key={cta.id}
                   cta={cta}
+                  t={t}
                   onSave={(fields) =>
                     updateCta.mutate({ id: cta.id, ...fields } as any)
                   }
@@ -331,6 +342,7 @@ function ToggleRow({
 
 function CtaEditor({
   cta,
+  t,
   onSave,
   onDelete,
 }: {
@@ -341,6 +353,7 @@ function CtaEditor({
     color: string;
     placement: "end" | "throughout";
   };
+  t: ReturnType<typeof useT>;
   onSave: (fields: Record<string, unknown>) => void;
   onDelete: () => void;
 }) {
@@ -377,7 +390,7 @@ function CtaEditor({
       <Input
         value={label}
         onChange={(e) => setLabel(e.target.value)}
-        placeholder="Button label"
+        placeholder={t("playerSettings.buttonLabelPlaceholder")}
       />
       <Input
         value={url}
@@ -399,8 +412,12 @@ function CtaEditor({
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="throughout">Throughout</SelectItem>
-            <SelectItem value="end">At end</SelectItem>
+            <SelectItem value="throughout">
+              {t("playerSettings.placementThroughout")}
+            </SelectItem>
+            <SelectItem value="end">
+              {t("playerSettings.placementEnd")}
+            </SelectItem>
           </SelectContent>
         </Select>
       </div>
@@ -410,10 +427,10 @@ function CtaEditor({
           className="bg-primary hover:bg-primary/90 text-primary-foreground"
           onClick={() => onSave({ label, url, color, placement })}
         >
-          Save
+          {t("common.save")}
         </Button>
         <Button size="sm" variant="ghost" onClick={onDelete}>
-          Delete
+          {t("playerSettings.delete")}
         </Button>
       </div>
     </div>

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

@@ -3,6 +3,7 @@ import {
   appPath,
   useActionQuery,
   useSession,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconCode,
@@ -18,7 +19,6 @@ import {
   MakePublicCard,
   ShareCardHeader,
   SharePeopleTab,
-  VIS_META,
   copyToClipboard,
   useResourceVisibilityMutation,
   type SharesQuery,
@@ -42,9 +42,6 @@ import { buildAgentApiUrls } from "../../../shared/agent-context";
 import { isLoomEmbedUrl } from "../../../shared/loom";
 import { withShareAttribution } from "../../../shared/share-attribution";
 
-const PUBLIC_DESCRIPTION =
-  "Anyone with the link can view — sign in to comment or react";
-
 function absoluteAppUrl(path: string): string {
   if (typeof window === "undefined") return "";
   return new URL(appPath(path), window.location.origin).toString();
@@ -124,11 +121,14 @@ export function ShareRecordingDialog({
   open,
   onOpenChange,
 }: ShareRecordingDialogProps) {
+  const t = useT();
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-[calc(100vw-2rem)] overflow-hidden p-0 sm:max-w-[440px]">
         <DialogTitle className="sr-only">
-          {recordingTitle ? `Share ${recordingTitle}` : "Share recording"}
+          {recordingTitle
+            ? t("shareDialog.sharePlainTitle", { title: recordingTitle })
+            : t("shareDialog.shareRecording")}
         </DialogTitle>
         <ShareRecordingContent
           recordingId={recordingId}
@@ -161,6 +161,7 @@ function ShareRecordingContent({
   hasPassword?: boolean;
   reserveCloseButton?: boolean;
 }) {
+  const t = useT();
   const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
     resourceType: "recording",
     resourceId: recordingId,
@@ -186,8 +187,8 @@ function ShareRecordingContent({
           ownerViaId,
         );
   const titleText = recordingTitle
-    ? `Share "${recordingTitle}"`
-    : "Share recording";
+    ? t("shareDialog.shareTitle", { title: recordingTitle })
+    : t("shareDialog.shareRecording");
 
   return (
     <>
@@ -201,15 +202,15 @@ function ShareRecordingContent({
         <TabsList className="grid w-full grid-cols-3">
           <TabsTrigger value="link" className="gap-1.5">
             <IconLink size={14} />
-            Link
+            {t("shareDialog.link")}
           </TabsTrigger>
           <TabsTrigger value="invite" className="gap-1.5">
             <IconMail size={14} />
-            Invite
+            {t("shareDialog.invite")}
           </TabsTrigger>
           <TabsTrigger value="embed" className="gap-1.5">
             <IconCode size={14} />
-            Embed
+            {t("shareDialog.embed")}
           </TabsTrigger>
         </TabsList>
 
@@ -272,6 +273,7 @@ function LinkTab({
   isLoomRecording?: boolean;
   hasPassword: boolean;
 }) {
+  const t = useT();
   const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
     "recording",
     recordingId,
@@ -330,11 +332,11 @@ function LinkTab({
         canManage={canManage}
         isPending={isPending}
         onChange={(next) => setResourceVisibility(next)}
-        publicDescription={PUBLIC_DESCRIPTION}
+        publicDescription={t("shareDialog.publicDescription")}
       />
 
       <CopyField
-        label="Share link"
+        label={t("shareDialog.shareLink")}
         value={shareUrl}
         disabled={isPending || (!isPublic && canManage)}
       />
@@ -344,15 +346,14 @@ function LinkTab({
       {isPublic ? <SlackShareHint canManage={canManage} /> : null}
 
       <CopyField
-        label="Share with agents"
+        label={t("shareDialog.shareWithAgents")}
         value={agentContextUrl}
         disabled={agentShareDisabled}
       />
 
       {isPublic && hasPassword ? (
         <p className="text-xs text-muted-foreground">
-          This agent URL uses a short-lived token, so agents can read the clip
-          without exposing the password.
+          {t("shareDialog.agentTokenDescription")}
         </p>
       ) : null}
 
@@ -375,7 +376,7 @@ function LinkTab({
               size="sm"
               onClick={() => window.open(animatedThumbnailUrl, "_blank")}
             >
-              GIF preview
+              {t("shareDialog.gifPreview")}
             </Button>
           ) : null}
           {videoUrl ? (
@@ -390,10 +391,10 @@ function LinkTab({
               {isLoomRecording ? (
                 <>
                   <IconExternalLink className="h-4 w-4" />
-                  Open player
+                  {t("shareDialog.openPlayer")}
                 </>
               ) : (
-                "Download MP4"
+                t("shareDialog.downloadMp4")
               )}
             </Button>
           ) : null}
@@ -418,6 +419,7 @@ function ClipsEmbedConfigurator({
   canManage: boolean;
   ownerViaId?: string;
 }) {
+  const t = useT();
   const [autoplay, setAutoplay] = useState(false);
   const [startMs, setStartMs] = useState(0);
   const [mode, setMode] = useState<"responsive" | "fixed">("responsive");
@@ -428,6 +430,7 @@ function ClipsEmbedConfigurator({
   const visibility: Visibility =
     (data?.visibility as Visibility | null) ?? "private";
   const isPublic = visibility === "public";
+  const visibilityLabel = t(`shareUi.visibility.${visibility}.label`);
   const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
     "recording",
     recordingId,
@@ -457,13 +460,12 @@ function ClipsEmbedConfigurator({
       {!isPublic ? (
         <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2.5 text-xs">
           <div className="font-medium text-foreground">
-            Embeds need a public clip
+            {t("shareDialog.embedsNeedPublic")}
           </div>
           <p className="mt-0.5 text-muted-foreground">
-            This clip is currently{" "}
-            <span className="font-medium">{VIS_META[visibility].label}</span>.
-            Embedded iframes load anonymously, so the clip must be public for
-            viewers to watch.
+            {t("shareDialog.embedPublicDescription", {
+              visibility: visibilityLabel,
+            })}
           </p>
           {canManage ? (
             <Button
@@ -472,11 +474,13 @@ function ClipsEmbedConfigurator({
               onClick={makePublic}
               disabled={isPending}
             >
-              {isPending ? "Making public…" : "Make public"}
+              {isPending
+                ? t("shareDialog.makingPublic")
+                : t("shareDialog.makePublic")}
             </Button>
           ) : (
             <p className="mt-1 text-muted-foreground">
-              Ask the owner to make it public.
+              {t("shareDialog.askOwnerPublic")}
             </p>
           )}
         </div>
@@ -489,7 +493,7 @@ function ClipsEmbedConfigurator({
             checked={mode === "responsive"}
             onChange={() => setMode("responsive")}
           />
-          Responsive (16:9)
+          {t("shareDialog.responsive")}
         </label>
         <label className="flex items-center gap-2 text-sm">
           <input
@@ -497,14 +501,14 @@ function ClipsEmbedConfigurator({
             checked={mode === "fixed"}
             onChange={() => setMode("fixed")}
           />
-          Fixed size
+          {t("shareDialog.fixedSize")}
         </label>
       </div>
 
       {mode === "fixed" ? (
         <div className="flex gap-2">
           <div className="flex-1">
-            <Label className="text-xs">Width</Label>
+            <Label className="text-xs">{t("shareDialog.width")}</Label>
             <Input
               type="number"
               value={width}
@@ -512,7 +516,7 @@ function ClipsEmbedConfigurator({
             />
           </div>
           <div className="flex-1">
-            <Label className="text-xs">Height</Label>
+            <Label className="text-xs">{t("shareDialog.height")}</Label>
             <Input
               type="number"
               value={height}
@@ -523,12 +527,12 @@ function ClipsEmbedConfigurator({
       ) : null}
 
       <div className="flex items-center justify-between">
-        <Label className="text-sm">Autoplay</Label>
+        <Label className="text-sm">{t("shareDialog.autoplay")}</Label>
         <Switch checked={autoplay} onCheckedChange={setAutoplay} />
       </div>
 
       <div>
-        <Label className="text-xs">Start at (seconds)</Label>
+        <Label className="text-xs">{t("shareDialog.startAt")}</Label>
         <Input
           type="number"
           min={0}
@@ -538,7 +542,9 @@ function ClipsEmbedConfigurator({
       </div>
 
       <div>
-        <Label className="text-xs mb-1 block">Embed code</Label>
+        <Label className="text-xs mb-1 block">
+          {t("shareDialog.embedCode")}
+        </Label>
         <textarea
           readOnly
           value={code}

package/corpus/templates/clips/app/components/player/sign-in-prompt-dialog.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -42,19 +44,19 @@ export function SignInPromptDialog({
   returnTo,
   onSignIn,
 }: SignInPromptDialogProps) {
+  const t = useT();
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-sm">
         <DialogHeader>
-          <DialogTitle>Sign in to {intent}</DialogTitle>
+          <DialogTitle>{t("signInPrompt.title", { intent })}</DialogTitle>
           <DialogDescription>
-            Create an account or sign in to {intent} on this clip. We'll bring
-            you right back here when you're done.
+            {t("signInPrompt.description", { intent })}
           </DialogDescription>
         </DialogHeader>
         <DialogFooter className="flex-col-reverse sm:flex-row sm:justify-end gap-2">
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Not now
+            {t("signInPrompt.notNow")}
           </Button>
           <Button
             onClick={() => {
@@ -62,7 +64,7 @@ export function SignInPromptDialog({
               window.location.href = buildSignInHref(returnTo);
             }}
           >
-            Sign in
+            {t("signInPrompt.signIn")}
           </Button>
         </DialogFooter>
       </DialogContent>