@agent-native/core 0.92.12 → 0.94.0

package/corpus/templates/clips/app/i18n/es-ES.ts

@@ -48,6 +48,7 @@ const messages = {
   navigation: {
     brand: "Clips",
     library: "Biblioteca",
+    sharedWithMe: "Compartido conmigo",
     spaces: "Espacios",
     meetings: "Reuniones",
     dictate: "Dictar",
@@ -83,6 +84,10 @@ const messages = {
       body: "Captura tu primera grabación de pantalla y aparecerá aquí, lista para compartir.",
       cta: "Grabar tu primer Clip",
     },
+    shared: {
+      title: "Aún no han compartido clips contigo",
+      body: "Los clips que tus compañeros compartan contigo aparecerán aquí.",
+    },
     folder: {
       title: "Esta carpeta está vacía",
       body: "Arrastra grabaciones aquí o pulsa grabar para empezar algo nuevo en esta carpeta.",
@@ -304,6 +309,7 @@ const messages = {
     insights: "Perspectivas",
     downloadForMac: "Descargar para Mac",
     downloadForWindows: "Descargar para Windows",
+    downloadForLinux: "Descargar para Linux",
     downloadDesktopApp: "Descargar la aplicación de escritorio",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "es una alternativa gratuita,",
@@ -559,7 +565,7 @@ const messages = {
   downloadRoute: {
     pageTitle: "Descargar Clips Desktop",
     description:
-      "Graba tu pantalla desde la barra de menú. Aplicación de escritorio de actualización automática para macOS y Windows.",
+      "Graba tu pantalla desde la bandeja del sistema. Aplicación de escritorio con actualización automática para macOS, Windows y Linux.",
     macSublabel: "Traducido: Universal (Apple Silicon + Intel)",
     windowsSublabel: "Instalador MSI de 64 bits",
     downloadFor: "Descargar para {{platform}}",

package/corpus/templates/clips/app/i18n/fr-FR.ts

@@ -48,6 +48,7 @@ const messages = {
   navigation: {
     brand: "Clips",
     library: "Bibliothèque",
+    sharedWithMe: "Partagés avec moi",
     spaces: "Espaces",
     meetings: "Réunions",
     dictate: "Dicter",
@@ -83,6 +84,10 @@ const messages = {
       body: "Capturez votre premier enregistrement d’écran et il apparaîtra ici, prêt à partager.",
       cta: "Enregistrer votre premier Clip",
     },
+    shared: {
+      title: "Aucun clip partagé avec vous",
+      body: "Les clips que vos collègues partagent avec vous apparaîtront ici.",
+    },
     folder: {
       title: "Ce dossier est vide",
       body: "Glissez-y des enregistrements ou lancez l’enregistrement pour commencer dans ce dossier.",
@@ -304,6 +309,7 @@ const messages = {
     insights: "Connaissances",
     downloadForMac: "Télécharger pour Mac",
     downloadForWindows: "Télécharger pour Windows",
+    downloadForLinux: "Télécharger pour Linux",
     downloadDesktopApp: "Téléchargez l'application de bureau",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "est une alternative gratuite,",
@@ -559,7 +565,7 @@ const messages = {
   downloadRoute: {
     pageTitle: "Télécharger Clips Desktop",
     description:
-      "Enregistrez votre écran à partir de la barre de menu. Application de bureau à mise à jour automatique pour macOS et Windows.",
+      "Enregistrez votre écran depuis la barre d’état système. Application de bureau à mise à jour automatique pour macOS, Windows et Linux.",
     macSublabel: "Universel (Apple Silicon + Intel)",
     windowsSublabel: "Programme d'installation de MSI 64 bits",
     downloadFor: "Télécharger pour {{platform}}",

package/corpus/templates/clips/app/i18n/hi-IN.ts

@@ -48,6 +48,7 @@ const messages = {
   navigation: {
     brand: "क्लिप",
     library: "लाइब्रेरी",
+    sharedWithMe: "मेरे साथ साझा",
     spaces: "स्पेस",
     meetings: "मीटिंग्स",
     dictate: "डिक्टेट",
@@ -82,6 +83,10 @@ const messages = {
       body: "अपनी पहली स्क्रीन रिकॉर्डिंग कैप्चर करें और वह यहाँ शेयर करने के लिए तैयार मिलेगी।",
       cta: "अपना पहला Clip रिकॉर्ड करें",
     },
+    shared: {
+      title: "अभी आपके साथ कोई क्लिप साझा नहीं की गई",
+      body: "टीम के सदस्य जो क्लिप आपके साथ साझा करेंगे, वे यहाँ दिखाई देंगी।",
+    },
     folder: {
       title: "यह फ़ोल्डर खाली है",
       body: "रिकॉर्डिंग खींचकर लाएँ या इस फ़ोल्डर में कुछ नया शुरू करने के लिए रिकॉर्ड दबाएँ।",
@@ -291,6 +296,7 @@ const messages = {
     insights: "इनसाइट्स",
     downloadForMac: "Mac के लिए डाउनलोड करें",
     downloadForWindows: "Windows के लिए डाउनलोड करें",
+    downloadForLinux: "Linux के लिए डाउनलोड करें",
     downloadDesktopApp: "डेस्कटॉप ऐप डाउनलोड करें",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "एक मुफ्त,",
@@ -539,7 +545,7 @@ const messages = {
   downloadRoute: {
     pageTitle: "Clips Desktop डाउनलोड करें",
     description:
-      "मेनू बार से अपनी स्क्रीन रिकॉर्ड करें. macOS और Windows के लिए डेस्कटॉप ऐप को ऑटो-अपडेट करना।",
+      "सिस्टम ट्रे से अपनी स्क्रीन रिकॉर्ड करें। macOS, Windows और Linux के लिए ऑटो-अपडेटिंग डेस्कटॉप ऐप।",
     macSublabel: "यूनिवर्सल (Apple Silicon + Intel)",
     windowsSublabel: "64-बिट MSI इंस्टॉलर",
     downloadFor: "{{platform}} के लिए डाउनलोड करें",

package/corpus/templates/clips/app/i18n/ja-JP.ts

@@ -48,6 +48,7 @@ const messages = {
   navigation: {
     brand: "クリップ",
     library: "ライブラリ",
+    sharedWithMe: "自分と共有",
     spaces: "スペース",
     meetings: "ミーティング",
     dictate: "ディクテーション",
@@ -83,6 +84,10 @@ const messages = {
       body: "最初の画面録画を作成すると、共有できる状態でここに表示されます。",
       cta: "最初の Clip を録画",
     },
+    shared: {
+      title: "共有されたクリップはまだありません",
+      body: "チームメンバーがあなたと共有したクリップがここに表示されます。",
+    },
     folder: {
       title: "このフォルダは空です",
       body: "録画をドラッグするか、録画を押してこのフォルダで新しい内容を始めましょう。",
@@ -300,6 +305,7 @@ const messages = {
     insights: "インサイト",
     downloadForMac: "Mac 用のダウンロード",
     downloadForWindows: "Windows 用のダウンロード",
+    downloadForLinux: "Linux 用のダウンロード",
     downloadDesktopApp: "デスクトップアプリをダウンロード",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "は無料の",
@@ -554,7 +560,7 @@ const messages = {
   downloadRoute: {
     pageTitle: "ダウンロード",
     description:
-      "メニューバーから画面を録画します。 macOS および Windows のデスクトップ アプリを自動更新します。",
+      "システムトレイから画面を録画します。macOS、Windows、Linux 向けの自動更新デスクトップアプリです。",
     macSublabel: "ユニバーサル (Apple Silicon + Intel)",
     windowsSublabel: "64 ビット MSI インストーラー",
     downloadFor: "翻訳済み: Download for {{platform}}",

package/corpus/templates/clips/app/i18n/ko-KR.ts

@@ -48,6 +48,7 @@ const messages = {
   navigation: {
     brand: "클립",
     library: "라이브러리",
+    sharedWithMe: "나와 공유됨",
     spaces: "스페이스",
     meetings: "회의",
     dictate: "받아쓰기",
@@ -82,6 +83,10 @@ const messages = {
       body: "첫 화면 녹화를 만들면 공유할 준비가 된 상태로 여기에 표시됩니다.",
       cta: "첫 Clip 녹화하기",
     },
+    shared: {
+      title: "아직 공유된 클립이 없습니다",
+      body: "팀원이 나와 공유한 클립이 여기에 표시됩니다.",
+    },
     folder: {
       title: "이 폴더는 비어 있습니다",
       body: "녹화를 끌어오거나 녹화를 눌러 이 폴더에서 새 작업을 시작하세요.",
@@ -296,6 +301,7 @@ const messages = {
     insights: "인사이트",
     downloadForMac: "Mac용 다운로드",
     downloadForWindows: "Windows용 다운로드",
+    downloadForLinux: "Linux용 다운로드",
     downloadDesktopApp: "데스크톱 앱 다운로드",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "는 무료",
@@ -546,7 +552,7 @@ const messages = {
   downloadRoute: {
     pageTitle: "Clips Desktop 다운로드",
     description:
-      "메뉴 표시줄에서 화면을 녹화하세요. macOS 및 Windows용 데스크톱 앱 자동 업데이트.",
+      "시스템 트레이에서 화면을 녹화하세요. macOS, Windows 및 Linux용 자동 업데이트 데스크톱 앱입니다.",
     macSublabel: "범용(Apple Silicon + Intel)",
     windowsSublabel: "64비트 MSI 설치 프로그램",
     downloadFor: "{{platform}}용 다운로드",

package/corpus/templates/clips/app/i18n/pt-BR.ts

@@ -48,6 +48,7 @@ const messages = {
   navigation: {
     brand: "Clips",
     library: "Biblioteca",
+    sharedWithMe: "Compartilhado comigo",
     spaces: "Espaços",
     meetings: "Reuniões",
     dictate: "Ditar",
@@ -83,6 +84,10 @@ const messages = {
       body: "Capture sua primeira gravação de tela e ela aparecerá aqui, pronta para compartilhar.",
       cta: "Gravar seu primeiro Clip",
     },
+    shared: {
+      title: "Nenhum clipe compartilhado com você",
+      body: "Os clipes que seus colegas compartilharem com você aparecerão aqui.",
+    },
     folder: {
       title: "Esta pasta está vazia",
       body: "Arraste gravações para cá ou clique em gravar para começar algo novo nesta pasta.",
@@ -301,6 +306,7 @@ const messages = {
     insights: "Percepções",
     downloadForMac: "Baixar para Mac",
     downloadForWindows: "Baixar para Windows",
+    downloadForLinux: "Baixar para Linux",
     downloadDesktopApp: "Baixe o aplicativo para desktop",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "é uma alternativa gratuita,",
@@ -556,7 +562,7 @@ const messages = {
   downloadRoute: {
     pageTitle: "Baixar Clips Desktop",
     description:
-      "Grave sua tela na barra de menu. Aplicativo de desktop com atualização automática para macOS e Windows.",
+      "Grave sua tela pela bandeja do sistema. Aplicativo de desktop com atualização automática para macOS, Windows e Linux.",
     macSublabel: "Universais (Apple Silicon + Intel)",
     windowsSublabel: "Instalador MSI de 64 bits",
     downloadFor: "Baixar para {{platform}}",

package/corpus/templates/clips/app/i18n/zh-CN.ts

@@ -46,6 +46,7 @@ const messages = {
   navigation: {
     brand: "剪辑",
     library: "资料库",
+    sharedWithMe: "与我共享",
     spaces: "空间",
     meetings: "会议",
     dictate: "听写",
@@ -80,6 +81,10 @@ const messages = {
       body: "录制第一个屏幕视频后，它会出现在这里，随时可以分享。",
       cta: "录制第一个 Clip",
     },
+    shared: {
+      title: "暂时没有与你共享的剪辑",
+      body: "团队成员与你共享的剪辑会显示在这里。",
+    },
     folder: {
       title: "这个文件夹是空的",
       body: "拖入录制，或点击录制在此文件夹中开始新内容。",
@@ -283,6 +288,7 @@ const messages = {
     insights: "洞察",
     downloadForMac: "下载 Mac",
     downloadForWindows: "下载 Windows",
+    downloadForLinux: "下载 Linux",
     downloadDesktopApp: "下载桌面应用程序",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "是一款免费的",
@@ -524,7 +530,8 @@ const messages = {
   },
   downloadRoute: {
     pageTitle: "下载 Clips Desktop",
-    description: "从菜单栏录制屏幕。自动更新 macOS 和 Windows 的桌面应用程序。",
+    description:
+      "从系统托盘录制屏幕。适用于 macOS、Windows 和 Linux 的自动更新桌面应用程序。",
     macSublabel: "通用（Apple Silicon + Intel）",
     windowsSublabel: "64 位 MSI 安装程序",
     downloadFor: "下载 {{platform}}",

package/corpus/templates/clips/app/i18n/zh-TW.ts

@@ -46,6 +46,7 @@ const messages = {
   navigation: {
     brand: "剪輯",
     library: "資料庫",
+    sharedWithMe: "與我共用",
     spaces: "空間",
     meetings: "會議",
     dictate: "聽寫",
@@ -80,6 +81,10 @@ const messages = {
       body: "錄製第一個螢幕影片後，它會出現在這裡，隨時可以分享。",
       cta: "錄製第一個 Clip",
     },
+    shared: {
+      title: "目前沒有與你共用的剪輯",
+      body: "團隊成員與你共用的剪輯會顯示在這裡。",
+    },
     folder: {
       title: "這個資料夾是空的",
       body: "拖入錄製，或點選錄製在此資料夾中開始新內容。",
@@ -283,6 +288,7 @@ const messages = {
     insights: "洞察",
     downloadForMac: "下載 Mac",
     downloadForWindows: "下載 Windows",
+    downloadForLinux: "下載 Linux",
     downloadDesktopApp: "下載桌面應用程式",
     agentNativeClips: "Agent-Native Clips",
     agentNativeClipsIntro: "是一款免費的",
@@ -524,7 +530,8 @@ const messages = {
   },
   downloadRoute: {
     pageTitle: "下載 Clips Desktop",
-    description: "從選單欄錄製螢幕。自動更新 macOS 和 Windows 的桌面應用程式。",
+    description:
+      "從系統匣錄製螢幕。適用於 macOS、Windows 和 Linux 的自動更新桌面應用程式。",
     macSublabel: "通用（Apple Silicon + Intel）",
     windowsSublabel: "64 位 MSI 安裝程式",
     downloadFor: "下載 {{platform}}",

package/corpus/templates/clips/app/lib/recording-visibility.ts

@@ -0,0 +1,70 @@
+export type RecordingVisibilityAction = "pause" | "resume" | null;
+
+type RecordingVisibilityMode = "screen" | "camera" | "screen+camera";
+type RecordingVisibilityRecorderState =
+  | "idle"
+  | "pickingSources"
+  | "countdown"
+  | "recording"
+  | "paused"
+  | "stopping"
+  | "compressing"
+  | "uploading"
+  | "complete"
+  | "error";
+
+export interface RecordingVisibilityDecision {
+  action: RecordingVisibilityAction;
+  autoPaused: boolean;
+}
+
+export function isMobileRecorderRuntime(
+  navigatorLike: Pick<Navigator, "userAgent"> &
+    Partial<Pick<Navigator, "maxTouchPoints" | "platform">> & {
+      userAgentData?: { mobile?: boolean };
+    },
+): boolean {
+  return (
+    navigatorLike.userAgentData?.mobile === true ||
+    /Android|iPhone|iPad|iPod/i.test(navigatorLike.userAgent) ||
+    ((navigatorLike.maxTouchPoints ?? 0) > 1 &&
+      /Mac/i.test(navigatorLike.platform ?? navigatorLike.userAgent))
+  );
+}
+
+/**
+ * Mobile operating systems suspend camera capture when the browser is sent to
+ * the background. Pause camera-only recordings while hidden so the saved media
+ * timeline does not contain a long span with audio but no video frames.
+ */
+export function decideRecordingVisibilityAction(input: {
+  mode: RecordingVisibilityMode | null;
+  mobileRuntime: boolean;
+  documentHidden: boolean;
+  cameraTrackMuted: boolean;
+  recorderState: RecordingVisibilityRecorderState;
+  autoPaused: boolean;
+}): RecordingVisibilityDecision {
+  if (!input.mobileRuntime || input.mode !== "camera") {
+    return { action: null, autoPaused: false };
+  }
+
+  const captureSuspended = input.documentHidden || input.cameraTrackMuted;
+  if (captureSuspended && input.recorderState === "recording") {
+    return { action: "pause", autoPaused: true };
+  }
+
+  if (
+    !captureSuspended &&
+    input.autoPaused &&
+    input.recorderState === "paused"
+  ) {
+    return { action: "resume", autoPaused: false };
+  }
+
+  if (input.recorderState !== "recording" && input.recorderState !== "paused") {
+    return { action: null, autoPaused: false };
+  }
+
+  return { action: null, autoPaused: input.autoPaused };
+}

package/corpus/templates/clips/app/routes/_app.shared.tsx

@@ -0,0 +1,20 @@
+import { useT } from "@agent-native/core/client";
+
+import { LibraryGrid } from "@/components/library/library-grid";
+import enMessages from "@/i18n/en-US";
+
+export function meta() {
+  return [{ title: `${enMessages.navigation.sharedWithMe} · Clips` }];
+}
+
+export default function SharedWithMeRoute() {
+  const t = useT();
+
+  return (
+    <LibraryGrid
+      view="shared"
+      emptyKind="shared"
+      title={t("navigation.sharedWithMe")}
+    />
+  );
+}

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

@@ -3,6 +3,7 @@ import {
   IconBrandChrome,
   IconBrandApple,
   IconBrandWindows,
+  IconDeviceDesktop,
   IconExternalLink,
 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
@@ -25,7 +26,7 @@ export function meta() {
   ];
 }
 
-type PlatformId = "mac" | "windows";
+type PlatformId = "mac" | "windows" | "linux";
 
 interface PlatformVariant {
   id: PlatformId;
@@ -36,6 +37,9 @@ interface PlatformVariant {
     | "mac-arm64"
     | "mac-x64"
     | "windows-msi"
+    | "linux-appimage"
+    | "linux-deb"
+    | "linux-rpm"
   )[];
   icon: typeof IconBrandApple;
 }
@@ -60,6 +64,13 @@ const VARIANTS: PlatformVariant[] = [
     assetKinds: ["windows-msi"],
     icon: IconBrandWindows,
   },
+  {
+    id: "linux",
+    label: "Linux",
+    sublabel: "AppImage, Debian, and RPM packages",
+    assetKinds: ["linux-appimage", "linux-deb", "linux-rpm"],
+    icon: IconDeviceDesktop,
+  },
 ];
 
 interface Manifest {
@@ -80,6 +91,7 @@ function detectPlatform(): PlatformId | null {
   const ua = navigator.userAgent;
   if (/Windows/i.test(ua)) return "windows";
   if (/Mac/i.test(ua)) return "mac";
+  if (/Linux|X11/i.test(ua) && !/Android/i.test(ua)) return "linux";
   return null;
 }
 
@@ -190,7 +202,7 @@ export default function DownloadPage() {
   }, []);
 
   const primary = VARIANTS.find((v) => v.id === detected) ?? VARIANTS[0];
-  const secondary = VARIANTS.find((v) => v.id !== primary.id)!;
+  const secondary = VARIANTS.filter((v) => v.id !== primary.id);
 
   return (
     <div className="min-h-screen bg-background text-foreground">
@@ -239,12 +251,16 @@ export default function DownloadPage() {
               manifestError,
               t("downloadRoute.downloadFor", { platform: primary.label }),
             )}
-            {secondaryDownloadButton(
-              secondary,
-              manifest,
-              manifestError,
-              t("downloadRoute.alsoFor", { platform: secondary.label }),
-            )}
+            {secondary.map((variant) => (
+              <div key={variant.id}>
+                {secondaryDownloadButton(
+                  variant,
+                  manifest,
+                  manifestError,
+                  t("downloadRoute.alsoFor", { platform: variant.label }),
+                )}
+              </div>
+            ))}
             <div className="text-xs text-muted-foreground">
               {manifest ? (
                 <>

package/corpus/templates/clips/app/routes/embed.$shareId.tsx

@@ -123,6 +123,7 @@ export default function EmbedRoute() {
   });
 
   const recording = dataQ.data?.data?.recording;
+  const comments = dataQ.data?.data?.comments ?? [];
   const transcriptSegments = dataQ.data?.data?.transcript?.segments ?? [];
   const chapters = dataQ.data?.data?.chapters ?? [];
   const ctas = dataQ.data?.data?.ctas ?? [];
@@ -201,6 +202,7 @@ export default function EmbedRoute() {
         defaultSpeed={parsePlaybackSpeed(recording.defaultSpeed) ?? 1.2}
         autoPlay={autoplay}
         startMs={startMs}
+        comments={comments}
         chapters={chapters}
         transcriptSegments={transcriptSegments}
         cta={firstCta}

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

@@ -1,4 +1,5 @@
 import {
+  appPath,
   useActionMutation,
   useActionQuery,
   useSession,
@@ -240,6 +241,7 @@ export default function RecordingPage() {
   const [processingTimeout, setProcessingTimeout] = useState(false);
   const [retryingFinalize, setRetryingFinalize] = useState(false);
   const [downloading, setDownloading] = useState(false);
+  const [pendingLinkCopied, setPendingLinkCopied] = useState(false);
   const browserTabId = useMemo(() => getBrowserTabId(), []);
   const recordingScope = useMemo(
     () =>
@@ -355,6 +357,24 @@ export default function RecordingPage() {
   const visibleTitle = recording
     ? displayRecordingTitle(recording.title)
     : "Untitled Clip";
+  const pendingShareUrl = useMemo(() => {
+    if (!recordingId || typeof window === "undefined") return "";
+    return new URL(
+      appPath(`/share/${encodeURIComponent(recordingId)}`),
+      window.location.origin,
+    ).toString();
+  }, [recordingId]);
+  const copyPendingShareLink = useCallback(async () => {
+    if (!pendingShareUrl) return;
+    try {
+      await navigator.clipboard.writeText(pendingShareUrl);
+      setPendingLinkCopied(true);
+      window.setTimeout(() => setPendingLinkCopied(false), 1400);
+    } catch {
+      // The full Share popover remains available when clipboard permission is
+      // unavailable, so a denied clipboard write does not block the page.
+    }
+  }, [pendingShareUrl]);
   useEffect(() => {
     if (!recording?.id) return;
     const now = Date.now();
@@ -408,6 +428,7 @@ export default function RecordingPage() {
   const downloadRecording = useCallback(async () => {
     if (!recording?.videoUrl) return;
     setDownloading(true);
+    const downloadToastId = toast.loading(t("sharePage.downloading"));
     try {
       const res = await fetch(recording.videoUrl);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -415,7 +436,11 @@ export default function RecordingPage() {
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `${sanitizeFilename(recording.title || "clip")}.mp4`;
+      const extension =
+        blob.type.includes("webm") || recording.videoFormat === "webm"
+          ? "webm"
+          : "mp4";
+      a.download = `${sanitizeFilename(recording.title || "clip")}.${extension}`;
       document.body.appendChild(a);
       a.click();
       a.remove();
@@ -424,8 +449,9 @@ export default function RecordingPage() {
       window.open(recording.videoUrl, "_blank", "noopener,noreferrer");
     } finally {
       setDownloading(false);
+      toast.dismiss(downloadToastId);
     }
-  }, [recording?.title, recording?.videoUrl]);
+  }, [recording?.title, recording?.videoFormat, recording?.videoUrl, t]);
   const retryFinalizeAfterStorage = useCallback(async () => {
     if (!recordingId) return;
     setRetryingFinalize(true);
@@ -741,6 +767,93 @@ export default function RecordingPage() {
         : t("recordingPage.clipDataPreserved")
       : displayReason;
     const detail = failureDetail(rawFailureReason);
+    if (!isFailure) {
+      return (
+        <div className="flex min-h-screen w-full flex-col bg-background">
+          <header className="flex min-w-0 shrink-0 items-center gap-3 border-b border-border px-3 py-2 sm:px-4 sm:py-3">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="shrink-0"
+              onClick={() => navigate("/")}
+              aria-label={t("recordingPage.back")}
+            >
+              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+            </Button>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium">{visibleTitle}</p>
+              <p className="truncate text-xs text-muted-foreground">
+                {recording.ownerEmail}
+                {recording.visibility !== "private" ? (
+                  <> · {capitalize(recording.visibility)}</>
+                ) : null}
+              </p>
+            </div>
+            <ShareRecordingPopover
+              recordingId={recording.id}
+              recordingTitle={recording.title}
+              initialVisibility={recording.visibility}
+              initialRole={role}
+              hasPassword={Boolean(recording.hasPassword)}
+            >
+              <Button className="shrink-0 gap-1.5" size="sm">
+                <IconShare3 className="h-4 w-4" />
+                {t("recordingPage.share")}
+              </Button>
+            </ShareRecordingPopover>
+          </header>
+
+          <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-5 p-4 sm:p-6">
+            <div className="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl bg-black">
+              <div className="flex flex-col items-center gap-3 text-center text-white">
+                <Spinner className="size-8" />
+                <p className="text-sm font-medium">
+                  {t("recordingPage.finishingClip")}
+                </p>
+              </div>
+            </div>
+
+            <div className="mx-auto flex w-full max-w-2xl flex-col gap-3">
+              <p className="text-center text-sm text-muted-foreground">
+                {t("recordingPage.uploadingAssembling")}
+              </p>
+              {progress > 0 ? (
+                <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                  <div
+                    className="h-full bg-foreground transition-[width]"
+                    style={{
+                      width: `${Math.min(100, Math.max(0, progress))}%`,
+                    }}
+                  />
+                </div>
+              ) : null}
+              <div className="flex min-w-0 items-center gap-2 rounded-lg border border-border bg-muted/30 p-2 ps-3">
+                <div className="min-w-0 flex-1">
+                  <p className="text-[11px] font-medium text-muted-foreground">
+                    {t("shareDialog.shareLink")}
+                  </p>
+                  <p className="truncate text-sm text-foreground">
+                    {pendingShareUrl}
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0 gap-1.5"
+                  onClick={() => void copyPendingShareLink()}
+                >
+                  <IconClipboardCopy className="size-4" />
+                  {pendingLinkCopied
+                    ? t("bugReportRoute.copied")
+                    : t("shareUi.copy")}
+                </Button>
+              </div>
+            </div>
+          </main>
+        </div>
+      );
+    }
     return (
       <div className="flex flex-col items-center justify-center h-screen w-full bg-background px-6">
         {!isFailure ? (