@handled-ai/design-system 0.18.6 → 0.18.8

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. */