@handled-ai/design-system 0.18.49 → 0.18.50

package/src/components/signal-feedback-inline.tsx

@@ -73,32 +73,6 @@ const approveReasons = [
 
 type ApprovalState = "pending" | "confirming" | "creating" | "approving-feedback" | "dismissing" | "approved" | "dismissed" | "auto-approved"
 
-interface OpportunityPreviewOption {
-  value: string
-  label: string
-}
-
-interface OpportunityPreview {
-  name: string
-  stage: string
-  closeDate: string
-  closeDateValue?: string
-  amount: string
-  /** Raw draft input value. Numeric values render as currency in the editable field. */
-  amountValue?: string | number | null
-  accountName: string
-  description?: string | null
-  churnType?: string | null
-  churnTypeOptions?: Array<string | OpportunityPreviewOption>
-}
-
-interface OpportunityDraft {
-  closeDate: string
-  amount: string
-  description: string
-  churnType: string
-}
-
 interface SignalApprovalLabels {
   approveButton?: string
   dismissButton?: string
@@ -132,9 +106,9 @@ interface SignalApprovalContextValue {
   labels: Required<SignalApprovalLabels>
   hideApproveButton?: boolean
   approveButtonIconUrl?: string
-  opportunityPreview?: OpportunityPreview
+  opportunityPreview?: RootProps['opportunityPreview']
   requestingApproval: boolean
-  approve: (draft?: OpportunityDraft) => void
+  approve: () => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
   dismiss: (reasons: string[], detail: string, subReason?: string) => void
@@ -163,7 +137,13 @@ interface RootProps {
   /** Optional icon URL for the approve button. Renders an img instead of CirclePlus when provided. */
   approveButtonIconUrl?: string
   /** Optional structured preview data shown in the confirmation dialog. */
-  opportunityPreview?: OpportunityPreview
+  opportunityPreview?: {
+    name: string
+    stage: string
+    closeDate: string
+    amount: string
+    accountName: string
+  }
   /**
    * Async callback fired when the user clicks the approve button, BEFORE
    * transitioning to the "confirming" state. While the promise is pending,
@@ -180,7 +160,7 @@ interface RootProps {
    *   "creating" loading state while the promise is pending. On `true` it
    *   transitions to the feedback step; on `false` it reverts to "pending".
    */
-  onApprove?: (draft?: OpportunityDraft) => void | Promise<boolean>
+  onApprove?: () => void | Promise<boolean>
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
@@ -194,7 +174,6 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   // an async onApprove promise is still in flight).
   const mountedRef = React.useRef(true)
   React.useEffect(() => {
-    mountedRef.current = true
     return () => { mountedRef.current = false }
   }, [])
 
@@ -226,8 +205,8 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
     setApprovalState("pending")
   }, [])
 
-  const approve = React.useCallback((draft?: OpportunityDraft) => {
-    const result = onApprove?.(draft)
+  const approve = React.useCallback(() => {
+    const result = onApprove?.()
     // If the callback returns a Promise, show a loading state and wait for it.
     if (result && typeof (result as Promise<boolean>).then === "function") {
       setApprovalState("creating")
@@ -438,49 +417,6 @@ function SubmittedFeedback({
   )
 }
 
-function optionValue(option: string | OpportunityPreviewOption): string {
-  return typeof option === "string" ? option : option.value
-}
-
-function optionLabel(option: string | OpportunityPreviewOption): string {
-  return typeof option === "string" ? option : option.label
-}
-
-function formatAmountDraftValue(value: string | number | null | undefined): string {
-  if (value == null || value === "") return ""
-  if (typeof value === "number") {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      maximumFractionDigits: 0,
-    }).format(value)
-  }
-  return value
-}
-
-function buildOpportunityDraft(preview?: OpportunityPreview): OpportunityDraft {
-  return {
-    closeDate: preview?.closeDateValue ?? preview?.closeDate ?? "",
-    amount: preview?.amountValue === undefined
-      ? preview?.amount ?? ""
-      : formatAmountDraftValue(preview.amountValue),
-    description: preview?.description ?? "",
-    churnType: preview?.churnType ?? "",
-  }
-}
-
-function hasEditableOpportunityPreview(preview?: OpportunityPreview): boolean {
-  return !!preview && isValidDateInput(preview.closeDateValue ?? preview.closeDate)
-}
-
-function isValidDateInput(value: string): boolean {
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
-  if (!match) return false
-  const parsed = new Date(`${value}T00:00:00Z`)
-  if (Number.isNaN(parsed.getTime())) return false
-  return parsed.toISOString().slice(0, 10) === value
-}
-
 function Actions() {
   const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
     useSignalApproval()
@@ -490,16 +426,6 @@ function Actions() {
   const [detailText, setDetailText] = React.useState("")
   const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)
   const [isEditing, setIsEditing] = React.useState(false)
-  const [opportunityDraft, setOpportunityDraft] = React.useState<OpportunityDraft>(() => buildOpportunityDraft(opportunityPreview))
-
-  React.useEffect(() => {
-    if (approvalState === "confirming") {
-      setOpportunityDraft(buildOpportunityDraft(opportunityPreview))
-    }
-  }, [approvalState, opportunityPreview])
-
-  const churnTypeOptions = opportunityPreview?.churnTypeOptions ?? []
-  const hasChurnTypeOptions = churnTypeOptions.length > 0
 
   const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)
   const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)
@@ -512,8 +438,6 @@ function Actions() {
     (!needsText || detailText.trim().length > 0)
 
   const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0
-  const isEditableOpportunityPreview = hasEditableOpportunityPreview(opportunityPreview)
-  const canConfirmOpportunity = !isEditableOpportunityPreview || isValidDateInput(opportunityDraft.closeDate)
 
   const selectTopReason = (label: string) => {
     if (selectedTopReason === label) {
@@ -815,8 +739,8 @@ function Actions() {
           <p className="text-sm text-foreground">
             {labels.confirmPrompt} <strong>{companyName}</strong>. Confirm?
           </p>
-          {opportunityPreview && !isEditableOpportunityPreview && (
-            <div className="mt-3 space-y-2 border-t border-border/50 pt-3">
+          {opportunityPreview && (
+            <div className="mt-3 space-y-1.5 border-t border-border/50 pt-3">
               {[
                 { label: "Opportunity", value: opportunityPreview.name },
                 { label: "Account", value: opportunityPreview.accountName },
@@ -824,105 +748,19 @@ function Actions() {
                 { label: "Close Date", value: opportunityPreview.closeDate },
                 { label: "Amount", value: opportunityPreview.amount },
               ].map(({ label, value }) => (
-                <div key={label} className="flex items-center justify-between gap-3 text-xs">
-                  <span className="text-muted-foreground">{label}</span>
-                  <span className="text-right font-medium text-foreground">{value}</span>
-                </div>
-              ))}
-            </div>
-          )}
-          {opportunityPreview && isEditableOpportunityPreview && (
-            <div className="mt-3 space-y-3 border-t border-border/50 pt-3">
-              {[
-                { label: "Opportunity", value: opportunityPreview.name },
-                { label: "Account", value: opportunityPreview.accountName },
-                { label: "Stage", value: opportunityPreview.stage },
-              ].map(({ label, value }) => (
-                <div key={label} className="flex items-center justify-between gap-3 text-xs">
+                <div key={label} className="flex items-center justify-between text-xs">
                   <span className="text-muted-foreground">{label}</span>
-                  <span className="text-right font-medium text-foreground">{value}</span>
+                  <span className="font-medium text-foreground">{value}</span>
                 </div>
               ))}
-
-              <div className="grid gap-2 sm:grid-cols-2">
-                <label className="space-y-1 text-xs">
-                  <span className="font-medium text-muted-foreground">Close Date</span>
-                  <input
-                    type="date"
-                    value={opportunityDraft.closeDate}
-                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, closeDate: event.target.value }))}
-                    aria-invalid={!canConfirmOpportunity}
-                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-                  />
-                  {!canConfirmOpportunity && (
-                    <span className="text-[11px] text-red-600">Enter a valid close date.</span>
-                  )}
-                </label>
-
-                <label className="space-y-1 text-xs">
-                  <span className="font-medium text-muted-foreground">Amount</span>
-                  <input
-                    type="text"
-                    inputMode="decimal"
-                    value={opportunityDraft.amount}
-                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, amount: event.target.value }))}
-                    placeholder={opportunityPreview.amount}
-                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
-                  />
-                </label>
-              </div>
-
-              <label className="space-y-1 text-xs">
-                <span className="font-medium text-muted-foreground">Churn Type</span>
-                {hasChurnTypeOptions ? (
-                  <select
-                    value={opportunityDraft.churnType}
-                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}
-                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-                  >
-                    <option value="">No churn type</option>
-                    {churnTypeOptions.map((option) => (
-                      <option key={optionValue(option)} value={optionValue(option)}>
-                        {optionLabel(option)}
-                      </option>
-                    ))}
-                  </select>
-                ) : (
-                  <input
-                    type="text"
-                    value={opportunityDraft.churnType}
-                    onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, churnType: event.target.value }))}
-                    placeholder="No churn type"
-                    className="h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
-                  />
-                )}
-              </label>
-
-              <label className="space-y-1 text-xs">
-                <span className="font-medium text-muted-foreground">Description</span>
-                <textarea
-                  value={opportunityDraft.description}
-                  onChange={(event) => setOpportunityDraft((draft) => ({ ...draft, description: event.target.value }))}
-                  rows={3}
-                  placeholder="Add a short description"
-                  className="w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
-                />
-              </label>
             </div>
           )}
         </div>
         <div className="flex items-center gap-2">
           <button
             type="button"
