@handled-ai/design-system 0.16.2 → 0.17.0

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

@@ -0,0 +1,326 @@
+import "@testing-library/jest-dom/vitest";
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { fireEvent, render, screen, within } 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: "Test Signal",
+  details: "Some details",
+  statusColor: "green",
+  time: "2h ago",
+  company: "Acme Inc",
+  tag1: "renewal",
+};
+
+function makeSignalScore(overrides: Partial<SignalScoreData> = {}): SignalScoreData {
+  return {
+    score: 82,
+    factors: [
+      { key: "trigger", label: "Trigger strength", score: 70, why: "Strong signal" },
+      { key: "fit", label: "Company fit", score: 55, why: "Good fit" },
+    ],
+    whyNow: "Strong signals detected.",
+    evidence: ["Evidence line 1"],
+    confidence: 80,
+    ...overrides,
+  };
+}
+
+function baseProps(overrides: Partial<DetailViewProps> = {}): DetailViewProps {
+  return {
+    item: baseItem,
+    sections: { signalBrief: true, suggestedActions: false, timeline: false },
+    getSignalScore: () => makeSignalScore(),
+    buildSuggestedActions: () => [],
+    buildSourceItems: () => [],
+    accountContacts: [],
+    emailSignature: "",
+    iconMap: {},
+    ...overrides,
+  };
+}
+
+describe("DetailView corrected compact score WHY UX", () => {
+  it("renders priority in metadata row without the old signal score card", () => {
+    render(<DetailView {...baseProps()} />);
+
+    expect(screen.getByRole("button", { name: /urgent priority/i })).toBeInTheDocument();
+    expect(screen.queryByText("Signal score")).toBeNull();
+    expect(screen.queryByText("82")).toBeNull();
+    expect(screen.queryByText("/100")).toBeNull();
+    expect(screen.queryByText("Select a chip for details")).toBeNull();
+    expect(screen.queryByText("How's this score?")).toBeNull();
+  });
+
+  it("uses provided priority label before fallback thresholds", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () => makeSignalScore({ score: 92, urgencyLabel: "Medium" }),
+        })}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /medium priority/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /urgent priority/i })).toBeNull();
+  });
+
+  it("opens priority explanation from metadata independently of score feedback", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({ urgencyExplanation: "Customer activity spiked today." }),
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /urgent priority/i }));
+
+    expect(screen.getByText("Customer activity spiked today.")).toBeInTheDocument();
+    expect(screen.getByText("Score 82/100")).toBeInTheDocument();
+    expect(screen.getByText("Urgent range: 80-100")).toBeInTheDocument();
+    expect(screen.getByText("Why now")).toBeInTheDocument();
+    const priorityPanel = screen.getByRole("region", { name: /priority explanation/i });
+    expect(within(priorityPanel).getByText("Strong signals detected.")).toBeInTheDocument();
+    expect(screen.getByText("Top factor")).toBeInTheDocument();
+    expect(screen.getAllByText("Strong signal").length).toBeGreaterThan(0);
+    expect(screen.getByText("Trigger strength")).toBeInTheDocument();
+    expect(screen.getByText("Company fit")).toBeInTheDocument();
+    expect(screen.queryByText("How's this score?")).toBeNull();
+  });
+
+  it("keeps signal WHY chips collapsed by default and excludes factor-only buckets", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                { key: "signal-a", label: "Treasury activity", kind: "signal", primarySignalId: "sig-1", signals: [{ id: "sig-1", label: "Treasury signal" }] },
+                { key: "factor-b", label: "Relationship depth", kind: "factor", rationale: "Relationship rationale", factorKeys: ["fit"] },
+              ],
+            }),
+        })}
+      />,
+    );
+
+    expect(screen.getByText("Treasury activity")).toBeInTheDocument();
+    expect(screen.queryByText("Relationship depth")).toBeNull();
+    expect(screen.queryByRole("region", { name: /treasury activity details/i })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /treasury activity/i }));
+    expect(screen.getByRole("region", { name: /treasury activity details/i })).toBeInTheDocument();
+  });
+
+  it("resets selected bucket and priority panel when item id changes", () => {
+    const { rerender } = render(<DetailView {...baseProps()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /urgent priority/i }));
+    expect(screen.getByRole("region", { name: /priority explanation/i })).toBeInTheDocument();
+
+    rerender(
+      <DetailView
+        {...baseProps({
+          item: { ...baseItem, id: "case-2", title: "Second Signal" },
+        })}
+      />,
+    );
+
+    expect(screen.queryByRole("region", { name: /priority explanation/i })).toBeNull();
+  });
+
+  it("does not render factor-derived WHY chips when no signal buckets are present", () => {
+    render(<DetailView {...baseProps()} />);
+
+    expect(screen.queryByRole("button", { name: /trigger strength/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: /company fit/i })).toBeNull();
+  });
+
+  it("honors an explicit empty explanationBuckets array", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () => makeSignalScore({ explanationBuckets: [] }),
+        })}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: /trigger strength/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: /company fit/i })).toBeNull();
+  });
+
+  it("does not render a WHY row when no buckets or legacy factors exist", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () => makeSignalScore({ factors: [], explanationBuckets: [] }),
+        })}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /urgent priority/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /trigger strength/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: /company fit/i })).toBeNull();
+  });
+
+  it("exposes aria-expanded and aria-controls for priority and bucket triggers", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                { key: "signal:a/test", label: "Signal A", kind: "signal", signals: [{ id: "sig-a", label: "Signal A event" }] },
+              ],
+            }),
+        })}
+      />,
+    );
+
+    const priorityButton = screen.getByRole("button", { name: /urgent priority/i });
+    expect(priorityButton.getAttribute("aria-expanded")).toBe("false");
+    expect(priorityButton.getAttribute("aria-controls")).toBeTruthy();
+    fireEvent.click(priorityButton);
+    expect(priorityButton.getAttribute("aria-expanded")).toBe("true");
+    expect(document.getElementById(priorityButton.getAttribute("aria-controls")!)).toBeInTheDocument();
+
+    const bucketButton = screen.getByRole("button", { name: /signal a/i });
+    expect(bucketButton.getAttribute("aria-expanded")).toBe("false");
+    expect(bucketButton.getAttribute("aria-controls")).toBeTruthy();
+    fireEvent.click(bucketButton);
+    expect(bucketButton.getAttribute("aria-expanded")).toBe("true");
+    expect(document.getElementById(bucketButton.getAttribute("aria-controls")!)).toBeInTheDocument();
+  });
+
+  it("renders repeated signal groups as one chip with a count and signal-id rows", () => {
+    const onOpenSignalBucket = vi.fn();
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                { key: "signal-repeat", label: "Treasury activity", kind: "signal", signalCount: 3, signalIds: ["sig-1", "sig-2", "sig-3"] },
+              ],
+            }),
+          onOpenSignalBucket,
+        })}
+      />,
+    );
+
+    expect(screen.getAllByRole("button", { name: /treasury activity/i })).toHaveLength(1);
+    expect(screen.getByText("×3")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /treasury activity/i }));
+    const matchingSignals = screen.getByRole("list", { name: /matching signals/i });
+    expect(within(matchingSignals).getAllByRole("button", { name: /treasury activity signal/i })).toHaveLength(3);
+    fireEvent.click(within(matchingSignals).getAllByRole("button", { name: /treasury activity signal/i })[1]);
+    expect(onOpenSignalBucket).toHaveBeenCalledWith({
+      item: baseItem,
+      bucketKey: "signal-repeat",
+      signalId: "sig-2",
+    });
+  });
+
+  it("renders designed matching signal rows from bucket signals", () => {
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                {
+                  key: "signals",
+                  label: "Treasury activity",
+                  kind: "signal",
+                  signals: [
+                    {
+                      id: "sig-1",
+                      label: "ACH volume increased",
+                      description: "Payment activity is 40% above baseline.",
+                      source: "Banking data",
+                      time: "Today",
+                      metric: "+40%",
+                    },
+                  ],
+                },
+              ],
+            }),
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /treasury activity/i }));
+    const matchingSignals = screen.getByRole("list", { name: /matching signals/i });
+    expect(within(matchingSignals).getByText("ACH volume increased")).toBeInTheDocument();
+    expect(within(matchingSignals).getByText("Payment activity is 40% above baseline.")).toBeInTheDocument();
+    expect(within(matchingSignals).getByText("Banking data")).toBeInTheDocument();
+    expect(within(matchingSignals).getByText("+40%")).toBeInTheDocument();
+  });
+
+  it("opens a matching signal row with the selected signal id", () => {
+    const onOpenSignalBucket = vi.fn();
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              explanationBuckets: [
+                {
+                  key: "with-signals",
+                  label: "With signals",
+                  kind: "signal",
+                  signalCount: 2,
+                  signals: [
+                    { id: "sig-1", label: "Latest signal", description: "Newest signal" },
+                    { id: "sig-2", label: "Older signal", description: "Older signal" },
+                  ],
+                },
+              ],
+            }),
+          onOpenSignalBucket,
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /with signals/i }));
+    fireEvent.click(screen.getByRole("button", { name: /older signal/i }));
+
+    expect(onOpenSignalBucket).toHaveBeenCalledWith({
+      item: baseItem,
+      bucketKey: "with-signals",
+      signalId: "sig-2",
+    });
+  });
+
+  it("shows factor feedback in the priority panel, not signal WHY panels", () => {
+    const onFactorFeedback = vi.fn();
+    render(
+      <DetailView
+        {...baseProps({
+          getSignalScore: () =>
+            makeSignalScore({
+              onFactorFeedback,
+              initialFactorFeedback: { fit: { type: "down", detail: "Needs review" } },
+              explanationBuckets: [
+                { key: "signal-a", label: "Signal only", kind: "signal", primarySignalId: "sig-1", signals: [{ id: "sig-1", label: "Signal event" }] },
+              ],
+            }),
+        })}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /signal only/i }));
+    const signalPanel = screen.getByRole("region", { name: /signal only details/i });
+    expect(within(signalPanel).queryByTitle("This factor is accurate")).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: /urgent priority/i }));
+    const priorityPanel = screen.getByRole("region", { name: /priority explanation/i });
+    expect(within(priorityPanel).getAllByTitle("This factor is accurate").length).toBeGreaterThan(0);
+    expect(within(priorityPanel).getByText("Needs review")).toBeInTheDocument();
+  });
+});

