@handled-ai/design-system 0.17.0 → 0.17.2

package/src/prototype/__tests__/detail-view-score-why.test.tsx

@@ -80,16 +80,12 @@ describe("DetailView corrected compact score WHY UX", () => {
 
     fireEvent.click(screen.getByRole("button", { name: /urgent priority/i }));
 
+    // The new popover shows urgency explanation and score info in a different format
     expect(screen.getByText("Customer activity spiked today.")).toBeInTheDocument();
-    expect(screen.getByText("Score 82/100")).toBeInTheDocument();
-    expect(screen.getByText("Urgent range: 80-100")).toBeInTheDocument();
-    expect(screen.getByText("Why now")).toBeInTheDocument();
-    const priorityPanel = screen.getByRole("region", { name: /priority explanation/i });
-    expect(within(priorityPanel).getByText("Strong signals detected.")).toBeInTheDocument();
-    expect(screen.getByText("Top factor")).toBeInTheDocument();
-    expect(screen.getAllByText("Strong signal").length).toBeGreaterThan(0);
-    expect(screen.getByText("Trigger strength")).toBeInTheDocument();
-    expect(screen.getByText("Company fit")).toBeInTheDocument();
+    expect(screen.getByText(/82/)).toBeInTheDocument();
+    expect(screen.getByText(/\/100/)).toBeInTheDocument();
+    // Popover shows "Why this is urgent priority" heading
+    expect(screen.getByText(/why this is urgent priority/i)).toBeInTheDocument();
     expect(screen.queryByText("How's this score?")).toBeNull();
   });
 
@@ -116,21 +112,40 @@ describe("DetailView corrected compact score WHY UX", () => {
     expect(screen.getByRole("region", { name: /treasury activity details/i })).toBeInTheDocument();
   });
 
-  it("resets selected bucket and priority panel when item id changes", () => {
-    const { rerender } = render(<DetailView {...baseProps()} />);
+  it("resets selected bucket when item id changes", () => {
+    const { rerender } = render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                { key: "signal-a", label: "Treasury activity", kind: "signal", primarySignalId: "sig-1", signals: [{ id: "sig-1", label: "Treasury signal" }] },
+              ],
+            }),
+        })}
+      />,
+    );
 
-    fireEvent.click(screen.getByRole("button", { name: /urgent priority/i }));
-    expect(screen.getByRole("region", { name: /priority explanation/i })).toBeInTheDocument();
+    // Expand a WHY bucket
+    fireEvent.click(screen.getByRole("button", { name: /treasury activity/i }));
+    expect(screen.getByRole("region", { name: /treasury activity details/i })).toBeInTheDocument();
 
     rerender(
       <DetailView
         {...baseProps({
           item: { ...baseItem, id: "case-2", title: "Second Signal" },
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                { key: "signal-a", label: "Treasury activity", kind: "signal", primarySignalId: "sig-1", signals: [{ id: "sig-1", label: "Treasury signal" }] },
+              ],
+            }),
         })}
       />,
     );
 
