@handled-ai/design-system 0.20.0 → 0.20.2

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

@@ -0,0 +1,181 @@
+import { cleanup, render, screen } from "@testing-library/react"
+import { afterEach, describe, expect, it } from "vitest"
+
+import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
+import type { QueueItem, SignalScoreData } from "../prototype-config"
+import type { TimelineEvent } from "../../components/timeline-activity"
+
+const baseItem: QueueItem = {
+  id: "case-1",
+  title: "Churn risk case title",
+  details: "Case details",
+  statusColor: "red",
+  time: "1h ago",
+  company: "Acme Corp",
+  tag1: "Signal",
+}
+
+const timelineEvents: TimelineEvent[] = [
+  {
+    id: "timeline-1",
+    icon: <span aria-hidden="true">•</span>,
+    title: "Timeline marker event",
+    time: "10m ago",
+  },
+]
+
+const FOLLOWS = Node.DOCUMENT_POSITION_FOLLOWING
+
+afterEach(() => {
+  cleanup()
+})
+
+function makeSignalScore(overrides: Partial<SignalScoreData> = {}): SignalScoreData {
+  return {
+    score: 84,
+    factors: [],
+    whyNow: "The why copy: customer replied after the escalation window opened.",
+    evidence: ["Evidence line"],
+    confidence: 91,
+    urgencyLabel: "High",
+    urgencyExplanation: "Urgency explanation copy.",
+    signalBrief: "Signal brief copy: account activity needs review.",
+    timeChipLabel: "3 days left",
+    explanationBuckets: [
+      {
+        key: "cash-movement",
+        label: "Cash movement",
+        kind: "signal",
+        signals: [{ id: "sig-1", label: "Large outgoing transfer" }],
+      },
+    ],
+    ...overrides,
+  }
+}
+
+function renderDetailView(
+  overrides: Partial<DetailViewProps> = {},
+  scoreOverrides: Partial<SignalScoreData> = {},
+) {
+  const props: DetailViewProps = {
+    item: baseItem,
+    sections: { signalBrief: true, suggestedActions: false, timeline: true },
+    getSignalScore: () => makeSignalScore(scoreOverrides),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    getTimelineEvents: () => timelineEvents,
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    ...overrides,
+  }
+
+  return render(<DetailView {...props} />)
+}
+
+function expectInDocumentOrder(...nodes: HTMLElement[]) {
+  nodes.forEach((node, index) => {
+    const next = nodes[index + 1]
+    if (!next) return
+    expect(node.compareDocumentPosition(next) & FOLLOWS).toBeTruthy()
+  })
+}
+
+describe("DetailView case-panel-v2 section layout", () => {
+  it("keeps the default layout unchanged and ignores v2-only slots", () => {
+    renderDetailView({
+      renderMetadataExtra: () => <span>Metadata marker</span>,
+      renderAfterScore: () => <section>After-score marker</section>,
+      renderPrimaryAction: () => <section>Primary action marker</section>,
+      renderCommentArea: () => <section>Comment area marker</section>,
+      renderDetailExtra: () => <section>Legacy detail extra marker</section>,
+    })
+
+    expect(screen.queryByText("Primary action marker")).toBeNull()
+    expect(screen.queryByText("Comment area marker")).toBeNull()
+    expect(screen.getByText("Legacy detail extra marker")).toBeTruthy()
+
+    expectInDocumentOrder(
+      screen.getByText("Metadata marker"),
+      screen.getByText("Signal brief copy: account activity needs review."),
+      screen.getByText("Cash movement"),
+      screen.getByText("Approve action"),
+      screen.getByText("After-score marker"),
+      screen.getByText("Activity timeline"),
+      screen.getByText("Legacy detail extra marker"),
+    )
+  })
+
+  it("renders v2 sections in the approved order", () => {
+    renderDetailView({
+      sectionLayout: "case-panel-v2",
+      renderMetadataExtra: () => <span>Metadata marker</span>,
+      renderBeforeScore: () => <section>Before-score status marker</section>,
+      renderAfterScore: () => <section>Opportunity marker</section>,
+      renderPrimaryAction: () => <section>Primary action marker</section>,
+      renderCommentArea: () => <section>Comment area marker</section>,
+    })
+
+    expectInDocumentOrder(
+      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"),
+      screen.getByText("Primary action marker"),
+      screen.getByText("Comment area marker"),
+      screen.getByText("Activity timeline"),
+    )
+  })
+
+  it("renders the primary slot in the v2 layout", () => {
+    renderDetailView({
+      sectionLayout: "case-panel-v2",
+      renderPrimaryAction: (item) => (
+        <section aria-label="primary slot">Primary action for {item.id}</section>
+      ),
+    })
+
+    expect(screen.getByText("Primary action for case-1")).toBeTruthy()
+  })
+
+  it("places the comment slot before the timeline in the v2 layout", () => {
+    renderDetailView({
+      sectionLayout: "case-panel-v2",
+      renderCommentArea: () => <section>Comment composer marker</section>,
+    })
+
+    expectInDocumentOrder(
+      screen.getByText("Comment composer marker"),
+      screen.getByText("Activity timeline"),
+    )
+  })
+
+  it("renders signal brief and The why separately when both copies exist", () => {
+    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."),
+    )
+  })
+
+  it("falls back to whyNow in the brief and suppresses the separate The why block when signalBrief is missing", () => {
+    renderDetailView(
+      { sectionLayout: "case-panel-v2" },
+      {
+        signalBrief: undefined,
+        whyNow: "Fallback why copy shown in the brief.",
+        urgencyExplanation: "Urgency copy should not render as a separate why block.",
+      },
+    )
+
+    expect(screen.getAllByText("Fallback why copy shown in the brief.")).toHaveLength(1)
+    expect(screen.queryByText("The why")).toBeNull()
+    expect(screen.queryByText("Urgency copy should not render as a separate why block.")).toBeNull()
+  })
+})

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-config.ts

