@handled-ai/design-system 0.17.2 → 0.18.2

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

@@ -17,10 +17,14 @@ import {
   ChevronDown,
   ChevronUp,
   Info,
+  ThumbsUp,
+  ThumbsDown,
+  Check,
+  Pencil,
 } from "lucide-react"
 import { cn } from "../lib/utils"
 import { FeedbackFooter } from "./feedback-primitives"
-import type { FeedbackChipTree, FeedbackSubmitData } from "./feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import type { SignalScoreUrgencyLabel } from "../prototype/prototype-config"
 import { getSignalScoreUrgencyLabel, scoreRangeForUrgency, SIGNAL_TONE_CLASSES } from "./score-why-chips"
 
@@ -58,6 +62,12 @@ export interface SignalPriorityPopoverProps {
   feedbackChips?: FeedbackChipTree[]
   onFeedbackSubmit?: (data: FeedbackSubmitData) => void
   className?: string
+  /** Persisted factor-level feedback (keyed by factor key). */
+  initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string; ownershipLabel?: string }>
+  /** Callback when user submits factor-level feedback. */
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+  /** Persisted priority-level feedback for the footer. */
+  initialPriorityFeedback?: PersistedFeedbackData | null
 }
 
 // ---------------------------------------------------------------------------
@@ -152,7 +162,13 @@ function DirectionIcon({ direction }: { direction: PriorityFactor["direction"] }
 // PriorityFactorRow
 // ---------------------------------------------------------------------------
 
-function PriorityFactorRow({ factor }: { factor: PriorityFactor }) {
+interface PriorityFactorRowProps {
+  factor: PriorityFactor
+  initialFeedback?: { type: "up" | "down"; detail: string; ownershipLabel?: string }
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+}
+
+function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: PriorityFactorRowProps) {
   const IconComponent = FACTOR_ICONS[factor.icon] ?? Activity
   const toneClasses = TONE_ICON_CLASSES[factor.tone]
   const directionClasses = DIRECTION_CLASSES[factor.direction]
@@ -163,6 +179,50 @@ function PriorityFactorRow({ factor }: { factor: PriorityFactor }) {
         ? "Lowers"
         : "Neutral"
 
+  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(
+    initialFeedback?.type ?? null,
+  )
+  const [showInput, setShowInput] = React.useState(false)
+  const [detailText, setDetailText] = React.useState(initialFeedback?.detail ?? "")
+  const [saved, setSaved] = React.useState(!!initialFeedback)
+  const [savedDetail, setSavedDetail] = React.useState(initialFeedback?.detail ?? "")
+  const ownershipLabel = initialFeedback?.ownershipLabel ?? "Your feedback"
+
+  // Sync with initialFeedback prop changes
+  React.useEffect(() => {
+    if (initialFeedback) {
+      setThumbState(initialFeedback.type)
+      setSaved(true)
+      setSavedDetail(initialFeedback.detail)
+    }
+  }, [initialFeedback])
+
+  const handleThumbClick = React.useCallback(
+    (type: "up" | "down") => {
+      if (thumbState === type) {
+        // Toggle off
+        setThumbState(null)
+        setShowInput(false)
+        setSaved(false)
+        onFactorFeedback?.(factor.key, null)
+      } else {
+        setThumbState(type)
+        setShowInput(true)
+        setSaved(false)
+      }
+    },
+    [thumbState, factor.key, onFactorFeedback],
+  )
+
+  const handleSubmitDetail = React.useCallback(() => {
+    if (!thumbState) return
+    const text = detailText.trim()
+    onFactorFeedback?.(factor.key, thumbState, text)
+    setSaved(true)
+    setSavedDetail(text)
+    setShowInput(false)
+  }, [thumbState, detailText, factor.key, onFactorFeedback])
+
   return (
     <div
       className="grid grid-cols-[20px_1fr_auto] gap-x-3 gap-y-1 px-4 py-3"
@@ -224,6 +284,124 @@ function PriorityFactorRow({ factor }: { factor: PriorityFactor }) {
 
       {/* empty grid cell under score column */}
       <div />
+
+      {/* Factor-level feedback row (spans icon + content columns) */}
+      {onFactorFeedback && (
+        <>
+          <div />
+          <div className="col-span-2 mt-1">
+            {saved && !showInput ? (
+              /* Persisted / saved indicator */
+              <button
+                type="button"
+                onClick={() => {
+                  setDetailText(savedDetail)
+                  setShowInput(true)
+                  setSaved(false)
+                }}
+                className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+                data-testid={`factor-feedback-persisted-${factor.key}`}
+              >
+                <span className="font-medium">{ownershipLabel}:</span>
+                {thumbState === "up" ? (
+                  <ThumbsUp className="h-[10px] w-[10px]" />
+                ) : (
+                  <ThumbsDown className="h-[10px] w-[10px]" />
+                )}
+                {savedDetail && (
+                  <span className="max-w-[180px] truncate text-muted-foreground/70">
+                    {savedDetail}
+                  </span>
+                )}
+                <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
+              </button>
+            ) : (
+              <div className="flex items-center gap-1.5">
+                {/* Inline thumb buttons */}
+                <button
+                  type="button"
+                  onClick={() => handleThumbClick("up")}
+                  className={cn(
+                    "p-1 rounded transition-colors",
+                    thumbState === "up"
+                      ? "text-foreground bg-muted"
+                      : "text-muted-foreground/40 hover:text-foreground hover:bg-muted/50",
+                  )}
+                  title="This factor is accurate"
+                  data-testid={`factor-thumb-up-${factor.key}`}
+                >
+                  <ThumbsUp className="h-[10px] w-[10px]" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleThumbClick("down")}
+                  className={cn(
+                    "p-1 rounded transition-colors",
+                    thumbState === "down"
+                      ? "text-red-600 bg-red-50"
+                      : "text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50",
+                  )}
+                  title="Report issue with this factor"
+                  data-testid={`factor-thumb-down-${factor.key}`}
+                >
+                  <ThumbsDown className="h-[10px] w-[10px]" />
+                </button>
+
+                {/* Transient "Saved" pill */}
+                {saved && (
+                  <span
+                    className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
+                    role="status"
+                    data-testid={`factor-saved-${factor.key}`}
+                  >
+                    <Check className="h-[10px] w-[10px]" />
+                    Saved
+                  </span>
+                )}
+              </div>
+            )}
+
+            {/* Inline detail input */}
+            {showInput && thumbState && (
+              <div className="mt-1.5">
+                <input
+                  type="text"
+                  value={detailText}
+                  onChange={(e) => setDetailText(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleSubmitDetail()
+                    if (e.key === "Escape") setShowInput(false)
+                  }}
+                  placeholder={
+                    thumbState === "up"
+                      ? "What\u2019s accurate? (optional)"
+                      : "What\u2019s wrong? (optional)"
+                  }
+                  className="w-full h-6 rounded border border-border bg-background px-2 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
+                  data-testid={`factor-detail-input-${factor.key}`}
+                />
+                <div className="mt-1 flex items-center gap-1.5">
+                  <button
+                    type="button"
+                    onClick={handleSubmitDetail}
+                    className="bg-foreground text-background rounded px-2 py-0.5 text-[10px] font-semibold"
+                    data-testid={`factor-submit-${factor.key}`}
+                  >
+                    Submit
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowInput(false)}
+                    className="border border-border rounded px-2 py-0.5 text-[10px] font-medium"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </>
+      )}
     </div>
   )
 }
@@ -241,6 +419,9 @@ export function SignalPriorityPopover({
   feedbackChips,
   onFeedbackSubmit,
   className,
+  initialFactorFeedback,
+  onFactorFeedback,
+  initialPriorityFeedback,
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
   const scoreRange = scoreRangeForUrgency(urgencyLabel)
@@ -252,6 +433,9 @@ export function SignalPriorityPopover({
   const triggerHover = URGENCY_TRIGGER_HOVER[urgencyLabel]
   const triggerOpen = URGENCY_TRIGGER_OPEN[urgencyLabel]
 
+  // Derive a stable feedbackKey for the footer from score + urgencyLabel
+  const footerFeedbackKey = `priority-${score}-${urgencyLabel}`
+
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
       <PopoverPrimitive.Trigger asChild>
@@ -332,7 +516,12 @@ export function SignalPriorityPopover({
               {/* Factor rows */}
               <div className="divide-y divide-border/40">
                 {factors.map((factor) => (
-                  <PriorityFactorRow key={factor.key} factor={factor} />
+                  <PriorityFactorRow
+                    key={factor.key}
+                    factor={factor}
+                    initialFeedback={initialFactorFeedback?.[factor.key]}
+                    onFactorFeedback={onFactorFeedback}
+                  />
                 ))}
               </div>
             </>
@@ -349,6 +538,8 @@ export function SignalPriorityPopover({
                 negativeChips={feedbackChips ?? DEFAULT_PRIORITY_FEEDBACK_CHIPS}
                 positivePrompt="Thanks. Anything to keep about this score?"
                 className="px-4 py-3"
+                initialFeedback={initialPriorityFeedback}
+                feedbackKey={footerFeedbackKey}
               />
             </div>
           )}

package/src/index.ts

@@ -38,7 +38,7 @@ export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
 export * from "./components/entity-panel"
 export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions } from "./components/feedback-primitives"
-export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData } from "./components/feedback-primitives"
+export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"
 export type { SignalPriorityPopoverProps, PriorityFactor } from "./components/signal-priority-popover"
 export * from "./components/filter-chip"

package/src/lib/__tests__/user-display.test.ts

@@ -3,41 +3,83 @@ import { describe, expect, it } from "vitest"
 import { displayName, getInitials, shortName } from "../user-display"
 
 describe("displayName", () => {
-  it("prefers first and last name", () => {
+  it("returns first_name + last_name when both are present", () => {
     expect(
-      displayName({ first_name: "Sarah", last_name: "Mitchell", name: "S Mitchell", email: "sarah@example.com" }),
+      displayName({ first_name: "Sarah", last_name: "Mitchell", name: "S Mitchell", email: "sarah@example.com" })
     ).toBe("Sarah Mitchell")
   })
 
-  it("falls back through first name, name, email local part, then unknown", () => {
-    expect(displayName({ first_name: "Sarah", last_name: null, name: null, email: "sarah@example.com" })).toBe("Sarah")
-    expect(displayName({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe("Sarah Mitchell")
+  it("returns first_name alone when last_name is missing", () => {
+    expect(displayName({ first_name: "Sarah", last_name: null, name: null, email: "sarah@example.com" })).toBe(
+      "Sarah"
+    )
+  })
+
+  it("falls back to name when first_name is missing", () => {
+    expect(displayName({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe(
+      "Sarah Mitchell"
+    )
+  })
+
+  it("falls back to email local-part when name fields are missing or empty", () => {
     expect(displayName({ first_name: "", last_name: "", name: "", email: "sarah@example.com" })).toBe("sarah")
+  })
+
+  it("falls back to Unknown user when profile fields are absent", () => {
     expect(displayName({})).toBe("Unknown user")
     expect(displayName()).toBe("Unknown user")
   })
+
+  it("ignores last_name if first_name is missing", () => {
+    expect(displayName({ first_name: null, last_name: "Mitchell", name: "Old Name", email: "sarah@example.com" })).toBe(
+      "Old Name"
+    )
+  })
 })
 
 describe("getInitials", () => {
-  it("uses first and last initials", () => {
+  it("returns uppercased initials from first_name and last_name", () => {
     expect(getInitials({ first_name: "joe", last_name: "kim", email: "joe@example.com" })).toBe("JK")
   })
 
-  it("falls back through name, email local part, then question mark", () => {
-    expect(getInitials({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe("SM")
+  it("splits name into two parts for initials when first/last are not set", () => {
+    expect(getInitials({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe(
+      "SM"
+    )
+  })
+
+  it("uses first two characters of a single-word name", () => {
     expect(getInitials({ first_name: null, last_name: null, name: "Sarah", email: "sarah@example.com" })).toBe("SA")
+  })
+
+  it("falls back to first two email local characters when no name fields are set", () => {
     expect(getInitials({ first_name: null, last_name: null, name: null, email: "zz@example.com" })).toBe("ZZ")
+  })
+
+  it("returns question mark when no initials can be derived", () => {
     expect(getInitials({})).toBe("?")
     expect(getInitials()).toBe("?")
   })
+
+  it("handles multi-word name taking the first two initials", () => {
+    expect(getInitials({ name: "Mary Jane Watson", email: "mj@example.com" })).toBe("MJ")
+  })
 })
 
 describe("shortName", () => {
-  it("returns compact first name and last initial", () => {
+  it("returns 'First L.' when first and last are present", () => {
     expect(shortName({ first_name: "Sarah", last_name: "Mitchell", email: "sarah@example.com" })).toBe("Sarah M.")
   })
 
-  it("falls back to displayName when last name is unavailable", () => {
-    expect(shortName({ name: "Sarah Mitchell", email: "sarah@example.com" })).toBe("Sarah Mitchell")
+  it("falls back to displayName when last_name is unavailable", () => {
+    expect(shortName({ first_name: "Sarah", last_name: null, name: null, email: "sarah@example.com" })).toBe("Sarah")
+  })
+
+  it("falls back to email local-part when all names are missing", () => {
+    expect(shortName({ first_name: null, last_name: null, name: null, email: "sarah@example.com" })).toBe("sarah")
+  })
+
+  it("falls back to Unknown user when no profile fields are present", () => {
+    expect(shortName({})).toBe("Unknown user")
   })
 })

package/src/prototype/prototype-config.ts

@@ -16,7 +16,7 @@ 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"
+import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
 
 // ---------------------------------------------------------------------------
 // Shared
@@ -57,6 +57,10 @@ export interface SignalScoreExplanationSignal {
   counterparty?: string
   /** Component breakdown for combined signals. */
   components?: Array<{ type: string; count: number }>
+  /** Current balance value (e.g., "$3.0M") for balance context strip. */
+  currentBalance?: string
+  /** Additional balance context text (e.g., "down from $23M"). */
+  balanceContext?: string
 }
 
 export interface SignalScoreExplanationBucket {
@@ -97,6 +101,12 @@ 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 }>
+  /** Factor-level feedback for the priority popover rows (keyed by factor key). */
+  initialFactorPopoverFeedback?: Record<string, { type: "up" | "down"; detail: string; ownershipLabel?: string }>
+  /** Persisted bucket-level feedback, keyed by bucket key. */
+  initialBucketFeedback?: Record<string, PersistedFeedbackData>
+  /** Persisted priority-level feedback for the popover footer. */
+  initialPriorityFeedback?: PersistedFeedbackData | null
   /** Priority factors for the popover breakdown. */
   priorityFactors?: PriorityFactor[]
   /** Negative feedback chip tree for the priority popover. */

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

@@ -272,6 +272,9 @@ export function DetailView({
               metaText={undefined}
               feedbackChips={signalData.priorityFeedbackChips}
               onFeedbackSubmit={signalData.onPriorityFeedback}
+              initialFactorFeedback={signalData.initialFactorPopoverFeedback}
+              onFactorFeedback={signalData.onFactorFeedback}
+              initialPriorityFeedback={signalData.initialPriorityFeedback}
             />
             {signalData.timeChipLabel && (
               <Badge variant="outline" title={signalData.timeChipDetail ?? undefined}>