@handled-ai/design-system 0.20.1 → 0.20.3

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/__tests__/detail-view-timeline-system-events.test.tsx

@@ -1,3 +1,4 @@
+import "@testing-library/jest-dom/vitest"
 import { describe, it, expect, vi, beforeEach } from "vitest"
 import React from "react"
 import { render, fireEvent } from "@testing-library/react"
@@ -181,14 +182,19 @@ describe("DetailView timeline system-events toggle", () => {
       '[data-testid="system-events-toggle"]',
     ) as HTMLElement
     fireEvent.click(toggle)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
     expect(container.textContent).toContain("Score updated +3")
 
     // Collapse the timeline
     expandTimeline(container)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
+    expect(container.textContent).not.toContain("Score updated +3")
+
     // Re-expand
     expandTimeline(container)
 
     // System events should still be visible (toggle didn't change)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
     expect(container.textContent).toContain("Score updated +3")
   })
 
@@ -203,15 +209,20 @@ describe("DetailView timeline system-events toggle", () => {
     const badge = container.querySelector('[data-testid="hidden-count-badge"]')
     expect(badge).not.toBeNull()
     expect(badge?.textContent).toBe("2")
+    expect(badge).toHaveClass("min-w-[18px]")
   })
 
-  it("calls localStorage.setItem when toggle changes", () => {
+  it("calls localStorage.setItem when toggle changes and shows a stronger pressed style", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
     const toggle = container.querySelector(
       '[data-testid="system-events-toggle"]',
     ) as HTMLElement
+    expect(toggle).toHaveAttribute("aria-pressed", "false")
     fireEvent.click(toggle)
+    expect(toggle).toHaveAttribute("aria-pressed", "true")
+    expect(toggle.className).toContain("border-primary/40")
+    expect(toggle.className).toContain("bg-primary/10")
     expect(localStorageMock.setItem).toHaveBeenCalledWith(
       "test-show-score-changes",
       "true",
@@ -301,12 +312,15 @@ describe("DetailView timeline system-events toggle", () => {
     expect(toggle).toBeNull()
   })
 
-  it("shows footer hint when timeline is expanded and system events are hidden", () => {
+  it("shows footer hint below the case-panel timeline when timeline is expanded and system events are hidden", () => {
     const { container } = render(<DetailView {...baseProps()} />)
     expandTimeline(container)
+    const timeline = container.querySelector('[data-variant="case-panel"]')
     const hint = container.querySelector('[data-testid="timeline-footer-hint"]')
+    expect(timeline).not.toBeNull()
     expect(hint).not.toBeNull()
     expect(hint?.textContent).toBe("Score changes are hidden.")
+    expect(timeline?.compareDocumentPosition(hint as Node)).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
   })
 
   it("shows visible footer hint with count when system events are shown", () => {

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

@@ -48,6 +48,7 @@ import {
   type SuggestedContact,
 } from "../components/suggested-actions"
 import { TimelineActivity, type TimelineEvent } from "../components/timeline-activity"
+import { cn } from "../lib/utils"
 import type {
   QueueItem,
   InboxViewConfig,
@@ -296,13 +297,23 @@ function TimelineSection({
           <button
             type="button"
             onClick={() => setShowSystemEvents((prev) => !prev)}
-            className="flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground cursor-pointer"
+            className={cn(
+              "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors hover:text-foreground",
+              showSystemEvents
+                ? "border-primary/40 bg-primary/10 text-primary shadow-sm hover:bg-primary/15"
+                : "border-border bg-background text-muted-foreground hover:bg-muted/40"
+            )}
             aria-pressed={showSystemEvents}
             data-testid="system-events-toggle"
           >
             {toggleLabel}
             <span
-              className="inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold min-w-[18px] tabular-nums"
+              className={cn(
+                "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-semibold tabular-nums",
+                showSystemEvents
+                  ? "bg-primary/15 text-primary ring-1 ring-primary/30"
+                  : "bg-muted text-muted-foreground ring-1 ring-border/70"
+              )}
               data-testid="hidden-count-badge"
             >
               {hiddenCount}
@@ -314,7 +325,7 @@ function TimelineSection({
       {/* Timeline body */}
       {showTimeline && visibleEvents.length > 0 && (
         <div className="mt-3">
-          <TimelineActivity events={visibleEvents} />
+          <TimelineActivity events={visibleEvents} variant="case-panel" />
         </div>
       )}
 
@@ -491,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).
@@ -713,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}