@handled-ai/design-system 0.20.0 → 0.20.2

package/dist/components/timeline-activity.js

@@ -51,12 +51,51 @@ const TONE_CLASSES = {
 };
 const NEUTRAL_DOT_CLASSES = "border-border/60 bg-background";
 const NEUTRAL_ICON_CLASSES = "text-muted-foreground";
-function TimelineActivity({ events, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-0", className), children: events.map((event, index) => /* @__PURE__ */ jsx(
+const TIMELINE_VARIANT_CLASSES = {
+  default: {
+    outerRowGap: "group relative flex gap-3.5",
+    connector: "absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60",
+    dotWrapperSize: "relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background",
+    dot: "flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background",
+    contentPadding: "flex-1 pb-5 pt-0.5",
+    titleRowSpacing: "flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between",
+    title: "pr-4 text-[13px] leading-relaxed text-foreground",
+    time: "mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70",
+    cardContainer: "overflow-hidden rounded-md border border-border/80 bg-muted/20",
+    cardHeader: "px-3 pt-2.5",
+    cardBody: "px-3 py-2.5 text-sm",
+    cardFooter: "px-3 pb-2.5",
+    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2.5 text-sm text-muted-foreground",
+    actionLinkRow: "flex items-center gap-3 px-3 pb-2.5",
+    actionLink: "inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground",
+    nonInteractiveContent: "pr-2 text-sm leading-relaxed text-muted-foreground"
+  },
+  "case-panel": {
+    outerRowGap: "group relative flex gap-3",
+    connector: "absolute left-[7px] top-[18px] bottom-[-4px] w-px bg-border/60",
+    dotWrapperSize: "relative z-10 mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background",
+    dot: "flex h-3.5 w-3.5 items-center justify-center rounded-full border ring-[3px] ring-background",
+    contentPadding: "flex-1 pb-4 pt-0.5",
+    titleRowSpacing: "flex min-w-0 flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between",
+    title: "pr-3 text-[13px] leading-snug text-foreground",
+    time: "mt-0.5 shrink-0 whitespace-nowrap text-[11px] leading-snug text-muted-foreground/70",
+    cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card shadow-sm",
+    cardHeader: "border-b border-border/60 bg-background px-3 py-2",
+    cardBody: "px-3 py-2.5 text-sm",
+    cardFooter: "border-t border-border/60 bg-background/50 px-3 py-1.5",
+    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-sm text-muted-foreground",
+    actionLinkRow: "flex items-center justify-end gap-2 px-3 py-1.5",
+    actionLink: "inline-flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground",
+    nonInteractiveContent: "pr-2 text-[13px] leading-snug text-muted-foreground"
+  }
+};
+function TimelineActivity({ events, className, variant = "default" }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-0", className), "data-variant": variant, children: events.map((event, index) => /* @__PURE__ */ jsx(
     TimelineItem,
     {
       event,
-      isLast: index === events.length - 1
+      isLast: index === events.length - 1,
+      variant
     },
     event.id
   )) });
@@ -88,180 +127,353 @@ function ActorByline({ actor, time }) {
     /* @__PURE__ */ jsx("span", { children: time })
   ] });
 }
