@handled-ai/design-system 0.20.30 → 0.20.32

package/src/components/__tests__/email-recipient-field.test.tsx

@@ -513,4 +513,127 @@ describe("EmailRecipientField", () => {
     // trigger another search.
     expect(secondOnSearch).not.toHaveBeenCalled()
   })
+
+  // --- Last activity (WIT-1007) ---
+
+  const activityContact: SuggestedContact = {
+    name: "Cara Customer",
+    role: "VP Ops",
+    email: "cara@example.com",
+    confirmed: true,
+    lastActivity: { date: "Jun 8, 2026", type: "email", timelineEventId: "evt-1" },
+  }
+
+  it("renders last activity as non-clickable text when no onOpenRecentActivity callback is provided", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={[activityContact]}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    expect(screen.getByText("Jun 8, 2026")).toBeTruthy()
+    // No clickable activity button exists.
+    expect(screen.queryByRole("button", { name: /Last activity/i })).toBeNull()
+  })
+
+  it("renders last activity as non-clickable text when timelineEventId is missing even with a callback", () => {
+    const onOpenRecentActivity = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={[
+          {
+            ...activityContact,
+            lastActivity: { date: "Jun 8, 2026", type: "email" },
+          },
+        ]}
+        onOpenRecentActivity={onOpenRecentActivity}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    expect(screen.getByText("Jun 8, 2026")).toBeTruthy()
+    expect(screen.queryByRole("button", { name: /Last activity/i })).toBeNull()
+  })
+
+  it("renders last activity as a clickable button only when callback and timelineEventId both exist", () => {
+    const onOpenRecentActivity = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={[activityContact]}
+        onOpenRecentActivity={onOpenRecentActivity}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    const activityButton = screen.getByRole("button", { name: /Last activity/i })
+    expect(activityButton.tagName).toBe("BUTTON")
+  })
+
+  it("invokes onOpenRecentActivity with the contact and does NOT add a recipient on activity click", () => {
+    const onOpenRecentActivity = vi.fn()
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={onChange}
+        showPicker
+        contacts={[activityContact]}
+        onOpenRecentActivity={onOpenRecentActivity}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    fireEvent.click(screen.getByRole("button", { name: /Last activity/i }))
+
+    expect(onOpenRecentActivity).toHaveBeenCalledTimes(1)
+    expect(onOpenRecentActivity).toHaveBeenCalledWith(activityContact)
+    // Clicking the activity must not select/add the recipient.
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it("keeps the last-activity button clickable for already-added contacts without adding the recipient", () => {
+    const onOpenRecentActivity = vi.fn()
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={onChange}
+        showPicker
+        contacts={[activityContact]}
+        addedEmails={new Set([activityContact.email!.toLowerCase()])}
+        onOpenRecentActivity={onOpenRecentActivity}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+
+    // The row is disabled (already added) but its activity button stays clickable.
+    const option = screen
+      .getAllByRole("option")
+      .find((o) => o.textContent?.includes("Cara Customer"))!
+    expect(option.className).toContain("pointer-events-none")
+    const activityButton = within(option).getByRole("button", { name: /Last activity/i })
+    expect(activityButton.className).toContain("pointer-events-auto")
+
+    fireEvent.click(activityButton)
+
+    expect(onOpenRecentActivity).toHaveBeenCalledTimes(1)
+    expect(onOpenRecentActivity).toHaveBeenCalledWith(activityContact)
+    expect(onChange).not.toHaveBeenCalled()
+  })
 })

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

@@ -378,4 +378,76 @@ describe("SignalPriorityPopover", () => {
     expect(trigger.className).toContain("text-amber-800")
     expect(trigger.textContent).toContain("Medium Priority")
   })
