@handled-ai/design-system 0.17.0 → 0.17.2

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

@@ -0,0 +1,359 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+import type { LucideIcon } from "lucide-react"
+import {
+  Radar,
+  Wallet,
+  Link2,
+  MessageSquare,
+  TrendingDown,
+  ArrowUpRight,
+  ArrowDownRight,
+  Clock,
+  Activity,
+  Minus,
+  ChevronDown,
+  ChevronUp,
+  Info,
+} from "lucide-react"
+import { cn } from "../lib/utils"
+import { FeedbackFooter } from "./feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData } from "./feedback-primitives"
+import type { SignalScoreUrgencyLabel } from "../prototype/prototype-config"
+import { getSignalScoreUrgencyLabel, scoreRangeForUrgency, SIGNAL_TONE_CLASSES } from "./score-why-chips"
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * A single contributing factor in the priority popover.
+ */
+export interface PriorityFactor {
+  key: string
+  label: string
+  /** Lucide icon name (e.g. "radar", "wallet", "link-2", "message-square"). */
+  icon: string
+  /** Drives icon background tint. */
+  tone: "alert" | "warn" | "info"
+  /** Explicit semantic label - NOT inferred from score+weight. */
+  direction: "raises" | "lowers" | "neutral"
+  /** 0-100 */
+  score: number
+  /** Evidence text (e.g. "$3.4M moved in 8h - current treasury balance $0.00"). */
+  rationale: string
+}
+
+export interface SignalPriorityPopoverProps {
+  score: number
+  urgencyLabel?: SignalScoreUrgencyLabel
+  /** Synthesis sentence displayed in the popover head. */
+  urgencyExplanation?: string
+  factors: PriorityFactor[]
+  /** e.g. "Updated 4m ago - model v3.2" */
+  metaText?: string
+  /** Negative feedback issue tree. */
+  feedbackChips?: FeedbackChipTree[]
+  onFeedbackSubmit?: (data: FeedbackSubmitData) => void
+  className?: string
+}
+
+// ---------------------------------------------------------------------------
+// Static class maps (required for Tailwind v4 source scanning)
+// ---------------------------------------------------------------------------
+
+const URGENCY_TRIGGER_DEFAULT: Record<SignalScoreUrgencyLabel, string> = {
+  Urgent: "border-red-200 bg-red-50 text-red-700",
+  High: "border-orange-200 bg-orange-50 text-orange-700",
+  Medium: "border-amber-200 bg-amber-50 text-amber-700",
+  Low: "border-blue-200 bg-blue-50 text-blue-700",
+}
+
+const URGENCY_TRIGGER_HOVER: Record<SignalScoreUrgencyLabel, string> = {
+  Urgent: "hover:bg-red-100",
+  High: "hover:bg-orange-100",
+  Medium: "hover:bg-amber-100",
+  Low: "hover:bg-blue-100",
+}
+
+const URGENCY_TRIGGER_OPEN: Record<SignalScoreUrgencyLabel, string> = {
+  Urgent: "bg-red-100",
+  High: "bg-orange-100",
+  Medium: "bg-amber-100",
+  Low: "bg-blue-100",
+}
+
+/** Re-use shared tone classes from score-why-chips. */
+const TONE_ICON_CLASSES: Record<PriorityFactor["tone"], string> = SIGNAL_TONE_CLASSES as Record<PriorityFactor["tone"], string>
+
+const DIRECTION_CLASSES: Record<PriorityFactor["direction"], string> = {
+  raises: "text-red-600",
+  lowers: "text-emerald-600",
+  neutral: "text-muted-foreground",
+}
+
+// ---------------------------------------------------------------------------
+// Icon lookup
+// ---------------------------------------------------------------------------
+
+const FACTOR_ICONS: Record<string, LucideIcon> = {
+  radar: Radar,
+  wallet: Wallet,
+  "link-2": Link2,
+  "message-square": MessageSquare,
+  "trending-down": TrendingDown,
+  "arrow-up-right": ArrowUpRight,
+  clock: Clock,
+  activity: Activity,
+}
+
+// ---------------------------------------------------------------------------
+// Urgency dot color (static map)
+// ---------------------------------------------------------------------------
+
+const URGENCY_DOT_CLASSES: Record<SignalScoreUrgencyLabel, string> = {
+  Urgent: "bg-red-500",
+  High: "bg-orange-500",
+  Medium: "bg-amber-500",
+  Low: "bg-blue-500",
+}
+
+// ---------------------------------------------------------------------------
+// Default feedback chips
+// ---------------------------------------------------------------------------
+
+const DEFAULT_PRIORITY_FEEDBACK_CHIPS: FeedbackChipTree[] = [
+  { label: "Wrong factor weighting" },
+  { label: "Missing context" },
+  { label: "Inaccurate data" },
+  { label: "Stale" },
+  { label: "Other" },
+]
+
+// ---------------------------------------------------------------------------
+// Direction icon component
+// ---------------------------------------------------------------------------
+
+function DirectionIcon({ direction }: { direction: PriorityFactor["direction"] }) {
+  const cls = "h-2.5 w-2.5"
+  switch (direction) {
+    case "raises":
+      return <ArrowUpRight className={cls} />
+    case "lowers":
+      return <ArrowDownRight className={cls} />
+    case "neutral":
+      return <Minus className={cls} />
+  }
+}
+
+// ---------------------------------------------------------------------------
+// PriorityFactorRow
+// ---------------------------------------------------------------------------
+
+function PriorityFactorRow({ factor }: { factor: PriorityFactor }) {
+  const IconComponent = FACTOR_ICONS[factor.icon] ?? Activity
+  const toneClasses = TONE_ICON_CLASSES[factor.tone]
+  const directionClasses = DIRECTION_CLASSES[factor.direction]
+  const directionLabel =
+    factor.direction === "raises"
+      ? "Raises"
+      : factor.direction === "lowers"
+        ? "Lowers"
+        : "Neutral"
+
+  return (
+    <div
+      className="grid grid-cols-[20px_1fr_auto] gap-x-3 gap-y-1 px-4 py-3"
+      data-testid={`factor-row-${factor.key}`}
+    >
+      {/* Icon */}
+      <div
+        className={cn(
+          "flex h-5 w-5 items-center justify-center rounded",
+          toneClasses,
+        )}
+      >
+        <IconComponent className="h-3 w-3" />
+      </div>
+
+      {/* Label + direction tag */}
+      <div className="flex items-center gap-2">
+        <span className="text-[13px] font-semibold text-foreground">
+          {factor.label}
+        </span>
+        <span
+          className={cn(
+            "inline-flex items-center gap-0.5 text-[10px] font-medium",
+            directionClasses,
+          )}
+        >
+          <DirectionIcon direction={factor.direction} />
+          {directionLabel}
+        </span>
+      </div>
+
+      {/* Score number */}
+      <div className="flex items-center text-right">
+        <span className="text-sm font-bold tabular-nums">{factor.score}</span>
+        <span className="text-xs font-normal text-muted-foreground">/100</span>
+      </div>
+
+      {/* empty grid cell under icon column */}
+      <div />
+
+      {/* Rationale */}
+      <p className="text-xs leading-relaxed text-muted-foreground">
+        {factor.rationale}
+      </p>
+
+      {/* empty grid cell under score column */}
+      <div />
+
+      {/* empty grid cell under icon column */}
+      <div />
+
+      {/* Score track */}
+      <div className="mt-1 h-0.5 rounded-full bg-muted">
+        <div
+          className="h-full rounded-full bg-foreground/20"
+          style={{ width: `${Math.min(100, Math.max(0, factor.score))}%` }}
+        />
+      </div>
+
+      {/* empty grid cell under score column */}
+      <div />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// SignalPriorityPopover
+// ---------------------------------------------------------------------------
+
+export function SignalPriorityPopover({
+  score,
+  urgencyLabel: providedLabel,
+  urgencyExplanation,
+  factors,
+  metaText,
+  feedbackChips,
+  onFeedbackSubmit,
+  className,
+}: SignalPriorityPopoverProps) {
+  const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
+  const scoreRange = scoreRangeForUrgency(urgencyLabel)
+
+  const [open, setOpen] = React.useState(false)
+  const [feedback, setFeedback] = React.useState<"positive" | "negative" | null>(null)
+
+  const triggerDefault = URGENCY_TRIGGER_DEFAULT[urgencyLabel]
+  const triggerHover = URGENCY_TRIGGER_HOVER[urgencyLabel]
+  const triggerOpen = URGENCY_TRIGGER_OPEN[urgencyLabel]
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          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",
+            triggerDefault,
+            triggerHover,
+            open && triggerOpen,
+            open && "outline-2 outline-foreground outline-offset-2",
+            className,
+          )}
+          data-testid="priority-popover-trigger"
+        >
+          {urgencyLabel} Priority
+          {open ? (
+            <ChevronUp className="h-3 w-3" />
+          ) : (
+            <ChevronDown className="h-3 w-3" />
+          )}
+        </button>
+      </PopoverPrimitive.Trigger>
+
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="bottom"
+          align="start"
+          sideOffset={8}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          className="z-50 w-[420px] rounded-lg border border-border bg-background shadow-lg p-0"
+          data-testid="priority-popover-content"
+        >
+          {/* Head section */}
+          <div className="p-4 pb-3">
+            <div className="flex items-start justify-between gap-3">
+              <p className="text-sm font-semibold text-foreground">
+                Why this is {urgencyLabel.toLowerCase()} priority
+              </p>
+              <span className="text-2xl font-bold tabular-nums text-foreground">
+                {score}
+                <span className="text-sm font-normal text-muted-foreground">/100</span>
+              </span>
+            </div>
+
+            {/* Band indicator */}
+            <div className="mt-1 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+              <span
+                className={cn(
+                  "inline-block h-2 w-2 rounded-full",
+                  URGENCY_DOT_CLASSES[urgencyLabel],
+                )}
+              />
+              {urgencyLabel} range: {scoreRange}
+            </div>
+
+            {/* Synthesis sentence */}
+            {urgencyExplanation && (
+              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                {urgencyExplanation}
+              </p>
+            )}
+          </div>
+
+          {/* Section label */}
+          {factors.length > 0 && (
+            <>
+              <div className="flex items-center justify-between border-t border-border px-4 py-2">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                  Contributing factors
+                </span>
+                <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                  <Info className="h-3 w-3" />
+                  Score = weighted sum
+                </span>
+              </div>
+
+              {/* Factor rows */}
+              <div className="divide-y divide-border/40">
+                {factors.map((factor) => (
+                  <PriorityFactorRow key={factor.key} factor={factor} />
+                ))}
+              </div>
+            </>
+          )}
+
+          {/* Feedback footer */}
+          {onFeedbackSubmit && (
+            <div className="border-t border-border">
+              <FeedbackFooter
+                feedback={feedback}
+                onFeedbackChange={setFeedback}
+                onSubmit={onFeedbackSubmit}
+                metaText={metaText}
+                negativeChips={feedbackChips ?? DEFAULT_PRIORITY_FEEDBACK_CHIPS}
+                positivePrompt="Thanks. Anything to keep about this score?"
+                className="px-4 py-3"
+              />
+            </div>
+          )}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}

