@handled-ai/design-system 0.18.58 → 0.19.0-rc.1

package/src/components/conversation-panel.tsx

@@ -0,0 +1,790 @@
+"use client"
+
+/**
+ * conversation-panel.tsx — in-case email-thread reader + reply, for the case
+ * panel ("Email response detected" hub).
+ *
+ * v1 scope (WIT-853 / WIT-802): INLINE thread reading + reply only.
+ *  - A collapsible hub header with a pulse badge whose color reflects state:
+ *    responded (a reply needs you) / awaiting (sent, waiting) / viewing (read-only).
+ *  - A list of thread rows; clicking one opens a Gmail-style reader inline,
+ *    right under the row, with collapsible messages + quoted-history toggle.
+ *  - Reply / Reply-all composer with a signature toggle and two send paths:
+ *    Preview→Send (in-app) and "Open draft in Gmail" (deep link).
+ *  - A "playbook stopped" banner when the customer's reply halted the sequence,
+ *    and a read-only notice when the operator is not a thread participant.
+ *
+ * The bottom-right floating dock / side-by-side compare is intentionally OUT of
+ * scope here and tracked separately (WIT-855).
+ *
+ * Presentational: all data + side effects come from the consumer. Email bodies
+ * (`bodyHtml`, `quoted.html`) are sanitized before rendering.
+ */
+
+import * as React from "react"
+import {
+  ChevronDown,
+  ChevronUp,
+  CornerUpLeft,
+  CheckCheck,
+  MailOpen,
+  Reply,
+  ReplyAll,
+  Eye,
+  Send,
+  Lock,
+  Pause,
+  GitMerge,
+  Check,
+  X,
+} from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { getInitials } from "../lib/user-display"
+import { BRAND_ICONS } from "../lib/icons"
+import { htmlToTextSnippet, sanitizeHtml } from "../internal/safe-html"
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import { Button } from "./button"
+import { Switch } from "./switch"
+import { Textarea } from "./textarea"
+import { RichTextToolbar } from "./rich-text-toolbar"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "./dialog"
+
+/* ── Types ───────────────────────────────────────────────────────────────── */
+
+export interface ConvParticipant {
+  name: string
+  email: string
+  avatarUrl?: string | null
+  role?: string
+}
+
+export interface ConvMessage {
+  id: string
+  direction: "inbound" | "outbound"
+  from: ConvParticipant
+  to: ConvParticipant
+  /** Absolute timestamp label, e.g. "Jun 1, 2026, 9:12 AM". */
+  date: string
+  /** Relative label, e.g. "2 days ago". */
+  ago?: string
+  receipt?: { kind: "new" | "read" | "opened" | "sent"; label: string }
+  /** HTML body (preferred). Sanitized by the component before rendering. */
+  bodyHtml?: string
+  /** Plain-text fallback when `bodyHtml` is absent. */
+  body?: string
+  /** Quoted prior message, collapsed behind a toggle. Sanitized before rendering. */
+  quoted?: { attr: string; html: string }
+}
+
+export type ConvStatus = "responded" | "awaiting" | "viewing"
+
+export interface ConversationThread {
+  threadId: string
+  subject: string
+  status: ConvStatus
+  /** Relative label for the most recent activity. */
+  lastWhen?: string
+  contact: ConvParticipant
+  cc?: ConvParticipant[]
+  /** Set when this thread's reply halted a playbook (terminal). */
+  paused?: { playbook: string } | null
+  /** false => operator is not a participant; reply disabled (read-only). */
+  canReply?: boolean
+  messages: ConvMessage[]
+  /** Prefilled reply draft body. */
+  draft?: string
+  /** Signature text appended to replies (plain text). */
+  signature?: string
+}
+
+export interface ConversationReplyPayload {
+  threadId: string
+  body: string
+  includeSignature: boolean
+  replyAll: boolean
+}
+
+export interface ConversationPanelProps {
+  threads: ConversationThread[]
+  /** Current operator: drives "to me" + the reply avatar. */
+  me?: ConvParticipant
+  /** Deployment brand, used in the paused-playbook copy. */
+  tenantName?: string
+  onSendReply?: (payload: ConversationReplyPayload) => void | Promise<void>
+  onCreateGmailDraft?: (payload: ConversationReplyPayload) => void
+  onOpenInGmail?: (threadId: string) => void
+  /** Inline-open this thread initially (defaults to the first responded one). */
+  defaultOpenThreadId?: string
+  className?: string
+}
+
+/* ── Shared helpers ──────────────────────────────────────────────────────── */
+
+/** Gmail-like reading-pane typography (mirrors timeline-activity's email mode). */
+const PROSE = cn(
+  "text-sm leading-[1.62] text-foreground/90 break-words",
+  "[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
+  "[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline",
+  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
+  "[&_img]:max-w-full [&_img]:h-auto"
+)
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+}
+
+/** Plain-text -> simple paragraph HTML for the Preview / sent-message body. */
+function textToHtml(text: string): string {
+  return text
+    .split(/\n{2,}/)
+    .map((p) => p.trim())
+    .filter(Boolean)
+    .map((p) => `<p>${escapeHtml(p).replace(/\n/g, "<br>")}</p>`)
+    .join("")
+}
+
+function GmailMark({ size = 14 }: { size?: number }) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={BRAND_ICONS.gmail.icon}
+      alt="Gmail"
+      width={size}
+      height={size}
+      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
+    />
+  )
+}
+
+function PersonAvatar({ person, size = "sm" }: { person: ConvParticipant; size?: "sm" | "default" }) {
+  return (
+    <Avatar size={size}>
+      {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={person.name} /> : null}
+      <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
+        {getInitials({ name: person.name, email: person.email })}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
+
+function firstName(name: string): string {
+  return name.split(" ")[0] || name
+}
+
+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" },
+  awaiting: { label: "Awaiting", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
+  viewing: { label: "Viewing", cls: "bg-muted text-muted-foreground border-border" },
+}
+
+const STATUS_DOT: Record<ConvStatus, string> = {
+  responded: "bg-status-active-fg",
+  awaiting: "bg-status-pending-fg",
+  viewing: "bg-muted-foreground/50",
+}
+
+function effectiveStatus(t: ConversationThread): ConvStatus {
+  return t.canReply === false ? "viewing" : t.status
+}
+
+/* ── One message (collapsible) ──────────────────────────────────────────── */
+
+function MessageView({
+  message,
+  expanded,
+  onToggle,
+  me,
+}: {
+  message: ConvMessage
+  expanded: boolean
+  onToggle: () => void
+  me?: ConvParticipant
+}) {
+  const [quoteOpen, setQuoteOpen] = React.useState(false)
+  const snippet =
+    message.body?.split("\n").find(Boolean) ??
+    (message.bodyHtml ? htmlToTextSnippet(message.bodyHtml, 140) : "")
+
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        data-slot="conv-message-collapsed"
+        onClick={onToggle}
+        className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-muted/40"
+      >
+        <PersonAvatar person={message.from} />
+        <span className="text-muted-foreground min-w-0 flex-1 truncate text-[13px]">
+          <b className="text-foreground">{firstName(message.from.name)}</b> · {snippet}
+        </span>
+        <span className="text-muted-foreground/60 shrink-0 text-xs">{message.ago ?? message.date}</span>
+        <ChevronDown size={13} className="text-muted-foreground shrink-0" />
+      </button>
+    )
+  }
+
+  const toLabel = me && message.to.email === me.email ? "me" : firstName(message.to.name)
+
+  return (
+    <div data-slot="conv-message" className="rounded-md border border-border bg-background">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-start gap-2 px-3 py-2 text-left"
+      >
+        <PersonAvatar person={message.from} size="default" />
+        <span className="min-w-0 flex-1">
+          <span className="flex flex-wrap items-baseline gap-x-1.5">
+            <span className="text-[13px] font-semibold">{message.from.name}</span>
+            <span className="text-muted-foreground/60 truncate text-xs">&lt;{message.from.email}&gt;</span>
+          </span>
+          <span className="text-muted-foreground block text-xs">
+            to <b>{toLabel}</b>
+          </span>
+        </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]">
+              {message.receipt.kind === "new" ? (
+                <CornerUpLeft size={11} />
+              ) : message.receipt.kind === "read" ? (
+                <CheckCheck size={11} />
+              ) : (
+                <MailOpen size={11} />
+              )}
+              {message.receipt.label}
+            </span>
+          ) : null}
+          <span className="text-muted-foreground/60 text-xs">{message.date}</span>
+          <ChevronUp size={13} className="text-muted-foreground" />
+        </span>
+      </button>
+
+      <div className="px-3 pb-3">
+        {message.bodyHtml ? (
+          <div className={PROSE} dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.bodyHtml) }} />
+        ) : (
+          <div className={cn(PROSE, "whitespace-pre-line")}>{message.body}</div>
+        )}
+
+        {message.quoted ? (
+          <div className="mt-2">
+            <button
+              type="button"
+              onClick={() => setQuoteOpen((v) => !v)}
+              className="text-muted-foreground hover:bg-muted rounded px-1.5 text-xs leading-5"
+              title={quoteOpen ? "Hide quoted text" : "Show quoted text"}
+            >
+              •••
+            </button>
+            {quoteOpen ? (
+              <div className="border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]">
+                <p className="mb-1" dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.quoted.attr) }} />
+                <div className={PROSE} dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.quoted.html) }} />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/* ── Reply composer ─────────────────────────────────────────────────────── */
+
+function ReplyComposer({
+  thread,
+  me,
+  replyAll,
+  tenantName,
+  onClose,
+  onSend,
+  onDraft,
+}: {
+  thread: ConversationThread
+  me?: ConvParticipant
+  replyAll: boolean
+  tenantName?: string
+  onClose: () => void
+  onSend: (body: string, includeSignature: boolean) => void | Promise<void>
+  onDraft: (body: string, includeSignature: boolean) => void
+}) {
+  const [body, setBody] = React.useState(thread.draft ?? "")
+  const [sig, setSig] = React.useState(true)
+  const [preview, setPreview] = React.useState(false)
+  const [sending, setSending] = React.useState(false)
+  const [sendError, setSendError] = React.useState<string | null>(null)
+  const ccList = replyAll ? thread.cc ?? [] : []
+  const subject = /^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`
+
+  const previewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "")
+
+  const handleSend = async () => {
+    setSending(true)
+    setSendError(null)
+    try {
+      await onSend(body, sig)
+      setPreview(false)
+    } catch (error) {
+      setSendError(error instanceof Error ? error.message : "Could not send this reply. Please try again.")
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <div data-slot="conv-reply" className="border-border bg-muted/20 rounded-md border p-3">
+      <div className="mb-2 flex items-center gap-2">
+        {me ? <PersonAvatar person={me} /> : null}
+        <span className="flex-1 text-[13px] font-medium">
+          {replyAll ? (
+            <>
+              Reply all{" "}
+              <span className="text-muted-foreground font-normal">· {1 + ccList.length} recipients</span>
+            </>
+          ) : (
+            <>
+              Reply to <b>{firstName(thread.contact.name)}</b>
+            </>
+          )}
+        </span>
+        <span className="text-muted-foreground inline-flex items-center gap-1 text-[11px]">
+          <GitMerge size={11} /> Same thread
+        </span>
+        <button type="button" onClick={onClose} title="Discard reply" className="text-muted-foreground hover:text-foreground">
+          <X size={15} />
+        </button>
+      </div>
+
+      <div className="border-border mb-2 space-y-1 border-b pb-2 text-[13px]">
+        <div className="flex items-center gap-1.5">
+          <span className="text-muted-foreground w-12 shrink-0 text-[11px] font-medium">To</span>
+          <span className="font-medium">{thread.contact.name}</span>
+          <span className="text-muted-foreground/60 truncate text-xs">{thread.contact.email}</span>
+        </div>
+        {replyAll && ccList.length ? (
+          <div className="flex items-start gap-1.5">
+            <span className="text-muted-foreground w-12 shrink-0 text-[11px] font-medium">Cc</span>
+            <span className="text-muted-foreground text-xs">
+              {ccList.map((c) => c.name).join(", ")}
+            </span>
+          </div>
+        ) : null}
+        <div className="flex items-center gap-1.5">
+          <span className="text-muted-foreground w-12 shrink-0 text-[11px] font-medium">Subject</span>
+          <span className="truncate">{subject}</span>
+          <span className="text-muted-foreground/60 ml-auto inline-flex items-center gap-1 text-[11px]">
+            <Lock size={10} /> on thread
+          </span>
+        </div>
+      </div>
+
+      <Textarea
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        placeholder="Write your reply…"
+        className="min-h-28 resize-y text-sm"
+        onKeyDown={(e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault()
+            setPreview(true)
+          }
+        }}
+      />
+
+      {sig && thread.signature ? (
+        <div className="text-muted-foreground mt-2 whitespace-pre-line border-l-2 border-border pl-3 text-[13px]">
+          <span className="text-muted-foreground/60 mr-1">--</span>
+          {thread.signature}
+        </div>
+      ) : null}
+
+      <div className="mt-2 flex flex-wrap items-center gap-2">
+        <RichTextToolbar />
+        <label className="text-muted-foreground ml-auto inline-flex cursor-pointer items-center gap-1.5 text-[12px]">
+          <Switch checked={sig} onCheckedChange={setSig} aria-label="Toggle signature" />
+          Signature
+        </label>
+        <Button type="button" variant="outline" size="sm" disabled={sending} onClick={() => setPreview(true)}>
+          <Eye size={14} /> Preview
+        </Button>
+        <Button type="button" size="sm" disabled={sending} onClick={() => setPreview(true)}>
+          <Send size={14} /> Send
+        </Button>
+      </div>
+
+      <Dialog open={preview} onOpenChange={(open) => { if (!sending) setPreview(open) }}>
+        <DialogContent className="max-w-xl">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-1.5 text-[15px]">
+              <Eye size={15} /> Preview: this is exactly what sends
+            </DialogTitle>
+            <DialogDescription>
+              Stays on the {subject.replace(/^Re:\s*/i, "")} thread. Gmail keeps it threaded.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="border-border space-y-1 rounded-md border p-3 text-[13px]">
+            <div>
+              <span className="text-muted-foreground">To </span>
+              <b>{thread.contact.name}</b>{" "}
+              <span className="text-muted-foreground/60">&lt;{thread.contact.email}&gt;</span>
+            </div>
+            {replyAll && ccList.length ? (
+              <div className="text-muted-foreground">Cc {ccList.map((c) => c.name).join(", ")}</div>
+            ) : null}
+            <div>
+              <span className="text-muted-foreground">Subject </span>
+              {subject}
+            </div>
+          </div>
+          <div className={cn(PROSE, "max-h-72 overflow-auto")} dangerouslySetInnerHTML={{ __html: previewHtml }} />
+          {sendError ? (
+            <p role="alert" className="text-destructive text-sm">
+              {sendError}
+            </p>
+          ) : null}
+          <DialogFooter className="sm:justify-between">
+            <button
+              type="button"
+              disabled={sending}
+              onClick={() => {
+                setPreview(false)
+                onDraft(body, sig)
+              }}
+              className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-[13px] disabled:pointer-events-none disabled:opacity-50"
+            >
+              <GmailMark size={14} /> Open draft in Gmail
+            </button>
+            <span className="flex items-center gap-2">
+              <Button type="button" variant="outline" size="sm" disabled={sending} onClick={() => setPreview(false)}>
+                Keep editing
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                disabled={sending}
+                onClick={handleSend}
+              >
+                <Send size={14} /> {sending ? "Sending..." : "Send now"}
+              </Button>
+            </span>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {tenantName ? (
+        <p className="text-muted-foreground/70 mt-2 text-[11px]">Sends via Gmail · playbooks stay stopped.</p>
+      ) : null}
+    </div>
+  )
+}
+
+/* ── Thread body (messages + footer/composer/done states) ───────────────── */
+
+type ThreadMode = "idle" | "replying" | "sent" | "draft"
+
+function ThreadBody({
+  thread,
+  me,
+  tenantName,
+  onSendReply,
+  onCreateGmailDraft,
+  onOpenInGmail,
+}: {
+  thread: ConversationThread
+  me?: ConvParticipant
+  tenantName?: string
+  onSendReply?: (p: ConversationReplyPayload) => void | Promise<void>
+  onCreateGmailDraft?: (p: ConversationReplyPayload) => void
+  onOpenInGmail?: (threadId: string) => void
+}) {
+  const canReply = thread.canReply !== false
+  const hasCc = !!(thread.cc && thread.cc.length)
+  const [mode, setMode] = React.useState<ThreadMode>("idle")
+  const [replyAll, setReplyAll] = React.useState(false)
+  const [expanded, setExpanded] = React.useState<Record<string, boolean>>(() => {
+    const o: Record<string, boolean> = {}
+    thread.messages.forEach((m, i) => {
+      o[m.id] = i === thread.messages.length - 1
+    })
+    return o
+  })
+
+  const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }))
+
+  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]">
+          <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
+            automatically while this conversation is live. Continue it in {tenantName ?? "the app"} or Gmail.
+          </span>
+        </div>
+      ) : null}
+
+      <div className="space-y-1.5">
+        {thread.messages.map((m) => (
+          <MessageView key={m.id} message={m} expanded={!!expanded[m.id]} onToggle={() => toggle(m.id)} me={me} />
+        ))}
+      </div>
+
+      {!canReply ? (
+        <div className="border-border bg-muted/30 text-muted-foreground flex items-start gap-2 rounded-md border p-2.5 text-[12px]">
+          <Eye size={14} className="mt-0.5 shrink-0" />
+          <span>
+            <b>Viewing only.</b> You’re not a participant on this thread, so replying is disabled here.
+          </span>
+        </div>
+      ) : null}
+
+      {canReply && mode === "idle" ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <Button type="button" size="sm" onClick={() => { setReplyAll(false); setMode("replying") }}>
+            <Reply size={15} /> Reply
+          </Button>
+          {hasCc ? (
+            <Button type="button" variant="outline" size="sm" onClick={() => { setReplyAll(true); setMode("replying") }}>
+              <ReplyAll size={14} /> Reply all
+            </Button>
+          ) : null}
+          <Button type="button" variant="ghost" size="sm" onClick={() => onOpenInGmail?.(thread.threadId)}>
+            <GmailMark size={14} /> Open in Gmail
+          </Button>
+          <span className="text-muted-foreground/70 ml-auto inline-flex items-center gap-1 text-[11px]">
+            <GitMerge size={12} /> Stays on this thread
+          </span>
+        </div>
+      ) : null}
+
+      {canReply && mode === "replying" ? (
+        <ReplyComposer
+          thread={thread}
+          me={me}
+          replyAll={replyAll}
+          tenantName={tenantName}
+          onClose={() => setMode("idle")}
+          onSend={async (body, includeSignature) => {
+            await onSendReply?.({ threadId: thread.threadId, body, includeSignature, replyAll })
+            setMode("sent")
+          }}
+          onDraft={(body, includeSignature) => {
+            onCreateGmailDraft?.({ threadId: thread.threadId, body, includeSignature, replyAll })
+            setMode("draft")
+          }}
+        />
+      ) : null}
+
+      {canReply && mode === "sent" ? (
+        <div className="border-status-active-border bg-status-active-bg flex items-center gap-2 rounded-md border p-3 text-[13px]">
+          <Check size={16} className="text-status-active-fg shrink-0" />
+          <span className="flex-1">
+            <b>{replyAll ? "Reply all sent" : "Reply sent"}</b> · added to the thread. Delivered to{" "}
+            <b>{thread.contact.name}</b>. This action stays <b>Pending</b>; playbooks remain stopped.
+          </span>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setMode("idle")}>
+            Done
+          </Button>
+        </div>
+      ) : null}
+
+      {canReply && mode === "draft" ? (
+        <div className="border-border bg-muted/30 flex items-center gap-2 rounded-md border p-3 text-[13px]">
+          <GmailMark size={16} />
+          <span className="flex-1">
+            <b>Draft saved to Gmail.</b> Waiting on the <b>Re: {thread.subject}</b> thread; open it there to finish. Nothing was sent.
+          </span>
+          <Button type="button" variant="ghost" size="sm" onClick={() => onOpenInGmail?.(thread.threadId)}>
+            <GmailMark size={14} /> Open in Gmail
+          </Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setMode("idle")}>
+            Done
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+/* ── A thread row + its inline reader ───────────────────────────────────── */
+
+function ThreadRow({
+  thread,
+  open,
+  onToggleOpen,
+  me,
+  tenantName,
+  onSendReply,
+  onCreateGmailDraft,
+  onOpenInGmail,
+}: {
+  thread: ConversationThread
+  open: boolean
+  onToggleOpen: () => void
+} & Pick<ConversationPanelProps, "me" | "tenantName" | "onSendReply" | "onCreateGmailDraft" | "onOpenInGmail">) {
+  const status = effectiveStatus(thread)
+  const last = thread.messages[thread.messages.length - 1]
+  const who = last?.direction === "inbound" ? firstName(last.from.name) : "You"
+  const lastSnippet =
+    last?.body?.split("\n").find(Boolean) ??
+    (last?.bodyHtml ? htmlToTextSnippet(last.bodyHtml, 120) : "")
+  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">
+      <button
+        type="button"
+        onClick={onToggleOpen}
+        aria-expanded={open}
+        className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left hover:bg-muted/30"
+      >
+        <span className={cn("size-2 shrink-0 rounded-full", STATUS_DOT[status])} aria-hidden />
+        <span className="min-w-0 flex-1">
+          <span className="flex items-center gap-2">
+            <span className="truncate text-[13px] font-semibold">{thread.subject}</span>
+            <span className={cn("shrink-0 rounded border px-1.5 text-[10px] font-medium leading-4", pill.cls)}>
+              {pill.label}
+            </span>
+          </span>
+          <span className="text-muted-foreground block truncate text-xs">
+            <b className="text-foreground/80">{thread.contact.name}</b> · {who}: {lastSnippet}
+          </span>
+        </span>
+        <span className="text-muted-foreground/60 shrink-0 text-xs">{thread.lastWhen}</span>
+        {open ? (
+          <ChevronUp size={15} className="text-muted-foreground shrink-0" />
+        ) : (
+          <ChevronDown size={15} className="text-muted-foreground shrink-0" />
+        )}
+      </button>
+
+      {open ? (
+        <div className="px-3 pb-3">
+          <ThreadBody
+            thread={thread}
+            me={me}
+            tenantName={tenantName}
+            onSendReply={onSendReply}
+            onCreateGmailDraft={onCreateGmailDraft}
+            onOpenInGmail={onOpenInGmail}
+          />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+/* ── The hub ─────────────────────────────────────────────────────────────── */
+
+function ConversationPanel({
+  threads,
+  me,
+  tenantName,
+  onSendReply,
+  onCreateGmailDraft,
+  onOpenInGmail,
+  defaultOpenThreadId,
+  className,
+}: ConversationPanelProps) {
+  const responded = threads.filter((t) => t.status === "responded" && t.canReply !== false).length
+  const awaiting = threads.filter((t) => effectiveStatus(t) === "awaiting").length
+  const anyPaused = threads.some((t) => t.paused)
+
+  const [hubOpen, setHubOpen] = React.useState(true)
+  const [openId, setOpenId] = React.useState<string | null>(() => {
+    if (defaultOpenThreadId) return defaultOpenThreadId
+    const firstResponded = threads.find((t) => t.status === "responded" && t.canReply !== false)
+    return firstResponded ? firstResponded.threadId : null
+  })
+
+  if (!threads.length) return null
+
+  // Header badge state: a responded reply leads; else an awaiting state; else neutral.
+  const badge =
+    responded > 0
+      ? { label: "Email response detected", dot: "bg-status-active-fg", ring: "bg-status-active-fg/30" }
+      : awaiting > 0
+        ? { label: "Awaiting response", dot: "bg-status-pending-fg", ring: "bg-status-pending-fg/30" }
+        : { label: "Conversations", dot: "bg-muted-foreground/50", ring: "bg-muted-foreground/20" }
+
+  const headTitle =
+    responded > 0
+      ? `${responded} ${responded === 1 ? "reply needs" : "replies need"} your response`
+      : awaiting > 0
+        ? `Awaiting response on ${awaiting} ${awaiting === 1 ? "thread" : "threads"}`
+        : `${threads.length} email ${threads.length === 1 ? "thread" : "threads"}`
+
+  return (
+    <section
+      data-slot="conversation-panel"
+      data-responded={responded > 0 ? "true" : undefined}
+      className={cn("border-border bg-background overflow-hidden rounded-xl 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"
+      >
+        <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"
+              : awaiting > 0
+                ? "bg-status-pending-bg text-status-pending-fg"
+                : "bg-muted text-muted-foreground"
+          )}
+        >
+          <span className="relative inline-flex size-2">
+            <span className={cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", badge.ring)} />
+            <span className={cn("relative inline-flex size-2 rounded-full", badge.dot)} />
+          </span>
+          {badge.label}
+        </span>
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-[13px] font-semibold">{headTitle}</span>
+          <span className="text-muted-foreground block truncate text-xs">
+            {threads.length} {threads.length === 1 ? "thread" : "threads"} on this action
+            {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 ? (
+        <div className="border-border border-t">
+          {threads.map((t) => (
+            <ThreadRow
+              key={t.threadId}
+              thread={t}
+              open={openId === t.threadId}
+              onToggleOpen={() => setOpenId((cur) => (cur === t.threadId ? null : t.threadId))}
+              me={me}
+              tenantName={tenantName}
+              onSendReply={onSendReply}
+              onCreateGmailDraft={onCreateGmailDraft}
+              onOpenInGmail={onOpenInGmail}
+            />
+          ))}
+        </div>
+      ) : null}
+    </section>
+  )
+}
+
+export { ConversationPanel }