@handled-ai/design-system 0.18.18 → 0.18.20

package/src/components/__tests__/score-ring.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vitest"
+import React from "react"
+import { render } from "@testing-library/react"
+import { ScoreRing, getScoreColor, getScoreTrackColor } from "../score-ring"
+
+function renderRing(score: number, intent: React.ComponentProps<typeof ScoreRing>["intent"]) {
+  const { container } = render(<ScoreRing score={score} intent={intent} />)
+  const circles = container.querySelectorAll("circle")
+  return {
+    trackClass: circles[0]?.getAttribute("class") ?? "",
+    fillClass: circles[1]?.getAttribute("class") ?? "",
+  }
+}
+
+describe("ScoreRing intent-aware colors", () => {
+  it("preserves positive high-is-good colors", () => {
+    expect(getScoreColor(90, 100)).toBe("text-emerald-500")
+    expect(getScoreColor(20, 100)).toBe("text-red-500")
+
+    expect(renderRing(90, "positive").fillClass).toContain("text-emerald-500")
+    expect(renderRing(20, "positive").fillClass).toContain("text-red-500")
+  })
+
+  it("uses red/orange/amber/neutral colors for urgency", () => {
+    expect(getScoreColor(90, 100, "urgency")).toBe("text-red-600")
+    expect(getScoreColor(65, 100, "urgency")).toBe("text-orange-500")
+    expect(getScoreColor(45, 100, "urgency")).toBe("text-amber-500")
+    expect(getScoreColor(20, 100, "urgency")).toBe("text-neutral-400")
+    expect(getScoreTrackColor(20, 100, "urgency")).toBe("text-neutral-400/15")
+
+    expect(renderRing(90, "urgency").fillClass).toContain("text-red-600")
+    expect(renderRing(20, "urgency").fillClass).toContain("text-neutral-400")
+    expect(renderRing(20, "urgency").fillClass).not.toContain("text-red")
+  })
+
+  it("uses red for high risk and neutral for low risk", () => {
+    expect(getScoreColor(90, 100, "risk")).toBe("text-red-600")
+    expect(getScoreColor(20, 100, "risk")).toBe("text-neutral-400")
+
+    expect(renderRing(90, "risk").fillClass).toContain("text-red-600")
+    expect(renderRing(20, "risk").trackClass).toContain("text-neutral-400/15")
+  })
+})