package/src/components/user-display.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
+import { cn } from "../lib/utils"
+import { displayName, getInitials, type ProfileLike } from "../lib/user-display"
+
+export interface UserPillProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  profile?: ProfileLike | null
+  name?: string | null
+  email?: string | null
+  avatarUrl?: string | null
+  subtitle?: React.ReactNode
+  variant?: "default" | "compact" | "large"
+}
+
+function UserPill({
+  profile,
+  name,
+  email,
+  avatarUrl,
+  subtitle,
+  variant = "default",
+  className,
+  ...props
+}: UserPillProps) {
+  const userProfile: ProfileLike = {
+    ...profile,
+    name: name ?? profile?.name,
+    email: email ?? profile?.email,
+    avatar_url: avatarUrl ?? profile?.avatar_url,
+  }
+  const resolvedName = displayName(userProfile)
+  const resolvedAvatarUrl = avatarUrl ?? profile?.avatar_url
+  const avatarSize = variant === "large" ? "default" : "sm"
+
+  return (
+    <div
+      data-slot="user-pill"
+      data-variant={variant}
+      className={cn(
+        "inline-flex max-w-full items-center gap-2 rounded-full border border-border bg-background text-sm text-foreground shadow-xs",
+        variant === "compact" && "px-2 py-0.5",
+        variant === "default" && "px-2.5 py-1",
+        variant === "large" && "px-3 py-1.5",
+        className
+      )}
+      title={resolvedName}
+      {...props}
+    >
+      <Avatar size={avatarSize} aria-hidden="true">
+        {resolvedAvatarUrl ? <AvatarImage src={resolvedAvatarUrl} alt="" /> : null}
+        <AvatarFallback>{getInitials(userProfile)}</AvatarFallback>
+      </Avatar>
+      <span className="flex min-w-0 flex-col leading-tight">
+        <span className="min-w-0 truncate font-medium">{resolvedName}</span>
+        {subtitle ? <span className="min-w-0 truncate text-xs text-muted-foreground">{subtitle}</span> : null}
+      </span>
+    </div>
+  )
+}
+
+export interface ActorBylineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  actor?: ProfileLike | null
+  verb?: React.ReactNode
+  subject?: React.ReactNode
+  timestamp?: string | Date | null
+  className?: string
+}
+
+function ActorByline({
+  actor,
+  verb,
+  subject,
+  timestamp,
+  className,
+  ...props
+}: ActorBylineProps) {
+  const actorName = displayName(actor)
+  const renderedTimestamp = timestamp instanceof Date ? timestamp.toISOString() : timestamp
+  return (
+    <div
+      data-slot="actor-byline"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    >
+      <span className="text-foreground">{actorName}</span>
+      {verb ? <> {verb}</> : null}
+      {subject ? <> {subject}</> : null}
+      {renderedTimestamp ? <> <span aria-hidden="true">·</span> {renderedTimestamp}</> : null}
+    </div>
+  )
+}
+
+export { ActorByline, UserPill }

