@handled-ai/design-system 0.18.6 → 0.18.7

package/src/components/timeline-activity.tsx

@@ -4,6 +4,24 @@ import * as React from "react"
 import { cn } from "../lib/utils"
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
 
+export type TimelineEventTone =
+  | "red"
+  | "amber"
+  | "emerald"
+  | "violet"
+  | "blue"
+  | "slate"
+  | "salesforce"
+  | "gmail"
+
+export interface TimelineEventActor {
+  kind: "user" | "integration" | "system"
+  name?: string
+  initials?: string
+  avatarUrl?: string
+  verb?: string
+}
+
 export interface TimelineEvent {
   id: string
   icon: React.ReactNode
@@ -28,8 +46,57 @@ export interface TimelineEvent {
   defaultExpanded?: boolean
   isInteractive?: boolean
   onSourceClick?: () => void
+  tone?: TimelineEventTone
+  actor?: TimelineEventActor
+  isSystemNoise?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Tone class map — every class is a complete static string literal so
+// Tailwind's JIT scanner can detect them. NO interpolation.
+// ---------------------------------------------------------------------------
+
+export const TONE_CLASSES: Record<
+  TimelineEventTone,
+  { dot: string; icon: string }
+> = {
+  red: {
+    dot: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40",
+    icon: "text-red-600 dark:text-red-300",
+  },
+  amber: {
+    dot: "bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40",
+    icon: "text-amber-600 dark:text-amber-300",
+  },
+  emerald: {
+    dot: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40",
+    icon: "text-emerald-600 dark:text-emerald-300",
+  },
+  violet: {
+    dot: "bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40",
+    icon: "text-violet-600 dark:text-violet-300",
+  },
+  blue: {
+    dot: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40",
+    icon: "text-blue-600 dark:text-blue-300",
+  },
+  slate: {
+    dot: "bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700",
+    icon: "text-slate-500 dark:text-slate-300",
+  },
+  salesforce: {
+    dot: "bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25",
+    icon: "text-[#00A1E0]",
+  },
+  gmail: {
+    dot: "bg-white border-red-200 dark:bg-background dark:border-red-900/40",
+    icon: "text-red-500 dark:text-red-300",
+  },
 }
 
+const NEUTRAL_DOT_CLASSES = "border-border/60 bg-background"
+const NEUTRAL_ICON_CLASSES = "text-muted-foreground"
+
 export interface TimelineActivityProps {
   events: TimelineEvent[]
   className?: string
@@ -49,12 +116,54 @@ export function TimelineActivity({ events, className }: TimelineActivityProps) {
   )
 }
 
+function ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {
+  if (actor.kind === "system") return null
+
+  if (actor.kind === "integration") {
+    return (
+      <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="actor-byline">
+        <span>Integration</span>
+        <span className="text-muted-foreground/40">&middot;</span>
+        <span>{time}</span>
+      </div>
+    )
+  }
+
+  // actor.kind === "user"
+  const verb = actor.verb ?? "performed this action"
+  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : "?")
+
+  return (
+    <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="actor-byline">
+      {actor.avatarUrl ? (
+        <img
+          src={actor.avatarUrl}
+          alt={actor.name ?? "User"}
+          className="h-4 w-4 rounded-full object-cover"
+        />
+      ) : (
+        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground">
+          {displayInitials}
+        </span>
+      )}
+      {actor.name && <span className="text-foreground font-medium">{actor.name}</span>}
+      <span>{verb}</span>
+      <span className="text-muted-foreground/40">&middot;</span>
+      <span>{time}</span>
+    </div>
+  )
+}
+
 function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {
   const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)
   const [showAllRecipients, setShowAllRecipients] = React.useState(false)
   const hasContent = !!event.content
   const hasEmail = !!event.email
 
+  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null
+  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES
+  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
+
   return (
     <div className="group relative flex gap-3.5">
       {!isLast && (
@@ -62,7 +171,7 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
       )}
 
       <div className="relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background">
-        <div className="flex h-4.5 w-4.5 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground ring-4 ring-background">
+        <div className={cn("flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background", dotClasses, iconClasses)} data-testid="timeline-dot">
           {event.icon}
         </div>
       </div>
@@ -77,6 +186,8 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
           </span>
         </div>
 
+        {event.actor && <ActorByline actor={event.actor} time={event.time} />}
+
         {(hasContent || hasEmail) && (
           <div className="mt-2">
             {event.isInteractive ? (

package/src/prototype/__tests__/detail-view-attention.test.tsx

@@ -89,8 +89,8 @@ describe("DetailView attentionCount", () => {
     expect(pill).not.toBeNull();
     expect(pill!.textContent).toContain("5");
 
-    // Click the timeline header button to expand
-    const timelineButton = container.querySelector("button.group\\/timeline") as HTMLElement;
+    // Click the timeline collapse button to expand
+    const timelineButton = container.querySelector('[data-testid="timeline-collapse-btn"]') as HTMLElement;
     expect(timelineButton).not.toBeNull();
     fireEvent.click(timelineButton);
 

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

@@ -0,0 +1,409 @@
+import { describe, it, expect, vi, beforeEach } from "vitest"
+import React from "react"
+import { render, fireEvent } from "@testing-library/react"
+import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
+import type { QueueItem, SignalScoreData } from "../prototype-config"
+import type { TimelineEvent } from "../../components/timeline-activity"
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const baseItem: QueueItem = {
+  id: "1",
+  title: "Test Signal",
+  details: "Some details",
+  statusColor: "green",
+  time: "2h ago",
+  company: "Acme Inc",
+  tag1: "renewal",
+}
+
+function makeSignalScore(): SignalScoreData {
+  return {
+    score: 75,
+    factors: [
+      { key: "trigger", label: "Trigger strength", score: 70, why: "Strong signal" },
+    ],
+    whyNow: "Strong signals detected.",
+    evidence: ["Evidence line 1"],
+    confidence: 80,
+  }
+}
+
+const normalEvents: TimelineEvent[] = [
+  {
+    id: "t1",
+    icon: React.createElement("span", null, "📧"),
+    title: "Email sent",
+    time: "1h ago",
+  },
+  {
+    id: "t2",
+    icon: React.createElement("span", null, "📞"),
+    title: "Call logged",
+    time: "3h ago",
+  },
+]
+
+const noiseEvents: TimelineEvent[] = [
+  {
+    id: "t3",
+    icon: React.createElement("span", null, "📊"),
+    title: "Score updated +3",
+    time: "2h ago",
+    isSystemNoise: true,
+  },
+  {
+    id: "t4",
+    icon: React.createElement("span", null, "📊"),
+    title: "Score updated -1",
+    time: "4h ago",
+    isSystemNoise: true,
+  },
+]
+
+const mixedEvents: TimelineEvent[] = [...normalEvents, ...noiseEvents]
+
+function baseProps(overrides: Partial<DetailViewProps> = {}): DetailViewProps {
+  return {
+    item: baseItem,
+    sections: { signalBrief: true, suggestedActions: false, timeline: true },
+    getSignalScore: () => makeSignalScore(),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    getTimelineEvents: () => mixedEvents,
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    timelineSystemEventsConfig: {
+      toggleLabel: "Score changes",
+      storageKey: "test-show-score-changes",
+      hiddenHint: "Score changes are hidden.",
+      visibleHint: "Showing {count} score changes.",
+    },
+    ...overrides,
+  }
+}
+
+// Mock localStorage
+let store: Record<string, string> = {}
+
+const localStorageMock = {
+  getItem: vi.fn((key: string) => store[key] ?? null),
+  setItem: vi.fn((key: string, value: string) => {
+    store[key] = value
+  }),
+  removeItem: vi.fn((key: string) => {
+    delete store[key]
+  }),
+  clear: vi.fn(() => {
+    store = {}
+  }),
+}
+
+beforeEach(() => {
+  store = {}
+  localStorageMock.getItem.mockClear()
+  localStorageMock.setItem.mockClear()
+  localStorageMock.removeItem.mockClear()
+  localStorageMock.clear.mockClear()
+  // Reset getItem to default implementation
+  localStorageMock.getItem.mockImplementation((key: string) => store[key] ?? null)
+  Object.defineProperty(window, "localStorage", { value: localStorageMock, writable: true })
+})
+
+// ---------------------------------------------------------------------------
+// Helper to expand the timeline
+// ---------------------------------------------------------------------------
+
+function expandTimeline(container: HTMLElement) {
+  const collapseBtn = container.querySelector(
+    '[data-testid="timeline-collapse-btn"]',
+  ) as HTMLElement
+  if (collapseBtn) fireEvent.click(collapseBtn)
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("DetailView timeline system-events toggle", () => {
+  it("hides events with isSystemNoise: true by default", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    // Expand the timeline
+    expandTimeline(container)
+    // Should only show 2 normal events, not the 2 noise events
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("2 events")
+    // Noise event titles should not appear
+    expect(container.textContent).not.toContain("Score updated +3")
+    expect(container.textContent).not.toContain("Score updated -1")
+  })
+
+  it("reveals system-noise events when toggle is clicked", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+    // Click the toggle
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    ) as HTMLElement
+    expect(toggle).not.toBeNull()
+    fireEvent.click(toggle)
+    // Now all 4 events should be visible
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("4 events")
+    expect(container.textContent).toContain("Score updated +3")
+  })
+
+  it("clicking the toggle does NOT collapse/expand the timeline", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+    // Timeline should be expanded — normal events visible
+    expect(container.textContent).toContain("Email sent")
+
+    // Click the system-events toggle
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    ) as HTMLElement
+    fireEvent.click(toggle)
+
+    // Timeline should still be expanded
+    expect(container.textContent).toContain("Email sent")
+  })
+
+  it("clicking the collapse button does NOT toggle system-event visibility", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+
+    // Toggle system events on
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    ) as HTMLElement
+    fireEvent.click(toggle)
+    expect(container.textContent).toContain("Score updated +3")
+
+    // Collapse the timeline
+    expandTimeline(container)
+    // Re-expand
+    expandTimeline(container)
+
+    // System events should still be visible (toggle didn't change)
+    expect(container.textContent).toContain("Score updated +3")
+  })
+
+  it("header event count reflects visible events, not total events", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("2 events")
+  })
+
+  it("hidden count badge shows the correct number", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    const badge = container.querySelector('[data-testid="hidden-count-badge"]')
+    expect(badge).not.toBeNull()
+    expect(badge?.textContent).toBe("2")
+  })
+
+  it("calls localStorage.setItem when toggle changes", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    ) as HTMLElement
+    fireEvent.click(toggle)
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      "test-show-score-changes",
+      "true",
+    )
+  })
+
+  it("reads localStorage.getItem on mount and honors stored value", () => {
+    store["test-show-score-changes"] = "true"
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+    // With stored value "true", system events should be visible
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("4 events")
+    expect(localStorageMock.getItem).toHaveBeenCalledWith(
+      "test-show-score-changes",
+    )
+  })
+
+  it("renders header and toggle when all events are system noise and toggle is off", () => {
+    const allNoiseProps = baseProps({
+      getTimelineEvents: () => noiseEvents,
+    })
+    const { container } = render(<DetailView {...allNoiseProps} />)
+    // Header should still be rendered
+    const header = container.querySelector('[data-testid="timeline-header"]')
+    expect(header).not.toBeNull()
+    // Toggle should be present
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    )
+    expect(toggle).not.toBeNull()
+    // Event count should show 0 events
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("0 events")
+  })
+
+  it("'Last activity' uses the first visible event's time, not a hidden system-noise event", () => {
+    // Arrange: first event is system noise (time "30m ago"),
+    // second event is normal (time "1h ago")
+    const orderedEvents: TimelineEvent[] = [
+      {
+        id: "noise-first",
+        icon: React.createElement("span", null, "📊"),
+        title: "Score change",
+        time: "30m ago",
+        isSystemNoise: true,
+      },
+      {
+        id: "normal-second",
+        icon: React.createElement("span", null, "📧"),
+        title: "Email sent",
+        time: "1h ago",
+      },
+    ]
+    const props = baseProps({ getTimelineEvents: () => orderedEvents })
+    const { container } = render(<DetailView {...props} />)
+    const hint = container.querySelector('[data-testid="last-activity-hint"]')
+    expect(hint).not.toBeNull()
+    // Should show "1h ago" (the first visible event), not "30m ago" (the hidden noise event)
+    expect(hint?.textContent).toContain("1h ago")
+    expect(hint?.textContent).not.toContain("30m ago")
+  })
+
+  it("uses singular grammar for 1 event and plural for multiple", () => {
+    const singleEvent: TimelineEvent[] = [
+      {
+        id: "s1",
+        icon: React.createElement("span", null, "📧"),
+        title: "Email sent",
+        time: "1h ago",
+      },
+    ]
+    const props = baseProps({ getTimelineEvents: () => singleEvent })
+    const { container } = render(<DetailView {...props} />)
+    const eventCount = container.querySelector('[data-testid="event-count"]')
+    expect(eventCount?.textContent).toBe("1 event")
+  })
+
+  it("does not render toggle when there are no system-noise events", () => {
+    const props = baseProps({
+      getTimelineEvents: () => normalEvents,
+    })
+    const { container } = render(<DetailView {...props} />)
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    )
+    expect(toggle).toBeNull()
+  })
+
+  it("shows footer hint when timeline is expanded and system events are hidden", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+    const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
+    expect(hint).not.toBeNull()
+    expect(hint?.textContent).toBe("Score changes are hidden.")
+  })
+
+  it("shows visible footer hint with count when system events are shown", () => {
+    const { container } = render(<DetailView {...baseProps()} />)
+    expandTimeline(container)
+    // Toggle on
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    ) as HTMLElement
+    fireEvent.click(toggle)
+    const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
+    expect(hint).not.toBeNull()
+    expect(hint?.textContent).toBe("Showing 2 score changes.")
+  })
+
+  // --- Toggle always renders when system-noise events exist (review fix #1) ---
+
+  it("renders toggle even when no config is provided, using default 'System events' label", () => {
+    const props = baseProps({
+      timelineSystemEventsConfig: undefined,
+      getTimelineEvents: () => mixedEvents,
+    })
+    const { container } = render(<DetailView {...props} />)
+    const toggle = container.querySelector(
+      '[data-testid="system-events-toggle"]',
+    )
+    expect(toggle).not.toBeNull()
+    expect(toggle?.textContent).toContain("System events")
+  })
+
+  // --- lastActivityTime derives from filtered visible events (review fix #2) ---
+
+  it("ignores lastActivityTime when system-noise events are hidden and uses first visible event time", () => {
+    // lastActivityTime says "5m ago" but that comes from a hidden score event
+    const orderedEvents: TimelineEvent[] = [
+      {
+        id: "noise-first",
+        icon: React.createElement("span", null, "📊"),
+        title: "Score change",
+        time: "5m ago",
+        isSystemNoise: true,
+      },
+      {
+        id: "normal-second",
+        icon: React.createElement("span", null, "📧"),
+        title: "Email sent",
+        time: "2h ago",
+      },
+    ]
+    const props = baseProps({
+      getTimelineEvents: () => orderedEvents,
+      lastActivityTime: "5m ago",
+    })
+    const { container } = render(<DetailView {...props} />)
+    const hint = container.querySelector('[data-testid="last-activity-hint"]')
+    expect(hint).not.toBeNull()
+    // Should show "2h ago" (first visible event), not "5m ago" (from lastActivityTime)
+    expect(hint?.textContent).toContain("2h ago")
+    expect(hint?.textContent).not.toContain("5m ago")
+  })
+
+  it("uses lastActivityTime when all events are visible (showSystemEvents is true or no noise)", () => {
+    const props = baseProps({
+      getTimelineEvents: () => normalEvents,
+      lastActivityTime: "5m ago",
+    })
+    const { container } = render(<DetailView {...props} />)
+    const hint = container.querySelector('[data-testid="last-activity-hint"]')
+    expect(hint).not.toBeNull()
+    expect(hint?.textContent).toContain("5m ago")
+  })
+
+  // --- Deprecated individual props backward compatibility ---
+
+  it("accepts deprecated individual props and renders toggle correctly", () => {
+    const props: DetailViewProps = {
+      item: baseItem,
+      sections: { signalBrief: true, suggestedActions: false, timeline: true },
+      getSignalScore: () => makeSignalScore(),
+      buildSuggestedActions: () => [],
+      buildSourceItems: () => [],
+      getTimelineEvents: () => mixedEvents,
+      accountContacts: [],
+      emailSignature: "",
+      iconMap: {},
+      timelineSystemEventsToggleLabel: "Legacy label",
+      timelineSystemEventsStorageKey: "legacy-key",
+      timelineSystemEventsHiddenHint: "Legacy hidden hint.",
+    }
+    const { container } = render(<DetailView {...props} />)
+    const toggle = container.querySelector('[data-testid="system-events-toggle"]')
+    expect(toggle).not.toBeNull()
+    expect(toggle?.textContent).toContain("Legacy label")
+    // Footer hint should work too
+    expandTimeline(container)
+    const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
+    expect(hint).not.toBeNull()
+    expect(hint?.textContent).toBe("Legacy hidden hint.")
+  })
+})

