@handled-ai/design-system 0.20.20 → 0.20.22

package/dist/components/timeline-activity.d.ts

@@ -31,6 +31,51 @@ interface TimelineEvent {
          * existing consumers are unaffected.
          */
         bodyHtml?: string;
+        /**
+         * Sender signature HTML, split out of the main body by the consuming app's
+         * email pipeline. When present, it is hidden behind a subtle "Show
+         * signature" toggle (collapsed by default) so signatures don't add noise to
+         * the timeline. Sanitized before rendering. Optional — when absent the body
+         * renders exactly as before. Mirrors `signatureHtml` on EmailPreviewCard.
+         */
+        signatureHtml?: string | null;
+        /**
+         * Quoted / trailing thread content (the "On <date> X wrote:" history) split
+         * out of the main body. When present, it is hidden behind a subtle "Show
+         * quoted text" toggle (collapsed by default). Sanitized before rendering.
+         * Optional — when absent the body renders exactly as before.
+         */
+        quotedHtml?: string | null;
+    };
+    /**
+     * Gong call payload. When present, the card renders a dedicated, first-class
+     * Gong call card (mirroring the `email` treatment) instead of generic
+     * content: a collapsed duration + brief-snippet preview, and an expanded
+     * card with the call title, start time, direction/outcome chips, the AI
+     * brief, key points, next steps, and a "View in Gong" link. Opt-in: when
+     * absent, existing consumers are unaffected. Every field except `title` is
+     * optional/nullable and renders nothing when absent (no empty sections,
+     * no "null"/"undefined", no "Invalid Date").
+     */
+    gongCall?: {
+        /** Gong call title. */
+        title: string;
+        /** ISO datetime of the call start. */
+        startTime?: string | null;
+        /** Call length in seconds. Formatted to a human duration when present. */
+        durationSeconds?: number | null;
+        /** Call direction, e.g. "Outbound" / "Inbound". */
+        direction?: string | null;
+        /** Call outcome, e.g. "Connected". */
+        outcome?: string | null;
+        /** Gong AI call brief (plain text, may be multi-paragraph). */
+        brief?: string | null;
+        /** Gong AI key points (plain text, often newline-delimited bullets). */
+        keyPoints?: string | null;
+        /** Gong AI highlights / next steps (plain text). */
+        nextSteps?: string | null;
+        /** Deep link to the call in Gong. */
+        url?: string | null;
     };
     content?: React.ReactNode;
     source?: {

package/dist/components/timeline-activity.js

@@ -4,7 +4,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
-import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
+import { ChevronDown, ChevronUp, ExternalLink, Phone } from "lucide-react";
 import { EmailBody as SharedEmailBody } from "./email-body.js";
 import {
   decodeEmailDisplayText,
@@ -78,7 +78,7 @@ const TIMELINE_VARIANT_CLASSES = {
     title: "min-w-0 pr-1 text-[13.5px] font-medium leading-tight text-foreground",
     time: "shrink-0 whitespace-nowrap pt-px text-[11px] leading-tight text-muted-foreground/60",
     cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card",
-    cardHeader: "flex items-center justify-between border-b border-border/60 bg-muted/30 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70",
+    cardHeader: "flex items-start justify-between border-b border-border/60 bg-muted/30 px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70",
     cardBody: "px-3 py-2.5 text-[13px] leading-relaxed",
     cardFooter: "border-t border-border/60 bg-muted/10 px-3 py-1.5",
     collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-[13px] text-muted-foreground",
@@ -135,6 +135,7 @@ function TimelineItem({
   const [showAllRecipients, setShowAllRecipients] = React.useState(false);
   const hasContent = !!event.content;
   const hasEmail = !!event.email;
+  const hasGongCall = !!event.gongCall;
   const classes = TIMELINE_VARIANT_CLASSES[variant];
   const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null;
   const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES;
@@ -148,7 +149,16 @@ function TimelineItem({
         /* @__PURE__ */ jsx("span", { className: classes.time, children: event.time })
       ] }),
       event.actor && /* @__PURE__ */ jsx(ActorByline, { actor: event.actor, time: event.time }),
-      (hasContent || hasEmail) && /* @__PURE__ */ jsx("div", { className: "mt-2", children: event.isInteractive ? hasEmail ? /* @__PURE__ */ jsx(
+      (hasContent || hasEmail || hasGongCall) && /* @__PURE__ */ jsx("div", { className: "mt-2", children: event.isInteractive ? hasGongCall ? /* @__PURE__ */ jsx(
+        GongCallCard,
+        {
+          event,
+          expanded,
+          setExpanded,
+          variant,
+          classes
+        }
+      ) : hasEmail ? /* @__PURE__ */ jsx(
         EmailCard,
         {
           event,
@@ -176,6 +186,33 @@ function reactNodeToDisplayText(value) {
   if (typeof value === "string" || typeof value === "number") return decodeEmailDisplayText(String(value));
   return "";
 }
+function formatCallDuration(durationSeconds) {
+  if (durationSeconds == null || !Number.isFinite(durationSeconds) || durationSeconds <= 0) return "";
+  const totalMinutes = Math.round(durationSeconds / 60);
+  if (totalMinutes < 1) return "< 1 min";
+  if (totalMinutes < 60) return `${totalMinutes} min`;
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return minutes === 0 ? `${hours} h` : `${hours} h ${minutes} min`;
+}
+function cleanGongText(value) {
+  if (!value) return "";
+  return decodeEmailDisplayText(value).trim();
+}
+function getTimelineGongCallDisplay(gongCall) {
+  var _a, _b, _c, _d;
+  const title = cleanGongText(gongCall.title);
+  const startTime = (_a = formatEmailTimestamp(gongCall.startTime)) != null ? _a : "";
+  const duration = formatCallDuration(gongCall.durationSeconds);
+  const direction = cleanGongText(gongCall.direction);
+  const outcome = cleanGongText(gongCall.outcome);
+  const brief = cleanGongText(gongCall.brief);
+  const keyPoints = cleanGongText(gongCall.keyPoints);
+  const nextSteps = cleanGongText(gongCall.nextSteps);
+  const url = ((_b = gongCall.url) == null ? void 0 : _b.trim()) || "";
+  const snippet = (_d = (_c = brief.split("\n").find((line) => line.trim())) == null ? void 0 : _c.trim()) != null ? _d : "";
+  return { title, startTime, duration, direction, outcome, brief, keyPoints, nextSteps, url, snippet };
+}
 function getTimelineEmailDisplay(email) {
   var _a, _b, _c, _d, _e;
   const sender = normalizeEmailSender({ name: email.from, email: email.fromEmail });
@@ -186,7 +223,8 @@ function getTimelineEmailDisplay(email) {
   const subject = email.subject ? decodeEmailDisplayText(email.subject) : "";
   const bodyText = reactNodeToDisplayText(email.body);
   const snippet = emailBodySnippet({ bodyHtml: email.bodyHtml, body: bodyText }, 140);
-  return { sender, to, cc, bcc, date, subject, bodyText, snippet };
+  const hasRecipients = Boolean(to || cc || bcc);
+  return { sender, to, cc, bcc, date, subject, bodyText, snippet, hasRecipients };
 }
 function EmailMetadata({
   email,
@@ -194,6 +232,7 @@ function EmailMetadata({
   setShowAllRecipients
 }) {
   const display = getTimelineEmailDisplay(email);
+  const hasExpandableRecipients = Boolean(display.cc || display.bcc);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [
@@ -202,37 +241,78 @@ function EmailMetadata({
       ] }),
       display.date ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap", children: display.date }) : null
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
-        "To ",
-        display.to || "no recipient yet",
-        !showAllRecipients && (display.cc || display.bcc) ? /* @__PURE__ */ jsx(Fragment, { children: ", ..." }) : null,
-        showAllRecipients && display.cc ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          ", ",
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "cc" }),
-          " ",
-          display.cc
-        ] }) : null,
-        showAllRecipients && display.bcc ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "bcc" }),
-          " ",
-          display.bcc
-        ] }) : null
+    display.hasRecipients ? /* @__PURE__ */ jsxs("div", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+          display.to ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            "To ",
+            display.to
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "cc" }),
+            " ",
+            display.cc || display.bcc
+          ] }),
+          display.to && !showAllRecipients && hasExpandableRecipients ? /* @__PURE__ */ jsx(Fragment, { children: ", \u2026" }) : null
+        ] }),
+        hasExpandableRecipients ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setShowAllRecipients((prev) => !prev);
+            },
+            className: "shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors",
+            "aria-label": showAllRecipients ? "Hide cc and bcc" : "Show cc and bcc",
+            children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180") })
+          }
+        ) : null
       ] }),
