@handled-ai/design-system 0.20.0 → 0.20.2

package/src/components/__tests__/conversation-panel.test.tsx

@@ -128,6 +128,258 @@ describe("ConversationPanel", () => {
     expect(quoted.outerHTML).not.toContain("data:text/html");
   });
 
+
+  it("collapses trailing HTML signature and disclaimer behind a details toggle", () => {
+    const htmlThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          bodyHtml:
+            "<p>Hi Dana,</p><p>The updated invoice is attached.</p><p>Thanks,</p><p>Priya Raman</p><p>VP Sales, Northwind</p><p>Confidentiality Notice: this message is private.</p>",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[htmlThread]} me={me} />);
+
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("The updated invoice is attached.");
+    expect(message.querySelector('[data-slot="conv-message-details"]')).toBeNull();
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).not.toContain("Confidentiality Notice");
+
+    fireEvent.click(screen.getByText("Show signature/details"));
+
+    expect(screen.getByText("Hide signature/details")).toBeDefined();
+    expect(message.querySelector('[data-slot="conv-message-details"]')?.textContent).toContain("Priya Raman");
+    expect(message.querySelector('[data-slot="conv-message-details"]')?.textContent).toContain("Confidentiality Notice");
+  });
+
+  it("collapses trailing plain-text signatures while preserving line boundaries", () => {
+    const textThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          body: "Hi Dana,\n\nI can meet tomorrow at 2pm.\n\nBest,\nPriya Raman\nVP Sales, Northwind\npriya@northwind.io",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[textThread]} me={me} />);
+
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("I can meet tomorrow at 2pm.");
+    expect(message.querySelector('[data-slot="conv-message-details"]')).toBeNull();
+
+    fireEvent.click(screen.getByText("Show signature/details"));
+
+    const details = message.querySelector('[data-slot="conv-message-details"]')!;
+    expect(details.textContent).toContain("Best,");
+    expect(details.textContent).toContain("VP Sales, Northwind");
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent?.endsWith("2pm.\n\n")).toBe(true);
+    expect(details.textContent?.startsWith("Best,")).toBe(true);
+  });
+
+  it("keeps body copy that starts with thanks visible when it is not a footer boundary", () => {
+    const thanksThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          body: "Thanks for sending this over. I reviewed the doc and the numbers look right.",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[thanksThread]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("Thanks for sending this over");
+    expect(screen.queryByText("Show signature/details")).toBeNull();
+  });
+
+  it("keeps trailing thanks comma sentence body visible", () => {
+    const thanksCommaThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          body: "I reviewed the options.\n\nThanks, this helps us decide next steps.",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[thanksCommaThread]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("Thanks, this helps us decide next steps.");
+    expect(screen.queryByText("Show signature/details")).toBeNull();
+  });
+
+  it("keeps trailing thank-you comma sentence body visible", () => {
+    const thankYouCommaThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          bodyHtml: "<p>I reviewed the renewal notes.</p><p>Thank you, that clarifies the renewal plan.</p>",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[thankYouCommaThread]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("Thank you, that clarifies the renewal plan.");
+    expect(screen.queryByText("Show signature/details")).toBeNull();
+  });
+
+  it("keeps command-like double-dash plain-text lines visible", () => {
+    const flagsThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          body: "Please use these flags:\n-- retry failed imports\n-- skip archived records",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[flagsThread]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("-- retry failed imports");
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("-- skip archived records");
+    expect(screen.queryByText("Show signature/details")).toBeNull();
+  });
+
+  it("keeps command-like double-dash HTML blocks visible", () => {
+    const htmlFlagsThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          bodyHtml: "<p>Please use these flags:</p><p>-- retry failed imports</p><p>-- skip archived records</p>",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[htmlFlagsThread]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("-- retry failed imports");
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("-- skip archived records");
+    expect(screen.queryByText("Show signature/details")).toBeNull();
+  });
+
+  it("collapses standard double-dash signature separator with sender details", () => {
+    const separatorThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          body: "The import plan looks good.\n\n--\nPriya Raman\nVP Sales, Northwind\npriya@northwind.io",
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[separatorThread]} me={me} />);
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).toContain("The import plan looks good.");
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.textContent).not.toContain("Priya Raman");
+
+    fireEvent.click(screen.getByText("Show signature/details"));
+
+    expect(message.querySelector('[data-slot="conv-message-details"]')?.textContent).toContain("--");
+    expect(message.querySelector('[data-slot="conv-message-details"]')?.textContent).toContain("Priya Raman");
+  });
+
+  it("does not split raw HTML into invalid partial tags when collapsing details", () => {
+    const rawHtmlThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          bodyHtml:
+            '<div><p>Please review <a href="https://example.com/report"><strong>the full report</strong></a> before Friday.</p><p>Regards,</p><p>Priya Raman</p><p>VP Sales, Northwind</p></div>',
+        },
+      ],
+    });
+
+    const { container } = render(<ConversationPanel threads={[rawHtmlThread]} me={me} />);
+
+    const link = container.querySelector('a[href="https://example.com/report"]');
+    expect(link?.textContent).toBe("the full report");
+    expect(container.querySelector('[data-slot="conv-message-details"]')).toBeNull();
+
+    const message = container.querySelector('[data-slot="conv-message"]')!;
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.innerHTML).toContain("<strong>the full report</strong>");
+    expect(message.querySelector('[data-slot="conv-message-body"]')?.innerHTML).not.toContain("</a></strong>");
+
+    fireEvent.click(screen.getByText("Show signature/details"));
+    expect(container.querySelector('[data-slot="conv-message-details"]')?.textContent).toContain("Priya Raman");
+    expect(container.querySelector('[data-slot="conv-message"]')?.querySelectorAll("p").length).toBeGreaterThanOrEqual(4);
+  });
+
+  it("keeps quoted history hidden behind its own toggle when signature details expand", () => {
+    const quotedThread = thread({
+      messages: [
+        {
+          id: "m1",
+          direction: "inbound",
+          from: priya,
+          to: me,
+          date: "Today",
+          bodyHtml:
+            "<p>The revised timeline works for us.</p><p>Thank you,</p><p>Priya Raman</p><p>VP Sales, Northwind</p>",
+          quoted: {
+            attr: "On Monday, Dana wrote:",
+            html: '<blockquote class="gmail_quote"><p>Prior hidden message</p></blockquote>',
+          },
+        },
+      ],
+    });
+
+    render(<ConversationPanel threads={[quotedThread]} me={me} />);
+
+    fireEvent.click(screen.getByText("Show signature/details"));
+
+    expect(document.querySelector('[data-slot="conv-message-details"]')?.textContent).toContain("Priya Raman");
+    expect(screen.queryByText("Prior hidden message")).toBeNull();
+
+    fireEvent.click(screen.getByTitle("Show quoted text"));
+    expect(screen.getByText("Prior hidden message")).toBeDefined();
+  });
+
   it("keeps the reply composer open and shows an error when async send fails", async () => {
     const onSendReply = vi.fn().mockRejectedValue(new Error("Gmail send failed"));
     render(<ConversationPanel threads={[thread({ draft: "Sounds good" })]} me={me} onSendReply={onSendReply} />);
@@ -152,6 +404,30 @@ describe("ConversationPanel", () => {
     await waitFor(() => expect(screen.getByText(/Reply sent/i)).toBeDefined());
   });
 
+  it("keeps the reply composer open and avoids draft-saved state when async draft creation fails", async () => {
+    const onCreateGmailDraft = vi.fn().mockRejectedValue(new Error("Gmail draft failed"));
+    render(<ConversationPanel threads={[thread({ draft: "Sounds good" })]} me={me} onCreateGmailDraft={onCreateGmailDraft} />);
+
+    fireEvent.click(screen.getByText("Reply"));
+    fireEvent.click(screen.getByText("Send"));
+    fireEvent.click(screen.getByText("Open draft in Gmail"));
+
+    await waitFor(() => expect(screen.getByRole("alert").textContent).toContain("Gmail draft failed"));
+    expect(screen.getByPlaceholderText("Write your reply…")).toBeDefined();
+    expect(screen.queryByText(/Draft saved to Gmail/i)).toBeNull();
+  });
+
+  it("shows draft-saved state only after async draft creation succeeds", async () => {
+    const onCreateGmailDraft = vi.fn().mockResolvedValue(undefined);
+    render(<ConversationPanel threads={[thread({ draft: "Sounds good" })]} me={me} onCreateGmailDraft={onCreateGmailDraft} />);
+
+    fireEvent.click(screen.getByText("Reply"));
+    fireEvent.click(screen.getByText("Send"));
+    fireEvent.click(screen.getByText("Open draft in Gmail"));
+
+    await waitFor(() => expect(screen.getByText(/Draft saved to Gmail/i)).toBeDefined());
+  });
+
   it("offers a Reply affordance for participant threads", () => {
     render(<ConversationPanel threads={[thread()]} me={me} />);
     expect(screen.getByText("Reply")).toBeDefined();

package/src/components/__tests__/owner-chips.test.tsx

@@ -1,6 +1,58 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { cleanup, render, screen, within } from "@testing-library/react";
+/**
+ * Radix DropdownMenu content is portalled and unreliable to open with clicks in
+ * happy-dom. Mock the local dropdown wrappers in this file so account-owner
+ * tests can assert the read-only menu rows without adding test-only public API
+ * to the published component props.
+ */
+vi.mock("../dropdown-menu", async () => {
+  const ReactMod = await import("react");
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const DropdownMenu = ({ children }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu" }, children);
+  const DropdownMenuTrigger = ({ children, asChild, ...props }: any) => {
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, props as any);
+    }
+    return ReactMod.createElement("button", { "data-slot": "dropdown-menu-trigger", ...props }, children);
+  };
+  const DropdownMenuContent = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-content", ...props }, children);
+  const DropdownMenuItem = ({ children, onSelect, asChild, disabled, ...props }: any) => {
+    const itemProps = {
+      "data-slot": "dropdown-menu-item",
+      "aria-disabled": disabled ? "true" : undefined,
+      "data-disabled": disabled ? "" : undefined,
+      role: "menuitem",
+      onClick: onSelect,
+      ...props,
+    };
+
+    if (asChild && ReactMod.isValidElement(children)) {
+      return ReactMod.cloneElement(children, { ...itemProps, "data-as-child": "true" } as any);
+    }
+
+    return ReactMod.createElement("div", itemProps, children);
+  };
+  const DropdownMenuLabel = ({ children, ...props }: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-label", ...props }, children);
+  const DropdownMenuSeparator = (props: any) =>
+    ReactMod.createElement("div", { "data-slot": "dropdown-menu-separator", ...props });
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+
+  return {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+  };
+});
+
 import {
   SignalOwnerChip,
   AccountOwnerChip,
@@ -8,8 +60,20 @@ import {
   type OwnerPerson,
 } from "../owner-chips";
 
-const dana: OwnerPerson = { id: "u1", name: "Dana Okafor", role: "Senior RM" };
-const marcus: OwnerPerson = { id: "u2", name: "Marcus Lee", role: "Treasury" };
+const dana: OwnerPerson = {
+  id: "u1",
+  name: "Dana Okafor",
+  role: "Senior RM",
+  email: "dana.okafor@example.com",
+};
+const marcus: OwnerPerson = {
+  id: "u2",
+  name: "Marcus Lee",
+  role: "Treasury",
+  email: "marcus.lee@example.com",
+};
+
+afterEach(() => cleanup());
 
 describe("SignalOwnerChip", () => {
   it("renders data-slot and the 'Signal owner' label", () => {
@@ -25,9 +89,9 @@ describe("SignalOwnerChip", () => {
     expect(screen.getByText("Unassigned")).toBeDefined();
   });
 
-  it("shows the owner's first name when assigned", () => {
+  it("shows the owner's full name when assigned", () => {
     render(<SignalOwnerChip owner={dana} />);
-    expect(screen.getByText("Dana")).toBeDefined();
+    expect(screen.getByText("Dana Okafor")).toBeDefined();
   });
 
   it("renders a static span (no button) when read-only / no handlers", () => {
@@ -54,32 +118,86 @@ describe("AccountOwnerChip", () => {
     expect(container.querySelector('[data-slot="account-owner-chip"]')).toBeNull();
   });
 
-  it("single owner -> static chip, no dropdown (no data-multi)", () => {
+  it("single owner -> button dropdown trigger, no direct anchor and no data-multi", () => {
     const { container } = render(<AccountOwnerChip owners={[dana]} />);
     const el = container.querySelector('[data-slot="account-owner-chip"]');
     expect(el).not.toBeNull();
     expect(el?.getAttribute("data-multi")).toBeNull();
-    expect(el?.tagName.toLowerCase()).toBe("span");
-    expect(screen.getByText("Dana")).toBeDefined();
+    expect(el?.tagName.toLowerCase()).toBe("button");
+    expect(el?.closest("a")).toBeNull();
+    expect(within(el as HTMLElement).getByText("Dana Okafor")).toBeDefined();
   });
 
-  it("single owner with href -> renders an external link", () => {
+  it("single owner menu shows role, email, helper text, and Salesforce link only with href", () => {
     const { container } = render(
       <AccountOwnerChip owners={[{ ...dana, href: "https://sf.example/u1" }]} />,
     );
-    const el = container.querySelector('[data-slot="account-owner-chip"]') as HTMLAnchorElement;
-    expect(el.tagName.toLowerCase()).toBe("a");
-    expect(el.getAttribute("href")).toBe("https://sf.example/u1");
-    expect(el.getAttribute("rel")).toContain("noopener");
+
+    const trigger = container.querySelector('[data-slot="account-owner-chip"]');
+    expect(trigger?.tagName.toLowerCase()).toBe("button");
+    expect(trigger?.closest("a")).toBeNull();
+
+    const row = document.querySelector('[data-owner-row="true"]');
+    expect(row).not.toBeNull();
+    expect(row?.getAttribute("data-slot")).toBe("dropdown-menu-item");
+    expect(row?.getAttribute("aria-disabled")).toBe("true");
+    expect(within(row as HTMLElement).getByText("Dana Okafor")).toBeDefined();
+    expect(within(row as HTMLElement).getByText("Senior RM")).toBeDefined();
+    expect(within(row as HTMLElement).getByText("dana.okafor@example.com")).toBeDefined();
+    expect(screen.getByText("Read-only from Salesforce. Manage owners in Salesforce.")).toBeDefined();
+
+    const links = document.querySelectorAll('[data-account-owner-salesforce-link="true"]');
+    expect(links).toHaveLength(1);
+    expect(links[0].getAttribute("data-slot")).toBe("dropdown-menu-item");
+    expect(links[0].getAttribute("data-as-child")).toBe("true");
+    expect(links[0].textContent).toContain("Open in Salesforce");
+    expect(links[0].getAttribute("href")).toBe("https://sf.example/u1");
   });
 
-  it("multiple owners -> a button with a ×N badge and data-multi", () => {
+  it("single owner menu omits the Salesforce link when href is missing", () => {
+    render(<AccountOwnerChip owners={[dana]} />);
+    expect(document.querySelector('[data-account-owner-salesforce-link="true"]')).toBeNull();
+    expect(screen.queryByText("Open in Salesforce")).toBeNull();
+  });
+
+  it("multiple owners -> one-row button trigger with a ×N badge and data-multi", () => {
     const { container } = render(<AccountOwnerChip owners={[dana, marcus]} />);
     const el = container.querySelector('[data-slot="account-owner-chip"]');
     expect(el?.getAttribute("data-multi")).toBe("true");
     expect(el?.tagName.toLowerCase()).toBe("button");
+    expect(screen.getByText("Account owners")).toBeDefined();
     expect(screen.getByText("×2")).toBeDefined();
   });
+
+  it("multi-owner menu rows show role/email and Salesforce links only for owners with href", () => {
+    render(
+      <AccountOwnerChip
+        owners={[
+          { ...dana, href: "https://sf.example/u1" },
+          marcus,
+        ]}
+      />,
+    );
+
+    const rows = document.querySelectorAll('[data-owner-row="true"]');
+    expect(rows).toHaveLength(2);
+    expect(rows[0].getAttribute("data-slot")).toBe("dropdown-menu-item");
+    expect(rows[0].getAttribute("aria-disabled")).toBe("true");
+    expect(rows[1].getAttribute("data-slot")).toBe("dropdown-menu-item");
+    expect(rows[1].getAttribute("aria-disabled")).toBe("true");
+    expect(within(rows[0] as HTMLElement).getByText("Dana Okafor")).toBeDefined();
+    expect(within(rows[0] as HTMLElement).getByText("Senior RM")).toBeDefined();
+    expect(within(rows[0] as HTMLElement).getByText("dana.okafor@example.com")).toBeDefined();
+    expect(within(rows[1] as HTMLElement).getByText("Marcus Lee")).toBeDefined();
+    expect(within(rows[1] as HTMLElement).getByText("Treasury")).toBeDefined();
+    expect(within(rows[1] as HTMLElement).getByText("marcus.lee@example.com")).toBeDefined();
+
+    const links = document.querySelectorAll('[data-account-owner-salesforce-link="true"]');
+    expect(links).toHaveLength(1);
+    expect(links[0].getAttribute("data-slot")).toBe("dropdown-menu-item");
+    expect(links[0].getAttribute("data-as-child")).toBe("true");
+    expect(links[0].getAttribute("href")).toBe("https://sf.example/u1");
+  });
 });
 
 
@@ -88,8 +206,10 @@ describe("OwnerChips", () => {
     const { container } = render(<OwnerChips owner={dana} accountOwners={[marcus]} />);
     expect(container.querySelector('[data-slot="signal-owner-chip"]')).not.toBeNull();
     expect(container.querySelector('[data-slot="account-owner-chip"]')).not.toBeNull();
-    expect(screen.getByText("Dana")).toBeDefined();
-    expect(screen.getByText("Marcus")).toBeDefined();
+    const signalChip = container.querySelector('[data-slot="signal-owner-chip"]');
+    const accountChip = container.querySelector('[data-slot="account-owner-chip"]');
+    expect(within(signalChip as HTMLElement).getByText("Dana Okafor")).toBeDefined();
+    expect(within(accountChip as HTMLElement).getByText("Marcus Lee")).toBeDefined();
   });
 
   it("allows accountOwners to be omitted", () => {

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

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom/vitest"
 import { describe, it, expect } from "vitest"
 import React from "react"
 import { render, screen } from "@testing-library/react"
@@ -26,6 +27,80 @@ function minimal(overrides: Partial<TimelineEvent> = {}): TimelineEvent {
 // ---------------------------------------------------------------------------
 
 describe("TimelineActivity", () => {
+  it("marks the root with the default variant by default", () => {
+    const { container } = render(<TimelineActivity events={[minimal()]} />)
+
+    expect(container.firstElementChild).toHaveAttribute("data-variant", "default")
+  })
+
+  it("marks the root and interactive cards with the case-panel variant", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "plain fallback",
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} variant="case-panel" />)
+    const root = container.firstElementChild
+    const card = root?.querySelector('[data-variant="case-panel"]')
+
+    expect(root).toHaveAttribute("data-variant", "case-panel")
+    expect(card).not.toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-header"]')).not.toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-body"]')).not.toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-footer"]')).not.toBeNull()
+  })
+
+  it("preserves the default expanded email card single-container layout", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      email: {
+        from: "Priya Raman",
+        to: "Dana Okafor",
+        subject: "Re: hi",
+        body: "plain fallback",
+        bodyHtml: '<p>Hello <a href="https://example.com">link</a></p>',
+      },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const root = container.firstElementChild
+    const card = root?.querySelector('[data-variant="default"]')
+
+    expect(root).toHaveAttribute("data-variant", "default")
+    expect(card).not.toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-header"]')).toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-body"]')).toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-footer"]')).toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-email-html"]')).not.toBeNull()
+  })
+
+  it("preserves the default expanded content card single-container layout", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      content: "Salesforce case details",
+      source: { label: "Salesforce", url: "https://salesforce.example/case/1" },
+    })
+
+    const { container } = render(<TimelineActivity events={[event]} />)
+    const card = container.firstElementChild?.querySelector('[data-variant="default"]')
+
+    expect(card).not.toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-body"]')).toBeNull()
+    expect(card?.querySelector('[data-slot="timeline-card-footer"]')).toBeNull()
+    expect(screen.getByRole("link", { name: /Open in Salesforce/i })).toHaveAttribute(
+      "href",
+      "https://salesforce.example/case/1",
+    )
+  })
+
   // --- Tone rendering ---
 
   it("renders red dot classes when tone is 'red'", () => {
@@ -165,7 +240,7 @@ describe("TimelineActivity", () => {
           '<p onclick="alert(1)">Hello <a href="javascript:alert(1)">bad</a><script>alert(1)</script><img src="https://example.com/pixel.png" onerror="alert(1)"></p>',
       },
     })
-    const { container } = render(<TimelineActivity events={[event]} />)
+    const { container } = render(<TimelineActivity events={[event]} variant="case-panel" />)
     const html = container.querySelector('[data-slot="timeline-email-html"]')!
     expect(html.innerHTML).not.toContain("script")
     expect(html.innerHTML).not.toContain("onclick")
@@ -204,4 +279,20 @@ describe("TimelineActivity", () => {
     expect(container.querySelector('[data-slot="timeline-email-html"]')).toBeNull()
     expect(screen.getByText("just text")).toBeDefined()
   })
+
+  it("formats source labels as Open in Salesforce", () => {
+    const event = minimal({
+      isInteractive: true,
+      defaultExpanded: true,
+      content: "Salesforce case details",
+      source: { label: "Salesforce", url: "https://salesforce.example/case/1" },
+    })
+
+    render(<TimelineActivity events={[event]} variant="case-panel" />)
+
+    expect(screen.getByRole("link", { name: /Open in Salesforce/i })).toHaveAttribute(
+      "href",
+      "https://salesforce.example/case/1",
+    )
+  })
 })