@handled-ai/design-system 0.18.2 → 0.18.3

package/dist/{signal-priority-popover-DWaAMhPI.d.ts → signal-priority-popover-DQ_VuHac.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersistedFeedbackData, FeedbackChipTree, FeedbackSubmitData } from './components/feedback-primitives.js';
+import { FeedbackChipTree, FeedbackSubmitData } from './components/feedback-primitives.js';
 import { SidebarNavSection } from './components/quick-action-sidebar-nav.js';
 import { ScoreFactor } from './components/score-breakdown.js';
 import { SuggestedContact, SuggestedAction } from './components/suggested-actions.js';
@@ -48,10 +48,6 @@ interface SignalScoreExplanationSignal {
         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;
 }
 interface SignalScoreExplanationBucket {
     key: string;
@@ -97,16 +93,6 @@ interface SignalScoreData {
         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. */
@@ -398,17 +384,7 @@ 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;
 }
-declare function SignalPriorityPopover({ score, urgencyLabel: providedLabel, urgencyExplanation, factors, metaText, feedbackChips, onFeedbackSubmit, className, initialFactorFeedback, onFactorFeedback, initialPriorityFeedback, }: SignalPriorityPopoverProps): React.JSX.Element;
+declare function SignalPriorityPopover({ score, urgencyLabel: providedLabel, urgencyExplanation, factors, metaText, feedbackChips, onFeedbackSubmit, className, }: SignalPriorityPopoverProps): React.JSX.Element;
 
 export { type AccountFilterTab as A, type BriefStyleVariant as B, type EntityPanelConfig as E, type InboxDetailSections as I, type PriorityFactor as P, type QueueItem as Q, SignalPriorityPopover as S, type WorkQueueViewConfig as W, type AccountsViewConfig as a, type AdminTab as b, type AdminViewConfig as c, type EntityPanelSection as d, type InboxSortOption as e, type InboxViewConfig as f, type InsightsCustomTab as g, type InsightsViewConfig as h, type PrototypeBrandConfig as i, type PrototypeConfig as j, type SignalPriorityPopoverProps as k, type SignalScoreData as l, type SignalScoreExplanationBucket as m, type SignalScoreExplanationSignal as n, type SignalScoreUrgencyLabel as o };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",
@@ -171,11 +171,9 @@
     "eslint": "^9.32.0",
     "eslint-config-next": "15.3.1",
     "happy-dom": "^20.9.0",
-    "lucide-react": "^1.16.0",
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "recharts": "^3.8.1",
     "shadcn": "^3.0.0",
     "tailwindcss": "^4.1.11",
     "three": "^0.183.1",

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

@@ -0,0 +1,137 @@
+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()
+    }
+  })
+})

package/src/components/feedback-primitives.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ThumbsUp, ThumbsDown, Check, Pencil } from "lucide-react"
+import { ThumbsUp, ThumbsDown } from "lucide-react"
 import { cn } from "../lib/utils"
 
 // ---------------------------------------------------------------------------
@@ -25,19 +25,6 @@ export interface FeedbackSubmitData {
   detail: string
 }
 
-/**
- * Persisted feedback data from a previous submission, used to hydrate the
- * footer into its "already submitted" visual state.
- */
-export interface PersistedFeedbackData {
-  sentiment: "positive" | "negative"
-  reasonTop?: string
-  reasonSub?: string
-  pills?: string[]
-  detail?: string
-  ownershipLabel: "Your feedback" | "Team feedback"
-}
-
 /**
  * Defines a tier-1 chip that may have tier-2 sub-chips.
  */