+
+  // ─── Custom trigger (Task 0) ───────────────────────────────────────────────
+
+  it("renders the default button trigger unchanged when no custom trigger is passed", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    // Default trigger is a <button> reading "{urgencyLabel} Priority"
+    expect(trigger.tagName).toBe("BUTTON")
+    expect(trigger.textContent).toContain("High Priority")
+  })
+
+  it("renders a custom trigger inside the popover trigger, merging the data-testid, and opens the panel", () => {
+    render(
+      <SignalPriorityPopover
+        {...defaultProps}
+        renderTrigger={({ urgencyLabel, open }) => (
+          <button
+            type="button"
+            aria-label={`View ${urgencyLabel} urgency detail`}
+            data-open={open}
+          >
+            bar-glyph
+          </button>
+        )}
+      />,
+    )
+
+    // data-testid is merged onto the custom child element
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.tagName).toBe("BUTTON")
+    expect(trigger.textContent).toBe("bar-glyph")
+    expect(trigger.getAttribute("aria-label")).toBe("View High urgency detail")
+    // No default "High Priority" label rendered
+    expect(trigger.textContent).not.toContain("High Priority")
+
+    // Opens the panel
+    expect(screen.queryByTestId("priority-popover-content")).toBeNull()
+    fireEvent.click(trigger)
+    expect(screen.getByTestId("priority-popover-content")).toBeTruthy()
+    // open state is forwarded to the render function
+    expect(trigger.getAttribute("data-open")).toBe("true")
+  })
+
+  // ─── Controlled open state (Task 0) ─────────────────────────────────────────
+
+  it("respects the controlled open prop for visibility", () => {
+    const { rerender } = render(
+      <SignalPriorityPopover {...defaultProps} open={false} onOpenChange={vi.fn()} />,
+    )
+    expect(screen.queryByTestId("priority-popover-content")).toBeNull()
+
+    rerender(<SignalPriorityPopover {...defaultProps} open={true} onOpenChange={vi.fn()} />)
+    expect(screen.getByTestId("priority-popover-content")).toBeTruthy()
+  })
+
+  it("calls onOpenChange and does not self-open when controlled", () => {
+    const onOpenChange = vi.fn()
+    render(<SignalPriorityPopover {...defaultProps} open={false} onOpenChange={onOpenChange} />)
+
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Controlled: open stays driven by the prop (still false), but handler fires
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+    expect(screen.queryByTestId("priority-popover-content")).toBeNull()
+  })
+
+  it("still works uncontrolled when open/onOpenChange are omitted", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    expect(screen.queryByTestId("priority-popover-content")).toBeNull()
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+    expect(screen.getByTestId("priority-popover-content")).toBeTruthy()
+  })
 })

package/src/components/__tests__/timeline-activity.test.tsx

@@ -44,6 +44,22 @@ describe("TimelineActivity", () => {
     expect(container.firstElementChild).toHaveAttribute("data-variant", "default")
   })
 
