@handled-ai/design-system 0.9.20 → 0.9.22

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

@@ -3,13 +3,65 @@
 import * as React from "react"
 import { Check, CirclePlus, ExternalLink, Lock, ThumbsDown } from "lucide-react"
 
-const dismissReasons = [
-  "Bad timing",
-  "Inaccurate data",
-  "Wrong account",
-  "Already handled",
-  "Not actionable",
-  "Other",
+interface DismissReasonNode {
+  label: string
+  subOptions?: string[]
+}
+
+const dismissReasonTree: DismissReasonNode[] = [
+  {
+    label: "Not relevant for this account",
+    subOptions: [
+      "Business as usual for this account",
+      "Account in maintenance mode",
+      "Wrong contact for this signal",
+      "Other",
+    ],
+  },
+  {
+    label: "Bad timing",
+    subOptions: [
+      "Too early in the relationship",
+      "Too soon after last outreach",
+      "Wrong time of year for this account",
+      "Other",
+    ],
+  },
+  {
+    label: "Inaccurate data",
+    subOptions: [
+      "Wrong amount or number",
+      "Stale data",
+      "Account info wrong",
+      "Other",
+    ],
+  },
+  {
+    label: "Wrong account",
+    subOptions: [
+      "Different account meant",
+      "Account not in scope",
+      "Other",
+    ],
+  },
+  {
+    label: "Already handled",
+    subOptions: [
+      "Already in conversation",
+      "Already an open Opportunity",
+      "Already escalated",
+      "Other",
+    ],
+  },
+  {
+    label: "Not actionable",
+    subOptions: [
+      "No clear next step",
+      "Outside our remit",
+      "Other",
+    ],
+  },
+  { label: "Other" },
 ]
 
 const approveReasons = [
@@ -53,7 +105,7 @@ interface SignalApprovalContextValue {
   approve: () => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
-  dismiss: (reasons: string[], detail: string) => void
+  dismiss: (reasons: string[], detail: string, subReason?: string) => void
   requestApproval: () => void
   requestDismiss: () => void
   cancel: () => void
@@ -78,7 +130,7 @@ interface RootProps {
   hideApproveButton?: boolean
   onApprove?: () => void
   onApproveFeedback?: (reasons: string[], detail: string) => void
-  onDismiss?: (reasons: string[], detail: string) => void
+  onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
 
 function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, onApprove, onApproveFeedback, onDismiss }: RootProps) {
@@ -115,9 +167,9 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   }, [])
 
   const dismiss = React.useCallback(
-    (reasons: string[], detail: string) => {
+    (reasons: string[], detail: string, subReason?: string) => {
       setApprovalState("dismissed")
-      onDismiss?.(reasons, detail)
+      onDismiss?.(reasons, detail, subReason)
     },
     [onDismiss]
   )
@@ -131,14 +183,128 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   )
 }
 
