@handled-ai/design-system 0.17.2 → 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/performance-metrics-table.tsx

@@ -52,6 +52,7 @@ interface PerformanceMetricsTableProps {
   title?: string
   entityColumnLabel?: string
   primaryMetricColumnLabel?: string
+  primaryMetricDisplayMode?: "progress" | "value"
   rateColumnLabel?: string
   metricOneColumnLabel?: string
   metricTwoColumnLabel?: string
@@ -179,9 +180,48 @@ function getProgressStatus(value: number, target: number) {
   }
 }
 
+function PrimaryMetricCell({
+  row,
+  displayMode,
+}: {
+  row: PerformanceMetricsTableRow
+  displayMode: "progress" | "value"
+}) {
+  if (displayMode === "value") {
+    return (
+      <div className="text-sm font-bold text-foreground">
+        {row.primaryValue}
+      </div>
+    )
+  }
+
+  const percentage = (row.primaryValue / row.primaryTarget) * 100
+  const progress = getProgressStatus(row.primaryValue, row.primaryTarget)
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="shrink-0">{progress.icon}</span>
+      <div className="w-full max-w-[180px]">
+        <div className="mb-1 text-sm font-bold text-foreground">
+          {row.primaryValue}/{row.primaryTarget}
+        </div>
+        <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+          <div
+            className={cn("h-full rounded-full", progress.color)}
+            style={{ width: `${Math.min(100, percentage)}%` }}
+          />
+        </div>
+        <div className={cn("mt-1 text-xs font-medium", progress.textColor)}>
+          {Math.round(percentage)}%
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function sortRows(
   rows: PerformanceMetricsTableRow[],
-  sortId: PerformanceMetricsTableSortOption["id"]
+  sortId: PerformanceMetricsTableSortOption["id"],
 ) {
   const copy = [...rows]
   switch (sortId) {
@@ -201,23 +241,28 @@ export function PerformanceMetricsTable({
   title = "Performance Table",
   entityColumnLabel = "Entity",
   primaryMetricColumnLabel = "Primary Goal",
+  primaryMetricDisplayMode = "progress",
   rateColumnLabel = "Rate",
   metricOneColumnLabel = "Metric One",
   metricTwoColumnLabel = "Metric Two",
   metricThreeColumnLabel = "Metric Three",
   metricFourColumnLabel = "Metric Four",
   viewOptions = ["By Entity"],
-  roleOptions = ["All", "Senior Coordinator", "Coordinator", "Junior Coordinator"],
+  roleOptions = [
+    "All",
+    "Senior Coordinator",
+    "Coordinator",
+    "Junior Coordinator",
+  ],
   sortOptions = DEFAULT_SORT_OPTIONS,
   rows = DEFAULT_ROWS,
   pageSize = 6,
   searchPlaceholder = "Search rows...",
 }: PerformanceMetricsTableProps) {
   const [view, setView] = React.useState(viewOptions[0] ?? "By Entity")
-  const [sortId, setSortId] =
-    React.useState<PerformanceMetricsTableSortOption["id"]>(
-      sortOptions[0]?.id ?? "primary-desc"
-    )
+  const [sortId, setSortId] = React.useState<
+    PerformanceMetricsTableSortOption["id"]
+  >(sortOptions[0]?.id ?? "primary-desc")
   const [roleFilter, setRoleFilter] = React.useState(roleOptions[0] ?? "All")
   const [search, setSearch] = React.useState("")
   const [page, setPage] = React.useState(1)
@@ -237,7 +282,7 @@ export function PerformanceMetricsTable({
 
   const sortedRows = React.useMemo(
     () => sortRows(filteredRows, sortId),
-    [filteredRows, sortId]
+    [filteredRows, sortId],
   )
 
   const pageCount = Math.max(1, Math.ceil(sortedRows.length / pageSize))
@@ -285,7 +330,10 @@ export function PerformanceMetricsTable({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
               {sortOptions.map((option) => (
-                <DropdownMenuItem key={option.id} onClick={() => setSortId(option.id)}>
+                <DropdownMenuItem
+                  key={option.id}
+                  onClick={() => setSortId(option.id)}
+                >
                   {option.label}
                 </DropdownMenuItem>
               ))}
@@ -301,7 +349,10 @@ export function PerformanceMetricsTable({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               {roleOptions.map((option) => (
-                <DropdownMenuItem key={option} onClick={() => setRoleFilter(option)}>
+                <DropdownMenuItem
+                  key={option}
+                  onClick={() => setRoleFilter(option)}
+                >
                   {option}
                 </DropdownMenuItem>
               ))}
@@ -346,61 +397,45 @@ export function PerformanceMetricsTable({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {paginatedRows.map((row) => {
-                const percentage = (row.primaryValue / row.primaryTarget) * 100
-                const progress = getProgressStatus(row.primaryValue, row.primaryTarget)
+              {paginatedRows.map((row) => (
+                <TableRow key={row.id} className="hover:bg-muted/30">
+                  <TableCell className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-8 w-8 border border-border">
+                        <AvatarFallback className="bg-emerald-100 text-[11px] font-medium text-emerald-700">
+                          {row.avatarFallback}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm font-medium text-foreground">
+                        {row.label}
+                      </span>
+                    </div>
+                  </TableCell>
 
-                return (
-                  <TableRow key={row.id} className="hover:bg-muted/30">
-                    <TableCell className="px-4 py-3">
-                      <div className="flex items-center gap-3">
-                        <Avatar className="h-8 w-8 border border-border">
-                          <AvatarFallback className="bg-emerald-100 text-[11px] font-medium text-emerald-700">
-                            {row.avatarFallback}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="text-sm font-medium text-foreground">{row.label}</span>
-                      </div>
-                    </TableCell>
+                  <TableCell className="px-4 py-3">
+                    <PrimaryMetricCell
+                      row={row}
+                      displayMode={primaryMetricDisplayMode}
+                    />
+                  </TableCell>
 
-                    <TableCell className="px-4 py-3">
-                      <div className="flex items-center gap-2">
-                        <span className="shrink-0">{progress.icon}</span>
-                        <div className="w-full max-w-[180px]">
-                          <div className="mb-1 text-sm font-bold text-foreground">
-                            {row.primaryValue}/{row.primaryTarget}
-                          </div>
-                          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
-                            <div
-                              className={cn("h-full rounded-full", progress.color)}
-                              style={{ width: `${Math.min(100, percentage)}%` }}
-                            />
-                          </div>
-                          <div className={cn("mt-1 text-xs font-medium", progress.textColor)}>
-                            {Math.round(percentage)}%
-                          </div>
-                        </div>
-                      </div>
-                    </TableCell>
-
-                    <TableCell className="px-4 py-3 text-right text-sm font-semibold text-emerald-600">
-                      {row.ratePercent}%
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
-                      {row.metricOne}
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm text-muted-foreground">
-                      {row.metricTwo}
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
-                      {row.metricThree}
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
-                      {row.metricFour}
-                    </TableCell>
-                  </TableRow>
-                )
-              })}
+                  <TableCell className="px-4 py-3 text-right text-sm font-semibold text-emerald-600">
+                    {row.ratePercent}%
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
+                    {row.metricOne}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm text-muted-foreground">
+                    {row.metricTwo}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
+                    {row.metricThree}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
+                    {row.metricFour}
+                  </TableCell>
+                </TableRow>
+              ))}
             </TableBody>
           </Table>
         </div>
@@ -410,7 +445,8 @@ export function PerformanceMetricsTable({
       <div className="flex items-center justify-between border-t border-border bg-muted/20 px-4 py-3">
         <span className="text-xs text-muted-foreground">
           Showing {sortedRows.length === 0 ? 0 : start + 1} to{" "}
-          {Math.min(start + pageSize, sortedRows.length)} of {sortedRows.length} rows
+          {Math.min(start + pageSize, sortedRows.length)} of {sortedRows.length}{" "}
+          rows
         </span>
         <div className="flex items-center gap-2">
           <Button

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>