package/src/prototype/prototype-config.ts

@@ -36,16 +36,49 @@ export interface QueueItem {
   tag1: string
 }
 
+export type SignalScoreUrgencyLabel = "Low" | "Medium" | "High" | "Urgent"
+
+export interface SignalScoreExplanationSignal {
+  id?: string
+  label: string
+  description?: string
+  source?: string
+  time?: string
+  metric?: string
+}
+
+export interface SignalScoreExplanationBucket {
+  key: string
+  label: string
+  kind: "signal" | "factor" | "merged"
+  score?: number
+  classification?: string
+  rationale?: string
+  evidence?: string[]
+  signals?: SignalScoreExplanationSignal[]
+  primaryMetricLabel?: string
+  primaryMetricValue?: string
+  signalCount?: number
+  signalIds?: string[]
+  primarySignalId?: string
+  factorKeys?: string[]
+}
+
 export interface SignalScoreData {
   score: number
   factors: ScoreFactor[]
   whyNow: string
   evidence: string[]
   confidence: number
+  urgencyLabel?: SignalScoreUrgencyLabel
+  urgencyExplanation?: 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. */
   onScoreFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   onApproveFeedback?: (reasons: string[], detail: string) => void
   onDismissFeedback?: (reasons: string[], detail: string, subReason?: string) => void
+  /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
   initialScoreFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null
   initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string }>
   /** AI-generated signal brief text. When present, rendered in a dedicated section. */