+/** Shared dismiss reason picker used in both the "editing" and "initial dismiss" paths. */
+function DismissReasonPicker({
+  selectedTopReason,
+  selectedSubReason,
+  selectTopReason,
+  selectSubReason,
+  detailText,
+  setDetailText,
+  needsText,
+  canSubmitDismiss,
+  handleDismissSubmit,
+  topNode,
+  submitLabel,
+  onCancel,
+}: {
+  selectedTopReason: string | null
+  selectedSubReason: string | null
+  selectTopReason: (label: string) => void
+  selectSubReason: (label: string) => void
+  detailText: string
+  setDetailText: (value: string) => void
+  needsText: boolean
+  canSubmitDismiss: boolean
+  handleDismissSubmit: () => void
+  topNode: DismissReasonNode | undefined
+  submitLabel: string
+  onCancel: () => void
+}) {
+  return (
+    <>
+      <div className="flex flex-wrap gap-1.5">
+        {dismissReasonTree.map((node) => {
+          const selected = selectedTopReason === node.label
+          return (
+            <button
+              key={node.label}
+              type="button"
+              onClick={() => selectTopReason(node.label)}
+              className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                selected
+                  ? "border-red-200 bg-red-100 text-red-700"
+                  : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+              }`}
+            >
+              {node.label}
+            </button>
+          )
+        })}
+      </div>
+
+      {topNode?.subOptions && (
+        <div className="ml-3 border-l-2 border-muted pl-3">
+          <div className="flex flex-wrap gap-1.5">
+            {topNode.subOptions.map((sub) => {
+              const selected = selectedSubReason === sub
+              return (
+                <button
+                  key={sub}
+                  type="button"
+                  onClick={() => selectSubReason(sub)}
+                  className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
+                    selected
+                      ? "border-red-200 bg-red-100 text-red-700"
+                      : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  }`}
+                >
+                  {sub}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {selectedTopReason && (
+        <input
+          type="text"
+          value={detailText}
+          onChange={(e) => setDetailText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && canSubmitDismiss) handleDismissSubmit()
+          }}
+          placeholder={needsText ? "Please describe (required)" : "Add context (optional)"}
+          className="h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
+        />
+      )}
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={handleDismissSubmit}
+          disabled={!canSubmitDismiss}
+          className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${
+            canSubmitDismiss
+              ? "bg-foreground text-background hover:bg-foreground/90"
+              : "cursor-not-allowed bg-muted text-muted-foreground"
+          }`}
+        >
+          {submitLabel}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
+          Cancel
+        </button>
+      </div>
+    </>
+  )
+}
+
 function SubmittedFeedback({
   reasons,
   detail,
+  subReason,
   variant,
   onEdit,
 }: {
   reasons: string[]
   detail: string
+  subReason?: string
   variant: "approve" | "dismiss"
   onEdit: () => void
 }) {
@@ -164,6 +330,13 @@ function SubmittedFeedback({
               {r}
             </span>
           ))}
+          {subReason && (
+            <span
+              className={`rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80 ${pillClass}`}
+            >
+              {subReason}
+            </span>
+          )}
         </div>
       )}
       {detail && (
@@ -176,15 +349,41 @@ function SubmittedFeedback({
 function Actions() {
   const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
     useSignalApproval()
+  const [selectedTopReason, setSelectedTopReason] = React.useState<string | null>(null)
+  const [selectedSubReason, setSelectedSubReason] = React.useState<string | null>(null)
   const [selectedReasons, setSelectedReasons] = React.useState<string[]>([])
   const [detailText, setDetailText] = React.useState("")
-  const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string } | null>(null)
+  const [submittedFeedback, setSubmittedFeedback] = React.useState<{ reasons: string[]; detail: string; subReason?: string } | null>(null)
   const [isEditing, setIsEditing] = React.useState(false)
 
-  const otherSelected = selectedReasons.includes("Other")
-  const canSubmitDismiss = selectedReasons.length > 0 && (!otherSelected || detailText.trim().length > 0)
+  const topNode = dismissReasonTree.find((n) => n.label === selectedTopReason)
+  const hasSubOptions = !!(topNode?.subOptions && topNode.subOptions.length > 0)
+  const isTopOther = selectedTopReason === "Other" && !hasSubOptions
+  const isSubOther = selectedSubReason === "Other"
+  const needsText = isTopOther || isSubOther
+  const canSubmitDismiss =
+    selectedTopReason !== null &&
+    (!hasSubOptions || selectedSubReason !== null) &&
+    (!needsText || detailText.trim().length > 0)
+
   const canSubmitApprove = selectedReasons.length > 0 || detailText.trim().length > 0
 
+  const selectTopReason = (label: string) => {
+    if (selectedTopReason === label) {
+      setSelectedTopReason(null)
+      setSelectedSubReason(null)
+      setDetailText("")
+    } else {
+      setSelectedTopReason(label)
+      setSelectedSubReason(null)
+      setDetailText("")
+    }
+  }
+
+  const selectSubReason = (label: string) => {
+    setSelectedSubReason(selectedSubReason === label ? null : label)
+  }
+
   const toggleReason = (reason: string) => {
     setSelectedReasons((prev) =>
       prev.includes(reason) ? prev.filter((r) => r !== reason) : [...prev, reason]
@@ -193,6 +392,11 @@ function Actions() {
 
   const startEditing = () => {
     if (submittedFeedback) {
+      setSelectedTopReason(submittedFeedback.reasons[0] ?? null)
+      setSelectedSubReason(submittedFeedback.subReason ?? null)
+      // Note: selectedReasons is only used by the approve editing path.
+      // For dismiss feedback this is harmless but unused — the dismiss path
+      // reads selectedTopReason/selectedSubReason instead.
       setSelectedReasons([...submittedFeedback.reasons])
       setDetailText(submittedFeedback.detail)
     }
@@ -200,11 +404,12 @@ function Actions() {
   }
 
   const handleDismissSubmit = () => {
-    if (!canSubmitDismiss) return
-    const fb = { reasons: [...selectedReasons], detail: detailText.trim() }
+    if (!canSubmitDismiss || !selectedTopReason) return
+    const fb = { reasons: [selectedTopReason], detail: detailText.trim(), subReason: selectedSubReason ?? undefined }
     setSubmittedFeedback(fb)
-    dismiss(selectedReasons, detailText.trim())
-    setSelectedReasons([])
+    dismiss([selectedTopReason], detailText.trim(), selectedSubReason ?? undefined)
+    setSelectedTopReason(null)
+    setSelectedSubReason(null)
     setDetailText("")
     setIsEditing(false)
   }
@@ -219,6 +424,8 @@ function Actions() {
   }
 
   const handleEditCancel = () => {
+    setSelectedTopReason(null)
+    setSelectedSubReason(null)
     setSelectedReasons([])
     setDetailText("")
     setIsEditing(false)
@@ -226,6 +433,8 @@ function Actions() {
 
   const handleCancel = () => {
     cancel()
+    setSelectedTopReason(null)
+    setSelectedSubReason(null)
     setSelectedReasons([])
     setDetailText("")
   }
@@ -403,31 +612,20 @@ function Actions() {
             <span>{labels.dismissedStatus}</span>
           </div>
           <p className="text-xs font-medium text-muted-foreground">Edit your feedback</p>
-          <div className="flex flex-wrap gap-1.5">
-            {dismissReasons.map((reason) => {
-              const selected = selectedReasons.includes(reason)
-              return (
-                <button key={reason} type="button" onClick={() => toggleReason(reason)}
-                  className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
-                    selected ? "border-red-200 bg-red-100 text-red-700" : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                  }`}>{reason}</button>
-              )
-            })}
-          </div>
-          <input type="text" value={detailText} onChange={(e) => setDetailText(e.target.value)}
-            onKeyDown={(e) => { if (e.key === "Enter" && canSubmitDismiss) handleDismissSubmit() }}
-            placeholder={otherSelected ? "Please describe (required)" : "Provide additional feedback..."}
-            className="h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring" />
-          <div className="flex items-center gap-2">
-            <button type="button" onClick={handleDismissSubmit} disabled={!canSubmitDismiss}
-              className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${canSubmitDismiss ? "bg-foreground text-background hover:bg-foreground/90" : "cursor-not-allowed bg-muted text-muted-foreground"}`}>
-              Save
-            </button>
-            <button type="button" onClick={handleEditCancel}
-              className="inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
-              Cancel
-            </button>
-          </div>
+          <DismissReasonPicker
+            selectedTopReason={selectedTopReason}
+            selectedSubReason={selectedSubReason}
+            selectTopReason={selectTopReason}
+            selectSubReason={selectSubReason}
+            detailText={detailText}
+            setDetailText={setDetailText}
+            needsText={needsText}
+            canSubmitDismiss={canSubmitDismiss}
+            handleDismissSubmit={handleDismissSubmit}
+            topNode={topNode}
+            submitLabel="Save"
+            onCancel={handleEditCancel}
+          />
         </div>
       )
     }
@@ -442,6 +640,7 @@ function Actions() {
           <SubmittedFeedback
             reasons={submittedFeedback.reasons}
             detail={submittedFeedback.detail}
+            subReason={submittedFeedback.subReason}
             variant="dismiss"
             onEdit={startEditing}
           />
@@ -483,60 +682,20 @@ function Actions() {
     return (
       <div className="space-y-3">
         <p className="text-xs font-medium text-muted-foreground">{labels.dismissPrompt}</p>
-        <div className="flex flex-wrap gap-1.5">
-          {dismissReasons.map((reason) => {
-            const selected = selectedReasons.includes(reason)
-            return (
-              <button
-                key={reason}
-                type="button"
-                onClick={() => toggleReason(reason)}
-                className={`rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors ${
-                  selected
-                    ? "border-red-200 bg-red-100 text-red-700"
-                    : "border-border bg-background text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                }`}
-              >
-                {reason}
-              </button>
-            )
-          })}
-        </div>
-
-        {(selectedReasons.length > 0 || otherSelected) && (
-          <input
-            type="text"
-            value={detailText}
-            onChange={(e) => setDetailText(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && canSubmitDismiss) handleDismissSubmit()
-            }}
-            placeholder={otherSelected ? "Please describe (required)" : "Provide additional feedback..."}
-            className="h-7 w-full rounded-md border border-border bg-muted/20 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring"
-          />
-        )}
-
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={handleDismissSubmit}
-            disabled={!canSubmitDismiss}
-            className={`inline-flex h-7 items-center gap-1.5 rounded-md px-3 text-xs font-semibold transition-colors ${
-              canSubmitDismiss
-                ? "bg-foreground text-background hover:bg-foreground/90"
-                : "cursor-not-allowed bg-muted text-muted-foreground"
-            }`}
-          >
-            Submit
-          </button>
-          <button
-            type="button"
-            onClick={handleCancel}
-            className="inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-          >
-            Cancel
-          </button>
-        </div>
+        <DismissReasonPicker
+          selectedTopReason={selectedTopReason}
+          selectedSubReason={selectedSubReason}
+          selectTopReason={selectTopReason}
+          selectSubReason={selectSubReason}
+          detailText={detailText}
+          setDetailText={setDetailText}
+          needsText={needsText}
+          canSubmitDismiss={canSubmitDismiss}
+          handleDismissSubmit={handleDismissSubmit}
+          topNode={topNode}
+          submitLabel="Submit"
+          onCancel={handleCancel}
+        />
       </div>
     )
   }