-      display.cc || display.bcc ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            setShowAllRecipients((prev) => !prev);
-          },
-          className: "shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors",
-          children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180") })
-        }
-      ) : null
-    ] })
+      showAllRecipients && display.to && display.cc ? /* @__PURE__ */ jsxs("div", { className: "truncate", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "cc" }),
+        " ",
+        display.cc
+      ] }) : null,
+      showAllRecipients && display.bcc ? /* @__PURE__ */ jsxs("div", { className: "truncate", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "bcc" }),
+        " ",
+        display.bcc
+      ] }) : null
+    ] }) : null
+  ] });
+}
+function SuppressedHtmlSection({
+  html,
+  showLabel,
+  hideLabel,
+  slot
+}) {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2", "data-slot": slot, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((value) => !value);
+        },
+        "aria-expanded": open,
+        className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground",
+        children: [
+          open ? hideLabel : showLabel,
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": `${slot}-content`,
+        className: "mt-2 border-l-2 border-border pl-3 text-sm leading-relaxed text-muted-foreground",
+        children: /* @__PURE__ */ jsx(SharedEmailBody, { html, variant: "history", collapseDetails: false })
+      }
+    ) : null
   ] });
 }
 function TimelineEmailBody({ email }) {
@@ -251,7 +331,32 @@ function TimelineEmailBody({ email }) {
       className: "text-sm leading-relaxed"
     }
   );
