@agent-native/core 0.121.2 → 0.122.1

package/corpus/templates/clips/app/components/player/recording-views-badge.tsx

@@ -0,0 +1,335 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconTerminal2, IconUser } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface ViewerRow {
+  id: string;
+  viewerEmail: string | null;
+  viewerName: string | null;
+  totalWatchMs: number;
+  completedPct: number;
+  countedView: boolean;
+  ctaClicked: boolean;
+  firstViewedAt: string | null;
+  lastViewedAt: string | null;
+}
+
+interface AgentViewerRow {
+  agentLabel: string;
+  views: number;
+  lastSeenAt: string;
+}
+
+interface Insights {
+  views: number;
+  agentViews: number;
+  agentViewers: AgentViewerRow[];
+  uniqueViewers: number;
+  completionRate: number;
+  ctaConversionRate: number;
+  dropOff: { bucket: number; watching: number }[];
+  topViewers: {
+    viewerEmail: string | null;
+    viewerName: string | null;
+    totalWatchMs: number;
+    completedPct: number;
+  }[];
+  durationMs: number;
+}
+
+export interface RecordingViewsBadgeProps {
+  recordingId: string;
+  /** Public counted-view total. Rendered as-is when details are unavailable. */
+  viewCount: number;
+  /** True only for owner/editor — gates avatars, the popover, and all viewer identities. */
+  canViewDetails: boolean;
+  /** Optional: called by the popover's "More insights" button. Omit to hide that button. */
+  onOpenInsights?: () => void;
+  className?: string;
+}
+
+/**
+ * Header-sized view counter. Viewer identities are owner/editor-only, so a
+ * visitor gets plain text and fires no viewer queries at all — `canViewDetails`
+ * is the client half of the server-side access check on `list-viewers`.
+ */
+export function RecordingViewsBadge({
+  recordingId,
+  viewCount,
+  canViewDetails,
+  onOpenInsights,
+  className,
+}: RecordingViewsBadgeProps): React.ReactElement | null {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+
+  const viewersQuery = useActionQuery<{ viewers: ViewerRow[] }>(
+    "list-viewers",
+    { recordingId, limit: 12 },
+    { enabled: canViewDetails },
+  );
+  const insightsQuery = useActionQuery<Insights>(
+    "get-recording-insights",
+    { recordingId },
+    { enabled: canViewDetails && open },
+  );
+
+  const countLabel = t("recordingInsights.viewsCount", { count: viewCount });
+
+  if (viewCount <= 0 && !canViewDetails) return null;
+
+  if (!canViewDetails) {
+    return (
+      <span
+        className={cn("text-sm text-muted-foreground tabular-nums", className)}
+      >
+        {countLabel}
+      </span>
+    );
+  }
+
+  const viewers = viewersQuery.data?.viewers ?? [];
+  const insights = insightsQuery.data;
+  const agentViewers = insights?.agentViewers ?? [];
+  const summary = insights
+    ? t("recordingInsights.totalViewsSummary", {
+        total: insights.views,
+        unique: insights.uniqueViewers,
+      })
+    : countLabel;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild onClick={(e) => e.stopPropagation()}>
+        <button
+          type="button"
+          className={cn(
+            "inline-flex cursor-pointer items-center gap-2 rounded-full border border-border bg-card px-2 py-1 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            className,
+          )}
+        >
+          {viewers.length > 0 ? (
+            <span className="hidden -space-x-1.5 sm:flex">
+              {viewers.slice(0, 3).map((v) => (
+                <ViewerAvatar
+                  key={v.id}
+                  viewer={v}
+                  className="h-6 w-6 ring-2 ring-card"
+                />
+              ))}
+            </span>
+          ) : null}
+          <span className="tabular-nums">{countLabel}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className="w-80 p-0"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Tabs defaultValue="views">
+          <div className="p-2 pb-0">
+            <TabsList className="grid h-8 w-full grid-cols-2">
+              <TabsTrigger value="views" className="text-xs">
+                {t("recordingInsights.viewsTab")}
+              </TabsTrigger>
+              <TabsTrigger value="insights" className="text-xs">
+                {t("recordingInsights.insightsTab")}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="views" className="mt-2">
+            <div className="border-y border-border px-3 py-2 text-xs text-muted-foreground">
+              {summary}
+            </div>
+            <div className="max-h-80 overflow-y-auto p-1.5">
+              <p className="px-2 pt-1 pb-1.5 text-xs font-medium text-muted-foreground">
+                {t("recordingInsights.humanViews")}
+              </p>
+              {viewersQuery.isLoading ? (
+                <p className="px-2 py-3 text-sm text-muted-foreground">
+                  {t("recordingInsights.loading")}
+                </p>
+              ) : viewers.length === 0 ? (
+                <p className="px-2 py-3 text-sm text-muted-foreground">
+                  {t("recordingInsights.noViewsYet")}
+                </p>
+              ) : (
+                <ul className="space-y-0.5">
+                  {viewers.map((v) => (
+                    <li
+                      key={v.id}
+                      className="flex items-center gap-2 rounded-md px-2 py-1.5"
+                    >
+                      <ViewerAvatar viewer={v} />
+                      <span className="min-w-0 flex-1 truncate text-sm text-foreground">
+                        {viewerLabel(v, t("recordingInsights.anonymous"))}
+                      </span>
+                      <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+                        {Math.round(v.completedPct)}%
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              <p className="mt-2 border-t border-border px-2 pt-2.5 pb-1.5 text-xs font-medium text-muted-foreground">
+                {t("recordingInsights.agentViews")}
+              </p>
+              {agentViewers.length === 0 ? (
+                <p className="px-2 py-1.5 text-sm text-muted-foreground">
+                  {t("recordingInsights.noAgentViewsYet")}
+                </p>
+              ) : (
+                <ul className="space-y-0.5">
+                  {agentViewers.map((a) => (
+                    <li
+                      key={a.agentLabel}
+                      className="flex items-center gap-2 rounded-md px-2 py-1.5"
+                    >
+                      <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                        <IconTerminal2 className="h-3.5 w-3.5" />
+                      </span>
+                      <span className="min-w-0 flex-1 truncate text-sm text-foreground">
+                        {a.agentLabel}
+                      </span>
+                      <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+                        {t("recordingInsights.viewsCount", { count: a.views })}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="insights" className="mt-2 space-y-3 p-3 pt-1">
+            {insightsQuery.isLoading ? (
+              <p className="py-3 text-sm text-muted-foreground">
+                {t("recordingInsights.loading")}
+              </p>
+            ) : (
+              <>
+                <div className="grid grid-cols-2 gap-2">
+                  <StatCard
+                    label={t("recordingInsights.humanViews")}
+                    value={insights?.views ?? viewCount}
+                  />
+                  <StatCard
+                    label={t("recordingInsights.agentViews")}
+                    value={insights?.agentViews ?? 0}
+                  />
+                </div>
+                <div className="grid grid-cols-3 gap-2 text-xs text-muted-foreground">
+                  <MiniStat
+                    label={t("recordingInsights.uniqueViewers")}
+                    value={insights?.uniqueViewers ?? 0}
+                  />
+                  <MiniStat
+                    label={t("recordingInsights.completion")}
+                    value={`${Math.round(insights?.completionRate ?? 0)}%`}
+                  />
+                  <MiniStat
+                    label={t("recordingInsights.ctaConversion")}
+                    value={`${Math.round(insights?.ctaConversionRate ?? 0)}%`}
+                  />
+                </div>
+              </>
+            )}
+            {onOpenInsights ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="w-full cursor-pointer"
+                onClick={() => {
+                  setOpen(false);
+                  onOpenInsights();
+                }}
+              >
+                {t("recordingInsights.moreInsights")}
+              </Button>
+            ) : null}
+          </TabsContent>
+        </Tabs>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/** Identity fields every viewer surface shares — `list-viewers` rows and the
+ * leaner `topViewers` rows from `get-recording-insights` alike. */
+export interface ViewerIdentity {
+  viewerEmail: string | null;
+  viewerName: string | null;
+}
+
+export function ViewerAvatar({
+  viewer,
+  className,
+}: {
+  viewer: ViewerIdentity;
+  className?: string;
+}) {
+  const anonymous = !viewer.viewerName && !viewer.viewerEmail;
+  return (
+    <Avatar className={cn("h-6 w-6 shrink-0", className)}>
+      <AvatarFallback className="bg-primary text-[10px] text-primary-foreground">
+        {anonymous ? (
+          <IconUser className="h-3 w-3" />
+        ) : (
+          initials(viewer.viewerName || viewer.viewerEmail || "?")
+        )}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+function MiniStat({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="min-w-0">
+      <div className="truncate">{label}</div>
+      <div className="mt-0.5 text-foreground tabular-nums">{value}</div>
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-2.5">
+      <div className="text-xs text-muted-foreground">{label}</div>
+      <div className="mt-0.5 text-xl font-semibold text-foreground tabular-nums">
+        {value}
+      </div>
+    </div>
+  );
+}
+
+export function viewerLabel(
+  viewer: ViewerIdentity,
+  anonymousLabel: string,
+): string {
+  if (viewer.viewerName) return viewer.viewerName;
+  if (viewer.viewerEmail) return viewer.viewerEmail.split("@")[0];
+  return anonymousLabel;
+}
+
+function initials(s: string): string {
+  return s
+    .split(/\s+|@/)
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? "")
+    .join("");
+}

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

@@ -1400,7 +1400,10 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
                 v,
                 resolvedDurationMs,
               );
-              if (visibleMs !== ms) {
+              // Only ever correct forward (skipping a trimmed range). Seeking
+              // backwards here flushes the decode pipeline and replays from the
+              // previous keyframe, which reads as a stutter with a buffering flash.
+              if (visibleMs > ms) {
                 v.currentTime = visibleMs / 1000;
                 setCurrentMs(visibleMs);
                 if (visibleMs > 0) {
@@ -1815,21 +1818,23 @@ function CenterPlaybackOverlay({
  * trustworthy finite number we have — preferring the resolved duration from
  * the player, then falling back to `video.duration`, then the seekable range.
  */
-function clampSeek(
+export function clampSeek(
   ms: number,
   v: HTMLVideoElement,
   resolvedDurationMs: number,
 ): number {
-  let maxSec = Number.POSITIVE_INFINITY;
+  // Clamp in integer milliseconds. Routing through seconds and back loses 1ms
+  // for ~1% of integer inputs (1001 -> 1000), which the timeupdate handler
+  // would then "correct" by seeking the player backwards.
+  let maxMs = Number.POSITIVE_INFINITY;
   if (resolvedDurationMs > 0) {
-    maxSec = resolvedDurationMs / 1000;
+    maxMs = resolvedDurationMs;
   } else if (Number.isFinite(v.duration) && v.duration > 0) {
-    maxSec = v.duration;
+    maxMs = v.duration * 1000;
   } else if (v.seekable && v.seekable.length > 0) {
-    maxSec = v.seekable.end(v.seekable.length - 1);
+    maxMs = v.seekable.end(v.seekable.length - 1) * 1000;
   }
-  const sec = Math.max(0, Math.min(maxSec, ms / 1000));
-  return Math.floor(sec * 1000);
+  return Math.floor(Math.max(0, Math.min(maxMs, ms)));
 }
 
 function skipExcludedRange(

package/corpus/templates/clips/app/components/sharing/share-ui.tsx

@@ -1,3 +1,4 @@
+import { writeClipboardText } from "@agent-native/core/client/clipboard";
 import {
   useActionMutation,
   useActionQuery,
@@ -70,7 +71,7 @@ export const ROLE_OPTIONS: Array<{ value: Role; label: string }> = [
 ];
 
 export function copyToClipboard(value: string): void {
-  navigator.clipboard.writeText(value).catch(() => {});
+  void writeClipboardText(value);
 }
 
 // ---------------------------------------------------------------------------

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -288,7 +288,6 @@ const messages = {
     storageConnectedChecking: "Storage connected. Checking this clip...",
     signInToFinish: "Sign in to finish",
     signInIfYours: "Sign in if this is yours",
-    openDashboard: "Open dashboard",
     checkAgain: "Check again",
     backToHome: "Back to home",
     generatingTitle: "Generating title",
@@ -807,11 +806,21 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     recentViewers: "Recent viewers",
     noViewers: "No viewers yet.",
     anonymous: "Anonymous",
-    anon: "Anon",
     moreViewers: "+{{count}} more",
     viewedBy: "Viewed by",
     someone: "Someone",
     noViewsYet: "No views yet.",
+    viewsCount_one: "{{count}} view",
+    viewsCount_other: "{{count}} views",
+    totalViewsSummary: "{{total}} total views, {{unique}} unique viewers",
+    viewsTab: "Views",
+    insightsTab: "Insights",
+    humanViews: "Human views",
+    agentViews: "Agent views",
+    noAgentViewsYet: "No agent views yet.",
+    totalVideoViews: "Total video views",
+    averageCompletionRate: "Average completion rate",
+    moreInsights: "More insights",
   },
   libraryGrid: {
     spaceRoot: "Space root",
@@ -1291,6 +1300,8 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     couldNotImportLoom: "Could not import that Loom.",
     recordingReadyToUpload: "Recording is ready to upload",
     recordingSaved: "Recording saved",
+    linkCopied: "Link copied",
+    copyLinkAction: "Copy link",
     noLocalRecordingData: "No local recording data is available to download.",
     recordingDownloadStarted: "Recording download started",
     backToLibrary: "Back to library",

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.library._index.tsx

@@ -6,7 +6,7 @@ import { LibraryGrid } from "@/components/library/library-grid";
 import { usePageHeaderLayout } from "@/components/library/page-header";
 import { Button } from "@/components/ui/button";
 
-const SEO_TITLE = "Agent-Native Clips - Open Source screen recorder";
+const SEO_TITLE = "Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";
 

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/_index.tsx

@@ -1,7 +1,7 @@
 import { DefaultSpinner } from "@agent-native/core/client/ui";
 import { redirect, type LoaderFunctionArgs } from "react-router";
 
-const SEO_TITLE = "Agent-Native Clips - Open Source screen recorder";
+const SEO_TITLE = "Clips - Open Source screen recorder";
 const SEO_DESCRIPTION =
   "Open Source screen recorder and meeting-notes app with AI transcripts, summaries, search, dictation, and agent-readable share links.";