@@ -89,7 +122,9 @@ export interface InboxViewConfig {
   hideToolbarActions?: boolean
   hideHoverActions?: boolean
   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
+  onOpenSignalBucket?: (args: { item: QueueItem; bucketKey: string; signalId: 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

@@ -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"]
@@ -138,7 +139,7 @@ export interface DetailViewProps {
   lastActivityTime?: string
   /** 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 +152,7 @@ export function DetailView({
   sections,
   getSignalScore,
   buildSuggestedActions,
-  buildSourceItems,
+  buildSourceItems: _buildSourceItems,
   getTimelineEvents,
   accountContacts,
   emailSignature,
@@ -159,6 +160,7 @@ export function DetailView({
   onOpenEntityPanel,
   onOpenRecentActivity,
   onSuggestedActionFeedback: _onSuggestedActionFeedback,
+  onScoreFeedback: _onScoreFeedback,
   onSignalApprove,
   getSignalApprovalState,
   signalLabels,
@@ -170,32 +172,32 @@ export function DetailView({
   renderAfterScore,
   lastActivityTime,
   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],
@@ -252,18 +254,13 @@ export function DetailView({
           <h1 className="mb-3 text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
 
           <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 +280,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 +325,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 +420,7 @@ export function PrototypeInboxView({
   hideHoverActions,
   onSuggestedActionFeedback,
   onScoreFeedback,
+  onOpenSignalBucket,
   headerActions,
   onOpenEntityPanel,
   onOpenRecentActivity,
@@ -741,6 +667,7 @@ export function PrototypeInboxView({
     onOpenEntityPanel,
     onOpenRecentActivity,
     onSuggestedActionFeedback,
+    onScoreFeedback,
     onSignalApprove,
     getSignalApprovalState,
     signalLabels,
@@ -751,7 +678,7 @@ export function PrototypeInboxView({
     renderBeforeScore,
     renderAfterScore,
     lastActivityTime,
-    onScoreFeedback,
+    onOpenSignalBucket,
   }
 
   return (