@handled-ai/design-system 0.20.3 → 0.20.4

package/src/components/conversation-panel.tsx

@@ -113,6 +113,17 @@ export interface ConversationReplyPayload {
   replyAll: boolean
 }
 
+/**
+ * Result of a server-side reply preview. `htmlBody` is the exact HTML the server
+ * prepared for this reply (sanitized by the component before render).
+ * `confirmationToken`, when present, identifies the prepared confirmation so a
+ * consumer can reuse it for the final send instead of re-preparing the message.
+ */
+export interface ConversationReplyPreview {
+  htmlBody: string
+  confirmationToken?: string
+}
+
 export interface ConversationPanelProps {
   threads: ConversationThread[]
   /** Current operator: drives "to me" + the reply avatar. */
@@ -121,6 +132,14 @@ export interface ConversationPanelProps {
   tenantName?: string
   onSendReply?: (payload: ConversationReplyPayload) => void | Promise<void>
   onCreateGmailDraft?: (payload: ConversationReplyPayload) => void | Promise<void>
+  /**
+   * Server-side preview contract. When provided, the reply preview requests the
+   * exact send HTML from the server, the component sanitizes it before render,
+   * and retains any returned `confirmationToken` in preview state so a consumer
+   * can reuse it for the final send. When omitted, the composer falls back to a
+   * clearly labeled local draft preview only.
+   */
+  onPreviewReply?: (payload: ConversationReplyPayload) => Promise<ConversationReplyPreview>
   onOpenInGmail?: (threadId: string) => void
   /** Inline-open this thread initially (defaults to the first responded one). */
   defaultOpenThreadId?: string
@@ -486,7 +505,7 @@ function firstName(name: string): string {
 
 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" },
-  draft: { label: "Draft", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-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" },
   viewing: { label: "Viewing", cls: "bg-muted text-muted-foreground border-border" },
 }
@@ -634,6 +653,19 @@ function MessageView({
 
 /* ── Reply composer ─────────────────────────────────────────────────────── */
 
+type PreviewState = {
+  loading: boolean
+  /** Sanitized HTML ready to render. */
+  html: string | null
+  /** Confirmation token returned by the server preview, retained for reuse on send. */
+  confirmationToken: string | null
+  error: string | null
+  /** True when `html` came from the local fallback rather than the server. */
+  local: boolean
+}
+
+const IDLE_PREVIEW: PreviewState = { loading: false, html: null, confirmationToken: null, error: null, local: false }
+
 function ReplyComposer({
   thread,
   me,
@@ -642,6 +674,7 @@ function ReplyComposer({
   onClose,
   onSend,
   onDraft,
+  onPreviewReply,
 }: {
   thread: ConversationThread
   me?: ConvParticipant
@@ -650,16 +683,49 @@ function ReplyComposer({
   onClose: () => void
   onSend: (body: string, includeSignature: boolean) => void | Promise<void>
   onDraft: (body: string, includeSignature: boolean) => void | Promise<void>
+  onPreviewReply?: (payload: ConversationReplyPayload) => Promise<ConversationReplyPreview>
 }) {
   const [body, setBody] = React.useState(thread.draft ?? "")
   const [sig, setSig] = React.useState(true)
   const [preview, setPreview] = React.useState(false)
+  const [previewState, setPreviewState] = React.useState<PreviewState>(IDLE_PREVIEW)
   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 localPreviewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "")
+
+  const openPreview = async () => {
+    setPreview(true)
+    setSendError(null)
+
+    if (!onPreviewReply) {
+      // No server preview contract: render a sanitized local draft preview only.
+      setPreviewState({ loading: false, html: sanitizeHtml(localPreviewHtml), confirmationToken: null, error: null, local: true })
+      return
+    }
+
+    setPreviewState({ loading: true, html: null, confirmationToken: null, error: null, local: false })
+    try {
+      const result = await onPreviewReply({ threadId: thread.threadId, body, includeSignature: sig, replyAll })
+      setPreviewState({
+        loading: false,
+        html: sanitizeHtml(result.htmlBody ?? ""),
+        confirmationToken: result.confirmationToken ?? null,
+        error: null,
+        local: false,
+      })
+    } catch (error) {
+      setPreviewState({
+        loading: false,
+        html: null,
+        confirmationToken: null,
+        error: error instanceof Error ? error.message : "Could not load the preview. Please try again.",
+        local: false,
+      })
+    }
+  }
 
   const handleSend = async () => {
     setSending(true)
@@ -667,6 +733,7 @@ function ReplyComposer({
     try {
       await onSend(body, sig)
       setPreview(false)
+      setPreviewState(IDLE_PREVIEW)
     } catch (error) {
       setSendError(error instanceof Error ? error.message : "Could not send this reply. Please try again.")
     } finally {
@@ -680,6 +747,7 @@ function ReplyComposer({
     try {
       await onDraft(body, sig)
       setPreview(false)
+      setPreviewState(IDLE_PREVIEW)
     } catch (error) {
       setSendError(error instanceof Error ? error.message : "Could not create the Gmail draft. Please try again.")
     } finally {
@@ -742,7 +810,7 @@ function ReplyComposer({
         onKeyDown={(e) => {
           if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
             e.preventDefault()
-            setPreview(true)
+            void openPreview()
           }
         }}
       />
@@ -760,22 +828,24 @@ function ReplyComposer({
           <Switch checked={sig} onCheckedChange={setSig} aria-label="Toggle signature" />
           Signature
         </label>
-        <Button type="button" variant="outline" size="sm" disabled={sending} onClick={() => setPreview(true)}>
+        <Button type="button" variant="outline" size="sm" disabled={sending} onClick={() => void openPreview()}>
           <Eye size={14} /> Preview
         </Button>
-        <Button type="button" size="sm" disabled={sending} onClick={() => setPreview(true)}>
+        <Button type="button" size="sm" disabled={sending} onClick={() => void openPreview()}>
           <Send size={14} /> Send
         </Button>
       </div>
 
-      <Dialog open={preview} onOpenChange={(open) => { if (!sending) setPreview(open) }}>
+      <Dialog open={preview} onOpenChange={(open) => { if (!sending) { setPreview(open); if (!open) setPreviewState(IDLE_PREVIEW) } }}>
         <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
+              <Eye size={15} /> {previewState.local ? "Local draft preview" : "Reply preview"}
             </DialogTitle>
             <DialogDescription>
-              Stays on the {subject.replace(/^Re:\s*/i, "")} thread. Gmail keeps it threaded.
+              {previewState.local
+                ? "Local draft preview only — the server prepares the exact message on send."
+                : <>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]">
@@ -792,7 +862,23 @@ function ReplyComposer({
               {subject}
             </div>
           </div>
-          <div className={cn(PROSE, "max-h-72 overflow-auto")} dangerouslySetInnerHTML={{ __html: previewHtml }} />
+          {previewState.loading ? (
+            <div data-slot="conv-preview-loading" role="status" className="text-muted-foreground flex items-center gap-2 px-1 py-6 text-[13px]">
+              <span className="border-muted-foreground/40 border-t-foreground size-4 animate-spin rounded-full border-2" aria-hidden />
+              Loading preview…
+            </div>
+          ) : previewState.error ? (
+            <p role="alert" className="text-destructive text-sm">
+              {previewState.error}
+            </p>
+          ) : (
+            <div
+              data-slot="conv-preview-body"
+              data-confirmation-token={previewState.confirmationToken ?? undefined}
+              className={cn(PROSE, "max-h-72 overflow-auto")}
+              dangerouslySetInnerHTML={{ __html: previewState.html ?? "" }}
+            />
+          )}
           {sendError ? (
             <p role="alert" className="text-destructive text-sm">
               {sendError}
@@ -801,20 +887,20 @@ function ReplyComposer({
           <DialogFooter className="sm:justify-between">
             <button
               type="button"
-              disabled={sending}
+              disabled={sending || previewState.loading}
               onClick={handleDraft}
               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)}>
+              <Button type="button" variant="outline" size="sm" disabled={sending} onClick={() => { setPreview(false); setPreviewState(IDLE_PREVIEW) }}>
                 Keep editing
               </Button>
               <Button
                 type="button"
                 size="sm"
-                disabled={sending}
+                disabled={sending || previewState.loading}
                 onClick={handleSend}
               >
                 <Send size={14} /> {sending ? "Sending..." : "Send now"}
@@ -841,6 +927,7 @@ function ThreadBody({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail,
 }: {
   thread: ConversationThread
@@ -848,6 +935,7 @@ function ThreadBody({
   tenantName?: string
   onSendReply?: (p: ConversationReplyPayload) => void | Promise<void>
   onCreateGmailDraft?: (p: ConversationReplyPayload) => void | Promise<void>
+  onPreviewReply?: (p: ConversationReplyPayload) => Promise<ConversationReplyPreview>
   onOpenInGmail?: (threadId: string) => void
 }) {
   const canReply = thread.canReply !== false
@@ -865,7 +953,7 @@ function ThreadBody({
   const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }))
 
   return (
-    <div data-slot="conv-thread-body" className="space-y-1.5">
+    <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" />
@@ -892,7 +980,7 @@ function ThreadBody({
       ) : null}
 
       {canReply && mode === "idle" ? (
-        <div className="flex flex-wrap items-center gap-2">
+        <div data-slot="conv-action-row" className="border-border/70 mt-1 flex flex-wrap items-center gap-x-3 gap-y-2 border-t pt-3">
           <Button type="button" size="sm" onClick={() => { setReplyAll(false); setMode("replying") }}>
             <Reply size={15} /> Reply
           </Button>
@@ -904,8 +992,8 @@ function ThreadBody({
           <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 className="text-muted-foreground/70 ml-auto inline-flex items-center gap-1.5 text-[12px]">
+            <GitMerge size={13} /> Stays on this thread
           </span>
         </div>
       ) : null}
@@ -916,6 +1004,7 @@ function ThreadBody({
           me={me}
           replyAll={replyAll}
           tenantName={tenantName}
+          onPreviewReply={onPreviewReply}
           onClose={() => setMode("idle")}
           onSend={async (body, includeSignature) => {
             await onSendReply?.({ threadId: thread.threadId, body, includeSignature, replyAll })
@@ -969,12 +1058,13 @@ function ThreadRow({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail,
 }: {
   thread: ConversationThread
   open: boolean
   onToggleOpen: () => void
-} & Pick<ConversationPanelProps, "me" | "tenantName" | "onSendReply" | "onCreateGmailDraft" | "onOpenInGmail">) {
+} & Pick<ConversationPanelProps, "me" | "tenantName" | "onSendReply" | "onCreateGmailDraft" | "onPreviewReply" | "onOpenInGmail">) {
   const status = effectiveStatus(thread)
   const last = thread.messages[thread.messages.length - 1]
   const who = last?.direction === "inbound" ? firstName(last.from.name) : "You"
@@ -992,8 +1082,8 @@ function ThreadRow({
         <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)}>
+            <span className="truncate text-sm font-semibold">{thread.subject}</span>
+            <span className={cn("shrink-0 rounded-md border px-1.5 py-px text-[10px] font-medium leading-4", pill.cls)}>
               {pill.label}
             </span>
           </span>
@@ -1017,6 +1107,7 @@ function ThreadRow({
             tenantName={tenantName}
             onSendReply={onSendReply}
             onCreateGmailDraft={onCreateGmailDraft}
+            onPreviewReply={onPreviewReply}
             onOpenInGmail={onOpenInGmail}
           />
         </div>
@@ -1033,6 +1124,7 @@ function ConversationPanel({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail,
   defaultOpenThreadId,
   className,
@@ -1100,8 +1192,8 @@ function ConversationPanel({
           {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">
+          <span className="block truncate text-sm font-semibold leading-tight">{headTitle}</span>
+          <span className="text-muted-foreground mt-0.5 block truncate text-xs">
             {threads.length} {threads.length === 1 ? "thread" : "threads"} on this action
             {anyPaused ? <> · <b>playbook stopped</b></> : null}
           </span>
@@ -1125,6 +1217,7 @@ function ConversationPanel({
               tenantName={tenantName}
               onSendReply={onSendReply}
               onCreateGmailDraft={onCreateGmailDraft}
+              onPreviewReply={onPreviewReply}
               onOpenInGmail={onOpenInGmail}
             />
           ))}

package/src/components/owner-chips.tsx

@@ -58,7 +58,7 @@ export interface OwnerPerson {
 
 /* ── shared bits ─────────────────────────────────────────────────────────── */
 
-function SalesforceMark({ size = 14 }: { size?: number }) {
+function SalesforceMark({ size = 13 }: { size?: number }) {
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
@@ -82,8 +82,10 @@ function OwnerAvatar({ person, size = "sm" }: { person: OwnerPerson; size?: "sm"
   )
 }
 
+// Component-owned compact sizing. Set directly here (not via consumer
+// className) because cn()/tailwind-merge can strip conflicting overrides.
 const chipBase =
-  "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] " +
+  "inline-flex h-7 items-center gap-1 rounded-md border border-border bg-background px-2 text-[12px] " +
   "shadow-[0_1px_1px_rgba(0,0,0,0.03)]"
 
 /* ── Signal owner (Handled assignment, editable) ─────────────────────────── */
@@ -115,14 +117,14 @@ function SignalOwnerChip({
       {owner ? (
         <OwnerAvatar person={owner} />
       ) : (
-        <span className="text-muted-foreground inline-flex size-[18px] items-center justify-center">
-          <UserPlus size={13} />
+        <span className="text-muted-foreground inline-flex size-4 items-center justify-center">
+          <UserPlus size={12} />
         </span>
       )}
-      <span className="text-muted-foreground text-[11px] font-medium tracking-wide uppercase">
+      <span className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">
         Signal owner
       </span>
-      <span className="bg-border/70 mx-0.5 h-3.5 w-px" aria-hidden />
+      <span className="bg-border/70 mx-0.5 h-3 w-px" aria-hidden />
       <span className={cn("font-medium", owner ? "text-foreground" : "text-muted-foreground")}>
         {owner ? owner.name : "Unassigned"}
       </span>
@@ -155,7 +157,7 @@ function SignalOwnerChip({
         >
           {value}
           <span className="text-muted-foreground ml-0.5">
-            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
           </span>
         </button>
       </DropdownMenuTrigger>
@@ -289,7 +291,7 @@ function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
             <OwnerAvatar person={only} />
             <span className="text-foreground font-medium">{only.name}</span>
             <span className="text-muted-foreground ml-0.5">
-              {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+              {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
             </span>
           </button>
         </DropdownMenuTrigger>
@@ -327,11 +329,11 @@ function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
             ))}
           </span>
           <span className="text-foreground font-medium">Account owners</span>
-          <span className="bg-muted text-muted-foreground rounded px-1 text-[11px] font-semibold tabular-nums">
+          <span className="bg-muted text-muted-foreground rounded px-1 text-[10px] font-semibold tabular-nums">
             ×{owners.length}
           </span>
           <span className="text-muted-foreground ml-0.5">
-            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
           </span>
         </button>
       </DropdownMenuTrigger>

package/src/components/timeline-activity.tsx

@@ -163,21 +163,21 @@ const TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantC
   },
   "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",
+    connector: "absolute left-[11px] top-6 bottom-[-2px] w-px bg-border/50",
+    dotWrapperSize: "relative z-10 mt-0.5 flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-background",
+    dot: "flex h-[22px] w-[22px] items-center justify-center rounded-full border ring-4 ring-background [&>svg]:h-3 [&>svg]:w-3",
+    contentPadding: "flex-1 min-w-0 pb-5 pt-px",
+    titleRowSpacing: "flex min-w-0 items-start justify-between gap-3",
+    title: "min-w-0 pr-1 text-[13.5px] font-medium leading-tight text-foreground",
+    time: "shrink-0 whitespace-nowrap pt-px text-[11px] leading-tight text-muted-foreground/60",
+    cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card",
+    cardHeader: "flex items-center justify-between border-b border-border/60 bg-muted/30 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70",
+    cardBody: "px-3 py-2.5 text-[13px] leading-relaxed",
+    cardFooter: "border-t border-border/60 bg-muted/10 px-3 py-1.5",
+    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-[13px] 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",
+    actionLink: "inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground",
+    nonInteractiveContent: "pr-2 text-[13px] leading-relaxed text-muted-foreground",
   },
 }