package/src/prototype/prototype-config.ts

@@ -18,6 +18,23 @@ import type { LucideIcon } from "lucide-react"
 import type { PriorityFactor } from "../components/signal-priority-popover"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
 
+// ---------------------------------------------------------------------------
+// Timeline system-events toggle config
+// ---------------------------------------------------------------------------
+
+export interface TimelineSystemEventsConfig {
+  /** Label for the toggle button (e.g. "Score changes"). Falls back to "System events". */
+  toggleLabel?: string
+  /** localStorage key for persisting the toggle state. */
+  storageKey?: string
+  /** Whether system-noise events are visible by default. @default false */
+  defaultVisible?: boolean
+  /** Hint text shown below the timeline when system events are hidden. */
+  hiddenHint?: string
+  /** Hint text shown below the timeline when system events are visible. Uses {count} as placeholder. */
+  visibleHint?: string
+}
+
 // ---------------------------------------------------------------------------
 // Shared
 // ---------------------------------------------------------------------------
@@ -206,6 +223,10 @@ export interface InboxViewConfig {
   renderAfterScore?: (item: QueueItem) => React.ReactNode
   /** Formatted string for "Last activity X ago" in the collapsed timeline header. If omitted, falls back to the first event's time. */
   lastActivityTime?: string
+  /** Configuration for the system-noise events toggle (score changes, etc.). */
+  timelineSystemEventsConfig?: TimelineSystemEventsConfig
+  /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
+  attentionCount?: number
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
   /** Render supporting content below the detail title. */