package/src/components/suggested-actions.tsx

@@ -167,6 +167,7 @@ export interface SuggestedAction {
   callMeta?: SuggestedActionCallMeta
   manualMeta?: SuggestedActionManualMeta
   browserMeta?: SuggestedActionBrowserMeta
+  onFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
 }
 
 // ---------------------------------------------------------------------------
@@ -1253,6 +1254,7 @@ function SuggestedActionCard({
   onOpenRecentActivity,
   onMarkComplete,
   onDispatchAgent,
+  onFeedback,
   iconMap,
   sendLabel,
   accountDetailsLabel,
@@ -1269,6 +1271,7 @@ function SuggestedActionCard({
   onOpenRecentActivity?: () => void
   onMarkComplete?: (id: number | string) => void
   onDispatchAgent?: (id: number | string, editedContent?: string, settings?: { aiDisclosureEnabled?: boolean; maxDurationMinutes?: string; callRecordingEnabled?: boolean; recordingNoticeEnabled?: boolean }) => void
+  onFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   iconMap?: SuggestedActionsIconMap
   sendLabel?: string
   accountDetailsLabel?: string
@@ -1405,10 +1408,14 @@ function SuggestedActionCard({
       {feedbackOpen && (
         <div className="px-5 py-3 border-b border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
           <DraftFeedbackInline
-            onRegenerateRequest={(pills, detail) => console.log("Regenerate:", pills, detail)}
-            onSubmitFeedback={(type, pills, detail) => console.log("Feedback:", type, pills, detail)}
+            onRegenerateRequest={(pills, detail) => {
+              onFeedback?.("down", pills, detail)
+            }}
+            onSubmitFeedback={(type, pills, detail) => {
+              onFeedback?.(type, pills, detail)
+            }}
             onDiscardRequest={(pills, detail) => {
-              console.log("Discard:", pills, detail)
+              onFeedback?.("down", pills, detail)
               onDismiss?.(action.id)
             }}
           />
@@ -1972,6 +1979,7 @@ export function SuggestedActions({
               onOpenRecentActivity={onOpenRecentActivity}
               onMarkComplete={onMarkComplete}
               onDispatchAgent={onDispatchAgent}
+              onFeedback={action.onFeedback}
               iconMap={iconMap}
               sendLabel={sendLabel}
               accountDetailsLabel={accountDetailsLabel}

package/src/prototype/prototype-config.ts

@@ -44,7 +44,7 @@ export interface SignalScoreData {
   confidence: number
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   onApproveFeedback?: (reasons: string[], detail: string) => void
-  onDismissFeedback?: (reasons: string[], detail: string) => void
+  onDismissFeedback?: (reasons: string[], detail: string, subReason?: string) => void
 }
 
 // ---------------------------------------------------------------------------
@@ -72,6 +72,7 @@ export interface InboxViewConfig {
   hideToolbarActions?: boolean
   hideHoverActions?: boolean
   onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void
+  onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   buildEntityChips?: (item: QueueItem) => Array<{ id: string; label: string; avatarLetter: string; onClick?: () => void }>
   quickFilterTabs?: Array<{ id: string; label: string; matchValue?: string; count?: number }>
   hideAccountsButton?: boolean

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

@@ -30,6 +30,7 @@ import {
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
 import { SignalApproval, type ApprovalState } from "../components/signal-feedback-inline"
+import { ScoreFeedback } from "../components/score-feedback"
 import { ScoreBreakdown } from "../components/score-breakdown"
 import { Citation, type SourceDef } from "../components/detail-view"
 import {
@@ -107,6 +108,7 @@ export interface DetailViewProps {
   hideApproveButton?: boolean
   signalBriefCopy?: InboxViewConfig["signalBriefCopy"]
   renderDetailExtra?: (item: QueueItem) => React.ReactNode
+  onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
 }
 
 export function DetailView({
@@ -128,6 +130,7 @@ export function DetailView({
   hideApproveButton,
   signalBriefCopy,
   renderDetailExtra,
+  onScoreFeedback,
 }: DetailViewProps) {
   const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)
   const [showTimeline, setShowTimeline] = React.useState(false)
@@ -180,9 +183,8 @@ export function DetailView({
         signalData.onApproveFeedback?.(reasons, detail)
         console.log("Approval feedback:", { taskId: item.id, company: item.company, reasons, detail })
       }}
-      onDismiss={(reasons, detail) => {
-        signalData.onDismissFeedback?.(reasons, detail)
-        console.log("Dismissed signal:", { taskId: item.id, reasons, detail })
+      onDismiss={(reasons, detail, subReason) => {
+        signalData.onDismissFeedback?.(reasons, detail, subReason)
       }}
     >
       <div className="mx-auto w-full max-w-3xl p-6 pb-12 md:p-8">
@@ -277,14 +279,17 @@ export function DetailView({
                   {signalData.whyNow}
                 </p>
 
+                <ScoreFeedback.Root onSubmitFeedback={(type, pills, detail) => onScoreFeedback?.(type, pills, detail)}>
                 <div className="mb-5 rounded-md border border-border bg-muted/20 p-3">
                   <div className="flex items-center justify-between mb-1.5">
                     <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">Signal Score</span>
                     <div className="flex items-center gap-2">
                       <span className="text-sm font-bold text-foreground">{signalData.score}/100</span>
                       <span className={`text-[10px] font-bold uppercase ${scoreColor}`}>{scoreLabel}</span>
+                      <ScoreFeedback.Trigger />
                     </div>
                   </div>
+                  <ScoreFeedback.Panel />
                   <div className="h-1.5 bg-muted rounded-full overflow-hidden mb-2">
                     <div
                       className={`h-full rounded-full transition-all duration-500 ${barColor}`}
@@ -320,6 +325,7 @@ export function DetailView({
                     </div>
                   )}
                 </div>
+                </ScoreFeedback.Root>
 
                 {!evidenceExpanded && <SignalApproval.Actions />}
               </div>
@@ -398,6 +404,7 @@ export function PrototypeInboxView({
   hideToolbarActions,
   hideHoverActions,
   onSuggestedActionFeedback,
+  onScoreFeedback,
   headerActions,
   onOpenEntityPanel,
   onOpenRecentActivity,
@@ -640,6 +647,7 @@ export function PrototypeInboxView({
     hideApproveButton,
     signalBriefCopy,
     renderDetailExtra,
+    onScoreFeedback,
   }
 
   return (