@handled-ai/design-system 0.18.11 → 0.18.13

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

@@ -367,4 +367,49 @@ describe("DataTableFilter", () => {
 
     expect(screen.getByText("Advanced filters")).toBeDefined();
   });
+
+  it("renders badge with bg-muted and text-foreground when activeCount > 0", () => {
+    render(
+      <DataTableFilter
+        categories={[
+          {
+            id: "status",
+            label: "Status",
+            icon: ListFilter,
+            options: ["Open", "Closed"],
+          },
+        ]}
+        selectedFilters={{ status: ["Open"] }}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const badge = screen.getByText("1");
+    expect(badge.tagName).toBe("SPAN");
+    expect(badge.className).toContain("bg-muted");
+    expect(badge.className).toContain("text-foreground");
+  });
+
+  it("does not render badge when activeCount is 0", () => {
+    const { container } = render(
+      <DataTableFilter
+        categories={[
+          {
+            id: "status",
+            label: "Status",
+            icon: ListFilter,
+            options: ["Open", "Closed"],
+          },
+        ]}
+        selectedFilters={{}}
+        onToggleFilter={() => {}}
+      />
+    );
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    // The button should contain "Filter" text but no badge span with a count
+    const spans = button!.querySelectorAll("span.bg-muted");
+    expect(spans.length).toBe(0);
+  });
 });

