@handled-ai/design-system 0.18.6 → 0.18.8

package/src/components/__tests__/data-table-filter.test.tsx

@@ -271,6 +271,47 @@ describe("DataTableFilter", () => {
     expect(document.querySelector('[data-slot="condition-filter"]')).toBeNull();
   });
 
+  it("shows submenu search for categories that opt in even below the global threshold", () => {
+    const category: DataTableFilterCategory = {
+      id: "owner",
+      label: "Owner",
+      icon: ListFilter,
+      options: ["Avery", "Jordan"],
+      searchable: true,
+    };
+
+    render(
+      <DataTableFilter
+        categories={[category]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    expect(screen.getByPlaceholderText("Search...")).toBeDefined();
+  });
+
+  it("uses per-category search thresholds when provided", () => {
+    const category: DataTableFilterCategory = {
+      id: "stage",
+      label: "Stage",
+      icon: ListFilter,
+      options: ["Open", "Closed"],
+      searchable: { threshold: 1 },
+    };
+
+    render(
+      <DataTableFilter
+        categories={[category]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+        optionSearchThreshold={8}
+      />
+    );
+
+    expect(screen.getByPlaceholderText("Search...")).toBeDefined();
+  });
+
   it("exposes a condition builder popover entry point when condition fields are provided", () => {
     const conditionFields: ConditionFieldDef[] = [
       { id: "balance", label: "Account Balance", type: "currency" },

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

@@ -0,0 +1,152 @@
+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("does not render name span when actor.name is undefined", () => {
+    const event = minimal({
+      actor: { kind: "user" },
+    })
+    render(<TimelineActivity events={[event]} />)
+    const byline = screen.getByTestId("actor-byline")
+    expect(byline).not.toBeNull()
+    // Should show "?" initials and the default verb, but no empty name span
+    expect(byline.textContent).toContain("?")
+    expect(byline.textContent).toContain("performed this action")
+    // No font-medium span should be present (that's the name span)
+    const nameSpans = byline.querySelectorAll("span.text-foreground.font-medium")
+    expect(nameSpans.length).toBe(0)
+  })
+
+  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/data-table-filter.tsx

@@ -34,6 +34,12 @@ export interface DataTableFilterCategory {
   options: (string | FilterOption)[]
   /** Filter behavior. Defaults to "multi" (checkbox multi-select). */
   type?: "multi" | "single" | "boolean"
+  /**
+   * Submenu search behavior. Defaults to the DataTableFilter
+   * optionSearchThreshold prop. Use true to always show search or false to
+   * hide it for a specific category.
+   */
+  searchable?: boolean | { threshold?: number }
 }
 
 function getOptionValue(option: string | FilterOption): string {
@@ -208,6 +214,15 @@ export function DataTableFilter({
                   getOptionLabel(opt).toLowerCase().includes(subQuery)
                 )
               : category.options
+            const shouldShowSubmenuSearch = (() => {
+              if (category.searchable === true) return true
+              if (category.searchable === false) return false
+              const threshold =
+                typeof category.searchable === "object"
+                  ? (category.searchable.threshold ?? optionSearchThreshold)
+                  : optionSearchThreshold
+              return category.options.length > threshold
+            })()
 
             return (
               <DropdownMenuSub
@@ -227,8 +242,8 @@ export function DataTableFilter({
                   {category.label}
                 </DropdownMenuSubTrigger>
                 <DropdownMenuSubContent className="max-h-[320px] w-52 overflow-y-auto p-1">
-                  {/* Submenu search — only for categories with many options */}
-                  {category.options.length > optionSearchThreshold && (
+                  {/* Submenu search — shown for long lists or categories that opt in. */}
+                  {shouldShowSubmenuSearch && (
                     <div className="sticky top-0 z-10 border-b border-border bg-popover p-1.5">
                       <div className="relative">
                         <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />

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>
+      )}
+      {actor.name && <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/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);