-            onClick={() => {
-              if (!opportunityPreview) {
-                approve()
-                return
-              }
-              approve(isEditableOpportunityPreview ? opportunityDraft : undefined)
-            }}
-            disabled={!canConfirmOpportunity}
-            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground"
+            onClick={approve}
+            className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-semibold text-background transition-colors hover:bg-foreground/90"
           >
             <Check className="h-3 w-3" />
             Confirm
@@ -1023,4 +861,5 @@ export {
   Gate as SignalApprovalGate,
 }
 export const SignalApproval = { Root, Actions, Gate }
-export type { ApprovalState, OpportunityPreview, OpportunityDraft, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }
+export type OpportunityPreview = NonNullable<RootProps['opportunityPreview']>
+export type { ApprovalState, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }

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

@@ -50,8 +50,12 @@ 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
   urgencyLabel?: SignalScoreUrgencyLabel
   /** Synthesis sentence displayed in the popover head. */
   urgencyExplanation?: string
@@ -282,6 +286,7 @@ export function SignalPriorityPopover({
   initialFactorFeedback,
   onFactorFeedback,
   initialPriorityFeedback,
+  scoreDisplay = "number",
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
   const scoreRange = getUrgencyRange(urgencyLabel)
@@ -330,15 +335,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 +379,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
+                  Priority = weighted signals + calibration
                 </span>
               </div>
 

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

@@ -89,6 +89,38 @@ describe("DetailView corrected compact score WHY UX", () => {
     expect(screen.queryByText("How's this score?")).toBeNull();
   });
 
+
+  it("passes priorityScoreDisplay through to the priority popover", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              urgencyLabel: "High",
+              priorityScoreDisplay: "label",
+              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.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/prototype-config.ts

@@ -13,9 +13,9 @@ import type {
   PipelineStageTiming,
 } from "../charts/pipeline-overview"
 import type { TimelineEvent } from "../components/timeline-activity"
-import type { ApprovalState, OpportunityDraft } from "../components/signal-feedback-inline"
+import type { ApprovalState } 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,8 @@ 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
   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. */
@@ -180,7 +182,7 @@ export interface InboxViewConfig {
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean
   accountDetailsLabel?: string
-  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: {
     approveButton?: string

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

@@ -38,7 +38,7 @@ import {
   type InboxFilterCategory,
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
-import { SignalApproval, type ApprovalState, type OpportunityDraft, type OpportunityPreview } from "../components/signal-feedback-inline"
+import { SignalApproval, type ApprovalState, type OpportunityPreview } from "../components/signal-feedback-inline"
 import { ScoreWhyChips } from "../components/score-why-chips"
 import { SignalPriorityPopover } from "../components/signal-priority-popover"
 import { type SourceDef } from "../components/detail-view"
@@ -149,7 +149,7 @@ export interface DetailViewProps {
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
   /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
   onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
-  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: InboxViewConfig["signalLabels"]
   hideApproveButton?: boolean
@@ -475,7 +475,7 @@ export function DetailView({
       opportunityPreview={opportunityPreview}
       onRequestApproval={onRequestApproval}
       initialApprovalState={getSignalApprovalState?.(item)}
-      onApprove={(draft) => onSignalApprove?.(item, draft)}
+      onApprove={() => onSignalApprove?.(item)}
       onApproveFeedback={(reasons, detail) => {
         signalData.onApproveFeedback?.(reasons, detail)
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail })
@@ -519,6 +519,7 @@ export function DetailView({
               score={signalData.score}
               urgencyLabel={signalData.urgencyLabel}
               urgencyExplanation={signalData.urgencyExplanation ?? signalData.signalBrief}
+              scoreDisplay={signalData.priorityScoreDisplay}
               factors={signalData.priorityFactors ?? []}
               metaText={undefined}
               feedbackChips={signalData.priorityFeedbackChips}

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

@@ -1,90 +0,0 @@
-import React from "react"
-import { describe, expect, it } from "vitest"
-import { fireEvent, render, screen } from "@testing-library/react"
-
-import { DetailView, type DetailViewProps } from "../prototype-inbox-view"
-import type { QueueItem, SignalScoreData } from "../prototype-config"
-
-const baseItem: QueueItem = {
-  id: "case-1",
-  title: "WIT-825 Opportunity Preview Fixture",
-  details: "Some details",
-  statusColor: "green",
-  time: "2h ago",
-  company: "WIT-825 Fixture Account",
-  tag1: "churn_risk",
-}
-
-function makeSignalScore(overrides: Partial<SignalScoreData> = {}): SignalScoreData {
-  return {
-    score: 82,
-    factors: [],
-    whyNow: "Strong signals detected.",
-    evidence: ["Evidence line 1"],
-    confidence: 80,
-    signalBrief: "Signals indicate a potential opportunity.",
-    ...overrides,
-  }
-}
-
-function baseProps(overrides: Partial<DetailViewProps> = {}): DetailViewProps {
-  return {
-    item: baseItem,
-    sections: { signalBrief: true, suggestedActions: false, timeline: false },
-    getSignalScore: () => makeSignalScore(),
-    buildSuggestedActions: () => [],
-    buildSourceItems: () => [],
-    accountContacts: [],
-    emailSignature: "",
-    iconMap: {},
-    signalLabels: {
-      approveButton: "Create Opportunity",
-      dismissButton: "Not Helpful",
-    },
-    ...overrides,
-  }
-}
-
-describe("DetailView opportunity approval preview", () => {
-  it("keeps the approval flow mounted and shows editable preview fields after async request approval in StrictMode", async () => {
-    function DetailViewPreviewHarness() {
-      const [opportunityPreview, setOpportunityPreview] = React.useState<DetailViewProps["opportunityPreview"]>()
-
-      return (
-        <DetailView
-          {...baseProps({
-            opportunityPreview,
-            onRequestApproval: async () => {
-              setOpportunityPreview({
-                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"],
-              })
-            },
-          })}
-        />
-      )
-    }
-
-    render(
-      <React.StrictMode>
-        <DetailViewPreviewHarness />
-      </React.StrictMode>,
-    )
-
-    fireEvent.click(screen.getByRole("button", { name: /create opportunity/i }))
-
-    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("Description") as HTMLTextAreaElement).value).toBe("Initial description")
-    expect((screen.getByRole("button", { name: /confirm/i }) as HTMLButtonElement).disabled).toBe(false)
-  })
-})