package/src/components/__tests__/score-semantics.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest"
+import {
+  POSITIVE_SCORE_CLASSES,
+  RISK_SCORE_CLASSES,
+  URGENCY_SCORE_CLASSES,
+  getPositiveLevel,
+  getRiskLevel,
+  getScoreToneClasses,
+  getUrgencyLevel,
+  getUrgencyRange,
+} from "../score-semantics"
+
+describe("score semantics", () => {
+  it.each([
+    [0, "Low"],
+    [34, "Low"],
+    [35, "Medium"],
+    [59, "Medium"],
+    [60, "High"],
+    [79, "High"],
+    [80, "Urgent"],
+    [100, "Urgent"],
+  ] as const)("maps urgency score %i to %s", (score, level) => {
+    expect(getUrgencyLevel(score)).toBe(level)
+  })
+
+  it("returns urgency ranges", () => {
+    expect(getUrgencyRange("Low")).toBe("0-34")
+    expect(getUrgencyRange("Medium")).toBe("35-59")
+    expect(getUrgencyRange("High")).toBe("60-79")
+    expect(getUrgencyRange("Urgent")).toBe("80-100")
+  })
+
+  it("uses the approved urgency palette", () => {
+    expect(URGENCY_SCORE_CLASSES.Urgent).toEqual({
+      solid: "bg-red-600 text-white",
+      outline: "border-red-300 bg-red-50 text-red-800",
+      dot: "bg-red-600",
+      trigger: "border-red-300 bg-red-50 text-red-800",
+      hover: "hover:bg-red-100",
+      open: "bg-red-100",
+    })
+    expect(URGENCY_SCORE_CLASSES.High.trigger).toBe("border-orange-300 bg-orange-50 text-orange-800")
+    expect(URGENCY_SCORE_CLASSES.Medium.dot).toBe("bg-amber-500")
+    expect(URGENCY_SCORE_CLASSES.Low).toEqual({
+      solid: "bg-neutral-300 text-neutral-900",
+      outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
+      dot: "bg-neutral-400",
+      trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
+      hover: "hover:bg-neutral-100",
+      open: "bg-neutral-100",
+    })
+  })
+
+  it("maps risk scores without urgency labels", () => {
+    expect(getRiskLevel(0)).toBe("Low Risk")
+    expect(getRiskLevel(39)).toBe("Low Risk")
+    expect(getRiskLevel(40)).toBe("Medium Risk")
+    expect(getRiskLevel(69)).toBe("Medium Risk")
+    expect(getRiskLevel(70)).toBe("High Risk")
+    expect(RISK_SCORE_CLASSES["High Risk"].solid).toBe("bg-red-600 text-white")
+    expect(RISK_SCORE_CLASSES["Medium Risk"].dot).toBe("bg-orange-500")
+    expect(RISK_SCORE_CLASSES["Low Risk"].trigger).toBe("border-neutral-200 bg-neutral-50 text-neutral-700")
+  })
+
+  it("preserves positive high-is-good semantics", () => {
+    expect(getPositiveLevel(39)).toBe("Low")
+    expect(getPositiveLevel(40)).toBe("Medium")
+    expect(getPositiveLevel(70)).toBe("High")
+    expect(POSITIVE_SCORE_CLASSES.High.solid).toBe("bg-emerald-500 text-white")
+    expect(POSITIVE_SCORE_CLASSES.Medium.solid).toBe("bg-amber-500 text-white")
+    expect(POSITIVE_SCORE_CLASSES.Low.solid).toBe("bg-red-500 text-white")
+  })
+
+  it("returns static urgency classes from the urgency map", () => {
+    expect(getScoreToneClasses(0, "urgency")).toBe(URGENCY_SCORE_CLASSES.Low)
+    expect(getScoreToneClasses(34, "urgency")).toBe(URGENCY_SCORE_CLASSES.Low)
+    expect(getScoreToneClasses(35, "urgency")).toBe(URGENCY_SCORE_CLASSES.Medium)
+    expect(getScoreToneClasses(59, "urgency")).toBe(URGENCY_SCORE_CLASSES.Medium)
+    expect(getScoreToneClasses(60, "urgency")).toBe(URGENCY_SCORE_CLASSES.High)
+    expect(getScoreToneClasses(79, "urgency")).toBe(URGENCY_SCORE_CLASSES.High)
+    expect(getScoreToneClasses(80, "urgency")).toBe(URGENCY_SCORE_CLASSES.Urgent)
+    expect(getScoreToneClasses(100, "urgency")).toBe(URGENCY_SCORE_CLASSES.Urgent)
+  })
+
+  it("returns static risk classes from risk labels only", () => {
+    expect(getScoreToneClasses(39, "risk")).toBe(RISK_SCORE_CLASSES["Low Risk"])
+    expect(getScoreToneClasses(40, "risk")).toBe(RISK_SCORE_CLASSES["Medium Risk"])
+    expect(getScoreToneClasses(70, "risk")).toBe(RISK_SCORE_CLASSES["High Risk"])
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("Low")
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("Medium")
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("High")
+    expect(RISK_SCORE_CLASSES).not.toHaveProperty("Urgent")
+  })
+
+  it("returns static positive classes from high-is-good map", () => {
+    expect(getScoreToneClasses(39, "positive")).toBe(POSITIVE_SCORE_CLASSES.Low)
+    expect(getScoreToneClasses(40, "positive")).toBe(POSITIVE_SCORE_CLASSES.Medium)
+    expect(getScoreToneClasses(70, "positive")).toBe(POSITIVE_SCORE_CLASSES.High)
+  })
+})

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

