@handled-ai/design-system 0.17.1 → 0.18.1

package/src/components/__tests__/signal-priority-popover.test.tsx

@@ -0,0 +1,312 @@
+/**
+ * Tests for SignalPriorityPopover.
+ *
+ * Covers:
+ *  - Renders trigger chip with correct urgency label
+ *  - Popover opens on trigger click and shows content
+ *  - Factor rows render with correct direction labels
+ *  - Urgency class maps applied based on data-state
+ *  - Popover closes on second click (toggle)
+ *  - Feedback footer expands on "Not helpful" click
+ *  - onFeedbackSubmit callback fires
+ *  - Default feedback chips used when feedbackChips prop is omitted
+ *  - Falls back to Activity icon for unknown icon names
+ *  - No feedback footer when onFeedbackSubmit is not provided
+ */
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { SignalPriorityPopover } from "../signal-priority-popover"
+import type { PriorityFactor, SignalPriorityPopoverProps } from "../signal-priority-popover"
+import type { FeedbackChipTree } from "../feedback-primitives"
+
+// ─── Mock data ───────────────────────────────────────────────────────────────
+
+const mockFactors: PriorityFactor[] = [
+  {
+    key: "test_severity",
+    label: "Test Transaction Severity",
+    icon: "radar",
+    tone: "alert",
+    direction: "raises",
+    score: 85,
+    rationale: "Multiple test transactions detected in the last 24 hours.",
+  },
+  {
+    key: "account_depth",
+    label: "Account Relationship Depth",
+    icon: "link-2",
+    tone: "info",
+    direction: "lowers",
+    score: 30,
+    rationale: "Long-standing account with deep relationship history.",
+  },
+  {
+    key: "outflow_severity",
+    label: "Cumulative Outflow Severity",
+    icon: "arrow-up-right",
+    tone: "warn",
+    direction: "neutral",
+    score: 50,
+    rationale: "Moderate outflow levels observed.",
+  },
+]
+
+const mockFeedbackChips: FeedbackChipTree[] = [
+  { label: "Wrong factor weighting" },
+  { label: "Missing context" },
+  {
+    label: "Inaccurate data",
+    subPrompt: "Which field?",
+    subChips: ["Balance figures", "Counterparty", "Timestamp"],
+  },
+]
+
+const defaultProps: SignalPriorityPopoverProps = {
+  score: 79,
+  urgencyLabel: "High",
+  urgencyExplanation: "Multiple risk signals detected across treasury accounts.",
+  factors: mockFactors,
+  metaText: "Updated 4m ago - model v3.2",
+  feedbackChips: mockFeedbackChips,
+  onFeedbackSubmit: vi.fn(),
+}
+
+// ─── Tests ───────────────────────────────────────────────────────────────────
+
+describe("SignalPriorityPopover", () => {
+  it("renders the trigger chip with urgency label", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger).toBeTruthy()
+    expect(trigger.textContent).toContain("High Priority")
+  })
+
+  it("derives urgency label from score when not provided", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel={undefined} score={90} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.textContent).toContain("Urgent Priority")
+  })
+
+  it("applies urgency-specific default classes to the trigger", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Urgent" />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.className).toContain("border-red-200")
+    expect(trigger.className).toContain("bg-red-50")
+    expect(trigger.className).toContain("text-red-700")
+  })
+
+  it("applies Low urgency classes", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Low" score={20} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.className).toContain("border-blue-200")
+    expect(trigger.className).toContain("bg-blue-50")
+  })
+
+  it("opens the popover on trigger click and shows content", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+
+    // Content should not be visible initially
+    expect(screen.queryByTestId("priority-popover-content")).toBeNull()
+
+    // Click to open
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content).toBeTruthy()
+
+    // Check head section
+    expect(content.textContent).toContain("Why this is high priority")
+    expect(content.textContent).toContain("79")
+    expect(content.textContent).toContain("/100")
+    expect(content.textContent).toContain("High range")
+    expect(content.textContent).toContain("60-79")
+  })
+
+  it("renders the urgency explanation synthesis sentence", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain(
+      "Multiple risk signals detected across treasury accounts.",
+    )
+  })
+
+  it("renders factor rows with correct direction labels", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // "raises" factor
+    const raisesRow = screen.getByTestId("factor-row-test_severity")
+    expect(raisesRow.textContent).toContain("Test Transaction Severity")
+    expect(raisesRow.textContent).toContain("Raises")
+    expect(raisesRow.textContent).toContain("85")
+
+    // "lowers" factor
+    const lowersRow = screen.getByTestId("factor-row-account_depth")
+    expect(lowersRow.textContent).toContain("Account Relationship Depth")
+    expect(lowersRow.textContent).toContain("Lowers")
+    expect(lowersRow.textContent).toContain("30")
+
+    // "neutral" factor
+    const neutralRow = screen.getByTestId("factor-row-outflow_severity")
+    expect(neutralRow.textContent).toContain("Cumulative Outflow Severity")
+    expect(neutralRow.textContent).toContain("Neutral")
+    expect(neutralRow.textContent).toContain("50")
+  })
+
+  it("renders Contributing factors section label", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain("Contributing factors")
+    expect(content.textContent).toContain("Score = weighted sum")
+  })
+
+  it("renders score track bars with correct width percentage", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const raisesRow = screen.getByTestId("factor-row-test_severity")
+    const trackFill = raisesRow.querySelector(".bg-foreground\\/20") as HTMLElement
+    expect(trackFill).toBeTruthy()
+    expect(trackFill.style.width).toBe("85%")
+  })
+
+  it("renders factor rationale text", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain(
+      "Multiple test transactions detected in the last 24 hours.",
+    )
+    expect(content.textContent).toContain(
+      "Long-standing account with deep relationship history.",
+    )
+  })
+
+  it("renders feedback footer with 'Not helpful' button when onFeedbackSubmit is provided", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).toContain("Not helpful")
+    expect(content.textContent).toContain("Helpful")
+  })
+
+  it("does not render feedback footer when onFeedbackSubmit is not provided", () => {
+    render(
+      <SignalPriorityPopover {...defaultProps} onFeedbackSubmit={undefined} />,
+    )
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).not.toContain("Not helpful")
+  })
+
+  it("expands negative feedback chips on 'Not helpful' click", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Click "Not helpful" button
+    const notHelpfulBtn = screen.getByRole("button", { name: /not helpful/i })
+    fireEvent.click(notHelpfulBtn)
+
+    const content = screen.getByTestId("priority-popover-content")
+    // The negative chips should now be visible
+    expect(content.textContent).toContain("Wrong factor weighting")
+    expect(content.textContent).toContain("Missing context")
+    expect(content.textContent).toContain("Inaccurate data")
+  })
+
+  it("does not render Contributing factors section when factors array is empty", () => {
+    render(<SignalPriorityPopover {...defaultProps} factors={[]} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    expect(content.textContent).not.toContain("Contributing factors")
+  })
+
+  it("does not render urgency explanation when not provided", () => {
+    render(
+      <SignalPriorityPopover
+        {...defaultProps}
+        urgencyExplanation={undefined}
+      />,
+    )
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const content = screen.getByTestId("priority-popover-content")
+    // Should still show the title
+    expect(content.textContent).toContain("Why this is high priority")
+    // But not the explanation
+    expect(content.textContent).not.toContain(
+      "Multiple risk signals detected across treasury accounts.",
+    )
+  })
+
+  it("clamps score track width between 0% and 100%", () => {
+    const edgeFactors: PriorityFactor[] = [
+      {
+        key: "over",
+        label: "Over 100",
+        icon: "activity",
+        tone: "alert",
+        direction: "raises",
+        score: 150,
+        rationale: "Exceeds max",
+      },
+      {
+        key: "under",
+        label: "Under 0",
+        icon: "activity",
+        tone: "info",
+        direction: "lowers",
+        score: -10,
+        rationale: "Below min",
+      },
+    ]
+    render(<SignalPriorityPopover {...defaultProps} factors={edgeFactors} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const overRow = screen.getByTestId("factor-row-over")
+    const overFill = overRow.querySelector(".bg-foreground\\/20") as HTMLElement
+    expect(overFill.style.width).toBe("100%")
+
+    const underRow = screen.getByTestId("factor-row-under")
+    const underFill = underRow.querySelector(".bg-foreground\\/20") as HTMLElement
+    expect(underFill.style.width).toBe("0%")
+  })
+
+  it("renders tone-specific icon background classes", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Alert tone should have bg-red-50 text-red-600
+    const alertRow = screen.getByTestId("factor-row-test_severity")
+    const alertIcon = alertRow.querySelector(".bg-red-50")
+    expect(alertIcon).toBeTruthy()
+
+    // Info tone should have bg-blue-50 text-blue-600
+    const infoRow = screen.getByTestId("factor-row-account_depth")
+    const infoIcon = infoRow.querySelector(".bg-blue-50")
+    expect(infoIcon).toBeTruthy()
+
+    // Warn tone should have bg-amber-50 text-amber-600
+    const warnRow = screen.getByTestId("factor-row-outflow_severity")
+    const warnIcon = warnRow.querySelector(".bg-amber-50")
+    expect(warnIcon).toBeTruthy()
+  })
+
+  it("applies Medium urgency classes correctly", () => {
+    render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Medium" score={45} />)
+    const trigger = screen.getByTestId("priority-popover-trigger")
+    expect(trigger.className).toContain("border-amber-200")
+    expect(trigger.className).toContain("bg-amber-50")
+    expect(trigger.textContent).toContain("Medium Priority")
+  })
+})