@@ -224,12 +224,18 @@ export interface InboxViewConfig {
    *  - "prominent": standard foreground color, text-base size for the brief
    */
   briefStyleVariant?: BriefStyleVariant
+  /** Opt-in detail panel section ordering. Defaults to the existing layout. */
+  sectionLayout?: "default" | "case-panel-v2"
   /** Render extra content at the end of the detail view, below the suggested actions section. */
   renderDetailExtra?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
   renderBeforeScore?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal score section and the activity timeline (e.g. OpportunityPanel). */
   renderAfterScore?: (item: QueueItem) => React.ReactNode
+  /** Render primary case-panel content between the opportunity section and comment area. */
+  renderPrimaryAction?: (item: QueueItem) => React.ReactNode
+  /** Render case-panel comment content before the activity timeline. */
+  renderCommentArea?: (item: QueueItem) => React.ReactNode
   /** Formatted string for "Last activity X ago" in the collapsed timeline header. If omitted, falls back to the first event's time. */
   lastActivityTime?: string
   /** Configuration for the system-noise events toggle (score changes, etc.). */

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,
@@ -155,11 +156,17 @@ export interface DetailViewProps {
   hideApproveButton?: boolean
   signalBriefCopy?: InboxViewConfig["signalBriefCopy"]
   briefStyleVariant?: BriefStyleVariant
+  /** Opt-in detail panel section ordering. Defaults to the existing layout. */
+  sectionLayout?: InboxViewConfig["sectionLayout"]
   renderDetailExtra?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
   renderBeforeScore?: (item: QueueItem) => React.ReactNode
   /** Render content between the signal score section and the activity timeline. */
   renderAfterScore?: (item: QueueItem) => React.ReactNode
+  /** Render primary case-panel content between the opportunity section and comment area. */
+  renderPrimaryAction?: (item: QueueItem) => React.ReactNode
+  /** Render case-panel comment content before the activity timeline. */
+  renderCommentArea?: (item: QueueItem) => React.ReactNode
   lastActivityTime?: string
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
@@ -290,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}
@@ -308,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>
       )}
 
