@handled-ai/design-system 0.18.2 → 0.18.3

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

@@ -17,14 +17,10 @@ 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, PersistedFeedbackData } 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"
 
@@ -62,12 +58,6 @@ 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
 }
 
 // ---------------------------------------------------------------------------
@@ -162,13 +152,7 @@ function DirectionIcon({ direction }: { direction: PriorityFactor["direction"] }
 // PriorityFactorRow
 // ---------------------------------------------------------------------------
 
-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) {
+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]
@@ -179,50 +163,6 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
         ? "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"
@@ -284,124 +224,6 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
 
       {/* 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>
   )
 }
@@ -419,9 +241,6 @@ export function SignalPriorityPopover({
   feedbackChips,
   onFeedbackSubmit,
   className,
-  initialFactorFeedback,
-  onFactorFeedback,
-  initialPriorityFeedback,
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
   const scoreRange = scoreRangeForUrgency(urgencyLabel)
@@ -433,9 +252,6 @@ 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>
@@ -516,12 +332,7 @@ export function SignalPriorityPopover({
               {/* Factor rows */}
               <div className="divide-y divide-border/40">
                 {factors.map((factor) => (
-                  <PriorityFactorRow
-                    key={factor.key}
-                    factor={factor}
-                    initialFeedback={initialFactorFeedback?.[factor.key]}
-                    onFactorFeedback={onFactorFeedback}
-                  />
+                  <PriorityFactorRow key={factor.key} factor={factor} />
                 ))}
               </div>
             </>
@@ -538,8 +349,6 @@ 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/components/timeline-activity.tsx

@@ -4,6 +4,24 @@ import * as React from "react"
 import { cn } from "../lib/utils"
 import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
 
+export type TimelineEventTone =
+  | "red"
+  | "amber"
+  | "emerald"
+  | "violet"
+  | "blue"
+  | "slate"
+  | "salesforce"
+  | "gmail"
+
+export interface TimelineEventActor {
+  kind: "user" | "integration" | "system"
+  name?: string
+  initials?: string
+  avatarUrl?: string
+  verb?: string
+}
+
 export interface TimelineEvent {
   id: string
   icon: React.ReactNode
@@ -28,8 +46,57 @@ export interface TimelineEvent {
   defaultExpanded?: boolean
   isInteractive?: boolean
   onSourceClick?: () => void
+  tone?: TimelineEventTone
+  actor?: TimelineEventActor
+  isSystemNoise?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Tone class map — every class is a complete static string literal so
+// Tailwind's JIT scanner can detect them. NO interpolation.
+// ---------------------------------------------------------------------------
+
+export const TONE_CLASSES: Record<
+  TimelineEventTone,
+  { dot: string; icon: string }
+> = {
+  red: {
+    dot: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900/40",
+    icon: "text-red-600 dark:text-red-300",
+  },
+  amber: {
+    dot: "bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-900/40",
+    icon: "text-amber-600 dark:text-amber-300",
+  },
+  emerald: {
+    dot: "bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-900/40",
+    icon: "text-emerald-600 dark:text-emerald-300",
+  },
+  violet: {
+    dot: "bg-violet-50 border-violet-200 dark:bg-violet-950/30 dark:border-violet-900/40",
+    icon: "text-violet-600 dark:text-violet-300",
+  },
+  blue: {
+    dot: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900/40",
+    icon: "text-blue-600 dark:text-blue-300",
+  },
+  slate: {
+    dot: "bg-slate-100 border-slate-200 dark:bg-slate-800/50 dark:border-slate-700",
+    icon: "text-slate-500 dark:text-slate-300",
+  },
+  salesforce: {
+    dot: "bg-white border-[#00A1E0]/25 dark:bg-background dark:border-[#00A1E0]/25",
+    icon: "text-[#00A1E0]",
+  },
+  gmail: {
+    dot: "bg-white border-red-200 dark:bg-background dark:border-red-900/40",
+    icon: "text-red-500 dark:text-red-300",
+  },
 }
 
+const NEUTRAL_DOT_CLASSES = "border-border/60 bg-background"
+const NEUTRAL_ICON_CLASSES = "text-muted-foreground"
+
 export interface TimelineActivityProps {
   events: TimelineEvent[]
   className?: string
@@ -49,12 +116,54 @@ export function TimelineActivity({ events, className }: TimelineActivityProps) {
   )
 }
 
+function ActorByline({ actor, time }: { actor: TimelineEventActor; time: string }) {
+  if (actor.kind === "system") return null
+
+  if (actor.kind === "integration") {
+    return (
+      <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="actor-byline">
+        <span>Integration</span>
+        <span className="text-muted-foreground/40">&middot;</span>
+        <span>{time}</span>
+      </div>
+    )
+  }
+
+  // actor.kind === "user"
+  const verb = actor.verb ?? "performed this action"
+  const displayInitials = actor.initials ?? (actor.name ? actor.name.charAt(0).toUpperCase() : "?")
+
+  return (
+    <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground" data-testid="actor-byline">
+      {actor.avatarUrl ? (
+        <img
+          src={actor.avatarUrl}
+          alt={actor.name ?? "User"}
+          className="h-4 w-4 rounded-full object-cover"
+        />
+      ) : (
+        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/10 text-[8px] font-semibold text-muted-foreground">
+          {displayInitials}
+        </span>
+      )}
+      <span className="text-foreground font-medium">{actor.name}</span>
+      <span>{verb}</span>
+      <span className="text-muted-foreground/40">&middot;</span>
+      <span>{time}</span>
+    </div>
+  )
+}
+
 function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {
   const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)
   const [showAllRecipients, setShowAllRecipients] = React.useState(false)
   const hasContent = !!event.content
   const hasEmail = !!event.email
 
+  const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null
+  const dotClasses = toneStyle ? toneStyle.dot : NEUTRAL_DOT_CLASSES
+  const iconClasses = toneStyle ? toneStyle.icon : NEUTRAL_ICON_CLASSES
+
   return (
     <div className="group relative flex gap-3.5">
       {!isLast && (
@@ -62,7 +171,7 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
       )}
 
       <div className="relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background">
-        <div className="flex h-4.5 w-4.5 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground ring-4 ring-background">
+        <div className={cn("flex h-4.5 w-4.5 items-center justify-center rounded-full border ring-4 ring-background", dotClasses, iconClasses)} data-testid="timeline-dot">
           {event.icon}
         </div>
       </div>
@@ -77,6 +186,8 @@ function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean
           </span>
         </div>
 
+        {event.actor && <ActorByline actor={event.actor} time={event.time} />}
+
         {(hasContent || hasEmail) && (
           <div className="mt-2">
             {event.isInteractive ? (

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, PersistedFeedbackData } 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"

package/src/prototype/__tests__/detail-view-attention.test.tsx

@@ -89,8 +89,8 @@ describe("DetailView attentionCount", () => {
     expect(pill).not.toBeNull();
     expect(pill!.textContent).toContain("5");
 
-    // Click the timeline header button to expand
-    const timelineButton = container.querySelector("button.group\\/timeline") as HTMLElement;
+    // Click the timeline collapse button to expand
+    const timelineButton = container.querySelector('[data-testid="timeline-collapse-btn"]') as HTMLElement;
     expect(timelineButton).not.toBeNull();
     fireEvent.click(timelineButton);