@handled-ai/design-system 0.18.2 → 0.18.3

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

@@ -0,0 +1,322 @@
+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: {},
+    timelineSystemEventsToggleLabel: "Score changes",
+    timelineSystemEventsStorageKey: "test-show-score-changes",
+    timelineSystemEventsHiddenHint: "Score changes are hidden.",
+    timelineSystemEventsVisibleHint: "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.")
+  })
+})

package/src/prototype/prototype-config.ts

@@ -16,7 +16,7 @@ import type { TimelineEvent } from "../components/timeline-activity"
 import type { ApprovalState } from "../components/signal-feedback-inline"
 import type { LucideIcon } from "lucide-react"
 import type { PriorityFactor } from "../components/signal-priority-popover"
-import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData } from "../components/feedback-primitives"
 
 // ---------------------------------------------------------------------------
 // Shared
@@ -57,10 +57,6 @@ export interface SignalScoreExplanationSignal {
   counterparty?: string
   /** Component breakdown for combined signals. */
   components?: Array<{ type: string; count: number }>
-  /** Current balance value (e.g., "$3.0M") for balance context strip. */
-  currentBalance?: string
-  /** Additional balance context text (e.g., "down from $23M"). */
-  balanceContext?: string
 }
 
 export interface SignalScoreExplanationBucket {
@@ -101,12 +97,6 @@ export interface SignalScoreData {
   /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
   initialScoreFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null
   initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string }>
-  /** Factor-level feedback for the priority popover rows (keyed by factor key). */
-  initialFactorPopoverFeedback?: Record<string, { type: "up" | "down"; detail: string; ownershipLabel?: string }>
-  /** Persisted bucket-level feedback, keyed by bucket key. */
-  initialBucketFeedback?: Record<string, PersistedFeedbackData>
-  /** Persisted priority-level feedback for the popover footer. */
-  initialPriorityFeedback?: PersistedFeedbackData | null
   /** Priority factors for the popover breakdown. */
   priorityFactors?: PriorityFactor[]
   /** Negative feedback chip tree for the priority popover. */

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

@@ -150,6 +150,16 @@ export interface DetailViewProps {
   onRequestApproval?: () => Promise<void>
   /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
   attentionCount?: number
+  /** Label for the system-events toggle button (e.g. "Score changes"). */
+  timelineSystemEventsToggleLabel?: string
+  /** localStorage key for persisting the system-events toggle state. */
+  timelineSystemEventsStorageKey?: string
+  /** Whether system-noise events are visible by default. @default false */
+  timelineSystemEventsDefaultVisible?: boolean
+  /** Hint text shown below the timeline when system events are hidden. */
+  timelineSystemEventsHiddenHint?: string
+  /** Hint text shown below the timeline when system events are visible. Uses {count} as placeholder. */
+  timelineSystemEventsVisibleHint?: string
 }
 
 export function DetailView({
@@ -184,10 +194,47 @@ export function DetailView({
   opportunityPreview,
   onRequestApproval,
   attentionCount,
+  timelineSystemEventsToggleLabel,
+  timelineSystemEventsStorageKey,
+  timelineSystemEventsDefaultVisible = false,
+  timelineSystemEventsHiddenHint,
+  timelineSystemEventsVisibleHint,
 }: DetailViewProps) {
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
 
+  // ---- System-noise toggle state ----
+  const [showSystemEvents, setShowSystemEvents] = React.useState(timelineSystemEventsDefaultVisible)
+  const initialReadDoneRef = React.useRef(false)
+
+  // Read persisted value from localStorage on mount
+  React.useEffect(() => {
+    if (!timelineSystemEventsStorageKey) {
+      initialReadDoneRef.current = true
+      return
+    }
+    try {
+      const stored = localStorage.getItem(timelineSystemEventsStorageKey)
+      if (stored !== null) {
+        setShowSystemEvents(stored === "true")
+      }
+    } catch {
+      // localStorage unavailable — ignore
+    }
+    initialReadDoneRef.current = true
+  }, [timelineSystemEventsStorageKey])
+
+  // Write to localStorage when the toggle changes (skip initial if matching default)
+  React.useEffect(() => {
+    if (!timelineSystemEventsStorageKey) return
+    if (!initialReadDoneRef.current) return
+    try {
+      localStorage.setItem(timelineSystemEventsStorageKey, String(showSystemEvents))
+    } catch {
+      // localStorage unavailable — ignore
+    }
+  }, [showSystemEvents, timelineSystemEventsStorageKey])
+
   React.useEffect(() => {
     setShowTimeline(false)
     setExtraActions([])
@@ -272,9 +319,6 @@ export function DetailView({
               metaText={undefined}
               feedbackChips={signalData.priorityFeedbackChips}
               onFeedbackSubmit={signalData.onPriorityFeedback}
-              initialFactorFeedback={signalData.initialFactorPopoverFeedback}
-              onFactorFeedback={signalData.onFactorFeedback}
-              initialPriorityFeedback={signalData.initialPriorityFeedback}
             />
             {signalData.timeChipLabel && (
               <Badge variant="outline" title={signalData.timeChipDetail ?? undefined}>
@@ -354,38 +398,92 @@ export function DetailView({
           {renderAfterScore?.(item)}
 
           {/* Activity Timeline */}
-          {sections.timeline && timelineEvents.length > 0 && (
-            <div className="mb-8">
-              <button
-                type="button"
-                onClick={() => setShowTimeline((prev) => !prev)}
-                className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer"
-              >
-                <div className="flex items-center gap-2">
-                  <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
-                  {!showTimeline && attentionCount != null && attentionCount > 0 && (
-                    <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
-                      {attentionCount} new
-                    </span>
-                  )}
-                  {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (
-                    <span className="text-[11px] text-muted-foreground/60">
-                      &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}
-                    </span>
+          {sections.timeline && timelineEvents.length > 0 && (() => {
+            const visibleEvents = timelineEvents.filter(
+              (e) => !e.isSystemNoise || showSystemEvents,
+            )
+            const hiddenCount = timelineEvents.filter((e) => e.isSystemNoise).length
+            const hasSystemNoise = hiddenCount > 0
+            const showToggle =
+              hasSystemNoise &&
+              !!(timelineSystemEventsToggleLabel || timelineSystemEventsStorageKey)
+            const firstVisibleTime =
+              lastActivityTime ?? (visibleEvents.length > 0 ? visibleEvents[0].time : "")
+            const visibleCount = visibleEvents.length
+            const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`
+
+            return (
+              <div className="mb-8">
+                {/* Header — outer non-interactive container */}
+                <div
+                  className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2"
+                  data-testid="timeline-header"
+                >
+                  {/* Left: collapse/expand button */}
+                  <button
+                    type="button"
+                    onClick={() => setShowTimeline((prev) => !prev)}
+                    className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
+                    data-testid="timeline-collapse-btn"
+                  >
+                    <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
+                    {!showTimeline && attentionCount != null && attentionCount > 0 && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
+                        {attentionCount} new
+                      </span>
+                    )}
+                    {!showTimeline && firstVisibleTime && (
+                      <span className="text-[11px] text-muted-foreground/60" data-testid="last-activity-hint">
+                        &middot; Last activity {firstVisibleTime}
+                      </span>
+                    )}
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-[11px] font-medium text-muted-foreground" data-testid="event-count">{eventCountLabel}</span>
+                      <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
+                    </div>
+                  </button>
+
+                  {/* Right: system-events toggle */}
+                  {showToggle && (
+                    <button
+                      type="button"
+                      onClick={() => setShowSystemEvents((prev) => !prev)}
+                      className="flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer"
+                      aria-pressed={showSystemEvents}
+                      data-testid="system-events-toggle"
+                    >
+                      {timelineSystemEventsToggleLabel ?? "System events"}
+                      <span
+                        className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums"
+                        data-testid="hidden-count-badge"
+                      >
+                        {hiddenCount}
+                      </span>
+                    </button>
                   )}
                 </div>
-                <div className="flex items-center gap-1.5">
-                  <span className="text-[11px] font-medium text-muted-foreground">{timelineEvents.length} events</span>
-                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
-                </div>
-              </button>
-              {showTimeline && (
-                <div className="mt-3">
-                  <TimelineActivity events={timelineEvents} />
-                </div>
-              )}
-            </div>
-          )}
+
+                {/* Timeline body */}
+                {showTimeline && visibleEvents.length > 0 && (
+                  <div className="mt-3">
+                    <TimelineActivity events={visibleEvents} />
+                  </div>
+                )}
+
+                {/* Footer hint */}
+                {showTimeline && !showSystemEvents && timelineSystemEventsHiddenHint && hasSystemNoise && (
+                  <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
+                    {timelineSystemEventsHiddenHint}
+                  </p>
+                )}
+                {showTimeline && showSystemEvents && timelineSystemEventsVisibleHint && hasSystemNoise && (
+                  <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
+                    {timelineSystemEventsVisibleHint.replace("{count}", String(hiddenCount))}
+                  </p>
+                )}
+              </div>
+            )
+          })()}
         </div>
 
         {/* Suggested Actions */}