@handled-ai/design-system 0.17.1 → 0.18.1

package/src/components/score-why-chips.tsx

@@ -1,8 +1,21 @@
 "use client"
 
 import * as React from "react"
-import { Info } from "lucide-react"
-import { ScoreBreakdown, type ScoreFactor } from "./score-breakdown"
+import {
+  ChevronDown,
+  ChevronUp,
+  ChevronRight,
+  X,
+  TrendingDown,
+  ArrowUpRight,
+  Radar,
+  ArrowDownLeft,
+  GitMerge,
+  Activity,
+} from "lucide-react"
+import type { LucideIcon } from "lucide-react"
+import { FeedbackFooter } from "./feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData } from "./feedback-primitives"
 import { cn } from "../lib/utils"
 import type {
   QueueItem,
@@ -12,6 +25,10 @@ import type {
   SignalScoreUrgencyLabel,
 } from "../prototype/prototype-config"
 
+// ---------------------------------------------------------------------------
+// Constants & helpers
+// ---------------------------------------------------------------------------
+
 export function getSignalScoreUrgencyLabel(
   score: number,
   providedLabel?: SignalScoreUrgencyLabel,
@@ -23,28 +40,7 @@ export function getSignalScoreUrgencyLabel(
   return "Low"
 }
 
-function getUrgencyChipClass(label: SignalScoreUrgencyLabel) {
-  switch (label) {
-    case "Urgent":
-      return "border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-300"
-    case "High":
-      return "border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-900/50 dark:bg-orange-950/30 dark:text-orange-300"
-    case "Medium":
-      return "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-300"
-    case "Low":
-      return "border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-300"
-  }
-}
-
-function classificationForScore(score?: number): string | undefined {
-  if (score == null) return undefined
-  if (score >= 80) return "Urgent"
-  if (score >= 60) return "High"
-  if (score >= 35) return "Medium"
-  return "Low"
-}
-
-function scoreRangeForUrgency(label: SignalScoreUrgencyLabel): string {
+export function scoreRangeForUrgency(label: SignalScoreUrgencyLabel): string {
   switch (label) {
     case "Urgent":
       return "80-100"
@@ -64,18 +60,6 @@ function makeDomId(...parts: Array<string | undefined>): string {
     .replace(/[^A-Za-z0-9_-]+/g, "-")
 }
 
-function scoreFactorToPriorityBucket(factor: ScoreFactor): SignalScoreExplanationBucket {
-  return {
-    key: factor.key,
-    label: factor.label,
-    kind: "factor",
-    score: factor.score ?? undefined,
-    classification: factor.risk ?? classificationForScore(factor.score ?? undefined),
-    rationale: factor.why,
-    factorKeys: [factor.key],
-  }
-}
-
 function bucketHasSignalRows(bucket: SignalScoreExplanationBucket): boolean {
   return (
     (bucket.signals?.length ?? 0) > 0 ||
@@ -102,120 +86,253 @@ function getBucketSignals(bucket: SignalScoreExplanationBucket): SignalScoreExpl
   }))
 }
 
-function getPriorityBuckets(signalData: SignalScoreData): SignalScoreExplanationBucket[] {
-  if (signalData.explanationBuckets !== undefined) return signalData.explanationBuckets
-  // Legacy fallback for consumers that still provide score factors but have not
-  // migrated to explanation buckets. WHY chips intentionally do not use this.
-  return signalData.factors.map(scoreFactorToPriorityBucket)
+// ---------------------------------------------------------------------------
+// Signal type icon map - keyed by signal type name (Tailwind v4 source scanned)
+// ---------------------------------------------------------------------------
+
+const SIGNAL_TYPE_ICONS: Record<string, LucideIcon> = {
+  treasury_liquidation: TrendingDown,
+  cumulative_treasury_outflow: ArrowUpRight,
+  test_transaction: Radar,
+  micro_deposit: ArrowDownLeft,
+  combined_signal: GitMerge,
 }
 
-function isSameExplanation(a?: string, b?: string): boolean {
-  return Boolean(a && b && a.trim() === b.trim())
+function resolveIcon(iconName?: string): LucideIcon {
+  if (!iconName) return Activity
+  return SIGNAL_TYPE_ICONS[iconName] ?? Activity
 }
 
-export interface SignalPriorityChipProps {
-  score: number
-  urgencyLabel?: SignalScoreUrgencyLabel
-  isOpen?: boolean
-  controlsId?: string
-  onClick?: () => void
-  className?: string
+// ---------------------------------------------------------------------------
+// Static tone class maps (REQUIRED for Tailwind v4 source scanning)
+// ---------------------------------------------------------------------------
+
+/** Shared tone-to-class map. Re-exported for signal-priority-popover. */
+export const SIGNAL_TONE_CLASSES: Record<string, string> = {
+  alert: "bg-red-50 text-red-600",
+  warn: "bg-amber-50 text-amber-600",
+  info: "bg-blue-50 text-blue-600",
 }
 
-export function SignalPriorityChip({
-  score,
-  urgencyLabel: providedLabel,
-  isOpen,
-  controlsId,
-  onClick,
-  className,
-}: SignalPriorityChipProps) {
-  const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
+/** Default tone for missing/unknown tone values */
+export const DEFAULT_TONE_CLASS = "bg-muted text-muted-foreground"
+
+// ---------------------------------------------------------------------------
+// Em-dash fallback for missing slot data
+// ---------------------------------------------------------------------------
+
+function slotValue(value: string | null | undefined): string {
+  return value && value.trim().length > 0 ? value : ""
+}
+
+// ---------------------------------------------------------------------------
+// Bucket feedback chip config
+// ---------------------------------------------------------------------------
+
+const BUCKET_NEGATIVE_CHIPS: FeedbackChipTree[] = [
+  {
+    label: "Not relevant for this account",
+    subPrompt: "Why isn't it relevant?",
+    subChips: [
+      "Business as usual for this account",
+      "Account in maintenance mode",
+      "Wrong contact for this signal",
+      "Other",
+    ],
+  },
+  { label: "Bad timing" },
+  {
+    label: "Inaccurate data",
+    subPrompt: "Which field?",
+    subChips: ["Balance figures", "Counterparty", "Timestamp", "Other"],
+  },
+  { label: "Wrong account" },
+  { label: "Already handled" },
+  { label: "Other" },
+]
+
+// ---------------------------------------------------------------------------
+// Default visible row count for long lists
+// ---------------------------------------------------------------------------
+
+const DEFAULT_VISIBLE_ROWS = 8
+
+// ---------------------------------------------------------------------------
+// WhyPill - Bucket toggle button with icon, count badge, chevron, close
+// ---------------------------------------------------------------------------
+
+interface WhyPillProps {
+  bucket: SignalScoreExplanationBucket
+  isSelected: boolean
+  signalCount: number
+  panelId: string
+  onToggle: () => void
+  onClose: () => void
+}
+
+function WhyPill({ bucket, isSelected, signalCount, panelId, onToggle, onClose }: WhyPillProps) {
+  const IconComponent = resolveIcon(bucket.icon)
+
+  const sharedClasses = cn(
+    "inline-flex items-center text-[11px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    isSelected
+      ? "border-border bg-muted text-foreground"
+      : "border-border bg-background text-muted-foreground hover:bg-muted/60 hover:text-foreground",
+  )
 
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-expanded={isOpen}
-      aria-controls={controlsId}
-      className={cn(
-        "inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        getUrgencyChipClass(urgencyLabel),
-        className,
+    <div className="inline-flex h-[26px] items-stretch">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={isSelected}
+        aria-controls={panelId}
+        className={cn(
+          sharedClasses,
+          "gap-1.5 rounded-lg border px-2.5 py-1",
+          isSelected && "rounded-b-none rounded-r-none border-r-0",
+        )}
+      >
+        <IconComponent className="h-3 w-3 shrink-0" />
+        {bucket.label}
+        {signalCount > 1 && (
+          <span className={cn("rounded-full px-1.5 py-0 text-[10px]", isSelected ? "bg-background/60" : "bg-muted")}>
+            x{signalCount}
+          </span>
+        )}
+        {isSelected ? (
+          <ChevronUp className="h-3 w-3 shrink-0" />
+        ) : (
+          <ChevronDown className="h-3 w-3 shrink-0" />
+        )}
+      </button>
+      {isSelected && (
+        <button
+          type="button"
+          aria-label={`Close ${bucket.label}`}
+          onClick={onClose}
+          className={cn(
+            sharedClasses,
+            "rounded-lg rounded-b-none rounded-l-none border border-l-0 border-border px-1.5 py-1 hover:bg-background/60",
+          )}
+        >
+          <X className="h-3 w-3" />
+        </button>
       )}
-    >
-      {urgencyLabel} Priority
-      <Info className="h-3 w-3" />
-    </button>
+    </div>
   )
 }
 
-export interface SignalPriorityPanelProps {
-  signalData: SignalScoreData
-  className?: string
-  id?: string
-}
+// ---------------------------------------------------------------------------
+// CombinedSignalMiniChips - renders component type chips for combined signals
+// ---------------------------------------------------------------------------
 
-export function SignalPriorityPanel({ signalData, className, id }: SignalPriorityPanelProps) {
-  const urgencyLabel = getSignalScoreUrgencyLabel(signalData.score, signalData.urgencyLabel)
-  const buckets = React.useMemo(() => getPriorityBuckets(signalData), [signalData])
-  const topBucketRationale = buckets.find((bucket) => bucket.rationale)?.rationale
-  const primaryUrgencyExplanation = signalData.urgencyExplanation ?? signalData.whyNow ?? topBucketRationale
-  const whyNowSection = isSameExplanation(signalData.whyNow, primaryUrgencyExplanation) ? undefined : signalData.whyNow
-  const topFactorSection =
-    isSameExplanation(topBucketRationale, primaryUrgencyExplanation) || isSameExplanation(topBucketRationale, whyNowSection)
-      ? undefined
-      : topBucketRationale
-  const scoreRange = scoreRangeForUrgency(urgencyLabel)
+interface CombinedSignalMiniChipsProps {
+  components: Array<{ type: string; count: number }>
+}
 
+function CombinedSignalMiniChips({ components }: CombinedSignalMiniChipsProps) {
   return (
-    <div id={id} className={cn("rounded-lg border border-border bg-muted/20 p-3 text-xs", className)} role="region" aria-label="Priority explanation">
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div>
-          <p className="font-semibold text-foreground">Why this is {urgencyLabel.toLowerCase()} priority</p>
-          {primaryUrgencyExplanation ? <p className="mt-1 leading-relaxed text-muted-foreground">{primaryUrgencyExplanation}</p> : null}
-        </div>
-        <div className="flex shrink-0 flex-wrap gap-1.5 text-[11px] text-muted-foreground">
-          <span className="rounded-full bg-background px-2 py-0.5">Score {signalData.score}/100</span>
-          <span className="rounded-full bg-background px-2 py-0.5">{urgencyLabel} range: {scoreRange}</span>
-        </div>
+    <div className="flex flex-wrap items-center gap-1">
+      {components.map((comp, idx) => {
+        const CompIcon = resolveIcon(comp.type)
+        return (
+          <React.Fragment key={comp.type}>
+            {idx > 0 && <span className="text-[10px] text-muted-foreground/60">+</span>}
+            <span className="inline-flex items-center gap-0.5 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+              <CompIcon className="h-2.5 w-2.5 shrink-0" />
+              {comp.type.replace(/_/g, " ")} x{comp.count}
+            </span>
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// StructuredSignalRow - CSS grid slot grammar signal row
+// ---------------------------------------------------------------------------
+
+interface StructuredSignalRowProps {
+  item: QueueItem
+  bucketKey: string
+  signal: SignalScoreExplanationSignal
+  tone?: "alert" | "warn" | "info"
+  onOpenSignalBucket?: ScoreWhyChipsProps["onOpenSignalBucket"]
+}
+
+function StructuredSignalRow({ item, bucketKey, signal, tone, onOpenSignalBucket }: StructuredSignalRowProps) {
+  const IconComponent = resolveIcon(signal.signalTypeName)
+  const toneClass = tone ? (SIGNAL_TONE_CLASSES[tone] ?? DEFAULT_TONE_CLASS) : DEFAULT_TONE_CLASS
+  const isCombined = signal.signalTypeName === "combined_signal" && signal.components && signal.components.length > 0
+
+  const rowContent = (
+    <>
+      {/* Slot 1: Icon */}
+      <div className={cn("flex h-5 w-5 shrink-0 items-center justify-center rounded", toneClass)}>
+        <IconComponent className="h-3 w-3" />
       </div>
 
-      {(whyNowSection || topFactorSection) && (
-        <div className="mt-3 grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
-          {whyNowSection ? (
-            <div className="rounded-md bg-background/80 p-2">
-              <p className="font-medium text-foreground">Why now</p>
-              <p className="mt-0.5 leading-relaxed">{whyNowSection}</p>
-            </div>
-          ) : null}
-          {topFactorSection ? (
-            <div className="rounded-md bg-background/80 p-2">
-              <p className="font-medium text-foreground">Top factor</p>
-              <p className="mt-0.5 leading-relaxed">{topFactorSection}</p>
-            </div>
-          ) : null}
-        </div>
-      )}
+      {/* Slot 2: Primary value + qualifier */}
+      <div className="min-w-0">
+        {isCombined ? (
+          <CombinedSignalMiniChips components={signal.components!} />
+        ) : (
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-sm font-semibold tabular-nums text-foreground">
+              {slotValue(signal.primaryValue)}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {slotValue(signal.qualifier)}
+            </span>
+          </div>
+        )}
+      </div>
 
-      {signalData.factors.length > 0 ? (
-        <ScoreBreakdown
-          className="mt-3"
-          factors={signalData.factors}
-          onFactorFeedback={signalData.onFactorFeedback}
-          initialFeedback={signalData.initialFactorFeedback}
-        />
-      ) : null}
+      {/* Slot 3: Counterparty */}
+      <div className="min-w-0">
+        <span className="block truncate text-xs text-muted-foreground">
+          {slotValue(signal.counterparty)}
+        </span>
+      </div>
+
+      {/* Slot 4: Time */}
+      <span className="shrink-0 text-[11px] text-muted-foreground/70">
+        {slotValue(signal.time)}
+      </span>
+
+      {/* Slot 5: Chevron */}
+      <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/50" />
+    </>
+  )
+
+  if (signal.id && onOpenSignalBucket) {
+    return (
+      <button
+        type="button"
+        className="group grid w-full cursor-pointer items-center gap-x-3 gap-y-1 rounded-md px-3 py-2 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        style={{ gridTemplateColumns: "20px minmax(0,1fr) minmax(0,1fr) auto 16px" }}
+        onClick={() => onOpenSignalBucket({ item, bucketKey, signalId: signal.id! })}
+      >
+        {rowContent}
+      </button>
+    )
+  }
+
+  return (
+    <div
+      className="grid w-full items-center gap-x-3 gap-y-1 rounded-md px-3 py-2"
+      style={{ gridTemplateColumns: "20px minmax(0,1fr) minmax(0,1fr) auto 16px" }}
+    >
+      {rowContent}
     </div>
   )
 }
 
-export interface ScoreWhyChipsProps {
-  item: QueueItem
-  signalData: SignalScoreData
-  onOpenSignalBucket?: (args: { item: QueueItem; bucketKey: string; signalId: string }) => void
-  className?: string
-}
+// ---------------------------------------------------------------------------
+// Legacy SignalRow (for signals without structured data)
+// ---------------------------------------------------------------------------
 
 interface SignalRowProps {
   item: QueueItem
@@ -224,36 +341,169 @@ interface SignalRowProps {
   onOpenSignalBucket?: ScoreWhyChipsProps["onOpenSignalBucket"]
 }
 
-function SignalRow({ item, bucketKey, signal, onOpenSignalBucket }: SignalRowProps) {
+function LegacySignalRow({ item, bucketKey, signal, onOpenSignalBucket }: SignalRowProps) {
+  const isClickable = !!(signal.id && onOpenSignalBucket)
   const rowContent = (
     <>
       <div className="flex items-start justify-between gap-2">
-        <p className="font-medium text-foreground">{signal.label}</p>
-        {signal.time ? <span className="shrink-0 text-[11px] text-muted-foreground/70">{signal.time}</span> : null}
-      </div>
-      {signal.description ? <p className="mt-1 leading-relaxed text-muted-foreground">{signal.description}</p> : null}
-      {(signal.source || signal.metric) && (
-        <div className="mt-1.5 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground/80">
-          {signal.source ? <span className="rounded-full bg-muted px-2 py-0.5">{signal.source}</span> : null}
-          {signal.metric ? <span className="rounded-full bg-muted px-2 py-0.5">{signal.metric}</span> : null}
+        <div className="min-w-0 flex-1">
+          <p className="font-medium text-foreground">{signal.label}</p>
+          {signal.description ? <p className="mt-1 leading-relaxed text-muted-foreground">{signal.description}</p> : null}
+          {(signal.source || signal.metric) && (
+            <div className="mt-1.5 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground/80">
+              {signal.source ? <span className="rounded-full bg-muted px-2 py-0.5">{signal.source}</span> : null}
+              {signal.metric ? <span className="rounded-full bg-muted px-2 py-0.5">{signal.metric}</span> : null}
+            </div>
+          )}
         </div>
-      )}
+        <div className="flex shrink-0 items-center gap-2">
+          {signal.time ? <span className="text-[11px] text-muted-foreground/70">{signal.time}</span> : null}
+          {isClickable && (
+            <ChevronRight className="h-3 w-3 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/50" />
+          )}
+        </div>
+      </div>
     </>
   )
 
-  if (signal.id && onOpenSignalBucket) {
+  if (isClickable) {
     return (
       <button
         type="button"
-        className="w-full rounded-md bg-background/80 p-2 text-left text-xs transition-colors hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-        onClick={() => onOpenSignalBucket({ item, bucketKey, signalId: signal.id! })}
+        className="group w-full cursor-pointer rounded-md bg-background/80 p-3 text-left text-xs transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onClick={() => onOpenSignalBucket!({ item, bucketKey, signalId: signal.id! })}
       >
         {rowContent}
       </button>
     )
   }
 
-  return <div className="rounded-md bg-background/80 p-2 text-xs">{rowContent}</div>
+  return <div className="rounded-md bg-background/80 p-3 text-xs">{rowContent}</div>
+}
+
+/**
+ * Determine whether a signal has structured slot data.
+ * If it has primaryValue, counterparty, qualifier, or components, use the structured row.
+ */
+function hasStructuredData(signal: SignalScoreExplanationSignal): boolean {
+  return Boolean(
+    signal.primaryValue ||
+    signal.qualifier ||
+    signal.counterparty ||
+    (signal.components && signal.components.length > 0),
+  )
+}
+
+// ---------------------------------------------------------------------------
+// WhyCard - Expanded panel under a pill
+// ---------------------------------------------------------------------------
+
+interface WhyCardProps {
+  bucket: SignalScoreExplanationBucket
+  signals: SignalScoreExplanationSignal[]
+  item: QueueItem
+  panelId: string
+  onOpenSignalBucket?: ScoreWhyChipsProps["onOpenSignalBucket"]
+  onBucketFeedback?: (bucketKey: string, data: FeedbackSubmitData) => void
+}
+
+function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketFeedback }: WhyCardProps) {
+  const [showAll, setShowAll] = React.useState(false)
+  const [bucketFeedback, setBucketFeedback] = React.useState<"positive" | "negative" | null>(null)
+  const totalCount = bucket.signalCount ?? signals.length
+  const visibleSignals = showAll ? signals : signals.slice(0, DEFAULT_VISIBLE_ROWS)
+  const hiddenCount = signals.length - DEFAULT_VISIBLE_ROWS
+
+  // Determine whether to use structured rows (any signal has structured data)
+  const useStructured = signals.some(hasStructuredData)
+
+  return (
+    <div
+      id={panelId}
+      className="rounded-lg rounded-t-none border border-t-0 border-border bg-muted/20 p-3"
+      role="region"
+      aria-label={`${bucket.label} details`}
+    >
+      {/* Card header */}
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+          {totalCount} signal{totalCount !== 1 ? "s" : ""} &ndash; {bucket.label}
+        </span>
+      </div>
+
+      {/* Signal rows */}
+      {visibleSignals.length > 0 ? (
+        <ul className="divide-y divide-border/30" aria-label="Matching signals">
+          {visibleSignals.map((signal, index) => (
+            <li key={signal.id ?? `${bucket.key}-signal-${index}`}>
+              {useStructured ? (
+                <StructuredSignalRow
+                  item={item}
+                  bucketKey={bucket.key}
+                  signal={signal}
+                  tone={bucket.tone}
+                  onOpenSignalBucket={onOpenSignalBucket}
+                />
+              ) : (
+                <LegacySignalRow
+                  item={item}
+                  bucketKey={bucket.key}
+                  signal={signal}
+                  onOpenSignalBucket={onOpenSignalBucket}
+                />
+              )}
+            </li>
+          ))}
+        </ul>
+      ) : bucket.evidence && bucket.evidence.length > 0 ? (
+        <ul className="mt-3 space-y-1.5" aria-label="Matching signals">
+          {bucket.evidence.map((evidence, index) => (
+            <li key={`${bucket.key}-evidence-${index}`} className="flex gap-2 text-xs text-muted-foreground">
+              <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-primary" />
+              <span className="leading-relaxed">{evidence}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {/* "Show N more" button */}
+      {!showAll && hiddenCount > 0 && (
+        <button
+          type="button"
+          onClick={() => setShowAll(true)}
+          className="mt-2 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+        >
+          <ChevronDown className="h-3 w-3" />
+          Show {hiddenCount} more
+        </button>
+      )}
+
+      {/* Bucket feedback footer */}
+      {onBucketFeedback && (
+        <div className="mt-3 border-t border-border/40 pt-3">
+          <FeedbackFooter
+            feedback={bucketFeedback}
+            onFeedbackChange={setBucketFeedback}
+            onSubmit={(data) => onBucketFeedback(bucket.key, data)}
+            negativeChips={BUCKET_NEGATIVE_CHIPS}
+            negativePrompt="Was this bucket useful?"
+            positivePrompt="Thanks! What was useful about this bucket?"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// ScoreWhyChips - Main export
+// ---------------------------------------------------------------------------
+
+export interface ScoreWhyChipsProps {
+  item: QueueItem
+  signalData: SignalScoreData
+  onOpenSignalBucket?: (args: { item: QueueItem; bucketKey: string; signalId: string }) => void
+  className?: string
 }
 
 export function ScoreWhyChips({
@@ -286,72 +536,32 @@ export function ScoreWhyChips({
         {buckets.map((bucket) => {
           const isSelected = selectedBucketKey === bucket.key
           const panelId = `${idPrefix}-panel-${makeDomId(bucket.key)}`
+          const signals = getBucketSignals(bucket)
+          const signalCount = bucket.signalCount ?? signals.length
           return (
-            <button
-              key={bucket.key}
-              type="button"
-              onClick={() => setSelectedBucketKey((prev) => (prev === bucket.key ? null : bucket.key))}
-              aria-expanded={isSelected}
-              aria-controls={panelId}
-              className={cn(
-                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                isSelected
-                  ? "border-foreground/30 bg-foreground text-background"
-                  : "border-border bg-background text-muted-foreground hover:bg-muted/60 hover:text-foreground",
-              )}
-            >
-              {bucket.label}
-              {bucket.signalCount && bucket.signalCount > 1 ? (
-                <span className={cn("rounded-full px-1.5 py-0 text-[10px]", isSelected ? "bg-background/20" : "bg-muted")}>×{bucket.signalCount}</span>
-              ) : null}
-            </button>
+            <div key={bucket.key} className="flex flex-col">
+              <WhyPill
+                bucket={bucket}
+                isSelected={isSelected}
+                signalCount={signalCount}
+                panelId={panelId}
+                onToggle={() => setSelectedBucketKey((prev) => (prev === bucket.key ? null : bucket.key))}
+                onClose={() => setSelectedBucketKey(null)}
+              />
+            </div>
           )
         })}
       </div>
 
-      {selectedBucket && (
-        <div
-          id={selectedPanelId}
-          className="mt-3 rounded-lg border border-border bg-muted/20 p-3"
-          role="region"
-          aria-label={`${selectedBucket.label} details`}
-        >
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <p className="text-sm font-semibold text-foreground">{selectedBucket.label}</p>
-              <div className="mt-1 flex flex-wrap gap-1.5 text-[11px] text-muted-foreground">
-                <span className="rounded-full bg-background px-2 py-0.5">
-                  {selectedBucket.signalCount ?? selectedBucketSignals.length} signals
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {selectedBucketSignals.length > 0 ? (
-            <ul className="mt-3 space-y-2" aria-label="Matching signals">
-              {selectedBucketSignals.map((signal, index) => (
-                <li key={signal.id ?? `${selectedBucket.key}-signal-${index}`}>
-                  <SignalRow
-                    item={item}
-                    bucketKey={selectedBucket.key}
-                    signal={signal}
-                    onOpenSignalBucket={onOpenSignalBucket}
-                  />
-                </li>
-              ))}
-            </ul>
-          ) : selectedBucket.evidence && selectedBucket.evidence.length > 0 ? (
-            <ul className="mt-3 space-y-1.5" aria-label="Matching signals">
-              {selectedBucket.evidence.map((evidence, index) => (
-                <li key={`${selectedBucket.key}-evidence-${index}`} className="flex gap-2 text-xs text-muted-foreground">
-                  <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-primary" />
-                  <span className="leading-relaxed">{evidence}</span>
-                </li>
-              ))}
-            </ul>
-          ) : null}
-
-        </div>
+      {selectedBucket && selectedPanelId && (
+        <WhyCard
+          bucket={selectedBucket}
+          signals={selectedBucketSignals}
+          item={item}
+          panelId={selectedPanelId}
+          onOpenSignalBucket={onOpenSignalBucket}
+          onBucketFeedback={signalData.onBucketFeedback}
+        />
       )}
     </div>
   )