@handled-ai/design-system 0.18.1 → 0.18.3

package/src/components/metric-card.tsx

@@ -24,88 +24,6 @@ export interface MetricCardProps {
   showInfo?: boolean
 }
 
-export interface KpiStripItem {
-  id?: string
-  label: React.ReactNode
-  value: React.ReactNode
-  unit?: React.ReactNode
-  subtitle?: React.ReactNode
-  change?: MetricCardProps["change"]
-}
-
-export interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {
-  items: KpiStripItem[]
-  columns?: 2 | 3 | 4
-}
-
-export function KpiStrip({ items, columns = 4, className, ...props }: KpiStripProps) {
-  return (
-    <div
-      data-slot="kpi-strip"
-      className={cn(
-        "grid gap-3 rounded-xl border border-border bg-card p-3 shadow-sm",
-        columns === 2 && "sm:grid-cols-2",
-        columns === 3 && "sm:grid-cols-3",
-        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
-        className
-      )}
-      {...props}
-    >
-      {items.map((item, index) => {
-        const isGoodDirection = item.change
-          ? item.change.isGood !== undefined
-            ? item.change.isGood
-            : item.change.direction === "up"
-          : false
-        const ChangeIcon = item.change?.direction === "down" ? ArrowDown : ArrowUp
-
-        return (
-          <div
-            key={item.id ?? index}
-            data-slot="kpi-strip-item"
-            className="min-w-0 rounded-lg bg-muted/40 px-3 py-2"
-          >
-            <div data-slot="kpi-strip-label" className="truncate text-xs font-medium text-muted-foreground">
-              {item.label}
-            </div>
-            <div className="mt-1 flex items-baseline gap-1">
-              <span data-slot="kpi-strip-value" className="truncate text-2xl font-bold tracking-tight text-foreground">
-                {item.value}
-              </span>
-              {item.unit ? (
-                <span data-slot="kpi-strip-unit" className="text-sm font-semibold text-muted-foreground">
-                  {item.unit}
-                </span>
-              ) : null}
-            </div>
-            {item.subtitle || item.change ? (
-              <div className="mt-1 flex items-center gap-2 text-xs">
-                {item.change ? (
-                  <span
-                    data-slot="kpi-strip-change"
-                    className={cn(
-                      "inline-flex items-center gap-0.5 font-semibold",
-                      isGoodDirection ? "text-emerald-600" : "text-red-600"
-                    )}
-                  >
-                    <ChangeIcon className="h-3 w-3 stroke-[3]" />
-                    {item.change.value}
-                  </span>
-                ) : null}
-                {item.subtitle ? (
-                  <span data-slot="kpi-strip-subtitle" className="truncate text-muted-foreground">
-                    {item.subtitle}
-                  </span>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
 export function MetricCard({
   title,
   value,

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>
+      )}
+      <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/index.ts

@@ -33,7 +33,6 @@ export * from "./components/data-table-filter"
 export * from "./components/data-table-quick-views"
 export * from "./components/data-table-toolbar"
 export * from "./components/detail-view"
-export * from "./components/detail-drawer"
 export * from "./components/dialog"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
@@ -48,8 +47,6 @@ export * from "./components/inbox-toolbar"
 export * from "./components/inline-banner"
 export * from "./components/input"
 export * from "./components/insights-filter-bar"
-export * from "./components/days-open-cell"
-export * from "./components/linked-entity-cell"
 export * from "./components/item-list"
 export * from "./components/item-list-display"
 export * from "./components/item-list-filter"
@@ -59,11 +56,9 @@ export * from "./components/label"
 export * from "./components/message"
 export * from "./components/metric-card"
 export * from "./components/performance-metrics-table"
-export * from "./components/pill"
 export * from "./components/preview-list"
 export * from "./components/progress"
 export * from "./components/quick-action-chat-area"
-export * from "./components/quick-segment"
 export {
   QuickActionModal,
   type QuickActionPriority,

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,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.")
+  })
+})