@handled-ai/design-system 0.18.3 → 0.18.4

package/src/components/timeline-activity.tsx

@@ -4,24 +4,6 @@ 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
@@ -46,57 +28,8 @@ 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
@@ -116,54 +49,12 @@ 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 && (
@@ -171,7 +62,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={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">
+        <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">
           {event.icon}
         </div>
       </div>
@@ -186,8 +77,6 @@ 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

@@ -37,8 +37,8 @@ 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 { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
+export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } 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 collapse button to expand
-    const timelineButton = container.querySelector('[data-testid="timeline-collapse-btn"]') as HTMLElement;
+    // Click the timeline header button to expand
+    const timelineButton = container.querySelector("button.group\\/timeline") as HTMLElement;
     expect(timelineButton).not.toBeNull();
     fireEvent.click(timelineButton);
 

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

@@ -150,16 +150,6 @@ export interface DetailViewProps {
   onRequestApproval?: () => Promise<void>
   /** Number of important/attention-worthy events to highlight on the collapsed timeline header. */
   attentionCount?: number
-  /** Label for the system-events toggle button (e.g. "Score changes"). */
-  timelineSystemEventsToggleLabel?: string
-  /** localStorage key for persisting the system-events toggle state. */
-  timelineSystemEventsStorageKey?: string
-  /** Whether system-noise events are visible by default. @default false */
-  timelineSystemEventsDefaultVisible?: boolean
-  /** Hint text shown below the timeline when system events are hidden. */
-  timelineSystemEventsHiddenHint?: string
-  /** Hint text shown below the timeline when system events are visible. Uses {count} as placeholder. */
-  timelineSystemEventsVisibleHint?: string
 }
 
 export function DetailView({
@@ -194,47 +184,10 @@ export function DetailView({
   opportunityPreview,
   onRequestApproval,
   attentionCount,
-  timelineSystemEventsToggleLabel,
-  timelineSystemEventsStorageKey,
-  timelineSystemEventsDefaultVisible = false,
-  timelineSystemEventsHiddenHint,
-  timelineSystemEventsVisibleHint,
 }: DetailViewProps) {
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
 
-  // ---- System-noise toggle state ----
-  const [showSystemEvents, setShowSystemEvents] = React.useState(timelineSystemEventsDefaultVisible)
-  const initialReadDoneRef = React.useRef(false)
-
-  // Read persisted value from localStorage on mount
-  React.useEffect(() => {
-    if (!timelineSystemEventsStorageKey) {
-      initialReadDoneRef.current = true
-      return
-    }
-    try {
-      const stored = localStorage.getItem(timelineSystemEventsStorageKey)
-      if (stored !== null) {
-        setShowSystemEvents(stored === "true")
-      }
-    } catch {
-      // localStorage unavailable — ignore
-    }
-    initialReadDoneRef.current = true
-  }, [timelineSystemEventsStorageKey])
-
-  // Write to localStorage when the toggle changes (skip initial if matching default)
-  React.useEffect(() => {
-    if (!timelineSystemEventsStorageKey) return
-    if (!initialReadDoneRef.current) return
-    try {
-      localStorage.setItem(timelineSystemEventsStorageKey, String(showSystemEvents))
-    } catch {
-      // localStorage unavailable — ignore
-    }
-  }, [showSystemEvents, timelineSystemEventsStorageKey])
-
   React.useEffect(() => {
     setShowTimeline(false)
     setExtraActions([])
@@ -319,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}>
@@ -398,92 +354,38 @@ export function DetailView({
           {renderAfterScore?.(item)}
 
           {/* Activity Timeline */}
-          {sections.timeline && timelineEvents.length > 0 && (() => {
-            const visibleEvents = timelineEvents.filter(
-              (e) => !e.isSystemNoise || showSystemEvents,
-            )
-            const hiddenCount = timelineEvents.filter((e) => e.isSystemNoise).length
-            const hasSystemNoise = hiddenCount > 0
-            const showToggle =
-              hasSystemNoise &&
-              !!(timelineSystemEventsToggleLabel || timelineSystemEventsStorageKey)
-            const firstVisibleTime =
-              lastActivityTime ?? (visibleEvents.length > 0 ? visibleEvents[0].time : "")
-            const visibleCount = visibleEvents.length
-            const eventCountLabel = `${visibleCount} ${visibleCount === 1 ? "event" : "events"}`
-
-            return (
-              <div className="mb-8">
-                {/* Header — outer non-interactive container */}
-                <div
-                  className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2"
-                  data-testid="timeline-header"
-                >
-                  {/* Left: collapse/expand button */}
-                  <button
-                    type="button"
-                    onClick={() => setShowTimeline((prev) => !prev)}
-                    className="flex items-center gap-2 cursor-pointer bg-transparent border-0 p-0"
-                    data-testid="timeline-collapse-btn"
-                  >
-                    <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
-                    {!showTimeline && attentionCount != null && attentionCount > 0 && (
-                      <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
-                        {attentionCount} new
-                      </span>
-                    )}
-                    {!showTimeline && firstVisibleTime && (
-                      <span className="text-[11px] text-muted-foreground/60" data-testid="last-activity-hint">
-                        &middot; Last activity {firstVisibleTime}
-                      </span>
-                    )}
-                    <div className="flex items-center gap-1.5">
-                      <span className="text-[11px] font-medium text-muted-foreground" data-testid="event-count">{eventCountLabel}</span>
-                      <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
-                    </div>
-                  </button>
-
-                  {/* Right: system-events toggle */}
-                  {showToggle && (
-                    <button
-                      type="button"
-                      onClick={() => setShowSystemEvents((prev) => !prev)}
-                      className="flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer"
-                      aria-pressed={showSystemEvents}
-                      data-testid="system-events-toggle"
-                    >
-                      {timelineSystemEventsToggleLabel ?? "System events"}
-                      <span
-                        className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums"
-                        data-testid="hidden-count-badge"
-                      >
-                        {hiddenCount}
-                      </span>
-                    </button>
+          {sections.timeline && timelineEvents.length > 0 && (
+            <div className="mb-8">
+              <button
+                type="button"
+                onClick={() => setShowTimeline((prev) => !prev)}
+                className="group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer"
+              >
+                <div className="flex items-center gap-2">
+                  <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors">Activity timeline</h3>
+                  {!showTimeline && attentionCount != null && attentionCount > 0 && (
+                    <span className="inline-flex items-center gap-1 rounded-full bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold text-destructive border border-destructive/20">
+                      {attentionCount} new
+                    </span>
+                  )}
+                  {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (
+                    <span className="text-[11px] text-muted-foreground/60">
+                      &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}
+                    </span>
                   )}
                 </div>
-
-                {/* Timeline body */}
-                {showTimeline && visibleEvents.length > 0 && (
-                  <div className="mt-3">
-                    <TimelineActivity events={visibleEvents} />
-                  </div>
-                )}
-
-                {/* Footer hint */}
-                {showTimeline && !showSystemEvents && timelineSystemEventsHiddenHint && hasSystemNoise && (
-                  <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
-                    {timelineSystemEventsHiddenHint}
-                  </p>
-                )}
-                {showTimeline && showSystemEvents && timelineSystemEventsVisibleHint && hasSystemNoise && (
-                  <p className="mt-2 text-[11px] text-muted-foreground/60 border-t border-dashed border-border pt-2" data-testid="timeline-footer-hint">
-                    {timelineSystemEventsVisibleHint.replace("{count}", String(hiddenCount))}
-                  </p>
-                )}
-              </div>
-            )
-          })()}
+                <div className="flex items-center gap-1.5">
+                  <span className="text-[11px] font-medium text-muted-foreground">{timelineEvents.length} events</span>
+                  <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? "rotate-180" : ""}`} />
+                </div>
+              </button>
+              {showTimeline && (
+                <div className="mt-3">
+                  <TimelineActivity events={timelineEvents} />
+                </div>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Suggested Actions */}

package/src/components/__tests__/timeline-activity.test.tsx

@@ -1,137 +0,0 @@
-import { describe, it, expect } from "vitest"
-import React from "react"
-import { render, screen } from "@testing-library/react"
-import {
-  TimelineActivity,
-  TONE_CLASSES,
-  type TimelineEvent,
-} from "../timeline-activity"
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function minimal(overrides: Partial<TimelineEvent> = {}): TimelineEvent {
-  return {
-    id: "e1",
-    icon: React.createElement("span", { "data-testid": "icon" }, "⚡"),
-    title: "Test event",
-    time: "2h ago",
-    ...overrides,
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe("TimelineActivity", () => {
-  // --- Tone rendering ---
-
-  it("renders red dot classes when tone is 'red'", () => {
-    const event = minimal({ tone: "red" })
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const dot = container.querySelector('[data-testid="timeline-dot"]')!
-    expect(dot).not.toBeNull()
-    const cls = dot.className
-    // Should contain all the red tone dot classes
-    expect(cls).toContain("bg-red-50")
-    expect(cls).toContain("border-red-200")
-    // Should contain the red icon classes
-    expect(cls).toContain("text-red-600")
-    // Should NOT contain neutral classes
-    expect(cls).not.toContain("border-border/60")
-    expect(cls).not.toContain("text-muted-foreground")
-  })
-
-  it("renders neutral dot classes when tone is absent", () => {
-    const event = minimal()
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const dot = container.querySelector('[data-testid="timeline-dot"]')!
-    expect(dot).not.toBeNull()
-    const cls = dot.className
-    expect(cls).toContain("border-border/60")
-    expect(cls).toContain("bg-background")
-    expect(cls).toContain("text-muted-foreground")
-  })
-
-  // --- Actor byline ---
-
-  it("renders actor byline with name when actor.kind is 'user'", () => {
-    const event = minimal({
-      actor: { kind: "user", name: "Alice" },
-    })
-    render(<TimelineActivity events={[event]} />)
-    const byline = screen.getByTestId("actor-byline")
-    expect(byline).not.toBeNull()
-    expect(byline.textContent).toContain("Alice")
-    expect(byline.textContent).toContain("performed this action")
-  })
-
-  it("renders no byline when actor.kind is 'system'", () => {
-    const event = minimal({
-      actor: { kind: "system" },
-    })
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const byline = container.querySelector('[data-testid="actor-byline"]')
-    expect(byline).toBeNull()
-  })
-
-  it("renders 'Integration' text when actor.kind is 'integration'", () => {
-    const event = minimal({
-      actor: { kind: "integration" },
-    })
-    render(<TimelineActivity events={[event]} />)
-    const byline = screen.getByTestId("actor-byline")
-    expect(byline).not.toBeNull()
-    expect(byline.textContent).toContain("Integration")
-  })
-
-  it("renders custom verb for user actor", () => {
-    const event = minimal({
-      actor: { kind: "user", name: "Bob", verb: "approved this case" },
-    })
-    render(<TimelineActivity events={[event]} />)
-    const byline = screen.getByTestId("actor-byline")
-    expect(byline.textContent).toContain("approved this case")
-  })
-
-  it("renders no byline when actor is absent", () => {
-    const event = minimal()
-    const { container } = render(<TimelineActivity events={[event]} />)
-    const byline = container.querySelector('[data-testid="actor-byline"]')
-    expect(byline).toBeNull()
-  })
-
-  // --- Backwards compatibility ---
-
-  it("renders correctly with minimal TimelineEvent (only id, icon, title, time)", () => {
-    const event: TimelineEvent = {
-      id: "min-1",
-      icon: React.createElement("span", null, "📌"),
-      title: "Minimal event",
-      time: "5m ago",
-    }
-    const { container } = render(<TimelineActivity events={[event]} />)
-    // Should render without errors
-    expect(container.textContent).toContain("Minimal event")
-    expect(container.textContent).toContain("5m ago")
-    // Dot should have neutral classes
-    const dot = container.querySelector('[data-testid="timeline-dot"]')!
-    expect(dot.className).toContain("border-border/60")
-    // No byline
-    const byline = container.querySelector('[data-testid="actor-byline"]')
-    expect(byline).toBeNull()
-  })
-
-  // --- TONE_CLASSES export ---
-
-  it("exports TONE_CLASSES with all expected tones", () => {
-    const tones = ["red", "amber", "emerald", "violet", "blue", "slate", "salesforce", "gmail"] as const
-    for (const tone of tones) {
-      expect(TONE_CLASSES[tone]).toBeDefined()
-      expect(TONE_CLASSES[tone].dot).toBeTruthy()
-      expect(TONE_CLASSES[tone].icon).toBeTruthy()
-    }
-  })
-})