@handled-ai/design-system 0.20.3 → 0.20.5

package/src/components/conversation-panel.tsx

@@ -97,8 +97,16 @@ export interface ConversationThread {
   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). */
+  /** false => operator cannot reply or create drafts from this thread. */
   canReply?: boolean
+  /** Explains why reply and draft creation are disabled. */
+  replyDisabledReason?: string
+  /** Existing Gmail draft or thread URL. Rendered as a new-tab link when present. */
+  openInGmailUrl?: string | null
+  /** Forces the Open in Gmail action into a disabled state. */
+  openInGmailDisabled?: boolean
+  /** Tooltip/read-only copy for a disabled Open in Gmail action. */
+  openInGmailDisabledReason?: string | null
   messages: ConvMessage[]
   /** Prefilled reply draft body. */
   draft?: string
@@ -113,6 +121,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 +140,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 +513,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" },
 }
@@ -502,6 +529,62 @@ function effectiveStatus(t: ConversationThread): ConvStatus {
   return t.canReply === false ? "viewing" : t.status
 }
 
+function disabledOpenInGmailReason(thread: ConversationThread): string {
+  return (
+    thread.openInGmailDisabledReason?.trim() ||
+    thread.replyDisabledReason?.trim() ||
+    "Gmail access is not available for this thread."
+  )
+}
+
+function canOpenInGmail(thread: ConversationThread, onOpenInGmail?: (threadId: string) => void): boolean {
+  return thread.openInGmailDisabled !== true && Boolean(thread.openInGmailUrl || onOpenInGmail)
+}
+
+function OpenInGmailButton({
+  thread,
+  onOpenInGmail,
+  label = "Open in Gmail",
+}: {
+  thread: ConversationThread
+  onOpenInGmail?: (threadId: string) => void
+  label?: string
+}) {
+  const hasConfiguredAction = Boolean(thread.openInGmailUrl || onOpenInGmail || thread.openInGmailDisabled || thread.openInGmailDisabledReason)
+  if (!hasConfiguredAction) return null
+
+  const disabled = !canOpenInGmail(thread, onOpenInGmail)
+  const disabledReason = disabled
+    ? disabledOpenInGmailReason(thread)
+    : undefined
+
+  if (!disabled && thread.openInGmailUrl) {
+    return (
+      <Button type="button" variant="ghost" size="sm" asChild>
+        <a href={thread.openInGmailUrl} target="_blank" rel="noopener noreferrer">
+          <GmailMark size={14} /> {label}
+        </a>
+      </Button>
+    )
+  }
+
+  return (
+    <span className="inline-flex" title={disabledReason}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        disabled={disabled}
+        aria-disabled={disabled || undefined}
+        aria-label={disabledReason ? `${label}: ${disabledReason}` : label}
+        onClick={disabled ? undefined : () => onOpenInGmail?.(thread.threadId)}
+      >
+        <GmailMark size={14} /> {label}
+      </Button>
+    </span>
+  )
+}
+
 /* ── One message (collapsible) ──────────────────────────────────────────── */
 
 function MessageView({
@@ -634,6 +717,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 +738,8 @@ function ReplyComposer({
   onClose,
   onSend,
   onDraft,
+  onPreviewReply,
+  draftDisabledReason,
 }: {
   thread: ConversationThread
   me?: ConvParticipant
@@ -650,16 +748,51 @@ 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>
+  draftDisabledReason?: string | null
 }) {
   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 draftDisabled = Boolean(draftDisabledReason)
+
+  const localPreviewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "")
+
+  const openPreview = async () => {
+    setPreview(true)
+    setSendError(null)
 
-  const previewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "")
+    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 +800,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 {
@@ -675,11 +809,13 @@ function ReplyComposer({
   }
 
   const handleDraft = async () => {
+    if (draftDisabled) return
     setSending(true)
     setSendError(null)
     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 +878,7 @@ function ReplyComposer({
         onKeyDown={(e) => {
           if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
             e.preventDefault()
-            setPreview(true)
+            void openPreview()
           }
         }}
       />
@@ -760,22 +896,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,29 +930,48 @@ 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}
             </p>
           ) : null}
           <DialogFooter className="sm:justify-between">
-            <button
-              type="button"
-              disabled={sending}
-              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="inline-flex" title={draftDisabledReason ?? undefined}>
+              <button
+                type="button"
+                disabled={sending || previewState.loading || draftDisabled}
+                onClick={handleDraft}
+                aria-label={draftDisabledReason ? `Open draft in Gmail: ${draftDisabledReason}` : "Open draft in Gmail"}
+                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>
             <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 +998,7 @@ function ThreadBody({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail,
 }: {
   thread: ConversationThread
@@ -848,9 +1006,12 @@ 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
+  const replyDisabledReason = thread.replyDisabledReason?.trim() || "You are not a participant on this thread, so replying is disabled here."
+  const draftDisabledReason = onCreateGmailDraft ? null : "Gmail draft creation is not available for this thread."
   const hasCc = !!(thread.cc && thread.cc.length)
   const [mode, setMode] = React.useState<ThreadMode>("idle")
   const [replyAll, setReplyAll] = React.useState(false)
@@ -865,7 +1026,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" />
@@ -883,16 +1044,17 @@ function ThreadBody({
       </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]">
+        <div className="border-border bg-muted/30 text-muted-foreground flex flex-wrap 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 className="min-w-0 flex-1">
+            <b>Viewing only.</b> {replyDisabledReason}
           </span>
+          <OpenInGmailButton thread={thread} onOpenInGmail={onOpenInGmail} />
         </div>
       ) : 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>
@@ -901,11 +1063,9 @@ function ThreadBody({
               <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
+          <OpenInGmailButton thread={thread} onOpenInGmail={onOpenInGmail} />
+          <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,15 +1076,18 @@ 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 })
             setMode("sent")
           }}
           onDraft={async (body, includeSignature) => {
-            await onCreateGmailDraft?.({ threadId: thread.threadId, body, includeSignature, replyAll })
+            if (!onCreateGmailDraft) return
+            await onCreateGmailDraft({ threadId: thread.threadId, body, includeSignature, replyAll })
             setMode("draft")
           }}
+          draftDisabledReason={draftDisabledReason}
         />
       ) : null}
 
@@ -947,9 +1110,7 @@ function ThreadBody({
           <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>
+          <OpenInGmailButton thread={thread} onOpenInGmail={onOpenInGmail} />
           <Button type="button" variant="ghost" size="sm" onClick={() => setMode("idle")}>
             Done
           </Button>
@@ -969,12 +1130,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 +1154,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 +1179,7 @@ function ThreadRow({
             tenantName={tenantName}
             onSendReply={onSendReply}
             onCreateGmailDraft={onCreateGmailDraft}
+            onPreviewReply={onPreviewReply}
             onOpenInGmail={onOpenInGmail}
           />
         </div>
@@ -1033,6 +1196,7 @@ function ConversationPanel({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail,
   defaultOpenThreadId,
   className,
@@ -1100,8 +1264,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 +1289,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",
   },
 }