@agent-native/core 0.155.0 → 0.157.1

package/corpus/templates/clips/app/components/player/share-dialog.tsx

@@ -6,8 +6,8 @@ import {
   useSession,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { ShareAgentsSection } from "@agent-native/toolkit/sharing";
 import {
-  IconChevronDown,
   IconCode,
   IconExternalLink,
   IconLink,
@@ -35,11 +35,6 @@ import {
   type Visibility,
 } from "@/components/sharing/share-ui";
 import { Button } from "@/components/ui/button";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -52,6 +47,7 @@ import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 
+import { buildAgentApiUrls } from "../../../shared/agent-context";
 import { buildEmailPreviewMarkup } from "../../../shared/email-preview";
 import { isLoomEmbedUrl } from "../../../shared/loom";
 import { withShareAttribution } from "../../../shared/share-attribution";
@@ -62,6 +58,14 @@ function absoluteAppUrl(path: string): string {
   return new URL(appPath(path), window.location.origin).toString();
 }
 
+function absolutePublicAgentContextUrl(recordingId: string): string {
+  if (typeof window === "undefined") return "";
+  return buildAgentApiUrls(recordingId, {
+    origin: window.location.origin,
+    basePath: appPath("/").replace(/\/$/, ""),
+  }).contextUrl;
+}
+
 export interface ShareRecordingPopoverProps {
   recordingId: string;
   recordingTitle?: string;
@@ -72,6 +76,13 @@ export interface ShareRecordingPopoverProps {
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
   hasPassword?: boolean;
+  /**
+   * Restricts the dialog to a bare copy-link control for viewers who can
+   * reshare a public/org clip's link but have no edit access: it skips
+   * `list-resource-shares` (which returns every individually-shared
+   * principal's email to any reader) and hides the Invite tab entirely.
+   */
+  viewerReshareOnly?: boolean;
   /** Trigger element rendered as the popover anchor (usually the Share button). */
   children: ReactNode;
   open?: boolean;
@@ -103,6 +114,7 @@ export function ShareRecordingPopover({
   animatedThumbnailUrl,
   isLoomRecording = false,
   hasPassword,
+  viewerReshareOnly = false,
   children,
   open,
   onOpenChange,
@@ -125,6 +137,7 @@ export function ShareRecordingPopover({
           animatedThumbnailUrl={animatedThumbnailUrl}
           isLoomRecording={isLoomRecording}
           hasPassword={hasPassword}
+          viewerReshareOnly={viewerReshareOnly}
         />
       </PopoverContent>
     </Popover>
@@ -148,6 +161,7 @@ export function ShareRecordingDialog({
   open,
   onOpenChange,
   hasPassword,
+  viewerReshareOnly = false,
 }: ShareRecordingDialogProps) {
   const t = useT();
   return (
@@ -168,6 +182,7 @@ export function ShareRecordingDialog({
           animatedThumbnailUrl={animatedThumbnailUrl}
           isLoomRecording={isLoomRecording}
           hasPassword={hasPassword}
+          viewerReshareOnly={viewerReshareOnly}
           reserveCloseButton
         />
       </DialogContent>
@@ -186,6 +201,7 @@ function ShareRecordingContent({
   isLoomRecording = false,
   reserveCloseButton = false,
   hasPassword,
+  viewerReshareOnly = false,
 }: {
   recordingId: string;
   recordingTitle?: string;
@@ -197,20 +213,34 @@ function ShareRecordingContent({
   isLoomRecording?: boolean;
   reserveCloseButton?: boolean;
   hasPassword?: boolean;
+  viewerReshareOnly?: boolean;
 }) {
   const t = useT();
-  const sharesQuery = useActionQuery<SharesResponse>("list-resource-shares", {
-    resourceType: "recording",
-    resourceId: recordingId,
-  });
+  const sharesQuery = useActionQuery<SharesResponse>(
+    "list-resource-shares",
+    { resourceType: "recording", resourceId: recordingId },
+    { enabled: !viewerReshareOnly },
+  );
 
-  const data = sharesQuery.data;
+  const data = viewerReshareOnly ? undefined : sharesQuery.data;
   const role = data?.role ?? initialRole;
   const canManage = role === "owner" || role === "admin";
+  // Editors could always see (read-only) who a clip is shared with; only
+  // gate the Invite tab's mutation controls behind canManage. Commenters are
+  // grouped with plain viewers here -- neither can manage shares.
+  const canViewShares =
+    role === "owner" || role === "admin" || role === "editor";
   const visibility =
     (data?.visibility as Visibility | null | undefined) ??
     initialVisibility ??
     null;
+  // A plain viewer/commenter can't produce a working embed for a non-public
+  // clip (they have no way to make it public), so don't dangle the tab in
+  // front of them only to show an "ask the owner" dead end. Owner/admin/
+  // editor keep it regardless of visibility since they can flip to public
+  // from inside it.
+  const canEmbed = canViewShares || visibility === "public";
+  const tabCount = 1 + (canViewShares ? 1 : 0) + (canEmbed ? 1 : 0);
 
   // Attribution `via` must be a stable non-PII id, never an email. The only
   // owner id available client-side is the *current* session's userId, which is
@@ -234,20 +264,28 @@ function ShareRecordingContent({
         defaultValue="link"
         className={cn("min-w-0 px-4 py-3", reserveCloseButton && "pe-12")}
       >
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="link" className="gap-1.5">
-            <IconLink size={14} />
-            {t("shareDialog.link")}
-          </TabsTrigger>
-          <TabsTrigger value="invite" className="gap-1.5">
-            <IconMail size={14} />
-            {t("shareDialog.invite")}
-          </TabsTrigger>
-          <TabsTrigger value="embed" className="gap-1.5">
-            <IconCode size={14} />
-            {t("shareDialog.embed")}
-          </TabsTrigger>
-        </TabsList>
+        {tabCount > 1 ? (
+          <TabsList
+            className={`grid w-full ${tabCount === 3 ? "grid-cols-3" : "grid-cols-2"}`}
+          >
+            <TabsTrigger value="link" className="gap-1.5">
+              <IconLink size={14} />
+              {t("shareDialog.link")}
+            </TabsTrigger>
+            {canViewShares ? (
+              <TabsTrigger value="invite" className="gap-1.5">
+                <IconMail size={14} />
+                {t("shareDialog.invite")}
+              </TabsTrigger>
+            ) : null}
+            {canEmbed ? (
+              <TabsTrigger value="embed" className="gap-1.5">
+                <IconCode size={14} />
+                {t("shareDialog.embed")}
+              </TabsTrigger>
+            ) : null}
+          </TabsList>
+        ) : null}
 
         <TabsContent value="link" className="mt-3">
           <LinkTab
@@ -262,34 +300,39 @@ function ShareRecordingContent({
             animatedThumbnailUrl={animatedThumbnailUrl}
             isLoomRecording={isLoomRecording}
             hasPassword={hasPassword}
+            canViewShares={canViewShares}
           />
         </TabsContent>
 
-        <TabsContent value="invite" className="mt-3">
-          <SharePeopleTab
-            resourceType="recording"
-            resourceId={recordingId}
-            resourceUrl={absoluteAppUrl(`/r/${recordingId}`)}
-            sharesQuery={sharesQuery}
-            canManage={canManage}
-            roleCopy={{
-              commenter: {
-                label: t("shareUi.recordingCommenter.label"),
-                description: t("shareUi.recordingCommenter.description"),
-              },
-            }}
-          />
-        </TabsContent>
-
-        <TabsContent value="embed" className="mt-3">
-          <ClipsEmbedConfigurator
-            recordingId={recordingId}
-            sharesQuery={sharesQuery}
-            visibility={visibility}
-            canManage={canManage}
-            ownerViaId={ownerViaId}
-          />
-        </TabsContent>
+        {canViewShares ? (
+          <TabsContent value="invite" className="mt-3">
+            <SharePeopleTab
+              resourceType="recording"
+              resourceId={recordingId}
+              resourceUrl={absoluteAppUrl(`/r/${recordingId}`)}
+              sharesQuery={sharesQuery}
+              canManage={canManage}
+              roleCopy={{
+                commenter: {
+                  label: t("shareUi.recordingCommenter.label"),
+                  description: t("shareUi.recordingCommenter.description"),
+                },
+              }}
+            />
+          </TabsContent>
+        ) : null}
+
+        {canEmbed ? (
+          <TabsContent value="embed" className="mt-3">
+            <ClipsEmbedConfigurator
+              recordingId={recordingId}
+              sharesQuery={sharesQuery}
+              visibility={visibility}
+              canManage={canManage}
+              ownerViaId={ownerViaId}
+            />
+          </TabsContent>
+        ) : null}
       </Tabs>
     </>
   );
@@ -311,6 +354,7 @@ function LinkTab({
   animatedThumbnailUrl,
   isLoomRecording: isLoomRecordingProp,
   hasPassword,
+  canViewShares,
 }: {
   recordingId: string;
   recordingTitle?: string;
@@ -323,6 +367,7 @@ function LinkTab({
   animatedThumbnailUrl?: string | null;
   isLoomRecording?: boolean;
   hasPassword?: boolean;
+  canViewShares: boolean;
 }) {
   const t = useT();
   const { setResourceVisibility, isPending } = useResourceVisibilityMutation(
@@ -334,6 +379,14 @@ function LinkTab({
   const sharesLoaded = visibility !== null;
   const visibilityPending = isPending || sharesQuery.isLoading;
   const isLoomRecording = isLoomRecordingProp || isLoomEmbedUrl(videoUrl);
+  const needsScopedAgentContext = !isPublic || hasPassword !== false;
+  const publicAgentContextUrl = useMemo(
+    () =>
+      isPublic && hasPassword === false
+        ? absolutePublicAgentContextUrl(recordingId)
+        : "",
+    [hasPassword, isPublic, recordingId],
+  );
   const emailPreviewThumbnailUrl = useMemo(() => {
     if (!isPublic || hasPassword !== false || !sharesLoaded) return null;
     const variant = preferredThumbnailVariant({
@@ -397,10 +450,10 @@ function LinkTab({
     try {
       const result = (await createAgentLinkAsyncRef.current({
         recordingId,
-      })) as { url?: string };
+      })) as { contextUrl?: string };
       if (agentLinkRequestIdRef.current !== requestId) return;
-      if (result?.url) {
-        setAgentContextUrl(result.url);
+      if (result?.contextUrl) {
+        setAgentContextUrl(result.contextUrl);
       } else {
         setAgentLinkError(true);
       }
@@ -416,20 +469,30 @@ function LinkTab({
     setAgentLinkError(false);
     if (!sharesLoaded) return;
 
-    if (!isPublic) {
+    if (needsScopedAgentContext) {
       void loadAgentContextUrl();
     }
 
     return () => {
       agentLinkRequestIdRef.current += 1;
     };
-  }, [isPublic, loadAgentContextUrl, recordingId, sharesLoaded, visibility]);
+  }, [
+    loadAgentContextUrl,
+    needsScopedAgentContext,
+    recordingId,
+    sharesLoaded,
+    visibility,
+  ]);
 
-  const agentLink = isPublic ? shareUrl : agentContextUrl;
+  const agentLink = isPublic
+    ? publicAgentContextUrl || agentContextUrl
+    : agentContextUrl;
   const agentShareDisabled =
     visibilityPending ||
     !sharesLoaded ||
-    (!isPublic && (isPending || createAgentLink.isPending || !agentContextUrl));
+    !agentLink ||
+    (needsScopedAgentContext &&
+      (isPending || createAgentLink.isPending || !agentContextUrl));
   const agentPrompt = agentLink
     ? t("shareDialog.agentPrompt", { agentContextUrl: agentLink })
     : "";
@@ -460,21 +523,23 @@ function LinkTab({
 
   return (
     <div className="space-y-4">
-      {visibility ? (
-        <GeneralAccessSelect
-          visibility={visibility}
-          canManage={canManage}
-          isPending={visibilityPending}
-          onChange={(next) => setResourceVisibility(next)}
-          publicDescription={t("shareDialog.publicDescription")}
-          showDescription={false}
-        />
-      ) : (
-        <div className="space-y-2" aria-hidden>
-          <div className="h-3 w-24 animate-pulse rounded bg-muted" />
-          <div className="h-12 w-full animate-pulse rounded bg-muted" />
-        </div>
-      )}
+      {canViewShares ? (
+        visibility ? (
+          <GeneralAccessSelect
+            visibility={visibility}
+            canManage={canManage}
+            isPending={visibilityPending}
+            onChange={(next) => setResourceVisibility(next)}
+            publicDescription={t("shareDialog.publicDescription")}
+            showDescription={false}
+          />
+        ) : (
+          <div className="space-y-2" aria-hidden>
+            <div className="h-3 w-24 animate-pulse rounded bg-muted" />
+            <div className="h-12 w-full animate-pulse rounded bg-muted" />
+          </div>
+        )
+      ) : null}
 
       <CopyField
         label={
@@ -486,71 +551,49 @@ function LinkTab({
         disabled={visibilityPending || !sharesLoaded}
       />
 
-      {!isPublic ? (
-        <Collapsible
-          open={agentDetailsOpen}
-          onOpenChange={setAgentDetailsOpen}
-          className="overflow-hidden rounded-md border border-border"
-        >
-          <CollapsibleTrigger asChild>
-            <button
-              type="button"
-              className="flex min-h-10 w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-            >
-              <span className="flex min-w-0 items-center gap-2 truncate">
-                <IconLink
-                  aria-hidden="true"
-                  className="size-3.5 shrink-0 text-muted-foreground"
-                  strokeWidth={1.8}
-                />
-                {t("shareDialog.shareWithAgents")}
-              </span>
-              <IconChevronDown
-                aria-hidden="true"
-                className={`size-4 shrink-0 text-muted-foreground transition-transform ${agentDetailsOpen ? "rotate-180" : ""}`}
-              />
-            </button>
-          </CollapsibleTrigger>
-          <CollapsibleContent className="clips-collapsible-content border-t border-border px-3 py-3">
-            <div className="space-y-2">
-              <CopyField
-                label={t("shareDialog.shareWithAgents")}
-                value={agentLink}
-                disabled={agentShareDisabled}
-              />
-              {sharesLoaded ? (
-                <>
+      <ShareAgentsSection
+        label={t("shareDialog.shareWithAgents")}
+        open={agentDetailsOpen}
+        onOpenChange={setAgentDetailsOpen}
+        contentClassName="clips-collapsible-content"
+      >
+        <div className="space-y-2">
+          <CopyField
+            label={t("shareDialog.shareLink")}
+            value={agentLink}
+            disabled={agentShareDisabled}
+          />
+          {sharesLoaded ? (
+            <>
+              <p className="text-xs text-muted-foreground">
+                {t("shareDialog.agentTokenDescription")}
+              </p>
+              {agentLinkError ? (
+                <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
                   <p className="text-xs text-muted-foreground">
-                    {t("shareDialog.agentTokenDescription")}
+                    {t("shareDialog.agentLinkUnavailable")}
                   </p>
-                  {agentLinkError ? (
-                    <div className="flex items-center justify-between gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
-                      <p className="text-xs text-muted-foreground">
-                        {t("shareDialog.agentLinkUnavailable")}
-                      </p>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-7"
-                        onClick={() => void loadAgentContextUrl()}
-                        disabled={createAgentLink.isPending}
-                      >
-                        {t("shareDialog.retryAgentLink")}
-                      </Button>
-                    </div>
-                  ) : null}
-                  <CopyField
-                    label={t("shareDialog.copyAgentPrompt")}
-                    value={agentPrompt}
-                    disabled={agentShareDisabled}
-                  />
-                </>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7"
+                    onClick={() => void loadAgentContextUrl()}
+                    disabled={createAgentLink.isPending}
+                  >
+                    {t("shareDialog.retryAgentLink")}
+                  </Button>
+                </div>
               ) : null}
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      ) : null}
+              <CopyField
+                label={t("shareDialog.copyAgentPrompt")}
+                value={agentPrompt}
+                disabled={agentShareDisabled}
+              />
+            </>
+          ) : null}
+        </div>
+      </ShareAgentsSection>
 
       {showMakePublic ? (
         <MakePublicCard

package/corpus/templates/clips/app/components/recorder/recorder-engine.ts

@@ -8,10 +8,6 @@ import {
   isLikelyPhoneMicLabel,
   type AudioInputFallback,
 } from "@shared/media-device-selection";
-import {
-  createMicAudioCleanup,
-  type MicAudioCleanupHandle,
-} from "@shared/mic-audio-cleanup";
 import {
   SCREEN_CAPTURE_FRAME_RATE,
   screenCaptureDisplayOptions,
@@ -509,7 +505,6 @@ export class RecorderEngine {
   private cameraComposite: CameraCompositeHandle | null = null;
   private audioMixCtx: AudioContext | null = null;
   private audioMixSources: MediaStreamAudioSourceNode[] = [];
-  private micAudioCleanup: MicAudioCleanupHandle[] = [];
   private recorder: MediaRecorder | null = null;
   private mimeType: string = "video/webm";
 
@@ -1360,7 +1355,6 @@ export class RecorderEngine {
     // Full stream teardown happens in the finally block below.
     this.cameraLive = false;
     this.audioMixSources = [];
-    this.stopMicAudioCleanup();
     this.audioMixCtx?.close().catch(() => {});
     this.audioMixCtx = null;
     for (const s of [this.cameraStream, this.rawCameraStream, this.micStream]) {
@@ -1828,26 +1822,15 @@ export class RecorderEngine {
     this.audioMixSources = [];
     const dest = ctx.createMediaStreamDestination();
     for (const input of audioInputs) {
-      let track = input.track;
-      if (input.isMicrophone) {
-        const cleanup = createMicAudioCleanup(new MediaStream([track]), {
-          audioContext: ctx,
-        });
-        this.micAudioCleanup.push(cleanup);
-        track = cleanup.stream.getAudioTracks()[0] ?? track;
-      }
-      const source = ctx.createMediaStreamSource(new MediaStream([track]));
+      const source = ctx.createMediaStreamSource(
+        new MediaStream([input.track]),
+      );
       source.connect(dest);
       this.audioMixSources.push(source);
     }
     return dest.stream.getAudioTracks()[0];
   }
 
-  private stopMicAudioCleanup(): void {
-    for (const cleanup of this.micAudioCleanup) cleanup.stop();
-    this.micAudioCleanup = [];
-  }
-
   private buildCombinedStream(): MediaStream {
     if (this.opts.mode === "screen") {
       return this.buildDisplayRecordingStream();
@@ -2382,7 +2365,6 @@ export class RecorderEngine {
     // aren't mistaken for a disconnect.
     this.cameraLive = false;
     this.audioMixSources = [];
-    this.stopMicAudioCleanup();
     this.audioMixCtx?.close().catch(() => {});
     this.audioMixCtx = null;
     this.cameraComposite?.cleanup();

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

@@ -4,9 +4,8 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { ShareCopyRow } from "@agent-native/toolkit/sharing";
 import {
-  IconCheck,
-  IconLink,
   IconLock,
   IconSend2,
   IconTrash,
@@ -281,35 +280,19 @@ export function CopyField({
   description?: string;
 }) {
   const t = useT();
-  const [copied, setCopied] = useState(false);
-  const copy = () => {
-    if (disabled) return;
-    copyToClipboard(value);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1400);
-  };
   return (
-    <div className="flex items-center justify-between gap-3">
-      <div className="min-w-0">
-        {label ? <div className="text-sm font-medium">{label}</div> : null}
-        {description ? (
-          <div className="text-xs text-muted-foreground">{description}</div>
-        ) : null}
-      </div>
-      <div aria-live="polite" className="shrink-0">
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={copy}
-          disabled={disabled}
-          className="h-9"
-        >
-          {copied ? <IconCheck size={14} /> : <IconLink size={14} />}
-          {copied ? t("recordRoute.linkCopied") : t("shareUi.copy")}
-        </Button>
-      </div>
-    </div>
+    <ShareCopyRow
+      label={label}
+      value={value}
+      description={description}
+      disabled={disabled}
+      copyLabel={t("shareUi.copy")}
+      copiedLabel={t("recordRoute.linkCopied")}
+      onCopy={(nextValue) => {
+        copyToClipboard(nextValue);
+        return true;
+      }}
+    />
   );
 }
 

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

@@ -256,6 +256,16 @@ const messages = {
     passwordProtected: "This clip is password-protected",
     linkExpired: "Link expired",
     linkExpiredMessage: "The creator set an expiry on this share link.",
+    privateClip: "Private clip",
+    privateClipMessage:
+      "This clip is private. Request access and the owner will be notified.",
+    privateClipSignedOutMessage:
+      "This clip is private. Sign in to request access from the owner.",
+    requestAccess: "Request access",
+    requestingAccess: "Requesting access...",
+    accessRequested: "Access requested",
+    accessRequestSent: "The clip owner was notified.",
+    accessRequestFailed: "Couldn't request access. Try again.",
     clipUnavailable: "Clip unavailable",
     clipUnavailableMessage:
       "This recording isn't public, or the link is invalid. If it's your clip, sign in to check access.",

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

@@ -5,6 +5,7 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { ShareTrigger } from "@agent-native/toolkit/sharing";
 import {
   IconArrowLeft,
   IconCheck,
@@ -18,7 +19,6 @@ import {
   IconNotes,
   IconPlayerStop,
   IconRefresh,
-  IconShare3,
   IconTrash,
   IconUsers,
 } from "@tabler/icons-react";
@@ -711,10 +711,10 @@ export default function MeetingDetailRoute() {
                 Boolean(data?.transcript?.fullText?.trim()))
             }
           >
-            <Button size="sm" className="shrink-0 gap-1.5">
-              <IconShare3 className="h-4 w-4" />
-              {t("meetingDetail.share")}
-            </Button>
+            <ShareTrigger
+              label={t("meetingDetail.share")}
+              className="shrink-0"
+            />
           </ShareMeetingPopover>
           {canEdit && (
             <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>