@handled-ai/design-system 0.20.12 → 0.20.14

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

@@ -57,14 +57,77 @@ describe("ConversationPanel", () => {
     expect(container.querySelector('[data-slot="conversation-panel"]')).toBeNull();
   });
 
-  it("shows the 'Email response detected' badge when a thread has responded", () => {
-    render(<ConversationPanel threads={[thread()]} me={me} />);
+  it("shows the amber response-detected treatment when a thread has responded", () => {
+    const { container } = render(<ConversationPanel threads={[thread({ paused: { playbook: "Mercury Renewal Save" } })]} me={me} />);
+
+    const panel = container.querySelector('[data-slot="conversation-panel"]')!;
+    const header = container.querySelector('[data-slot="conversation-panel-header"]')!;
+    const row = container.querySelector('[data-slot="conv-thread"]')!;
+
+    expect(panel.getAttribute("data-state")).toBe("responded");
+    expect(panel.className).toContain("border-status-warning-border");
+    expect(header.className).toContain("bg-status-warning-bg");
+    expect(row.getAttribute("data-status")).toBe("responded");
+    expect(row.className).toContain("border-l-status-warning-border");
     expect(screen.getByText("Email response detected")).toBeDefined();
+    expect(screen.getByText("1 reply needs your response")).toBeDefined();
+    expect(screen.getByText("NEW REPLY")).toBeDefined();
+    expect(screen.getAllByText(/Playbook stopped/i).length).toBeGreaterThanOrEqual(1);
   });
 
-  it("shows the 'Awaiting response' badge when nothing has responded", () => {
-    render(<ConversationPanel threads={[thread({ status: "awaiting" })]} me={me} />);
-    expect(screen.getByText("Awaiting response")).toBeDefined();
+  it("shows the blue sent/awaiting treatment, receipt chips, and hub Gmail action", () => {
+    const { container } = render(
+      <ConversationPanel
+        threads={[
+          thread({
+            status: "awaiting",
+            openInGmailUrl: "https://mail.google.com/mail/u/0/#sent/thread-mercury",
+            messages: [
+              {
+                id: "sent-1",
+                direction: "outbound",
+                from: me,
+                to: priya,
+                date: "Jun 8, 2026, 9:12 AM",
+                receipt: { kind: "sent", label: "Sent" },
+                body: "Hi Priya — looping back on the Mercury prior authorization workflow.",
+              },
+              {
+                id: "opened-1",
+                direction: "outbound",
+                from: me,
+                to: priya,
+                date: "Jun 8, 2026, 9:24 AM",
+                receipt: { kind: "opened", label: "Opened" },
+                body: "Sharing the implementation notes again so they stay on this thread.",
+              },
+            ],
+          }),
+        ]}
+        me={me}
+      />,
+    );
+
+    const panel = container.querySelector('[data-slot="conversation-panel"]')!;
+    const header = container.querySelector('[data-slot="conversation-panel-header"]')!;
+    const row = container.querySelector('[data-slot="conv-thread"]')!;
+
+    expect(panel.getAttribute("data-state")).toBe("awaiting");
+    expect(panel.className).toContain("border-status-info-border");
+    expect(header.className).toContain("bg-status-info-bg");
+    expect(row.getAttribute("data-status")).toBe("awaiting");
+    expect(row.className).toContain("border-l-status-info-border");
+    expect(screen.getByText("Email sent · awaiting reply")).toBeDefined();
+    expect(screen.getByText("Awaiting a response from Priya")).toBeDefined();
+    expect(screen.getByText("SENT")).toBeDefined();
+    expect(screen.getByText("Opened")).toBeDefined();
+
+    fireEvent.click(screen.getByText(/Hi Priya — looping back/i));
+    expect(screen.getByText("Sent")).toBeDefined();
+
+    const gmailLinks = screen.getAllByRole("link", { name: /Open in Gmail/ });
+    expect(gmailLinks.length).toBeGreaterThanOrEqual(1);
+    expect(gmailLinks[0].getAttribute("href")).toBe("https://mail.google.com/mail/u/0/#sent/thread-mercury");
   });
 
 
@@ -93,12 +156,130 @@ describe("ConversationPanel", () => {
 
     expect(screen.getByText("Draft ready")).toBeDefined();
     expect(screen.getByText("Draft ready on 1 thread")).toBeDefined();
-    expect(screen.queryByText("Awaiting response")).toBeNull();
+    expect(screen.queryByText("Email sent · awaiting reply")).toBeNull();
     expect(screen.getAllByText("Draft").length).toBeGreaterThan(0);
     expect(screen.getByText("Draft copy")).toBeDefined();
   });
 
 
+
+  it("prioritizes responded threads for the open row and header Gmail action", () => {
+    render(
+      <ConversationPanel
+        threads={[
+          thread({
+            threadId: "awaiting-thread",
+            status: "awaiting",
+            openInGmailUrl: "https://mail.google.com/mail/u/0/#sent/awaiting-thread",
+            messages: [
+              {
+                id: "sent-1",
+                direction: "outbound",
+                from: me,
+                to: priya,
+                date: "Today",
+                receipt: { kind: "sent", label: "Sent" },
+                body: "Awaiting response",
+              },
+            ],
+          }),
+          thread({
+            threadId: "responded-without-gmail-thread",
+            status: "responded",
+            openInGmailUrl: undefined,
+            messages: [
+              {
+                id: "reply-1",
+                direction: "inbound",
+                from: priya,
+                to: me,
+                date: "Today",
+                receipt: { kind: "new", label: "Reply" },
+                body: "Can you send the updated numbers?",
+              },
+            ],
+          }),
+          thread({
+            threadId: "responded-thread",
+            status: "responded",
+            openInGmailUrl: "https://mail.google.com/mail/u/0/#inbox/responded-thread",
+            messages: [
+              {
+                id: "reply-2",
+                direction: "inbound",
+                from: priya,
+                to: me,
+                date: "Today",
+                receipt: { kind: "new", label: "Reply" },
+                body: "Following up with the numbers.",
+              },
+            ],
+          }),
+        ]}
+        me={me}
+      />,
+    );
+
+    expect(screen.getByText("Email response detected")).toBeDefined();
+    expect(screen.getByText("2 replies need your response")).toBeDefined();
+
+    const rows = document.querySelectorAll('[data-slot="conv-thread"]');
+    expect(rows[0].getAttribute("data-open")).toBeNull();
+    expect(rows[1].getAttribute("data-open")).toBe("true");
+    expect(rows[2].getAttribute("data-open")).toBeNull();
+
+    const gmailLinks = screen.getAllByRole("link", { name: /Open in Gmail/ });
+    expect(gmailLinks[0].getAttribute("href")).toBe("https://mail.google.com/mail/u/0/#inbox/responded-thread");
+  });
+
+  it("keeps draft-ready badge styling when draft and awaiting threads are mixed", () => {
+    const { container } = render(
+      <ConversationPanel
+        threads={[
+          thread({
+            threadId: "awaiting-thread",
+            status: "awaiting",
+            messages: [
+              {
+                id: "sent-1",
+                direction: "outbound",
+                from: me,
+                to: priya,
+                date: "Today",
+                receipt: { kind: "sent", label: "Sent" },
+                body: "Awaiting response",
+              },
+            ],
+          }),
+          thread({
+            threadId: "draft-thread",
+            status: "draft",
+            messages: [
+              {
+                id: "draft-1",
+                direction: "outbound",
+                from: me,
+                to: priya,
+                date: "Today",
+                receipt: { kind: "draft", label: "Draft" },
+                body: "Draft copy",
+              },
+            ],
+          }),
+        ]}
+        me={me}
+      />,
+    );
+
+    expect(screen.getByText("Draft ready")).toBeDefined();
+    expect(screen.getByText("Draft ready on 1 thread")).toBeDefined();
+
+    const badge = container.querySelector('[data-slot="conversation-badge"]')!;
+    expect(badge.className).toContain("bg-status-pending-bg");
+    expect(badge.className).toContain("text-status-pending-fg");
+    expect(badge.className).not.toContain("bg-status-info-bg");
+  });
+
   it("uses the custom read-only reason and disables Open in Gmail when access is unavailable", () => {
     const onOpenInGmail = vi.fn();
 
@@ -140,10 +321,11 @@ describe("ConversationPanel", () => {
       />,
     );
 
-    const link = screen.getByRole("link", { name: /Open in Gmail/ });
-    expect(link.getAttribute("href")).toBe("https://mail.google.com/mail/?authuser=dana%40handled.ai#drafts/msg-1");
-    expect(link.getAttribute("target")).toBe("_blank");
-    expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    const links = screen.getAllByRole("link", { name: /Open in Gmail/ });
+    expect(links.length).toBeGreaterThanOrEqual(1);
+    expect(links[0].getAttribute("href")).toBe("https://mail.google.com/mail/?authuser=dana%40handled.ai#drafts/msg-1");
+    expect(links[0].getAttribute("target")).toBe("_blank");
+    expect(links[0].getAttribute("rel")).toBe("noopener noreferrer");
   });
 
   it("auto-opens the first responded thread and renders its newest message as HTML", () => {
@@ -512,7 +694,7 @@ describe("ConversationPanel", () => {
         tenantName="Mercury OS"
       />,
     );
-    expect(screen.getByText(/Follow-up actions stopped/i)).toBeDefined();
+    expect(screen.getAllByText(/Playbook stopped/i).length).toBeGreaterThanOrEqual(1);
   });
 
   it("opens the reply composer when Reply is clicked", () => {

package/src/components/__tests__/email-body.test.tsx

@@ -80,4 +80,36 @@ describe("EmailBody", () => {
     expect(container.textContent).toContain("Line one & two\nLine 'three'")
     expectNoVisibleEscapeArtifacts(container.textContent ?? "")
   })
+
+  it("linkifies URLs and email addresses in plain text bodies after splitting details", () => {
+    const { container } = render(
+      <EmailBody
+        text={[
+          "Hi Dana,",
+          "",
+          "Please review https://example.com/report?case=123, then email ops@example.com.",
+          "",
+          "-- ",
+          "Jane Doe",
+          "https://example.com/signature",
+        ].join("\n")}
+        collapseDetails
+      />,
+    )
+
+    const body = container.querySelector('[data-slot="email-body-content"]')
+    const details = container.querySelector('[data-slot="email-body-details"]')
+
+    expect(body?.textContent).toContain("Please review https://example.com/report?case=123, then email ops@example.com.")
+    expect(body?.querySelector('a[href="https://example.com/report?case=123"]')?.textContent).toBe("https://example.com/report?case=123")
+    expect(body?.querySelector('a[href="mailto:ops@example.com"]')?.textContent).toBe("ops@example.com")
+    expect(body?.textContent).toContain("https://example.com/report?case=123,")
+    expect(details).toBeNull()
+
+    fireEvent.click(screen.getByRole("button", { name: "•••" }))
+
+    const expandedDetails = container.querySelector('[data-slot="email-body-details"]')
+    expect(expandedDetails?.textContent).toContain("Jane Doe")
+    expect(expandedDetails?.querySelector('a[href="https://example.com/signature"]')?.textContent).toBe("https://example.com/signature")
+  })
 })

package/src/components/conversation-panel.tsx

@@ -298,19 +298,34 @@ function PersonAvatar({ person, size = "sm" }: { person: ConvParticipant; size?:
 }
 
 const STATUS_PILL: Record<ConvStatus, { label: string; cls: string }> = {
-  responded: { label: "New reply", cls: "bg-status-active-bg text-status-active-fg border-status-active-border" },
+  responded: { label: "NEW REPLY", cls: "bg-status-warning-bg text-status-warning-fg border-status-warning-border" },
   draft: { label: "Draft", cls: "bg-background text-foreground/80 border-border" },
-  awaiting: { label: "Awaiting", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
+  awaiting: { label: "SENT", cls: "bg-status-info-bg text-status-info-fg border-status-info-border" },
   viewing: { label: "Viewing", cls: "bg-muted text-muted-foreground border-border" },
 }
 
 const STATUS_DOT: Record<ConvStatus, string> = {
-  responded: "bg-status-active-fg",
+  responded: "bg-status-warning-fg",
   draft: "bg-status-pending-fg",
-  awaiting: "bg-status-pending-fg",
+  awaiting: "bg-status-info-fg",
   viewing: "bg-muted-foreground/50",
 }
 
+const THREAD_ROW_ACCENT: Record<ConvStatus, string> = {
+  responded: "border-l-4 border-l-status-warning-border bg-status-warning-bg/25",
+  awaiting: "border-l-4 border-l-status-info-border bg-status-info-bg/25",
+  draft: "border-l-4 border-l-status-pending-border bg-status-pending-bg/20",
+  viewing: "",
+}
+
+const RECEIPT_CHIP: Record<NonNullable<ConvMessage["receipt"]>["kind"], string> = {
+  new: "border-status-warning-border bg-status-warning-bg text-status-warning-fg",
+  read: "border-status-info-border bg-status-info-bg text-status-info-fg",
+  opened: "border-status-info-border bg-status-info-bg text-status-info-fg",
+  sent: "border-status-info-border bg-status-info-bg text-status-info-fg",
+  draft: "border-status-pending-border bg-status-pending-bg text-status-pending-fg",
+}
+
 function effectiveStatus(t: ConversationThread): ConvStatus {
   return t.canReply === false ? "viewing" : t.status
 }
@@ -432,10 +447,10 @@ function MessageView({
         </span>
         <span className="flex shrink-0 items-center gap-2">
           {message.receipt ? (
-            <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
+            <span className={cn("inline-flex items-center gap-1 rounded-md border px-1.5 py-px text-[10px] font-semibold leading-4", RECEIPT_CHIP[message.receipt.kind])}>
               {message.receipt.kind === "new" ? (
                 <CornerUpLeft size={11} />
-              ) : message.receipt.kind === "read" ? (
+              ) : message.receipt.kind === "read" || message.receipt.kind === "sent" ? (
                 <CheckCheck size={11} />
               ) : message.receipt.kind === "draft" ? (
                 <FilePenLine size={11} />
@@ -811,10 +826,10 @@ function ThreadBody({
   return (
     <div data-slot="conv-thread-body" className="space-y-2">
       {canReply && thread.paused ? (
-        <div className="border-status-pending-border bg-status-pending-bg text-status-pending-fg flex items-start gap-2 rounded-md border p-2.5 text-[12px]">
+        <div className="border-status-warning-border bg-status-warning-bg text-status-warning-fg flex items-start gap-2 rounded-md border border-l-4 p-2.5 text-[12px]">
           <Pause size={13} className="mt-0.5 shrink-0" />
           <span>
-            <b>Follow-up actions stopped.</b> Your {thread.paused.playbook} next steps won’t send
+            <b>Playbook stopped.</b> Follow-up actions for {thread.paused.playbook} won’t send
             automatically while this conversation is live. Continue it in {tenantName ?? "the app"} or Gmail.
           </span>
         </div>
@@ -930,7 +945,12 @@ function ThreadRow({
   const pill = STATUS_PILL[status]
 
   return (
-    <div data-slot="conv-thread" data-open={open ? "true" : undefined} className="border-border border-b last:border-b-0">
+    <div
+      data-slot="conv-thread"
+      data-status={status}
+      data-open={open ? "true" : undefined}
+      className={cn("border-border border-b last:border-b-0", THREAD_ROW_ACCENT[status])}
+    >
       <button
         type="button"
         onClick={onToggleOpen}
@@ -991,12 +1011,21 @@ function ConversationPanel({
   const draft = threads.filter((t) => effectiveStatus(t) === "draft").length
   const awaiting = threads.filter((t) => effectiveStatus(t) === "awaiting").length
   const anyPaused = threads.some((t) => t.paused)
+  const prioritizedThread =
+    threads.find((t) => t.status === "responded" && t.canReply !== false) ??
+    threads.find((t) => effectiveStatus(t) === "draft") ??
+    threads.find((t) => effectiveStatus(t) === "awaiting")
+  const hubGmailThread =
+    threads.find((t) => t.status === "responded" && t.canReply !== false && canOpenInGmail(t, onOpenInGmail)) ??
+    threads.find((t) => effectiveStatus(t) === "draft" && canOpenInGmail(t, onOpenInGmail)) ??
+    threads.find((t) => effectiveStatus(t) === "awaiting" && canOpenInGmail(t, onOpenInGmail)) ??
+    threads.find((t) => canOpenInGmail(t, onOpenInGmail))
+  const firstAwaiting = threads.find((t) => effectiveStatus(t) === "awaiting")
 
   const [hubOpen, setHubOpen] = React.useState(true)
   const [openId, setOpenId] = React.useState<string | null>(() => {
     if (defaultOpenThreadId) return defaultOpenThreadId
-    const firstActionable = threads.find((t) => ["responded", "draft"].includes(t.status) && t.canReply !== false)
-    return firstActionable ? firstActionable.threadId : null
+    return prioritizedThread ? prioritizedThread.threadId : null
   })
 
   if (!threads.length) return null
@@ -1004,11 +1033,11 @@ function ConversationPanel({
   // Header badge state: a responded reply leads, then drafts to finish, then sent mail awaiting a reply.
   const badge =
     responded > 0
-      ? { label: "Email response detected", dot: "bg-status-active-fg", ring: "bg-status-active-fg/30" }
+      ? { label: "Email response detected", dot: "bg-status-warning-fg", ring: "bg-status-warning-fg/30" }
       : draft > 0
         ? { label: "Draft ready", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
         : awaiting > 0
-          ? { label: "Awaiting response", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
+          ? { label: "Email sent · awaiting reply", dot: "bg-status-info-fg", ring: "bg-status-info-fg/30" }
           : { label: "Conversations", dot: "bg-muted-foreground/50", ring: "bg-muted-foreground/20" }
 
   const headTitle =
@@ -1017,30 +1046,56 @@ function ConversationPanel({
       : draft > 0
         ? `Draft ready on ${draft} ${draft === 1 ? "thread" : "threads"}`
         : awaiting > 0
-          ? `Awaiting response on ${awaiting} ${awaiting === 1 ? "thread" : "threads"}`
+          ? awaiting === 1 && firstAwaiting
+            ? `Awaiting a response from ${firstName(displayParticipant(firstAwaiting.contact).name)}`
+            : `Awaiting responses on ${awaiting} threads`
           : `${threads.length} email ${threads.length === 1 ? "thread" : "threads"}`
 
+  const panelState = responded > 0 ? "responded" : draft > 0 ? "draft" : awaiting > 0 ? "awaiting" : "viewing"
+
   return (
     <section
       data-slot="conversation-panel"
       data-responded={responded > 0 ? "true" : undefined}
-      className={cn("border-border bg-background overflow-hidden rounded-xl border", className)}
+      data-state={panelState}
+      className={cn(
+        "bg-background overflow-hidden rounded-xl border",
+        panelState === "responded"
+          ? "border-status-warning-border"
+          : panelState === "awaiting"
+            ? "border-status-info-border"
+            : "border-border",
+        className,
+      )}
     >
-      <button
-        type="button"
-        onClick={() => setHubOpen((v) => !v)}
-        aria-expanded={hubOpen}
-        className="flex w-full items-center gap-3 px-3 py-2.5 text-left"
+      <div
+        data-slot="conversation-panel-header"
+        className={cn(
+          "flex w-full items-center gap-2 px-3 py-2.5",
+          panelState === "responded"
+            ? "bg-status-warning-bg/45"
+            : panelState === "awaiting"
+              ? "bg-status-info-bg/55"
+              : "bg-background",
+        )}
       >
+        <button
+          type="button"
+          onClick={() => setHubOpen((v) => !v)}
+          aria-expanded={hubOpen}
+          className="flex min-w-0 flex-1 items-center gap-3 text-left"
+        >
         <span
           data-slot="conversation-badge"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold",
             responded > 0
-              ? "bg-status-active-bg text-status-active-fg"
-              : draft > 0 || awaiting > 0
+              ? "bg-status-warning-bg text-status-warning-fg"
+              : draft > 0
                 ? "bg-status-pending-bg text-status-pending-fg"
-                : "bg-muted text-muted-foreground"
+                : awaiting > 0
+                  ? "bg-status-info-bg text-status-info-fg"
+                  : "bg-muted text-muted-foreground"
           )}
         >
           <span className="relative inline-flex size-2">
@@ -1056,12 +1111,18 @@ function ConversationPanel({
             {anyPaused ? <> · <b>playbook stopped</b></> : null}
           </span>
         </span>
-        {hubOpen ? (
-          <ChevronUp size={16} className="text-muted-foreground shrink-0" />
-        ) : (
-          <ChevronDown size={16} className="text-muted-foreground shrink-0" />
-        )}
-      </button>
+          {hubOpen ? (
+            <ChevronUp size={16} className="text-muted-foreground shrink-0" />
+          ) : (
+            <ChevronDown size={16} className="text-muted-foreground shrink-0" />
+          )}
+        </button>
+        {hubGmailThread ? (
+          <div className="shrink-0" onClick={(event) => event.stopPropagation()}>
+            <OpenInGmailButton thread={hubGmailThread} onOpenInGmail={onOpenInGmail} />
+          </div>
+        ) : null}
+      </div>
 
       {hubOpen ? (
         <div className="border-border border-t">

package/src/components/email-body.tsx

@@ -33,10 +33,55 @@ const PROSE = cn(
   "[&_sup]:align-super [&_sup]:text-[0.75em] [&_sub]:align-sub [&_sub]:text-[0.75em]",
 )
 
+const PLAIN_TEXT_LINK_RE = /https?:\/\/[^\s<>"']+|www\.[^\s<>"']+|[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}/gi
+const TRAILING_LINK_PUNCTUATION_RE = /[),.;:!?]+$/
+
+function plainTextHref(value: string): string | null {
+  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
+    return `mailto:${value}`
+  }
+  const href = value.toLowerCase().startsWith("www.") ? `https://${value}` : value
+  try {
+    const url = new URL(href)
+    return url.protocol === "http:" || url.protocol === "https:" ? href : null
+  } catch {
+    return null
+  }
+}
+
+function linkifyPlainText(text: string): React.ReactNode[] {
+  const nodes: React.ReactNode[] = []
+  let cursor = 0
+
+  for (const match of text.matchAll(PLAIN_TEXT_LINK_RE)) {
+    const value = match[0]
+    const index = match.index ?? 0
+    if (index > cursor) nodes.push(text.slice(cursor, index))
+
+    const trailing = value.match(TRAILING_LINK_PUNCTUATION_RE)?.[0] ?? ""
+    const linkText = trailing ? value.slice(0, -trailing.length) : value
+    const href = plainTextHref(linkText)
+    if (href) {
+      nodes.push(
+        <a key={`${index}-${linkText}`} href={href} target="_blank" rel="noreferrer noopener">
+          {linkText}
+        </a>,
+      )
+    } else {
+      nodes.push(linkText)
+    }
+    if (trailing) nodes.push(trailing)
+    cursor = index + value.length
+  }
+
+  if (cursor < text.length) nodes.push(text.slice(cursor))
+  return nodes
+}
+
 function PlainTextBlock({ text, className, slot }: { text: string; className?: string; slot: string }) {
   return (
     <div data-slot={slot} className={cn(PROSE, "whitespace-pre-line", className)}>
-      {decodeEmailDisplayText(text)}
+      {linkifyPlainText(decodeEmailDisplayText(text))}
     </div>
   )
 }