@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -7,6 +7,7 @@ import {
   getBrowserTabId,
   readClientAppState,
   useChangeVersions,
+  useT,
 } from "@agent-native/core/client";
 import {
   isLoomEmbedBackedRecording,
@@ -63,12 +64,13 @@ import {
 import { isDefaultTitle, useAutoTitleBridge } from "@/hooks/use-auto-title";
 import { usePlayerShortcuts } from "@/hooks/use-player-shortcuts";
 import { useViewTracking } from "@/hooks/use-view-tracking";
+import enMessages from "@/i18n/en-US";
 import { parsePlaybackSpeed } from "@/lib/playback-speed";
 import { isStorageSetupFailureReason } from "@/lib/storage-failures";
 import { cn } from "@/lib/utils";
 
 export function meta() {
-  return [{ title: "Clip recording · Clips" }];
+  return [{ title: enMessages.recordingRoute.pageTitle }];
 }
 
 type SidePanel = "transcript" | "comments" | "insights" | "agent" | "settings";
@@ -76,18 +78,17 @@ type WorkflowKind = "pr" | "sop" | "ticket" | "email";
 
 const WORKFLOW_MENU_ITEMS: Array<{
   kind: WorkflowKind;
-  label: string;
-  tooltip?: string;
+  labelKey: string;
+  tooltipKey?: string;
 }> = [
-  { kind: "pr", label: "Generate PR summary" },
+  { kind: "pr", labelKey: "recordingPage.generatePrSummary" },
   {
     kind: "sop",
-    label: "Generate SOP",
-    tooltip:
-      "SOP means Standard Operating Procedure: a reusable step-by-step runbook generated from this clip.",
+    labelKey: "recordingPage.generateSop",
+    tooltipKey: "recordingPage.generateSopTooltip",
   },
-  { kind: "ticket", label: "Generate ticket" },
-  { kind: "email", label: "Generate email" },
+  { kind: "ticket", labelKey: "recordingPage.generateTicket" },
+  { kind: "email", labelKey: "recordingPage.generateEmail" },
 ];
 
 interface GeneratedWorkflowState {
@@ -120,12 +121,14 @@ function nativeSaveFailureMessage(reason: string | null | undefined): string {
 }
 
 function InsightsUnavailableState() {
+  const t = useT();
   return (
     <div className="flex h-full flex-col items-center justify-center px-8 py-12 text-center">
-      <p className="text-sm font-medium text-foreground">Owner insights</p>
+      <p className="text-sm font-medium text-foreground">
+        {t("sharePage.ownerInsights")}
+      </p>
       <p className="mt-2 max-w-[240px] text-sm leading-5 text-muted-foreground">
-        Views, completion, and viewer details are visible to editors of this
-        clip.
+        {t("sharePage.ownerInsightsDescription")}
       </p>
     </div>
   );
@@ -157,6 +160,7 @@ function parseTimeParam(raw: string | null): number {
 }
 
 export default function RecordingPage() {
+  const t = useT();
   useAutoTitleBridge();
 
   const { recordingId } = useParams<{ recordingId: string }>();
@@ -271,14 +275,6 @@ export default function RecordingPage() {
   const isLoomRecording = isLoomRecordingSource(recording);
   const canUseNativeEditor = canEdit && !isLoomEmbedBacked;
   const canDelete = role === "owner";
-  const canDownloadVideo = Boolean(
-    recording?.videoUrl &&
-    !isLoomEmbedBacked &&
-    (role === "owner" ||
-      role === "admin" ||
-      role === "editor" ||
-      recording?.enableDownloads),
-  );
   const retryFinalizeAfterStorage = useCallback(async () => {
     if (!recordingId) return;
     setRetryingFinalize(true);
@@ -289,7 +285,7 @@ export default function RecordingPage() {
         ? "/_agent-native/actions/import-loom-recording"
         : "/_agent-native/actions/finalize-recording";
       if (retryingLoomImport && !recording?.sourceWindowTitle) {
-        throw new Error("This Loom recording is missing its source URL.");
+        throw new Error(t("recordingPage.loomMissingUrl"));
       }
       const res = await fetch(agentNativePath(actionPath), {
         method: "POST",
@@ -310,31 +306,37 @@ export default function RecordingPage() {
         storageSetupRequired?: boolean;
       } | null;
       if (!res.ok) {
-        throw new Error(body?.error ?? `Finalize failed (${res.status})`);
+        throw new Error(
+          body?.error ??
+            t("recordingPage.finalizeFailed", { status: res.status }),
+        );
       }
       const result = body?.result ?? body;
       if (
         result?.storageSetupRequired ||
         result?.status === "waiting_storage"
       ) {
-        toast.message("Storage still isn't connected", {
-          description:
-            "Finish the Builder.io popup or configure S3 storage, then try again.",
+        toast.message(t("recordingPage.storageStillDisconnected"), {
+          description: t("recordingPage.finishBuilderOrS3"),
         });
         return;
       }
       toast.success(
-        retryingLoomImport ? "Loom import resumed" : "Clip upload resumed",
+        retryingLoomImport
+          ? t("recordingPage.loomImportResumed")
+          : t("recordingPage.clipUploadResumed"),
       );
       await playerDataQ.refetch();
     } catch (err) {
       toast.error(
         isLoomRecording
-          ? "Couldn't retry Loom import"
-          : "Couldn't resume upload",
+          ? t("recordingPage.couldNotRetryLoom")
+          : t("recordingPage.couldNotResumeUpload"),
         {
           description:
-            err instanceof Error ? err.message : "Try again in a moment.",
+            err instanceof Error
+              ? err.message
+              : t("recordingPage.tryAgainMoment"),
           duration: 12_000,
         },
       );
@@ -345,40 +347,40 @@ export default function RecordingPage() {
   }, [isLoomRecording, playerDataQ, recording?.sourceWindowTitle, recordingId]);
   const firstCta = ctas[0] ?? null;
   const handleAiError = (err: Error) =>
-    toast.error(err?.message ?? "AI request failed");
+    toast.error(err?.message ?? t("recordingPage.aiRequestFailed"));
   const regenerateTitle = useActionMutation("regenerate-title" as any, {
     onSuccess: (result: any) => {
       if (result?.updated) {
-        toast.success("Title updated");
+        toast.success(t("recordingPage.titleUpdated"));
       } else if (result?.skipped) {
-        toast.message("Transcript is not ready yet", {
-          description: "Try again after transcription finishes.",
+        toast.message(t("recordingPage.transcriptNotReady"), {
+          description: t("recordingPage.tryAfterTranscription"),
         });
       } else {
-        toast.success("Title generation queued");
+        toast.success(t("recordingPage.titleGenerationQueued"));
       }
     },
     onError: handleAiError,
   });
   const regenerateSummary = useActionMutation("regenerate-summary" as any, {
-    onSuccess: () => toast.success("Description request queued"),
+    onSuccess: () => toast.success(t("recordingPage.descriptionQueued")),
     onError: handleAiError,
   });
   const regenerateChapters = useActionMutation("regenerate-chapters" as any, {
-    onSuccess: () => toast.success("Chapter request queued"),
+    onSuccess: () => toast.success(t("recordingPage.chapterQueued")),
     onError: handleAiError,
   });
   const removeFillerWords = useActionMutation("remove-filler-words" as any, {
-    onSuccess: () => toast.success("Filler-word removal queued"),
+    onSuccess: () => toast.success(t("recordingPage.fillerQueued")),
     onError: handleAiError,
   });
   const removeSilences = useActionMutation("remove-silences" as any, {
-    onSuccess: () => toast.success("Silence removal queued"),
+    onSuccess: () => toast.success(t("recordingPage.silenceQueued")),
     onError: handleAiError,
   });
   const generateWorkflow = useActionMutation("generate-workflow" as any, {
     onSuccess: () => {
-      toast.success("Workflow request queued");
+      toast.success(t("recordingPage.workflowQueued"));
       void generatedWorkflowQ.refetch();
     },
     onError: handleAiError,
@@ -407,7 +409,7 @@ export default function RecordingPage() {
   useEffect(() => {
     if (!recording) return;
     document.title = isDefaultTitle(recording.title)
-      ? "Clip recording · Clips"
+      ? t("recordingPage.pageTitle")
       : `${recording.title.trim()} · Clips`;
   }, [recording?.title]);
 
@@ -480,13 +482,15 @@ export default function RecordingPage() {
   if (playerDataQ.isError || !recording) {
     return (
       <div className="flex flex-col items-center justify-center h-screen w-full bg-background px-6">
-        <h1 className="text-xl font-semibold mb-2">Recording not found</h1>
+        <h1 className="text-xl font-semibold mb-2">
+          {t("recordingPage.recordingNotFound")}
+        </h1>
         <p className="text-sm text-muted-foreground mb-4">
           {(playerDataQ.error as Error | undefined)?.message ??
-            "You may not have access to this clip."}
+            t("recordingPage.noAccess")}
         </p>
         <Button onClick={() => navigate("/")} variant="outline">
-          Back to library
+          {t("recordingPage.backToLibrary")}
         </Button>
       </div>
     );
@@ -513,26 +517,26 @@ export default function RecordingPage() {
     const isFailure =
       explicitFailure || stuckFailure || waitingForStorage || nativeSaveFailed;
     const displayReason = explicitFailure
-      ? (rawFailureReason ?? "You can retry from the library.")
+      ? (rawFailureReason ?? t("recordingPage.retryLibrary"))
       : nativeSaveFailed
         ? nativeSaveFailureMessage(rawFailureReason)
         : stuckFailure
-          ? `Processing hasn't completed after 30 seconds (status=${recording.status}). The clip may not have finished uploading — check the server logs for [chunk]/[finalize] messages.`
-          : "Uploading and assembling your video — this usually takes just a few seconds.";
+          ? t("recordingPage.processingStuck", { status: recording.status })
+          : t("recordingPage.uploadingAssembling");
     const storageSetupFailure = waitingForStorage;
     const label = storageSetupFailure
       ? loomStorageSetupFailure
-        ? "Connect storage to import this Loom."
-        : "Connect storage to finish saving this clip."
+        ? t("recordingPage.connectStorageImportLoom")
+        : t("recordingPage.connectStorageFinishClip")
       : nativeSaveFailed
-        ? "Upload paused; clip saved locally."
+        ? t("recordingPage.uploadPausedSaved")
         : isFailure
-          ? "Something went wrong while saving this clip."
-          : "Finishing up your clip…";
+          ? t("recordingPage.savingWentWrong")
+          : t("recordingPage.finishingClip");
     const failureReason = storageSetupFailure
       ? loomStorageSetupFailure
-        ? "The Loom source link is preserved. Connect Builder.io or S3 storage and Clips will retry saving its own copy."
-        : "Your clip data is still preserved. Connect Builder.io or S3 storage and Clips will upload it automatically."
+        ? t("recordingPage.loomSourcePreserved")
+        : t("recordingPage.clipDataPreserved")
       : displayReason;
     const detail = failureDetail(rawFailureReason);
     return (
@@ -555,7 +559,7 @@ export default function RecordingPage() {
         role !== "viewer" ? (
           <div className="mb-4 w-full max-w-xl rounded-md border border-border bg-card p-4 text-start shadow-sm">
             <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              Details
+              {t("recordingPage.details")}
             </div>
             <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words text-xs leading-relaxed text-muted-foreground">
               {detail}
@@ -577,31 +581,31 @@ export default function RecordingPage() {
                 <Spinner className="h-8 w-8 text-muted-foreground" />
                 <div className="text-sm font-medium">
                   {loomStorageSetupFailure
-                    ? "Importing Loom..."
-                    : "Uploading saved clip…"}
+                    ? t("recordingPage.importingLoom")
+                    : t("recordingPage.uploadingSavedClip")}
                 </div>
                 <p className="text-sm text-muted-foreground">
                   {loomStorageSetupFailure
-                    ? "Storage is connected. Clips is saving its own copy now."
-                    : "Storage is connected. Clips is finishing the upload now."}
+                    ? t("recordingPage.storageConnectedSavingLoom")
+                    : t("recordingPage.storageConnectedFinishing")}
                 </p>
               </div>
             ) : (
               <StorageSetupCard
                 title={
                   loomStorageSetupFailure
-                    ? "Connect storage to import Loom"
-                    : "Connect storage to finish saving"
+                    ? t("recordingPage.connectStorageImportLoomTitle")
+                    : t("recordingPage.connectStorageFinishSaving")
                 }
                 description={
                   loomStorageSetupFailure
-                    ? "Choose where Clips should store videos. After it connects, Clips will retry this Loom import."
-                    : "Choose where Clips should store videos. After it connects, this saved clip will upload automatically."
+                    ? t("recordingPage.chooseStorageRetryLoom")
+                    : t("recordingPage.chooseStorageUpload")
                 }
                 connectedDescription={
                   loomStorageSetupFailure
-                    ? "Storage connected. Importing Loom..."
-                    : "Storage connected. Uploading this clip..."
+                    ? t("recordingPage.storageConnectedImporting")
+                    : t("recordingPage.storageConnectedUploading")
                 }
                 onConfigured={retryFinalizeAfterStorage}
               />
@@ -624,12 +628,12 @@ export default function RecordingPage() {
           >
             {storageSetupFailure
               ? loomStorageSetupFailure
-                ? "Retry import"
-                : "Retry upload"
-              : "Check again"}
+                ? t("recordingPage.retryImport")
+                : t("recordingPage.retryUpload")
+              : t("recordingPage.checkAgain")}
           </Button>
           <Button onClick={() => navigate("/")} variant="ghost" size="sm">
-            Back to library
+            {t("recordingPage.backToLibrary")}
           </Button>
         </div>
       </div>
@@ -645,7 +649,7 @@ export default function RecordingPage() {
             variant="ghost"
             size="icon"
             onClick={() => navigate("/")}
-            aria-label="Back"
+            aria-label={t("recordingPage.back")}
           >
             <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
           </Button>
@@ -676,7 +680,7 @@ export default function RecordingPage() {
               onClick={() => setEditing((v) => !v)}
             >
               <IconScissors className="h-4 w-4" />
-              {editing ? "Done" : "Edit"}
+              {editing ? t("recordingPage.done") : t("recordingPage.edit")}
             </Button>
           ) : null}
 
@@ -684,12 +688,14 @@ export default function RecordingPage() {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="outline" size="sm" className="gap-1.5">
-                  AI tools
+                  {t("recordingPage.aiTools")}
                   <IconChevronDown className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-60">
-                <DropdownMenuLabel>Enhance this recording</DropdownMenuLabel>
+                <DropdownMenuLabel>
+                  {t("recordingPage.enhanceRecording")}
+                </DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   disabled={regenerateTitle.isPending}
@@ -699,7 +705,7 @@ export default function RecordingPage() {
                     } as any)
                   }
                 >
-                  Regenerate title
+                  {t("recordingPage.regenerateTitle")}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   disabled={regenerateSummary.isPending}
@@ -709,7 +715,7 @@ export default function RecordingPage() {
                     } as any)
                   }
                 >
-                  Regenerate description
+                  {t("recordingPage.regenerateDescription")}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   disabled={regenerateChapters.isPending}
@@ -719,7 +725,7 @@ export default function RecordingPage() {
                     } as any)
                   }
                 >
-                  Auto chapters
+                  {t("recordingPage.autoChapters")}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
@@ -730,7 +736,7 @@ export default function RecordingPage() {
                     } as any)
                   }
                 >
-                  Remove filler words
+                  {t("recordingPage.removeFillerWords")}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   disabled={removeSilences.isPending}
@@ -741,7 +747,7 @@ export default function RecordingPage() {
                     } as any)
                   }
                 >
-                  Remove silences (&gt;1.2s)
+                  {t("recordingPage.removeSilences")}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 {WORKFLOW_MENU_ITEMS.map((item) => {
@@ -751,11 +757,11 @@ export default function RecordingPage() {
                       disabled={generateWorkflow.isPending}
                       onSelect={() => handleGenerateWorkflow(item.kind)}
                       className={
-                        item.tooltip ? "justify-between gap-3" : undefined
+                        item.tooltipKey ? "justify-between gap-3" : undefined
                       }
                     >
-                      <span>{item.label}</span>
-                      {item.tooltip ? (
+                      <span>{t(item.labelKey)}</span>
+                      {item.tooltipKey ? (
                         <IconHelpCircle
                           aria-hidden="true"
                           className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70"
@@ -764,7 +770,7 @@ export default function RecordingPage() {
                     </DropdownMenuItem>
                   );
 
-                  if (!item.tooltip) {
+                  if (!item.tooltipKey) {
                     return menuItem;
                   }
 
@@ -775,7 +781,7 @@ export default function RecordingPage() {
                         side="left"
                         className="max-w-64 text-xs leading-5"
                       >
-                        {item.tooltip}
+                        {t(item.tooltipKey)}
                       </TooltipContent>
                     </Tooltip>
                   );
@@ -797,18 +803,13 @@ export default function RecordingPage() {
               size="sm"
             >
               <IconShare3 className="h-4 w-4" />
-              Share
+              {t("recordingPage.share")}
             </Button>
           </ShareRecordingPopover>
 
-          {canDelete || canDownloadVideo ? (
+          {canDelete ? (
             <DeleteRecordingMenu
               recordingId={recording.id}
-              canDelete={canDelete}
-              canDownload={canDownloadVideo}
-              videoUrl={recording.videoUrl}
-              recordingTitle={recording.title}
-              videoFormat={recording.videoFormat}
               onDeleted={() => navigate("/library", { replace: true })}
             />
           ) : null}
@@ -863,10 +864,11 @@ export default function RecordingPage() {
                     >
                       <IconCalendar className="h-3 w-3" />
                       <span className="text-muted-foreground">
-                        From meeting:
+                        {t("recordingPage.fromMeeting")}
                       </span>
                       <span className="font-medium truncate max-w-[240px]">
-                        {playerDataQ.data.meeting.title || "Untitled"}
+                        {playerDataQ.data.meeting.title ||
+                          t("recordingPage.untitled")}
                       </span>
                     </NavLink>
                   ) : null}
@@ -939,20 +941,20 @@ export default function RecordingPage() {
               )}
             >
               <TabsTrigger value="agent" className="min-w-0 px-2 text-xs">
-                Agent
+                {t("recordingPage.agent")}
               </TabsTrigger>
               <TabsTrigger value="comments" className="min-w-0 px-2 text-xs">
-                Activity
+                {t("recordingPage.activity")}
               </TabsTrigger>
               <TabsTrigger value="transcript" className="min-w-0 px-2 text-xs">
-                Transcript
+                {t("recordingPage.transcript")}
               </TabsTrigger>
               <TabsTrigger value="insights" className="min-w-0 px-2 text-xs">
-                Insights
+                {t("recordingPage.insights")}
               </TabsTrigger>
               {canEdit ? (
                 <TabsTrigger value="settings" className="min-w-0 px-2 text-xs">
-                  Settings
+                  {t("recordingPage.settings")}
                 </TabsTrigger>
               ) : null}
             </TabsList>
@@ -963,7 +965,7 @@ export default function RecordingPage() {
             >
               <AgentPanel
                 browserTabId={getBrowserTabId()}
-                emptyStateText="Ask about this clip…"
+                emptyStateText={t("recordingPage.askAboutClip")}
                 dynamicSuggestions={false}
                 chatNotice={
                   generatedWorkflow ? (
@@ -973,16 +975,16 @@ export default function RecordingPage() {
                 suggestions={
                   canEdit
                     ? [
-                        "Summarize this clip",
-                        "Generate chapters from the transcript",
-                        "Find action items and follow-ups",
-                        "Draft a shareable recap",
+                        t("recordingPage.summarizeClip"),
+                        t("recordingPage.generateChapters"),
+                        t("recordingPage.findActionItems"),
+                        t("recordingPage.draftRecap"),
                       ]
                     : [
-                        "Summarize this clip",
-                        "Find the key moments",
-                        "List follow-up actions",
-                        "Draft questions for the author",
+                        t("recordingPage.summarizeClip"),
+                        t("recordingPage.findKeyMoments"),
+                        t("recordingPage.listFollowUpActions"),
+                        t("recordingPage.draftQuestions"),
                       ]
                 }
               />
@@ -1024,7 +1026,10 @@ export default function RecordingPage() {
                     })
                     .catch((err) =>
                       toast.error(
-                        `Retry failed: ${err?.message ?? "network error"}`,
+                        t("recordingPage.retryFailed", {
+                          message:
+                            err?.message ?? t("recordingPage.networkError"),
+                        }),
                       ),
                     )
                     .finally(() => playerDataQ.refetch());