@agent-native/core 0.130.1 → 0.130.2

package/corpus/README.md

@@ -30,4 +30,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 - core files: 1635
 - toolkit files: 160
-- template files: 6927
+- template files: 6934

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @agent-native/core
 
+## 0.130.2
+
+### Patch Changes
+
+- ae02242: Share notification emails now lead with "<sharer> shared "<title>" with you" and support overridable body paragraphs, a second dark CTA, and closing paragraphs via the new `getShareEmailExtras` registration hook.
+
 ## 0.130.1
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.130.1",
+  "version": "0.130.2",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/corpus/core/src/server/email-template.ts

@@ -42,6 +42,8 @@ export interface RenderEmailArgs {
   paragraphs: string[];
   /** Primary call-to-action rendered as a real button. */
   cta?: EmailCta;
+  /** Optional second button rendered beside the primary CTA, dark-filled. */
+  secondaryCta?: EmailCta;
   /** A treated, copyable URL shown before or after the CTA. */
   linkBlock?: EmailLinkBlock;
   /**
@@ -50,6 +52,8 @@ export interface RenderEmailArgs {
    * by app/template code (never raw user input), and escape any dynamic values.
    */
   heroHtml?: string;
+  /** Body paragraphs rendered after the CTA and link block. Escaped-by-caller. */
+  closingParagraphs?: string[];
   /** Small muted text under the CTA (e.g. expiry note). */
   footer?: string;
   /** Optional app name shown beside the framework logo. */
@@ -128,12 +132,18 @@ export function renderEmail(args: RenderEmailArgs): RenderedEmail {
   // dynamic values they interpolate.
   const heroHtml = args.heroHtml ?? "";
 
-  const paragraphsHtml = args.paragraphs
-    .map(
-      (p) =>
-        `<p style="margin:0 0 16px 0; font-size:16px; line-height:1.6; color:#d4d4d8;">${p}</p>`,
-    )
-    .join("");
+  const renderParagraphs = (paragraphs: string[] | undefined): string =>
+    (paragraphs ?? [])
+      .map(
+        (p) =>
+          `<p style="margin:0 0 16px 0; font-size:16px; line-height:1.6; color:#d4d4d8;">${p}</p>`,
+      )
+      .join("");
+
+  const paragraphsHtml = renderParagraphs(args.paragraphs);
+  const closingParagraphsHtml = args.closingParagraphs?.length
+    ? `<div style="margin:28px 0 0 0;">${renderParagraphs(args.closingParagraphs)}</div>`
+    : "";
 
   const linkBlockHtml = args.linkBlock
     ? `
@@ -148,16 +158,27 @@ export function renderEmail(args: RenderEmailArgs): RenderedEmail {
     `
     : "";
 
+  const ctaButtonCell = (
+    cta: EmailCta,
+    background: string,
+    color: string,
+    border: string,
+  ): string => `
+          <td style="border-radius:10px; background:${background}; border:${border};">
+            <a href="${escapeAttr(cta.url)}"
+               style="display:inline-block; padding:14px 26px; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:15px; font-weight:600; color:${color}; text-decoration:none; border-radius:10px;">
+              ${escapeHtml(cta.label)}
+            </a>
+          </td>`;
+
+  const secondaryCtaHtml = args.secondaryCta
+    ? `<td style="width:12px;">&nbsp;</td>${ctaButtonCell(args.secondaryCta, "#141417", "#fafafa", "1px solid #3f3f46")}`
+    : "";
+
   const ctaHtml = args.cta
     ? `
       <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:24px 0 0 0;">
-        <tr>
-          <td style="border-radius:10px; background:${ctaBg};">
-            <a href="${escapeAttr(args.cta.url)}"
-               style="display:inline-block; padding:14px 26px; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size:15px; font-weight:600; color:${ctaFg}; text-decoration:none; border-radius:10px;">
-              ${escapeHtml(args.cta.label)}
-            </a>
-          </td>
+        <tr>${ctaButtonCell(args.cta, ctaBg, ctaFg, "0")}${secondaryCtaHtml}
         </tr>
       </table>
     `
@@ -211,6 +232,7 @@ export function renderEmail(args: RenderEmailArgs): RenderedEmail {
                 ${args.linkBlock?.placement !== "after-cta" ? linkBlockHtml : ""}
                 ${ctaHtml}
                 ${args.linkBlock?.placement === "after-cta" ? linkBlockHtml : ""}
+                ${closingParagraphsHtml}
                 ${footerHtml}
               </td>
             </tr>
@@ -237,11 +259,19 @@ export function renderEmail(args: RenderEmailArgs): RenderedEmail {
     textLines.push(`${args.cta.label}: ${args.cta.url}`);
     textLines.push("");
   }
+  if (args.secondaryCta) {
+    textLines.push(`${args.secondaryCta.label}: ${args.secondaryCta.url}`);
+    textLines.push("");
+  }
   if (args.linkBlock?.placement === "after-cta") {
     textLines.push(args.linkBlock.intro);
     textLines.push(args.linkBlock.url);
     textLines.push("");
   }
+  for (const p of args.closingParagraphs ?? []) {
+    textLines.push(stripTags(p));
+    textLines.push("");
+  }
   if (args.footer) {
     textLines.push(args.footer);
   }

package/corpus/core/src/sharing/actions/share-resource.ts

@@ -4,13 +4,14 @@ import { z } from "zod";
 import { defineAction } from "../../action.js";
 import { getDbExec } from "../../db/client.js";
 import { getAppProductionUrl } from "../../server/app-url.js";
-import { renderEmail, emailStrong } from "../../server/email-template.js";
+import { emailStrong, renderEmail } from "../../server/email-template.js";
 import { sendEmail, isEmailConfigured } from "../../server/email.js";
 import { invalidateCollabAccessCache } from "../../server/poll.js";
 import { getRequestUserEmail } from "../../server/request-context.js";
 import { getUserProfile } from "../../user-profile/store.js";
 import { assertAccess, ForbiddenError } from "../access.js";
 import { requireShareableResource } from "../registry.js";
+import type { ShareEmailExtras } from "../registry.js";
 import {
   getExtensionShareChangeTargets,
   notifyExtensionShareChanged,
@@ -320,12 +321,14 @@ export default defineAction({
             );
           }
         }
+        const senderProfile = await getUserProfile(actor);
+        const senderDisplayName = senderProfile.name?.trim() || actor;
         let fromName: string | undefined;
         let replyTo: string | undefined;
         if (reg.getSender) {
           try {
             const sender = await reg.getSender(resource, {
-              sender: await getUserProfile(actor),
+              sender: senderProfile,
             });
             fromName = sender?.fromName?.trim() || undefined;
             replyTo = sender?.replyTo?.trim() || undefined;
@@ -351,18 +354,37 @@ export default defineAction({
             );
           }
         }
+        let extras: ShareEmailExtras | undefined;
+        if (reg.getShareEmailExtras) {
+          try {
+            extras =
+              (await reg.getShareEmailExtras(resource, {
+                href: notificationUrl,
+                sender: senderProfile,
+                recipientEmail: principalId,
+              })) ?? undefined;
+          } catch (err) {
+            console.error(
+              "[share-resource] share email extras resolver failed; sending the plain notification:",
+              err,
+            );
+          }
+        }
         const subject = `${actor} shared "${resourceTitle}" with you on ${appName}`;
         const { html, text } = renderEmail({
           brandName,
           brandLogoUrl,
           preheader: subject,
-          heading: "You've been given access",
-          paragraphs: [
+          heading: `${senderDisplayName} shared "${resourceTitle}" with you`,
+          paragraphs: extras?.paragraphs ?? [
             `${emailStrong(actor)} has shared the ${reg.displayName} ${emailStrong(resourceTitle)} with you as a ${emailStrong(args.role)}.`,
             `Use the button below to open it. If prompted, sign in with ${emailStrong(principalId)}.`,
           ],
           heroHtml,
           cta: { label: `Open ${reg.displayName}`, url: notificationUrl },
+          secondaryCta: extras?.secondaryCta,
+          linkBlock: extras?.linkBlock,
+          closingParagraphs: extras?.closingParagraphs,
           footer: `You received this because ${actor} granted you ${args.role} access.`,
         });
         await sendEmail({

package/corpus/core/src/sharing/index.ts

@@ -22,6 +22,7 @@ export {
   requireShareableResource,
   listShareableResources,
   type ShareableResourceRegistration,
+  type ShareEmailExtras,
 } from "./registry.js";
 
 export {

package/corpus/core/src/sharing/registry.ts

@@ -17,8 +17,20 @@
  *   });
  */
 
+import type { EmailCta, EmailLinkBlock } from "../server/email-template.js";
 import type { UserProfile } from "../user-profile/shared.js";
 
+export interface ShareEmailExtras {
+  /**
+   * Replaces the default body paragraphs between the heading and the preview.
+   * Pass `[]` to send none. Omit to keep the default copy.
+   */
+  paragraphs?: string[];
+  secondaryCta?: EmailCta;
+  linkBlock?: EmailLinkBlock;
+  closingParagraphs?: string[];
+}
+
 export interface ShareableResourceRegistration {
   /** Stable identifier used across actions, UI, and analytics. e.g. "document". */
   type: string;
@@ -85,6 +97,17 @@ export interface ShareableResourceRegistration {
     resource: any,
     ctx: { href: string; alt?: string },
   ) => string | undefined | Promise<string | undefined>;
+  /**
+   * Optional resolver for app-specific content in the share-notification
+   * email: a second button beside the primary CTA, a treated copyable link,
+   * and closing paragraphs beneath it. Closing paragraphs are injected
+   * verbatim (use `emailLink` / `emailStrong` for inline markup), so escape
+   * any dynamic values.
+   */
+  getShareEmailExtras?: (
+    resource: any,
+    ctx: { href: string; sender: UserProfile; recipientEmail: string },
+  ) => ShareEmailExtras | undefined | Promise<ShareEmailExtras | undefined>;
   /**
    * Drizzle DB accessor from the template's server/db/index.ts. Required —
    * the framework-level share actions and access helpers call this to reach

package/corpus/templates/clips/app/components/editor/editor-toolbar.tsx

@@ -505,7 +505,9 @@ export function EditorToolbar({
             </DropdownMenuItem>
           ) : null}
           <DropdownMenuSeparator />
-          <DropdownMenuItem onSelect={() => setClearOpen(true)}>
+          <DropdownMenuItem
+            onSelect={() => setTimeout(() => setClearOpen(true), 0)}
+          >
             <IconTrash className="mr-2 h-4 w-4" />
             {t("editorToolbar.clearAllEdits")}
           </DropdownMenuItem>

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -665,7 +665,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
             </div>
 
             <div className="shrink-0 space-y-2 px-3 py-2">
-              <OrgSwitcher settingsPath="/settings/organization" />
+              <OrgSwitcher settingsPath="/settings#organization" />
               <DevDatabaseLink />
             </div>
           </>

package/corpus/templates/clips/app/components/meetings/day-header.tsx

@@ -10,7 +10,7 @@ interface DayHeaderProps {
 
 export function DayHeader({ label }: DayHeaderProps) {
   return (
-    <div className="sticky top-0 z-10 -mx-1 px-1 backdrop-blur-md bg-background/85 supports-[backdrop-filter]:bg-background/70">
+    <div className="sticky top-0 z-10 -mx-1 bg-background/85 px-1">
       <div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-muted-foreground py-1.5">
         {label}
       </div>

package/corpus/templates/clips/app/components/meetings/transcript-bubbles.tsx

@@ -29,8 +29,6 @@ export interface TranscriptSegment {
 interface TranscriptBubblesProps {
   segments: TranscriptSegment[];
   isLive: boolean;
-  recordingId?: string | null;
-  onSeek: (ms: number) => void;
   /**
    * Imperative ref hook: parent can scroll a particular segment into view.
    * Receives a function (segmentIndex) => void.
@@ -93,8 +91,6 @@ function groupConsecutive(segments: TranscriptSegment[]): BubbleGroup[] {
 export function TranscriptBubbles({
   segments,
   isLive,
-  recordingId,
-  onSeek,
   registerScrollTo,
 }: TranscriptBubblesProps) {
   const t = useT();
@@ -329,7 +325,6 @@ export function TranscriptBubbles({
                 </div>
                 <div className="space-y-0.5">
                   {group.segments.map(({ seg, index }) => {
-                    const clickable = !!recordingId;
                     return (
                       <Tooltip key={index}>
                         <TooltipTrigger asChild>
@@ -337,23 +332,7 @@ export function TranscriptBubbles({
                             ref={(el) => {
                               segmentRefs.current[index] = el;
                             }}
-                            role={clickable ? "button" : undefined}
-                            tabIndex={clickable ? 0 : -1}
-                            onClick={() => clickable && onSeek(seg.startMs)}
-                            onKeyDown={(e) => {
-                              if (
-                                clickable &&
-                                (e.key === "Enter" || e.key === " ")
-                              ) {
-                                e.preventDefault();
-                                onSeek(seg.startMs);
-                              }
-                            }}
-                            className={cn(
-                              "group/segment -mx-1 rounded-md px-1 py-1 text-left text-sm leading-relaxed text-foreground transition-colors",
-                              clickable &&
-                                "cursor-pointer hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                            )}
+                            className="group/segment -mx-1 rounded-md px-1 py-1 text-left text-sm leading-relaxed text-foreground transition-colors"
                           >
                             {seg.speaker && !isMe && (
                               <span className="me-2 text-[11px] font-medium text-muted-foreground">

package/corpus/templates/clips/app/components/workspace/branding-editor.tsx

@@ -158,7 +158,7 @@ export function BrandingEditor({
 
           <div className="space-y-1.5">
             <Label>{t("brandingEditor.brandColor")}</Label>
-            <div className="flex items-center gap-2">
+            <div className="flex flex-wrap items-center gap-2">
               <input
                 type="color"
                 value={brandColor}
@@ -191,6 +191,9 @@ export function BrandingEditor({
 
           <div className="space-y-1.5">
             <Label>{t("brandingEditor.logo")}</Label>
+            <p className="text-xs text-muted-foreground">
+              {t("brandingEditor.logoUsage")}
+            </p>
             <div
               className={`rounded-md border border-dashed p-4 flex items-center gap-4 ${
                 dragging ? "bg-primary/5 border-primary" : ""
@@ -322,6 +325,28 @@ export function BrandingEditor({
                 {name || t("brandingEditor.organizationFallback")}
               </div>
             </div>
+            <div className="text-xs uppercase tracking-wide text-muted-foreground mt-4 mb-2">
+              {t("brandingEditor.emailHeaderPreview")}
+            </div>
+            <div className="rounded-md border border-[#27272a] bg-[#0a0a0c] p-4 flex items-center justify-center gap-2">
+              {brandLogoUrl ? (
+                <img
+                  src={brandLogoUrl}
+                  alt=""
+                  className="h-7 w-7 object-contain"
+                />
+              ) : (
+                <div
+                  className="h-7 w-7 rounded bg-white/90 flex items-center justify-center font-semibold text-[12px]"
+                  style={{ color: brandColor }}
+                >
+                  {name.slice(0, 1).toUpperCase() || "C"}
+                </div>
+              )}
+              <span className="font-semibold text-[#fafafa] truncate">
+                {name || t("brandingEditor.organizationFallback")}
+              </span>
+            </div>
           </div>
 
           <div className="flex justify-end">

package/corpus/templates/clips/app/components/workspace/organization-identity-card.tsx

@@ -0,0 +1,107 @@
+import { useActionQuery, useSession } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useMemo } from "react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  BrandingEditor,
+  type RecordingVisibility,
+} from "@/components/workspace/branding-editor";
+import type { MemberRole } from "@/components/workspace/members-list";
+
+interface OrganizationStateResponse {
+  organization: {
+    id: string;
+    name: string;
+    brandColor: string;
+    brandLogoUrl: string | null;
+    defaultVisibility: RecordingVisibility;
+    ownerEmail?: string;
+  } | null;
+  members: { email: string; role: MemberRole }[];
+}
+
+/**
+ * Organization identity — name, logo, brand color, default recording
+ * visibility. It sits directly above membership in the Organization tab
+ * because the name and logo are what recipients see in share emails.
+ */
+export function OrganizationIdentityCard() {
+  const t = useT();
+  const { session } = useSession();
+  const email = session?.email ?? "";
+
+  const { data, isPending, isError } =
+    useActionQuery<OrganizationStateResponse>(
+      "list-organization-state",
+      undefined,
+    );
+
+  const organization = data?.organization ?? null;
+  const members = useMemo(() => data?.members ?? [], [data?.members]);
+  const isAdmin = useMemo(() => {
+    if (organization?.ownerEmail && organization.ownerEmail === email) {
+      return true;
+    }
+    const role = members.find((m) => m.email === email)?.role;
+    return role === "admin" || role === "owner";
+  }, [members, email, organization?.ownerEmail]);
+
+  if (isPending) return <Skeleton className="h-64 w-full" />;
+  // A failed load must not look like "this org has no branding".
+  if (isError) {
+    return (
+      <Card>
+        <CardContent className="py-6 text-center text-sm text-muted-foreground">
+          {t("organizationSettings.brandingLoadFailed")}
+        </CardContent>
+      </Card>
+    );
+  }
+  if (!organization) return null;
+
+  if (!isAdmin) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("brandingEditor.title")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-3">
+            {organization.brandLogoUrl ? (
+              <img
+                src={organization.brandLogoUrl}
+                alt=""
+                className="h-10 w-10 rounded object-contain"
+              />
+            ) : (
+              <div
+                className="h-10 w-10 rounded"
+                style={{ background: organization.brandColor }}
+              />
+            )}
+            <div>
+              <div className="font-medium">{organization.name}</div>
+              <div className="text-xs text-muted-foreground">
+                {t("organizationSettings.adminsOnlyBranding")}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <BrandingEditor
+      organizationId={organization.id}
+      initialName={organization.name}
+      initialBrandColor={organization.brandColor}
+      initialBrandLogoUrl={organization.brandLogoUrl}
+      initialDefaultVisibility={organization.defaultVisibility}
+    />
+  );
+}

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

@@ -547,6 +547,8 @@ const messages = {
     useColor: "Use {{color}}",
     logo: "Logo",
     logoPreview: "Logo preview",
+    logoUsage: "Shown to recipients in share emails and on public clip pages.",
+    emailHeaderPreview: "Share email header",
     dropReplace: "Drop a new image to replace",
     dropHere: "Drop a PNG / JPG / SVG here",
     uploading: "Uploading…",
@@ -643,10 +645,6 @@ All notable user-facing changes to Clips are documented here. Open it any time f
 ### Added
 
 - See what's new right inside Clips. A changelog now lives in the command menu (Cmd+K) and in Settings.`,
-    profile: "Profile",
-    email: "Email",
-    displayName: "Display name",
-    displayNamePlaceholder: "Your name",
     playback: "Playback",
     defaultPlaybackSpeed: "Default playback speed",
     playbackDescription: "Applied automatically when you open a recording.",
@@ -786,6 +784,7 @@ All notable user-facing changes to Clips are documented here. Open it any time f
       "No organization yet. Create one from the organization switcher to get started.",
     description: "Organization admin: branding, members, invites.",
     adminsOnlyBranding: "Only admins can edit branding.",
+    brandingLoadFailed: "Couldn't load organization branding.",
     members: "Members",
     pendingInvites: "Pending invites",
     noPendingInvites: "No pending invites.",

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

@@ -495,14 +495,6 @@ export default function MeetingDetailRoute() {
     });
   };
 
-  const handleSeek = (ms: number) => {
-    if (!meeting?.recordingId) return;
-    // /r/:recordingId's `t` param is seconds (see parseTimeParam in
-    // r.$recordingId.tsx), while transcript segments use ms timestamps.
-    const seconds = Math.max(0, Math.floor(ms / 1000));
-    navigate(`/r/${meeting.recordingId}?t=${seconds}`);
-  };
-
   const handleJumpToSegment = (segmentIndex: number) => {
     transcriptScrollToRef.current?.(segmentIndex);
   };
@@ -976,8 +968,6 @@ export default function MeetingDetailRoute() {
           <TranscriptBubbles
             segments={segments}
             isLive={isLive}
-            recordingId={meeting.recordingId}
-            onSeek={handleSeek}
             registerScrollTo={(fn) => {
               transcriptScrollToRef.current = fn;
             }}