@agent-native/core 0.77.3 → 0.77.4

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

@@ -1,6 +1,7 @@
 import {
   agentNativePath,
   openBuilderConnectPopup,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconSearch,
@@ -53,6 +54,7 @@ export interface TranscriptPanelProps {
 }
 
 export function TranscriptPanel(props: TranscriptPanelProps) {
+  const t = useT();
   const {
     segments,
     fullText,
@@ -131,10 +133,9 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
       <div className="p-4 text-sm text-muted-foreground flex items-start gap-2">
         <IconLoader2 className="h-4 w-4 animate-spin mt-0.5 shrink-0" />
         <div>
-          <p>Transcribing…</p>
+          <p>{t("transcriptPanel.transcribing")}</p>
           <p className="text-xs mt-1">
-            Live transcript appears as soon as speech is captured. Cleanup
-            continues in the background.
+            {t("transcriptPanel.pendingDescription")}
           </p>
         </div>
       </div>
@@ -145,16 +146,16 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
     return (
       <div className="p-4 space-y-3">
         <div>
-          <p className="text-sm font-medium">No speech detected</p>
+          <p className="text-sm font-medium">
+            {t("transcriptPanel.noSpeechDetected")}
+          </p>
           <p className="mt-1 text-sm text-muted-foreground">
-            We did not catch any speech in this recording. If that was
-            intentional, you are all set. If not, check your microphone and
-            speech permissions, then retry transcription.
+            {t("transcriptPanel.noSpeechDescription")}
           </p>
         </div>
         {onRetry ? (
           <Button size="sm" variant="outline" onClick={onRetry}>
-            Retry
+            {t("transcriptPanel.retry")}
           </Button>
         ) : null}
       </div>
@@ -165,12 +166,14 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
     return (
       <div className="p-4 space-y-3">
         <div className="text-sm text-destructive">
-          Transcript unavailable: {friendlyTranscriptFailure(failureReason)}
+          {t("transcriptPanel.transcriptUnavailable", {
+            reason: friendlyTranscriptFailure(failureReason, t),
+          })}
         </div>
         <div className="flex items-center gap-2">
           {onRetry ? (
             <Button size="sm" variant="outline" onClick={onRetry}>
-              Retry
+              {t("transcriptPanel.retry")}
             </Button>
           ) : null}
         </div>
@@ -186,7 +189,7 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
           <Input
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search transcript"
+            placeholder={t("transcriptPanel.searchPlaceholder")}
             className="pl-8 h-8 text-xs"
           />
         </div>
@@ -200,7 +203,7 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
               )}
             </Button>
           </TooltipTrigger>
-          <TooltipContent>Copy transcript</TooltipContent>
+          <TooltipContent>{t("transcriptPanel.copyTranscript")}</TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -208,28 +211,30 @@ export function TranscriptPanel(props: TranscriptPanelProps) {
               <IconDownload className="h-4 w-4" />
             </Button>
           </TooltipTrigger>
-          <TooltipContent>Download .srt</TooltipContent>
+          <TooltipContent>{t("transcriptPanel.downloadSrt")}</TooltipContent>
         </Tooltip>
       </div>
 
       {cleanup?.status === "running" ? (
         <div className="mx-3 mt-3 rounded-md border border-border bg-accent/30 px-3 py-2 text-xs text-muted-foreground flex items-center gap-2">
           <IconLoader2 className="h-3.5 w-3.5 animate-spin shrink-0" />
-          <span>Cleaning up transcript in the background.</span>
+          <span>{t("transcriptPanel.cleanupRunning")}</span>
         </div>
       ) : null}
 
       {cleanup?.status === "failed" ? (
         <div className="mx-3 mt-3 rounded-md border border-border bg-accent/30 px-3 py-2 text-xs text-muted-foreground flex items-start gap-2">
           <IconBolt className="h-3.5 w-3.5 mt-0.5 shrink-0" />
-          <span>{friendlyCleanupFailure(cleanup.failureReason)}</span>
+          <span>{friendlyCleanupFailure(cleanup.failureReason, t)}</span>
         </div>
       ) : null}
 
       <div className="flex-1 overflow-y-auto">
         {filtered.length === 0 ? (
           <div className="p-4 text-sm text-muted-foreground">
-            {query ? "No matches." : "No transcript yet."}
+            {query
+              ? t("transcriptPanel.noMatches")
+              : t("transcriptPanel.noTranscript")}
           </div>
         ) : (
           <ul className="py-1">
@@ -351,8 +356,11 @@ function isNoSpeechTranscriptFailure(
   );
 }
 
-function friendlyTranscriptFailure(reason: string | null | undefined): string {
-  if (!reason) return "No transcript was captured.";
+function friendlyTranscriptFailure(
+  reason: string | null | undefined,
+  t: ReturnType<typeof useT>,
+): string {
+  if (!reason) return t("transcriptPanel.noTranscriptCaptured");
   const normalized = reason.toLowerCase();
   if (
     normalized.includes("builder transcription failed") ||
@@ -360,27 +368,30 @@ function friendlyTranscriptFailure(reason: string | null | undefined): string {
     normalized.includes("fetch failed") ||
     normalized.includes("backup transcription could not finish")
   ) {
-    return "No speech was captured locally, and backup transcription did not finish. Retry or check microphone and speech permissions.";
+    return t("transcriptPanel.backupFailed");
   }
   if (
     normalized.includes("api key") ||
     normalized.includes("not configured") ||
     normalized.includes("connect builder")
   ) {
-    return "No speech was captured locally, and backup transcription is not set up.";
+    return t("transcriptPanel.backupNotSetup");
   }
   return reason;
 }
 
-function friendlyCleanupFailure(reason: string | null | undefined): string {
-  if (!reason) return "Cleanup could not finish. Native transcript was kept.";
+function friendlyCleanupFailure(
+  reason: string | null | undefined,
+  t: ReturnType<typeof useT>,
+): string {
+  if (!reason) return t("transcriptPanel.cleanupKept");
   const normalized = reason.toLowerCase();
   if (
     normalized.includes("is connected, but") ||
     normalized.includes("returned no text") ||
     normalized.includes("service failed")
   ) {
-    return "Cleanup could not finish even though Builder.io is connected. Native transcript was kept.";
+    return t("transcriptPanel.cleanupBuilderFailed");
   }
   if (
     normalized.includes("incomplete") ||
@@ -388,9 +399,9 @@ function friendlyCleanupFailure(reason: string | null | undefined): string {
     normalized.includes("not configured") ||
     normalized.includes("api key")
   ) {
-    return "Cleanup is paused. Connect Builder.io in Settings to enable it.";
+    return t("transcriptPanel.cleanupPaused");
   }
-  return "Cleanup could not finish. Native transcript was kept.";
+  return t("transcriptPanel.cleanupKept");
 }
 
 /**
@@ -408,6 +419,7 @@ function TranscriptSetupCard({
   failureReason?: string | null;
   onRetry?: () => void;
 }) {
+  const t = useT();
   const [builderConfigured, setBuilderConfigured] = useState<boolean | null>(
     null,
   );
@@ -483,9 +495,7 @@ function TranscriptSetupCard({
         } else if (Date.now() - start > 5 * 60 * 1000) {
           clearInterval(pollRef.current!);
           setConnecting(false);
-          setConnectError(
-            "Didn't hear back from Builder. Allow popups and try again.",
-          );
+          setConnectError(t("transcriptPanel.builderNoResponse"));
         }
       } catch {
         // transient poll error — keep trying
@@ -514,12 +524,12 @@ function TranscriptSetupCard({
         if (!mountedRef.current) return;
         setSaveToast({
           kind: "err",
-          text: err ?? `Save failed (${res.status})`,
+          text: err ?? t("transcriptPanel.saveFailed", { status: res.status }),
         });
         return;
       }
       setApiKey("");
-      setSaveToast({ kind: "ok", text: "Saved. Retrying transcription…" });
+      setSaveToast({ kind: "ok", text: t("transcriptPanel.savedRetrying") });
       onRetry?.();
       if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
       toastTimerRef.current = setTimeout(() => {
@@ -618,7 +628,7 @@ function TranscriptSetupCard({
                 {connecting ? (
                   <>
                     <IconLoader2 className="h-3 w-3 animate-spin" />
-                    Waiting…
+                    {t("transcriptPanel.waiting")}
                   </>
                 ) : (
                   <>
@@ -661,8 +671,9 @@ function TranscriptSetupCard({
           {showByok && (
             <div className="mt-2 space-y-2 pl-1">
               <p className="text-[11px] text-muted-foreground">
-                Groq keys start with <code className="font-mono">gsk_</code>.
-                Native speech remains the primary transcript source.
+                {t("transcriptPanel.groqKeysStart")}{" "}
+                <code className="font-mono">gsk_</code>.{" "}
+                {t("transcriptPanel.nativeSpeechPrimary")}
               </p>
               <div className="flex gap-1.5">
                 <Input
@@ -683,7 +694,7 @@ function TranscriptSetupCard({
                   {saving ? (
                     <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
                   ) : (
-                    "Save"
+                    t("common.save")
                   )}
                 </Button>
               </div>
@@ -694,7 +705,7 @@ function TranscriptSetupCard({
                   rel="noopener noreferrer"
                   className="inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground"
                 >
-                  Get Groq key
+                  {t("transcriptPanel.getGroqKey")}
                   <IconExternalLink className="h-3 w-3" />
                 </a>
               </div>

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

@@ -1,4 +1,8 @@
-import { appBasePath, captureClientException } from "@agent-native/core/client";
+import {
+  appBasePath,
+  captureClientException,
+  useT,
+} from "@agent-native/core/client";
 import {
   isLoomEmbedUrl,
   LOOM_START_MS_QUERY_PARAM,
@@ -188,6 +192,7 @@ export interface VideoPlayerProps {
 
 export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
   function VideoPlayer(props, ref) {
+    const t = useT();
     const {
       videoUrl,
       embedProvider,
@@ -919,7 +924,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
         {isLoomEmbed && loomIframeSrc ? (
           <iframe
             src={loomIframeSrc}
-            title="Loom video"
+            title={t("videoPlayer.loomVideo")}
             className="h-full w-full border-0"
             allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
             allowFullScreen
@@ -1069,7 +1074,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
           />
         ) : (
           <div className="flex items-center justify-center w-full h-full text-white/50 text-sm">
-            No video available
+            {t("videoPlayer.noVideo")}
           </div>
         )}
 
@@ -1123,7 +1128,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
             className="absolute inset-0 z-30 flex items-center justify-center bg-black/70 backdrop-blur-sm"
           >
             <div className="flex flex-col items-center gap-4 text-white">
-              <p className="text-lg font-medium">Thanks for watching</p>
+              <p className="text-lg font-medium">{t("videoPlayer.thanks")}</p>
               <CtaButton
                 cta={cta!}
                 onClick={() => onCtaClick?.(cta!.id)}
@@ -1215,6 +1220,7 @@ function CenterPlaybackOverlay({
   onSpeedChange: (rate: number) => void;
   menuPortalContainer?: HTMLElement | null;
 }) {
+  const t = useT();
   const showLoading = mode === "loading" && !playError;
   const adjustedDurationMs = speed > 0 ? durationMs / speed : durationMs;
   const showAdjustedDuration =
@@ -1239,7 +1245,7 @@ function CenterPlaybackOverlay({
             <button
               data-player-ui
               type="button"
-              aria-label="Play clip"
+              aria-label={t("videoPlayer.playClip")}
               onClick={(e) => {
                 e.stopPropagation();
                 onPlay();

package/corpus/templates/clips/app/components/recorder/camera-visualizer.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -136,6 +137,7 @@ export function CameraVisualizer({
   onStatusChange,
   onPreviewChange,
 }: CameraVisualizerProps) {
+  const t = useT();
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const blurHandleRef = useRef<CameraBlurHandle | null>(null);
@@ -372,10 +374,16 @@ export function CameraVisualizer({
     <div className={cn("space-y-2", disabled && "opacity-70", className)}>
       <div className="flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2 rounded-full border border-border bg-muted/20 py-0.5 ps-2 pe-0.5">
-          <span className="text-[11px] text-muted-foreground">Bubble</span>
+          <span className="text-[11px] text-muted-foreground">
+            {t("cameraVisualizer.bubble")}
+          </span>
           {live || starting ? (
             <span className="rounded-full bg-background px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
-              {live ? (hasFrame ? "Live" : "Waiting") : "Opening"}
+              {live
+                ? hasFrame
+                  ? t("cameraVisualizer.live")
+                  : t("cameraVisualizer.waiting")
+                : t("cameraVisualizer.opening")}
             </span>
           ) : null}
         </div>
@@ -405,7 +413,11 @@ export function CameraVisualizer({
           onClick={live ? stopTest : startTest}
           className="ms-auto h-7 shrink-0 px-2.5 text-xs"
         >
-          {live ? "Stop" : starting ? "Opening..." : "Test"}
+          {live
+            ? t("cameraVisualizer.stop")
+            : starting
+              ? t("cameraVisualizer.openingEllipsis")
+              : t("cameraVisualizer.test")}
         </Button>
       </div>
       {showBubble && (
@@ -426,7 +438,7 @@ export function CameraVisualizer({
                 setHasFrame(true);
                 onPreviewChange?.(true);
               }}
-              aria-label="Selected camera preview"
+              aria-label={t("cameraVisualizer.selectedPreview")}
               className={cn(
                 "h-full w-full rounded-full object-cover [transform:scaleX(-1)]",
                 !live && "opacity-0",
@@ -434,7 +446,7 @@ export function CameraVisualizer({
             />
             {!live && (
               <div className="absolute inset-0 flex items-center justify-center rounded-full bg-gradient-to-br from-muted/70 to-background px-5 text-center text-[11px] text-muted-foreground">
-                Camera preview
+                {t("cameraVisualizer.preview")}
               </div>
             )}
             {live && (
@@ -451,7 +463,9 @@ export function CameraVisualizer({
               <button
                 key={option.value}
                 type="button"
-                aria-label={`Set camera bubble size ${option.label}`}
+                aria-label={t("cameraVisualizer.setBubbleSize", {
+                  size: option.label,
+                })}
                 aria-pressed={size === option.value}
                 onClick={() => onSizeChange?.(option.value)}
                 className={cn(

package/corpus/templates/clips/app/components/recorder/countdown-overlay.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPlayerSkipForward, IconX } from "@tabler/icons-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -18,6 +19,7 @@ export function CountdownOverlay({
   onComplete,
   onCancel,
 }: CountdownOverlayProps) {
+  const t = useT();
   const [remaining, setRemaining] = useState(seconds);
   // Ensure each callback fires exactly once for the lifetime of the countdown,
   // even if identities change or the user skips while the timer is mid-flight.
@@ -79,13 +81,13 @@ export function CountdownOverlay({
     <div
       className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-black/70 backdrop-blur-sm"
       aria-live="polite"
-      aria-label={`Recording starts in ${remaining}`}
+      aria-label={t("countdownOverlay.startsIn", { count: remaining })}
     >
       <div className="flex items-center gap-10 sm:gap-14">
         <button
           type="button"
           onClick={onCancel}
-          aria-label="Cancel recording"
+          aria-label={t("countdownOverlay.cancel")}
           className={controlClasses}
         >
           <IconX className="h-7 w-7" stroke={1.75} />
@@ -105,7 +107,7 @@ export function CountdownOverlay({
         <button
           type="button"
           onClick={handleSkip}
-          aria-label="Skip countdown and start recording now"
+          aria-label={t("countdownOverlay.skip")}
           className={controlClasses}
         >
           <IconPlayerSkipForward className="h-7 w-7" stroke={1.75} />
@@ -113,7 +115,7 @@ export function CountdownOverlay({
       </div>
 
       <p className="absolute bottom-16 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-xs font-medium text-white/70 backdrop-blur">
-        Esc to cancel · Enter to start now
+        {t("countdownOverlay.hint")}
       </p>
     </div>
   );

package/corpus/templates/clips/app/components/recorder/microphone-visualizer.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -120,6 +121,7 @@ export function MicrophoneVisualizer({
   onStatusChange,
   onSignalChange,
 }: MicrophoneVisualizerProps) {
+  const t = useT();
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const rafRef = useRef<number | null>(null);
   const runIdRef = useRef(0);
@@ -461,7 +463,7 @@ export function MicrophoneVisualizer({
         >
           <canvas
             ref={canvasRef}
-            aria-label="Selected microphone waveform"
+            aria-label={t("clipsFinalRaw.selectedMicrophoneWaveform")}
             className="h-full w-full opacity-75"
           />
           {statusLabel ? (