@@ -92,16 +92,17 @@ describe("SignalPriorityPopover", () => {
   it("applies urgency-specific default classes to the trigger", () => {
     render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Urgent" />)
     const trigger = screen.getByTestId("priority-popover-trigger")
-    expect(trigger.className).toContain("border-red-200")
+    expect(trigger.className).toContain("border-red-300")
     expect(trigger.className).toContain("bg-red-50")
-    expect(trigger.className).toContain("text-red-700")
+    expect(trigger.className).toContain("text-red-800")
   })
 
   it("applies Low urgency classes", () => {
     render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Low" score={20} />)
     const trigger = screen.getByTestId("priority-popover-trigger")
-    expect(trigger.className).toContain("border-blue-200")
-    expect(trigger.className).toContain("bg-blue-50")
+    expect(trigger.className).toContain("border-neutral-200")
+    expect(trigger.className).toContain("bg-neutral-50")
+    expect(trigger.className).toContain("text-neutral-700")
   })
 
   it("opens the popover on trigger click and shows content", () => {
@@ -335,8 +336,9 @@ describe("SignalPriorityPopover", () => {
   it("applies Medium urgency classes correctly", () => {
     render(<SignalPriorityPopover {...defaultProps} urgencyLabel="Medium" score={45} />)
     const trigger = screen.getByTestId("priority-popover-trigger")
-    expect(trigger.className).toContain("border-amber-200")
+    expect(trigger.className).toContain("border-amber-300")
     expect(trigger.className).toContain("bg-amber-50")
+    expect(trigger.className).toContain("text-amber-800")
     expect(trigger.textContent).toContain("Medium Priority")
   })
 })

package/src/components/__tests__/virtualized-data-table.test.tsx

@@ -554,3 +554,56 @@ describe("VirtualizedDataTable — dropdown gating", () => {
     expect(triggers.length).toBe(1);
   });
 });
+
+
+// ─── Group 8: Overflow-safe header labels ───────────────────────────────────
+
+describe("VirtualizedDataTable — overflow-safe header labels", () => {
+  it("renders a long sortable header with min-width and truncation structure", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header:
+          "Extremely Long Relationship Manager Ownership Header That Should Truncate",
+        size: 120,
+        meta: { sortKey: "name" },
+      },
+    ];
+
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn={null}
+      />,
+    );
+
+    const header = container.querySelector('[role="columnheader"]')!;
+    expect(header.className).toContain("min-w-0");
+    expect(header.className).toContain("items-center");
+
+    const sortButton = Array.from(header.querySelectorAll("button")).find(
+      (button) => button.getAttribute("aria-label") !== "Column actions",
+    )!;
+    expect(sortButton.className).toContain("min-w-0");
+    expect(sortButton.className).toContain("flex-1");
+    expect(sortButton.className).toContain("items-center");
+
+    const label = sortButton.querySelector("span")!;
+    expect(label.textContent).toBe(
+      "Extremely Long Relationship Manager Ownership Header That Should Truncate",
+    );
+    expect(label.className).toContain("min-w-0");
+    expect(label.className).toContain("truncate");
+
+    const sortIcon = sortButton.querySelector("svg")!;
+    expect(sortIcon.getAttribute("class")).toContain("shrink-0");
+
+    const actionsButton = header.querySelector(
+      'button[aria-label="Column actions"]',
+    )!;
+    expect(actionsButton.className).toContain("shrink-0");
+  });
+});

package/src/components/data-table.tsx

