@handled-ai/design-system 0.19.0-rc.2 → 0.19.0

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

@@ -50,8 +50,14 @@ export interface PriorityFactor {
   rationale: string
 }
 
+export type SignalPriorityScoreDisplay = "label" | "number"
+
 export interface SignalPriorityPopoverProps {
   score: number
+  /** Controls whether the overall score number is shown in the popover header. @default "number" */
+  scoreDisplay?: SignalPriorityScoreDisplay
+  /** Short formula/context label shown beside the contributing factors heading. @default "Priority factors" */
+  formulaLabel?: string
   urgencyLabel?: SignalScoreUrgencyLabel
   /** Synthesis sentence displayed in the popover head. */
   urgencyExplanation?: string
@@ -282,6 +288,8 @@ export function SignalPriorityPopover({
   initialFactorFeedback,
   onFactorFeedback,
   initialPriorityFeedback,
+  scoreDisplay = "number",
+  formulaLabel = "Priority factors",
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
   const scoreRange = getUrgencyRange(urgencyLabel)
@@ -330,15 +338,20 @@ export function SignalPriorityPopover({
           data-testid="priority-popover-content"
         >
           {/* Head section */}
-          <div className="p-4 pb-3">
+          <div className="p-4 pb-3" data-testid="priority-popover-header">
             <div className="flex items-start justify-between gap-3">
               <p className="text-sm font-semibold text-foreground">
                 Why this is {urgencyLabel.toLowerCase()} priority
               </p>
-              <span className="text-2xl font-bold tabular-nums text-foreground">
-                {score}
-                <span className="text-sm font-normal text-muted-foreground">/100</span>
-              </span>
+              {scoreDisplay === "number" && (
+                <span
+                  className="text-2xl font-bold tabular-nums text-foreground"
+                  data-testid="priority-overall-score"
+                >
+                  {score}
+                  <span className="text-sm font-normal text-muted-foreground">/100</span>
+                </span>
+              )}
             </div>
 
             {/* Band indicator */}
@@ -369,7 +382,7 @@ export function SignalPriorityPopover({
                 </span>
                 <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
                   <Info className="h-3 w-3" />
-                  Score = weighted sum
+                  {formulaLabel}
                 </span>
               </div>
 

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

@@ -375,10 +375,10 @@ export function VirtualizedDataTable<TData>({
                         onMouseDown={header.getResizeHandler()}
                         onTouchStart={header.getResizeHandler()}
                         className={cn(
-                          "absolute right-0 top-0 h-full w-3 -mr-1.5 cursor-col-resize select-none touch-none",
-                          "after:absolute after:right-1.5 after:top-0 after:h-full after:w-px",
-                          "after:bg-transparent hover:after:bg-primary/30",
-                          header.column.getIsResizing() && "after:bg-primary/50",
+                          "absolute right-0 top-0 z-20 h-full w-4 -mr-2 cursor-col-resize select-none touch-none",
+                          "after:absolute after:right-2 after:top-1 after:h-[calc(100%-0.5rem)] after:w-px after:rounded-full",
+                          "after:bg-border/70 after:transition-colors hover:after:bg-primary/60",
+                          header.column.getIsResizing() && "after:bg-primary/70",
                         )}
                         role="separator"
                         aria-orientation="vertical"

package/src/index.ts

@@ -52,7 +52,7 @@ export * from "./components/related-record-action-card"
 export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
 export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"
-export type { SignalPriorityPopoverProps, PriorityFactor } from "./components/signal-priority-popover"
+export type { SignalPriorityPopoverProps, SignalPriorityScoreDisplay, PriorityFactor } from "./components/signal-priority-popover"
 export * from "./components/filter-chip"
 export * from "./components/inbox-row"
 export * from "./components/inbox-toolbar"

package/src/prototype/__tests__/detail-view-opportunity-preview.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 import { fireEvent, render, screen } from "@testing-library/react"
 
 import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
@@ -66,6 +66,7 @@ describe("DetailView opportunity approval preview", () => {
                 description: "Initial description",
                 churnType: "Churn Risk",
                 churnTypeOptions: ["Churn Risk", "Win Back"],
+                nextStep: "Initial next step",
               })
             },
           })}
@@ -84,7 +85,81 @@ describe("DetailView opportunity approval preview", () => {
     expect((await screen.findByLabelText("Close Date") as HTMLInputElement).value).toBe("2026-06-30")
     expect((screen.getByLabelText("Amount") as HTMLInputElement).value).toBe("$75,000")
     expect((screen.getByLabelText("Churn Type") as HTMLSelectElement).value).toBe("Churn Risk")
+    expect((screen.getByLabelText("Next Step") as HTMLTextAreaElement).value).toBe("Initial next step")
     expect((screen.getByLabelText("Description") as HTMLTextAreaElement).value).toBe("Initial description")
     expect((screen.getByRole("button", { name: /confirm/i }) as HTMLButtonElement).disabled).toBe(false)
   })
+
+  it("passes edited next step with the opportunity draft on confirm", async () => {
+    const onSignalApprove = vi.fn()
+
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalApprovalState: () => "confirming",
+          opportunityPreview: {
+            name: "Churn Risk - WIT-825 Fixture Account",
+            accountName: "WIT-825 Fixture Account",
+            stage: "Prospecting",
+            closeDate: "Jun 30, 2026",
+            closeDateValue: "2026-06-30",
+            amount: "$75,000",
+            amountValue: 75000,
+            description: "Initial description",
+            churnType: "Churn Risk",
+            churnTypeOptions: ["Churn Risk", "Win Back"],
+            nextStep: "Initial next step",
+          },
+          onSignalApprove,
+        })}
+      />,
+    )
+
+    const nextStepInput = screen.getByLabelText("Next Step") as HTMLTextAreaElement
+    fireEvent.change(nextStepInput, { target: { value: "Schedule validation call" } })
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onSignalApprove).toHaveBeenCalledWith(baseItem, {
+      closeDate: "2026-06-30",
+      amount: "$75,000",
+      churnType: "Churn Risk",
+      description: "Initial description",
+      nextStep: "Schedule validation call",
+    })
+  })
+
+  it("omits untouched empty next step from the opportunity draft on confirm", async () => {
+    const onSignalApprove = vi.fn()
+
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalApprovalState: () => "confirming",
+          opportunityPreview: {
+            name: "Churn Risk - WIT-825 Fixture Account",
+            accountName: "WIT-825 Fixture Account",
+            stage: "Prospecting",
+            closeDate: "Jun 30, 2026",
+            closeDateValue: "2026-06-30",
+            amount: "$75,000",
+            amountValue: 75000,
+            description: "Initial description",
+            churnType: "Churn Risk",
+            churnTypeOptions: ["Churn Risk", "Win Back"],
+          },
+          onSignalApprove,
+        })}
+      />,
+    )
+
+    expect((screen.getByLabelText("Next Step") as HTMLTextAreaElement).value).toBe("")
+    fireEvent.click(screen.getByRole("button", { name: /confirm/i }))
+
+    expect(onSignalApprove).toHaveBeenCalledWith(baseItem, {
+      closeDate: "2026-06-30",
+      amount: "$75,000",
+      churnType: "Churn Risk",
+      description: "Initial description",
+    })
+  })
 })