@@ -198,13 +185,6 @@ export interface FeedbackFooterProps {
   negativeChips?: FeedbackChipTree[]
   positiveChips?: string[]
   className?: string
-  /** Pre-existing feedback to hydrate from (e.g. after page reload). */
-  initialFeedback?: PersistedFeedbackData | null
-  /** Label shown in the transient confirmation pill after submit. */
-  submittedLabel?: string
-  /** Stable key for syncing initialFeedback into local state. When this
-   *  changes, the component resets to the new initialFeedback value. */
-  feedbackKey?: string
 }
 
 const SENTIMENT_BUTTON_ACTIVE: Record<"positive" | "negative", string> = {
@@ -225,9 +205,6 @@ export function FeedbackFooter({
   negativeChips = [],
   positiveChips = [],
   className,
-  initialFeedback,
-  submittedLabel = "Saved",
-  feedbackKey,
 }: FeedbackFooterProps) {
   const [expanded, setExpanded] = React.useState(false)
   const [selectedTier1, setSelectedTier1] = React.useState<string | null>(null)
@@ -237,43 +214,6 @@ export function FeedbackFooter({
   const [activeTreeIndex, setActiveTreeIndex] = React.useState<number | null>(
     null,
   )
-  /** Transient "Saved" confirmation — shown after successful submit. */
-  const [submitted, setSubmitted] = React.useState(false)
-  /** Persisted feedback shown as a clickable indicator (survives reload). */
-  const [persisted, setPersisted] = React.useState<PersistedFeedbackData | null>(
-    initialFeedback ?? null,
-  )
-  /** Tracks whether the user is actively editing (to guard against prop overwrites). */
-  const [isEditing, setIsEditing] = React.useState(false)
-  /** Track the last synced feedbackKey to detect key changes. */
-  const lastKeyRef = React.useRef<string | undefined>(feedbackKey)
-
-  // Sync initialFeedback into local state via useEffect keyed on feedbackKey.
-  // When feedbackKey changes, reset to new target. Preserve active edits
-  // when feedbackKey stays the same.
-  React.useEffect(() => {
-    const keyChanged = feedbackKey !== lastKeyRef.current
-    lastKeyRef.current = feedbackKey
-
-    if (keyChanged) {
-      // Key changed — full reset to new target
-      setPersisted(initialFeedback ?? null)
-      setSubmitted(false)
-      setExpanded(false)
-      setIsEditing(false)
-      if (initialFeedback) {
-        onFeedbackChange(initialFeedback.sentiment)
-      } else {
-        onFeedbackChange(null)
-      }
-    } else if (!isEditing) {
-      // Same key, not actively editing — safe to sync
-      setPersisted(initialFeedback ?? null)
-      if (initialFeedback) {
-        onFeedbackChange(initialFeedback.sentiment)
-      }
-    }
-  }, [initialFeedback, feedbackKey]) // eslint-disable-line react-hooks/exhaustive-deps -- reads isEditing as guard, not trigger
 
   // Reset state when feedback collapses
   const resetState = React.useCallback(() => {
@@ -283,7 +223,6 @@ export function FeedbackFooter({
     setAdditionalPills([])
     setDetailText("")
     setActiveTreeIndex(null)
-    setIsEditing(false)
   }, [])
 
   const handleSentimentClick = React.useCallback(
@@ -292,26 +231,10 @@ export function FeedbackFooter({
       // Reset chip state when switching sentiment, then expand
       resetState()
       setExpanded(true)
-      setSubmitted(false)
-      setPersisted(null)
-      setIsEditing(true)
     },
     [onFeedbackChange, resetState],
   )
 
-  /** Open the persisted indicator for editing. */
-  const handlePersistedClick = React.useCallback(() => {
-    if (!persisted) return
-    onFeedbackChange(persisted.sentiment)
-    setSelectedTier1(persisted.reasonTop ?? null)
-    setSelectedTier2(persisted.reasonSub ?? null)
-    setAdditionalPills(persisted.pills ?? [])
-    setDetailText(persisted.detail ?? "")
-    setExpanded(true)
-    setSubmitted(false)
-    setIsEditing(true)
-  }, [persisted, onFeedbackChange])
-
   const handleTier1Toggle = React.useCallback(
     (chipLabel: string) => {
       if (selectedTier1 === chipLabel) {
@@ -372,16 +295,7 @@ export function FeedbackFooter({
       pills: additionalPills,
       detail: detailText,
     })
-    // Show transient "Saved" confirmation
-    setSubmitted(true)
-    // Collapse expansion but keep sentiment visible
-    setExpanded(false)
-    setSelectedTier1(null)
-    setSelectedTier2(null)
-    setAdditionalPills([])
-    setDetailText("")
-    setActiveTreeIndex(null)
-    setIsEditing(false)
+    resetState()
   }, [
     feedback,
     selectedTier1,
@@ -389,6 +303,7 @@ export function FeedbackFooter({
     additionalPills,
     detailText,
     onSubmit,
+    resetState,
   ])
 
   const handleCancel = React.useCallback(() => {
@@ -408,75 +323,38 @@ export function FeedbackFooter({
   const activeTree =
     activeTreeIndex !== null ? negativeChips[activeTreeIndex] : null
 
-  // Determine if we should show the persisted indicator instead of bare buttons
-  const showPersistedIndicator = persisted && !expanded && !submitted
-
   return (
     <div className={cn("space-y-3", className)}>
       {/* Sentiment buttons + meta text bar */}
       <div className="flex items-center justify-between">
-        {showPersistedIndicator ? (
-          /* Persisted feedback indicator — clickable to reopen editor */
+        <div className="flex items-center gap-3">
           <button
             type="button"
-            onClick={handlePersistedClick}
-            className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
-            data-testid="persisted-feedback-indicator"
-          >
-            <span className="font-medium">{persisted.ownershipLabel}:</span>
-            {persisted.sentiment === "positive" ? (
-              <ThumbsUp className="h-[11px] w-[11px]" />
-            ) : (
-              <ThumbsDown className="h-[11px] w-[11px]" />
-            )}
-            {persisted.detail && (
-              <span className="max-w-[200px] truncate text-muted-foreground/70">
-                {persisted.detail}
-              </span>
+            onClick={() => handleSentimentClick("positive")}
+            className={cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "positive"
+                ? SENTIMENT_BUTTON_ACTIVE.positive
+                : SENTIMENT_BUTTON_IDLE,
             )}
-            <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
+          >
+            <ThumbsUp className="h-[11px] w-[11px]" />
+            Helpful
           </button>
-        ) : (
-          <div className="flex items-center gap-3">
-            <button
-              type="button"
-              onClick={() => handleSentimentClick("positive")}
-              className={cn(
-                "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
-                feedback === "positive"
-                  ? SENTIMENT_BUTTON_ACTIVE.positive
-                  : SENTIMENT_BUTTON_IDLE,
-              )}
-            >
-              <ThumbsUp className="h-[11px] w-[11px]" />
-              Helpful
-            </button>
-            <button
-              type="button"
-              onClick={() => handleSentimentClick("negative")}
-              className={cn(
-                "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
-                feedback === "negative"
-                  ? SENTIMENT_BUTTON_ACTIVE.negative
-                  : SENTIMENT_BUTTON_IDLE,
-              )}
-            >
-              <ThumbsDown className="h-[11px] w-[11px]" />
-              Not helpful
-            </button>
-            {/* Transient "Saved" confirmation pill */}
-            {submitted && feedback && (
-              <span
-                className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
-                role="status"
-                data-testid="feedback-submitted-pill"
-              >
-                <Check className="h-[11px] w-[11px]" />
-                {submittedLabel}
-              </span>
+          <button
+            type="button"
+            onClick={() => handleSentimentClick("negative")}
+            className={cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "negative"
+                ? SENTIMENT_BUTTON_ACTIVE.negative
+                : SENTIMENT_BUTTON_IDLE,
             )}
-          </div>
-        )}
+          >
+            <ThumbsDown className="h-[11px] w-[11px]" />
+            Not helpful
+          </button>
+        </div>
         {metaText && (
           <span className="text-[11px] text-muted-foreground">{metaText}</span>
         )}

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

@@ -15,7 +15,7 @@ import {
 } from "lucide-react"
 import type { LucideIcon } from "lucide-react"
 import { FeedbackFooter } from "./feedback-primitives"
-import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData } from "./feedback-primitives"
 import { cn } from "../lib/utils"
 import type {
   QueueItem,
@@ -266,7 +266,6 @@ function StructuredSignalRow({ item, bucketKey, signal, tone, onOpenSignalBucket
   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 hasBalance = Boolean(signal.currentBalance || signal.balanceContext)
 
   const rowContent = (
     <>
@@ -305,26 +304,6 @@ function StructuredSignalRow({ item, bucketKey, signal, tone, onOpenSignalBucket
 
       {/* 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" />
-
-      {/* Balance context strip — spans full row below grid columns */}
-      {hasBalance && (
-        <div
-          className="col-span-full mt-0.5 text-[10px] text-muted-foreground/70"
-          data-testid="balance-context-strip"
-        >
-          {signal.currentBalance && (
-            <span>
-              Current balance <span className="font-medium text-muted-foreground">{signal.currentBalance}</span>
-            </span>
-          )}
-          {signal.balanceContext && (
-            <span>
-              {signal.currentBalance ? " · " : ""}
-              {signal.balanceContext}
-            </span>
-          )}
-        </div>
-      )}
     </>
   )
 
@@ -426,11 +405,9 @@ interface WhyCardProps {
   panelId: string
   onOpenSignalBucket?: ScoreWhyChipsProps["onOpenSignalBucket"]
   onBucketFeedback?: (bucketKey: string, data: FeedbackSubmitData) => void
-  /** Persisted bucket-level feedback to hydrate from. */
-  initialBucketFeedback?: PersistedFeedbackData | null
 }
 
-function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketFeedback, initialBucketFeedback }: WhyCardProps) {
+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
@@ -511,8 +488,6 @@ function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketF
             negativeChips={BUCKET_NEGATIVE_CHIPS}
             negativePrompt="Was this bucket useful?"
             positivePrompt="Thanks! What was useful about this bucket?"
-            initialFeedback={initialBucketFeedback}
-            feedbackKey={bucket.key}
           />
         </div>
       )}
@@ -586,7 +561,6 @@ export function ScoreWhyChips({
           panelId={selectedPanelId}
           onOpenSignalBucket={onOpenSignalBucket}
           onBucketFeedback={signalData.onBucketFeedback}
-          initialBucketFeedback={signalData.initialBucketFeedback?.[selectedBucket.key]}
         />
       )}
     </div>