@@ -892,6 +892,7 @@ export function DataTable({
             title={data.title}
             description={data.description}
             score={scoreModal.type === "Risk" ? scoreModal.row.riskScore : scoreModal.row.expansionScore}
+            scoreIntent={scoreModal.type === "Risk" ? "risk" : "positive"}
             whyNow={data.whyNow}
             evidence={data.evidence}
             factors={data.factors}

package/src/components/score-analysis-modal.tsx

@@ -7,6 +7,7 @@ import { ScoreRing } from "./score-ring"
 import { ScoreBreakdown, type ScoreFactor } from "./score-breakdown"
 import { SignalApproval } from "./signal-feedback-inline"
 import { X } from "lucide-react"
+import type { ScoreIntent } from "./score-semantics"
 
 interface ScoreAnalysisModalProps {
   open: boolean
@@ -26,10 +27,25 @@ interface ScoreAnalysisModalProps {
   onDismiss?: (reasons: string[], detail: string) => void
   /** When true, renders as an absolute-positioned inline panel instead of a Radix Sheet portal. Useful when the component is inside a container that should not be escaped. */
   useInlinePanel?: boolean
+  scoreIntent?: ScoreIntent
 }
 
-function getScoreLabel(score: number, denominator: number) {
+function getScoreLabel(score: number, denominator: number, intent: ScoreIntent = "positive") {
   const pct = (score / denominator) * 100
+
+  if (intent === "urgency") {
+    if (pct >= 80) return { text: "URGENT", className: "text-red-600" }
+    if (pct >= 60) return { text: "HIGH", className: "text-orange-600" }
+    if (pct >= 35) return { text: "MEDIUM", className: "text-amber-600" }
+    return { text: "LOW", className: "text-neutral-600" }
+  }
+
+  if (intent === "risk") {
+    if (pct >= 70) return { text: "High Risk", className: "text-red-600" }
+    if (pct >= 40) return { text: "Medium Risk", className: "text-amber-600" }
+    return { text: "Low Risk", className: "text-neutral-600" }
+  }
+
   if (pct >= 70) return { text: "HIGH", className: "text-emerald-600" }
   if (pct >= 40) return { text: "MEDIUM", className: "text-amber-600" }
   return { text: "LOW", className: "text-red-600" }
@@ -52,8 +68,9 @@ function ScoreAnalysisModal({
   onApproveFeedback,
   onDismiss,
   useInlinePanel = false,
+  scoreIntent = "positive",
 }: ScoreAnalysisModalProps) {
-  const label = getScoreLabel(score, denominator)
+  const label = getScoreLabel(score, denominator, scoreIntent)
 
   const panelContent = (
     <SignalApproval.Root
@@ -83,7 +100,7 @@ function ScoreAnalysisModal({
 
             <div className="space-y-6">
               <div className="flex flex-col items-center gap-3">
-                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} />
+                <ScoreRing score={score} denominator={denominator} size={120} strokeWidth={10} intent={scoreIntent} />
                 <Badge variant="outline">
                   {Math.round((score / denominator) * 100)}% Score
                   {" \u2014 "}
@@ -111,7 +128,7 @@ function ScoreAnalysisModal({
               {factors && factors.length > 0 && (
                 <div>
                   <h3 className="font-semibold mb-2 text-sm">Score Breakdown</h3>
-                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} />
+                  <ScoreBreakdown factors={factors} onFactorFeedback={onFactorFeedback} scoreIntent={scoreIntent} />
                 </div>
               )}
             </div>
@@ -168,5 +185,5 @@ function ScoreAnalysisModal({
 
 const ScoreAnalysisPanel = ScoreAnalysisModal
 
-export { ScoreAnalysisModal, ScoreAnalysisPanel }
+export { ScoreAnalysisModal, ScoreAnalysisPanel, getScoreLabel }
 export type { ScoreAnalysisModalProps }

package/src/components/score-breakdown.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 import { ThumbsUp, ThumbsDown } from "lucide-react"
 import { cn } from "../lib/utils"
+import type { ScoreIntent } from "./score-semantics"
+import { getScoreColor } from "./score-ring"
 
 export interface ScoreFactor {
   key: string
@@ -12,10 +14,8 @@ export interface ScoreFactor {
   why: string
 }
 
-function getFactorBarColor(score: number) {
-  if (score >= 70) return "bg-emerald-500"
-  if (score >= 40) return "bg-amber-500"
-  return "bg-red-500"
+function getFactorBarColor(score: number, intent: ScoreIntent = "positive") {
+  return getScoreColor(score, 100, intent).replace("text-", "bg-")
 }
 
 function getRiskBadgeStyle(risk: "Low" | "Medium" | "High") {
@@ -34,6 +34,7 @@ interface ScoreBreakdownProps {
   onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
   className?: string
   initialFeedback?: Record<string, { type: "up" | "down"; detail: string }>
+  scoreIntent?: ScoreIntent
 }
 
 function deriveInitialState<T>(
@@ -47,7 +48,7 @@ function deriveInitialState<T>(
   return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))
 }
 
-function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback }: ScoreBreakdownProps) {
+function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback, scoreIntent = "positive" }: ScoreBreakdownProps) {
   const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>(
     () => deriveInitialState(initialFeedback, (v) => v.type)
   )
@@ -170,7 +171,7 @@ function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback
             {factor.score !== null && (
               <div className="w-full h-1 bg-muted rounded-full overflow-hidden">
                 <div
-                  className={cn("h-full rounded-full", getFactorBarColor(factor.score))}
+                  className={cn("h-full rounded-full", getFactorBarColor(factor.score, scoreIntent))}
                   style={{ width: `${factor.score}%` }}
                 />
               </div>

package/src/components/score-ring.tsx

@@ -1,15 +1,44 @@
 import * as React from "react"
 import { cn } from "../lib/utils"
+import type { ScoreIntent } from "./score-semantics"
 
-function getScoreColor(score: number, denominator: number) {
+function getScoreColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
   const pct = (score / denominator) * 100
+
+  if (intent === "urgency") {
+    if (pct >= 80) return "text-red-600"
+    if (pct >= 60) return "text-orange-500"
+    if (pct >= 35) return "text-amber-500"
+    return "text-neutral-400"
+  }
+
+  if (intent === "risk") {
+    if (pct >= 70) return "text-red-600"
+    if (pct >= 40) return "text-amber-500"
+    return "text-neutral-400"
+  }
+
   if (pct >= 70) return "text-emerald-500"
   if (pct >= 40) return "text-amber-500"
   return "text-red-500"
 }
 
-function getScoreTrackColor(score: number, denominator: number) {
+function getScoreTrackColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
   const pct = (score / denominator) * 100
+
+  if (intent === "urgency") {
+    if (pct >= 80) return "text-red-600/15"
+    if (pct >= 60) return "text-orange-500/15"
+    if (pct >= 35) return "text-amber-500/15"
+    return "text-neutral-400/15"
+  }
+
+  if (intent === "risk") {
+    if (pct >= 70) return "text-red-600/15"
+    if (pct >= 40) return "text-amber-500/15"
+    return "text-neutral-400/15"
+  }
+
   if (pct >= 70) return "text-emerald-500/15"
   if (pct >= 40) return "text-amber-500/15"
   return "text-red-500/15"
@@ -22,6 +51,7 @@ interface ScoreRingProps {
   strokeWidth?: number
   className?: string
   showLabel?: boolean
+  intent?: ScoreIntent
 }
 
 function ScoreRing({
@@ -31,6 +61,7 @@ function ScoreRing({
   strokeWidth = 10,
   className,
   showLabel = true,
+  intent = "positive",
 }: ScoreRingProps) {
   const radius = (size - strokeWidth) / 2
   const circumference = 2 * Math.PI * radius
@@ -53,7 +84,7 @@ function ScoreRing({
           fill="none"
           stroke="currentColor"
           strokeWidth={strokeWidth}
-          className={getScoreTrackColor(score, denominator)}
+          className={getScoreTrackColor(score, denominator, intent)}
         />
         {/* Fill */}
         <circle
@@ -66,7 +97,7 @@ function ScoreRing({
           strokeLinecap="round"
           strokeDasharray={circumference}
           strokeDashoffset={offset}
-          className={cn("transition-all duration-500", getScoreColor(score, denominator))}
+          className={cn("transition-all duration-500", getScoreColor(score, denominator, intent))}
         />
       </svg>
       {showLabel && (
@@ -83,5 +114,5 @@ function ScoreRing({
   )
 }
 
-export { ScoreRing, getScoreColor }
+export { ScoreRing, getScoreColor, getScoreTrackColor }
 export type { ScoreRingProps }

package/src/components/score-semantics.ts

@@ -0,0 +1,154 @@
+export type ScoreIntent = "urgency" | "risk" | "positive"
+
+export type UrgencyLevel = "Low" | "Medium" | "High" | "Urgent"
+export type RiskLevel = "Low Risk" | "Medium Risk" | "High Risk"
+export type PositiveLevel = "Low" | "Medium" | "High"
+
+export type ScoreSemanticClasses = {
+  solid: string
+  outline: string
+  dot: string
+  trigger: string
+  hover: string
+  open: string
+}
+
+export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> = {
+  Urgent: {
+    solid: "bg-red-600 text-white",
+    outline: "border-red-300 bg-red-50 text-red-800",
+    dot: "bg-red-600",
+    trigger: "border-red-300 bg-red-50 text-red-800",
+    hover: "hover:bg-red-100",
+    open: "bg-red-100",
+  },
+  High: {
+    solid: "bg-orange-500 text-white",
+    outline: "border-orange-300 bg-orange-50 text-orange-800",
+    dot: "bg-orange-500",
+    trigger: "border-orange-300 bg-orange-50 text-orange-800",
+    hover: "hover:bg-orange-100",
+    open: "bg-orange-100",
+  },
+  Medium: {
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+  },
+  Low: {
+    solid: "bg-neutral-300 text-neutral-900",
+    outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    dot: "bg-neutral-400",
+    trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    hover: "hover:bg-neutral-100",
+    open: "bg-neutral-100",
+  },
+}
+
+export const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses> = {
+  "High Risk": {
+    solid: "bg-red-600 text-white",
+    outline: "border-red-300 bg-red-50 text-red-800",
+    dot: "bg-red-600",
+    trigger: "border-red-300 bg-red-50 text-red-800",
+    hover: "hover:bg-red-100",
+    open: "bg-red-100",
+  },
+  "Medium Risk": {
+    solid: "bg-orange-500 text-white",
+    outline: "border-orange-300 bg-orange-50 text-orange-800",
+    dot: "bg-orange-500",
+    trigger: "border-orange-300 bg-orange-50 text-orange-800",
+    hover: "hover:bg-orange-100",
+    open: "bg-orange-100",
+  },
+  "Low Risk": {
+    solid: "bg-neutral-300 text-neutral-900",
+    outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    dot: "bg-neutral-400",
+    trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
+    hover: "hover:bg-neutral-100",
+    open: "bg-neutral-100",
+  },
+}
+
+export const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses> = {
+  High: {
+    solid: "bg-emerald-500 text-white",
+    outline: "border-emerald-300 bg-emerald-50 text-emerald-800",
+    dot: "bg-emerald-500",
+    trigger: "border-emerald-300 bg-emerald-50 text-emerald-800",
+    hover: "hover:bg-emerald-100",
+    open: "bg-emerald-100",
+  },
+  Medium: {
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+  },
+  Low: {
+    solid: "bg-red-500 text-white",
+    outline: "border-red-300 bg-red-50 text-red-800",
+    dot: "bg-red-500",
+    trigger: "border-red-300 bg-red-50 text-red-800",
+    hover: "hover:bg-red-100",
+    open: "bg-red-100",
+  },
+}
+
+export const SCORE_TONE_CLASSES: Record<string, string> = {
+  alert: "bg-red-50 text-red-600",
+  warn: "bg-amber-50 text-amber-600",
+  info: "bg-blue-50 text-blue-600",
+}
+
+export const DEFAULT_SCORE_TONE_CLASS = "bg-muted text-muted-foreground"
+
+export function getUrgencyLevel(score: number): UrgencyLevel {
+  if (score >= 80) return "Urgent"
+  if (score >= 60) return "High"
+  if (score >= 35) return "Medium"
+  return "Low"
+}
+
+export function getUrgencyRange(label: UrgencyLevel): string {
+  switch (label) {
+    case "Urgent":
+      return "80-100"
+    case "High":
+      return "60-79"
+    case "Medium":
+      return "35-59"
+    case "Low":
+      return "0-34"
+  }
+}
+
+export function getRiskLevel(score: number): RiskLevel {
+  if (score >= 70) return "High Risk"
+  if (score >= 40) return "Medium Risk"
+  return "Low Risk"
+}
+
+export function getPositiveLevel(score: number): PositiveLevel {
+  if (score >= 70) return "High"
+  if (score >= 40) return "Medium"
+  return "Low"
+}
+
+export function getScoreToneClasses(score: number, intent: ScoreIntent): ScoreSemanticClasses {
+  switch (intent) {
+    case "urgency":
+      return URGENCY_SCORE_CLASSES[getUrgencyLevel(score)]
+    case "risk":
+      return RISK_SCORE_CLASSES[getRiskLevel(score)]
+    case "positive":
+      return POSITIVE_SCORE_CLASSES[getPositiveLevel(score)]
+  }
+}

package/src/components/score-why-chips.tsx

@@ -17,6 +17,12 @@ import type { LucideIcon } from "lucide-react"
 import { FeedbackFooter } from "./feedback-primitives"
 import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import { cn } from "../lib/utils"
+import {
+  DEFAULT_SCORE_TONE_CLASS,
+  SCORE_TONE_CLASSES,
+  getUrgencyLevel,
+  getUrgencyRange,
+} from "./score-semantics"
 import type {
   QueueItem,
   SignalScoreData,
@@ -33,24 +39,11 @@ export function getSignalScoreUrgencyLabel(
   score: number,
   providedLabel?: SignalScoreUrgencyLabel,
 ): SignalScoreUrgencyLabel {
-  if (providedLabel) return providedLabel
-  if (score >= 80) return "Urgent"
-  if (score >= 60) return "High"
-  if (score >= 35) return "Medium"
-  return "Low"
+  return providedLabel ?? getUrgencyLevel(score)
 }
 
 export function scoreRangeForUrgency(label: SignalScoreUrgencyLabel): string {
-  switch (label) {
-    case "Urgent":
-      return "80-100"
-    case "High":
-      return "60-79"
-    case "Medium":
-      return "35-59"
-    case "Low":
-      return "0-34"
-  }
+  return getUrgencyRange(label)
 }
 
 function makeDomId(...parts: Array<string | undefined>): string {
@@ -107,15 +100,11 @@ function resolveIcon(iconName?: string): LucideIcon {
 // Static tone class maps (REQUIRED for Tailwind v4 source scanning)
 // ---------------------------------------------------------------------------
 
-/** Shared tone-to-class map. Re-exported for signal-priority-popover. */
-export const SIGNAL_TONE_CLASSES: Record<string, string> = {
-  alert: "bg-red-50 text-red-600",
-  warn: "bg-amber-50 text-amber-600",
-  info: "bg-blue-50 text-blue-600",
-}
+/** Shared tone-to-class map. Re-exported for backward compatibility. */
+export const SIGNAL_TONE_CLASSES: Record<string, string> = SCORE_TONE_CLASSES
 
-/** Default tone for missing/unknown tone values */
-export const DEFAULT_TONE_CLASS = "bg-muted text-muted-foreground"
+/** Default tone for missing/unknown tone values. Re-exported for backward compatibility. */
+export const DEFAULT_TONE_CLASS = DEFAULT_SCORE_TONE_CLASS
 
 // ---------------------------------------------------------------------------
 // Em-dash fallback for missing slot data