package/src/prototype/__tests__/detail-view-score-why.test.tsx

@@ -89,6 +89,40 @@ describe("DetailView corrected compact score WHY UX", () => {
     expect(screen.queryByText("How's this score?")).toBeNull();
   });
 
+
+  it("passes priorityScoreDisplay and priorityFormulaLabel through to the priority popover", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              urgencyLabel: "High",
+              priorityScoreDisplay: "label",
+              priorityFormulaLabel: "Priority = weighted signals + calibration",
+              priorityFactors: [
+                {
+                  key: "treasury",
+                  label: "Treasury activity",
+                  icon: "wallet",
+                  tone: "alert",
+                  direction: "raises",
+                  score: 85,
+                  rationale: "Full liquidation detected.",
+                },
+              ],
+            }),
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /high priority/i }));
+
+    expect(screen.queryByTestId("priority-overall-score")).toBeNull();
+    expect(screen.getByTestId("priority-popover-header").textContent).not.toContain("82/100");
+    expect(screen.getByText("Priority = weighted signals + calibration")).toBeInTheDocument();
+    expect(screen.getByTestId("factor-row-treasury").textContent).toContain("85/100");
+  });
+
   it("keeps signal WHY chips collapsed by default and excludes factor-only buckets", () => {
     render(
       <DetailView

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

@@ -1,5 +1,5 @@
-import { cleanup, render, screen } from "@testing-library/react"
-import { afterEach, describe, expect, it, vi } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
 
 import { DetailView } from "../prototype-inbox-view"
 import type { DetailViewProps } from "../prototype-inbox-view"
@@ -14,10 +14,6 @@ const baseItem = {
   tag1: "Signal",
 }
 
-afterEach(() => {
-  cleanup()
-})
-
 function renderDetailView(overrides: Partial<DetailViewProps> = {}) {
   const props: DetailViewProps = {
     item: baseItem,
@@ -43,30 +39,6 @@ function renderDetailView(overrides: Partial<DetailViewProps> = {}) {
 }
 
 describe("DetailView title slots", () => {
-  it("does not render the inert detail Back button while preserving title and metadata slots", () => {
-    renderDetailView({
-      renderTitleActionRow: () => (
-        <button type="button">Full-width quick action</button>
-      ),
-      renderMetadataExtra: () => <span data-testid="metadata-extra">Owner: Lee</span>,
-      accountDetailsButtonLabel: (item) => (
-        <>
-          <span>View account details</span>
-          <span>{item.company}</span>
-        </>
-      ),
-      getAccountDetailsButtonAriaLabel: (item) => `View account details for ${item.company}`,
-    })
-
-    expect(screen.queryByRole("button", { name: "Back" })).toBeNull()
-    expect(screen.getByRole("heading", { name: "Churn risk case title" })).toBeTruthy()
-    expect(screen.getAllByText("Acme Corp").length).toBeGreaterThan(0)
-    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()
-    expect(screen.getByRole("button", { name: "View account details for Acme Corp" })).toBeTruthy()
-  })
-
   it("renders supporting title text below the main title", () => {
     renderDetailView({
       renderTitleSubtext: (item) => <p data-testid="title-subtext">Full title: {item.title}</p>,

package/src/prototype/prototype-config.ts

@@ -15,7 +15,7 @@ import type {
 import type { TimelineEvent } from "../components/timeline-activity"
 import type { ApprovalState, OpportunityDraft } from "../components/signal-feedback-inline"
 import type { LucideIcon } from "lucide-react"
-import type { PriorityFactor } from "../components/signal-priority-popover"
+import type { PriorityFactor, SignalPriorityScoreDisplay } from "../components/signal-priority-popover"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
 
 // ---------------------------------------------------------------------------
@@ -109,6 +109,10 @@ export interface SignalScoreData {
   confidence: number
   urgencyLabel?: SignalScoreUrgencyLabel
   urgencyExplanation?: string
+  /** Controls whether the priority popover header shows the raw overall score number. @default "number" */
+  priorityScoreDisplay?: SignalPriorityScoreDisplay
+  /** Formula/context label shown in the priority popover factor section. @default "Priority factors" */
+  priorityFormulaLabel?: string
   explanationBuckets?: SignalScoreExplanationBucket[]
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   /** @deprecated The compact score UX no longer renders score-level thumbs by default. */

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

@@ -488,6 +488,14 @@ export function DetailView({
         <div className="pb-8">
           {/* Header */}
           <div className="mb-4 flex items-center gap-2">
+            <button
+              type="button"
+              className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <ArrowLeft className="h-3.5 w-3.5" />
+              Back
+            </button>
+            <span className="text-muted-foreground/40">&middot;</span>
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
@@ -511,6 +519,8 @@ export function DetailView({
               score={signalData.score}
               urgencyLabel={signalData.urgencyLabel}
               urgencyExplanation={signalData.urgencyExplanation ?? signalData.signalBrief}
+              scoreDisplay={signalData.priorityScoreDisplay}
+              formulaLabel={signalData.priorityFormulaLabel}
               factors={signalData.priorityFactors ?? []}
               metaText={undefined}
               feedbackChips={signalData.priorityFeedbackChips}