-  return email.bodyHtml ? /* @__PURE__ */ jsx("div", { "data-slot": "timeline-email-html", children: body }) : body;
+  const hasSignature = Boolean(email.signatureHtml && email.signatureHtml.trim());
+  const hasQuoted = Boolean(email.quotedHtml && email.quotedHtml.trim());
+  if (!hasSignature && !hasQuoted) {
+    return email.bodyHtml ? /* @__PURE__ */ jsx("div", { "data-slot": "timeline-email-html", children: body }) : body;
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": email.bodyHtml ? "timeline-email-html" : void 0, children: [
+    body,
+    hasSignature ? /* @__PURE__ */ jsx(
+      SuppressedHtmlSection,
+      {
+        html: email.signatureHtml,
+        showLabel: "Show signature",
+        hideLabel: "Hide signature",
+        slot: "timeline-email-signature"
+      }
+    ) : null,
+    hasQuoted ? /* @__PURE__ */ jsx(
+      SuppressedHtmlSection,
+      {
+        html: email.quotedHtml,
+        showLabel: "Show quoted text",
+        hideLabel: "Hide quoted text",
+        slot: "timeline-email-quoted"
+      }
+    ) : null
+  ] });
 }
 function renderDecodedPreview(preview) {
   if (typeof preview === "string" || typeof preview === "number") return decodeEmailDisplayText(String(preview));
@@ -267,7 +372,7 @@ function CollapsedEmailPreview({
   const display = email ? getTimelineEmailDisplay(email) : null;
   const previewContent = (display == null ? void 0 : display.snippet) || renderDecodedPreview(preview);
   return /* @__PURE__ */ jsxs("div", { className, onClick, children: [
-    /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 pr-3 text-[13px]", children: [
+    /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 min-w-0 flex-1 pr-3 text-[13px]", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: display == null ? void 0 : display.sender.name }),
       /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
       (display == null ? void 0 : display.subject) ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -292,6 +397,28 @@ function ShowLessButton({
     /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" })
   ] });
 }
+function CollapseTopButton({
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": "Show less",
+      "data-slot": "timeline-collapse-top",
+      className: cn(
+        "shrink-0 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground/60 transition-colors hover:text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only sm:not-sr-only", children: "Show less" }),
+        /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" })
+      ]
+    }
+  );
+}
 function SourceAction({
   source,
   onSourceClick,
@@ -330,6 +457,204 @@ function SourceAction({
     }
   );
 }
+function GongLinkAction({
+  url,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (e) => e.stopPropagation(),
+      className,
+      "data-slot": "timeline-gong-link",
+      children: [
+        "View in Gong",
+        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+      ]
+    }
+  );
+}
+function TimelineGongCallBody({
+  display,
+  labelClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-slot": "timeline-gong-body", children: [
+    display.brief ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: display.brief }) : null,
+    display.keyPoints ? /* @__PURE__ */ jsxs("div", { "data-slot": "timeline-gong-key-points", children: [
+      /* @__PURE__ */ jsx("div", { className: labelClassName, children: "Key points" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: display.keyPoints })
+    ] }) : null,
+    display.nextSteps ? /* @__PURE__ */ jsxs("div", { "data-slot": "timeline-gong-next-steps", children: [
+      /* @__PURE__ */ jsx("div", { className: labelClassName, children: "Next steps" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: display.nextSteps })
+    ] }) : null
+  ] });
+}
+function GongCallHeader({
+  display
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(Phone, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-semibold text-foreground text-[13px]", children: display.title })
+      ] }),
+      display.startTime ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap", children: display.startTime }) : null
+    ] }),
+    display.duration || display.direction || display.outcome ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground", children: [
+      display.duration ? /* @__PURE__ */ jsx("span", { "data-slot": "timeline-gong-duration", children: display.duration }) : null,
+      display.direction ? /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: display.direction }) : null,
+      display.outcome ? /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: display.outcome }) : null
+    ] }) : null
+  ] });
+}
+function CollapsedGongCallPreview({
+  display,
+  className,
+  actionClassName,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, onClick, children: [
+    /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 min-w-0 flex-1 pr-3 text-[13px] text-muted-foreground", children: [
+      display.duration ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Phone, { className: "h-3 w-3" }),
+          display.duration
+        ] }),
+        display.snippet ? /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }) : null
+      ] }) : null,
+      display.snippet ? /* @__PURE__ */ jsx("span", { children: display.snippet }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: actionClassName, children: [
+      "Expand ",
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+    ] })
+  ] });
+}
+function GongCallCard({
+  event,
+  expanded,
+  setExpanded,
+  variant,
+  classes
+}) {
+  const gongCall = event.gongCall;
+  const display = getTimelineGongCallDisplay(gongCall);
+  if (variant === "default") {
+    return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, "data-slot": "timeline-gong-card", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "px-3 py-2.5 text-sm",
+          !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+        ),
+        onClick: () => !expanded && setExpanded(true),
+        children: expanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(GongCallHeader, { display }) }),
+            /* @__PURE__ */ jsx(
+              CollapseTopButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setExpanded(false);
+                },
+                className: "mt-0.5"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            TimelineGongCallBody,
+            {
+              display,
+              labelClassName: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+            display.url ? /* @__PURE__ */ jsx(
+              GongLinkAction,
+              {
+                url: display.url,
+                className: "mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              ShowLessButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setExpanded(false);
+                },
+                className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsx(
+          CollapsedGongCallPreview,
+          {
+            display,
+            className: "flex items-center justify-between gap-2 text-muted-foreground",
+            actionClassName: "flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground"
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, "data-slot": "timeline-gong-card", children: expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.cardHeader, "data-slot": "timeline-card-header", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 normal-case tracking-normal", children: /* @__PURE__ */ jsx(GongCallHeader, { display }) }),
+      /* @__PURE__ */ jsx(
+        CollapseTopButton,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            setExpanded(false);
+          },
+          className: "ml-3 normal-case tracking-normal"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: classes.cardBody, "data-slot": "timeline-card-body", children: /* @__PURE__ */ jsx(
+      TimelineGongCallBody,
+      {
+        display,
+        labelClassName: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(classes.cardFooter, classes.actionLinkRow, display.url ? "justify-between" : "justify-end"),
+        "data-slot": "timeline-card-footer",
+        children: [
+          display.url ? /* @__PURE__ */ jsx(GongLinkAction, { url: display.url, className: classes.actionLink }) : null,
+          /* @__PURE__ */ jsx(
+            ShowLessButton,
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(false);
+              },
+              className: classes.actionLink
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(
+    CollapsedGongCallPreview,
+    {
+      display,
+      className: cn(classes.collapsedPreview, "cursor-pointer hover:bg-muted/30 transition-colors"),
+      actionClassName: cn(classes.actionLink, "shrink-0"),
+      onClick: () => setExpanded(true)
+    }
+  ) });
+}
 function EmailCard({
   event,
   expanded,
@@ -349,14 +674,26 @@ function EmailCard({
         ),
         onClick: () => !expanded && setExpanded(true),
         children: expanded && event.email ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            EmailMetadata,
-            {
-              email: event.email,
-              showAllRecipients,
-              setShowAllRecipients
-            }
-          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+              EmailMetadata,
+              {
+                email: event.email,
+                showAllRecipients,
+                setShowAllRecipients
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              CollapseTopButton,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setExpanded(false);
+                },
+                className: "mt-0.5"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(TimelineEmailBody, { email: event.email }),
           event.content ? /* @__PURE__ */ jsx("div", { className: "rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground", children: event.content }) : null,
           /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
@@ -392,14 +729,26 @@ function EmailCard({
     ) });
   }
   return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, children: expanded && event.email ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.cardHeader, "data-slot": "timeline-card-header", children: /* @__PURE__ */ jsx(
-      EmailMetadata,
-      {
-        email: event.email,
-        showAllRecipients,
-        setShowAllRecipients
-      }
-    ) }),
+    /* @__PURE__ */ jsxs("div", { className: classes.cardHeader, "data-slot": "timeline-card-header", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 normal-case tracking-normal", children: /* @__PURE__ */ jsx(
+        EmailMetadata,
+        {
+          email: event.email,
+          showAllRecipients,
+          setShowAllRecipients
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        CollapseTopButton,
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            setExpanded(false);
+          },
+          className: "ml-3 normal-case tracking-normal"
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: classes.cardBody, "data-slot": "timeline-card-body", children: [
       /* @__PURE__ */ jsx(TimelineEmailBody, { email: event.email }),
       event.content ? /* @__PURE__ */ jsx("div", { className: "mt-3 rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground", children: event.content }) : null