package/src/components/__tests__/entity-panel-header.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen } from "@testing-library/react"
+
+import { EntityPanel, EntityPanelHeader } from "../entity-panel"
+
+function renderHeader(node: React.ReactNode) {
+  return render(
+    <EntityPanel isOpen onClose={vi.fn()}>
+      {node}
+    </EntityPanel>,
+  )
+}
+
+describe("EntityPanelHeader", () => {
+  it("preserves headerAction and panel controls", () => {
+    renderHeader(
+      <EntityPanelHeader
+        title="Acme Corp"
+        headerAction={<button type="button">Mercury Admin</button>}
+      />,
+    )
+
+    expect(screen.getByText("Acme Corp")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Mercury Admin" })).toBeTruthy()
+    expect(screen.getByTitle("Copy Link")).toBeTruthy()
+    expect(screen.getByTitle("Wide")).toBeTruthy()
+    expect(screen.getByTitle("Close")).toBeTruthy()
+  })
+
+  it("renders subtitle and secondary action on the secondary row", () => {
+    renderHeader(
+      <EntityPanelHeader
+        title="Acme Corp"
+        subtitle="Preferred account · Treasury"
+        headerSecondaryAction={<button type="button">Quick action</button>}
+      />,
+    )
+
+    expect(screen.getByText("Preferred account · Treasury")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
+    expect(screen.getByTitle("Copy Link")).toBeTruthy()
+  })
+})

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

@@ -157,6 +157,36 @@ describe("SignalPriorityPopover", () => {
     expect(neutralRow.textContent).toContain("50")
   })
 
+
+  it("keeps default direction and score labels unchanged", () => {
+    render(<SignalPriorityPopover {...defaultProps} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const row = screen.getByTestId("factor-row-test_severity")
+    expect(row.textContent).toContain("Raises")
+    expect(row.textContent).toContain("85")
+    expect(row.textContent).toContain("/100")
+  })
+
+  it("renders custom direction and display value labels", () => {
+    const customFactors: PriorityFactor[] = [
+      {
+        ...mockFactors[0],
+        directionLabel: "Raises urgency",
+        displayValueLabel: "Open window",
+        score: 0,
+      },
+    ]
+
+    render(<SignalPriorityPopover {...defaultProps} factors={customFactors} />)
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    const row = screen.getByTestId("factor-row-test_severity")
+    expect(row.textContent).toContain("Raises urgency")
+    expect(row.textContent).toContain("Open window")
+    expect(row.textContent).not.toContain("Raises0/100")
+  })
+
   it("renders Contributing factors section label", () => {
     render(<SignalPriorityPopover {...defaultProps} />)
     fireEvent.click(screen.getByTestId("priority-popover-trigger"))

package/src/components/account-contacts-popover.tsx

@@ -32,6 +32,10 @@ export interface AccountContactsPopoverProps {
   onSelectTo?: (contact: SuggestedContact) => void
   onSelectCc?: (contact: SuggestedContact) => void
   onSelectBcc?: (contact: SuggestedContact) => void
+  /** Label for the default contact row action. Defaults to "Add" or "Switch" when onSelectSwitch is provided. */
+  defaultSelectLabel?: string
+  /** Optional replacement-selection callback. When provided, row clicks call this instead of additive onSelect/onSelectTo. */
+  onSelectSwitch?: (contact: SuggestedContact) => void
   onViewAll?: () => void
   onOpenRecentActivity?: () => void
   trigger: React.ReactNode
@@ -44,6 +48,8 @@ export function AccountContactsPopover({
   onSelectTo,
   onSelectCc,
   onSelectBcc,
+  defaultSelectLabel,
+  onSelectSwitch,
   onViewAll,
   onOpenRecentActivity,
   trigger,
@@ -52,6 +58,15 @@ export function AccountContactsPopover({
   const [open, setOpen] = React.useState(false)
   const triggerRef = React.useRef<HTMLDivElement>(null)
   const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})
+  const resolvedDefaultSelectLabel = defaultSelectLabel ?? (onSelectSwitch ? "Switch" : undefined)
+  const handleDefaultSelect = React.useCallback((contact: SuggestedContact) => {
+    if (onSelectSwitch) {
+      onSelectSwitch(contact)
+    } else {
+      (onSelectTo ?? onSelect)(contact)
+    }
+    setOpen(false)
+  }, [onSelect, onSelectSwitch, onSelectTo])
 
   React.useEffect(() => {
     if (open && triggerRef.current) {
@@ -84,7 +99,8 @@ export function AccountContactsPopover({
                 <div
                   key={i}
                   role="button"
-                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}
+                  onClick={() => handleDefaultSelect(c)}
+                  aria-label={resolvedDefaultSelectLabel ? `${resolvedDefaultSelectLabel} ${c.name}` : undefined}
                   className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer"
                 >
                   <div className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0">
@@ -115,6 +131,18 @@ export function AccountContactsPopover({
                     )}
                   </div>
                   <div className="ml-2 flex items-center gap-1.5 shrink-0">
+                    {resolvedDefaultSelectLabel && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDefaultSelect(c)
+                        }}
+                        className="h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40"
+                      >
+                        {resolvedDefaultSelectLabel}
+                      </button>
+                    )}
                     {onSelectTo && (
                       <button
                         type="button"

package/src/components/data-table-condition-filter.tsx

@@ -2,16 +2,11 @@
 
 import * as React from "react"
 import {
-  CalendarDays,
   Check,
-  DollarSign,
   Eye,
-  Hash,
   MoreHorizontal,
   Plus,
   Trash2,
-  Type,
-  type LucideIcon,
 } from "lucide-react"
 
 import { cn } from "../lib/utils"
@@ -103,6 +98,22 @@ const NUMERIC_OPERATORS: ConditionOperator[] = [
   "is_not_null",
 ]
 
+const NAV_KEYS = new Set(["ArrowDown", "ArrowUp", "Enter", "Escape", "Tab"])
+
+export function shouldShowOptionSearch(
+  searchable: ConditionFieldDef["searchable"],
+  optionCount: number,
+  defaultThreshold = 8,
+): boolean {
+  if (searchable === true) return true
+  if (searchable === false) return false
+  const threshold =
+    typeof searchable === "object"
+      ? (searchable.threshold ?? defaultThreshold)
+      : defaultThreshold
+  return optionCount > threshold
+}
+
 const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]> = {
   text: ["eq", "neq", "is_null", "is_not_null"],
   number: NUMERIC_OPERATORS,
@@ -241,19 +252,6 @@ function getCommittedConditions(
     .filter((condition) => isCompleteCondition(condition, fields))
 }
 
-const FIELD_ICON_BY_TYPE: Record<ConditionFieldDef["type"], LucideIcon> = {
-  text: Type,
-  number: Hash,
-  currency: DollarSign,
-  date: CalendarDays,
-  select: MoreHorizontal,
-  multi_select: MoreHorizontal,
-}
-
-function getFieldIcon(type: ConditionFieldDef["type"]): LucideIcon {
-  return FIELD_ICON_BY_TYPE[type]
-}
-
 // ── Condition Row ──────────────────────────────────────────────
 
 function getInputType(fieldType: ConditionFieldDef["type"]): "text" | "number" | "date" {
@@ -278,18 +276,6 @@ interface ConditionValueInputProps {
   onCommit: () => void
 }
 
-function shouldShowOptionSearch(
-  fieldDef: ConditionFieldDef,
-  optionCount: number,
-): boolean {
-  if (fieldDef.searchable === true) return true
-  if (fieldDef.searchable === false) return false
-  if (typeof fieldDef.searchable === "object") {
-    return optionCount >= (fieldDef.searchable.threshold ?? 8)
-  }
-  return false
-}
-
 function SelectConditionValueInput({
   condition,
   fieldDef,
@@ -297,11 +283,15 @@ function SelectConditionValueInput({
 }: Pick<ConditionValueInputProps, "condition" | "fieldDef" | "onSelectValueChange">) {
   const [query, setQuery] = React.useState("")
   const options = normalizeFieldOptions(fieldDef)
-  const normalizedQuery = query.trim().toLowerCase()
+  const showSearch = shouldShowOptionSearch(fieldDef.searchable, options.length)
+  const normalizedQuery = showSearch ? query.trim().toLowerCase() : ""
   const filteredOptions = normalizedQuery
     ? options.filter((option) => option.label.toLowerCase().includes(normalizedQuery))
     : options
-  const showSearch = shouldShowOptionSearch(fieldDef, options.length)
+
+  React.useEffect(() => {
+    setQuery("")
+  }, [fieldDef.id])
 
   return (
     <Select
@@ -318,7 +308,11 @@ function SelectConditionValueInput({
               value={query}
               onChange={(event) => setQuery(event.target.value)}
               onClick={(event) => event.stopPropagation()}
-              onKeyDown={(event) => event.stopPropagation()}
+              onKeyDown={(event) => {
+                if (!NAV_KEYS.has(event.key)) {
+                  event.stopPropagation()
+                }
+              }}
               placeholder="Search options..."
               className="h-7 text-xs"
             />
@@ -453,8 +447,6 @@ function ConditionRow({
   const fieldDef = fields.find((f) => f.id === condition.field) ?? fields[0]
   const operators = getOperators(fieldDef)
   const isUnary = isUnaryOperator(condition.operator)
-  const FieldIcon = getFieldIcon(fieldDef.type)
-
   const handleFieldChange = (newFieldId: string) => {
     const newFieldDef = fields.find((f) => f.id === newFieldId) ?? fields[0]
     if (!newFieldDef) return
@@ -512,21 +504,14 @@ function ConditionRow({
 
       <Select value={condition.field} onValueChange={handleFieldChange}>
         <SelectTrigger className="h-8 w-full justify-start gap-2" size="sm">
-          <FieldIcon className="h-3.5 w-3.5 text-muted-foreground" />
           <SelectValue placeholder={fieldDef.label} />
         </SelectTrigger>
         <SelectContent>
-          {fields.map((field) => {
-            const Icon = getFieldIcon(field.type)
-            return (
-              <SelectItem key={field.id} value={field.id}>
-                <span className="inline-flex items-center gap-2">
-                  <Icon className="h-3.5 w-3.5 text-muted-foreground" />
-                  {field.label}
-                </span>
-              </SelectItem>
-            )
-          })}
+          {fields.map((field) => (
+            <SelectItem key={field.id} value={field.id}>
+              {field.label}
+            </SelectItem>
+          ))}
         </SelectContent>
       </Select>
 

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

@@ -9,6 +9,7 @@ import { cn } from "../lib/utils"
 import { Button } from "./button"
 import {
   DataTableConditionFilter,
+  shouldShowOptionSearch,
   type ConditionFieldDef,
   type ConditionFilterValue,
 } from "./data-table-condition-filter"
@@ -160,7 +161,7 @@ export function DataTableFilter({
           <ListFilter className="h-3.5 w-3.5" />
           Filter
           {activeCount > 0 ? (
-            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold">
+            <span className="rounded bg-muted px-1.5 py-0 text-[10px] font-semibold text-foreground">
               {activeCount}
             </span>
           ) : null}
@@ -214,15 +215,11 @@ 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
-            })()
+            const shouldShowSubmenuSearch = shouldShowOptionSearch(
+              category.searchable,
+              category.options.length,
+              optionSearchThreshold,
+            )
 
             return (
               <DropdownMenuSub

package/src/components/entity-panel.tsx

@@ -135,14 +135,16 @@ export function EntityPanelHeader({
   icon,
   title,
   badgeLabel,
-  subtitle: _subtitle,
+  subtitle,
   headerAction,
+  headerSecondaryAction,
 }: {
   icon?: React.ReactNode
   title: string
   badgeLabel?: string
   subtitle?: string
   headerAction?: React.ReactNode
+  headerSecondaryAction?: React.ReactNode
 }) {
   const { panelMode, cyclePanelMode, onClose } = useEntityPanel()
 
@@ -150,49 +152,63 @@ export function EntityPanelHeader({
     panelMode === 'default' ? 'Wide' : panelMode === 'wide' ? 'Fullscreen' : 'Exit fullscreen'
 
   return (
-    <div className="flex items-center justify-between mb-3">
-      <div className="flex items-center gap-2 min-w-0">
-        {icon ?? <CalendarDays className="w-5 h-5 text-muted-foreground shrink-0" />}
-        <h2 className="text-[16px] font-semibold text-foreground truncate">{title}</h2>
-        {badgeLabel && (
-          <Badge
-            variant="outline"
-            className="text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0"
+    <div className="mb-3 space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 min-w-0">
+          {icon ?? <CalendarDays className="w-5 h-5 text-muted-foreground shrink-0" />}
+          <h2 className="text-[16px] font-semibold text-foreground truncate">{title}</h2>
+          {badgeLabel && (
+            <Badge
+              variant="outline"
+              className="text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0"
+            >
+              {badgeLabel}
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-1 shrink-0 ml-4 text-muted-foreground">
+          {headerAction}
+          <button
+            type="button"
+            className="p-1.5 rounded-md hover:bg-secondary transition-colors"
+            title="Copy Link"
+          >
+            <LinkIcon className="w-4 h-4" />
+          </button>
+          <button
+            type="button"
+            onClick={cyclePanelMode}
+            className="p-1.5 rounded-md hover:bg-secondary transition-colors"
+            title={sizeButtonTitle}
           >
-            {badgeLabel}
-          </Badge>
-        )}
+            {panelMode === 'fullscreen' ? (
+              <Minimize2 className="w-4 h-4" />
+            ) : (
+              <Maximize2 className="w-4 h-4" />
+            )}
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-md hover:bg-secondary transition-colors"
+            title="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
       </div>
-      <div className="flex items-center gap-1 shrink-0 ml-4 text-muted-foreground">
-        {headerAction}
-        <button
-          type="button"
-          className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title="Copy Link"
-        >
-          <LinkIcon className="w-4 h-4" />
-        </button>
-        <button
-          type="button"
-          onClick={cyclePanelMode}
-          className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title={sizeButtonTitle}
-        >
-          {panelMode === 'fullscreen' ? (
-            <Minimize2 className="w-4 h-4" />
+      {(subtitle || headerSecondaryAction) && (
+        <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+          {subtitle ? (
+            <p className="min-w-0 flex-1 text-xs text-muted-foreground">{subtitle}</p>
           ) : (
-            <Maximize2 className="w-4 h-4" />
+            <div className="min-w-0 flex-1" />
           )}
-        </button>
-        <button
-          type="button"
-          onClick={onClose}
-          className="p-1.5 rounded-md hover:bg-secondary transition-colors"
-          title="Close"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
+          {headerSecondaryAction ? (
+            <div className="flex shrink-0 items-center gap-2">{headerSecondaryAction}</div>
+          ) : null}
+        </div>
+      )}
     </div>
   )
 }

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

@@ -40,8 +40,12 @@ export interface PriorityFactor {
   tone: "alert" | "warn" | "info"
   /** Explicit semantic label - NOT inferred from score+weight. */
   direction: "raises" | "lowers" | "neutral"
+  /** Optional display label for the direction text. Keeps semantic direction icon/color unchanged. */
+  directionLabel?: string
   /** 0-100 */
   score: number
+  /** Optional display label rendered instead of the numeric score cell. */
+  displayValueLabel?: string
   /** Evidence text (e.g. "$3.4M moved in 8h - current treasury balance $0.00"). */
   rationale: string
 }
@@ -168,12 +172,13 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
   const IconComponent = FACTOR_ICONS[factor.icon] ?? Activity
   const toneClasses = TONE_ICON_CLASSES[factor.tone]
   const directionClasses = DIRECTION_CLASSES[factor.direction]
-  const directionLabel =
+  const directionLabel = factor.directionLabel ?? (
     factor.direction === "raises"
       ? "Raises"
       : factor.direction === "lowers"
         ? "Lowers"
         : "Neutral"
+  )
 
   return (
     <div
@@ -206,10 +211,16 @@ function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: Priori
         </span>
       </div>
 
-      {/* Score number */}
+      {/* Score number / display label */}
       <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>
+        {factor.displayValueLabel ? (
+          <span className="text-xs font-semibold text-foreground">{factor.displayValueLabel}</span>
+        ) : (
+          <>
+            <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 */}

package/src/prototype/__tests__/detail-view-title-slots.test.tsx

@@ -62,4 +62,35 @@ describe("DetailView title slots", () => {
 
     expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
   })
+  it("renders a full-width title action row without replacing title extra or metadata", () => {
+    renderDetailView({
+      renderTitleExtra: () => <span data-testid="title-extra">Compact extra</span>,
+      renderTitleActionRow: () => (
+        <button type="button">Full-width quick action</button>
+      ),
+      renderMetadataExtra: () => <span data-testid="metadata-extra">Owner: Lee</span>,
+    })
+
+    expect(screen.getByTestId("title-extra").textContent).toBe("Compact extra")
+    expect(screen.getByRole("button", { name: "Full-width quick action" })).toBeTruthy()
+    expect(screen.getByTestId("metadata-extra").textContent).toBe("Owner: Lee")
+    expect(screen.getByTestId("priority-popover-trigger")).toBeTruthy()
+  })
+
+  it("allows consumers to clarify the built-in account details button label", () => {
+    renderDetailView({
+      accountDetailsButtonLabel: (item) => (
+        <>
+          <span>View account details</span>
+          <span>{item.company}</span>
+        </>
+      ),
+      getAccountDetailsButtonAriaLabel: (item) => `View account details for ${item.company}`,
+    })
+
+    const accountButton = screen.getByRole("button", { name: "View account details for Acme Corp" })
+    expect(accountButton.textContent).toContain("View account details")
+    expect(accountButton.textContent).toContain("Acme Corp")
+  })
+
 })

package/src/prototype/prototype-config.ts

@@ -229,8 +229,14 @@ export interface InboxViewConfig {
   attentionCount?: number
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render a full-width action row below the detail title row. */
+  renderTitleActionRow?: (item: QueueItem) => React.ReactNode
   /** Render supporting content below the detail title. */
   renderTitleSubtext?: (item: QueueItem) => React.ReactNode
+  /** Override the built-in account details metadata button label. */
+  accountDetailsButtonLabel?: (item: QueueItem) => React.ReactNode
+  /** Accessible label for the built-in account details metadata button. */
+  getAccountDetailsButtonAriaLabel?: (item: QueueItem) => string
   /** Sort options for the inbox. When provided, a sort dropdown is rendered in the split view toolbar. */
   sortOptions?: InboxSortOption[]
   /** Currently active sort option id. */