@handled-ai/design-system 0.20.2 → 0.20.4

package/src/components/owner-chips.tsx

@@ -58,7 +58,7 @@ export interface OwnerPerson {
 
 /* ── shared bits ─────────────────────────────────────────────────────────── */
 
-function SalesforceMark({ size = 14 }: { size?: number }) {
+function SalesforceMark({ size = 13 }: { size?: number }) {
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img
@@ -82,8 +82,10 @@ function OwnerAvatar({ person, size = "sm" }: { person: OwnerPerson; size?: "sm"
   )
 }
 
+// Component-owned compact sizing. Set directly here (not via consumer
+// className) because cn()/tailwind-merge can strip conflicting overrides.
 const chipBase =
-  "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] " +
+  "inline-flex h-7 items-center gap-1 rounded-md border border-border bg-background px-2 text-[12px] " +
   "shadow-[0_1px_1px_rgba(0,0,0,0.03)]"
 
 /* ── Signal owner (Handled assignment, editable) ─────────────────────────── */
@@ -115,14 +117,14 @@ function SignalOwnerChip({
       {owner ? (
         <OwnerAvatar person={owner} />
       ) : (
-        <span className="text-muted-foreground inline-flex size-[18px] items-center justify-center">
-          <UserPlus size={13} />
+        <span className="text-muted-foreground inline-flex size-4 items-center justify-center">
+          <UserPlus size={12} />
         </span>
       )}
-      <span className="text-muted-foreground text-[11px] font-medium tracking-wide uppercase">
+      <span className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">
         Signal owner
       </span>
-      <span className="bg-border/70 mx-0.5 h-3.5 w-px" aria-hidden />
+      <span className="bg-border/70 mx-0.5 h-3 w-px" aria-hidden />
       <span className={cn("font-medium", owner ? "text-foreground" : "text-muted-foreground")}>
         {owner ? owner.name : "Unassigned"}
       </span>
@@ -155,7 +157,7 @@ function SignalOwnerChip({
         >
           {value}
           <span className="text-muted-foreground ml-0.5">
-            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
           </span>
         </button>
       </DropdownMenuTrigger>
@@ -289,7 +291,7 @@ function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
             <OwnerAvatar person={only} />
             <span className="text-foreground font-medium">{only.name}</span>
             <span className="text-muted-foreground ml-0.5">
-              {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+              {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
             </span>
           </button>
         </DropdownMenuTrigger>
@@ -327,11 +329,11 @@ function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
             ))}
           </span>
           <span className="text-foreground font-medium">Account owners</span>
-          <span className="bg-muted text-muted-foreground rounded px-1 text-[11px] font-semibold tabular-nums">
+          <span className="bg-muted text-muted-foreground rounded px-1 text-[10px] font-semibold tabular-nums">
             ×{owners.length}
           </span>
           <span className="text-muted-foreground ml-0.5">
-            {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            {open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
           </span>
         </button>
       </DropdownMenuTrigger>

package/src/components/timeline-activity.tsx

@@ -163,21 +163,21 @@ const TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantC
   },
   "case-panel": {
     outerRowGap: "group relative flex gap-3",
-    connector: "absolute left-[7px] top-[18px] bottom-[-4px] w-px bg-border/60",
-    dotWrapperSize: "relative z-10 mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-background",
-    dot: "flex h-3.5 w-3.5 items-center justify-center rounded-full border ring-[3px] ring-background",
-    contentPadding: "flex-1 pb-4 pt-0.5",
-    titleRowSpacing: "flex min-w-0 flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between",
-    title: "pr-3 text-[13px] leading-snug text-foreground",
-    time: "mt-0.5 shrink-0 whitespace-nowrap text-[11px] leading-snug text-muted-foreground/70",
-    cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card shadow-sm",
-    cardHeader: "border-b border-border/60 bg-background px-3 py-2",
-    cardBody: "px-3 py-2.5 text-sm",
-    cardFooter: "border-t border-border/60 bg-background/50 px-3 py-1.5",
-    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-sm text-muted-foreground",
+    connector: "absolute left-[11px] top-6 bottom-[-2px] w-px bg-border/50",
+    dotWrapperSize: "relative z-10 mt-0.5 flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-background",
+    dot: "flex h-[22px] w-[22px] items-center justify-center rounded-full border ring-4 ring-background [&>svg]:h-3 [&>svg]:w-3",
+    contentPadding: "flex-1 min-w-0 pb-5 pt-px",
+    titleRowSpacing: "flex min-w-0 items-start justify-between gap-3",
+    title: "min-w-0 pr-1 text-[13.5px] font-medium leading-tight text-foreground",
+    time: "shrink-0 whitespace-nowrap pt-px text-[11px] leading-tight text-muted-foreground/60",
+    cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card",
+    cardHeader: "flex items-center justify-between border-b border-border/60 bg-muted/30 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70",
+    cardBody: "px-3 py-2.5 text-[13px] leading-relaxed",
+    cardFooter: "border-t border-border/60 bg-muted/10 px-3 py-1.5",
+    collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-[13px] text-muted-foreground",
     actionLinkRow: "flex items-center justify-end gap-2 px-3 py-1.5",
-    actionLink: "inline-flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground",
-    nonInteractiveContent: "pr-2 text-[13px] leading-snug text-muted-foreground",
+    actionLink: "inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground/70 transition-colors hover:text-foreground",
+    nonInteractiveContent: "pr-2 text-[13px] leading-relaxed text-muted-foreground",
   },
 }
 

package/src/prototype/__tests__/detail-view-case-panel-v2.test.tsx

@@ -120,8 +120,6 @@ describe("DetailView case-panel-v2 section layout", () => {
       screen.getByText("Signal brief copy: account activity needs review."),
       screen.getByText("Metadata marker"),
       screen.getByText("Before-score status marker"),
-      screen.getByText("The why"),
-      screen.getByText("The why copy: customer replied after the escalation window opened."),
       screen.getByText("Cash movement"),
       screen.getByText("Approve action"),
       screen.getByText("Opportunity marker"),
@@ -154,14 +152,14 @@ describe("DetailView case-panel-v2 section layout", () => {
     )
   })
 
-  it("renders signal brief and The why separately when both copies exist", () => {
+  it("renders signal brief and chip-backed Why section without a separate The why block", () => {
     renderDetailView({ sectionLayout: "case-panel-v2" })
 
-    expectInDocumentOrder(
-      screen.getByText("Signal brief copy: account activity needs review."),
-      screen.getByText("The why"),
-      screen.getByText("The why copy: customer replied after the escalation window opened."),
-    )
+    expect(screen.getByText("Signal brief copy: account activity needs review.")).toBeTruthy()
+    expect(screen.queryByText("The why")).toBeNull()
+    expect(screen.queryByText("The why copy: customer replied after the escalation window opened.")).toBeNull()
+    expect(screen.getByText("Why")).toBeTruthy()
+    expect(screen.getByText("Cash movement")).toBeTruthy()
   })
 
   it("falls back to whyNow in the brief and suppresses the separate The why block when signalBrief is missing", () => {

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

@@ -502,9 +502,6 @@ export function DetailView({
         : "hover:bg-muted/50"
 
   const isCasePanelV2 = sectionLayout === "case-panel-v2"
-  const v2WhyText = signalData.signalBrief
-    ? signalData.whyNow || signalData.urgencyExplanation
-    : undefined
 
   // The metadata chips row (priority · deadline · account · renderMetadataExtra). Rendered above
   // the brief by default, or beneath it when `metadataLayout === "below-brief"` (case-panel redesign).
@@ -724,15 +721,6 @@ export function DetailView({
                   {/* Before-score content slot (e.g. status/attention pills) */}
                   {renderBeforeScore?.(item)}
 
-                  {v2WhyText ? (
-                    <div className="mb-8">
-                      <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3">The why</h3>
-                      <p className="text-sm text-foreground/90 leading-relaxed mb-4">
-                        {v2WhyText}
-                      </p>
-                    </div>
-                  ) : null}
-
                   <div className="mb-8">
                     <ScoreWhyChips
                       item={item}