@handled-ai/design-system 0.18.50 → 0.18.52

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

@@ -73,6 +73,32 @@ 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
@@ -106,9 +132,9 @@ interface SignalApprovalContextValue {
   labels: Required<SignalApprovalLabels>
   hideApproveButton?: boolean
   approveButtonIconUrl?: string
-  opportunityPreview?: RootProps['opportunityPreview']
+  opportunityPreview?: OpportunityPreview
   requestingApproval: boolean
-  approve: () => void
+  approve: (draft?: OpportunityDraft) => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
   dismiss: (reasons: string[], detail: string, subReason?: string) => void
@@ -137,13 +163,7 @@ 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?: {
-    name: string
-    stage: string
-    closeDate: string
-    amount: string
-    accountName: string
-  }
+  opportunityPreview?: OpportunityPreview
   /**
    * Async callback fired when the user clicks the approve button, BEFORE
    * transitioning to the "confirming" state. While the promise is pending,
@@ -160,7 +180,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?: () => void | Promise<boolean>
+  onApprove?: (draft?: OpportunityDraft) => void | Promise<boolean>
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
@@ -174,6 +194,7 @@ 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 }
   }, [])
 
@@ -205,8 +226,8 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
     setApprovalState("pending")
   }, [])
 
-  const approve = React.useCallback(() => {
-    const result = onApprove?.()
+  const approve = React.useCallback((draft?: OpportunityDraft) => {
+    const result = onApprove?.(draft)
     // 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")
@@ -417,6 +438,49 @@ 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()
@@ -426,6 +490,16 @@ 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)
@@ -438,6 +512,8 @@ 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) {
@@ -739,8 +815,8 @@ function Actions() {
           <p className="text-sm text-foreground">
             {labels.confirmPrompt} <strong>{companyName}</strong>. Confirm?
           </p>
-          {opportunityPreview && (
-            <div className="mt-3 space-y-1.5 border-t border-border/50 pt-3">
+          {opportunityPreview && !isEditableOpportunityPreview && (
+            <div className="mt-3 space-y-2 border-t border-border/50 pt-3">
               {[
                 { label: "Opportunity", value: opportunityPreview.name },
                 { label: "Account", value: opportunityPreview.accountName },
@@ -748,19 +824,105 @@ 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 text-xs">
+                <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">
                   <span className="text-muted-foreground">{label}</span>
-                  <span className="font-medium text-foreground">{value}</span>
+                  <span className="text-right 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={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"
+            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"
           >
             <Check className="h-3 w-3" />
             Confirm
@@ -861,5 +1023,4 @@ export {
   Gate as SignalApprovalGate,
 }
 export const SignalApproval = { Root, Actions, Gate }
-export type OpportunityPreview = NonNullable<RootProps['opportunityPreview']>
-export type { ApprovalState, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }
+export type { ApprovalState, OpportunityPreview, OpportunityDraft, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }

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

@@ -50,12 +50,8 @@ 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
@@ -286,7 +282,6 @@ export function SignalPriorityPopover({
   initialFactorFeedback,
   onFactorFeedback,
   initialPriorityFeedback,
-  scoreDisplay = "number",
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = providedLabel ?? getUrgencyLevel(score)
   const scoreRange = getUrgencyRange(urgencyLabel)
@@ -335,20 +330,15 @@ export function SignalPriorityPopover({
           data-testid="priority-popover-content"
         >
           {/* Head section */}
-          <div className="p-4 pb-3" data-testid="priority-popover-header">
+          <div className="p-4 pb-3">
             <div className="flex items-start justify-between gap-3">
               <p className="text-sm font-semibold text-foreground">
                 Why this is {urgencyLabel.toLowerCase()} priority
               </p>
-              {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>
-              )}
+              <span className="text-2xl font-bold tabular-nums text-foreground">
+                {score}
+                <span className="text-sm font-normal text-muted-foreground">/100</span>
+              </span>
             </div>
 
             {/* Band indicator */}
@@ -379,7 +369,7 @@ export function SignalPriorityPopover({
                 </span>
                 <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
                   <Info className="h-3 w-3" />
-                  Priority = weighted signals + calibration
+                  Score = weighted sum
                 </span>
               </div>
 

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

@@ -0,0 +1,90 @@
+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)
+  })
+})

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

@@ -89,38 +89,6 @@ 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 } from "../components/signal-feedback-inline"
+import type { ApprovalState, OpportunityDraft } from "../components/signal-feedback-inline"
 import type { LucideIcon } from "lucide-react"
-import type { PriorityFactor, SignalPriorityScoreDisplay } from "../components/signal-priority-popover"
+import type { PriorityFactor } from "../components/signal-priority-popover"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
 
 // ---------------------------------------------------------------------------
@@ -109,8 +109,6 @@ 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. */
@@ -182,7 +180,7 @@ export interface InboxViewConfig {
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean
   accountDetailsLabel?: string
-  onSignalApprove?: (item: QueueItem) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => 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 OpportunityPreview } from "../components/signal-feedback-inline"
+import { SignalApproval, type ApprovalState, type OpportunityDraft, 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) => void | Promise<boolean>
+  onSignalApprove?: (item: QueueItem, draft?: OpportunityDraft) => 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={() => onSignalApprove?.(item)}
+      onApprove={(draft) => onSignalApprove?.(item, draft)}
       onApproveFeedback={(reasons, detail) => {
         signalData.onApproveFeedback?.(reasons, detail)
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail })
@@ -519,7 +519,6 @@ 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}