@handled-ai/design-system 0.16.2 → 0.17.1

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

@@ -38,9 +38,8 @@ import {
 } from "../components/inbox-toolbar"
 import { GroupedListView, type GroupedListGroup } from "../components/item-list"
 import { SignalApproval, type ApprovalState, type OpportunityPreview } 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 { ScoreWhyChips, SignalPriorityChip, SignalPriorityPanel } from "../components/score-why-chips"
+import { type SourceDef } from "../components/detail-view"
 import {
   SuggestedActions,
   type SuggestedAction,
@@ -124,6 +123,8 @@ export interface DetailViewProps {
   onOpenEntityPanel?: () => void
   onOpenRecentActivity?: () => void
   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>
   getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined
   signalLabels?: InboxViewConfig["signalLabels"]
@@ -136,9 +137,13 @@ export interface DetailViewProps {
   /** Render content between the signal score section and the activity timeline. */
   renderAfterScore?: (item: QueueItem) => React.ReactNode
   lastActivityTime?: string
+  /** Render extra content inline with the detail title. */
+  renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render supporting content below the detail title. */
+  renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */
   renderMetadataExtra?: (item: QueueItem) => React.ReactNode
-  onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
+  onOpenSignalBucket?: (args: { item: QueueItem; bucketKey: string; signalId: string }) => void
   approveButtonIconUrl?: string
   opportunityPreview?: OpportunityPreview
   onRequestApproval?: () => Promise<void>
@@ -151,7 +156,7 @@ export function DetailView({
   sections,
   getSignalScore,
   buildSuggestedActions,
-  buildSourceItems,
+  buildSourceItems: _buildSourceItems,
   getTimelineEvents,
   accountContacts,
   emailSignature,
@@ -159,6 +164,7 @@ export function DetailView({
   onOpenEntityPanel,
   onOpenRecentActivity,
   onSuggestedActionFeedback: _onSuggestedActionFeedback,
+  onScoreFeedback: _onScoreFeedback,
   onSignalApprove,
   getSignalApprovalState,
   signalLabels,
@@ -169,33 +175,35 @@ export function DetailView({
   renderBeforeScore,
   renderAfterScore,
   lastActivityTime,
+  renderTitleExtra,
+  renderTitleSubtext,
   renderMetadataExtra,
-  onScoreFeedback,
+  onOpenSignalBucket,
   approveButtonIconUrl,
   opportunityPreview,
   onRequestApproval,
   attentionCount,
 }: DetailViewProps) {
-  const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)
   const [showTimeline, setShowTimeline] = React.useState(false)
   const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])
+  const [priorityOpen, setPriorityOpen] = React.useState(false)
+  const priorityPanelId = React.useId()
 
   React.useEffect(() => {
     setShowTimeline(false)
-    setEvidenceExpanded(false)
     setExtraActions([])
+    setPriorityOpen(false)
   }, [item.id])
 
   const signalData = React.useMemo(
     () => getSignalScore(item.company, item),
-    [getSignalScore, item.company, item],
+    [getSignalScore, item],
   )
 
   const suggestedActions = React.useMemo(
     () => [...buildSuggestedActions(item), ...extraActions],
     [buildSuggestedActions, item, extraActions],
   )
-  const sourceItems = React.useMemo(() => buildSourceItems(item), [buildSourceItems, item])
   const timelineEvents = React.useMemo(
     () => getTimelineEvents?.(item) ?? [],
     [getTimelineEvents, item],
@@ -249,21 +257,22 @@ export function DetailView({
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
-          <h1 className="mb-3 text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+          <div className="mb-3 flex flex-wrap items-start gap-x-3 gap-y-2">
+            <div className="min-w-0 flex-1">
+              <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+              {renderTitleSubtext?.(item)}
+            </div>
+            {renderTitleExtra?.(item)}
+          </div>
 
           <div className="mb-6 flex flex-wrap items-center gap-2">
-            {(item.statusColor === "red" || item.statusColor === "orange") && (
-              <div className={`inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-semibold ${
-                item.statusColor === "red"
-                  ? "bg-red-50 text-red-700"
-                  : "bg-orange-50 text-orange-700"
-              }`}>
-                <span className="text-[10px] font-bold">!</span> {item.tag1.charAt(0).toUpperCase() + item.tag1.slice(1)}
-              </div>
-            )}
-            <div className="inline-flex items-center gap-1 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
-              {item.tag1}
-            </div>
+            <SignalPriorityChip
+              score={signalData.score}
+              urgencyLabel={signalData.urgencyLabel}
+              isOpen={priorityOpen}
+              controlsId={priorityPanelId}
+              onClick={() => setPriorityOpen((prev) => !prev)}
+            />
             {signalData.timeChipLabel && (
               <Badge variant="outline" title={signalData.timeChipDetail ?? undefined}>
                 {signalData.timeChipLabel}
@@ -283,37 +292,10 @@ export function DetailView({
             {renderMetadataExtra?.(item)}
           </div>
 
+          {priorityOpen && <SignalPriorityPanel id={priorityPanelId} signalData={signalData} className="mb-6" />}
+
           {/* Signal Brief */}
           {sections.signalBrief && (() => {
-            const pct = signalData.score
-            const scoreColor = pct >= 70 ? "text-emerald-600" : pct >= 40 ? "text-amber-600" : "text-red-600"
-            const barColor = pct >= 70 ? "bg-emerald-500" : pct >= 40 ? "bg-amber-500" : "bg-red-500"
-            const scoreLabel = pct >= 70 ? "HIGH" : pct >= 40 ? "MEDIUM" : "LOW"
-
-            const evidenceWithCitations: React.ReactNode[] =
-              sourceItems.length >= 4
-                ? [
-                    <>
-                      There are <span className="font-medium text-foreground">3 unusual signals</span> including a large balance
-                      outflow and reduced login frequency
-                      <Citation number={1} source={sourceItems[0]} />
-                      <Citation number={2} source={sourceItems[1]} />
-                      <Citation number={3} source={sourceItems[2]} />
-                    </>,
-                    <>
-                      Scott mentioned in <span className="font-medium text-foreground">#treasury-questions</span> that they are actively
-                      looking for treasury management options
-                      <Citation number={4} source={sourceItems[2]} />
-                    </>,
-                    <>
-                      You have a recent email thread regarding optimization options that hasn&apos;t been replied to
-                      <Citation number={5} source={sourceItems[3]} />
-                    </>,
-                  ]
-                : signalData.evidence.map((ev, i) => (
-                    <span key={i}>{ev}</span>
-                  ))
-
             const briefHeading = signalBriefCopy?.heading ?? "Signal brief"
             const introOpt = signalBriefCopy?.intro
             const briefIntro =
@@ -355,59 +337,14 @@ export function DetailView({
                 {/* Before-score content slot (e.g. "Signals on Case" chips) */}
                 {renderBeforeScore?.(item)}
 
-                <ScoreFeedback.Root
-                  onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}
-                  initialFeedback={signalData.initialScoreFeedback}
-                >
-                <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}`}
-                      style={{ width: `${signalData.score}%` }}
-                    />
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => setEvidenceExpanded((prev) => !prev)}
-                    className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors"
-                  >
-                    <ChevronDown className={`h-3 w-3 transition-transform duration-200 ${evidenceExpanded ? "rotate-180" : ""}`} />
-                    View more
-                  </button>
-
-                  {evidenceExpanded && (
-                    <div className="mt-3 space-y-3">
-                      <ul className="space-y-2">
-                        {evidenceWithCitations.map((ev, index) => (
-                          <li key={index} className="flex items-start gap-2 text-sm">
-                            <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0" />
-                            <span className="text-muted-foreground leading-relaxed">{ev}</span>
-                          </li>
-                        ))}
-                      </ul>
-                      <ScoreBreakdown
-                        factors={signalData.factors}
-                        onFactorFeedback={signalData.onFactorFeedback ?? ((key, type, detail) =>
-                          console.log("Signal factor feedback:", { company: item.company, factor: key, type, detail })
-                        )}
-                        initialFeedback={signalData.initialFactorFeedback}
-                      />
-                      <SignalApproval.Actions />
-                    </div>
-                  )}
+                <ScoreWhyChips
+                  item={item}
+                  signalData={signalData}
+                  onOpenSignalBucket={onOpenSignalBucket}
+                />
+                <div className="mt-4">
+                  <SignalApproval.Actions />
                 </div>
-                </ScoreFeedback.Root>
-
-                {!evidenceExpanded && <SignalApproval.Actions />}
               </div>
             )
           })()}
@@ -495,6 +432,7 @@ export function PrototypeInboxView({
   hideHoverActions,
   onSuggestedActionFeedback,
   onScoreFeedback,
+  onOpenSignalBucket,
   headerActions,
   onOpenEntityPanel,
   onOpenRecentActivity,
@@ -514,6 +452,8 @@ export function PrototypeInboxView({
   renderBeforeScore,
   renderAfterScore,
   lastActivityTime,
+  renderTitleExtra,
+  renderTitleSubtext,
   sortOptions,
   activeSortId,
   onSortChange,
@@ -741,6 +681,7 @@ export function PrototypeInboxView({
     onOpenEntityPanel,
     onOpenRecentActivity,
     onSuggestedActionFeedback,
+    onScoreFeedback,
     onSignalApprove,
     getSignalApprovalState,
     signalLabels,
@@ -751,7 +692,9 @@ export function PrototypeInboxView({
     renderBeforeScore,
     renderAfterScore,
     lastActivityTime,
-    onScoreFeedback,
+    renderTitleExtra,
+    renderTitleSubtext,
+    onOpenSignalBucket,
   }
 
   return (