-function TimelineItem({ event, isLast }) {
-  var _a, _b, _c, _d;
+function TimelineItem({
+  event,
+  isLast,
+  variant
+}) {
+  var _a;
   const [expanded, setExpanded] = React.useState((_a = event.defaultExpanded) != null ? _a : false);
   const [showAllRecipients, setShowAllRecipients] = React.useState(false);
   const hasContent = !!event.content;
   const hasEmail = !!event.email;
+  const classes = TIMELINE_VARIANT_CLASSES[variant];
   const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null;
   const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES;
   const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES;
-  return /* @__PURE__ */ jsxs("div", { className: "group relative flex gap-3.5", children: [
-    !isLast && /* @__PURE__ */ jsx("div", { className: "absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60" }),
-    /* @__PURE__ */ jsx("div", { className: "relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background", children: /* @__PURE__ */ jsx("div", { className: cn("flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background", dotClasses, iconClasses), "data-testid": "timeline-dot", children: event.icon }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 pb-5 pt-0.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between", children: [
-        /* @__PURE__ */ jsx("div", { className: "pr-4 text-[13px] leading-relaxed text-foreground", children: event.title }),
-        /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70", children: event.time })
+  return /* @__PURE__ */ jsxs("div", { className: classes.outerRowGap, children: [
+    !isLast && /* @__PURE__ */ jsx("div", { className: classes.connector }),
+    /* @__PURE__ */ jsx("div", { className: classes.dotWrapperSize, children: /* @__PURE__ */ jsx("div", { className: cn(classes.dot, dotClasses, iconClasses), "data-testid": "timeline-dot", children: event.icon }) }),
+    /* @__PURE__ */ jsxs("div", { className: classes.contentPadding, children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.titleRowSpacing, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.title, children: event.title }),
+        /* @__PURE__ */ jsx("span", { className: classes.time, children: event.time })
       ] }),
       event.actor && /* @__PURE__ */ jsx(ActorByline, { actor: event.actor, time: event.time }),
-      (hasContent || hasEmail) && /* @__PURE__ */ jsx("div", { className: "mt-2", children: event.isInteractive ? hasEmail ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-border/80 bg-muted/20", children: /* @__PURE__ */ jsx(
+      (hasContent || hasEmail) && /* @__PURE__ */ jsx("div", { className: "mt-2", children: event.isInteractive ? hasEmail ? /* @__PURE__ */ jsx(
+        EmailCard,
+        {
+          event,
+          expanded,
+          setExpanded,
+          showAllRecipients,
+          setShowAllRecipients,
+          variant,
+          classes
+        }
+      ) : /* @__PURE__ */ jsx(
+        ContentCard,
+        {
+          event,
+          expanded,
+          setExpanded,
+          variant,
+          classes
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: classes.nonInteractiveContent, children: event.content }) })
+    ] })
+  ] });
+}
+function EmailMetadata({
+  email,
+  showAllRecipients,
+  setShowAllRecipients
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground text-[13px] whitespace-nowrap", children: email.from }),
+        email.fromEmail && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 text-xs truncate", children: email.fromEmail })
+      ] }),
+      email.date && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap", children: email.date })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+        "To ",
+        email.to,
+        !showAllRecipients && (email.cc || email.bcc) ? /* @__PURE__ */ jsx(Fragment, { children: ", ..." }) : null,
+        showAllRecipients && email.cc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          ", ",
+          email.cc
+        ] }) : null,
+        showAllRecipients && email.bcc ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "bcc" }),
+          " ",
+          email.bcc
+        ] }) : null
+      ] }),
+      (email.cc || email.bcc) && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowAllRecipients((prev) => !prev);
+          },
+          className: "shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180") })
+        }
+      )
+    ] })
+  ] });
+}
+function EmailBody({ email }) {
+  if (email.bodyHtml) {
+    return (
+      // Gmail reading-pane typography; quoted history
+      // (blockquote.gmail_quote) is de-emphasized with a left rule.
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn(
-            "px-3 py-2.5 text-sm",
-            !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
-          ),
-          onClick: () => !expanded && setExpanded(true),
-          children: expanded && event.email ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [
-                  /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground text-[13px] whitespace-nowrap", children: event.email.from }),
-                  event.email.fromEmail && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 text-xs truncate", children: event.email.fromEmail })
-                ] }),
-                event.email.date && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap", children: event.email.date })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
-                  "To ",
-                  event.email.to,
-                  !showAllRecipients && (event.email.cc || event.email.bcc) ? /* @__PURE__ */ jsx(Fragment, { children: ", ..." }) : null,
-                  showAllRecipients && event.email.cc ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    ", ",
-                    event.email.cc
-                  ] }) : null,
-                  showAllRecipients && event.email.bcc ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    " ",
-                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "bcc" }),
-                    " ",
-                    event.email.bcc
-                  ] }) : null
-                ] }),
-                (event.email.cc || event.email.bcc) && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      setShowAllRecipients((prev) => !prev);
-                    },
-                    className: "shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors",
-                    children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180") })
-                  }
-                )
-              ] })
-            ] }),
-            event.email.bodyHtml ? (
-              // Gmail reading-pane typography; quoted history
-              // (blockquote.gmail_quote) is de-emphasized with a left rule.
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "timeline-email-html",
-                  className: EMAIL_HTML_CLASS,
-                  dangerouslySetInnerHTML: { __html: sanitizeHtml(event.email.bodyHtml) }
-                }
-              )
-            ) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: event.email.body }),
-            /* @__PURE__ */ jsxs(
-              "button",
+          "data-slot": "timeline-email-html",
+          className: EMAIL_HTML_CLASS,
+          dangerouslySetInnerHTML: { __html: sanitizeHtml(email.bodyHtml) }
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "whitespace-pre-line text-sm leading-relaxed text-foreground/90", children: email.body });
+}
+function CollapsedEmailPreview({
+  email,
+  preview,
+  className,
+  actionClassName,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, onClick, children: [
+    /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 pr-3 text-[13px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: email == null ? void 0 : email.from }),
+      /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
+      (email == null ? void 0 : email.subject) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: email.subject }),
+        /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" })
+      ] }) : null,
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: preview })
+    ] }),
+    /* @__PURE__ */ jsxs("button", { type: "button", className: actionClassName, children: [
+      "Expand ",
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+    ] })
+  ] });
+}
+function ShowLessButton({
+  className,
+  onClick,
+  type
+}) {
+  return /* @__PURE__ */ jsxs("button", { type, onClick, className, children: [
+    "Show less ",
+    /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" })
+  ] });
+}
+function SourceAction({
+  source,
+  onSourceClick,
+  className
+}) {
+  if (onSourceClick) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSourceClick();
+        },
+        className,
+        children: [
+          "Open in ",
+          source.label,
+          /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: source.url,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      className,
+      children: [
+        "Open in ",
+        source.label,
+        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
+      ]
+    }
+  );
+}
+function EmailCard({
+  event,
+  expanded,
+  setExpanded,
+  showAllRecipients,
+  setShowAllRecipients,
+  variant,
+  classes
+}) {
+  if (variant === "default") {
+    return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "px-3 py-2.5 text-sm",
+          !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+        ),
+        onClick: () => !expanded && setExpanded(true),
+        children: expanded && event.email ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            EmailMetadata,
+            {
+              email: event.email,
+              showAllRecipients,
+              setShowAllRecipients
+            }
+          ) }),
+          /* @__PURE__ */ jsx(EmailBody, { email: event.email }),
+          /* @__PURE__ */ jsx(
+            ShowLessButton,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(false);
+              },
+              className: "mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          CollapsedEmailPreview,
+          {
+            email: event.email,
+            preview: event.preview,
+            className: "flex items-center justify-between gap-2 text-muted-foreground",
+            actionClassName: "flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground"
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, children: expanded && event.email ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: classes.cardHeader, "data-slot": "timeline-card-header", children: /* @__PURE__ */ jsx(
+      EmailMetadata,
+      {
+        email: event.email,
+        showAllRecipients,
+        setShowAllRecipients
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: classes.cardBody, "data-slot": "timeline-card-body", children: /* @__PURE__ */ jsx(EmailBody, { email: event.email }) }),
+    /* @__PURE__ */ jsx("div", { className: cn(classes.cardFooter, classes.actionLinkRow), "data-slot": "timeline-card-footer", children: /* @__PURE__ */ jsx(
+      ShowLessButton,
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          setExpanded(false);
+        },
+        className: classes.actionLink
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsx(
+    CollapsedEmailPreview,
+    {
+      email: event.email,
+      preview: event.preview,
+      className: cn(classes.collapsedPreview, "cursor-pointer hover:bg-muted/30 transition-colors"),
+      actionClassName: cn(classes.actionLink, "shrink-0"),
+      onClick: () => setExpanded(true)
+    }
+  ) });
+}
+function ContentCard({
+  event,
+  expanded,
+  setExpanded,
+  variant,
+  classes
+}) {
+  var _a, _b;
+  if (variant === "default") {
+    return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "px-3 py-2.5 text-sm",
+          !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+        ),
+        onClick: () => !expanded && setExpanded(true),
+        children: expanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          event.content,
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
+            event.source ? /* @__PURE__ */ jsx(
+              SourceAction,
+              {
+                source: event.source,
+                onSourceClick: event.onSourceClick,
+                className: "mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              ShowLessButton,
               {
                 onClick: (e) => {
                   e.stopPropagation();
                   setExpanded(false);
                 },
-                className: "mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground",
-                children: [
-                  "Show less ",
-                  /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" })
-                ]
+                className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsxs("span", { className: "line-clamp-1 pr-3 text-[13px]", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: (_b = event.email) == null ? void 0 : _b.from }),
-              /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
-              ((_c = event.email) == null ? void 0 : _c.subject) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: event.email.subject }),
-                /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" })
-              ] }) : null,
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: event.preview })
-            ] }),
-            /* @__PURE__ */ jsxs("button", { className: "flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground", children: [
-              "Expand ",
-              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
-            ] })
           ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1 pr-3", children: (_a = event.preview) != null ? _a : event.content }),
