@handled-ai/design-system 0.11.3 → 0.13.0

package/dist/charts/chart.d.ts

@@ -48,7 +48,7 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     labelClassName?: string;
     color?: string;
 }): React.JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
 type LegendPayloadItem = {
     value?: string;
     dataKey?: string;

package/dist/components/account-contacts-popover.js

@@ -39,14 +39,19 @@ 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]);
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: () => setOpen(!open), children: trigger }),
     open && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
-      /* @__PURE__ */ jsxs("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", children: [
+      /* @__PURE__ */ jsxs("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", children: [
         /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide", children: "Account Contacts" }),
         /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto", children: contacts.map((c, i) => {
           var _a, _b, _c, _d, _e, _f;

package/dist/components/account-contacts-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-contacts-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Clock,\n  ExternalLink,\n} from \"lucide-react\"\nimport type { SuggestedContact, SuggestedActionsIconMap } from \"./suggested-actions\"\n\n// ---------------------------------------------------------------------------\n// BrandIcon\n// ---------------------------------------------------------------------------\n\nexport function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={`${className ?? \"\"} object-contain`}\n      draggable={false}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// AccountContactsPopover\n// ---------------------------------------------------------------------------\n\nexport interface AccountContactsPopoverProps {\n  contacts: SuggestedContact[]\n  onSelect: (contact: SuggestedContact) => void\n  onSelectTo?: (contact: SuggestedContact) => void\n  onSelectCc?: (contact: SuggestedContact) => void\n  onSelectBcc?: (contact: SuggestedContact) => void\n  onViewAll?: () => void\n  onOpenRecentActivity?: () => void\n  trigger: React.ReactNode\n  iconMap?: SuggestedActionsIconMap\n}\n\nexport function AccountContactsPopover({\n  contacts,\n  onSelect,\n  onSelectTo,\n  onSelectCc,\n  onSelectBcc,\n  onViewAll,\n  onOpenRecentActivity,\n  trigger,\n  iconMap,\n}: AccountContactsPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n  const triggerRef = React.useRef<HTMLDivElement>(null)\n  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})\n\n  React.useEffect(() => {\n    if (open && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect()\n      const popoverWidth = Math.min(448, window.innerWidth - 32)\n      let left = rect.right - popoverWidth\n      if (left < 16) left = 16\n      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth\n      setPopoverStyle({ position: \"fixed\", top: rect.bottom + 4, left })\n    }\n  }, [open])\n\n  return (\n    <div>\n      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <>\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n          <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\">\n            <div className=\"px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide\">\n              Account Contacts\n            </div>\n            <div className=\"max-h-48 overflow-y-auto\">\n              {contacts.map((c, i) => (\n                <div\n                  key={i}\n                  role=\"button\"\n                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}\n                  className=\"flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer\"\n                >\n                  <div className=\"w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0\">\n                    {c.name.split(\" \").map((n) => n[0]).join(\"\")}\n                  </div>\n                  <div className=\"flex-1 min-w-0 overflow-hidden\">\n                    <div className=\"truncate text-sm font-medium text-foreground\">{c.name}</div>\n                    <div className=\"truncate text-xs text-muted-foreground leading-tight\">\n                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? \"\"}\n                    </div>\n                    {c.lastActivity && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onOpenRecentActivity?.()\n                          setOpen(false)\n                        }}\n                        className=\"mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                      >\n                        <Clock className=\"w-3 h-3 shrink-0\" />\n                        <span className=\"shrink-0 font-medium\">Last activity</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"shrink-0\">{c.lastActivity.date}</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"truncate capitalize\">{c.lastActivity.type}</span>\n                      </button>\n                    )}\n                  </div>\n                  <div className=\"ml-2 flex items-center gap-1.5 shrink-0\">\n                    {onSelectTo && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectTo(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        To\n                      </button>\n                    )}\n                    {onSelectCc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectCc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Cc\n                      </button>\n                    )}\n                    {onSelectBcc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectBcc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Bcc\n                      </button>\n                    )}\n                    <button\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        if (c.salesforceUrl) {\n                          window.open(c.salesforceUrl, \"_blank\", \"noopener,noreferrer\")\n                        } else {\n                          onViewAll?.()\n                        }\n                      }}\n                      className=\"h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0\"\n                      aria-label={`Open ${c.name} in Salesforce`}\n                    >\n                      {iconMap?.salesforce ? (\n                        <BrandIcon src={iconMap.salesforce} alt=\"Salesforce\" className=\"w-3.5 h-3.5\" />\n                      ) : (\n                        <ExternalLink className=\"w-3.5 h-3.5 text-muted-foreground\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n              ))}\n            </div>\n            {onViewAll && (\n              <>\n                <div className=\"h-px bg-border mx-3 my-1\" />\n                <button\n                  onClick={() => { onViewAll(); setOpen(false) }}\n                  className=\"flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                >\n                  <ExternalLink className=\"w-3 h-3\" />\n                  View all contacts\n                </button>\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/account-contacts-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Clock,\n  ExternalLink,\n} from \"lucide-react\"\nimport type { SuggestedContact, SuggestedActionsIconMap } from \"./suggested-actions\"\n\n// ---------------------------------------------------------------------------\n// BrandIcon\n// ---------------------------------------------------------------------------\n\nexport function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={`${className ?? \"\"} object-contain`}\n      draggable={false}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// AccountContactsPopover\n// ---------------------------------------------------------------------------\n\nexport interface AccountContactsPopoverProps {\n  contacts: SuggestedContact[]\n  onSelect: (contact: SuggestedContact) => void\n  onSelectTo?: (contact: SuggestedContact) => void\n  onSelectCc?: (contact: SuggestedContact) => void\n  onSelectBcc?: (contact: SuggestedContact) => void\n  onViewAll?: () => void\n  onOpenRecentActivity?: () => void\n  trigger: React.ReactNode\n  iconMap?: SuggestedActionsIconMap\n}\n\nexport function AccountContactsPopover({\n  contacts,\n  onSelect,\n  onSelectTo,\n  onSelectCc,\n  onSelectBcc,\n  onViewAll,\n  onOpenRecentActivity,\n  trigger,\n  iconMap,\n}: AccountContactsPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n  const triggerRef = React.useRef<HTMLDivElement>(null)\n  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})\n\n  React.useEffect(() => {\n    if (open && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect()\n      const popoverWidth = Math.min(448, window.innerWidth - 32)\n      let left = rect.right - popoverWidth\n      if (left < 16) left = 16\n      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth\n      const popoverHeight = 320;\n      const spaceBelow = window.innerHeight - rect.bottom - 8;\n      const spaceAbove = rect.top - 8;\n      const placeAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;\n      const top = placeAbove ? rect.top - popoverHeight - 4 : rect.bottom + 4;\n      setPopoverStyle({ position: \"fixed\", top: Math.max(8, top), left, maxHeight: placeAbove ? spaceAbove : spaceBelow })\n    }\n  }, [open])\n\n  return (\n    <div>\n      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <>\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n          <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\">\n            <div className=\"px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide\">\n              Account Contacts\n            </div>\n            <div className=\"max-h-48 overflow-y-auto\">\n              {contacts.map((c, i) => (\n                <div\n                  key={i}\n                  role=\"button\"\n                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}\n                  className=\"flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer\"\n                >\n                  <div className=\"w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0\">\n                    {c.name.split(\" \").map((n) => n[0]).join(\"\")}\n                  </div>\n                  <div className=\"flex-1 min-w-0 overflow-hidden\">\n                    <div className=\"truncate text-sm font-medium text-foreground\">{c.name}</div>\n                    <div className=\"truncate text-xs text-muted-foreground leading-tight\">\n                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? \"\"}\n                    </div>\n                    {c.lastActivity && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onOpenRecentActivity?.()\n                          setOpen(false)\n                        }}\n                        className=\"mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                      >\n                        <Clock className=\"w-3 h-3 shrink-0\" />\n                        <span className=\"shrink-0 font-medium\">Last activity</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"shrink-0\">{c.lastActivity.date}</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"truncate capitalize\">{c.lastActivity.type}</span>\n                      </button>\n                    )}\n                  </div>\n                  <div className=\"ml-2 flex items-center gap-1.5 shrink-0\">\n                    {onSelectTo && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectTo(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        To\n                      </button>\n                    )}\n                    {onSelectCc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectCc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Cc\n                      </button>\n                    )}\n                    {onSelectBcc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectBcc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Bcc\n                      </button>\n                    )}\n                    <button\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        if (c.salesforceUrl) {\n                          window.open(c.salesforceUrl, \"_blank\", \"noopener,noreferrer\")\n                        } else {\n                          onViewAll?.()\n                        }\n                      }}\n                      className=\"h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0\"\n                      aria-label={`Open ${c.name} in Salesforce`}\n                    >\n                      {iconMap?.salesforce ? (\n                        <BrandIcon src={iconMap.salesforce} alt=\"Salesforce\" className=\"w-3.5 h-3.5\" />\n                      ) : (\n                        <ExternalLink className=\"w-3.5 h-3.5 text-muted-foreground\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n              ))}\n            </div>\n            {onViewAll && (\n              <>\n                <div className=\"h-px bg-border mx-3 my-1\" />\n                <button\n                  onClick={() => { onViewAll(); setOpen(false) }}\n                  className=\"flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                >\n                  <ExternalLink className=\"w-3 h-3\" />\n                  View all contacts\n                </button>\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/score-feedback.js

@@ -90,34 +90,23 @@ function Root({ children, onSubmitFeedback, initialFeedback }) {
 function Trigger({ className }) {
   const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback();
   if (notedType || submittedFeedback && !thumbState) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-500" }),
-        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: notedType ? notedType === "up" ? "Noted" : "Recorded" : (submittedFeedback == null ? void 0 : submittedFeedback.type) === "up" ? "Noted" : "Recorded" })
-      ] }),
-      submittedFeedback && (submittedFeedback.pills.length > 0 || submittedFeedback.detail) && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: editSubmitted,
-          className: "mt-1.5 w-full text-left space-y-1 group cursor-pointer",
-          children: [
-            submittedFeedback.pills.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: submittedFeedback.pills.map((p) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                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"
-                ),
-                children: p
-              },
-              p
-            )) }),
-            submittedFeedback.detail && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors", children: submittedFeedback.detail })
-          ]
-        }
-      )
-    ] });
+    const label = notedType ? notedType === "up" ? "Noted" : "Recorded" : (submittedFeedback == null ? void 0 : submittedFeedback.type) === "up" ? "Noted" : "Recorded";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: submittedFeedback ? editSubmitted : void 0,
+        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
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-500" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: label })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-0.5 shrink-0", className), children: [
     /* @__PURE__ */ jsx(

package/dist/components/score-feedback.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/score-feedback.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown, Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst positivePills = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\nconst negativePills = [\n  \"Bad timing\",\n  \"Inaccurate data\",\n  \"Wrong prospect\",\n  \"Already handled\",\n  \"Not actionable\",\n  \"Other\",\n]\n\ninterface SubmittedScoreFeedback {\n  type: \"up\" | \"down\"\n  pills: string[]\n  detail: string\n}\n\ninterface ScoreFeedbackState {\n  thumbState: \"up\" | \"down\" | null\n  selectedPills: string[]\n  detailText: string\n  notedType: \"up\" | \"down\" | null\n  submittedFeedback: SubmittedScoreFeedback | null\n  otherSelected: boolean\n  hasRequiredInput: boolean\n  handleThumbClick: (type: \"up\" | \"down\") => void\n  togglePill: (pill: string) => void\n  setDetailText: (text: string) => void\n  handleSubmit: () => void\n  editSubmitted: () => void\n}\n\nconst ScoreFeedbackCtx = React.createContext<ScoreFeedbackState | null>(null)\n\nfunction useScoreFeedback() {\n  const ctx = React.useContext(ScoreFeedbackCtx)\n  if (!ctx) throw new Error(\"Must be used within ScoreFeedback.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  initialFeedback?: { type: \"up\" | \"down\"; pills: string[]; detail: string } | null\n}\n\nfunction Root({ children, onSubmitFeedback, initialFeedback }: RootProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailTextState] = React.useState(\"\")\n  const [notedType, setNotedType] = React.useState<\"up\" | \"down\" | null>(null)\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(\n    initialFeedback ?? null\n  )\n\n  // Sync submitted feedback when initialFeedback prop changes (e.g. async\n  // detail load). Skip when the user has an in-progress edit (thumbState set).\n  React.useEffect(() => {\n    if (thumbState !== null) return\n    setSubmittedFeedback(initialFeedback ?? null)\n  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally omits thumbState to read it as a guard, not a trigger\n\n  const otherSelected = selectedPills.includes(\"Other\")\n\n  const hasRequiredInput =\n    thumbState === \"down\"\n      ? selectedPills.length > 0 && (!otherSelected || detailText.trim().length > 0)\n      : selectedPills.length > 0 || detailText.trim().length > 0\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) =>\n      prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]\n    )\n  }, [])\n\n  const handleThumbClick = React.useCallback((type: \"up\" | \"down\") => {\n    setThumbState((prev) => (prev === type ? null : type))\n    setSelectedPills([])\n    setDetailTextState(\"\")\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() })\n    setNotedType(thumbState)\n    setThumbState(null)\n    setSelectedPills([])\n    setDetailTextState(\"\")\n    setTimeout(() => setNotedType(null), 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const editSubmitted = React.useCallback(() => {\n    if (!submittedFeedback) return\n    setThumbState(submittedFeedback.type)\n    setSelectedPills([...submittedFeedback.pills])\n    setDetailTextState(submittedFeedback.detail)\n    setNotedType(null)\n  }, [submittedFeedback])\n\n  return (\n    <ScoreFeedbackCtx.Provider\n      value={{\n        thumbState,\n        selectedPills,\n        detailText,\n        notedType,\n        submittedFeedback,\n        otherSelected,\n        hasRequiredInput,\n        handleThumbClick,\n        togglePill,\n        setDetailText: setDetailTextState,\n        handleSubmit,\n        editSubmitted,\n      }}\n    >\n      {children}\n    </ScoreFeedbackCtx.Provider>\n  )\n}\n\nfunction Trigger({ className }: { className?: string }) {\n  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()\n\n  if (notedType || (submittedFeedback && !thumbState)) {\n    return (\n      <div className={cn(\"shrink-0\", className)}>\n        <div className=\"flex items-center gap-1\">\n          <Check className=\"w-3 h-3 text-emerald-500\" />\n          <span className=\"text-[11px] text-muted-foreground\">\n            {notedType\n              ? notedType === \"up\" ? \"Noted\" : \"Recorded\"\n              : submittedFeedback?.type === \"up\" ? \"Noted\" : \"Recorded\"}\n          </span>\n        </div>\n        {submittedFeedback && (submittedFeedback.pills.length > 0 || submittedFeedback.detail) && (\n          <button\n            type=\"button\"\n            onClick={editSubmitted}\n            className=\"mt-1.5 w-full text-left space-y-1 group cursor-pointer\"\n          >\n            {submittedFeedback.pills.length > 0 && (\n              <div className=\"flex flex-wrap gap-1\">\n                {submittedFeedback.pills.map((p) => (\n                  <span\n                    key={p}\n                    className={cn(\n                      \"rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80\",\n                      submittedFeedback.type === \"up\"\n                        ? \"border-emerald-200/60 bg-emerald-50/50 text-emerald-700/70\"\n                        : \"border-red-200/60 bg-red-50/50 text-red-700/70\"\n                    )}\n                  >\n                    {p}\n                  </span>\n                ))}\n              </div>\n            )}\n            {submittedFeedback.detail && (\n              <p className=\"text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors\">{submittedFeedback.detail}</p>\n            )}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex gap-0.5 shrink-0\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"up\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"up\"\n            ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsUp className=\"w-3.5 h-3.5\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"down\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"down\"\n            ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsDown className=\"w-3.5 h-3.5\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n      </button>\n    </div>\n  )\n}\n\nfunction Panel({ className }: { className?: string }) {\n  const {\n    thumbState,\n    selectedPills,\n    detailText,\n    otherSelected,\n    hasRequiredInput,\n    togglePill,\n    setDetailText,\n    handleSubmit,\n  } = useScoreFeedback()\n\n  if (!thumbState) return null\n\n  return (\n    <div className={cn(\"overflow-hidden\", className)}>\n      <div className=\"mt-4 pt-4 pb-1 space-y-3 border-t border-border/60\">\n        <span className=\"text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider\">\n          How&apos;s this score?\n        </span>\n        <div>\n          <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n            {thumbState === \"up\" ? \"What was useful?\" : \"What\\u2019s the issue?\"}\n          </span>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n              <button\n                key={pill}\n                type=\"button\"\n                onClick={() => togglePill(pill)}\n                className={cn(\n                  \"px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors\",\n                  selectedPills.includes(pill)\n                    ? thumbState === \"up\"\n                      ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                      : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                    : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                )}\n              >\n                {pill}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"space-y-1\">\n          <input\n            type=\"text\"\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && hasRequiredInput) handleSubmit()\n            }}\n            placeholder={\n              thumbState === \"up\"\n                ? \"Tell us more (optional)\"\n                : \"e.g., The risk factors are outdated\"\n            }\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring\"\n          />\n          {otherSelected && detailText.trim().length === 0 && (\n            <span className=\"text-[10px] text-red-500\">\n              Please describe when &ldquo;Other&rdquo; is selected\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2 pt-1\">\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={!hasRequiredInput}\n            className={cn(\n              \"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors\",\n              hasRequiredInput\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"bg-muted text-muted-foreground cursor-not-allowed\"\n            )}\n          >\n            Submit\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const ScoreFeedback = { Root, Trigger, Panel }\nexport { useScoreFeedback }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/score-feedback.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown, Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst positivePills = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\nconst negativePills = [\n  \"Bad timing\",\n  \"Inaccurate data\",\n  \"Wrong prospect\",\n  \"Already handled\",\n  \"Not actionable\",\n  \"Other\",\n]\n\ninterface SubmittedScoreFeedback {\n  type: \"up\" | \"down\"\n  pills: string[]\n  detail: string\n}\n\ninterface ScoreFeedbackState {\n  thumbState: \"up\" | \"down\" | null\n  selectedPills: string[]\n  detailText: string\n  notedType: \"up\" | \"down\" | null\n  submittedFeedback: SubmittedScoreFeedback | null\n  otherSelected: boolean\n  hasRequiredInput: boolean\n  handleThumbClick: (type: \"up\" | \"down\") => void\n  togglePill: (pill: string) => void\n  setDetailText: (text: string) => void\n  handleSubmit: () => void\n  editSubmitted: () => void\n}\n\nconst ScoreFeedbackCtx = React.createContext<ScoreFeedbackState | null>(null)\n\nfunction useScoreFeedback() {\n  const ctx = React.useContext(ScoreFeedbackCtx)\n  if (!ctx) throw new Error(\"Must be used within ScoreFeedback.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  initialFeedback?: { type: \"up\" | \"down\"; pills: string[]; detail: string } | null\n}\n\nfunction Root({ children, onSubmitFeedback, initialFeedback }: RootProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailTextState] = React.useState(\"\")\n  const [notedType, setNotedType] = React.useState<\"up\" | \"down\" | null>(null)\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(\n    initialFeedback ?? null\n  )\n\n  // Sync submitted feedback when initialFeedback prop changes (e.g. async\n  // detail load). Skip when the user has an in-progress edit (thumbState set).\n  React.useEffect(() => {\n    if (thumbState !== null) return\n    setSubmittedFeedback(initialFeedback ?? null)\n  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally omits thumbState to read it as a guard, not a trigger\n\n  const otherSelected = selectedPills.includes(\"Other\")\n\n  const hasRequiredInput =\n    thumbState === \"down\"\n      ? selectedPills.length > 0 && (!otherSelected || detailText.trim().length > 0)\n      : selectedPills.length > 0 || detailText.trim().length > 0\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) =>\n      prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]\n    )\n  }, [])\n\n  const handleThumbClick = React.useCallback((type: \"up\" | \"down\") => {\n    setThumbState((prev) => (prev === type ? null : type))\n    setSelectedPills([])\n    setDetailTextState(\"\")\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() })\n    setNotedType(thumbState)\n    setThumbState(null)\n    setSelectedPills([])\n    setDetailTextState(\"\")\n    setTimeout(() => setNotedType(null), 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const editSubmitted = React.useCallback(() => {\n    if (!submittedFeedback) return\n    setThumbState(submittedFeedback.type)\n    setSelectedPills([...submittedFeedback.pills])\n    setDetailTextState(submittedFeedback.detail)\n    setNotedType(null)\n  }, [submittedFeedback])\n\n  return (\n    <ScoreFeedbackCtx.Provider\n      value={{\n        thumbState,\n        selectedPills,\n        detailText,\n        notedType,\n        submittedFeedback,\n        otherSelected,\n        hasRequiredInput,\n        handleThumbClick,\n        togglePill,\n        setDetailText: setDetailTextState,\n        handleSubmit,\n        editSubmitted,\n      }}\n    >\n      {children}\n    </ScoreFeedbackCtx.Provider>\n  )\n}\n\nfunction Trigger({ className }: { className?: string }) {\n  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()\n\n  if (notedType || (submittedFeedback && !thumbState)) {\n    const label = notedType\n      ? notedType === \"up\" ? \"Noted\" : \"Recorded\"\n      : submittedFeedback?.type === \"up\" ? \"Noted\" : \"Recorded\"\n\n    return (\n      <button\n        type=\"button\"\n        onClick={submittedFeedback ? editSubmitted : undefined}\n        className={cn(\n          \"flex items-center gap-1 shrink-0 rounded px-1.5 py-1 transition-colors\",\n          submittedFeedback ? \"cursor-pointer hover:bg-muted/50\" : \"cursor-default\",\n          className,\n        )}\n      >\n        <Check className=\"w-3 h-3 text-emerald-500\" />\n        <span className=\"text-[11px] text-muted-foreground\">{label}</span>\n      </button>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex gap-0.5 shrink-0\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"up\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"up\"\n            ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsUp className=\"w-3.5 h-3.5\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"down\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"down\"\n            ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsDown className=\"w-3.5 h-3.5\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n      </button>\n    </div>\n  )\n}\n\nfunction Panel({ className }: { className?: string }) {\n  const {\n    thumbState,\n    selectedPills,\n    detailText,\n    otherSelected,\n    hasRequiredInput,\n    togglePill,\n    setDetailText,\n    handleSubmit,\n  } = useScoreFeedback()\n\n  if (!thumbState) return null\n\n  return (\n    <div className={cn(\"overflow-hidden\", className)}>\n      <div className=\"mt-4 pt-4 pb-1 space-y-3 border-t border-border/60\">\n        <span className=\"text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider\">\n          How&apos;s this score?\n        </span>\n        <div>\n          <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n            {thumbState === \"up\" ? \"What was useful?\" : \"What\\u2019s the issue?\"}\n          </span>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n              <button\n                key={pill}\n                type=\"button\"\n                onClick={() => togglePill(pill)}\n                className={cn(\n                  \"px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors\",\n                  selectedPills.includes(pill)\n                    ? thumbState === \"up\"\n                      ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                      : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                    : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                )}\n              >\n                {pill}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"space-y-1\">\n          <input\n            type=\"text\"\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && hasRequiredInput) handleSubmit()\n            }}\n            placeholder={\n              thumbState === \"up\"\n                ? \"Tell us more (optional)\"\n                : \"e.g., The risk factors are outdated\"\n            }\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring\"\n          />\n          {otherSelected && detailText.trim().length === 0 && (\n            <span className=\"text-[10px] text-red-500\">\n              Please describe when &ldquo;Other&rdquo; is selected\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2 pt-1\">\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={!hasRequiredInput}\n            className={cn(\n              \"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors\",\n              hasRequiredInput\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"bg-muted text-muted-foreground cursor-not-allowed\"\n            )}\n          >\n            Submit\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const ScoreFeedback = { Root, Trigger, Panel }\nexport { useScoreFeedback }\n"],"mappings":"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","names":[]}

package/dist/components/signal-feedback-inline.d.ts

@@ -20,6 +20,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;
@@ -38,6 +41,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.
      *
@@ -51,7 +71,7 @@ interface RootProps {
     onApproveFeedback?: (reasons: string[], detail: string) => void;
     onDismiss?: (reasons: string[], detail: string, subReason?: string) => void;
 }
-declare function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, onApprove, onApproveFeedback, onDismiss }: RootProps): React.JSX.Element;
+declare function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, approveButtonIconUrl, opportunityPreview, onRequestApproval, onApprove, onApproveFeedback, onDismiss }: RootProps): React.JSX.Element;
 declare function Actions(): React.JSX.Element;
 declare function Gate({ children }: {
     children: React.ReactNode;
@@ -62,5 +82,6 @@ declare const SignalApproval: {
     Actions: typeof Actions;
     Gate: typeof Gate;
 };
+type OpportunityPreview = NonNullable<RootProps['opportunityPreview']>;
 
-export { type ApprovalState, SignalApproval, Actions as SignalApprovalActions, type SignalApprovalContextValue, Gate as SignalApprovalGate, type SignalApprovalLabels, Root as SignalApprovalRoot, type RootProps as SignalApprovalRootProps, useSignalApproval };
+export { type ApprovalState, type OpportunityPreview, SignalApproval, Actions as SignalApprovalActions, type SignalApprovalContextValue, Gate as SignalApprovalGate, type SignalApprovalLabels, Root as SignalApprovalRoot, type RootProps as SignalApprovalRootProps, useSignalApproval };

package/dist/components/signal-feedback-inline.js

@@ -19,7 +19,7 @@ var __spreadValues = (a, b) => {
 };
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Check, CirclePlus, ExternalLink, Lock, ThumbsDown } from "lucide-react";
+import { Check, CirclePlus, ExternalLink, Loader2, Lock, ThumbsDown } from "lucide-react";
 const dismissReasonTree = [
   {
     label: "Not relevant for this account",
@@ -98,9 +98,10 @@ function useSignalApproval() {
   if (!ctx) throw new Error("SignalApproval components must be used within SignalApproval.Root");
   return ctx;
 }
-function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, onApprove, onApproveFeedback, onDismiss }) {
+function Root({ children, companyName, opportunityUrl, scheduledTime, initialApprovalState, labels: labelOverrides, hideApproveButton, approveButtonIconUrl, opportunityPreview, onRequestApproval, onApprove, onApproveFeedback, onDismiss }) {
   const labels = React.useMemo(() => __spreadValues(__spreadValues({}, DEFAULT_LABELS), labelOverrides), [labelOverrides]);
   const [approvalState, setApprovalState] = React.useState(initialApprovalState != null ? initialApprovalState : "pending");
+  const [requestingApproval, setRequestingApproval] = React.useState(false);
   const mountedRef = React.useRef(true);
   React.useEffect(() => {
     return () => {
@@ -108,8 +109,22 @@ 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");
   }, []);
@@ -153,7 +168,7 @@ function Root({ children, companyName, opportunityUrl, scheduledTime, initialApp
   return /* @__PURE__ */ jsx(
     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
     }
   );
@@ -274,7 +289,7 @@ function SubmittedFeedback({
   );
 }
 function Actions() {
-  const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } = useSignalApproval();
+  const { approvalState, companyName, opportunityUrl, scheduledTime, labels, hideApproveButton, approveButtonIconUrl, opportunityPreview, requestingApproval, approve, submitApproveFeedback, skipApproveFeedback, dismiss, requestApproval, requestDismiss, cancel } = useSignalApproval();
   const [selectedTopReason, setSelectedTopReason] = React.useState(null);
   const [selectedSubReason, setSelectedSubReason] = React.useState(null);
   const [selectedReasons, setSelectedReasons] = React.useState([]);
@@ -573,12 +588,24 @@ function Actions() {
   }
   if (approvalState === "confirming") {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border bg-muted/30 p-3", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-foreground", children: [
-        labels.confirmPrompt,
-        " ",
-        /* @__PURE__ */ jsx("strong", { children: companyName }),
-        ". Confirm?"
-      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-muted/30 p-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-foreground", children: [
+          labels.confirmPrompt,
+          " ",
+          /* @__PURE__ */ jsx("strong", { children: companyName }),
+          ". Confirm?"
+        ] }),
+        opportunityPreview && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1.5 border-t border-border/50 pt-3", children: [
+          { 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 }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: value })
+        ] }, label)) })
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs(
           "button",
@@ -632,9 +659,10 @@ function Actions() {
       {
         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",
         children: [
-          /* @__PURE__ */ jsx(CirclePlus, { className: "h-3.5 w-3.5" }),
+          requestingApproval ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : approveButtonIconUrl ? /* @__PURE__ */ jsx("img", { src: approveButtonIconUrl, alt: "", className: "h-3.5 w-3.5 object-contain", draggable: false }) : /* @__PURE__ */ jsx(CirclePlus, { className: "h-3.5 w-3.5" }),
           labels.approveButton
         ]
       }