@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/routes/record.tsx

@@ -3,6 +3,7 @@ import {
   appBasePath,
   callAction,
   captureClientException,
+  useT,
 } from "@agent-native/core/client";
 import { useLiveTranscription } from "@agent-native/core/client/transcription/use-live-transcription";
 import type { BrowserDiagnosticsData } from "@shared/browser-diagnostics";
@@ -30,6 +31,7 @@ import {
   VIDEO_STORAGE_STATUS_KEY,
   type VideoStorageStatus,
 } from "@/hooks/use-video-storage-status";
+import enMessages from "@/i18n/en-US";
 import {
   createBrowserDiagnosticsCapture,
   type BrowserDiagnosticsCapture,
@@ -98,7 +100,7 @@ import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 
 export function meta() {
-  return [{ title: "New recording — Clips" }];
+  return [{ title: enMessages.recordRoute.pageTitle }];
 }
 
 export function headers() {
@@ -416,13 +418,16 @@ function getDisplaySurfaceParam(value: string | null): DisplaySurface | null {
   return null;
 }
 
-function getRecordingErrorTitle(error: string): string {
-  if (isUploadSizeError(error)) return "Video is too large";
-  if (isUploadFailureError(error)) return "Upload failed";
+function getRecordingErrorTitle(
+  error: string,
+  t: ReturnType<typeof useT>,
+): string {
+  if (isUploadSizeError(error)) return t("recordRoute.videoTooLarge");
+  if (isUploadFailureError(error)) return t("recordRoute.uploadFailed");
   if (isScreenPermissionError(error)) return "Screen recording needs access";
   if (isCameraPermissionError(error)) return "Camera needs access";
   if (isMicrophonePermissionError(error)) return "Microphone needs access";
-  return "Couldn't start recording";
+  return t("recordRoute.couldNotStartRecording");
 }
 
 function isUploadSizeError(error: string): boolean {
@@ -591,6 +596,7 @@ function PreRecordPanelSkeleton() {
 }
 
 function DesktopRecorderCallout() {
+  const t = useT();
   return (
     <aside className="w-full rounded-2xl border border-border bg-card p-4 shadow-lg">
       <div className="flex items-start gap-3">
@@ -599,11 +605,10 @@ function DesktopRecorderCallout() {
         </div>
         <div className="min-w-0">
           <div className="text-sm font-medium text-foreground">
-            Better in the desktop app
+            {t("recordRoute.betterInDesktop")}
           </div>
           <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
-            Menu-bar launch, global shortcuts, auto-updates, and smoother repeat
-            recordings.
+            {t("recordRoute.desktopAppDescription")}
           </p>
         </div>
       </div>
@@ -611,7 +616,7 @@ function DesktopRecorderCallout() {
         size="sm"
         className="mt-4 w-full bg-primary text-primary-foreground hover:bg-primary/90"
       >
-        Download desktop app
+        {t("recordRoute.downloadDesktopApp")}
       </CaptureInstallButton>
     </aside>
   );
@@ -634,6 +639,7 @@ function RecordingErrorCard({
   onDownloadRecording: () => void;
   onTryAgain: () => void;
 }) {
+  const t = useT();
   const uploadFailure = isUploadFailureError(error);
   const guidance = uploadFailure
     ? null
@@ -656,7 +662,7 @@ function RecordingErrorCard({
           <IconAlertTriangle className="h-5 w-5" />
         </div>
         <h2 className="text-lg font-semibold text-foreground">
-          {getRecordingErrorTitle(error)}
+          {getRecordingErrorTitle(error, t)}
         </h2>
         <p className="mt-2 break-words text-sm leading-relaxed text-muted-foreground">
           {friendlyMessage}
@@ -664,7 +670,7 @@ function RecordingErrorCard({
         {showTechnicalDetails && (
           <details className="mt-3 text-start text-xs text-muted-foreground">
             <summary className="cursor-pointer font-medium text-foreground">
-              Technical details
+              {t("recordRoute.technicalDetails")}
             </summary>
             <p className="mt-2 max-h-28 overflow-auto break-words rounded-lg border border-border bg-muted/40 p-2 leading-relaxed">
               {error}
@@ -676,7 +682,7 @@ function RecordingErrorCard({
       {guidance && (
         <div className="border-b border-border bg-muted/25 px-6 py-4 text-start">
           <div className="text-xs font-medium text-foreground">
-            What to check
+            {t("recordRoute.whatToCheck")}
           </div>
           <p className="mt-1 break-words text-xs leading-relaxed text-muted-foreground">
             {guidance}
@@ -692,7 +698,7 @@ function RecordingErrorCard({
           <>
             <Button onClick={onDownloadRecording} className="w-full gap-2">
               <IconDownload className="h-4 w-4" />
-              Download recording
+              {t("recordRoute.downloadRecording")}
             </Button>
             <p className="text-xs leading-relaxed text-muted-foreground">
               Your recording is safe on this device. Download it now and upload
@@ -711,7 +717,7 @@ function RecordingErrorCard({
             className="w-full gap-2"
           >
             <IconExternalLink className="h-4 w-4" />
-            Open recorder in tab
+            {t("recordRoute.openRecorderInTab")}
           </Button>
         )}
         {permissionError &&
@@ -775,6 +781,7 @@ function RecordingErrorCard({
 }
 
 export default function RecordRoute() {
+  const t = useT();
   const navigate = useNavigate();
   const location = useLocation();
   const [uiState, setUiState] = useState<UiState>("idle");
@@ -875,8 +882,6 @@ export default function RecordRoute() {
     displaySurface: DisplaySurface;
     micDeviceId: string | null;
     cameraDeviceId: string | null;
-    cameraBlur: boolean;
-    cameraBlurRadius: number;
   } | null>(null);
   const tickRef = useRef<number | null>(null);
   const previewVideoRef = useRef<HTMLVideoElement>(null);
@@ -919,29 +924,37 @@ export default function RecordRoute() {
     }
   }, [previewStream]);
 
-  const showRecordingErrorToast = useCallback((message: string) => {
-    const pendingOpts = pendingStartOptsRef.current;
-    const uploadFailure = isUploadFailureError(message);
-    const guidance = uploadFailure
-      ? null
-      : permissionGuidance(message, pendingOpts ?? undefined);
-    const settingsUrl = uploadFailure
-      ? null
-      : permissionSettingsUrl(message, pendingOpts?.mode);
-    const friendlyMessage = friendlyRecordingErrorMessage(message);
-    toast.error(uploadFailure ? "Upload failed" : "Couldn't start recording", {
-      description: guidance ?? friendlyMessage,
-      duration: guidance ? 20_000 : 10_000,
-      action: settingsUrl
-        ? {
-            label: "Open settings",
-            onClick: () => {
-              openUrlFromUserGesture(settingsUrl);
-            },
-          }
-        : undefined,
-    });
-  }, []);
+  const showRecordingErrorToast = useCallback(
+    (message: string) => {
+      const pendingOpts = pendingStartOptsRef.current;
+      const uploadFailure = isUploadFailureError(message);
+      const guidance = uploadFailure
+        ? null
+        : permissionGuidance(message, pendingOpts ?? undefined);
+      const settingsUrl = uploadFailure
+        ? null
+        : permissionSettingsUrl(message, pendingOpts?.mode);
+      const friendlyMessage = friendlyRecordingErrorMessage(message);
+      toast.error(
+        uploadFailure
+          ? t("recordRoute.uploadFailed")
+          : t("recordRoute.couldNotStartRecording"),
+        {
+          description: guidance ?? friendlyMessage,
+          duration: guidance ? 20_000 : 10_000,
+          action: settingsUrl
+            ? {
+                label: t("recordRoute.openSettings"),
+                onClick: () => {
+                  openUrlFromUserGesture(settingsUrl);
+                },
+              }
+            : undefined,
+        },
+      );
+    },
+    [t],
+  );
 
   // -------------------------------------------------------------------------
   // Acquire media, create recording row, start countdown.
@@ -952,8 +965,6 @@ export default function RecordRoute() {
       displaySurface: DisplaySurface;
       micDeviceId: string | null;
       cameraDeviceId: string | null;
-      cameraBlur: boolean;
-      cameraBlurRadius: number;
     }) => {
       const blockedFeature = isEmbeddedWindow()
         ? getPolicyBlockedCaptureLabel({
@@ -963,7 +974,7 @@ export default function RecordRoute() {
         : null;
       if (blockedFeature) {
         openUrlFromUserGesture(directRecorderUrl(opts));
-        toast.info("Opened recorder in a new tab", {
+        toast.info(t("recordRoute.openedRecorderInNewTab"), {
           description: `Chrome is blocking ${blockedFeature} access in this embedded web client.`,
           duration: 8000,
         });
@@ -999,8 +1010,6 @@ export default function RecordRoute() {
           micDeviceId: opts.micDeviceId,
           cameraDeviceId: opts.cameraDeviceId,
           cameraBubbleSize: cameraSize,
-          cameraBlur: opts.cameraBlur,
-          cameraBlurRadius: opts.cameraBlurRadius,
           uploadUrl: "",
           abortUrl: "",
           onError: (err) => {
@@ -1014,13 +1023,6 @@ export default function RecordRoute() {
           onWarning: (message) => {
             toast.warning(message);
           },
-          // Camera ended (unplugged / revoked): drop the on-page bubble, and in
-          // camera-only mode clear the fullscreen preview too (it renders from
-          // previewStream) so neither freezes on the last frame.
-          onCameraEnded: () => {
-            setCameraStream(null);
-            if (opts.mode === "camera") setPreviewStream(null);
-          },
           // Track the surface the user actually chose (and any mid-recording
           // switch) so the live camera bubble is hidden only when the full
           // screen — including this tab's overlay — is being captured.
@@ -1196,7 +1198,9 @@ export default function RecordRoute() {
         // doCancel() owns teardown if a cancel raced ahead — don't clobber it.
         if (isStale()) return;
         const message =
-          err instanceof Error ? err.message : "Could not start recording";
+          err instanceof Error
+            ? err.message
+            : t("recordRoute.couldNotStartRecording");
         const pickerDismissed = isDismissedCapturePicker(err, message);
         await liveTranscription.stopAndWait().catch(() => "");
         // If the recording row was created before the failure, trash it so it
@@ -1483,9 +1487,11 @@ export default function RecordRoute() {
           if (!chunkRes.ok) {
             const text = await chunkRes.text().catch(() => "");
             const error = new Error(
-              `Upload failed at chunk ${i + 1}/${totalChunks}: ${
-                text || chunkRes.statusText
-              }`,
+              t("recordRoute.uploadFailedAtChunk", {
+                chunk: i + 1,
+                total: totalChunks,
+                message: text || chunkRes.statusText,
+              }),
             );
             (error as Error & { status?: number }).status = chunkRes.status;
             throw error;
@@ -1504,13 +1510,12 @@ export default function RecordRoute() {
           finalChunkResult?.waitingForStorage === true ||
           finalChunkResult?.status === "waiting_storage";
         if (waitingForStorage) {
-          toast.info("Video is ready to upload", {
-            description:
-              "Connect Builder.io or S3 storage on the next screen and Clips will finish saving it.",
+          toast.info(t("recordRoute.videoReadyToUpload"), {
+            description: t("recordRoute.connectStorageToFinish"),
             duration: 12_000,
           });
         } else {
-          toast.success("Video uploaded");
+          toast.success(t("recordRoute.videoUploaded"));
         }
         await writeAppState("navigate", {
           view: "recording",
@@ -1520,7 +1525,8 @@ export default function RecordRoute() {
           if (createdId) navigate(`/r/${createdId}`);
         }, 50);
       } catch (err) {
-        const message = err instanceof Error ? err.message : "Upload failed";
+        const message =
+          err instanceof Error ? err.message : t("recordRoute.uploadFailed");
         const aborted = err instanceof Error && err.name === "AbortError";
         const status =
           err instanceof Error
@@ -1540,7 +1546,9 @@ export default function RecordRoute() {
         setUiState("error");
         if (message !== "SESSION_EXPIRED") {
           toast.error(
-            isUploadSizeError(message) ? "Video is too large" : "Upload failed",
+            isUploadSizeError(message)
+              ? t("recordRoute.videoTooLarge")
+              : t("recordRoute.uploadFailed"),
             {
               description: createdId
                 ? "The clip was marked failed in your library. You can remove it from the card menu."
@@ -1589,13 +1597,12 @@ export default function RecordRoute() {
           result?.storageSetupRequired ||
           result?.status === "waiting_storage"
         ) {
-          toast.info("Storage needed to finish Loom import", {
-            description:
-              "Connect Builder.io or S3 storage on the next screen and Clips will retry the import.",
+          toast.info(t("recordRoute.storageNeededToFinishLoomImport"), {
+            description: t("recordRoute.connectStorageToRetryLoom"),
             duration: 12_000,
           });
         } else {
-          toast.success("Loom imported");
+          toast.success(t("recordRoute.loomImported"));
         }
         await writeAppState("navigate", {
           view: "recording",
@@ -1604,7 +1611,9 @@ export default function RecordRoute() {
         navigate(`/r/${recordingId}`);
       } catch (err) {
         throw new Error(
-          err instanceof Error ? err.message : "Could not import that Loom.",
+          err instanceof Error
+            ? err.message
+            : t("recordRoute.couldNotImportLoom"),
         );
       } finally {
         setLoomImporting(false);
@@ -1694,7 +1703,9 @@ export default function RecordRoute() {
       browserDiagnosticsRef.current?.dispose();
       browserDiagnosticsRef.current = null;
       const message =
-        err instanceof Error ? err.message : "Could not start recorder";
+        err instanceof Error
+          ? err.message
+          : t("recordRoute.couldNotStartRecorder");
       countdownAudioCueRef.current?.cleanup();
       countdownAudioCueRef.current = null;
       setError(message);
@@ -1717,13 +1728,12 @@ export default function RecordRoute() {
       setCompressionProgress(null);
       setUiState("complete");
       if (result.waitingForStorage) {
-        toast.info("Recording is ready to upload", {
-          description:
-            "Connect Builder.io or S3 storage on the next screen and Clips will finish saving it.",
+        toast.info(t("recordRoute.recordingReadyToUpload"), {
+          description: t("recordRoute.connectStorageToFinish"),
           duration: 12_000,
         });
       } else {
-        toast.success("Recording saved");
+        toast.success(t("recordRoute.recordingSaved"));
       }
 
       await writeAppState("navigate", {
@@ -1798,7 +1808,8 @@ export default function RecordRoute() {
       await saveBrowserDiagnostics(pending.id);
       await finishSavedRecording(pending.id, stopResult);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Upload failed";
+      const message =
+        err instanceof Error ? err.message : t("recordRoute.uploadFailed");
       // Distinguish user-initiated cancel from real failure. When the user
       // clicks Cancel mid-compression, engine.cancel() aborts the in-flight
       // compression pass; the still-pending engine.stop() above then throws
@@ -1827,7 +1838,7 @@ export default function RecordRoute() {
       }).catch(() => {});
       setError(message);
       setUiState("error");
-      toast.error("Upload failed", {
+      toast.error(t("recordRoute.uploadFailed"), {
         description: message,
         duration: 12_000,
       });
@@ -1852,7 +1863,8 @@ export default function RecordRoute() {
       if (err instanceof Error && err.name === "AbortError") {
         return;
       }
-      const message = err instanceof Error ? err.message : "Upload failed";
+      const message =
+        err instanceof Error ? err.message : t("recordRoute.uploadFailed");
       fetch(pending.abortUrl, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -1861,7 +1873,7 @@ export default function RecordRoute() {
       setCompressionProgress(null);
       setError(message);
       setUiState("error");
-      toast.error("Upload failed", {
+      toast.error(t("recordRoute.uploadFailed"), {
         description: message,
         duration: 12_000,
       });
@@ -1871,7 +1883,7 @@ export default function RecordRoute() {
   const downloadBufferedRecording = useCallback(() => {
     const download = engineRef.current?.getBufferedRecordingDownload();
     if (!download) {
-      toast.error("No local recording data is available to download.");
+      toast.error(t("recordRoute.noLocalRecordingData"));
       return;
     }
     const url = URL.createObjectURL(download.blob);
@@ -1883,7 +1895,7 @@ export default function RecordRoute() {
     link.click();
     link.remove();
     window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
-    toast.success("Recording download started");
+    toast.success(t("recordRoute.recordingDownloadStarted"));
   }, []);
 
   const doCancel = useCallback(async () => {
@@ -2110,7 +2122,7 @@ export default function RecordRoute() {
       {showBackButton && (
         <button
           type="button"
-          aria-label="Back to library"
+          aria-label={t("recordRoute.backToLibrary")}
           onClick={async () => {
             // If we landed in `error` after partial media acquisition, the
             // engine may still hold live screen/camera tracks. doCancel()
@@ -2134,7 +2146,7 @@ export default function RecordRoute() {
           <div className="mb-6 flex items-center gap-2 text-primary">
             <IconVideo className="h-6 w-6" />
             <span className="text-sm font-medium uppercase tracking-wide">
-              Clips recorder
+              {t("recordRoute.clipsRecorder")}
             </span>
           </div>
           <div className="relative w-full max-w-6xl">
@@ -2175,7 +2187,7 @@ export default function RecordRoute() {
 
       {uiState === "pickingSources" && (
         <div className="flex min-h-screen flex-col items-center justify-center gap-3 text-muted-foreground">
-          <div className="text-sm">Preparing sources…</div>
+          <div className="text-sm">{t("recordRoute.preparingSources")}</div>
           <div className="text-xs">
             {getPreparingSourcesCopy(
               recordingMode,
@@ -2218,7 +2230,7 @@ export default function RecordRoute() {
                 <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-30" />
                 <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-white" />
               </span>
-              Recording your screen — switch to the window you want to capture
+              {t("recordRoute.recordingScreen")}
             </div>
             <div className="text-[11px] text-white/50">
               Press <kbd className="rounded bg-white/10 px-1.5 py-0.5">Esc</kbd>{" "}
@@ -2273,11 +2285,11 @@ export default function RecordRoute() {
                   : "…"}
               </div>
               <div className="text-[11px] text-white/50">
-                Large clips need a quick re-encode before upload.
+                {t("recordRoute.largeClipsNeedReencode")}
               </div>
             </>
           ) : (
-            <div className="text-sm">Saving your recording…</div>
+            <div className="text-sm">{t("recordRoute.savingRecording")}</div>
           )}
           <button
             onClick={doCancel}
@@ -2296,7 +2308,7 @@ export default function RecordRoute() {
               <div className="mb-2 flex items-center gap-2 text-primary">
                 <IconVideo className="h-6 w-6" />
                 <span className="text-sm font-medium uppercase tracking-wide">
-                  Clips recorder
+                  {t("recordRoute.clipsRecorder")}
                 </span>
               </div>
               <StorageSetupCard
@@ -2317,13 +2329,15 @@ export default function RecordRoute() {
           ) : error === "SESSION_EXPIRED" ? (
             <div className="max-w-md rounded-xl border border-border bg-card p-6">
               <div className="mb-2 text-sm font-semibold text-foreground">
-                Session expired
+                {t("recordRoute.sessionExpired")}
               </div>
               <div className="text-sm text-muted-foreground">
-                Your login session has expired. Log in again to start recording.
+                {t("recordRoute.sessionExpiredDescription")}
               </div>
               <div className="mt-4 flex justify-center">
-                <Button onClick={() => window.location.reload()}>Log in</Button>
+                <Button onClick={() => window.location.reload()}>
+                  {t("recordRoute.logIn")}
+                </Button>
               </div>
             </div>
           ) : (