@handled-ai/design-system 0.20.29 → 0.20.30

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

@@ -513,127 +513,4 @@ 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__/timeline-activity.test.tsx

@@ -44,22 +44,6 @@ 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,7 +5,6 @@ import {
   Clock,
   ExternalLink,
 } from "lucide-react"
-import { cn } from "../lib/utils"
 import type { SuggestedContact, SuggestedActionsIconMap } from "./suggested-actions"
 
 // ---------------------------------------------------------------------------
@@ -38,7 +37,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?: (contact: SuggestedContact) => void
+  onOpenRecentActivity?: () => void
   trigger: React.ReactNode
   iconMap?: SuggestedActionsIconMap
 }
@@ -118,37 +117,24 @@ 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 && (() => {
-                      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>
-                      )
-                    })()}
+                    {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>
+                    )}
                   </div>
                   <div className="ml-2 flex items-center gap-1.5 shrink-0">
                     {resolvedDefaultSelectLabel && (

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

@@ -4,7 +4,6 @@ import * as React from "react"
 import { Popover as PopoverPrimitive } from "radix-ui"
 import {
   ChevronDown,
-  Clock,
   CornerDownLeft,
   Plus,
   Search,
@@ -64,14 +63,6 @@ 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({
@@ -155,7 +146,6 @@ function ContactPickerContents({
   onAddEmail,
   onSearch,
   searchLoading = false,
-  onOpenRecentActivity,
 }: {
   contacts: SuggestedContact[]
   addedEmails: Set<string>
@@ -163,7 +153,6 @@ function ContactPickerContents({
   onAddEmail: (email: string) => void
   onSearch?: (query: string) => void
   searchLoading?: boolean
-  onOpenRecentActivity?: (contact: SuggestedContact) => void
 }) {
   const [query, setQuery] = React.useState("")
 
@@ -290,38 +279,6 @@ 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">
@@ -361,7 +318,6 @@ export function EmailRecipientField({
   contactToRecipient,
   onSearch,
   searchLoading,
-  onOpenRecentActivity,
 }: EmailRecipientFieldProps) {
   const [value, setValue] = React.useState("")
   const [pickerOpen, setPickerOpen] = React.useState(false)
@@ -509,7 +465,6 @@ export function EmailRecipientField({
                       }}
                       onSearch={onSearch}
                       searchLoading={searchLoading}
-                      onOpenRecentActivity={onOpenRecentActivity}
                     />
                   </PopoverPrimitive.Content>
                 </PopoverPrimitive.Portal>

package/src/components/suggested-actions.tsx

@@ -84,7 +84,6 @@ export interface SuggestedContact {
   lastActivity?: {
     date: string
     type: string
-    timelineEventId?: string
   }
 }
 
@@ -548,7 +547,7 @@ function EmailHeader({
   onBccAdd?: (contact: SuggestedContact) => void
   onBccRemove?: (index: number) => void
   onOpenAccountDetails?: () => void
-  onOpenRecentActivity?: (contact: SuggestedContact) => void
+  onOpenRecentActivity?: () => void
   iconMap?: SuggestedActionsIconMap
   showSubject?: boolean
   accountDetailsLabel?: string
@@ -911,7 +910,7 @@ function SuggestedActionCard({
   signature?: string | React.ReactNode
   onDuplicate?: (id: number | string) => void
   onOpenAccountDetails?: () => void
-  onOpenRecentActivity?: (contact: SuggestedContact) => void
+  onOpenRecentActivity?: () => 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
@@ -1572,7 +1571,7 @@ export interface SuggestedActionsProps {
   signature?: string | React.ReactNode
   onDuplicate?: (id: number | string) => void
   onOpenAccountDetails?: () => void
-  onOpenRecentActivity?: (contact: SuggestedContact) => void
+  onOpenRecentActivity?: () => 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,13 +298,7 @@ function TimelineItem({
   const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
 
   return (
-    <div
-      id={`timeline-event-${event.id}`}
-      data-testid={`timeline-event-${event.id}`}
-      data-activity-id={event.id}
-      tabIndex={-1}
-      className={classes.outerRowGap}
-    >
+    <div className={classes.outerRowGap}>
       {!isLast && (
         <div className={classes.connector} />
       )}

package/src/prototype/__tests__/detail-view-timeline-system-events.test.tsx

@@ -475,4 +475,85 @@ describe("DetailView timeline system-events toggle", () => {
     expect(hint).toBeNull()
     expect(toggle).toHaveAttribute("title", "Legacy hidden hint.")
   })
+
+  // --- renderTimelineHeaderControls slot (WIT-1008 Task 1) ---
+
+  it("renders custom timeline header controls without interfering with system-event ownership (case-panel)", () => {
+    const props = baseProps({
+      sectionLayout: "case-panel-v2",
+      renderTimelineHeaderControls: ({ visibleCount, hiddenCount }) => (
+        <button type="button" data-testid="custom-filter">
+          Custom Filter ({visibleCount}/{hiddenCount})
+        </button>
+      ),
+    })
+    const { container, getByTestId } = render(<DetailView {...props} />)
+
+    // Custom node renders in the timeline header.
+    const header = container.querySelector('[data-testid="timeline-header"]') as HTMLElement
+    const custom = getByTestId("custom-filter")
+    expect(custom).not.toBeNull()
+    expect(header.contains(custom)).toBe(true)
+    expect(custom.textContent).toContain("Custom Filter")
+
+    // System-noise events remain hidden by default.
+    expandTimeline(container)
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("2 events")
+    expect(container.textContent).not.toContain("Score updated +3")
+    expect(container.textContent).not.toContain("Score updated -1")
+
+    // They only appear after clicking the existing system-events toggle.
+    const toggle = container.querySelector('[data-testid="system-events-toggle"]') as HTMLElement
+    fireEvent.click(toggle)
+    expect(container.textContent).toContain("Score updated +3")
+    expect(container.querySelector('[data-testid="event-count"]')?.textContent).toBe("4 events")
+  })
+
+  it("renders custom timeline header controls in the default layout, before the system-events toggle, without owning system-event state", () => {
+    // Capture the args the render prop receives across renders.
+    const seenArgs: Array<{ visibleCount: number; hiddenCount: number; showSystemEvents: boolean }> = []
+    const props = baseProps({
+      // default layout (no sectionLayout="case-panel-v2")
+      renderTimelineHeaderControls: (args) => {
+        seenArgs.push(args)
+        return (
+          <button type="button" data-testid="custom-filter">
+            Custom Filter
+          </button>
+        )
+      },
+    })
+    const { container, getByTestId } = render(<DetailView {...props} />)
+
+    const header = container.querySelector('[data-testid="timeline-header"]') as HTMLElement
+    const custom = getByTestId("custom-filter")
+    const toggle = container.querySelector('[data-testid="system-events-toggle"]') as HTMLElement
+
+    // Custom node renders inside the timeline header.
+    expect(header.contains(custom)).toBe(true)
+
+    // Custom control appears BEFORE the system-events toggle in DOM order.
+    const order = custom.compareDocumentPosition(toggle)
+    expect(order & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+
+    // Expand the timeline; system-noise events are hidden by default.
+    expandTimeline(container)
+    expect(container.textContent).toContain("Email sent")
+    expect(container.textContent).not.toContain("Score updated +3")
+
+    // Clicking the custom control does NOT collapse/expand the timeline and
+    // does NOT change system-event visibility.
+    fireEvent.click(custom)
+    expect(container.textContent).toContain("Email sent")
+    expect(toggle).toHaveAttribute("aria-pressed", "false")
+    expect(container.textContent).not.toContain("Score updated +3")
+
+    // The showSystemEvents arg flips to true after the built-in toggle is clicked.
+    expect(seenArgs.at(-1)?.showSystemEvents).toBe(false)
+    fireEvent.click(toggle)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
+    expect(container.textContent).toContain("Score updated +3")
+    expect(seenArgs.at(-1)?.showSystemEvents).toBe(true)
+  })
 })

package/src/prototype/prototype-config.ts

@@ -161,6 +161,18 @@ export interface InboxSortOption {
 /** Controls the visual prominence of the signal brief section. */
 export type BriefStyleVariant = "default" | "prominent"
 
+/**
+ * Render consumer-owned controls (e.g. activity-type filters) in the right
+ * side of the activity timeline header, before the built-in system-events
+ * toggle. Receives the current visible/hidden counts and system-events state
+ * so the consumer can label its own controls.
+ */
+export type RenderTimelineHeaderControls = (args: {
+  visibleCount: number
+  hiddenCount: number
+  showSystemEvents: boolean
+}) => React.ReactNode
+
 export interface InboxDetailSections {
   signalBrief?: boolean
   suggestedActions?: boolean
@@ -242,6 +254,11 @@ export interface InboxViewConfig {
   timelineSystemEventsConfig?: TimelineSystemEventsConfig
   /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
   attentionCount?: number
+  /**
+   * Render consumer-owned controls (e.g. activity-type filters) in the right
+   * side of the activity timeline header, before the built-in system-events toggle.
+   */
+  renderTimelineHeaderControls?: RenderTimelineHeaderControls
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
   /** Render a full-width action row below the detail title row. */

package/src/prototype/prototype-inbox-view.tsx

@@ -56,6 +56,7 @@ import type {
   SignalScoreData,
   BriefStyleVariant,
   TimelineSystemEventsConfig,
+  RenderTimelineHeaderControls,
 } from "./prototype-config"
 
 // ---------------------------------------------------------------------------
@@ -195,6 +196,13 @@ export interface DetailViewProps {
   attentionCount?: number
   /** Configuration for the system-noise events toggle (score changes, etc.). */
   timelineSystemEventsConfig?: TimelineSystemEventsConfig
+  /**
+   * Render consumer-owned controls (e.g. activity-type filters) in the right
+   * side of the activity timeline header, before the built-in system-events
+   * toggle. Receives the current visible/hidden counts and system-events state
+   * so the consumer can label its own controls. Behavior is unchanged when omitted.
+   */
+  renderTimelineHeaderControls?: RenderTimelineHeaderControls
 
   // ── Deprecated individual props (use timelineSystemEventsConfig instead) ──
   /** @deprecated Use `timelineSystemEventsConfig.toggleLabel`. */
@@ -223,6 +231,7 @@ function TimelineSection({
   sysEvtConfig,
   lastActivityTime,
   isCasePanel = false,
+  renderTimelineHeaderControls,
 }: {
   timelineEvents: TimelineEvent[]
   showTimeline: boolean
@@ -233,6 +242,7 @@ function TimelineSection({
   sysEvtConfig?: TimelineSystemEventsConfig
   lastActivityTime?: string
   isCasePanel?: boolean
+  renderTimelineHeaderControls?: RenderTimelineHeaderControls
 }) {
   // Single-pass partition: compute visibleEvents and hiddenCount together
   const visibleEvents: TimelineEvent[] = []
@@ -302,8 +312,9 @@ function TimelineSection({
           )}
         </button>
 
-        {/* Right: system-events toggle, event count, and collapse affordance */}
+        {/* Right: consumer controls, system-events toggle, event count, and collapse affordance */}
         <div className="flex shrink-0 items-center gap-4">
+          {renderTimelineHeaderControls?.({ visibleCount, hiddenCount, showSystemEvents })}
           {hasSystemNoise && (
             <button
               type="button"
@@ -420,6 +431,7 @@ export function DetailView({
   onRequestApproval,
   attentionCount,
   timelineSystemEventsConfig: configProp,
+  renderTimelineHeaderControls,
   timelineSystemEventsToggleLabel,
   timelineSystemEventsStorageKey,
   timelineSystemEventsDefaultVisible,
@@ -628,6 +640,7 @@ export function DetailView({
       sysEvtConfig={sysEvtConfig}
       lastActivityTime={lastActivityTime}
       isCasePanel={isCasePanelV2}
+      renderTimelineHeaderControls={renderTimelineHeaderControls}
     />
   ) : null
 
@@ -862,6 +875,7 @@ export function PrototypeInboxView({
   sortOptions,
   activeSortId,
   onSortChange,
+  renderTimelineHeaderControls,
 }: PrototypeInboxViewProps) {
   const [inboxViewMode, setInboxViewMode] = React.useState<"inbox" | "list" | "detail">(
     defaultViewMode === "list" ? "list" : defaultViewMode === "split" ? "inbox" : "inbox"
@@ -1108,6 +1122,7 @@ export function PrototypeInboxView({
     accountDetailsButtonLabel,
     getAccountDetailsButtonAriaLabel,
     onOpenSignalBucket,
+    renderTimelineHeaderControls,
   }
 
   return (