package/src/components/__tests__/user-display.test.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { ActorByline } from "../actor-byline"
+import { UserPill } from "../user-pill"
+
+describe("UserPill", () => {
+  it("renders a display name and derived initials from profile", () => {
+    const { container } = render(
+      <UserPill profile={{ first_name: "Sarah", last_name: "Mitchell", email: "sarah@example.com" }} />
+    )
+
+    expect(container.querySelector('[data-slot="user-pill"]')).not.toBeNull()
+    expect(screen.getByText("Sarah Mitchell")).not.toBeNull()
+    expect(screen.getByText("SM")).not.toBeNull()
+  })
+
+  it("does not require profile and can render direct name/email props with subtitle", () => {
+    render(<UserPill name="Marcus Webb" email="marcus@example.com" subtitle="Account executive" variant="compact" />)
+
+    expect(screen.getByText("Marcus Webb")).not.toBeNull()
+    expect(screen.getByText("Account executive")).not.toBeNull()
+    expect(screen.getByText("MW")).not.toBeNull()
+  })
+
+  it("falls back to email local part and initials from direct email prop", () => {
+    render(<UserPill email="fallback@example.com" />)
+
+    expect(screen.getByText("fallback")).not.toBeNull()
+    expect(screen.getByText("FA")).not.toBeNull()
+  })
+})
+
+describe("ActorByline", () => {
+  it("renders plain byline text with actor name, verb, subject, and string timestamp", () => {
+    const { container } = render(
+      <ActorByline
+        actor={{ first_name: "Cory", last_name: "Pitt", email: "cory@example.com" }}
+        verb="closed"
+        subject="this opportunity"
+        timestamp="3 min ago"
+      />
+    )
+
+    expect(container.querySelector('[data-slot="actor-byline"]')).not.toBeNull()
+    expect(container.textContent).toBe("Cory Pitt closed this opportunity · 3 min ago")
+  })
+
+
+  it("renders Date timestamps deterministically", () => {
+    const { container } = render(
+      <ActorByline
+        actor={{ name: "Cory Pitt", email: "cory@withhandled.com" }}
+        verb="closed"
+        subject="this opportunity"
+        timestamp={new Date("2026-05-24T18:30:00.000Z")}
+      />,
+    )
+
+    expect(container.textContent).toBe("Cory Pitt closed this opportunity · 2026-05-24T18:30:00.000Z")
+  })
+
+  it("omits missing pieces and null timestamp cleanly", () => {
+    const { container } = render(<ActorByline actor={{ name: "Handled AI", email: "agent@handled.ai" }} subject="a task" timestamp={null} />)
+
+    expect(container.textContent).toBe("Handled AI a task")
+  })
+
+  it("falls back through shared user-display rules", () => {
+    const { container } = render(<ActorByline actor={{ first_name: null, last_name: null, name: null, email: "fallback@example.com" }} />)
+
+    expect(container.textContent).toBe("fallback")
+  })
+})