-    expect(screen.queryByRole("region", { name: /priority explanation/i })).toBeNull();
+    // Bucket should be collapsed after item change
+    expect(screen.queryByRole("region", { name: /treasury activity details/i })).toBeNull();
   });
 
   it("does not render factor-derived WHY chips when no signal buckets are present", () => {
@@ -167,7 +182,7 @@ describe("DetailView corrected compact score WHY UX", () => {
     expect(screen.queryByRole("button", { name: /company fit/i })).toBeNull();
   });
 
-  it("exposes aria-expanded and aria-controls for priority and bucket triggers", () => {
+  it("exposes aria-expanded and aria-controls for bucket triggers", () => {
     render(
       <DetailView
         {...baseProps({
@@ -181,13 +196,6 @@ describe("DetailView corrected compact score WHY UX", () => {
       />,
     );
 
-    const priorityButton = screen.getByRole("button", { name: /urgent priority/i });
-    expect(priorityButton.getAttribute("aria-expanded")).toBe("false");
-    expect(priorityButton.getAttribute("aria-controls")).toBeTruthy();
-    fireEvent.click(priorityButton);
-    expect(priorityButton.getAttribute("aria-expanded")).toBe("true");
-    expect(document.getElementById(priorityButton.getAttribute("aria-controls")!)).toBeInTheDocument();
-
     const bucketButton = screen.getByRole("button", { name: /signal a/i });
     expect(bucketButton.getAttribute("aria-expanded")).toBe("false");
     expect(bucketButton.getAttribute("aria-controls")).toBeTruthy();
@@ -213,7 +221,8 @@ describe("DetailView corrected compact score WHY UX", () => {
     );
 
     expect(screen.getAllByRole("button", { name: /treasury activity/i })).toHaveLength(1);
-    expect(screen.getByText("×3")).toBeInTheDocument();
+    // Task 3 redesigned WHY pills: count badge now uses "x{N}" format
+    expect(screen.getByText(/x\s*3/)).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole("button", { name: /treasury activity/i }));
     const matchingSignals = screen.getByRole("list", { name: /matching signals/i });
@@ -297,7 +306,7 @@ describe("DetailView corrected compact score WHY UX", () => {
     });
   });
 
-  it("shows factor feedback in the priority panel, not signal WHY panels", () => {
+  it("signal WHY panels do not render factor feedback UI", () => {
     const onFactorFeedback = vi.fn();
     render(
       <DetailView
@@ -317,10 +326,5 @@ describe("DetailView corrected compact score WHY UX", () => {
     fireEvent.click(screen.getByRole("button", { name: /signal only/i }));
     const signalPanel = screen.getByRole("region", { name: /signal only details/i });
     expect(within(signalPanel).queryByTitle("This factor is accurate")).toBeNull();
-
-    fireEvent.click(screen.getByRole("button", { name: /urgent priority/i }));
-    const priorityPanel = screen.getByRole("region", { name: /priority explanation/i });
-    expect(within(priorityPanel).getAllByTitle("This factor is accurate").length).toBeGreaterThan(0);
-    expect(within(priorityPanel).getByText("Needs review")).toBeInTheDocument();
   });
 });

package/src/prototype/__tests__/detail-view-title-slots.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { DetailView } from "../prototype-inbox-view"
+import type { DetailViewProps } from "../prototype-inbox-view"
+
+const baseItem = {
+  id: "case-1",
+  title: "Churn risk case title",
+  details: "Case details",
+  statusColor: "red",
+  time: "1h ago",
+  company: "Acme Corp",
+  tag1: "Signal",
+}
+
+function renderDetailView(overrides: Partial<DetailViewProps> = {}) {
+  const props: DetailViewProps = {
+    item: baseItem,
+    sections: { signalBrief: false, suggestedActions: false, timeline: false },
+    getSignalScore: () => ({
+      score: 72,
+      factors: [],
+      whyNow: "Why now",
+      evidence: [],
+      confidence: 80,
+      urgencyLabel: "High",
+      urgencyExplanation: "High priority",
+    }),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    ...overrides,
+  }
+
+  return render(<DetailView {...props} />)
+}
+
+describe("DetailView title slots", () => {
+  it("renders supporting title text below the main title", () => {
+    renderDetailView({
+      renderTitleSubtext: (item) => <p data-testid="title-subtext">Full title: {item.title}</p>,
+    })
+
+    expect(screen.getByTestId("title-subtext").textContent).toBe(
+      "Full title: Churn risk case title",
+    )
+  })
+
+  it("renders title extra content beside the main title", () => {
+    const onClick = vi.fn()
+
+    renderDetailView({
+      renderTitleExtra: () => (
+        <button type="button" onClick={onClick}>
+          Quick action
+        </button>
+      ),
+    })
+
+    expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
+  })
+})

package/src/prototype/prototype-config.ts

@@ -15,6 +15,8 @@ import type {
 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 } from "../components/feedback-primitives"
 
 // ---------------------------------------------------------------------------
 // Shared
@@ -45,6 +47,16 @@ export interface SignalScoreExplanationSignal {
   source?: string
   time?: string
   metric?: string
+  /** Signal type name (e.g., "treasury_liquidation"). Used for combined signal component identification. */
+  signalTypeName?: string
+  /** Primary display value (e.g., "-$1,724,310.11"). */
+  primaryValue?: string
+  /** Qualifier text (e.g., "100% of balance"). */
+  qualifier?: string
+  /** Counterparty / destination (e.g., "-> JPMorgan Chase --6042"). */
+  counterparty?: string
+  /** Component breakdown for combined signals. */
+  components?: Array<{ type: string; count: number }>
 }
 
 export interface SignalScoreExplanationBucket {
@@ -62,6 +74,10 @@ export interface SignalScoreExplanationBucket {
   signalIds?: string[]
   primarySignalId?: string
   factorKeys?: string[]
+  /** Lucide icon name for the bucket type (e.g., "trending-down"). */
+  icon?: string
+  /** Tonal styling hint for the bucket. */
+  tone?: "alert" | "warn" | "info"
 }
 
 export interface SignalScoreData {
@@ -81,6 +97,14 @@ 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 }>
+  /** Priority factors for the popover breakdown. */
+  priorityFactors?: PriorityFactor[]
+  /** Negative feedback chip tree for the priority popover. */
+  priorityFeedbackChips?: FeedbackChipTree[]
+  /** Callback when user submits priority-level feedback. */
+  onPriorityFeedback?: (data: FeedbackSubmitData) => void
+  /** Callback when user submits bucket-level feedback. */
+  onBucketFeedback?: (bucketKey: string, data: FeedbackSubmitData) => void
   /** AI-generated signal brief text. When present, rendered in a dedicated section. */
   signalBrief?: string
   /** Compact label for time-remaining chip (e.g., "13 days left"). */
@@ -172,6 +196,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
+  /** Render extra content inline with the detail title. */
+  renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render supporting content below the detail title. */
+  renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Sort options for the inbox. When provided, a sort dropdown is rendered in the split view toolbar. */
   sortOptions?: InboxSortOption[]
   /** Currently active sort option id. */

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

@@ -38,7 +38,8 @@ import {
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
 import { SignalApproval, type ApprovalState, type OpportunityPreview } from "../components/signal-feedback-inline"
-import { ScoreWhyChips, SignalPriorityChip, SignalPriorityPanel } from "../components/score-why-chips"
+import { ScoreWhyChips } from "../components/score-why-chips"
+import { SignalPriorityPopover } from "../components/signal-priority-popover"
 import { type SourceDef } from "../components/detail-view"
 import {
   SuggestedActions,
@@ -137,6 +138,10 @@ export interface DetailViewProps {
   /** Render content between the signal score section and the activity timeline. */
   renderAfterScore?: (item: QueueItem) => React.ReactNode
   lastActivityTime?: string
+  /** Render extra content inline with the detail title. */
+  renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render supporting content below the detail title. */
+  renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */
   renderMetadataExtra?: (item: QueueItem) => React.ReactNode
   onOpenSignalBucket?: (args: { item: QueueItem; bucketKey: string; signalId: string }) => void
@@ -171,6 +176,8 @@ export function DetailView({
   renderBeforeScore,
   renderAfterScore,
   lastActivityTime,
+  renderTitleExtra,
+  renderTitleSubtext,
   renderMetadataExtra,
   onOpenSignalBucket,
   approveButtonIconUrl,
@@ -180,13 +187,10 @@ export function DetailView({
 }: DetailViewProps) {
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
-  const [priorityOpen, setPriorityOpen] = React.useState(false)
-  const priorityPanelId = React.useId()
 
   React.useEffect(() => {
     setShowTimeline(false)
     setExtraActions([])
-    setPriorityOpen(false)
   }, [item.id])
 
   const signalData = React.useMemo(
@@ -251,15 +255,23 @@ export function DetailView({
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
-          <h1 className="mb-3 text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+          <div className="mb-3 flex flex-wrap items-start gap-x-3 gap-y-2">
+            <div className="min-w-0 flex-1">
+              <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+              {renderTitleSubtext?.(item)}
+            </div>
+            {renderTitleExtra?.(item)}
+          </div>
 
           <div className="mb-6 flex flex-wrap items-center gap-2">
-            <SignalPriorityChip
+            <SignalPriorityPopover
               score={signalData.score}
               urgencyLabel={signalData.urgencyLabel}
-              isOpen={priorityOpen}
-              controlsId={priorityPanelId}
-              onClick={() => setPriorityOpen((prev) => !prev)}
+              urgencyExplanation={signalData.urgencyExplanation ?? signalData.signalBrief}
+              factors={signalData.priorityFactors ?? []}
+              metaText={undefined}
+              feedbackChips={signalData.priorityFeedbackChips}
+              onFeedbackSubmit={signalData.onPriorityFeedback}
             />
             {signalData.timeChipLabel && (
               <Badge variant="outline" title={signalData.timeChipDetail ?? undefined}>
@@ -280,8 +292,6 @@ export function DetailView({
             {renderMetadataExtra?.(item)}
           </div>
 
-          {priorityOpen && <SignalPriorityPanel id={priorityPanelId} signalData={signalData} className="mb-6" />}
-
           {/* Signal Brief */}
           {sections.signalBrief && (() => {
             const briefHeading = signalBriefCopy?.heading ?? "Signal brief"
@@ -440,6 +450,8 @@ export function PrototypeInboxView({
   renderBeforeScore,
   renderAfterScore,
   lastActivityTime,
+  renderTitleExtra,
+  renderTitleSubtext,
   sortOptions,
   activeSortId,
   onSortChange,
@@ -678,6 +690,8 @@ export function PrototypeInboxView({
     renderBeforeScore,
     renderAfterScore,
     lastActivityTime,
+    renderTitleExtra,
+    renderTitleSubtext,
     onOpenSignalBucket,
   }