@agent-native/core 0.130.0 → 0.130.2

package/corpus/core/src/integrations/task-queue-stats.ts

@@ -8,6 +8,7 @@
  * columns before the SELECTs execute.
  */
 import { getDbExec } from "../db/client.js";
+import { ensureA2AContinuationsTable } from "./a2a-continuations-store.js";
 import { ensurePendingTasksTable } from "./pending-tasks-store.js";
 
 export interface RecentFailure {
@@ -23,6 +24,18 @@ export interface TaskQueueStats {
   completed_last_hour: number;
   failed_last_hour: number;
   oldest_pending_age_seconds: number;
+  waiting_campaigns: number;
+  active_a2a_continuations: number;
+  oldest_active_a2a_age_seconds: number;
+  terminal_a2a_without_delivery: number;
+  recent_a2a_orphans: Array<{
+    continuation_id: string;
+    integration_task_id: string;
+    status: string;
+    attempts: number;
+    age_seconds: number;
+    reason_class: string;
+  }>;
   recent_failures: RecentFailure[];
   recent_tasks: Array<{
     id: string;
@@ -46,6 +59,11 @@ const ZERO_STATS: TaskQueueStats = {
   completed_last_hour: 0,
   failed_last_hour: 0,
   oldest_pending_age_seconds: 0,
+  waiting_campaigns: 0,
+  active_a2a_continuations: 0,
+  oldest_active_a2a_age_seconds: 0,
+  terminal_a2a_without_delivery: 0,
+  recent_a2a_orphans: [],
   recent_failures: [],
   recent_tasks: [],
 };
@@ -66,11 +84,14 @@ export async function getTaskQueueStats(
   scope: TaskQueueStatsScope,
 ): Promise<TaskQueueStats> {
   await ensurePendingTasksTable();
+  await ensureA2AContinuationsTable();
   const client = getDbExec();
   const now = Date.now();
   const oneHourAgo = now - 60 * 60 * 1000;
   const scopeSql = `owner_email = ?
               AND ((org_id IS NULL AND CAST(? AS TEXT) IS NULL) OR org_id = ?)`;
+  const joinedScopeSql = `t.owner_email = ?
+              AND ((t.org_id IS NULL AND CAST(? AS TEXT) IS NULL) OR t.org_id = ?)`;
   const scopeArgs = [scope.ownerEmail, scope.orgId, scope.orgId];
 
   try {
@@ -178,6 +199,17 @@ export async function getTaskQueueStats(
         ),
       }),
     );
+    const waitingCampaigns = await readWaitingCampaignCount(
+      client,
+      joinedScopeSql,
+      scopeArgs,
+    );
+    const a2aStats = await readA2AContinuationStats(
+      client,
+      joinedScopeSql,
+      scopeArgs,
+      now,
+    );
 
     return {
       pending,
@@ -185,6 +217,8 @@ export async function getTaskQueueStats(
       completed_last_hour: completedLastHour,
       failed_last_hour: failedLastHour,
       oldest_pending_age_seconds: oldestPendingAgeSeconds,
+      waiting_campaigns: waitingCampaigns,
+      ...a2aStats,
       recent_failures: recentFailures,
       recent_tasks: recentTasks,
     };
@@ -195,3 +229,115 @@ export async function getTaskQueueStats(
     throw err;
   }
 }
+
+async function readWaitingCampaignCount(
+  client: ReturnType<typeof getDbExec>,
+  scopeSql: string,
+  scopeArgs: Array<string | null>,
+): Promise<number> {
+  try {
+    const result = await client.execute({
+      sql: `SELECT COUNT(*) AS c
+              FROM integration_campaigns c
+              INNER JOIN integration_pending_tasks t
+                ON t.id = c.integration_task_id
+             WHERE ${scopeSql}
+               AND c.status = 'waiting'`,
+      args: scopeArgs,
+    });
+    return Number(result.rows[0]?.c ?? 0);
+  } catch (err) {
+    if (isMissingTableError(err)) return 0;
+    throw err;
+  }
+}
+
+async function readA2AContinuationStats(
+  client: ReturnType<typeof getDbExec>,
+  scopeSql: string,
+  scopeArgs: Array<string | null>,
+  now: number,
+): Promise<
+  Pick<
+    TaskQueueStats,
+    | "active_a2a_continuations"
+    | "oldest_active_a2a_age_seconds"
+    | "terminal_a2a_without_delivery"
+    | "recent_a2a_orphans"
+  >
+> {
+  try {
+    const live = await client.execute({
+      sql: `SELECT
+                   COUNT(CASE WHEN c.status IN ('pending', 'processing', 'delivering') THEN 1 END) AS active_count,
+                   MIN(CASE WHEN c.status IN ('pending', 'processing', 'delivering') THEN c.created_at END) AS oldest_created_at,
+                   COUNT(CASE WHEN c.status IN ('completed', 'failed')
+                         AND c.terminal_delivery_confirmed_at IS NULL THEN 1 END) AS orphan_count
+              FROM integration_a2a_continuations c
+              INNER JOIN integration_pending_tasks t
+                ON t.id = c.integration_task_id
+             WHERE ${scopeSql}`,
+      args: scopeArgs,
+    });
+    const orphaned = await client.execute({
+      sql: `SELECT c.id, c.integration_task_id, c.status, c.attempts,
+                   c.created_at, c.error_message
+              FROM integration_a2a_continuations c
+              INNER JOIN integration_pending_tasks t
+                ON t.id = c.integration_task_id
+             WHERE ${scopeSql}
+               AND c.status IN ('completed', 'failed')
+               AND c.terminal_delivery_confirmed_at IS NULL
+             ORDER BY c.updated_at DESC
+             LIMIT 5`,
+      args: scopeArgs,
+    });
+    const activeCount = Number(live.rows[0]?.active_count ?? 0);
+    const orphanCount = Number(live.rows[0]?.orphan_count ?? 0);
+    const oldestCreatedAt = Number(live.rows[0]?.oldest_created_at ?? now);
+    const recentOrphans = (orphaned.rows as Array<Record<string, unknown>>).map(
+      (row) => ({
+        continuation_id: String(row.id ?? ""),
+        integration_task_id: String(row.integration_task_id ?? ""),
+        status: String(row.status ?? ""),
+        attempts: Number(row.attempts ?? 0),
+        age_seconds: Math.max(
+          0,
+          Math.floor((now - Number(row.created_at ?? now)) / 1000),
+        ),
+        reason_class: classifyA2AOrphanReason(row.error_message),
+      }),
+    );
+    return {
+      active_a2a_continuations: activeCount,
+      oldest_active_a2a_age_seconds:
+        activeCount > 0
+          ? Math.max(0, Math.floor((now - oldestCreatedAt) / 1000))
+          : 0,
+      terminal_a2a_without_delivery: orphanCount,
+      recent_a2a_orphans: recentOrphans,
+    };
+  } catch (err) {
+    if (isMissingTableError(err)) {
+      return {
+        active_a2a_continuations: 0,
+        oldest_active_a2a_age_seconds: 0,
+        terminal_a2a_without_delivery: 0,
+        recent_a2a_orphans: [],
+      };
+    }
+    throw err;
+  }
+}
+
+function classifyA2AOrphanReason(value: unknown): string {
+  const message = String(value ?? "");
+  if (!message) return "missing_terminal_delivery";
+  if (/timeout|timed out|abort/i.test(message)) return "timeout";
+  if (/token|secret|auth|credential/i.test(message)) return "authentication";
+  if (/database|sql|store|persist/i.test(message)) return "persistence";
+  if (/slack|provider|deliver|stream|response/i.test(message)) {
+    return "provider_delivery";
+  }
+  return "processor_failure";
+}

package/corpus/core/src/integrations/types.ts

@@ -134,6 +134,19 @@ export interface PlatformDeliveryReceipt {
   messageRefs?: string[];
 }
 
+export interface PlatformDeliveryOptions {
+  /** Provider-owned message reference that should be updated in place. */
+  placeholderRef?: string;
+  /** Stable logical delivery key for provider-side retry reconciliation. */
+  idempotencyKey?: string;
+  /** Earliest provider timestamp (epoch ms) that can contain this delivery. */
+  reconcileAfter?: number;
+  /** Abort provider I/O before the caller releases its durable delivery claim. */
+  signal?: AbortSignal;
+  /** Do not fall back to a fresh post if the stable target cannot be updated. */
+  strictTargetRef?: boolean;
+}
+
 /**
  * Proactive outbound message target for a platform.
  * Used when the agent needs to send to a saved destination instead of replying
@@ -201,12 +214,20 @@ export interface PlatformRunProgress {
    * credentials, or provider payload.
    */
   ref?: PlatformRunProgressRef;
+  /** Stable provider message target that can receive the terminal answer. */
+  responseTargetRef?: string;
   /** Receive normalized agent events. Implementations should throttle writes. */
-  onEvent(event: AgentChatEvent): Promise<void> | void;
+  onEvent(
+    event: AgentChatEvent,
+    opts?: { signal?: AbortSignal },
+  ): Promise<void> | void;
   /** Finalize the provider-native progress surface with the answer. */
-  complete(message: OutgoingMessage): Promise<void | PlatformDeliveryReceipt>;
+  complete(
+    message: OutgoingMessage,
+    opts?: { signal?: AbortSignal },
+  ): Promise<void | PlatformDeliveryReceipt>;
   /** Mark the provider-native surface failed and leave a retryable explanation. */
-  fail?(message: string): Promise<void>;
+  fail?(message: string, opts?: { signal?: AbortSignal }): Promise<void>;
 }
 
 /**
@@ -322,7 +343,7 @@ export interface PlatformAdapter {
   sendResponse(
     message: OutgoingMessage,
     context: IncomingMessage,
-    opts?: { placeholderRef?: string },
+    opts?: PlatformDeliveryOptions,
   ): Promise<void | PlatformDeliveryReceipt>;
 
   /**

package/corpus/core/src/integrations/webhook-handler.ts

@@ -67,7 +67,8 @@ import {
 import { runWithRequestContext } from "../server/request-context.js";
 import { normalizeReasoningEffortForRequest } from "../shared/reasoning-effort.js";
 import { A2A_CONTINUATION_QUEUED_MARKER } from "./a2a-continuation-marker.js";
-import { hasActiveA2AContinuationsForIntegrationTask } from "./a2a-continuations-store.js";
+import { reconcileTerminalA2AParentIfDisabled } from "./a2a-continuation-processor.js";
+import { getA2AContinuationTaskOutcome } from "./a2a-continuations-store.js";
 import {
   clearIntegrationAwaitingInput,
   setIntegrationAwaitingInput,
@@ -1086,10 +1087,22 @@ async function processIncomingMessage(
           JSON.parse(campaign.row.checkpoint).waitingForA2A === true;
       } catch {}
       if (waitingForA2A) {
-        const activeA2A = await hasActiveA2AContinuationsForIntegrationTask(
-          opts.taskId,
-        );
-        if (activeA2A) {
+        const a2aOutcome = await getA2AContinuationTaskOutcome(opts.taskId);
+        if (a2aOutcome !== "terminal-delivered") {
+          if (
+            a2aOutcome === "terminal-without-delivery" &&
+            (await reconcileTerminalA2AParentIfDisabled(opts.taskId))
+          ) {
+            await releaseApplicableIntegrationBudgets(
+              budgetReservations.reservations,
+            );
+            return { status: "campaign-failed" };
+          }
+          if (a2aOutcome !== "active") {
+            console.warn(
+              `[integrations] Waiting campaign ${campaign.row.id} has A2A outcome ${a2aOutcome} without terminal delivery proof`,
+            );
+          }
           const waiting = await waitForA2AIntegrationCampaign(campaign.row.id, {
             runId: campaign.runId,
             leaseToken: campaign.leaseToken,

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">