@handled-ai/design-system 0.18.3 → 0.18.5

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

@@ -150,16 +150,6 @@ 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({
@@ -194,47 +184,10 @@ 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([])
@@ -398,92 +351,38 @@ export function DetailView({
           {renderAfterScore?.(item)}
 
           {/* Activity Timeline */}
-          {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>
+          {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>
                   )}
                 </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 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>
+          )}
         </div>
 
         {/* Suggested Actions */}

package/src/components/__tests__/timeline-activity.test.tsx

@@ -1,137 +0,0 @@
-import { describe, it, expect } from "vitest"
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import {
-  TimelineActivity,
-  TONE_CLASSES,
-  type TimelineEvent,
-} from "../timeline-activity"
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function minimal(overrides: Partial<TimelineEvent> = {}): TimelineEvent {
-  return {
-    id: "e1",
-    icon: React.createElement("span", { "data-testid": "icon" }, "⚡"),
-    title: "Test event",
-    time: "2h ago",
-    ...overrides,
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("TimelineActivity", () => {
-  // --- Tone rendering ---
-
-  it("renders red dot classes when tone is 'red'", () => {
-    const event = minimal({ tone: "red" })
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const dot = container.querySelector('[data-testid="timeline-dot"]')!
-    expect(dot).not.toBeNull()
-    const cls = dot.className
-    // Should contain all the red tone dot classes
-    expect(cls).toContain("bg-red-50")
-    expect(cls).toContain("border-red-200")
-    // Should contain the red icon classes
-    expect(cls).toContain("text-red-600")
-    // Should NOT contain neutral classes
-    expect(cls).not.toContain("border-border/60")
-    expect(cls).not.toContain("text-muted-foreground")
-  })
-
-  it("renders neutral dot classes when tone is absent", () => {
-    const event = minimal()
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const dot = container.querySelector('[data-testid="timeline-dot"]')!
-    expect(dot).not.toBeNull()
-    const cls = dot.className
-    expect(cls).toContain("border-border/60")
-    expect(cls).toContain("bg-background")
-    expect(cls).toContain("text-muted-foreground")
-  })
-
-  // --- Actor byline ---
-
-  it("renders actor byline with name when actor.kind is 'user'", () => {
-    const event = minimal({
-      actor: { kind: "user", name: "Alice" },
-    })
-    render(<TimelineActivity events={[event]} />)
-    const byline = screen.getByTestId("actor-byline")
-    expect(byline).not.toBeNull()
-    expect(byline.textContent).toContain("Alice")
-    expect(byline.textContent).toContain("performed this action")
-  })
-
-  it("renders no byline when actor.kind is 'system'", () => {
-    const event = minimal({
-      actor: { kind: "system" },
-    })
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const byline = container.querySelector('[data-testid="actor-byline"]')
-    expect(byline).toBeNull()
-  })
-
-  it("renders 'Integration' text when actor.kind is 'integration'", () => {
-    const event = minimal({
-      actor: { kind: "integration" },
-    })
-    render(<TimelineActivity events={[event]} />)
-    const byline = screen.getByTestId("actor-byline")
-    expect(byline).not.toBeNull()
-    expect(byline.textContent).toContain("Integration")
-  })
-
-  it("renders custom verb for user actor", () => {
-    const event = minimal({
-      actor: { kind: "user", name: "Bob", verb: "approved this case" },
-    })
-    render(<TimelineActivity events={[event]} />)
-    const byline = screen.getByTestId("actor-byline")
-    expect(byline.textContent).toContain("approved this case")
-  })
-
-  it("renders no byline when actor is absent", () => {
-    const event = minimal()
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const byline = container.querySelector('[data-testid="actor-byline"]')
-    expect(byline).toBeNull()
-  })
-
-  // --- Backwards compatibility ---
-
-  it("renders correctly with minimal TimelineEvent (only id, icon, title, time)", () => {
-    const event: TimelineEvent = {
-      id: "min-1",
-      icon: React.createElement("span", null, "📌"),
-      title: "Minimal event",
-      time: "5m ago",
-    }
-    const { container } = render(<TimelineActivity events={[event]} />)
-    // Should render without errors
-    expect(container.textContent).toContain("Minimal event")
-    expect(container.textContent).toContain("5m ago")
-    // Dot should have neutral classes
-    const dot = container.querySelector('[data-testid="timeline-dot"]')!
-    expect(dot.className).toContain("border-border/60")
-    // No byline
-    const byline = container.querySelector('[data-testid="actor-byline"]')
-    expect(byline).toBeNull()
-  })
-
-  // --- TONE_CLASSES export ---
-
-  it("exports TONE_CLASSES with all expected tones", () => {
-    const tones = ["red", "amber", "emerald", "violet", "blue", "slate", "salesforce", "gmail"] as const
-    for (const tone of tones) {
-      expect(TONE_CLASSES[tone]).toBeDefined()
-      expect(TONE_CLASSES[tone].dot).toBeTruthy()
-      expect(TONE_CLASSES[tone].icon).toBeTruthy()
-    }
-  })
-})

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

@@ -1,322 +0,0 @@
-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.")
-  })
-})