@handled-ai/design-system 0.20.28 → 0.20.29

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/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} />
       )}