+          /* @__PURE__ */ jsxs("button", { className: "flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground", children: [
+            "Expand ",
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+          ] })
+        ] })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: classes.cardContainer, "data-variant": variant, children: expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: classes.cardBody, "data-slot": "timeline-card-body", children: event.content }),
+    /* @__PURE__ */ jsxs("div", { className: cn(classes.cardFooter, classes.actionLinkRow, event.source ? "justify-between" : "justify-end"), "data-slot": "timeline-card-footer", children: [
+      event.source ? /* @__PURE__ */ jsx(
+        SourceAction,
+        {
+          source: event.source,
+          onSourceClick: event.onSourceClick,
+          className: classes.actionLink
         }
-      ) }) : /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-border/80 bg-muted/20", children: /* @__PURE__ */ jsx(
-        "div",
+      ) : null,
+      /* @__PURE__ */ jsx(
+        ShowLessButton,
         {
-          className: cn(
-            "px-3 py-2.5 text-sm",
-            !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
-          ),
-          onClick: () => !expanded && setExpanded(true),
-          children: expanded ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            event.content,
-            /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-3", children: [
-              event.source ? event.onSourceClick ? /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: (e) => {
-                    var _a2;
-                    e.stopPropagation();
-                    (_a2 = event.onSourceClick) == null ? void 0 : _a2.call(event);
-                  },
-                  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",
-                  children: [
-                    "Open in ",
-                    event.source.label,
-                    /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxs(
-                "a",
-                {
-                  href: event.source.url,
-                  target: "_blank",
-                  rel: "noreferrer noopener",
-                  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",
-                  children: [
-                    "Open in ",
-                    event.source.label,
-                    /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3" })
-                  ]
-                }
-              ) : null,
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setExpanded(false);
-                  },
-                  className: "flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground",
-                  children: [
-                    "Show less ",
-                    /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" })
-                  ]
-                }
-              )
-            ] })
-          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { className: "line-clamp-1 pr-3", children: (_d = event.preview) != null ? _d : event.content }),
-            /* @__PURE__ */ jsxs("button", { className: "flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground", children: [
-              "Expand ",
-              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
-            ] })
-          ] })
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            setExpanded(false);
+          },
+          className: classes.actionLink
         }
-      ) }) : /* @__PURE__ */ jsx("div", { className: "pr-2 text-sm leading-relaxed text-muted-foreground", children: event.content }) })
+      )
     ] })
-  ] });
+  ] }) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(classes.collapsedPreview, "cursor-pointer hover:bg-muted/30 transition-colors"),
+      onClick: () => setExpanded(true),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "line-clamp-1 pr-3", children: (_b = event.preview) != null ? _b : event.content }),
+        /* @__PURE__ */ jsxs("button", { type: "button", className: cn(classes.actionLink, "shrink-0"), children: [
+          "Expand ",
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+        ] })
+      ]
+    }
+  ) });
 }
 export {
   TONE_CLASSES,