@handled-ai/design-system 0.20.9 → 0.20.10

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              {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":[]}
+{"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    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  if (onSourceClick) {\n    return (\n      <button\n        type=\"button\"\n        onClick={(e) => { e.stopPropagation(); onSourceClick(); }}\n        className={className}\n      >\n        Open in {source.label}\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      Open in {source.label}\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              <ShowLessButton\n                onClick={(e) => {\n                  e.stopPropagation()\n                  setExpanded(false)\n                }}\n                className=\"mt-2 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          ) : (\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 className={cn(classes.cardFooter, classes.actionLinkRow)} data-slot=\"timeline-card-footer\">\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/dist/prototype/prototype-inbox-view.js

@@ -113,9 +113,10 @@ function TimelineSection({
   setShowSystemEvents,
   attentionCount,
   sysEvtConfig,
-  lastActivityTime
+  lastActivityTime,
+  isCasePanel = false
 }) {
-  var _a;
+  var _a, _b, _c, _d;
   const visibleEvents = [];
   let hiddenCount = 0;
   for (const e of timelineEvents) {
@@ -124,74 +125,117 @@ function TimelineSection({
   }
   const hasSystemNoise = hiddenCount > 0;
   const toggleLabel = (_a = sysEvtConfig == null ? void 0 : sysEvtConfig.toggleLabel) != null ? _a : "System events";
+  const toggleHelp = showSystemEvents ? (_c = (_b = sysEvtConfig == null ? void 0 : sysEvtConfig.visibleHint) == null ? void 0 : _b.replace("{count}", String(hiddenCount))) != null ? _c : "Hide system events" : (_d = sysEvtConfig == null ? void 0 : sysEvtConfig.hiddenHint) != null ? _d : "Show system events";
   const firstVisibleTime = (!hasSystemNoise || showSystemEvents) && lastActivityTime ? lastActivityTime : visibleEvents.length > 0 ? visibleEvents[0].time : "";
   const visibleCount = visibleEvents.length;
   const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`;
-  return /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2",
-        "data-testid": "timeline-header",
-        children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowTimeline((prev) => !prev),
-              className: "flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0",
-              "data-testid": "timeline-collapse-btn",
-              children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors", children: "Activity timeline" }),
-                !showTimeline && attentionCount != null && attentionCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20", children: [
-                  attentionCount,
-                  " new"
-                ] }),
-                !showTimeline && firstVisibleTime && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground/60", "data-testid": "last-activity-hint", children: [
-                  "\xB7 Last activity ",
-                  firstVisibleTime
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-muted-foreground", "data-testid": "event-count", children: eventCountLabel }),
-                  /* @__PURE__ */ jsx(ChevronDown, { className: `h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}` })
-                ] })
-              ]
-            }
-          ),
-          hasSystemNoise && /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowSystemEvents((prev) => !prev),
-              className: cn(
-                "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors hover:text-foreground",
-                showSystemEvents ? "border-primary/40 bg-primary/10 text-primary shadow-sm hover:bg-primary/15" : "border-border bg-background text-muted-foreground hover:bg-muted/40"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        isCasePanel ? "mt-8 border-t border-border pt-8 pb-8" : "mb-8"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex w-full items-center justify-between",
+              isCasePanel ? "gap-4 border-b border-border pb-5" : "group/timeline gap-2 rounded-md py-2 transition-colors hover:bg-muted/40 -mx-2 px-2"
+            ),
+            "data-testid": "timeline-header",
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setShowTimeline((prev) => !prev),
+                  className: "flex min-w-0 cursor-pointer items-center gap-2 border-0 bg-transparent p-0 text-left",
+                  "data-testid": "timeline-collapse-btn",
+                  children: [
+                    /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold uppercase tracking-[0.16em] text-muted-foreground transition-colors group-hover/timeline:text-foreground", children: "ACTIVITY TIMELINE" }),
+                    !showTimeline && attentionCount != null && attentionCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20", children: [
+                      attentionCount,
+                      " new"
+                    ] }),
+                    !isCasePanel && !showTimeline && firstVisibleTime && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground/60", "data-testid": "last-activity-hint", children: [
+                      "\xB7 Last activity ",
+                      firstVisibleTime
+                    ] })
+                  ]
+                }
               ),
-              "aria-pressed": showSystemEvents,
-              "data-testid": "system-events-toggle",
-              children: [
-                toggleLabel,
-                /* @__PURE__ */ jsx(
-                  "span",
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [
+                hasSystemNoise && /* @__PURE__ */ jsxs(
+                  "button",
                   {
+                    type: "button",
+                    onClick: () => setShowSystemEvents((prev) => !prev),
                     className: cn(
-                      "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-semibold tabular-nums",
-                      showSystemEvents ? "bg-primary/15 text-primary ring-1 ring-primary/30" : "bg-muted text-muted-foreground ring-1 ring-border/70"
+                      "inline-flex shrink-0 cursor-pointer items-center gap-3 rounded-full border px-3.5 py-2 text-sm font-semibold transition-colors",
+                      showSystemEvents ? "border-foreground bg-foreground text-background shadow-sm hover:bg-foreground/90" : "border-border bg-background text-muted-foreground shadow-sm hover:bg-muted/40 hover:text-foreground"
                     ),
-                    "data-testid": "hidden-count-badge",
-                    children: hiddenCount
+                    "aria-pressed": showSystemEvents,
+                    "aria-label": toggleHelp,
+                    title: toggleHelp,
+                    "data-testid": "system-events-toggle",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "relative inline-flex h-4 w-8 shrink-0 items-center rounded-full p-0.5 transition-colors",
+                            showSystemEvents ? "bg-teal-600" : "bg-muted-foreground/30"
+                          ),
+                          "aria-hidden": "true",
+                          "data-testid": "system-events-indicator",
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "block h-3 w-3 rounded-full bg-white shadow-sm transition-transform",
+                                showSystemEvents ? "translate-x-4" : "translate-x-0"
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: toggleLabel }),
+                      !showSystemEvents ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "inline-flex min-w-[22px] items-center justify-center rounded-full bg-muted px-1.5 text-xs font-bold tabular-nums text-muted-foreground",
+                          "data-testid": "hidden-count-badge",
+                          children: hiddenCount
+                        }
+                      ) : null
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowTimeline((prev) => !prev),
+                    className: cn(
+                      "inline-flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground",
+                      isCasePanel ? "gap-3 text-sm" : "gap-1.5 text-[11px]"
+                    ),
+                    "aria-label": showTimeline ? "Collapse activity timeline" : "Expand activity timeline",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", "data-testid": "event-count", children: eventCountLabel }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: `h-3.5 w-3.5 transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}` })
+                    ]
                   }
                 )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    showTimeline && visibleEvents.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(TimelineActivity, { events: visibleEvents, variant: "case-panel" }) }),
-    showTimeline && !showSystemEvents && (sysEvtConfig == null ? void 0 : sysEvtConfig.hiddenHint) && hasSystemNoise && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2", "data-testid": "timeline-footer-hint", children: sysEvtConfig.hiddenHint }),
-    showTimeline && showSystemEvents && (sysEvtConfig == null ? void 0 : sysEvtConfig.visibleHint) && hasSystemNoise && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2", "data-testid": "timeline-footer-hint", children: sysEvtConfig.visibleHint.replace("{count}", String(hiddenCount)) })
-  ] });
+              ] })
+            ]
+          }
+        ),
+        showTimeline && visibleEvents.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(TimelineActivity, { events: visibleEvents, variant: "case-panel" }) })
+      ]
+    }
+  );
 }
 function DetailView({
   item,
@@ -387,7 +431,8 @@ function DetailView({
       setShowSystemEvents,
       attentionCount,
       sysEvtConfig,
-      lastActivityTime
+      lastActivityTime,
+      isCasePanel: isCasePanelV2
     }
   ) : null;
   const suggestedActionsSection = sections.suggestedActions ? /* @__PURE__ */ jsx(SignalApproval.Gate, { children: /* @__PURE__ */ jsx(