@handled-ai/design-system 0.20.7 → 0.20.8

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/components/pill.d.ts

@@ -12,7 +12,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
 declare const pillVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "neutral" | "info" | "success" | "warning" | null | undefined;
+    variant?: "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "neutral" | "info" | "success" | "warning" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
 }

package/dist/components/tabs.d.ts

@@ -5,7 +5,7 @@ import { Tabs as Tabs$1 } from 'radix-ui';
 
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "line" | null | undefined;
+    variant?: "line" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;

package/dist/components/timeline-activity.js

@@ -358,6 +358,7 @@ function EmailCard({
             }
           ) }),
           /* @__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: [
             event.source ? /* @__PURE__ */ jsx(
               SourceAction,
@@ -399,7 +400,10 @@ function EmailCard({
         setShowAllRecipients
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: classes.cardBody, "data-slot": "timeline-card-body", children: /* @__PURE__ */ jsx(TimelineEmailBody, { email: event.email }) }),
+    /* @__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
+    ] }),
     /* @__PURE__ */ jsxs(
       "div",
       {

package/dist/components/timeline-activity.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/timeline-activity.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport { ChevronDown, ChevronUp, ExternalLink } from \"lucide-react\"\nimport { EmailBody as SharedEmailBody } from \"./email-body\"\nimport {\n  decodeEmailDisplayText,\n  emailBodySnippet,\n  formatAddressList,\n  formatEmailTimestamp,\n  normalizeEmailSender,\n} from \"./email-display-helpers\"\n\nexport type TimelineActivityVariant = \"default\" | \"case-panel\"\n\nexport type TimelineEventTone =\n  | \"red\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"blue\"\n  | \"slate\"\n  | \"salesforce\"\n  | \"gmail\"\n\nexport interface TimelineEventActor {\n  kind: \"user\" | \"integration\" | \"system\"\n  name?: string\n  initials?: string\n  avatarUrl?: string\n  verb?: string\n}\n\nexport interface TimelineEvent {\n  id: string\n  icon: React.ReactNode\n  title: React.ReactNode\n  time: string\n  preview?: React.ReactNode\n  email?: {\n    from: string\n    fromEmail?: string\n    to: string\n    cc?: string\n    bcc?: string\n    date?: string\n    subject?: string\n    body: React.ReactNode\n    /**\n     * HTML body. When provided, the card renders formatted, Gmail-like HTML\n     * instead of the plain-text `body`. The component sanitizes it before\n     * rendering. Opt-in: when absent, the plain-text `body` path is used and\n     * existing consumers are unaffected.\n     */\n    bodyHtml?: string\n  }\n  content?: React.ReactNode\n  source?: {\n    label: string\n    actionLabel?: string\n    url: string\n  }\n  defaultExpanded?: boolean\n  isInteractive?: boolean\n  onSourceClick?: () => void\n  tone?: TimelineEventTone\n  actor?: TimelineEventActor\n  isSystemNoise?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Tone class map — every class is a complete static string literal so\n// Tailwind's JIT scanner can detect them. NO interpolation.\n// ---------------------------------------------------------------------------\n\nexport const TONE_CLASSES: Record<\n  TimelineEventTone,\n  { dot: string; icon: string }\n> = {\n  red: {\n    dot: \"bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40\",\n    icon: \"text-red-600 dark:text-red-300\",\n  },\n  amber: {\n    dot: \"bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40\",\n    icon: \"text-amber-600 dark:text-amber-300\",\n  },\n  emerald: {\n    dot: \"bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40\",\n    icon: \"text-emerald-600 dark:text-emerald-300\",\n  },\n  violet: {\n    dot: \"bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40\",\n    icon: \"text-violet-600 dark:text-violet-300\",\n  },\n  blue: {\n    dot: \"bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40\",\n    icon: \"text-blue-600 dark:text-blue-300\",\n  },\n  slate: {\n    dot: \"bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700\",\n    icon: \"text-slate-500 dark:text-slate-300\",\n  },\n  salesforce: {\n    dot: \"bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25\",\n    icon: \"text-[#00A1E0]\",\n  },\n  gmail: {\n    dot: \"bg-white border-red-200 dark:bg-background dark:border-red-900/40\",\n    icon: \"text-red-500 dark:text-red-300\",\n  },\n}\n\nconst NEUTRAL_DOT_CLASSES = \"border-border/60 bg-background\"\nconst NEUTRAL_ICON_CLASSES = \"text-muted-foreground\"\n\ntype TimelineVariantClasses = {\n  outerRowGap: string\n  connector: string\n  dotWrapperSize: string\n  dot: string\n  contentPadding: string\n  titleRowSpacing: string\n  title: string\n  time: string\n  cardContainer: string\n  cardHeader: string\n  cardBody: string\n  cardFooter: string\n  collapsedPreview: string\n  actionLinkRow: string\n  actionLink: string\n  nonInteractiveContent: string\n}\n\nconst TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantClasses> = {\n  default: {\n    outerRowGap: \"group relative flex gap-3.5\",\n    connector: \"absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60\",\n    dotWrapperSize: \"relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background\",\n    dot: \"flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background\",\n    contentPadding: \"flex-1 pb-5 pt-0.5\",\n    titleRowSpacing: \"flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between\",\n    title: \"pr-4 text-[13px] leading-relaxed text-foreground\",\n    time: \"mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70\",\n    cardContainer: \"overflow-hidden rounded-md border border-border/80 bg-muted/20\",\n    cardHeader: \"px-3 pt-2.5\",\n    cardBody: \"px-3 py-2.5 text-sm\",\n    cardFooter: \"px-3 pb-2.5\",\n    collapsedPreview: \"flex items-center justify-between gap-2 px-3 py-2.5 text-sm text-muted-foreground\",\n    actionLinkRow: \"flex items-center gap-3 px-3 pb-2.5\",\n    actionLink: \"inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\",\n    nonInteractiveContent: \"pr-2 text-sm leading-relaxed text-muted-foreground\",\n  },\n  \"case-panel\": {\n    outerRowGap: \"group relative flex gap-3\",\n    connector: \"absolute left-[11px] top-6 bottom-[-2px] w-px bg-border/50\",\n    dotWrapperSize: \"relative z-10 mt-0.5 flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-background\",\n    dot: \"flex h-[22px] w-[22px] items-center justify-center rounded-full border ring-4 ring-background [&>svg]:h-3 [&>svg]:w-3\",\n    contentPadding: \"flex-1 min-w-0 pb-5 pt-px\",\n    titleRowSpacing: \"flex min-w-0 items-start justify-between gap-3\",\n    title: \"min-w-0 pr-1 text-[13.5px] font-medium leading-tight text-foreground\",\n    time: \"shrink-0 whitespace-nowrap pt-px text-[11px] leading-tight text-muted-foreground/60\",\n    cardContainer: \"overflow-hidden rounded-lg border border-border/70 bg-card\",\n    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\",\n    cardBody: \"px-3 py-2.5 text-[13px] leading-relaxed\",\n    cardFooter: \"border-t border-border/60 bg-muted/10 px-3 py-1.5\",\n    collapsedPreview: \"flex items-center justify-between gap-2 px-3 py-2 text-[13px] text-muted-foreground\",\n    actionLinkRow: \"flex items-center justify-end gap-2 px-3 py-1.5\",\n    actionLink: \"inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground\",\n    nonInteractiveContent: \"pr-2 text-[13px] leading-relaxed text-muted-foreground\",\n  },\n}\n\nexport interface TimelineActivityProps {\n  events: TimelineEvent[]\n  className?: string\n  variant?: TimelineActivityVariant\n}\n\nexport function TimelineActivity({ events, className, variant = \"default\" }: TimelineActivityProps) {\n  return (\n    <div className={cn(\"space-y-0\", className)} data-variant={variant}>\n      {events.map((event, index) => (\n        <TimelineItem\n          key={event.id}\n          event={event}\n          isLast={index === events.length - 1}\n          variant={variant}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {\n  if (actor.kind === \"system\") return null\n\n  if (actor.kind === \"integration\") {\n    return (\n      <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n        <span>Integration</span>\n        <span className=\"text-muted-foreground/40\">&middot;</span>\n        <span>{time}</span>\n      </div>\n    )\n  }\n\n  // actor.kind === \"user\"\n  const verb = actor.verb ?? \"performed this action\"\n  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : \"?\")\n\n  return (\n    <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n      {actor.avatarUrl ? (\n        <img\n          src={actor.avatarUrl}\n          alt={actor.name ?? \"User\"}\n          className=\"h-4 w-4 rounded-full object-cover\"\n        />\n      ) : (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground\">\n          {displayInitials}\n        </span>\n      )}\n      {actor.name && <span className=\"text-foreground font-medium\">{actor.name}</span>}\n      <span>{verb}</span>\n      <span className=\"text-muted-foreground/40\">&middot;</span>\n      <span>{time}</span>\n    </div>\n  )\n}\n\nfunction TimelineItem({\n  event,\n  isLast,\n  variant,\n}: {\n  event: TimelineEvent\n  isLast: boolean\n  variant: TimelineActivityVariant\n}) {\n  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)\n  const [showAllRecipients, setShowAllRecipients] = React.useState(false)\n  const hasContent = !!event.content\n  const hasEmail = !!event.email\n  const classes = TIMELINE_VARIANT_CLASSES[variant]\n\n  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null\n  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES\n  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES\n\n  return (\n    <div className={classes.outerRowGap}>\n      {!isLast && (\n        <div className={classes.connector} />\n      )}\n\n      <div className={classes.dotWrapperSize}>\n        <div className={cn(classes.dot, dotClasses, iconClasses)} data-testid=\"timeline-dot\">\n          {event.icon}\n        </div>\n      </div>\n\n      <div className={classes.contentPadding}>\n        <div className={classes.titleRowSpacing}>\n          <div className={classes.title}>\n            {event.title}\n          </div>\n          <span className={classes.time}>\n            {event.time}\n          </span>\n        </div>\n\n        {event.actor && <ActorByline actor={event.actor} time={event.time} />}\n\n        {(hasContent || hasEmail) && (\n          <div className=\"mt-2\">\n            {event.isInteractive ? (\n              hasEmail ? (\n                <EmailCard\n                  event={event}\n                  expanded={expanded}\n                  setExpanded={setExpanded}\n                  showAllRecipients={showAllRecipients}\n                  setShowAllRecipients={setShowAllRecipients}\n                  variant={variant}\n                  classes={classes}\n                />\n              ) : (\n                <ContentCard\n                  event={event}\n                  expanded={expanded}\n                  setExpanded={setExpanded}\n                  variant={variant}\n                  classes={classes}\n                />\n              )\n            ) : (\n              <div className={classes.nonInteractiveContent}>\n                {event.content}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\ntype TimelineEmail = NonNullable<TimelineEvent[\"email\"]>\ntype TimelineSource = NonNullable<TimelineEvent[\"source\"]>\n\nfunction reactNodeToDisplayText(value: React.ReactNode): string {\n  if (typeof value === \"string\" || typeof value === \"number\") return decodeEmailDisplayText(String(value))\n  return \"\"\n}\n\nfunction getTimelineEmailDisplay(email: TimelineEmail) {\n  const sender = normalizeEmailSender({ name: email.from, email: email.fromEmail })\n  const to = formatAddressList(email.to) || decodeEmailDisplayText(email.to ?? \"\")\n  const cc = formatAddressList(email.cc) || decodeEmailDisplayText(email.cc ?? \"\")\n  const bcc = formatAddressList(email.bcc) || decodeEmailDisplayText(email.bcc ?? \"\")\n  const date = formatEmailTimestamp(email.date) ?? decodeEmailDisplayText(email.date ?? \"\")\n  const subject = email.subject ? decodeEmailDisplayText(email.subject) : \"\"\n  const bodyText = reactNodeToDisplayText(email.body)\n  const snippet = emailBodySnippet({ bodyHtml: email.bodyHtml, body: bodyText }, 140)\n\n  return { sender, to, cc, bcc, date, subject, bodyText, snippet }\n}\n\nfunction EmailMetadata({\n  email,\n  showAllRecipients,\n  setShowAllRecipients,\n}: {\n  email: TimelineEmail\n  showAllRecipients: boolean\n  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>\n}) {\n  const display = getTimelineEmailDisplay(email)\n\n  return (\n    <>\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex min-w-0 items-baseline gap-1.5\">\n          <span className=\"font-semibold text-foreground text-[13px] whitespace-nowrap\">{display.sender.name}</span>\n          {display.sender.email ? (\n            <span className=\"text-muted-foreground/60 text-xs truncate\">{display.sender.email}</span>\n          ) : null}\n        </div>\n        {display.date ? (\n          <span className=\"shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap\">{display.date}</span>\n        ) : null}\n      </div>\n      <div className=\"mt-0.5 flex items-center gap-1 text-xs text-muted-foreground\">\n        <span className=\"truncate\">\n          To {display.to || \"no recipient yet\"}\n          {!showAllRecipients && (display.cc || display.bcc) ? (\n            <>, ...</>\n          ) : null}\n          {showAllRecipients && display.cc ? (\n            <>, <span className=\"text-muted-foreground/40\">cc</span> {display.cc}</>\n          ) : null}\n          {showAllRecipients && display.bcc ? (\n            <> <span className=\"text-muted-foreground/40\">bcc</span> {display.bcc}</>\n          ) : null}\n        </span>\n        {(display.cc || display.bcc) ? (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              setShowAllRecipients((prev) => !prev)\n            }}\n            className=\"shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors\"\n          >\n            <ChevronDown className={cn(\"h-3 w-3 transition-transform\", showAllRecipients && \"rotate-180\")} />\n          </button>\n        ) : null}\n      </div>\n    </>\n  )\n}\n\nfunction TimelineEmailBody({ email }: { email: TimelineEmail }) {\n  const display = getTimelineEmailDisplay(email)\n  const bodyFallback = display.bodyText || (typeof email.body === \"string\" ? email.body : \"\")\n\n  if (!email.bodyHtml && !bodyFallback && email.body) {\n    return <div className=\"whitespace-pre-line text-sm leading-relaxed text-foreground/90\">{email.body}</div>\n  }\n\n  const body = (\n    <SharedEmailBody\n      html={email.bodyHtml}\n      text={bodyFallback}\n      variant=\"history\"\n      collapseDetails={true}\n      className=\"text-sm leading-relaxed\"\n    />\n  )\n\n  return email.bodyHtml ? <div data-slot=\"timeline-email-html\">{body}</div> : body\n}\n\nfunction renderDecodedPreview(preview?: React.ReactNode): React.ReactNode {\n  if (typeof preview === \"string\" || typeof preview === \"number\") return decodeEmailDisplayText(String(preview))\n  return preview\n}\n\nfunction CollapsedEmailPreview({\n  email,\n  preview,\n  className,\n  actionClassName,\n  onClick,\n}: {\n  email?: TimelineEmail\n  preview?: React.ReactNode\n  className: string\n  actionClassName: string\n  onClick?: () => void\n}) {\n  const display = email ? getTimelineEmailDisplay(email) : null\n  const previewContent = display?.snippet || renderDecodedPreview(preview)\n\n  return (\n    <div className={className} onClick={onClick}>\n      <span className=\"line-clamp-1 pr-3 text-[13px]\">\n        <span className=\"text-muted-foreground\">{display?.sender.name}</span>\n        <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n        {display?.subject ? (\n          <>\n            <span className=\"text-muted-foreground\">{display.subject}</span>\n            <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n          </>\n        ) : null}\n        <span className=\"text-muted-foreground\">{previewContent}</span>\n      </span>\n      <button type=\"button\" className={actionClassName}>\n        Expand <ChevronDown className=\"h-3 w-3\" />\n      </button>\n    </div>\n  )\n}\n\nfunction ShowLessButton({\n  className,\n  onClick,\n  type,\n}: {\n  className: string\n  onClick: React.MouseEventHandler<HTMLButtonElement>\n  type?: \"button\"\n}) {\n  return (\n    <button type={type} onClick={onClick} className={className}>\n      Show less <ChevronUp className=\"h-3 w-3\" />\n    </button>\n  )\n}\n\nfunction SourceAction({\n  source,\n  onSourceClick,\n  className,\n}: {\n  source: TimelineSource\n  onSourceClick?: () => void\n  className: string\n}) {\n  const actionLabel = source.actionLabel ?? `Open in ${source.label}`\n\n  if (onSourceClick) {\n    return (\n      <button\n        type=\"button\"\n        onClick={(e) => { e.stopPropagation(); onSourceClick(); }}\n        className={className}\n      >\n        {actionLabel}\n        <ExternalLink className=\"h-3 w-3\" />\n      </button>\n    )\n  }\n\n  return (\n    <a\n      href={source.url}\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      className={className}\n    >\n      {actionLabel}\n      <ExternalLink className=\"h-3 w-3\" />\n    </a>\n  )\n}\n\nfunction EmailCard({\n  event,\n  expanded,\n  setExpanded,\n  showAllRecipients,\n  setShowAllRecipients,\n  variant,\n  classes,\n}: {\n  event: TimelineEvent\n  expanded: boolean\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>\n  showAllRecipients: boolean\n  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>\n  variant: TimelineActivityVariant\n  classes: TimelineVariantClasses\n}) {\n  if (variant === \"default\") {\n    return (\n      <div className={classes.cardContainer} data-variant={variant}>\n        <div\n          className={cn(\n            \"px-3 py-2.5 text-sm\",\n            !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n          )}\n          onClick={() => !expanded && setExpanded(true)}\n        >\n          {expanded && event.email ? (\n            <div className=\"space-y-3\">\n              <div>\n                <EmailMetadata\n                  email={event.email}\n                  showAllRecipients={showAllRecipients}\n                  setShowAllRecipients={setShowAllRecipients}\n                />\n              </div>\n\n              <TimelineEmailBody email={event.email} />\n\n              <div className=\"mt-2 flex items-center gap-3\">\n                {event.source ? (\n                  <SourceAction\n                    source={event.source}\n                    onSourceClick={event.onSourceClick}\n                    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\"\n                  />\n                ) : null}\n                <ShowLessButton\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    setExpanded(false)\n                  }}\n                  className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                />\n              </div>\n            </div>\n          ) : (\n            <CollapsedEmailPreview\n              email={event.email}\n              preview={event.preview}\n              className=\"flex items-center justify-between gap-2 text-muted-foreground\"\n              actionClassName=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\"\n            />\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classes.cardContainer} data-variant={variant}>\n      {expanded && event.email ? (\n        <>\n          <div className={classes.cardHeader} data-slot=\"timeline-card-header\">\n            <EmailMetadata\n              email={event.email}\n              showAllRecipients={showAllRecipients}\n              setShowAllRecipients={setShowAllRecipients}\n            />\n          </div>\n\n          <div className={classes.cardBody} data-slot=\"timeline-card-body\">\n            <TimelineEmailBody email={event.email} />\n          </div>\n\n          <div\n            className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? \"justify-between\" : \"justify-end\")}\n            data-slot=\"timeline-card-footer\"\n          >\n            {event.source ? (\n              <SourceAction\n                source={event.source}\n                onSourceClick={event.onSourceClick}\n                className={classes.actionLink}\n              />\n            ) : null}\n            <ShowLessButton\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation()\n                setExpanded(false)\n              }}\n              className={classes.actionLink}\n            />\n          </div>\n        </>\n      ) : (\n        <CollapsedEmailPreview\n          email={event.email}\n          preview={event.preview}\n          className={cn(classes.collapsedPreview, \"cursor-pointer hover:bg-muted/30 transition-colors\")}\n          actionClassName={cn(classes.actionLink, \"shrink-0\")}\n          onClick={() => setExpanded(true)}\n        />\n      )}\n    </div>\n  )\n}\n\nfunction ContentCard({\n  event,\n  expanded,\n  setExpanded,\n  variant,\n  classes,\n}: {\n  event: TimelineEvent\n  expanded: boolean\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>\n  variant: TimelineActivityVariant\n  classes: TimelineVariantClasses\n}) {\n  if (variant === \"default\") {\n    return (\n      <div className={classes.cardContainer} data-variant={variant}>\n        <div\n          className={cn(\n            \"px-3 py-2.5 text-sm\",\n            !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n          )}\n          onClick={() => !expanded && setExpanded(true)}\n        >\n          {expanded ? (\n            <div className=\"space-y-2\">\n              {event.content}\n              <div className=\"mt-2 flex items-center gap-3\">\n                {event.source ? (\n                  <SourceAction\n                    source={event.source}\n                    onSourceClick={event.onSourceClick}\n                    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\"\n                  />\n                ) : null}\n                <ShowLessButton\n                  onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n                  className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                />\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n              <span className=\"line-clamp-1 pr-3\">\n                {event.preview ?? event.content}\n              </span>\n              <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                Expand <ChevronDown className=\"h-3 w-3\" />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classes.cardContainer} data-variant={variant}>\n      {expanded ? (\n        <>\n          <div className={classes.cardBody} data-slot=\"timeline-card-body\">\n            {event.content}\n          </div>\n          <div className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? \"justify-between\" : \"justify-end\")} data-slot=\"timeline-card-footer\">\n            {event.source ? (\n              <SourceAction\n                source={event.source}\n                onSourceClick={event.onSourceClick}\n                className={classes.actionLink}\n              />\n            ) : null}\n            <ShowLessButton\n              type=\"button\"\n              onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n              className={classes.actionLink}\n            />\n          </div>\n        </>\n      ) : (\n        <div\n          className={cn(classes.collapsedPreview, \"cursor-pointer hover:bg-muted/30 transition-colors\")}\n          onClick={() => setExpanded(true)}\n        >\n          <span className=\"line-clamp-1 pr-3\">\n            {event.preview ?? event.content}\n          </span>\n          <button type=\"button\" className={cn(classes.actionLink, \"shrink-0\")}>\n            Expand <ChevronDown className=\"h-3 w-3\" />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/timeline-activity.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport { ChevronDown, ChevronUp, ExternalLink } from \"lucide-react\"\nimport { EmailBody as SharedEmailBody } from \"./email-body\"\nimport {\n  decodeEmailDisplayText,\n  emailBodySnippet,\n  formatAddressList,\n  formatEmailTimestamp,\n  normalizeEmailSender,\n} from \"./email-display-helpers\"\n\nexport type TimelineActivityVariant = \"default\" | \"case-panel\"\n\nexport type TimelineEventTone =\n  | \"red\"\n  | \"amber\"\n  | \"emerald\"\n  | \"violet\"\n  | \"blue\"\n  | \"slate\"\n  | \"salesforce\"\n  | \"gmail\"\n\nexport interface TimelineEventActor {\n  kind: \"user\" | \"integration\" | \"system\"\n  name?: string\n  initials?: string\n  avatarUrl?: string\n  verb?: string\n}\n\nexport interface TimelineEvent {\n  id: string\n  icon: React.ReactNode\n  title: React.ReactNode\n  time: string\n  preview?: React.ReactNode\n  email?: {\n    from: string\n    fromEmail?: string\n    to: string\n    cc?: string\n    bcc?: string\n    date?: string\n    subject?: string\n    body: React.ReactNode\n    /**\n     * HTML body. When provided, the card renders formatted, Gmail-like HTML\n     * instead of the plain-text `body`. The component sanitizes it before\n     * rendering. Opt-in: when absent, the plain-text `body` path is used and\n     * existing consumers are unaffected.\n     */\n    bodyHtml?: string\n  }\n  content?: React.ReactNode\n  source?: {\n    label: string\n    actionLabel?: string\n    url: string\n  }\n  defaultExpanded?: boolean\n  isInteractive?: boolean\n  onSourceClick?: () => void\n  tone?: TimelineEventTone\n  actor?: TimelineEventActor\n  isSystemNoise?: boolean\n}\n\n// ---------------------------------------------------------------------------\n// Tone class map — every class is a complete static string literal so\n// Tailwind's JIT scanner can detect them. NO interpolation.\n// ---------------------------------------------------------------------------\n\nexport const TONE_CLASSES: Record<\n  TimelineEventTone,\n  { dot: string; icon: string }\n> = {\n  red: {\n    dot: \"bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40\",\n    icon: \"text-red-600 dark:text-red-300\",\n  },\n  amber: {\n    dot: \"bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40\",\n    icon: \"text-amber-600 dark:text-amber-300\",\n  },\n  emerald: {\n    dot: \"bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40\",\n    icon: \"text-emerald-600 dark:text-emerald-300\",\n  },\n  violet: {\n    dot: \"bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40\",\n    icon: \"text-violet-600 dark:text-violet-300\",\n  },\n  blue: {\n    dot: \"bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40\",\n    icon: \"text-blue-600 dark:text-blue-300\",\n  },\n  slate: {\n    dot: \"bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700\",\n    icon: \"text-slate-500 dark:text-slate-300\",\n  },\n  salesforce: {\n    dot: \"bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25\",\n    icon: \"text-[#00A1E0]\",\n  },\n  gmail: {\n    dot: \"bg-white border-red-200 dark:bg-background dark:border-red-900/40\",\n    icon: \"text-red-500 dark:text-red-300\",\n  },\n}\n\nconst NEUTRAL_DOT_CLASSES = \"border-border/60 bg-background\"\nconst NEUTRAL_ICON_CLASSES = \"text-muted-foreground\"\n\ntype TimelineVariantClasses = {\n  outerRowGap: string\n  connector: string\n  dotWrapperSize: string\n  dot: string\n  contentPadding: string\n  titleRowSpacing: string\n  title: string\n  time: string\n  cardContainer: string\n  cardHeader: string\n  cardBody: string\n  cardFooter: string\n  collapsedPreview: string\n  actionLinkRow: string\n  actionLink: string\n  nonInteractiveContent: string\n}\n\nconst TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantClasses> = {\n  default: {\n    outerRowGap: \"group relative flex gap-3.5\",\n    connector: \"absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60\",\n    dotWrapperSize: \"relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background\",\n    dot: \"flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background\",\n    contentPadding: \"flex-1 pb-5 pt-0.5\",\n    titleRowSpacing: \"flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between\",\n    title: \"pr-4 text-[13px] leading-relaxed text-foreground\",\n    time: \"mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70\",\n    cardContainer: \"overflow-hidden rounded-md border border-border/80 bg-muted/20\",\n    cardHeader: \"px-3 pt-2.5\",\n    cardBody: \"px-3 py-2.5 text-sm\",\n    cardFooter: \"px-3 pb-2.5\",\n    collapsedPreview: \"flex items-center justify-between gap-2 px-3 py-2.5 text-sm text-muted-foreground\",\n    actionLinkRow: \"flex items-center gap-3 px-3 pb-2.5\",\n    actionLink: \"inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\",\n    nonInteractiveContent: \"pr-2 text-sm leading-relaxed text-muted-foreground\",\n  },\n  \"case-panel\": {\n    outerRowGap: \"group relative flex gap-3\",\n    connector: \"absolute left-[11px] top-6 bottom-[-2px] w-px bg-border/50\",\n    dotWrapperSize: \"relative z-10 mt-0.5 flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-background\",\n    dot: \"flex h-[22px] w-[22px] items-center justify-center rounded-full border ring-4 ring-background [&>svg]:h-3 [&>svg]:w-3\",\n    contentPadding: \"flex-1 min-w-0 pb-5 pt-px\",\n    titleRowSpacing: \"flex min-w-0 items-start justify-between gap-3\",\n    title: \"min-w-0 pr-1 text-[13.5px] font-medium leading-tight text-foreground\",\n    time: \"shrink-0 whitespace-nowrap pt-px text-[11px] leading-tight text-muted-foreground/60\",\n    cardContainer: \"overflow-hidden rounded-lg border border-border/70 bg-card\",\n    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\",\n    cardBody: \"px-3 py-2.5 text-[13px] leading-relaxed\",\n    cardFooter: \"border-t border-border/60 bg-muted/10 px-3 py-1.5\",\n    collapsedPreview: \"flex items-center justify-between gap-2 px-3 py-2 text-[13px] text-muted-foreground\",\n    actionLinkRow: \"flex items-center justify-end gap-2 px-3 py-1.5\",\n    actionLink: \"inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground\",\n    nonInteractiveContent: \"pr-2 text-[13px] leading-relaxed text-muted-foreground\",\n  },\n}\n\nexport interface TimelineActivityProps {\n  events: TimelineEvent[]\n  className?: string\n  variant?: TimelineActivityVariant\n}\n\nexport function TimelineActivity({ events, className, variant = \"default\" }: TimelineActivityProps) {\n  return (\n    <div className={cn(\"space-y-0\", className)} data-variant={variant}>\n      {events.map((event, index) => (\n        <TimelineItem\n          key={event.id}\n          event={event}\n          isLast={index === events.length - 1}\n          variant={variant}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {\n  if (actor.kind === \"system\") return null\n\n  if (actor.kind === \"integration\") {\n    return (\n      <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n        <span>Integration</span>\n        <span className=\"text-muted-foreground/40\">&middot;</span>\n        <span>{time}</span>\n      </div>\n    )\n  }\n\n  // actor.kind === \"user\"\n  const verb = actor.verb ?? \"performed this action\"\n  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : \"?\")\n\n  return (\n    <div className=\"mt-1 flex items-center gap-1.5 text-xs text-muted-foreground\" data-testid=\"actor-byline\">\n      {actor.avatarUrl ? (\n        <img\n          src={actor.avatarUrl}\n          alt={actor.name ?? \"User\"}\n          className=\"h-4 w-4 rounded-full object-cover\"\n        />\n      ) : (\n        <span className=\"flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground\">\n          {displayInitials}\n        </span>\n      )}\n      {actor.name && <span className=\"text-foreground font-medium\">{actor.name}</span>}\n      <span>{verb}</span>\n      <span className=\"text-muted-foreground/40\">&middot;</span>\n      <span>{time}</span>\n    </div>\n  )\n}\n\nfunction TimelineItem({\n  event,\n  isLast,\n  variant,\n}: {\n  event: TimelineEvent\n  isLast: boolean\n  variant: TimelineActivityVariant\n}) {\n  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)\n  const [showAllRecipients, setShowAllRecipients] = React.useState(false)\n  const hasContent = !!event.content\n  const hasEmail = !!event.email\n  const classes = TIMELINE_VARIANT_CLASSES[variant]\n\n  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null\n  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES\n  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES\n\n  return (\n    <div className={classes.outerRowGap}>\n      {!isLast && (\n        <div className={classes.connector} />\n      )}\n\n      <div className={classes.dotWrapperSize}>\n        <div className={cn(classes.dot, dotClasses, iconClasses)} data-testid=\"timeline-dot\">\n          {event.icon}\n        </div>\n      </div>\n\n      <div className={classes.contentPadding}>\n        <div className={classes.titleRowSpacing}>\n          <div className={classes.title}>\n            {event.title}\n          </div>\n          <span className={classes.time}>\n            {event.time}\n          </span>\n        </div>\n\n        {event.actor && <ActorByline actor={event.actor} time={event.time} />}\n\n        {(hasContent || hasEmail) && (\n          <div className=\"mt-2\">\n            {event.isInteractive ? (\n              hasEmail ? (\n                <EmailCard\n                  event={event}\n                  expanded={expanded}\n                  setExpanded={setExpanded}\n                  showAllRecipients={showAllRecipients}\n                  setShowAllRecipients={setShowAllRecipients}\n                  variant={variant}\n                  classes={classes}\n                />\n              ) : (\n                <ContentCard\n                  event={event}\n                  expanded={expanded}\n                  setExpanded={setExpanded}\n                  variant={variant}\n                  classes={classes}\n                />\n              )\n            ) : (\n              <div className={classes.nonInteractiveContent}>\n                {event.content}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\ntype TimelineEmail = NonNullable<TimelineEvent[\"email\"]>\ntype TimelineSource = NonNullable<TimelineEvent[\"source\"]>\n\nfunction reactNodeToDisplayText(value: React.ReactNode): string {\n  if (typeof value === \"string\" || typeof value === \"number\") return decodeEmailDisplayText(String(value))\n  return \"\"\n}\n\nfunction getTimelineEmailDisplay(email: TimelineEmail) {\n  const sender = normalizeEmailSender({ name: email.from, email: email.fromEmail })\n  const to = formatAddressList(email.to) || decodeEmailDisplayText(email.to ?? \"\")\n  const cc = formatAddressList(email.cc) || decodeEmailDisplayText(email.cc ?? \"\")\n  const bcc = formatAddressList(email.bcc) || decodeEmailDisplayText(email.bcc ?? \"\")\n  const date = formatEmailTimestamp(email.date) ?? decodeEmailDisplayText(email.date ?? \"\")\n  const subject = email.subject ? decodeEmailDisplayText(email.subject) : \"\"\n  const bodyText = reactNodeToDisplayText(email.body)\n  const snippet = emailBodySnippet({ bodyHtml: email.bodyHtml, body: bodyText }, 140)\n\n  return { sender, to, cc, bcc, date, subject, bodyText, snippet }\n}\n\nfunction EmailMetadata({\n  email,\n  showAllRecipients,\n  setShowAllRecipients,\n}: {\n  email: TimelineEmail\n  showAllRecipients: boolean\n  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>\n}) {\n  const display = getTimelineEmailDisplay(email)\n\n  return (\n    <>\n      <div className=\"flex items-center justify-between gap-4\">\n        <div className=\"flex min-w-0 items-baseline gap-1.5\">\n          <span className=\"font-semibold text-foreground text-[13px] whitespace-nowrap\">{display.sender.name}</span>\n          {display.sender.email ? (\n            <span className=\"text-muted-foreground/60 text-xs truncate\">{display.sender.email}</span>\n          ) : null}\n        </div>\n        {display.date ? (\n          <span className=\"shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap\">{display.date}</span>\n        ) : null}\n      </div>\n      <div className=\"mt-0.5 flex items-center gap-1 text-xs text-muted-foreground\">\n        <span className=\"truncate\">\n          To {display.to || \"no recipient yet\"}\n          {!showAllRecipients && (display.cc || display.bcc) ? (\n            <>, ...</>\n          ) : null}\n          {showAllRecipients && display.cc ? (\n            <>, <span className=\"text-muted-foreground/40\">cc</span> {display.cc}</>\n          ) : null}\n          {showAllRecipients && display.bcc ? (\n            <> <span className=\"text-muted-foreground/40\">bcc</span> {display.bcc}</>\n          ) : null}\n        </span>\n        {(display.cc || display.bcc) ? (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              setShowAllRecipients((prev) => !prev)\n            }}\n            className=\"shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors\"\n          >\n            <ChevronDown className={cn(\"h-3 w-3 transition-transform\", showAllRecipients && \"rotate-180\")} />\n          </button>\n        ) : null}\n      </div>\n    </>\n  )\n}\n\nfunction TimelineEmailBody({ email }: { email: TimelineEmail }) {\n  const display = getTimelineEmailDisplay(email)\n  const bodyFallback = display.bodyText || (typeof email.body === \"string\" ? email.body : \"\")\n\n  if (!email.bodyHtml && !bodyFallback && email.body) {\n    return <div className=\"whitespace-pre-line text-sm leading-relaxed text-foreground/90\">{email.body}</div>\n  }\n\n  const body = (\n    <SharedEmailBody\n      html={email.bodyHtml}\n      text={bodyFallback}\n      variant=\"history\"\n      collapseDetails={true}\n      className=\"text-sm leading-relaxed\"\n    />\n  )\n\n  return email.bodyHtml ? <div data-slot=\"timeline-email-html\">{body}</div> : body\n}\n\nfunction renderDecodedPreview(preview?: React.ReactNode): React.ReactNode {\n  if (typeof preview === \"string\" || typeof preview === \"number\") return decodeEmailDisplayText(String(preview))\n  return preview\n}\n\nfunction CollapsedEmailPreview({\n  email,\n  preview,\n  className,\n  actionClassName,\n  onClick,\n}: {\n  email?: TimelineEmail\n  preview?: React.ReactNode\n  className: string\n  actionClassName: string\n  onClick?: () => void\n}) {\n  const display = email ? getTimelineEmailDisplay(email) : null\n  const previewContent = display?.snippet || renderDecodedPreview(preview)\n\n  return (\n    <div className={className} onClick={onClick}>\n      <span className=\"line-clamp-1 pr-3 text-[13px]\">\n        <span className=\"text-muted-foreground\">{display?.sender.name}</span>\n        <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n        {display?.subject ? (\n          <>\n            <span className=\"text-muted-foreground\">{display.subject}</span>\n            <span className=\"mx-1.5 text-muted-foreground/40\">&middot;</span>\n          </>\n        ) : null}\n        <span className=\"text-muted-foreground\">{previewContent}</span>\n      </span>\n      <button type=\"button\" className={actionClassName}>\n        Expand <ChevronDown className=\"h-3 w-3\" />\n      </button>\n    </div>\n  )\n}\n\nfunction ShowLessButton({\n  className,\n  onClick,\n  type,\n}: {\n  className: string\n  onClick: React.MouseEventHandler<HTMLButtonElement>\n  type?: \"button\"\n}) {\n  return (\n    <button type={type} onClick={onClick} className={className}>\n      Show less <ChevronUp className=\"h-3 w-3\" />\n    </button>\n  )\n}\n\nfunction SourceAction({\n  source,\n  onSourceClick,\n  className,\n}: {\n  source: TimelineSource\n  onSourceClick?: () => void\n  className: string\n}) {\n  const actionLabel = source.actionLabel ?? `Open in ${source.label}`\n\n  if (onSourceClick) {\n    return (\n      <button\n        type=\"button\"\n        onClick={(e) => { e.stopPropagation(); onSourceClick(); }}\n        className={className}\n      >\n        {actionLabel}\n        <ExternalLink className=\"h-3 w-3\" />\n      </button>\n    )\n  }\n\n  return (\n    <a\n      href={source.url}\n      target=\"_blank\"\n      rel=\"noreferrer noopener\"\n      className={className}\n    >\n      {actionLabel}\n      <ExternalLink className=\"h-3 w-3\" />\n    </a>\n  )\n}\n\nfunction EmailCard({\n  event,\n  expanded,\n  setExpanded,\n  showAllRecipients,\n  setShowAllRecipients,\n  variant,\n  classes,\n}: {\n  event: TimelineEvent\n  expanded: boolean\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>\n  showAllRecipients: boolean\n  setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>\n  variant: TimelineActivityVariant\n  classes: TimelineVariantClasses\n}) {\n  if (variant === \"default\") {\n    return (\n      <div className={classes.cardContainer} data-variant={variant}>\n        <div\n          className={cn(\n            \"px-3 py-2.5 text-sm\",\n            !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n          )}\n          onClick={() => !expanded && setExpanded(true)}\n        >\n          {expanded && event.email ? (\n            <div className=\"space-y-3\">\n              <div>\n                <EmailMetadata\n                  email={event.email}\n                  showAllRecipients={showAllRecipients}\n                  setShowAllRecipients={setShowAllRecipients}\n                />\n              </div>\n\n              <TimelineEmailBody email={event.email} />\n\n              {event.content ? (\n                <div className=\"rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground\">\n                  {event.content}\n                </div>\n              ) : null}\n\n              <div className=\"mt-2 flex items-center gap-3\">\n                {event.source ? (\n                  <SourceAction\n                    source={event.source}\n                    onSourceClick={event.onSourceClick}\n                    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\"\n                  />\n                ) : null}\n                <ShowLessButton\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    setExpanded(false)\n                  }}\n                  className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                />\n              </div>\n            </div>\n          ) : (\n            <CollapsedEmailPreview\n              email={event.email}\n              preview={event.preview}\n              className=\"flex items-center justify-between gap-2 text-muted-foreground\"\n              actionClassName=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\"\n            />\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classes.cardContainer} data-variant={variant}>\n      {expanded && event.email ? (\n        <>\n          <div className={classes.cardHeader} data-slot=\"timeline-card-header\">\n            <EmailMetadata\n              email={event.email}\n              showAllRecipients={showAllRecipients}\n              setShowAllRecipients={setShowAllRecipients}\n            />\n          </div>\n\n          <div className={classes.cardBody} data-slot=\"timeline-card-body\">\n            <TimelineEmailBody email={event.email} />\n            {event.content ? (\n              <div className=\"mt-3 rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground\">\n                {event.content}\n              </div>\n            ) : null}\n          </div>\n\n          <div\n            className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? \"justify-between\" : \"justify-end\")}\n            data-slot=\"timeline-card-footer\"\n          >\n            {event.source ? (\n              <SourceAction\n                source={event.source}\n                onSourceClick={event.onSourceClick}\n                className={classes.actionLink}\n              />\n            ) : null}\n            <ShowLessButton\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation()\n                setExpanded(false)\n              }}\n              className={classes.actionLink}\n            />\n          </div>\n        </>\n      ) : (\n        <CollapsedEmailPreview\n          email={event.email}\n          preview={event.preview}\n          className={cn(classes.collapsedPreview, \"cursor-pointer hover:bg-muted/30 transition-colors\")}\n          actionClassName={cn(classes.actionLink, \"shrink-0\")}\n          onClick={() => setExpanded(true)}\n        />\n      )}\n    </div>\n  )\n}\n\nfunction ContentCard({\n  event,\n  expanded,\n  setExpanded,\n  variant,\n  classes,\n}: {\n  event: TimelineEvent\n  expanded: boolean\n  setExpanded: React.Dispatch<React.SetStateAction<boolean>>\n  variant: TimelineActivityVariant\n  classes: TimelineVariantClasses\n}) {\n  if (variant === \"default\") {\n    return (\n      <div className={classes.cardContainer} data-variant={variant}>\n        <div\n          className={cn(\n            \"px-3 py-2.5 text-sm\",\n            !expanded && \"cursor-pointer hover:bg-muted/30 transition-colors\"\n          )}\n          onClick={() => !expanded && setExpanded(true)}\n        >\n          {expanded ? (\n            <div className=\"space-y-2\">\n              {event.content}\n              <div className=\"mt-2 flex items-center gap-3\">\n                {event.source ? (\n                  <SourceAction\n                    source={event.source}\n                    onSourceClick={event.onSourceClick}\n                    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\"\n                  />\n                ) : null}\n                <ShowLessButton\n                  onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n                  className=\"flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground\"\n                />\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n              <span className=\"line-clamp-1 pr-3\">\n                {event.preview ?? event.content}\n              </span>\n              <button className=\"flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground\">\n                Expand <ChevronDown className=\"h-3 w-3\" />\n              </button>\n            </div>\n          )}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={classes.cardContainer} data-variant={variant}>\n      {expanded ? (\n        <>\n          <div className={classes.cardBody} data-slot=\"timeline-card-body\">\n            {event.content}\n          </div>\n          <div className={cn(classes.cardFooter, classes.actionLinkRow, event.source ? \"justify-between\" : \"justify-end\")} data-slot=\"timeline-card-footer\">\n            {event.source ? (\n              <SourceAction\n                source={event.source}\n                onSourceClick={event.onSourceClick}\n                className={classes.actionLink}\n              />\n            ) : null}\n            <ShowLessButton\n              type=\"button\"\n              onClick={(e) => { e.stopPropagation(); setExpanded(false); }}\n              className={classes.actionLink}\n            />\n          </div>\n        </>\n      ) : (\n        <div\n          className={cn(classes.collapsedPreview, \"cursor-pointer hover:bg-muted/30 transition-colors\")}\n          onClick={() => setExpanded(true)}\n        >\n          <span className=\"line-clamp-1 pr-3\">\n            {event.preview ?? event.content}\n          </span>\n          <button type=\"button\" className={cn(classes.actionLink, \"shrink-0\")}>\n            Expand <ChevronDown className=\"h-3 w-3\" />\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.20.7",
+  "version": "0.20.8",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/timeline-activity.test.tsx

@@ -341,12 +341,13 @@ describe("TimelineActivity", () => {
   })
 
   it.each(["default", "case-panel"] as const)(
-    "renders email source actionLabel before Show less for the %s variant",
+    "renders email source actionLabel, content, and Show less for the %s variant",
     (variant) => {
       const threadUrl = "https://mail.google.com/mail/u/0/#inbox/thread-1"
       const event = minimal({
         isInteractive: true,
         defaultExpanded: true,
+        content: "Moved to waiting",
         email: {
           from: "Priya Raman",
           to: "Dana Okafor",
@@ -361,6 +362,7 @@ describe("TimelineActivity", () => {
       const sourceAction = screen.getByRole("link", { name: /Open thread/i })
       expect(sourceAction).toHaveAttribute("href", threadUrl)
       expect(screen.queryByRole("link", { name: /Open in Gmail/i })).toBeNull()
+      expect(screen.getByText("Moved to waiting")).toBeDefined()
 
       const footer = variant === "case-panel"
         ? container.querySelector('[data-slot="timeline-card-footer"]')

package/src/components/timeline-activity.tsx

@@ -538,6 +538,12 @@ function EmailCard({
 
               <TimelineEmailBody email={event.email} />
 
+              {event.content ? (
+                <div className="rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground">
+                  {event.content}
+                </div>
+              ) : null}
+
               <div className="mt-2 flex items-center gap-3">
                 {event.source ? (
                   <SourceAction
@@ -582,6 +588,11 @@ function EmailCard({
 
           <div className={classes.cardBody} data-slot="timeline-card-body">
             <TimelineEmailBody email={event.email} />
+            {event.content ? (
+              <div className="mt-3 rounded-md bg-muted/30 px-2.5 py-2 text-xs text-muted-foreground">
+                {event.content}
+              </div>
+            ) : null}
           </div>
 
           <div