@@ -351,9 +368,12 @@ export function DetailView({
   hideApproveButton,
   signalBriefCopy,
   briefStyleVariant = "default",
+  sectionLayout = "default",
   renderDetailExtra,
   renderBeforeScore,
   renderAfterScore,
+  renderPrimaryAction,
+  renderCommentArea,
   lastActivityTime,
   renderTitleExtra,
   renderTitleActionRow,
@@ -481,6 +501,11 @@ export function DetailView({
         ? "border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-50"
         : "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).
   const metadataChips = (
@@ -551,6 +576,38 @@ export function DetailView({
     </>
   )
 
+  const timelineSection = sections.timeline && timelineEvents.length > 0 ? (
+    <TimelineSection
+      timelineEvents={timelineEvents}
+      showTimeline={showTimeline}
+      setShowTimeline={setShowTimeline}
+      showSystemEvents={showSystemEvents}
+      setShowSystemEvents={setShowSystemEvents}
+      attentionCount={attentionCount}
+      sysEvtConfig={sysEvtConfig}
+      lastActivityTime={lastActivityTime}
+    />
+  ) : null
+
+  const suggestedActionsSection = sections.suggestedActions ? (
+    <SignalApproval.Gate>
+      <SuggestedActions
+        actions={suggestedActions}
+        accountContacts={accountContacts}
+        signature={emailSignature}
+        iconMap={iconMap}
+        onDismiss={(id) => console.log("Dismiss action:", id)}
+        onSend={(id) => console.log("Send action:", id)}
+        onSaveDraft={(id) => console.log("Save draft:", id)}
+        onDuplicate={handleDuplicate}
+        onOpenAccountDetails={onOpenEntityPanel}
+        onOpenRecentActivity={onOpenRecentActivity}
+        onMarkComplete={(id) => console.log("Mark complete:", id)}
+        onDispatchAgent={(id) => console.log("Dispatch agent:", id)}
+      />
+    </SignalApproval.Gate>
+  ) : null
+
   return (
     <SignalApproval.Root
       key={item.id}
@@ -592,7 +649,7 @@ export function DetailView({
             ) : null}
           </div>
 
-          {metadataLayout === "default" ? (
+          {!isCasePanelV2 && metadataLayout === "default" ? (
             <div className="mb-6 flex flex-wrap items-center gap-2">{metadataChips}</div>
           ) : null}
 
@@ -637,63 +694,77 @@ export function DetailView({
                 )}
 
                 {/* Metadata chips relocated beneath the brief (case-panel redesign). */}
-                {metadataLayout === "below-brief" ? (
+                {isCasePanelV2 || metadataLayout === "below-brief" ? (
                   <div className="mb-4 flex flex-wrap items-center gap-2">{metadataChips}</div>
                 ) : null}
 
-                {/* Before-score content slot (e.g. "Signals on Case" chips) */}
-                {renderBeforeScore?.(item)}
-
-                <ScoreWhyChips
-                  item={item}
-                  signalData={signalData}
-                  onOpenSignalBucket={onOpenSignalBucket}
-                />
-                <div className="mt-4">
-                  <SignalApproval.Actions />
-                </div>
+                {!isCasePanelV2 ? (
+                  <>
+                    {/* Before-score content slot (e.g. "Signals on Case" chips) */}
+                    {renderBeforeScore?.(item)}
+
+                    <ScoreWhyChips
+                      item={item}
+                      signalData={signalData}
+                      onOpenSignalBucket={onOpenSignalBucket}
+                    />
+                    <div className="mt-4">
+                      <SignalApproval.Actions />
+                    </div>
+                  </>
+                ) : null}
               </div>
             )
           })()}
 
-          {/* After-score content slot (e.g. OpportunityPanel) */}
-          {renderAfterScore?.(item)}
-
-          {/* Activity Timeline */}
-          {sections.timeline && timelineEvents.length > 0 && (
-            <TimelineSection
-              timelineEvents={timelineEvents}
-              showTimeline={showTimeline}
-              setShowTimeline={setShowTimeline}
-              showSystemEvents={showSystemEvents}
-              setShowSystemEvents={setShowSystemEvents}
-              attentionCount={attentionCount}
-              sysEvtConfig={sysEvtConfig}
-              lastActivityTime={lastActivityTime}
-            />
+          {isCasePanelV2 ? (
+            <>
+              {sections.signalBrief ? (
+                <>
+                  {/* 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}
+                      signalData={signalData}
+                      onOpenSignalBucket={onOpenSignalBucket}
+                    />
+                    <div className="mt-4">
+                      <SignalApproval.Actions />
+                    </div>
+                  </div>
+                </>
+              ) : null}
+
+              {/* After-score content slot (e.g. OpportunityPanel) */}
+              {renderAfterScore?.(item)}
+              {renderPrimaryAction?.(item)}
+              {renderCommentArea?.(item)}
+              {timelineSection}
+            </>
+          ) : (
+            <>
+              {/* After-score content slot (e.g. OpportunityPanel) */}
+              {renderAfterScore?.(item)}
+
+              {/* Activity Timeline */}
+              {timelineSection}
+            </>
           )}
         </div>
 
-        {/* Suggested Actions */}
-        {sections.suggestedActions && (
-          <SignalApproval.Gate>
-            <SuggestedActions
-              actions={suggestedActions}
-              accountContacts={accountContacts}
-              signature={emailSignature}
-              iconMap={iconMap}
-              onDismiss={(id) => console.log("Dismiss action:", id)}
-              onSend={(id) => console.log("Send action:", id)}
-              onSaveDraft={(id) => console.log("Save draft:", id)}
-              onDuplicate={handleDuplicate}
-              onOpenAccountDetails={onOpenEntityPanel}
-              onOpenRecentActivity={onOpenRecentActivity}
-              onMarkComplete={(id) => console.log("Mark complete:", id)}
-              onDispatchAgent={(id) => console.log("Dispatch agent:", id)}
-            />
-          </SignalApproval.Gate>
-        )}
-        {renderDetailExtra?.(item)}
+        {!isCasePanelV2 ? suggestedActionsSection : null}
+        {!isCasePanelV2 ? renderDetailExtra?.(item) : null}
       </div>
     </SignalApproval.Root>
   )
@@ -735,9 +806,12 @@ export function PrototypeInboxView({
   hideApproveButton,
   signalBriefCopy,
   briefStyleVariant,
+  sectionLayout,
   renderDetailExtra,
   renderBeforeScore,
   renderAfterScore,
+  renderPrimaryAction,
+  renderCommentArea,
   lastActivityTime,
   timelineSystemEventsConfig,
   attentionCount,
@@ -980,9 +1054,12 @@ export function PrototypeInboxView({
     hideApproveButton,
     signalBriefCopy,
     briefStyleVariant,
+    sectionLayout,
     renderDetailExtra,
     renderBeforeScore,
     renderAfterScore,
+    renderPrimaryAction,
+    renderCommentArea,
     lastActivityTime,
     timelineSystemEventsConfig,
     attentionCount,