@agent-native/core 0.121.1 → 0.122.0

package/corpus/templates/clips/app/lib/capture-permissions.ts

@@ -0,0 +1,110 @@
+export type CaptureHostApp = {
+  /** The name macOS lists this app under in Privacy & Security. */
+  name: string;
+  kind: "desktop" | "browser";
+};
+
+export type CapturePermissionPane = "screen" | "camera" | "microphone";
+
+export type CaptureHostEnv = {
+  userAgent: string;
+  isTauri: boolean;
+  isBrave: boolean;
+  isArc: boolean;
+};
+
+const UNKNOWN_BROWSER = "your browser";
+
+// Arc does not identify itself in the user agent, but it injects its palette
+// variables onto the document element, so a browser reporting plain Chrome
+// while exposing --arc-palette-title is Arc.
+function detectArc(): boolean {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  try {
+    return Boolean(
+      window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue("--arc-palette-title")
+        .trim(),
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function readCaptureHostEnv(): CaptureHostEnv {
+  const tauri =
+    typeof window === "undefined"
+      ? undefined
+      : (window as unknown as {
+          __TAURI_INTERNALS__?: unknown;
+          __TAURI__?: unknown;
+        });
+  return {
+    userAgent: typeof navigator === "undefined" ? "" : navigator.userAgent,
+    isTauri: Boolean(tauri?.__TAURI_INTERNALS__ || tauri?.__TAURI__),
+    isBrave:
+      typeof navigator !== "undefined" &&
+      Boolean((navigator as { brave?: unknown }).brave),
+    isArc: detectArc(),
+  };
+}
+
+export function detectCaptureHostApp(env: CaptureHostEnv): CaptureHostApp {
+  if (env.isTauri) return { name: "Clips", kind: "desktop" };
+  if (/Electron/i.test(env.userAgent)) {
+    return { name: "Agent Native", kind: "desktop" };
+  }
+  const ua = env.userAgent;
+  const name = /Vivaldi/i.test(ua)
+    ? "Vivaldi"
+    : /OPR\//i.test(ua)
+      ? "Opera"
+      : /Edg\//i.test(ua)
+        ? "Microsoft Edge"
+        : env.isBrave
+          ? "Brave Browser"
+          : env.isArc
+            ? "Arc"
+            : /Firefox\//i.test(ua)
+              ? "Firefox"
+              : /Chrome\//i.test(ua)
+                ? "Google Chrome"
+                : /Safari\//i.test(ua)
+                  ? "Safari"
+                  : UNKNOWN_BROWSER;
+  return { name, kind: "browser" };
+}
+
+/**
+ * macOS grants screen, camera, and microphone access per application, so
+ * permission guidance has to name the app hosting the recorder — Clips itself
+ * never appears in System Settings when it runs in a browser tab.
+ */
+export function getCaptureHostApp(): CaptureHostApp {
+  return detectCaptureHostApp(readCaptureHostEnv());
+}
+
+export function macSettingsPath(pane: CapturePermissionPane): string {
+  const label =
+    pane === "screen"
+      ? "Screen & System Audio Recording"
+      : pane === "camera"
+        ? "Camera"
+        : "Microphone";
+  return `System Settings > Privacy & Security > ${label}`;
+}
+
+export function macPermissionGuidanceFor(
+  pane: CapturePermissionPane,
+  host: CaptureHostApp = getCaptureHostApp(),
+): string {
+  const where = macSettingsPath(pane);
+  if (host.kind === "desktop") {
+    return `macOS grants this per app. Turn on ${host.name} in ${where}, then quit and reopen ${host.name} and start the recording again.`;
+  }
+  const subject = host.name === UNKNOWN_BROWSER ? "it" : host.name;
+  return `macOS grants this per app, not per site, so Clips is never listed by name — look for ${host.name} instead. Turn ${subject} on in ${where}, then quit and reopen it. If it is not listed yet, add it with the + button.`;
+}

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

@@ -0,0 +1,32 @@
+import { appBasePath } from "@agent-native/core/client/api-path";
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
+import {
+  buildRecordingShareUrl,
+  recordingSharePath,
+} from "@shared/recording-link";
+
+/** Absolute, ready-to-paste public share URL for a recording. */
+export function recordingShareUrl(
+  recordingId: string,
+  ownerId?: string | null,
+): string {
+  if (typeof window === "undefined") return recordingSharePath(recordingId);
+  return buildRecordingShareUrl({
+    recordingId,
+    origin: window.location.origin,
+    basePath: appBasePath(),
+    ownerId,
+  });
+}
+
+/**
+ * Copy a recording's public share link. Returns whether the write actually
+ * landed so callers can tell the user the truth instead of assuming a silent
+ * `navigator.clipboard` rejection was a success.
+ */
+export async function copyRecordingShareLink(
+  recordingId: string,
+  ownerId?: string | null,
+): Promise<boolean> {
+  return writeClipboardText(recordingShareUrl(recordingId, ownerId));
+}

package/corpus/templates/clips/app/routes/_app.meetings.$meetingId.tsx

@@ -1,3 +1,5 @@
+import { appPath } from "@agent-native/core/client/api-path";
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
 import {
   useActionMutation,
   useActionQuery,
@@ -99,6 +101,7 @@ interface Meeting {
   recordingId?: string | null;
   recordingDurationMs?: number | null;
   transcriptStatus?: "pending" | "ready" | "failed" | "in_progress" | string;
+  visibility?: "private" | "org" | "public" | null;
   shareTranscript?: boolean | null;
   summaryMd?: string | null;
   userNotesMd?: string | null;
@@ -542,6 +545,30 @@ export default function MeetingDetailRoute() {
 
   const handleEndMeeting = () => {
     if (!meeting) return;
+    // The meeting share link is valid independently of the stop call, so copy
+    // it while the user's click still counts as activation instead of waiting
+    // on the mutation. The public meeting page resolves `visibility = public`
+    // rows only — anything else would hand the user a link that 404s for the
+    // people they send it to.
+    if (meeting.visibility === "public" && typeof window !== "undefined") {
+      const shareUrl = `${window.location.origin}${appPath(
+        `/share/meeting/${meeting.id}`,
+      )}`;
+      void writeClipboardText(shareUrl).then((copied) => {
+        if (copied) {
+          toast.success(t("recordRoute.linkCopied"));
+          return;
+        }
+        toast(t("meetingDetail.share"), {
+          action: {
+            label: t("recordRoute.copyLinkAction"),
+            onClick: () => {
+              void writeClipboardText(shareUrl);
+            },
+          },
+        });
+      });
+    }
     // Optimistic: flip the live badge off immediately rather than waiting
     // for the next 2s poll — stop-meeting-recording stamps actualEnd and
     // flips transcriptStatus server-side.

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

@@ -1,5 +1,6 @@
 import { AgentPanel } from "@agent-native/core/client/agent-chat";
 import { appPath, agentNativePath } from "@agent-native/core/client/api-path";
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
 import {
   useActionMutation,
   useActionQuery,
@@ -19,7 +20,12 @@ import {
   isLoomEmbedBackedRecording,
   isLoomRecordingSource,
 } from "@shared/loom";
-import { CLIP_SHARE_REF, REF_PARAM } from "@shared/share-attribution";
+import {
+  CLIP_SHARE_REF,
+  DASHBOARD_REDIRECT_PARAM,
+  DASHBOARD_REDIRECT_VALUE,
+  REF_PARAM,
+} from "@shared/share-attribution";
 import {
   IconShare3,
   IconArrowLeft,
@@ -50,6 +56,7 @@ import { CommentsPanel } from "@/components/player/comments-panel";
 import { RecordingOptionsMenu } from "@/components/player/delete-recording-menu";
 import { InsightsPanel } from "@/components/player/insights-panel";
 import { ReactionsTray } from "@/components/player/reactions-tray";
+import { RecordingViewsBadge } from "@/components/player/recording-views-badge";
 import { SettingsPanel } from "@/components/player/settings-panel";
 import { ShareRecordingPopover } from "@/components/player/share-dialog";
 import {
@@ -85,6 +92,7 @@ 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 { recordingShareUrl } from "@/lib/recording-link";
 import { isStorageSetupFailureReason } from "@/lib/storage-failures";
 import { cn } from "@/lib/utils";
 
@@ -253,6 +261,18 @@ export default function RecordingPage() {
     }
     return currentMs;
   }, [currentMs]);
+  // The compact layout stacks the panel below the video, so switching tabs
+  // alone leaves the user looking at the player. Desktop always renders the
+  // side aside, so nothing to scroll there.
+  const openInsightsPanel = useCallback(() => {
+    setPanel("insights");
+    if (!isCompactLayout) return;
+    requestAnimationFrame(() => {
+      document
+        .getElementById("clip-activity-panel")
+        ?.scrollIntoView({ block: "start" });
+    });
+  }, [isCompactLayout]);
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -366,8 +386,11 @@ export default function RecordingPage() {
   // password.
   useEffect(() => {
     if (!recordingId || !playerDataForbidden) return;
+    const shareParams = new URLSearchParams();
+    shareParams.set(REF_PARAM, CLIP_SHARE_REF);
+    shareParams.set(DASHBOARD_REDIRECT_PARAM, DASHBOARD_REDIRECT_VALUE);
     navigate(
-      `/share/${encodeURIComponent(recordingId)}?${REF_PARAM}=${CLIP_SHARE_REF}`,
+      `/share/${encodeURIComponent(recordingId)}?${shareParams.toString()}`,
       {
         replace: true,
       },
@@ -408,23 +431,21 @@ export default function RecordingPage() {
   const visibleTitle = recording
     ? displayRecordingTitle(recording.title)
     : "Untitled Clip";
+  // Attribution `via` must never point at someone who isn't the owner, so it
+  // is only tagged when the viewer is the owner (same rule as the share dialog).
+  const shareViaId =
+    role === "owner" ? (session?.userId ?? undefined) : undefined;
   const pendingShareUrl = useMemo(() => {
     if (!recordingId || typeof window === "undefined") return "";
-    return new URL(
-      appPath(`/share/${encodeURIComponent(recordingId)}`),
-      window.location.origin,
-    ).toString();
-  }, [recordingId]);
+    return recordingShareUrl(recordingId, shareViaId);
+  }, [recordingId, shareViaId]);
   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.
-    }
+    // The full Share popover remains available when clipboard permission is
+    // unavailable, so a denied clipboard write does not block the page.
+    if (!(await writeClipboardText(pendingShareUrl))) return;
+    setPendingLinkCopied(true);
+    window.setTimeout(() => setPendingLinkCopied(false), 1400);
   }, [pendingShareUrl]);
   useEffect(() => {
     if (!recording?.id) return;
@@ -1336,6 +1357,16 @@ export default function RecordingPage() {
             ) : null}
           </div>
 
+          {!editing ? (
+            <RecordingViewsBadge
+              recordingId={recording.id}
+              viewCount={playerDataQ.data?.viewCount ?? 0}
+              canViewDetails={canEdit}
+              onOpenInsights={openInsightsPanel}
+              className="shrink-0"
+            />
+          ) : null}
+
           {canUseNativeEditor ? (
             <Button
               variant={editing ? "secondary" : "outline"}

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

@@ -46,6 +46,10 @@ import {
   createBrowserDiagnosticsCapture,
   type BrowserDiagnosticsCapture,
 } from "@/lib/browser-diagnostics-capture";
+import {
+  getCaptureHostApp,
+  macPermissionGuidanceFor,
+} from "@/lib/capture-permissions";
 import {
   COMPRESS_THRESHOLD_BYTES,
   COMPRESSION_ENABLED,
@@ -61,6 +65,7 @@ import {
   loadRecorderPreferences,
   saveRecorderPreferences,
 } from "@/lib/recorder-preferences";
+import { copyRecordingShareLink } from "@/lib/recording-link";
 import {
   buildCaptureTitle,
   defaultRecordingTitle,
@@ -87,19 +92,6 @@ async function writeAppState(key: string, value: unknown): Promise<void> {
   );
 }
 
-function recordingLink(recordingId: string): string {
-  const path = `${appBasePath()}/r/${encodeURIComponent(recordingId)}`;
-  if (typeof window === "undefined") return path;
-  return new URL(path, window.location.origin).toString();
-}
-
-async function copyRecordingLink(recordingId: string): Promise<void> {
-  if (typeof navigator === "undefined") return;
-  if (!navigator.clipboard?.writeText) return;
-  await navigator.clipboard
-    .writeText(recordingLink(recordingId))
-    .catch(() => undefined);
-}
 import {
   bugReportTitle,
   parseBugReportContext,
@@ -368,27 +360,30 @@ function permissionGuidance(
     return "Browser site permissions are not the blocker here. Open Clips directly in a browser tab, or use an app frame that delegates the selected capture sources.";
   }
   if (isScreenPermissionError(message)) {
-    if (isEmbeddedWindow()) {
+    // The desktop shell hosts the recorder in its own webview, so "open it in a
+    // real tab" is not advice a desktop user can act on.
+    if (isEmbeddedWindow() && getCaptureHostApp().kind !== "desktop") {
       return "The web client is running Clips inside a frame. Open the recorder in its own tab, then start recording; Chrome can block screen sharing in embedded pages even when macOS access is enabled.";
     }
     if (isMacPlatform()) {
-      return "Chrome can have Camera and Microphone allowed while macOS still blocks screen capture. Enable your browser in System Settings > Privacy & Security > Screen & System Audio Recording, then quit and reopen it.";
+      return `Camera and Microphone can be allowed while macOS still blocks screen capture. ${macPermissionGuidanceFor("screen")}`;
     }
     return "Choose a source in the browser screen picker. If it still fails, check this site's browser permissions and reload Clips.";
   }
   if (isCameraPermissionError(message)) {
     if (isMacPlatform()) {
-      return "Allow Camera in this site's browser settings and in macOS System Settings > Privacy & Security > Camera, then reload Clips.";
+      return `Allow Camera for this site first. ${macPermissionGuidanceFor("camera")}`;
     }
     return "Open this site's browser settings, allow Camera, then reload Clips.";
   }
   if (isMicrophonePermissionError(message)) {
     if (isMacPlatform()) {
-      return "Allow Microphone in this site's browser settings and in macOS System Settings > Privacy & Security > Microphone, then reload Clips.";
+      return `Allow Microphone for this site first. ${macPermissionGuidanceFor("microphone")}`;
     }
     return "Open this site's browser settings, allow Microphone, then reload Clips.";
   }
   if (isMacPlatform()) {
+    const host = getCaptureHostApp();
     const labels = getModePermissionLabels(opts?.mode, opts?.micDeviceId);
     if (labels.length > 0) {
       const readable = labels
@@ -400,9 +395,9 @@ function permissionGuidance(
               : "Microphone",
         )
         .join(", ");
-      return `Check this site's browser permissions first. If it still fails, enable ${readable} for your browser in macOS System Settings > Privacy & Security, then quit and reopen it.`;
+      return `Check this site's permissions first. If it still fails, turn on ${host.name} under ${readable} in macOS System Settings > Privacy & Security, then quit and reopen it. Clips is never listed there — macOS grants access to ${host.name}.`;
     }
-    return "Check this site's browser permissions first. If it still fails, open macOS System Settings > Privacy & Security for your browser, then quit and reopen it.";
+    return `Check this site's permissions first. If it still fails, turn on ${host.name} in macOS System Settings > Privacy & Security, then quit and reopen it.`;
   }
   return "Open this site's browser settings and allow the selected capture sources, then reload this page.";
 }
@@ -511,7 +506,7 @@ function friendlyRecordingErrorMessage(error: string): string {
   }
   if (isScreenPermissionError(error)) {
     if (isMacPlatform()) {
-      return "Clips could not start screen capture. Enable screen recording for your browser, then try again.";
+      return `Clips could not start screen capture. macOS is blocking screen recording for ${getCaptureHostApp().name}.`;
     }
     return "Clips could not start screen capture. Allow screen sharing for this site, then try again.";
   }
@@ -629,7 +624,10 @@ function RecordingErrorCard({
   const permissionError = !uploadFailure && isPermissionError(error);
   const policyError = !uploadFailure && isPolicyPermissionError(error);
   const embeddedScreenError =
-    !uploadFailure && isEmbeddedWindow() && isScreenPermissionError(error);
+    !uploadFailure &&
+    isEmbeddedWindow() &&
+    getCaptureHostApp().kind !== "desktop" &&
+    isScreenPermissionError(error);
   const settings = permissionError
     ? getModePermissionLabels(mode, micDeviceId)
     : [];
@@ -766,6 +764,27 @@ export default function RecordRoute() {
   const t = useT();
   const navigate = useNavigate();
   const location = useLocation();
+  // A clipboard write can be refused (insecure origin, unfocused document, no
+  // transient activation). Never let the success toast imply the link was
+  // copied when it wasn't — offer a click instead, which restores the user
+  // gesture the browser is asking for.
+  const showSavedToast = useCallback(
+    (message: string, copied: boolean, recordingId: string) => {
+      if (copied) {
+        toast.success(message, { description: t("recordRoute.linkCopied") });
+        return;
+      }
+      toast.success(message, {
+        action: {
+          label: t("recordRoute.copyLinkAction"),
+          onClick: () => {
+            void copyRecordingShareLink(recordingId);
+          },
+        },
+      });
+    },
+    [t],
+  );
   const [uiState, setUiState] = useState<UiState>("idle");
   const [error, setError] = useState<string | null>(null);
   const [isPaused, setIsPaused] = useState(false);
@@ -1723,8 +1742,13 @@ export default function RecordRoute() {
             description: t("recordRoute.connectStorageToFinish"),
             duration: 12_000,
           });
+        } else if (createdId && !reportContext) {
+          showSavedToast(
+            t("recordRoute.videoUploaded"),
+            await copyRecordingShareLink(createdId),
+            createdId,
+          );
         } else {
-          if (createdId && !reportContext) await copyRecordingLink(createdId);
           toast.success(t("recordRoute.videoUploaded"));
         }
         if (reportContext && createdId) {
@@ -1789,7 +1813,7 @@ export default function RecordRoute() {
         setUploadProgress(null);
       }
     },
-    [markStorageConfigured, navigate, probeVideoMetadata],
+    [markStorageConfigured, navigate, probeVideoMetadata, showSavedToast],
   );
 
   const importLoom = useCallback(
@@ -1827,8 +1851,11 @@ export default function RecordRoute() {
             duration: 12_000,
           });
         } else {
-          await copyRecordingLink(recordingId);
-          toast.success(t("recordRoute.loomImported"));
+          showSavedToast(
+            t("recordRoute.loomImported"),
+            await copyRecordingShareLink(recordingId),
+            recordingId,
+          );
         }
         await writeAppState("navigate", {
           view: "recording",
@@ -1845,7 +1872,7 @@ export default function RecordRoute() {
         setLoomImporting(false);
       }
     },
-    [folderIdFromUrl, navigate, spaceIdFromUrl],
+    [folderIdFromUrl, navigate, spaceIdFromUrl, showSavedToast],
   );
 
   const saveBrowserDiagnostics = useCallback(
@@ -1944,7 +1971,14 @@ export default function RecordRoute() {
   // Stop / upload / navigate.
   // -------------------------------------------------------------------------
   const finishSavedRecording = useCallback(
-    async (recordingId: string, result: RecorderFinalizeResult) => {
+    async (
+      recordingId: string,
+      result: RecorderFinalizeResult,
+      // Started by the caller the moment the recording became durable, so the
+      // clipboard write happens closer to the user's stop gesture than to the
+      // end of the post-save bookkeeping.
+      pendingCopy?: Promise<boolean>,
+    ) => {
       // Recording is fully saved — clear refs so that if anything below throws
       // and the user clicks "Try again", doCancel() won't trash a good recording.
       pendingRef.current = null;
@@ -1960,9 +1994,14 @@ export default function RecordRoute() {
           description: t("recordRoute.connectStorageToFinish"),
           duration: 12_000,
         });
-      } else {
-        if (!reportContext) await copyRecordingLink(recordingId);
+      } else if (reportContext) {
         toast.success(t("recordRoute.recordingSaved"));
+      } else {
+        showSavedToast(
+          t("recordRoute.recordingSaved"),
+          await (pendingCopy ?? copyRecordingShareLink(recordingId)),
+          recordingId,
+        );
       }
 
       if (reportContext) {
@@ -1986,7 +2025,7 @@ export default function RecordRoute() {
         navigate(`/r/${recordingId}`);
       }, 50);
     },
-    [navigate],
+    [navigate, showSavedToast],
   );
 
   const doStop = useCallback(async () => {
@@ -2056,8 +2095,15 @@ export default function RecordRoute() {
       }
 
       const stopResult = await engine.stop();
+      // The recording is durable here; saveBrowserDiagnostics is one more
+      // round trip. Start the clipboard write first so it isn't pushed even
+      // further from the stop gesture that authorized it.
+      const pendingCopy =
+        stopResult.waitingForStorage || bugReportContextRef.current
+          ? undefined
+          : copyRecordingShareLink(pending.id).catch(() => false);
       await saveBrowserDiagnostics(pending.id);
-      await finishSavedRecording(pending.id, stopResult);
+      await finishSavedRecording(pending.id, stopResult, pendingCopy);
     } catch (err) {
       const message =
         err instanceof Error ? err.message : t("recordRoute.uploadFailed");