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

package/src/components/detail-view.tsx

@@ -168,7 +168,9 @@ export function DetailViewThread({
           <span className="text-sm text-muted-foreground">{actionCount} actions</span>
         )}
       </div>
-      <div className="rounded-xl border border-border bg-card overflow-hidden shadow-sm">
+      {/* Minimal case-panel shadow (WIT-854): kept subtle but present, ~45%
+          lighter than shadow-sm. */}
+      <div className="rounded-xl border border-border bg-card overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.03)]">
         {children}
       </div>
     </div>

package/src/components/owner-chips.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+/**
+ * owner-chips.tsx — disambiguates the two ownership concepts operators kept
+ * confusing on the case panel:
+ *
+ *  1. SIGNAL OWNER   — Handled's OWN assignment. Who owns working this
+ *     signal/action inside Handled. Editable here (assign / reassign /
+ *     unassign). Replaces the ambiguous bare "Unassigned" chip.
+ *
+ *  2. ACCOUNT OWNER(S) — read-through from Salesforce. An account can carry
+ *     more than one (AE + RM). Informational + links out to Salesforce; never
+ *     assigned from inside Handled. Leads with the Salesforce mark.
+ *
+ * Single account owner -> a static, non-interactive chip (no dropdown).
+ * Multiple account owners -> stacked avatars + a ×N badge and a menu that
+ * lists each owner with a link out. This keeps a single owner cheap and quiet
+ * while still surfacing the full set when there is more than one.
+ *
+ * Presentational only: data + handlers come from the consumer (the app).
+ */
+
+import * as React from "react"
+import {
+  ChevronDown,
+  ChevronUp,
+  Check,
+  UserPlus,
+  UserMinus,
+  Info,
+  ArrowUpRight,
+} from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { getInitials } from "../lib/user-display"
+import { BRAND_ICONS } from "../lib/icons"
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "./dropdown-menu"
+
+export interface OwnerPerson {
+  /** Stable id (profile id for signal owner; SF user id for account owner). */
+  id?: string
+  name: string
+  email?: string
+  /** e.g. "Relationship Manager", "Account Executive". */
+  role?: string
+  /** Avatar image; falls back to initials when absent. */
+  avatarUrl?: string | null
+  /** External link (Salesforce) for an account owner. */
+  href?: string
+}
+
+/* ── shared bits ─────────────────────────────────────────────────────────── */
+
+function SalesforceMark({ size = 14 }: { size?: number }) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={BRAND_ICONS.salesforce}
+      alt="Salesforce"
+      width={size}
+      height={size}
+      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
+    />
+  )
+}
+
+function OwnerAvatar({ person, size = "sm" }: { person: OwnerPerson; size?: "sm" | "default" }) {
+  return (
+    <Avatar size={size} className="ring-background ring-2">
+      {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>
+  )
+}
+
+const chipBase =
+  "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] " +
+  "shadow-[0_1px_1px_rgba(0,0,0,0.03)]"
+
+/* ── Signal owner (Handled assignment, editable) ─────────────────────────── */
+
+export interface SignalOwnerChipProps {
+  /** Current Handled assignee, or null when unassigned. */
+  owner: OwnerPerson | null
+  /** Operators the case can be assigned to (preloaded — no fetch on open). */
+  assignableOwners?: OwnerPerson[]
+  onAssign?: (owner: OwnerPerson) => void
+  onUnassign?: () => void
+  /** Read-only: render a static chip without the assignment menu. */
+  disabled?: boolean
+  className?: string
+}
+
+function SignalOwnerChip({
+  owner,
+  assignableOwners = [],
+  onAssign,
+  onUnassign,
+  disabled,
+  className,
+}: SignalOwnerChipProps) {
+  const [open, setOpen] = React.useState(false)
+
+  const value = (
+    <>
+      {owner ? (
+        <OwnerAvatar person={owner} />
+      ) : (
+        <span className="text-muted-foreground inline-flex size-[18px] items-center justify-center">
+          <UserPlus size={13} />
+        </span>
+      )}
+      <span className="text-muted-foreground text-[11px] 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={cn("font-medium", owner ? "text-foreground" : "text-muted-foreground")}>
+        {owner ? owner.name.split(" ")[0] : "Unassigned"}
+      </span>
+    </>
+  )
+
+  // Read-only or nothing to assign to: static chip.
+  if (disabled || (!onAssign && !onUnassign)) {
+    return (
+      <span
+        data-slot="signal-owner-chip"
+        data-empty={owner ? undefined : "true"}
+        className={cn(chipBase, className)}
+        title="Who owns this signal inside Handled"
+      >
+        {value}
+      </span>
+    )
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          data-slot="signal-owner-chip"
+          data-empty={owner ? undefined : "true"}
+          className={cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className)}
+          title="Who owns this signal inside Handled"
+        >
+          {value}
+          <span className="text-muted-foreground ml-0.5">
+            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64">
+        <DropdownMenuLabel className="flex flex-col gap-0.5">
+          <span className="text-[13px] font-semibold">Assign signal owner</span>
+          <span className="text-muted-foreground text-[11px] font-normal">
+            Who works this inside Handled, separate from the Salesforce account owner.
+          </span>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {assignableOwners.map((o) => {
+          const active = !!owner && (owner.id ? owner.id === o.id : owner.name === o.name)
+          return (
+            <DropdownMenuItem
+              key={o.id ?? o.name}
+              onSelect={() => onAssign?.(o)}
+              className="gap-2"
+            >
+              <OwnerAvatar person={o} size="default" />
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate text-[13px] font-medium">{o.name}</span>
+                {o.role ? (
+                  <span className="text-muted-foreground truncate text-[11px]">{o.role}</span>
+                ) : null}
+              </span>
+              {active ? <Check size={14} className="text-foreground ml-auto" /> : null}
+            </DropdownMenuItem>
+          )
+        })}
+        {owner && onUnassign ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={() => onUnassign()} className="text-muted-foreground gap-2">
+              <UserMinus size={13} /> Unassign
+            </DropdownMenuItem>
+          </>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/* ── Account owner(s) (Salesforce, read-through) ─────────────────────────── */
+
+export interface AccountOwnerChipProps {
+  /** Salesforce account owners (RM, AE, …). Empty -> renders nothing. */
+  owners: OwnerPerson[]
+  className?: string
+}
+
+function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
+  const [open, setOpen] = React.useState(false)
+  if (!owners.length) return null
+  const multi = owners.length > 1
+
+  // Single owner: a quiet, static chip — no dropdown (per product intent).
+  if (!multi) {
+    const only = owners[0]
+    const body = (
+      <>
+        <span className="inline-flex shrink-0 items-center">
+          <SalesforceMark />
+        </span>
+        <OwnerAvatar person={only} />
+        <span className="text-foreground font-medium">{only.name.split(" ")[0]}</span>
+      </>
+    )
+    return only.href ? (
+      <a
+        href={only.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        data-slot="account-owner-chip"
+        className={cn(chipBase, "hover:bg-muted transition-colors", className)}
+        title={`Account owner in Salesforce — ${only.name}`}
+      >
+        {body}
+        <ArrowUpRight size={12} className="text-muted-foreground ml-0.5" />
+      </a>
+    ) : (
+      <span
+        data-slot="account-owner-chip"
+        className={cn(chipBase, className)}
+        title={`Account owner in Salesforce — ${only.name}`}
+      >
+        {body}
+      </span>
+    )
+  }
+
+  // Multiple owners: stacked avatars + ×N + a menu listing each.
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          data-slot="account-owner-chip"
+          data-multi="true"
+          className={cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className)}
+          title="Account owners in Salesforce"
+        >
+          <span className="inline-flex shrink-0 items-center">
+            <SalesforceMark />
+          </span>
+          <span className="flex -space-x-2">
+            {owners.map((o) => (
+              <OwnerAvatar key={o.id ?? o.name} person={o} />
+            ))}
+          </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">
+            ×{owners.length}
+          </span>
+          <span className="text-muted-foreground ml-0.5">
+            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+          </span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-72">
+        <DropdownMenuLabel className="flex items-center gap-1.5 text-[13px]">
+          <SalesforceMark />
+          {owners.length} account owners
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {owners.map((o) => {
+          const row = (
+            <>
+              <OwnerAvatar person={o} size="default" />
+              <span className="flex min-w-0 flex-col">
+                <span className="truncate text-[13px] font-medium">{o.name}</span>
+                {o.role ? (
+                  <span className="text-muted-foreground truncate text-[11px]">{o.role}</span>
+                ) : null}
+              </span>
+              {o.href ? <ArrowUpRight size={13} className="text-muted-foreground ml-auto" /> : null}
+            </>
+          )
+          return (
+            <DropdownMenuItem key={o.id ?? o.name} asChild={!!o.href} className="gap-2">
+              {o.href ? (
+                <a href={o.href} target="_blank" rel="noopener noreferrer" title={`Open ${o.name} in Salesforce`}>
+                  {row}
+                </a>
+              ) : (
+                <span>{row}</span>
+              )}
+            </DropdownMenuItem>
+          )
+        })}
+        <DropdownMenuSeparator />
+        <div className="text-muted-foreground flex items-center gap-1.5 px-2 py-1.5 text-[11px]">
+          <Info size={12} /> Synced from Salesforce. Manage owners there.
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/* ── Convenience composite ──────────────────────────────────────────────── */
+
+export interface OwnerChipsProps extends SignalOwnerChipProps {
+  /** Salesforce account owners (read-through). */
+  accountOwners?: OwnerPerson[]
+}
+
+function OwnerChips({ accountOwners = [], className, ...signal }: OwnerChipsProps) {
+  return (
+    <>
+      <SignalOwnerChip {...signal} className={className} />
+      <AccountOwnerChip owners={accountOwners} className={className} />
+    </>
+  )
+}
+
+export { SignalOwnerChip, AccountOwnerChip, OwnerChips }

package/src/components/signal-priority-popover.tsx

@@ -50,8 +50,14 @@ export interface PriorityFactor {
   rationale: string
 }
 
+export type SignalPriorityScoreDisplay = "label" | "number"
+
 export interface SignalPriorityPopoverProps {
   score: number
+  /** Controls whether the overall score number is shown in the popover header. @default "number" */
+  scoreDisplay?: SignalPriorityScoreDisplay
+  /** Short formula/context label shown beside the contributing factors heading. @default "Priority factors" */
+  formulaLabel?: string
   urgencyLabel?: SignalScoreUrgencyLabel
   /** Synthesis sentence displayed in the popover head. */
   urgencyExplanation?: string
@@ -282,6 +288,8 @@ export function SignalPriorityPopover({
   initialFactorFeedback,
   onFactorFeedback,
   initialPriorityFeedback,
+  scoreDisplay = "number",
+  formulaLabel = "Priority factors",
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
   const scoreRange = getUrgencyRange(urgencyLabel)
@@ -330,15 +338,20 @@ export function SignalPriorityPopover({
           data-testid="priority-popover-content"
         >
           {/* Head section */}
-          <div className="p-4 pb-3">
+          <div className="p-4 pb-3" data-testid="priority-popover-header">
             <div className="flex items-start justify-between gap-3">
               <p className="text-sm font-semibold text-foreground">
                 Why this is {urgencyLabel.toLowerCase()} priority
               </p>
-              <span className="text-2xl font-bold tabular-nums text-foreground">
-                {score}
-                <span className="text-sm font-normal text-muted-foreground">/100</span>
-              </span>
+              {scoreDisplay === "number" && (
+                <span
+                  className="text-2xl font-bold tabular-nums text-foreground"
+                  data-testid="priority-overall-score"
+                >
+                  {score}
+                  <span className="text-sm font-normal text-muted-foreground">/100</span>
+                </span>
+              )}
             </div>
 
             {/* Band indicator */}
@@ -369,7 +382,7 @@ export function SignalPriorityPopover({
                 </span>
                 <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
                   <Info className="h-3 w-3" />
-                  Score = weighted sum
+                  {formulaLabel}
                 </span>
               </div>
 

package/src/components/timeline-activity.tsx

@@ -2,8 +2,25 @@
 
 import * as React from "react"
 import { cn } from "../lib/utils"
+import { sanitizeHtml } from "../internal/safe-html"
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
 
+/**
+ * Gmail-like reading-pane typography for rendered, sanitized email HTML.
+ * Self-contained Tailwind child-variant utilities — no global CSS. Links use
+ * Gmail blue; quoted history (`blockquote.gmail_quote`) is de-emphasized with a
+ * left rule and muted, slightly smaller text.
+ */
+const EMAIL_HTML_CLASS = 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",
+  "[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_blockquote]:text-[13px]",
+  "[&_.gmail_quote]:border-l-2 [&_.gmail_quote]:border-border [&_.gmail_quote]:pl-3 [&_.gmail_quote]:text-muted-foreground [&_.gmail_quote]:text-[13px]"
+)
+
 export type TimelineEventTone =
   | "red"
   | "amber"
@@ -37,6 +54,13 @@ export interface TimelineEvent {
     date?: string
     subject?: string
     body: React.ReactNode
+    /**
+     * HTML body. When provided, the card renders formatted, Gmail-like HTML
+     * instead of the plain-text `body`. The component sanitizes it before
+     * rendering. Opt-in: when absent, the plain-text `body` path is used and
+     * existing consumers are unaffected.
+     */
+    bodyHtml?: string
   }
   content?: React.ReactNode
   source?: {
@@ -242,9 +266,19 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
                           </div>
                         </div>
 
-                        <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
-                          {event.email.body}
-                        </div>
+                        {event.email.bodyHtml ? (
+                          // Gmail reading-pane typography; quoted history
+                          // (blockquote.gmail_quote) is de-emphasized with a left rule.
+                          <div
+                            data-slot="timeline-email-html"
+                            className={EMAIL_HTML_CLASS}
+                            dangerouslySetInnerHTML={{ __html: sanitizeHtml(event.email.bodyHtml) }}
+                          />
+                        ) : (
+                          <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+                            {event.email.body}
+                          </div>
+                        )}
 
                         <button
                           onClick={(e) => {

package/src/components/virtualized-data-table.tsx

@@ -375,10 +375,10 @@ export function VirtualizedDataTable<TData>({
                         onMouseDown={header.getResizeHandler()}
                         onTouchStart={header.getResizeHandler()}
                         className={cn(
-                          "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
-                          "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
-                          "after:bg-transparent hover:after:bg-primary/30",
-                          header.column.getIsResizing() && "after:bg-primary/50",
+                          "absolute right-0 top-0 z-20 h-full w-4 -mr-2 cursor-col-resize select-none touch-none",
+                          "after:absolute after:right-2 after:top-1 after:h-[calc(100%-0.5rem)] after:w-px after:rounded-full",
+                          "after:bg-border/70 after:transition-colors hover:after:bg-primary/60",
+                          header.column.getIsResizing() && "after:bg-primary/70",
                         )}
                         role="separator"
                         aria-orientation="vertical"

package/src/index.ts

@@ -29,10 +29,12 @@ export * from "./components/case-panel-activity-timeline"
 export * from "./components/case-panel-detail"
 export * from "./components/case-panel-why"
 export { CollapsibleSection, type CollapsibleSectionProps } from "./components/collapsible-section"
+export * from "./components/comment-composer"
 export * from "./components/compliance-badge"
 export * from "./components/contact-chip"
 export * from "./components/contact-list"
 export * from "./components/contextual-quick-action-launcher"
+export * from "./components/conversation-panel"
 export * from "./components/dashboard-cards"
 export * from "./components/data-table"
 export * from "./components/data-table-condition-filter"
@@ -50,7 +52,7 @@ export * from "./components/related-record-action-card"
 export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
 export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"
-export type { SignalPriorityPopoverProps, PriorityFactor } from "./components/signal-priority-popover"
+export type { SignalPriorityPopoverProps, SignalPriorityScoreDisplay, PriorityFactor } from "./components/signal-priority-popover"
 export * from "./components/filter-chip"
 export * from "./components/inbox-row"
 export * from "./components/inbox-toolbar"
@@ -67,6 +69,7 @@ export * from "./components/kbd-hint"
 export * from "./components/label"
 export * from "./components/message"
 export * from "./components/metric-card"
+export * from "./components/owner-chips"
 export * from "./components/performance-metrics-table"
 export * from "./components/pill"
 export * from "./components/preview-list"

package/src/internal/__tests__/safe-html.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest"
+import { htmlToTextSnippet, sanitizeHtml } from "../safe-html"
+
+describe("sanitizeHtml", () => {
+  it("removes executable tags, event handlers, styles, and unsafe urls", () => {
+    const html = sanitizeHtml(
+      '<p style="color:red" onclick="alert(1)">Hi<script>alert(1)</script><iframe src="https://evil.test"></iframe><a href="java&#x3a;script:alert(1)">bad</a><img src="data:text/html,boom" onerror="alert(1)"></p>',
+    )
+
+    expect(html).toBe('<p>Hi<a>bad</a><img></p>')
+  })
+
+  it("rejects entity-obfuscated unsafe protocols", () => {
+    const html = sanitizeHtml('<a href="jav&#x61;script&colon;alert(1)">bad</a><a href="java&amp;#x73;cript:alert(1)">also bad</a>')
+
+    expect(html).toBe('<a>bad</a><a>also bad</a>')
+  })
+
+  it("drops url attributes with out-of-range numeric entities without throwing", () => {
+    expect(() => sanitizeHtml('<a href="&#x110000;">link</a><img src="&#999999999999999999999;">')).not.toThrow()
+    expect(sanitizeHtml('<a href="&#x110000;">link</a><img src="&#999999999999999999999;">')).toBe('<a>link</a><img>')
+  })
+
+  it("drops protocol-relative urls instead of treating them as local paths", () => {
+    const html = sanitizeHtml('<a href="//evil.example/path">link</a><img src="//evil.example/pixel.png">')
+
+    expect(html).toBe('<a>link</a><img>')
+  })
+
+  it("handles less-than characters inside quoted attributes without preserving unsafe attributes", () => {
+    const html = sanitizeHtml('<img src=x onerror="alert(1)" alt="<"><p title="<" onclick="alert(1)">click me</p>')
+
+    expect(html).toBe('<img src="x" alt="&lt;"><p title="&lt;">click me</p>')
+  })
+
+  it("keeps common email formatting, safe links, and gmail_quote classes", () => {
+    const html = sanitizeHtml(
+      '<blockquote class="gmail_quote weird$class" style="color:red"><a href="https://example.com" target="_self">Quoted</a><br><ul><li>One</li></ul></blockquote>',
+    )
+
+    expect(html).toContain('class="gmail_quote"')
+    expect(html).toContain('href="https://example.com"')
+    expect(html).toContain('rel="noopener noreferrer"')
+    expect(html).toContain("<ul><li>One</li></ul>")
+    expect(html).not.toContain("style=")
+  })
+})
+
+describe("htmlToTextSnippet", () => {
+  it("builds snippets from sanitized text content", () => {
+    expect(htmlToTextSnippet('<p>Hello <script>alert(1)</script><b>world</b></p>', 11)).toBe("Hello world")
+  })
+})