package/src/components/user-pill.tsx

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

package/src/index.ts

@@ -6,6 +6,7 @@
 // Utilities
 export { cn } from "./lib/utils"
 export { BRAND_ICONS, BRAND_GRAPHICS } from "./lib/icons"
+export { displayName, getInitials, shortName, type ProfileLike } from "./lib/user-display"
 
 // Hooks
 export { useIsMobile } from "./hooks/use-mobile"
@@ -36,6 +37,10 @@ export * from "./components/dialog"
 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 { SignalPriorityPopover } from "./components/signal-priority-popover"
+export type { SignalPriorityPopoverProps, PriorityFactor } from "./components/signal-priority-popover"
 export * from "./components/filter-chip"
 export * from "./components/inbox-row"
 export * from "./components/inbox-toolbar"
@@ -92,6 +97,7 @@ export * from "./components/tabs"
 export * from "./components/textarea"
 export * from "./components/timeline-activity"
 export * from "./components/tooltip"
+export * from "./components/user-display"
 export * from "./components/variable-autocomplete"
 export * from "./components/view-mode-toggle"
 export * from "./components/virtualized-data-table"

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

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+
+import { displayName, getInitials, shortName } from "../user-display"
+
+describe("displayName", () => {
+  it("prefers first and last name", () => {
+    expect(
+      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")
+    expect(displayName({ first_name: "", last_name: "", name: "", email: "sarah@example.com" })).toBe("sarah")
+    expect(displayName({})).toBe("Unknown user")
+    expect(displayName()).toBe("Unknown user")
+  })
+})
+
+describe("getInitials", () => {
+  it("uses first and last initials", () => {
+    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")
+    expect(getInitials({ first_name: null, last_name: null, name: "Sarah", email: "sarah@example.com" })).toBe("SA")
+    expect(getInitials({ first_name: null, last_name: null, name: null, email: "zz@example.com" })).toBe("ZZ")
+    expect(getInitials({})).toBe("?")
+    expect(getInitials()).toBe("?")
+  })
+})
+
+describe("shortName", () => {
+  it("returns compact first name and last initial", () => {
+    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")
+  })
+})

package/src/lib/user-display.ts

@@ -0,0 +1,88 @@
+/**
+ * Unified display name and initials utilities for user profiles.
+ *
+ * Keep this behavior aligned with handled-platform's display-name utility so
+ * user labels and avatar fallbacks render consistently across products.
+ */
+export interface ProfileLike {
+  first_name?: string | null
+  last_name?: string | null
+  name?: string | null
+  email?: string | null
+  avatar_url?: string | null
+  role?: string | null
+}
+
+function clean(value: string | null | undefined): string | undefined {
+  const trimmed = value?.trim()
+  return trimmed ? trimmed : undefined
+}
+
+function emailLocalPart(email: string | null | undefined): string | undefined {
+  const normalizedEmail = clean(email)
+  return normalizedEmail?.split("@")[0] || undefined
+}
+
+/**
+ * Returns the best display name for a profile.
+ * Priority: first_name + last_name > first_name > name > email local-part > Unknown user.
+ */
+export function displayName(profile?: ProfileLike | null): string {
+  const firstName = clean(profile?.first_name)
+  const lastName = clean(profile?.last_name)
+
+  if (firstName && lastName) {
+    return `${firstName} ${lastName}`
+  }
+  if (firstName) return firstName
+
+  const fullName = clean(profile?.name)
+  if (fullName) return fullName
+
+  return emailLocalPart(profile?.email) ?? "Unknown user"
+}
+
+/**
+ * Returns up to 2-character initials for avatar display.
+ * Priority: first/last initials > split name > first two email local chars > ?.
+ */
+export function getInitials(profile?: ProfileLike | null): string {
+  const firstName = clean(profile?.first_name)
+  const lastName = clean(profile?.last_name)
+
+  if (firstName && lastName) {
+    return (firstName[0] + lastName[0]).toUpperCase()
+  }
+
+  const fullName = clean(profile?.name) ?? firstName
+  if (fullName) {
+    const parts = fullName.split(/\s+/).filter(Boolean)
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[1][0]).toUpperCase()
+    }
+    if (parts.length === 1 && parts[0].length > 0) {
+      return parts[0].slice(0, 2).toUpperCase()
+    }
+  }
+
+  const localPart = emailLocalPart(profile?.email)
+  if (localPart) {
+    return localPart.slice(0, 2).toUpperCase()
+  }
+
+  return "?"
+}
+
+/**
+ * Returns "First L." format for compact display.
+ * Falls back to displayName() if last name is unavailable.
+ */
+export function shortName(profile?: ProfileLike | null): string {
+  const firstName = clean(profile?.first_name)
+  const lastName = clean(profile?.last_name)
+
+  if (firstName && lastName) {
+    return `${firstName} ${lastName[0]}.`
+  }
+  return displayName(profile)
+}