@handled-ai/design-system 0.11.3 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.11.3",
+  "version": "0.13.0",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",
@@ -171,9 +171,11 @@
     "eslint": "^9.32.0",
     "eslint-config-next": "15.3.1",
     "happy-dom": "^20.9.0",
+    "lucide-react": "^1.14.0",
     "next": "15.5.9",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "recharts": "^3.8.1",
     "shadcn": "^3.0.0",
     "tailwindcss": "^4.1.11",
     "three": "^0.183.1",

package/src/components/__tests__/score-feedback-initial.test.tsx

@@ -85,7 +85,7 @@ describe("ScoreFeedback.Root — initialFeedback prop", () => {
     expect(screen.queryByText("Noted")).toBeNull();
   });
 
-  it("renders submitted pills from initialFeedback", () => {
+  it("does NOT render pills inline in submitted state (compact trigger)", () => {
     render(
       <Wrapper
         initialFeedback={makeInitialScoreFeedback({
@@ -93,28 +93,32 @@ describe("ScoreFeedback.Root — initialFeedback prop", () => {
         })}
       />,
     );
-    expect(screen.getByText("Right timing")).toBeDefined();
-    expect(screen.getByText("Accurate data")).toBeDefined();
+    // Pills are stored in state but not rendered in the compact trigger
+    expect(screen.queryByText("Right timing")).toBeNull();
+    expect(screen.queryByText("Accurate data")).toBeNull();
+    // Only the "Noted" label is visible
+    expect(screen.getByText("Noted")).toBeDefined();
   });
 
-  it("renders submitted detail text from initialFeedback", () => {
+  it("does NOT render detail text inline in submitted state (compact trigger)", () => {
     render(
       <Wrapper
         initialFeedback={makeInitialScoreFeedback({ detail: "Score looks correct." })}
       />,
     );
-    expect(screen.getByText("Score looks correct.")).toBeDefined();
+    // Detail text is stored in state but not rendered in the compact trigger
+    expect(screen.queryByText("Score looks correct.")).toBeNull();
+    expect(screen.getByText("Noted")).toBeDefined();
   });
 
-  it("minimal initialFeedback (no pills, no detail) still shows Noted without edit button", () => {
+  it("minimal initialFeedback (no pills, no detail) shows Noted as clickable button", () => {
     const { container } = render(
       <Wrapper initialFeedback={makeMinimalInitialScoreFeedback("up")} />,
     );
     expect(screen.getByText("Noted")).toBeDefined();
-    // No pill text to find — just check no crash
+    // The submitted state renders as a single compact button
     const buttons = container.querySelectorAll("button");
-    // The edit button requires pills.length > 0 || detail, so no edit button here
-    expect(buttons.length).toBe(0);
+    expect(buttons.length).toBe(1);
   });
 });
 
@@ -226,7 +230,7 @@ describe("ScoreFeedback.Root — onSubmitFeedback callback", () => {
 });
 
 describe("ScoreFeedback.Root — editSubmitted", () => {
-  it("clicking the pills/detail edit area restores feedback into editing state", async () => {
+  it("clicking the compact 'Noted' button restores feedback into editing state", async () => {
     const { container } = render(
       <Wrapper
         initialFeedback={makeInitialScoreFeedback({
@@ -236,9 +240,10 @@ describe("ScoreFeedback.Root — editSubmitted", () => {
       />,
     );
 
-    // The edit button (wraps pills + detail) should be present
+    // The compact submitted button should be present
     const editButton = container.querySelector("button");
     expect(editButton).not.toBeNull();
+    expect(screen.getByText("Noted")).toBeDefined();
 
     await act(async () => {
       fireEvent.click(editButton!);

package/src/components/account-contacts-popover.tsx

@@ -60,7 +60,12 @@ export function AccountContactsPopover({
       let left = rect.right - popoverWidth
       if (left < 16) left = 16
       if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth
-      setPopoverStyle({ position: "fixed", top: rect.bottom + 4, left })
+      const popoverHeight = 320;
+      const spaceBelow = window.innerHeight - rect.bottom - 8;
+      const spaceAbove = rect.top - 8;
+      const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;
+      const top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4;
+      setPopoverStyle({ position: "fixed", top: Math.max(8, top), left, maxHeight: placeAbove ? spaceAbove : spaceBelow })
     }
   }, [open])
 
@@ -70,7 +75,7 @@ export function AccountContactsPopover({
       {open && (
         <>
           <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div style={popoverStyle} className="fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150">
+          <div style={popoverStyle} className="fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150 overflow-y-auto">
             <div className="px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide">
               Account Contacts
             </div>

package/src/components/score-feedback.tsx

@@ -135,45 +135,23 @@ function Trigger({ className }: { className?: string }) {
   const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()
 
   if (notedType || (submittedFeedback && !thumbState)) {
+    const label = notedType
+      ? notedType === "up" ? "Noted" : "Recorded"
+      : submittedFeedback?.type === "up" ? "Noted" : "Recorded"
+
     return (
-      <div className={cn("shrink-0", className)}>
-        <div className="flex items-center gap-1">
-          <Check className="w-3 h-3 text-emerald-500" />
-          <span className="text-[11px] text-muted-foreground">
-            {notedType
-              ? notedType === "up" ? "Noted" : "Recorded"
-              : submittedFeedback?.type === "up" ? "Noted" : "Recorded"}
-          </span>
-        </div>
-        {submittedFeedback && (submittedFeedback.pills.length > 0 || submittedFeedback.detail) && (
-          <button
-            type="button"
-            onClick={editSubmitted}
-            className="mt-1.5 w-full text-left space-y-1 group cursor-pointer"
-          >
-            {submittedFeedback.pills.length > 0 && (
-              <div className="flex flex-wrap gap-1">
-                {submittedFeedback.pills.map((p) => (
-                  <span
-                    key={p}
-                    className={cn(
-                      "rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80",
-                      submittedFeedback.type === "up"
-                        ? "border-emerald-200/60 bg-emerald-50/50 text-emerald-700/70"
-                        : "border-red-200/60 bg-red-50/50 text-red-700/70"
-                    )}
-                  >
-                    {p}
-                  </span>
-                ))}
-              </div>
-            )}
-            {submittedFeedback.detail && (
-              <p className="text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors">{submittedFeedback.detail}</p>
-            )}
-          </button>
+      <button
+        type="button"
+        onClick={submittedFeedback ? editSubmitted : undefined}
+        className={cn(
+          "flex items-center gap-1 shrink-0 rounded px-1.5 py-1 transition-colors",
+          submittedFeedback ? "cursor-pointer hover:bg-muted/50" : "cursor-default",
+          className,
         )}
-      </div>
+      >
+        <Check className="w-3 h-3 text-emerald-500" />
+        <span className="text-[11px] text-muted-foreground">{label}</span>
+      </button>
     )
   }
 

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

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Check, CirclePlus, ExternalLink, Lock, ThumbsDown } from "lucide-react"
+import { Check, CirclePlus, ExternalLink, Loader2, Lock, ThumbsDown } from "lucide-react"
 
 interface DismissReasonNode {
   label: string
@@ -105,6 +105,9 @@ interface SignalApprovalContextValue {
   scheduledTime?: string
   labels: Required<SignalApprovalLabels>
   hideApproveButton?: boolean
+  approveButtonIconUrl?: string
+  opportunityPreview?: RootProps['opportunityPreview']
+  requestingApproval: boolean
   approve: () => void
   submitApproveFeedback: (reasons: string[], detail: string) => void
   skipApproveFeedback: () => void
@@ -131,6 +134,23 @@ interface RootProps {
   labels?: SignalApprovalLabels
   /** When true, the approve/create-opportunity button is hidden but the dismiss button remains. */
   hideApproveButton?: boolean
+  /** 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
+  }
+  /**
+   * Async callback fired when the user clicks the approve button, BEFORE
+   * transitioning to the "confirming" state. While the promise is pending,
+   * the button shows a loading spinner. On resolve, transitions to "confirming".
+   * On reject, stays in "pending".
+   */
+  onRequestApproval?: () => Promise<void>
   /**
    * Called when the user confirms the approval action.
    *
@@ -145,9 +165,10 @@ interface RootProps {
   onDismiss?: (reasons: string[], detail: string, subReason?: string) => void
 }
 
-function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, onApprove, onApproveFeedback, onDismiss }: RootProps) {
+function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, approveButtonIconUrl, opportunityPreview, onRequestApproval, onApprove, onApproveFeedback, onDismiss }: RootProps) {
   const labels = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides])
   const [approvalState, setApprovalState] = React.useState<ApprovalState>(initialApprovalState ?? "pending")
+  const [requestingApproval, setRequestingApproval] = React.useState(false)
 
   // Guard against state updates after unmount (e.g. user navigates away while
   // an async onApprove promise is still in flight).
@@ -157,8 +178,24 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   }, [])
 
   const requestApproval = React.useCallback(() => {
-    setApprovalState("confirming")
-  }, [])
+    if (onRequestApproval) {
+      setRequestingApproval(true)
+      onRequestApproval()
+        .then(() => {
+          if (mountedRef.current) {
+            setRequestingApproval(false)
+            setApprovalState("confirming")
+          }
+        })
+        .catch(() => {
+          if (mountedRef.current) {
+            setRequestingApproval(false)
+          }
+        })
+    } else {
+      setApprovalState("confirming")
+    }
+  }, [onRequestApproval])
 
   const requestDismiss = React.useCallback(() => {
     setApprovalState("dismissing")
@@ -210,7 +247,7 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
 
   return (
     <SignalApprovalCtx.Provider
-      value={{ approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel }}
+      value={{ approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel }}
     >
       {children}
     </SignalApprovalCtx.Provider>
@@ -381,7 +418,7 @@ function SubmittedFeedback({
 }
 
 function Actions() {
-  const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
+  const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } =
     useSignalApproval()
   const [selectedTopReason, setSelectedTopReason] = React.useState<string | null>(null)
   const [selectedSubReason, setSelectedSubReason] = React.useState<string | null>(null)
@@ -702,6 +739,22 @@ 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">
+              {[
+                { label: "Opportunity", value: opportunityPreview.name },
+                { label: "Account", value: opportunityPreview.accountName },
+                { label: "Stage", value: opportunityPreview.stage },
+                { 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">
+                  <span className="text-muted-foreground">{label}</span>
+                  <span className="font-medium text-foreground">{value}</span>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -752,9 +805,16 @@ function Actions() {
         <button
           type="button"
           onClick={requestApproval}
-          className="inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90"
+          disabled={requestingApproval}
+          className="inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-foreground px-3 text-xs font-semibold text-background shadow-none transition-colors hover:bg-foreground/90 disabled:opacity-50"
         >
-          <CirclePlus className="h-3.5 w-3.5" />
+          {requestingApproval ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : approveButtonIconUrl ? (
+            <img src={approveButtonIconUrl} alt="" className="h-3.5 w-3.5 object-contain" draggable={false} />
+          ) : (
+            <CirclePlus className="h-3.5 w-3.5" />
+          )}
           {labels.approveButton}
         </button>
       )}
@@ -801,4 +861,5 @@ export {
   Gate as SignalApprovalGate,
 }
 export const SignalApproval = { Root, Actions, Gate }
+export type OpportunityPreview = NonNullable<RootProps['opportunityPreview']>
 export type { ApprovalState, SignalApprovalLabels, SignalApprovalContextValue, RootProps as SignalApprovalRootProps }

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 } from "../components/signal-feedback-inline"
+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"
@@ -133,6 +133,9 @@ export interface DetailViewProps {
   /** 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
+  approveButtonIconUrl?: string
+  opportunityPreview?: OpportunityPreview
+  onRequestApproval?: () => Promise<void>
 }
 
 export function DetailView({
@@ -156,6 +159,9 @@ export function DetailView({
   renderDetailExtra,
   renderMetadataExtra,
   onScoreFeedback,
+  approveButtonIconUrl,
+  opportunityPreview,
+  onRequestApproval,
 }: DetailViewProps) {
   const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)
   const [showTimeline, setShowTimeline] = React.useState(false)
@@ -202,6 +208,9 @@ export function DetailView({
       companyName={item.company}
       labels={signalLabels}
       hideApproveButton={hideApproveButton}
+      approveButtonIconUrl={approveButtonIconUrl}
+      opportunityPreview={opportunityPreview}
+      onRequestApproval={onRequestApproval}
       initialApprovalState={getSignalApprovalState?.(item)}
       onApprove={() => onSignalApprove?.(item)}
       onApproveFeedback={(reasons, detail) => {