@handled-ai/design-system 0.18.5 → 0.18.6

package/src/components/feedback-primitives.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ThumbsUp, ThumbsDown } from "lucide-react"
+import { ThumbsUp, ThumbsDown, Check, Pencil } from "lucide-react"
 import { cn } from "../lib/utils"
 
 // ---------------------------------------------------------------------------
@@ -25,6 +25,19 @@ export interface FeedbackSubmitData {
   detail: string
 }
 
+/**
+ * Persisted feedback data from a previous submission, used to hydrate the
+ * footer into its "already submitted" visual state.
+ */
+export interface PersistedFeedbackData {
+  sentiment: "positive" | "negative"
+  reasonTop?: string
+  reasonSub?: string
+  pills?: string[]
+  detail?: string
+  ownershipLabel: "Your feedback" | "Team feedback"
+}
+
 /**
  * Defines a tier-1 chip that may have tier-2 sub-chips.
  */
@@ -185,6 +198,13 @@ export interface FeedbackFooterProps {
   negativeChips?: FeedbackChipTree[]
   positiveChips?: string[]
   className?: string
+  /** Pre-existing feedback to hydrate from (e.g. after page reload). */
+  initialFeedback?: PersistedFeedbackData | null
+  /** Label shown in the transient confirmation pill after submit. */
+  submittedLabel?: string
+  /** Stable key for syncing initialFeedback into local state. When this
+   *  changes, the component resets to the new initialFeedback value. */
+  feedbackKey?: string
 }
 
 const SENTIMENT_BUTTON_ACTIVE: Record<"positive" | "negative", string> = {
@@ -205,6 +225,9 @@ export function FeedbackFooter({
   negativeChips = [],
   positiveChips = [],
   className,
+  initialFeedback,
+  submittedLabel = "Saved",
+  feedbackKey,
 }: FeedbackFooterProps) {
   const [expanded, setExpanded] = React.useState(false)
   const [selectedTier1, setSelectedTier1] = React.useState<string | null>(null)
@@ -214,6 +237,48 @@ export function FeedbackFooter({
   const [activeTreeIndex, setActiveTreeIndex] = React.useState<number | null>(
     null,
   )
+  /** Transient "Saved" confirmation — shown after successful submit. */
+  const [submitted, setSubmitted] = React.useState(false)
+  /** Persisted feedback shown as a clickable indicator (survives reload). */
+  const [persisted, setPersisted] = React.useState<PersistedFeedbackData | null>(
+    initialFeedback ?? null,
+  )
+  /** Tracks whether the user is actively editing (ref to guard against prop overwrites without triggering re-syncs). */
+  const isEditingRef = React.useRef(false)
+  /** Track the last synced feedbackKey to detect key changes. */
+  const lastKeyRef = React.useRef<string | undefined>(feedbackKey)
+
+  /** Helper to update the editing ref. */
+  const setIsEditing = React.useCallback((value: boolean) => {
+    isEditingRef.current = value
+  }, [])
+
+  // Sync initialFeedback into local state via useEffect keyed on feedbackKey.
+  // When feedbackKey changes, reset to new target. Preserve active edits
+  // when feedbackKey stays the same.
+  React.useEffect(() => {
+    const keyChanged = feedbackKey !== lastKeyRef.current
+    lastKeyRef.current = feedbackKey
+
+    if (keyChanged) {
+      // Key changed — full reset to new target
+      setPersisted(initialFeedback ?? null)
+      setSubmitted(false)
+      setExpanded(false)
+      isEditingRef.current = false
+      if (initialFeedback) {
+        onFeedbackChange(initialFeedback.sentiment)
+      } else {
+        onFeedbackChange(null)
+      }
+    } else if (!isEditingRef.current) {
+      // Same key, not actively editing — safe to sync
+      setPersisted(initialFeedback ?? null)
+      if (initialFeedback) {
+        onFeedbackChange(initialFeedback.sentiment)
+      }
+    }
+  }, [initialFeedback, feedbackKey, onFeedbackChange])
 
   // Reset state when feedback collapses
   const resetState = React.useCallback(() => {
@@ -223,7 +288,8 @@ export function FeedbackFooter({
     setAdditionalPills([])
     setDetailText("")
     setActiveTreeIndex(null)
-  }, [])
+    setIsEditing(false)
+  }, [setIsEditing])
 
   const handleSentimentClick = React.useCallback(
     (sentiment: "positive" | "negative") => {
@@ -231,10 +297,26 @@ export function FeedbackFooter({
       // Reset chip state when switching sentiment, then expand
       resetState()
       setExpanded(true)
+      setSubmitted(false)
+      setPersisted(null)
+      setIsEditing(true)
     },
-    [onFeedbackChange, resetState],
+    [onFeedbackChange, resetState, setIsEditing],
   )
 
+  /** Open the persisted indicator for editing. */
+  const handlePersistedClick = React.useCallback(() => {
+    if (!persisted) return
+    onFeedbackChange(persisted.sentiment)
+    setSelectedTier1(persisted.reasonTop ?? null)
+    setSelectedTier2(persisted.reasonSub ?? null)
+    setAdditionalPills(persisted.pills ?? [])
+    setDetailText(persisted.detail ?? "")
+    setExpanded(true)
+    setSubmitted(false)
+    setIsEditing(true)
+  }, [persisted, onFeedbackChange, setIsEditing])
+
   const handleTier1Toggle = React.useCallback(
     (chipLabel: string) => {
       if (selectedTier1 === chipLabel) {
@@ -295,6 +377,9 @@ export function FeedbackFooter({
       pills: additionalPills,
       detail: detailText,
     })
+    // Show transient "Saved" confirmation
+    setSubmitted(true)
+    // Collapse expansion but keep sentiment visible
     resetState()
   }, [
     feedback,
@@ -323,38 +408,75 @@ export function FeedbackFooter({
   const activeTree =
     activeTreeIndex !== null ? negativeChips[activeTreeIndex] : null
 
+  // Determine if we should show the persisted indicator instead of bare buttons
+  const showPersistedIndicator = persisted && !expanded && !submitted
+
   return (
     <div className={cn("space-y-3", className)}>
       {/* Sentiment buttons + meta text bar */}
       <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
+        {showPersistedIndicator ? (
+          /* Persisted feedback indicator — clickable to reopen editor */
           <button
             type="button"
-            onClick={() => handleSentimentClick("positive")}
-            className={cn(
-              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
-              feedback === "positive"
-                ? SENTIMENT_BUTTON_ACTIVE.positive
-                : SENTIMENT_BUTTON_IDLE,
-            )}
+            onClick={handlePersistedClick}
+            className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+            data-testid="persisted-feedback-indicator"
           >
-            <ThumbsUp className="h-[11px] w-[11px]" />
-            Helpful
-          </button>
-          <button
-            type="button"
-            onClick={() => handleSentimentClick("negative")}
-            className={cn(
-              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
-              feedback === "negative"
-                ? SENTIMENT_BUTTON_ACTIVE.negative
-                : SENTIMENT_BUTTON_IDLE,
+            <span className="font-medium">{persisted.ownershipLabel}:</span>
+            {persisted.sentiment === "positive" ? (
+              <ThumbsUp className="h-[11px] w-[11px]" />
+            ) : (
+              <ThumbsDown className="h-[11px] w-[11px]" />
             )}
-          >
-            <ThumbsDown className="h-[11px] w-[11px]" />
-            Not helpful
+            {persisted.detail && (
+              <span className="max-w-[200px] truncate text-muted-foreground/70">
+                {persisted.detail}
+              </span>
+            )}
+            <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
           </button>
-        </div>
+        ) : (
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => handleSentimentClick("positive")}
+              className={cn(
+                "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+                feedback === "positive"
+                  ? SENTIMENT_BUTTON_ACTIVE.positive
+                  : SENTIMENT_BUTTON_IDLE,
+              )}
+            >
+              <ThumbsUp className="h-[11px] w-[11px]" />
+              Helpful
+            </button>
+            <button
+              type="button"
+              onClick={() => handleSentimentClick("negative")}
+              className={cn(
+                "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+                feedback === "negative"
+                  ? SENTIMENT_BUTTON_ACTIVE.negative
+                  : SENTIMENT_BUTTON_IDLE,
+              )}
+            >
+              <ThumbsDown className="h-[11px] w-[11px]" />
+              Not helpful
+            </button>
+            {/* Transient "Saved" confirmation pill */}
+            {submitted && feedback && (
+              <span
+                className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
+                role="status"
+                data-testid="feedback-submitted-pill"
+              >
+                <Check className="h-[11px] w-[11px]" />
+                {submittedLabel}
+              </span>
+            )}
+          </div>
+        )}
         {metaText && (
           <span className="text-[11px] text-muted-foreground">{metaText}</span>
         )}
@@ -422,3 +544,188 @@ export function FeedbackFooter({
     </div>
   )
 }
+
+// ---------------------------------------------------------------------------
+// InlineFeedbackControl — shared thumb+detail inline feedback widget
+// ---------------------------------------------------------------------------
+
+export interface InlineFeedbackControlProps {
+  /** Unique key identifying the feedback target (e.g. factor key). */
+  feedbackKey: string
+  /** Persisted/initial feedback to hydrate from. */
+  initialFeedback?: { type: "up" | "down"; detail: string; ownershipLabel?: string }
+  /** Called when user submits or clears feedback. */
+  onFeedback?: (key: string, type: "up" | "down" | null, detail?: string) => void
+  /** Test ID prefix for all sub-elements. */
+  testIdPrefix?: string
+}
+
+/**
+ * Compact inline thumb-up/thumb-down feedback with optional detail text.
+ * Used by PriorityFactorRow and any other component that needs
+ * a lightweight feedback control.
+ */
+export function InlineFeedbackControl({
+  feedbackKey,
+  initialFeedback,
+  onFeedback,
+  testIdPrefix = "inline-feedback",
+}: InlineFeedbackControlProps) {
+  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(
+    initialFeedback?.type ?? null,
+  )
+  const [showInput, setShowInput] = React.useState(false)
+  const [detailText, setDetailText] = React.useState(initialFeedback?.detail ?? "")
+  const [saved, setSaved] = React.useState(!!initialFeedback)
+  const [savedDetail, setSavedDetail] = React.useState(initialFeedback?.detail ?? "")
+  const ownershipLabel = initialFeedback?.ownershipLabel ?? "Your feedback"
+
+  // Sync with initialFeedback prop changes
+  React.useEffect(() => {
+    if (initialFeedback) {
+      setThumbState(initialFeedback.type)
+      setSaved(true)
+      setSavedDetail(initialFeedback.detail)
+    }
+  }, [initialFeedback])
+
+  const handleThumbClick = React.useCallback(
+    (type: "up" | "down") => {
+      if (thumbState === type) {
+        // Toggle off
+        setThumbState(null)
+        setShowInput(false)
+        setSaved(false)
+        onFeedback?.(feedbackKey, null)
+      } else {
+        setThumbState(type)
+        setShowInput(true)
+        setSaved(false)
+      }
+    },
+    [thumbState, feedbackKey, onFeedback],
+  )
+
+  const handleSubmitDetail = React.useCallback(() => {
+    if (!thumbState) return
+    const text = detailText.trim()
+    onFeedback?.(feedbackKey, thumbState, text)
+    setSaved(true)
+    setSavedDetail(text)
+    setShowInput(false)
+  }, [thumbState, detailText, feedbackKey, onFeedback])
+
+  return (
+    <div>
+      {saved && !showInput ? (
+        /* Persisted / saved indicator */
+        <button
+          type="button"
+          onClick={() => {
+            setDetailText(savedDetail)
+            setShowInput(true)
+            setSaved(false)
+          }}
+          className="group flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+          data-testid={`${testIdPrefix}-feedback-persisted-${feedbackKey}`}
+        >
+          <span className="font-medium">{ownershipLabel}:</span>
+          {thumbState === "up" ? (
+            <ThumbsUp className="h-[10px] w-[10px]" />
+          ) : (
+            <ThumbsDown className="h-[10px] w-[10px]" />
+          )}
+          {savedDetail && (
+            <span className="max-w-[180px] truncate text-muted-foreground/70">
+              {savedDetail}
+            </span>
+          )}
+          <Pencil className="h-[9px] w-[9px] opacity-0 group-hover:opacity-100 transition-opacity" />
+        </button>
+      ) : (
+        <div className="flex items-center gap-1.5">
+          {/* Inline thumb buttons */}
+          <button
+            type="button"
+            onClick={() => handleThumbClick("up")}
+            className={cn(
+              "p-1 rounded transition-colors",
+              thumbState === "up"
+                ? "text-foreground bg-muted"
+                : "text-muted-foreground/40 hover:text-foreground hover:bg-muted/50",
+            )}
+            title="This is accurate"
+            data-testid={`${testIdPrefix}-thumb-up-${feedbackKey}`}
+          >
+            <ThumbsUp className="h-[10px] w-[10px]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => handleThumbClick("down")}
+            className={cn(
+              "p-1 rounded transition-colors",
+              thumbState === "down"
+                ? "text-red-600 bg-red-50"
+                : "text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50",
+            )}
+            title="Report issue"
+            data-testid={`${testIdPrefix}-thumb-down-${feedbackKey}`}
+          >
+            <ThumbsDown className="h-[10px] w-[10px]" />
+          </button>
+
+          {/* Transient "Saved" pill */}
+          {saved && (
+            <span
+              className="inline-flex items-center gap-1 text-[11px] font-medium text-emerald-600"
+              role="status"
+              data-testid={`${testIdPrefix}-saved-${feedbackKey}`}
+            >
+              <Check className="h-[10px] w-[10px]" />
+              Saved
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Inline detail input */}
+      {showInput && thumbState && (
+        <div className="mt-1.5">
+          <input
+            type="text"
+            value={detailText}
+            onChange={(e) => setDetailText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleSubmitDetail()
+              if (e.key === "Escape") setShowInput(false)
+            }}
+            placeholder={
+              thumbState === "up"
+                ? "What\u2019s accurate? (optional)"
+                : "What\u2019s wrong? (optional)"
+            }
+            className="w-full h-6 rounded border border-border bg-background px-2 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
+            data-testid={`${testIdPrefix}-detail-input-${feedbackKey}`}
+          />
+          <div className="mt-1 flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={handleSubmitDetail}
+              className="bg-foreground text-background rounded px-2 py-0.5 text-[10px] font-semibold"
+              data-testid={`${testIdPrefix}-submit-${feedbackKey}`}
+            >
+              Submit
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowInput(false)}
+              className="border border-border rounded px-2 py-0.5 text-[10px] font-medium"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -15,7 +15,7 @@ import {
 } from "lucide-react"
 import type { LucideIcon } from "lucide-react"
 import { FeedbackFooter } from "./feedback-primitives"
-import type { FeedbackChipTree, FeedbackSubmitData } from "./feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import { cn } from "../lib/utils"
 import type {
   QueueItem,
@@ -266,6 +266,7 @@ function StructuredSignalRow({ item, bucketKey, signal, tone, onOpenSignalBucket
   const IconComponent = resolveIcon(signal.signalTypeName)
   const toneClass = tone ? (SIGNAL_TONE_CLASSES[tone] ?? DEFAULT_TONE_CLASS) : DEFAULT_TONE_CLASS
   const isCombined = signal.signalTypeName === "combined_signal" && signal.components && signal.components.length > 0
+  const hasBalance = Boolean(signal.currentBalance || signal.balanceContext)
 
   const rowContent = (
     <>
@@ -304,6 +305,26 @@ function StructuredSignalRow({ item, bucketKey, signal, tone, onOpenSignalBucket
 
       {/* Slot 5: Chevron */}
       <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/50" />
+
+      {/* Balance context strip — spans full row below grid columns */}
+      {hasBalance && (
+        <div
+          className="col-span-full mt-0.5 text-[10px] text-muted-foreground/70"
+          data-testid="balance-context-strip"
+        >
+          {signal.currentBalance && (
+            <span>
+              Current balance <span className="font-medium text-muted-foreground">{signal.currentBalance}</span>
+            </span>
+          )}
+          {signal.balanceContext && (
+            <span>
+              {signal.currentBalance ? " · " : ""}
+              {signal.balanceContext}
+            </span>
+          )}
+        </div>
+      )}
     </>
   )
 
@@ -405,9 +426,11 @@ interface WhyCardProps {
   panelId: string
   onOpenSignalBucket?: ScoreWhyChipsProps["onOpenSignalBucket"]
   onBucketFeedback?: (bucketKey: string, data: FeedbackSubmitData) => void
+  /** Persisted bucket-level feedback to hydrate from. */
+  initialBucketFeedback?: PersistedFeedbackData | null
 }
 
-function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketFeedback }: WhyCardProps) {
+function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketFeedback, initialBucketFeedback }: WhyCardProps) {
   const [showAll, setShowAll] = React.useState(false)
   const [bucketFeedback, setBucketFeedback] = React.useState<"positive" | "negative" | null>(null)
   const totalCount = bucket.signalCount ?? signals.length
@@ -488,6 +511,8 @@ function WhyCard({ bucket, signals, item, panelId, onOpenSignalBucket, onBucketF
             negativeChips={BUCKET_NEGATIVE_CHIPS}
             negativePrompt="Was this bucket useful?"
             positivePrompt="Thanks! What was useful about this bucket?"
+            initialFeedback={initialBucketFeedback}
+            feedbackKey={bucket.key}
           />
         </div>
       )}
@@ -561,6 +586,7 @@ export function ScoreWhyChips({
           panelId={selectedPanelId}
           onOpenSignalBucket={onOpenSignalBucket}
           onBucketFeedback={signalData.onBucketFeedback}
+          initialBucketFeedback={signalData.initialBucketFeedback?.[selectedBucket.key]}
         />
       )}
     </div>

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

@@ -19,8 +19,8 @@ import {
   Info,
 } from "lucide-react"
 import { cn } from "../lib/utils"
-import { FeedbackFooter } from "./feedback-primitives"
-import type { FeedbackChipTree, FeedbackSubmitData } from "./feedback-primitives"
+import { FeedbackFooter, InlineFeedbackControl } from "./feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "./feedback-primitives"
 import type { SignalScoreUrgencyLabel } from "../prototype/prototype-config"
 import { getSignalScoreUrgencyLabel, scoreRangeForUrgency, SIGNAL_TONE_CLASSES } from "./score-why-chips"
 
@@ -58,6 +58,12 @@ export interface SignalPriorityPopoverProps {
   feedbackChips?: FeedbackChipTree[]
   onFeedbackSubmit?: (data: FeedbackSubmitData) => void
   className?: string
+  /** Persisted factor-level feedback (keyed by factor key). */
+  initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string; ownershipLabel?: string }>
+  /** Callback when user submits factor-level feedback. */
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+  /** Persisted priority-level feedback for the footer. */
+  initialPriorityFeedback?: PersistedFeedbackData | null
 }
 
 // ---------------------------------------------------------------------------
@@ -152,7 +158,13 @@ function DirectionIcon({ direction }: { direction: PriorityFactor["direction"] }
 // PriorityFactorRow
 // ---------------------------------------------------------------------------
 
-function PriorityFactorRow({ factor }: { factor: PriorityFactor }) {
+interface PriorityFactorRowProps {
+  factor: PriorityFactor
+  initialFeedback?: { type: "up" | "down"; detail: string; ownershipLabel?: string }
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+}
+
+function PriorityFactorRow({ factor, initialFeedback, onFactorFeedback }: PriorityFactorRowProps) {
   const IconComponent = FACTOR_ICONS[factor.icon] ?? Activity
   const toneClasses = TONE_ICON_CLASSES[factor.tone]
   const directionClasses = DIRECTION_CLASSES[factor.direction]
@@ -224,6 +236,21 @@ function PriorityFactorRow({ factor }: { factor: PriorityFactor }) {
 
       {/* empty grid cell under score column */}
       <div />
+
+      {/* Factor-level feedback row (spans icon + content columns) */}
+      {onFactorFeedback && (
+        <>
+          <div />
+          <div className="col-span-2 mt-1">
+            <InlineFeedbackControl
+              feedbackKey={factor.key}
+              initialFeedback={initialFeedback}
+              onFeedback={onFactorFeedback}
+              testIdPrefix="factor"
+            />
+          </div>
+        </>
+      )}
     </div>
   )
 }
@@ -241,6 +268,9 @@ export function SignalPriorityPopover({
   feedbackChips,
   onFeedbackSubmit,
   className,
+  initialFactorFeedback,
+  onFactorFeedback,
+  initialPriorityFeedback,
 }: SignalPriorityPopoverProps) {
   const urgencyLabel = getSignalScoreUrgencyLabel(score, providedLabel)
   const scoreRange = scoreRangeForUrgency(urgencyLabel)
@@ -252,6 +282,9 @@ export function SignalPriorityPopover({
   const triggerHover = URGENCY_TRIGGER_HOVER[urgencyLabel]
   const triggerOpen = URGENCY_TRIGGER_OPEN[urgencyLabel]
 
+  // Derive a stable feedbackKey for the footer from score + urgencyLabel
+  const footerFeedbackKey = `priority-${score}-${urgencyLabel}`
+
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
       <PopoverPrimitive.Trigger asChild>
@@ -332,7 +365,12 @@ export function SignalPriorityPopover({
               {/* Factor rows */}
               <div className="divide-y divide-border/40">
                 {factors.map((factor) => (
-                  <PriorityFactorRow key={factor.key} factor={factor} />
+                  <PriorityFactorRow
+                    key={factor.key}
+                    factor={factor}
+                    initialFeedback={initialFactorFeedback?.[factor.key]}
+                    onFactorFeedback={onFactorFeedback}
+                  />
                 ))}
               </div>
             </>
@@ -349,6 +387,8 @@ export function SignalPriorityPopover({
                 negativeChips={feedbackChips ?? DEFAULT_PRIORITY_FEEDBACK_CHIPS}
                 positivePrompt="Thanks. Anything to keep about this score?"
                 className="px-4 py-3"
+                initialFeedback={initialPriorityFeedback}
+                feedbackKey={footerFeedbackKey}
               />
             </div>
           )}

package/src/index.ts

@@ -38,8 +38,8 @@ export * from "./components/dialog"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
 export * from "./components/entity-panel"
-export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions } from "./components/feedback-primitives"
-export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData } from "./components/feedback-primitives"
+export { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from "./components/feedback-primitives"
+export type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from "./components/feedback-primitives"
 export { SignalPriorityPopover } from "./components/signal-priority-popover"
 export type { SignalPriorityPopoverProps, PriorityFactor } from "./components/signal-priority-popover"
 export * from "./components/filter-chip"

package/src/prototype/prototype-config.ts

@@ -16,7 +16,7 @@ import type { TimelineEvent } from "../components/timeline-activity"
 import type { ApprovalState } from "../components/signal-feedback-inline"
 import type { LucideIcon } from "lucide-react"
 import type { PriorityFactor } from "../components/signal-priority-popover"
-import type { FeedbackChipTree, FeedbackSubmitData } from "../components/feedback-primitives"
+import type { FeedbackChipTree, FeedbackSubmitData, PersistedFeedbackData } from "../components/feedback-primitives"
 
 // ---------------------------------------------------------------------------
 // Shared
@@ -57,6 +57,10 @@ export interface SignalScoreExplanationSignal {
   counterparty?: string
   /** Component breakdown for combined signals. */
   components?: Array<{ type: string; count: number }>
+  /** Current balance value (e.g., "$3.0M") for balance context strip. */
+  currentBalance?: string
+  /** Additional balance context text (e.g., "down from $23M"). */
+  balanceContext?: string
 }
 
 export interface SignalScoreExplanationBucket {
@@ -97,6 +101,12 @@ export interface SignalScoreData {
   /** @deprecated The compact score UX no longer renders score-level thumbs by default. */
   initialScoreFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null
   initialFactorFeedback?: Record<string, { type: "up" | "down"; detail: string }>
+  /** Factor-level feedback for the priority popover rows (keyed by factor key). */
+  initialFactorPopoverFeedback?: Record<string, { type: "up" | "down"; detail: string; ownershipLabel?: string }>
+  /** Persisted bucket-level feedback, keyed by bucket key. */
+  initialBucketFeedback?: Record<string, PersistedFeedbackData>
+  /** Persisted priority-level feedback for the popover footer. */
+  initialPriorityFeedback?: PersistedFeedbackData | null
   /** Priority factors for the popover breakdown. */
   priorityFactors?: PriorityFactor[]
   /** Negative feedback chip tree for the priority popover. */

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

@@ -272,6 +272,9 @@ export function DetailView({
               metaText={undefined}
               feedbackChips={signalData.priorityFeedbackChips}
               onFeedbackSubmit={signalData.onPriorityFeedback}
+              initialFactorFeedback={signalData.initialFactorPopoverFeedback}
+              onFactorFeedback={signalData.onFactorFeedback}
+              initialPriorityFeedback={signalData.initialPriorityFeedback}
             />
             {signalData.timeChipLabel && (
               <Badge variant="outline" title={signalData.timeChipDetail ?? undefined}>