+  it("renders each timeline item wrapper with scroll/focus anchors and test ids", () => {
+    const events = [minimal({ id: "evt-a" }), minimal({ id: "evt-b" })]
+    const { container } = render(<TimelineActivity events={events} />)
+
+    for (const id of ["evt-a", "evt-b"]) {
+      const wrapper = container.querySelector(`#timeline-event-${id}`)
+      expect(wrapper).not.toBeNull()
+      expect(wrapper).toHaveAttribute("data-testid", `timeline-event-${id}`)
+      expect(wrapper).toHaveAttribute("data-activity-id", id)
+      expect(wrapper).toHaveAttribute("tabindex", "-1")
+    }
+
+    // The test id is also reachable via screen for click-through targeting.
+    expect(screen.getByTestId("timeline-event-evt-a")).toBeTruthy()
+  })
+
   it("marks the root and interactive cards with the case-panel variant", () => {
     const event = minimal({
       isInteractive: true,

package/src/components/account-contacts-popover.tsx

@@ -5,6 +5,7 @@ import {
   Clock,
   ExternalLink,
 } from "lucide-react"
+import { cn } from "../lib/utils"
 import type { SuggestedContact, SuggestedActionsIconMap } from "./suggested-actions"
 
 // ---------------------------------------------------------------------------
@@ -37,7 +38,7 @@ export interface AccountContactsPopoverProps {
   /** Optional replacement-selection callback. When provided, row clicks call this instead of additive onSelect/onSelectTo. */
   onSelectSwitch?: (contact: SuggestedContact) => void
   onViewAll?: () => void
-  onOpenRecentActivity?: () => void
+  onOpenRecentActivity?: (contact: SuggestedContact) => void
   trigger: React.ReactNode
   iconMap?: SuggestedActionsIconMap
 }
@@ -117,24 +118,37 @@ export function AccountContactsPopover({
                     <div className="truncate text-xs text-muted-foreground leading-tight">
                       {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? ""}
                     </div>
-                    {c.lastActivity && (
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          onOpenRecentActivity?.()
-                          setOpen(false)
-                        }}
-                        className="mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
-                      >
-                        <Clock className="w-3 h-3 shrink-0" />
-                        <span className="shrink-0 font-medium">Last activity</span>
-                        <span className="shrink-0 text-muted-foreground/60">·</span>
-                        <span className="shrink-0">{c.lastActivity.date}</span>
-                        <span className="shrink-0 text-muted-foreground/60">·</span>
-                        <span className="truncate capitalize">{c.lastActivity.type}</span>
-                      </button>
-                    )}
+                    {c.lastActivity && (() => {
+                      const activityContent = (
+                        <>
+                          <Clock className="w-3 h-3 shrink-0" />
+                          <span className="shrink-0 font-medium">Last activity</span>
+                          <span className="shrink-0 text-muted-foreground/60">·</span>
+                          <span className="shrink-0">{c.lastActivity.date}</span>
+                          <span className="shrink-0 text-muted-foreground/60">·</span>
+                          <span className="truncate capitalize">{c.lastActivity.type}</span>
+                        </>
+                      )
+                      const chipBaseClass =
+                        "mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground"
+                      return onOpenRecentActivity && c.lastActivity.timelineEventId ? (
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onOpenRecentActivity(c)
+                            setOpen(false)
+                          }}
+                          className={cn(chipBaseClass, "hover:text-foreground hover:bg-muted/50 transition-colors")}
+                        >
+                          {activityContent}
+                        </button>
+                      ) : (
+                        <div className={chipBaseClass}>
+                          {activityContent}
+                        </div>
+                      )
+                    })()}
                   </div>
                   <div className="ml-2 flex items-center gap-1.5 shrink-0">
                     {resolvedDefaultSelectLabel && (

package/src/components/email-recipient-field.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Popover as PopoverPrimitive } from "radix-ui"
 import {
   ChevronDown,
+  Clock,
   CornerDownLeft,
   Plus,
   Search,
@@ -63,6 +64,14 @@ export interface EmailRecipientFieldProps {
   onSearch?: (query: string) => void
   /** Shows a "Searching contacts..." indicator while async results load. */
   searchLoading?: boolean
+  /**
+   * Opens the recent activity for a contact in the Account Panel timeline.
+   * When provided AND the contact's `lastActivity.timelineEventId` exists, the
+   * last-activity line renders as a button that calls this callback (and stops
+   * propagation so it never adds/selects the recipient). Otherwise the line
+   * renders as non-clickable text.
+   */
+  onOpenRecentActivity?: (contact: SuggestedContact) => void
 }
 
 function RecipientChipPill({
@@ -146,6 +155,7 @@ function ContactPickerContents({
   onAddEmail,
   onSearch,
   searchLoading = false,
+  onOpenRecentActivity,
 }: {
   contacts: SuggestedContact[]
   addedEmails: Set<string>
@@ -153,6 +163,7 @@ function ContactPickerContents({
   onAddEmail: (email: string) => void
   onSearch?: (query: string) => void
   searchLoading?: boolean
+  onOpenRecentActivity?: (contact: SuggestedContact) => void
 }) {
   const [query, setQuery] = React.useState("")
 
@@ -279,6 +290,38 @@ function ContactPickerContents({
                       {email}
                     </div>
                   ) : null}
+                  {contact.lastActivity ? (() => {
+                    const activityContent = (
+                      <>
+                        <Clock className="size-3 shrink-0" />
+                        <span className="shrink-0">Last activity</span>
+                        <span className="shrink-0 text-muted-foreground/60">·</span>
+                        <span className="shrink-0">{contact.lastActivity.date}</span>
+                        <span className="shrink-0 text-muted-foreground/60">·</span>
+                        <span className="truncate capitalize">{contact.lastActivity.type}</span>
+                      </>
+                    )
+                    return onOpenRecentActivity && contact.lastActivity.timelineEventId ? (
+                      <button
+                        type="button"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          onOpenRecentActivity(contact)
+                        }}
+                        // `pointer-events-auto` keeps the activity button clickable even
+                        // when the parent row is disabled (no email / already added) and
+                        // gets `pointer-events-none` — the timeline activity is still
+                        // openable for those contacts.
+                        className="mt-1 flex max-w-full items-center gap-1 overflow-hidden text-[11px] text-muted-foreground hover:text-foreground transition-colors pointer-events-auto"
+                      >
+                        {activityContent}
+                      </button>
+                    ) : (
+                      <div className="mt-1 flex max-w-full items-center gap-1 overflow-hidden text-[11px] text-muted-foreground">
+                        {activityContent}
+                      </div>
+                    )
+                  })() : null}
                 </div>
                 {alreadyAdded ? (
                   <span className="shrink-0 text-[10.5px] font-medium text-muted-foreground">
@@ -318,6 +361,7 @@ export function EmailRecipientField({
   contactToRecipient,
   onSearch,
   searchLoading,
+  onOpenRecentActivity,
 }: EmailRecipientFieldProps) {
   const [value, setValue] = React.useState("")
   const [pickerOpen, setPickerOpen] = React.useState(false)
@@ -465,6 +509,7 @@ export function EmailRecipientField({
                       }}
                       onSearch={onSearch}
                       searchLoading={searchLoading}
+                      onOpenRecentActivity={onOpenRecentActivity}
                     />
                   </PopoverPrimitive.Content>
                 </PopoverPrimitive.Portal>

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

@@ -74,6 +74,19 @@ export interface SignalPriorityPopoverProps {
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   /** Persisted priority-level feedback for the footer. */
   initialPriorityFeedback?: PersistedFeedbackData | null
+  /**
+   * Optional custom trigger element. When provided, it is rendered inside
+   * `<PopoverPrimitive.Trigger asChild>` instead of the default button, so it
+   * must be a single `React.ReactElement` capable of receiving props/ref (not a
+   * generic `ReactNode`). Receives the resolved `urgencyLabel` and the current
+   * `open` state. Provide an accessible name on the element (e.g.
+   * `aria-label="View {urgencyLabel} urgency detail"`).
+   */
+  renderTrigger?: (args: { urgencyLabel: SignalScoreUrgencyLabel; open: boolean }) => React.ReactElement
+  /** Controlled open state. When defined, the popover is controlled; otherwise it falls back to internal state. */
+  open?: boolean
+  /** Called when the open state should change. Passed straight through to the Radix root. */
+  onOpenChange?: (open: boolean) => void
 }
 
 // ---------------------------------------------------------------------------
@@ -290,11 +303,24 @@ export function SignalPriorityPopover({
   initialPriorityFeedback,
   scoreDisplay = "number",
   formulaLabel = "Priority factors",
+  renderTrigger,
+  open: controlledOpen,
+  onOpenChange,
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
   const scoreRange = getUrgencyRange(urgencyLabel)
 
-  const [open, setOpen] = React.useState(false)
+  // Controlled/uncontrolled open state: use the controlled prop when defined,
+  // otherwise fall back to internal state.
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false)
+  const open = controlledOpen ?? uncontrolledOpen
+  const setOpen = React.useCallback(
+    (next: boolean) => {
+      if (controlledOpen === undefined) setUncontrolledOpen(next)
+      onOpenChange?.(next)
+    },
+    [controlledOpen, onOpenChange],
+  )
   const [feedback, setFeedback] = React.useState<"positive" | "negative" | null>(null)
 
   const triggerDefault = URGENCY_TRIGGER_DEFAULT[urgencyLabel]
@@ -306,26 +332,29 @@ export function SignalPriorityPopover({
 
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
-      <PopoverPrimitive.Trigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            triggerDefault,
-            triggerHover,
-            open && triggerOpen,
-            open && "outline-2 outline-foreground outline-offset-2",
-            className,
-          )}
-          data-testid="priority-popover-trigger"
-        >
-          {urgencyLabel} Priority
-          {open ? (
-            <ChevronUp className="h-3 w-3" />
-          ) : (
-            <ChevronDown className="h-3 w-3" />
-          )}
-        </button>
+      <PopoverPrimitive.Trigger asChild data-testid="priority-popover-trigger">
+        {renderTrigger ? (
+          renderTrigger({ urgencyLabel, open })
+        ) : (
+          <button
+            type="button"
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              triggerDefault,
+              triggerHover,
+              open && triggerOpen,
+              open && "outline-2 outline-foreground outline-offset-2",
+              className,
+            )}
+          >
+            {urgencyLabel} Priority
+            {open ? (
+              <ChevronUp className="h-3 w-3" />
+            ) : (
+              <ChevronDown className="h-3 w-3" />
+            )}
+          </button>
+        )}
       </PopoverPrimitive.Trigger>
 
       <PopoverPrimitive.Portal>

package/src/components/suggested-actions.tsx

@@ -84,6 +84,7 @@ export interface SuggestedContact {
   lastActivity?: {
     date: string
     type: string
+    timelineEventId?: string
   }
 }
 
@@ -547,7 +548,7 @@ function EmailHeader({
   onBccAdd?: (contact: SuggestedContact) => void
   onBccRemove?: (index: number) => void
   onOpenAccountDetails?: () => void
-  onOpenRecentActivity?: () => void
+  onOpenRecentActivity?: (contact: SuggestedContact) => void
   iconMap?: SuggestedActionsIconMap
   showSubject?: boolean
   accountDetailsLabel?: string
@@ -910,7 +911,7 @@ function SuggestedActionCard({
   signature?: string | React.ReactNode
   onDuplicate?: (id: number | string) => void
   onOpenAccountDetails?: () => void
-  onOpenRecentActivity?: () => void
+  onOpenRecentActivity?: (contact: SuggestedContact) => void
   onMarkComplete?: (id: number | string) => void
   onDispatchAgent?: (id: number | string, editedContent?: string, settings?: { aiDisclosureEnabled?: boolean; maxDurationMinutes?: string; callRecordingEnabled?: boolean; recordingNoticeEnabled?: boolean }) => void
   onFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
@@ -1571,7 +1572,7 @@ export interface SuggestedActionsProps {
   signature?: string | React.ReactNode
   onDuplicate?: (id: number | string) => void
   onOpenAccountDetails?: () => void
-  onOpenRecentActivity?: () => void
+  onOpenRecentActivity?: (contact: SuggestedContact) => void
   onMarkComplete?: (id: number | string) => void
   onDispatchAgent?: (id: number | string, editedContent?: string, settings?: { aiDisclosureEnabled?: boolean; maxDurationMinutes?: string; callRecordingEnabled?: boolean; recordingNoticeEnabled?: boolean }) => void
   iconMap?: SuggestedActionsIconMap

package/src/components/timeline-activity.tsx

@@ -298,7 +298,13 @@ function TimelineItem({
   const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
 
   return (
-    <div className={classes.outerRowGap}>
+    <div
+      id={`timeline-event-${event.id}`}
+      data-testid={`timeline-event-${event.id}`}
+      data-activity-id={event.id}
+      tabIndex={-1}
+      className={classes.outerRowGap}
+    >
       {!isLast && (
         <div className={classes.connector} />
       )}