@handled-ai/design-system 0.18.1 → 0.18.2

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,43 @@ 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 (to guard against prop overwrites). */
+  const [isEditing, setIsEditing] = React.useState(false)
+  /** Track the last synced feedbackKey to detect key changes. */
+  const lastKeyRef = React.useRef<string | undefined>(feedbackKey)
+
+  // 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)
+      setIsEditing(false)
+      if (initialFeedback) {
+        onFeedbackChange(initialFeedback.sentiment)
+      } else {
+        onFeedbackChange(null)
+      }
+    } else if (!isEditing) {
+      // Same key, not actively editing — safe to sync
+      setPersisted(initialFeedback ?? null)
+      if (initialFeedback) {
+        onFeedbackChange(initialFeedback.sentiment)
+      }
+    }
+  }, [initialFeedback, feedbackKey]) // eslint-disable-line react-hooks/exhaustive-deps -- reads isEditing as guard, not trigger
 
   // Reset state when feedback collapses
   const resetState = React.useCallback(() => {
@@ -223,6 +283,7 @@ export function FeedbackFooter({
     setAdditionalPills([])
     setDetailText("")
     setActiveTreeIndex(null)
+    setIsEditing(false)
   }, [])
 
   const handleSentimentClick = React.useCallback(
@@ -231,10 +292,26 @@ export function FeedbackFooter({
       // Reset chip state when switching sentiment, then expand
       resetState()
       setExpanded(true)
+      setSubmitted(false)
+      setPersisted(null)
+      setIsEditing(true)
     },
     [onFeedbackChange, resetState],
   )
 
+  /** 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])
+
   const handleTier1Toggle = React.useCallback(
     (chipLabel: string) => {
       if (selectedTier1 === chipLabel) {
@@ -295,7 +372,16 @@ export function FeedbackFooter({
       pills: additionalPills,
       detail: detailText,
     })
-    resetState()
+    // Show transient "Saved" confirmation
+    setSubmitted(true)
+    // Collapse expansion but keep sentiment visible
+    setExpanded(false)
+    setSelectedTier1(null)
+    setSelectedTier2(null)
+    setAdditionalPills([])
+    setDetailText("")
+    setActiveTreeIndex(null)
+    setIsEditing(false)
   }, [
     feedback,
     selectedTier1,
@@ -303,7 +389,6 @@ export function FeedbackFooter({
     additionalPills,
     detailText,
     onSubmit,
-    resetState,
   ])
 
   const handleCancel = React.useCallback(() => {
@@ -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>
         )}

package/src/components/insights-filter-bar.tsx

@@ -23,7 +23,6 @@ export interface FilterDefinition {
 
 export interface InsightsFilterBarProps {
   filters: FilterDefinition[]
-  variant?: "default" | "compact"
   values: Record<string, string>
   onChange: (filterId: string, value: string) => void
   onClearAll?: () => void
@@ -46,7 +45,6 @@ function InsightsFilterBar({
   onChange,
   onClearAll,
   className,
-  variant = "default",
 }: InsightsFilterBarProps) {
   const showClearAll = onClearAll && hasNonDefaultValue(filters, values)
 
@@ -54,12 +52,11 @@ function InsightsFilterBar({
     <div
       data-slot="insights-filter-bar"
       className={cn(
-        "flex flex-wrap items-center rounded-md border border-border bg-card shadow-sm",
-        variant === "compact" ? "gap-2 p-2" : "gap-3 p-4",
+        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
         className
       )}
     >
-      <div className={cn("flex items-center gap-2", variant === "compact" && "sr-only")}>
+      <div className="flex items-center gap-2">
         <FilterIcon className="h-4 w-4 text-muted-foreground" />
         <span className="text-sm font-medium text-muted-foreground">
           Filters:
@@ -83,10 +80,7 @@ function InsightsFilterBar({
               <Button
                 variant="outline"
                 size="sm"
-                className={cn(
-                  "gap-1.5 text-xs font-normal shadow-none",
-                  variant === "compact" ? "h-7 px-2" : "h-8"
-                )}
+                className="h-8 gap-1.5 text-xs font-normal shadow-none"
               >
                 {IconComp ? (
                   <IconComp className="h-3.5 w-3.5 text-muted-foreground" />
@@ -124,10 +118,7 @@ function InsightsFilterBar({
           <Button
             variant="ghost"
             size="sm"
-            className={cn(
-              "text-xs text-destructive hover:text-destructive",
-              variant === "compact" ? "h-7 px-2" : "h-8"
-            )}
+            className="h-8 text-xs text-destructive hover:text-destructive"
             onClick={onClearAll}
           >
             Clear All

package/src/components/metric-card.tsx

@@ -24,88 +24,6 @@ export interface MetricCardProps {
   showInfo?: boolean
 }
 
-export interface KpiStripItem {
-  id?: string
-  label: React.ReactNode
-  value: React.ReactNode
-  unit?: React.ReactNode
-  subtitle?: React.ReactNode
-  change?: MetricCardProps["change"]
-}
-
-export interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {
-  items: KpiStripItem[]
-  columns?: 2 | 3 | 4
-}
-
-export function KpiStrip({ items, columns = 4, className, ...props }: KpiStripProps) {
-  return (
-    <div
-      data-slot="kpi-strip"
-      className={cn(
-        "grid gap-3 rounded-xl border border-border bg-card p-3 shadow-sm",
-        columns === 2 && "sm:grid-cols-2",
-        columns === 3 && "sm:grid-cols-3",
-        columns === 4 && "sm:grid-cols-2 lg:grid-cols-4",
-        className
-      )}
-      {...props}
-    >
-      {items.map((item, index) => {
-        const isGoodDirection = item.change
-          ? item.change.isGood !== undefined
-            ? item.change.isGood
-            : item.change.direction === "up"
-          : false
-        const ChangeIcon = item.change?.direction === "down" ? ArrowDown : ArrowUp
-
-        return (
-          <div
-            key={item.id ?? index}
-            data-slot="kpi-strip-item"
-            className="min-w-0 rounded-lg bg-muted/40 px-3 py-2"
-          >
-            <div data-slot="kpi-strip-label" className="truncate text-xs font-medium text-muted-foreground">
-              {item.label}
-            </div>
-            <div className="mt-1 flex items-baseline gap-1">
-              <span data-slot="kpi-strip-value" className="truncate text-2xl font-bold tracking-tight text-foreground">
-                {item.value}
-              </span>
-              {item.unit ? (
-                <span data-slot="kpi-strip-unit" className="text-sm font-semibold text-muted-foreground">
-                  {item.unit}
-                </span>
-              ) : null}
-            </div>
-            {item.subtitle || item.change ? (
-              <div className="mt-1 flex items-center gap-2 text-xs">
-                {item.change ? (
-                  <span
-                    data-slot="kpi-strip-change"
-                    className={cn(
-                      "inline-flex items-center gap-0.5 font-semibold",
-                      isGoodDirection ? "text-emerald-600" : "text-red-600"
-                    )}
-                  >
-                    <ChangeIcon className="h-3 w-3 stroke-[3]" />
-                    {item.change.value}
-                  </span>
-                ) : null}
-                {item.subtitle ? (
-                  <span data-slot="kpi-strip-subtitle" className="truncate text-muted-foreground">
-                    {item.subtitle}
-                  </span>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
 export function MetricCard({
   title,
   value,

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>