@handled-ai/design-system 0.18.11 → 0.18.12

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,19 @@ 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()
+  })
+
 })

package/src/prototype/prototype-config.ts

@@ -229,6 +229,8 @@ 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
   /** Sort options for the inbox. When provided, a sort dropdown is rendered in the split view toolbar. */

package/src/prototype/prototype-inbox-view.tsx

@@ -141,6 +141,8 @@ export interface DetailViewProps {
   lastActivityTime?: string
   /** 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
   /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */
@@ -321,6 +323,7 @@ export function DetailView({
   renderAfterScore,
   lastActivityTime,
   renderTitleExtra,
+  renderTitleActionRow,
   renderTitleSubtext,
   renderMetadataExtra,
   onOpenSignalBucket,
@@ -468,12 +471,19 @@ export function DetailView({
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
-          <div className="mb-3 flex flex-wrap items-start gap-x-3 gap-y-2">
-            <div className="min-w-0 flex-1">
-              <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
-              {renderTitleSubtext?.(item)}
+          <div className="mb-3 space-y-3">
+            <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
+              <div className="min-w-0 flex-1">
+                <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+                {renderTitleSubtext?.(item)}
+              </div>
+              {renderTitleExtra?.(item)}
             </div>
-            {renderTitleExtra?.(item)}
+            {renderTitleActionRow ? (
+              <div className="flex w-full flex-wrap items-center gap-2">
+                {renderTitleActionRow(item)}
+              </div>
+            ) : null}
           </div>
 
           <div className="mb-6 flex flex-wrap items-center gap-2">
@@ -649,6 +659,7 @@ export function PrototypeInboxView({
   timelineSystemEventsConfig,
   attentionCount,
   renderTitleExtra,
+  renderTitleActionRow,
   renderTitleSubtext,
   sortOptions,
   activeSortId,
@@ -891,6 +902,7 @@ export function PrototypeInboxView({
     timelineSystemEventsConfig,
     attentionCount,
     renderTitleExtra,
+    renderTitleActionRow,
     renderTitleSubtext,
     onOpenSignalBucket,
   }