package/src/components/actor-byline.tsx

@@ -0,0 +1 @@
+export { ActorByline, type ActorBylineProps } from "./user-display"

package/src/components/days-open-cell.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { StatusPill, type PillStatus } from "./pill"
+
+export interface DaysOpenCellProps extends React.HTMLAttributes<HTMLDivElement> {
+  days: number | null | undefined
+  warningAt?: number
+  criticalAt?: number
+  emptyLabel?: string
+  suffix?: string
+}
+
+function getDaysOpenIntent(days: number, warningAt: number, criticalAt: number): PillStatus {
+  if (days >= criticalAt) return "error"
+  if (days >= warningAt) return "warning"
+  return "success"
+}
+
+export function DaysOpenCell({
+  days,
+  warningAt = 7,
+  criticalAt = 30,
+  emptyLabel = "—",
+  suffix = "d open",
+  className,
+  ...props
+}: DaysOpenCellProps) {
+  if (days === null || days === undefined) {
+    return (
+      <div data-slot="days-open-cell" className={cn("text-sm text-muted-foreground", className)} {...props}>
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  const intent = getDaysOpenIntent(days, warningAt, criticalAt)
+
+  return (
+    <div data-slot="days-open-cell" className={cn("inline-flex items-center", className)} {...props}>
+      <StatusPill data-testid="days-open-pill" status={`${days} ${suffix}`} intent={intent}>
+        {days} {suffix}
+      </StatusPill>
+    </div>
+  )
+}
+
+export { getDaysOpenIntent }

package/src/components/detail-drawer.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "./sheet"
+
+export interface DetailDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: React.ReactNode
+  description?: React.ReactNode
+  children: React.ReactNode
+  footer?: React.ReactNode
+  side?: "right" | "left"
+  className?: string
+  contentClassName?: string
+}
+
+export function DetailDrawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  side = "right",
+  className,
+  contentClassName,
+}: DetailDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="detail-drawer"
+        side={side}
+        className={cn("w-full gap-0 p-0 sm:max-w-xl", className)}
+      >
+        <SheetHeader data-slot="detail-drawer-header" className="border-b border-border p-5">
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <div data-slot="detail-drawer-content" className={cn("flex-1 overflow-y-auto p-5", contentClassName)}>
+          {children}
+        </div>
+        {footer ? (
+          <SheetFooter data-slot="detail-drawer-footer" className="border-t border-border p-5">
+            {footer}
+          </SheetFooter>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}