@handled-ai/design-system 0.18.3 → 0.18.4

package/dist/prototype/prototype-insights-view.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { h as InsightsViewConfig } from '../signal-priority-popover-DQ_VuHac.js';
+import { h as InsightsViewConfig } from '../signal-priority-popover-DWaAMhPI.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';

package/dist/prototype/prototype-shell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { j as PrototypeConfig } from '../signal-priority-popover-DQ_VuHac.js';
+import { j as PrototypeConfig } from '../signal-priority-popover-DWaAMhPI.js';
 import '../components/feedback-primitives.js';
 import '../components/quick-action-sidebar-nav.js';
 import '../components/quick-action-modal.js';

package/dist/{signal-priority-popover-DQ_VuHac.d.ts → signal-priority-popover-DWaAMhPI.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FeedbackChipTree, FeedbackSubmitData } from './components/feedback-primitives.js';
+import { PersistedFeedbackData, FeedbackChipTree, FeedbackSubmitData } from './components/feedback-primitives.js';
 import { SidebarNavSection } from './components/quick-action-sidebar-nav.js';
 import { ScoreFactor } from './components/score-breakdown.js';
 import { SuggestedContact, SuggestedAction } from './components/suggested-actions.js';
@@ -48,6 +48,10 @@ interface SignalScoreExplanationSignal {
         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;
 }
 interface SignalScoreExplanationBucket {
     key: string;
@@ -93,6 +97,16 @@ interface SignalScoreData {
         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. */
@@ -384,7 +398,17 @@ 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;
 }
-declare function SignalPriorityPopover({ score, urgencyLabel: providedLabel, urgencyExplanation, factors, metaText, feedbackChips, onFeedbackSubmit, className, }: SignalPriorityPopoverProps): React.JSX.Element;
+declare function SignalPriorityPopover({ score, urgencyLabel: providedLabel, urgencyExplanation, factors, metaText, feedbackChips, onFeedbackSubmit, className, initialFactorFeedback, onFactorFeedback, initialPriorityFeedback, }: SignalPriorityPopoverProps): React.JSX.Element;
 
 export { type AccountFilterTab as A, type BriefStyleVariant as B, type EntityPanelConfig as E, type InboxDetailSections as I, type PriorityFactor as P, type QueueItem as Q, SignalPriorityPopover as S, type WorkQueueViewConfig as W, type AccountsViewConfig as a, type AdminTab as b, type AdminViewConfig as c, type EntityPanelSection as d, type InboxSortOption as e, type InboxViewConfig as f, type InsightsCustomTab as g, type InsightsViewConfig as h, type PrototypeBrandConfig as i, type PrototypeConfig as j, type SignalPriorityPopoverProps as k, type SignalScoreData as l, type SignalScoreExplanationBucket as m, type SignalScoreExplanationSignal as n, type SignalScoreUrgencyLabel as o };

package/package.json

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

package/src/components/__tests__/wit-636-feedback-states.test.tsx

@@ -0,0 +1,546 @@
+/**
+ * Tests for WIT-636: Feedback confirmation and persisted-state support.
+ *
+ * Covers:
+ *  - SignalPriorityPopover factor feedback with no note shows `Saved`
+ *  - SignalPriorityPopover factor feedback with existing current-user note shows `Your feedback:` after initial render and after prop updates
+ *  - SignalPriorityPopover factor feedback with teammate fallback shows `Team feedback:`
+ *  - Priority popover footer initial feedback hydrates and submit confirmation appears
+ *  - Bucket footer submit shows saved/submitted state
+ *  - Bucket initial feedback shows `Your feedback:` or `Team feedback:`
+ *  - Footer syncs when initialFeedback arrives after mount, switches when feedbackKey changes, does not overwrite active edits for same key
+ *  - Balance strip renders for structured WHY rows
+ */
+
+import { describe, it, expect, vi } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { FeedbackFooter } from "../feedback-primitives"
+import type { PersistedFeedbackData } from "../feedback-primitives"
+import { SignalPriorityPopover } from "../signal-priority-popover"
+import type { PriorityFactor } from "../signal-priority-popover"
+import { ScoreWhyChips } from "../score-why-chips"
+import type {
+  QueueItem,
+  SignalScoreData,
+  SignalScoreExplanationBucket,
+  SignalScoreExplanationSignal,
+} from "../../prototype/prototype-config"
+
+// ─── Shared mock data ────────────────────────────────────────────────────────
+
+const mockFactors: PriorityFactor[] = [
+  {
+    key: "timing-asymmetry",
+    label: "Timing asymmetry",
+    icon: "radar",
+    tone: "alert",
+    direction: "raises",
+    score: 92,
+    rationale: "Test transaction 12h ago → no follow-on liquidation yet.",
+  },
+  {
+    key: "funds-at-stake",
+    label: "Funds at stake",
+    icon: "wallet",
+    tone: "alert",
+    direction: "raises",
+    score: 88,
+    rationale: "$3.4M moved in 8h · current treasury balance $0.00",
+  },
+]
+
+const mockItem: QueueItem = {
+  id: "case-1",
+  title: "Test Case",
+  details: "Some details",
+  statusColor: "red",
+  time: "2h ago",
+  company: "TestCorp",
+  tag1: "urgent",
+}
+
+function makeSignal(overrides: Partial<SignalScoreExplanationSignal> = {}): SignalScoreExplanationSignal {
+  return {
+    id: "sig-1",
+    label: "Treasury Liquidation",
+    primaryValue: "-$1,724,310.11",
+    qualifier: "100% of balance",
+    counterparty: "-> JPMorgan Chase --6042",
+    time: "7h ago",
+    ...overrides,
+  }
+}
+
+function makeBucket(overrides: Partial<SignalScoreExplanationBucket> = {}): SignalScoreExplanationBucket {
+  return {
+    key: "treasury_liquidation",
+    label: "Treasury Liquidation",
+    kind: "signal",
+    signalCount: 2,
+    icon: "trending-down",
+    tone: "alert",
+    signals: [
+      makeSignal({ id: "sig-1" }),
+      makeSignal({ id: "sig-2", primaryValue: "-$500,000.00", qualifier: "45% of balance" }),
+    ],
+    ...overrides,
+  }
+}
+
+function makeSignalData(overrides: Partial<SignalScoreData> = {}): SignalScoreData {
+  return {
+    score: 85,
+    factors: [],
+    whyNow: "Large treasury movement",
+    evidence: [],
+    confidence: 90,
+    explanationBuckets: [makeBucket()],
+    ...overrides,
+  }
+}
+
+// ─── SignalPriorityPopover factor feedback ──────────────────────────────────
+
+describe("SignalPriorityPopover factor feedback", () => {
+  it("factor feedback with no note shows Saved (persisted state)", () => {
+    const onFactorFeedback = vi.fn()
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={onFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Click thumb-up on first factor
+    fireEvent.click(screen.getByTestId("factor-thumb-up-timing-asymmetry"))
+
+    // Submit without typing a note
+    fireEvent.click(screen.getByTestId("factor-submit-timing-asymmetry"))
+
+    // After submit, factor transitions to persisted state showing "Your feedback:"
+    const indicator = screen.getByTestId("factor-feedback-persisted-timing-asymmetry")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+
+    // Callback should have been called
+    expect(onFactorFeedback).toHaveBeenCalledWith("timing-asymmetry", "up", "")
+  })
+
+  it("factor feedback with existing current-user note shows 'Your feedback:' after initial render", () => {
+    const initialFactorFeedback = {
+      "timing-asymmetry": { type: "down" as const, detail: "Score is too high", ownershipLabel: "Your feedback" },
+    }
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={vi.fn()}
+        initialFactorFeedback={initialFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Should show persisted indicator with "Your feedback:"
+    const indicator = screen.getByTestId("factor-feedback-persisted-timing-asymmetry")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Score is too high")
+  })
+
+  it("factor feedback with existing current-user note shows 'Your feedback:' after prop updates", () => {
+    const onFactorFeedback = vi.fn()
+
+    const { rerender } = render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={onFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Initially no persisted feedback
+    expect(screen.queryByTestId("factor-feedback-persisted-timing-asymmetry")).toBeNull()
+
+    // Rerender with initialFactorFeedback
+    rerender(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={onFactorFeedback}
+        initialFactorFeedback={{
+          "timing-asymmetry": { type: "up", detail: "Looks correct", ownershipLabel: "Your feedback" },
+        }}
+      />,
+    )
+
+    // Now should show persisted indicator
+    const indicator = screen.getByTestId("factor-feedback-persisted-timing-asymmetry")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Looks correct")
+  })
+
+  it("factor feedback with teammate fallback shows 'Team feedback:'", () => {
+    const initialFactorFeedback = {
+      "funds-at-stake": { type: "up" as const, detail: "Accurate numbers", ownershipLabel: "Team feedback" },
+    }
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        onFactorFeedback={vi.fn()}
+        initialFactorFeedback={initialFactorFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Should show "Team feedback:" for the funds-at-stake factor
+    const indicator = screen.getByTestId("factor-feedback-persisted-funds-at-stake")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Team feedback:")
+    expect(indicator.textContent).toContain("Accurate numbers")
+  })
+})
+
+// ─── Priority popover footer initial feedback ────────────────────────────────
+
+describe("Priority popover footer initial feedback", () => {
+  it("hydrates from initialPriorityFeedback and submit confirmation appears", () => {
+    const initialPriorityFeedback: PersistedFeedbackData = {
+      sentiment: "negative",
+      reasonTop: "Wrong factor weighting",
+      detail: "Last-contact weight is too high",
+      ownershipLabel: "Your feedback",
+    }
+    render(
+      <SignalPriorityPopover
+        score={79}
+        urgencyLabel="High"
+        factors={mockFactors}
+        onFeedbackSubmit={vi.fn()}
+        initialPriorityFeedback={initialPriorityFeedback}
+      />,
+    )
+
+    // Open popover
+    fireEvent.click(screen.getByTestId("priority-popover-trigger"))
+
+    // Should show persisted indicator in the footer
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Last-contact weight is too high")
+  })
+})
+
+// ─── Bucket footer submit shows saved/submitted state ─────────────────────
+
+describe("Bucket feedback footer", () => {
+  it("submit shows saved/submitted state", () => {
+    const onBucketFeedback = vi.fn()
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Click "Not helpful"
+    fireEvent.click(screen.getByText("Not helpful"))
+
+    // Submit
+    fireEvent.click(screen.getByText("Submit"))
+
+    // Should show "Saved" pill
+    const savedPill = screen.getByTestId("feedback-submitted-pill")
+    expect(savedPill).toBeTruthy()
+    expect(savedPill.textContent).toContain("Saved")
+  })
+
+  it("bucket initial feedback shows 'Your feedback:'", () => {
+    const onBucketFeedback = vi.fn()
+    const initialBucketFeedback: Record<string, PersistedFeedbackData> = {
+      treasury_liquidation: {
+        sentiment: "positive",
+        detail: "Counterparty match was right",
+        ownershipLabel: "Your feedback",
+      },
+    }
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback, initialBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show persisted indicator
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Counterparty match was right")
+  })
+
+  it("bucket initial feedback shows 'Team feedback:'", () => {
+    const onBucketFeedback = vi.fn()
+    const initialBucketFeedback: Record<string, PersistedFeedbackData> = {
+      treasury_liquidation: {
+        sentiment: "negative",
+        detail: "Timing was off",
+        ownershipLabel: "Team feedback",
+      },
+    }
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({ onBucketFeedback, initialBucketFeedback })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should show persisted indicator with team label
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Team feedback:")
+    expect(indicator.textContent).toContain("Timing was off")
+  })
+})
+
+// ─── FeedbackFooter sync behavior ────────────────────────────────────────────
+
+describe("FeedbackFooter sync behavior", () => {
+  it("syncs when initialFeedback arrives after mount", () => {
+    const onFeedbackChange = vi.fn()
+    const { rerender } = render(
+      <FeedbackFooter
+        feedback={null}
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-1"
+      />,
+    )
+
+    // Initially no persisted indicator
+    expect(screen.queryByTestId("persisted-feedback-indicator")).toBeNull()
+    expect(screen.getByText("Helpful")).toBeTruthy()
+
+    // Simulate async data arriving
+    const incoming: PersistedFeedbackData = {
+      sentiment: "positive",
+      detail: "Looks good",
+      ownershipLabel: "Your feedback",
+    }
+
+    rerender(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-1"
+        initialFeedback={incoming}
+      />,
+    )
+
+    // Now should show persisted indicator
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator).toBeTruthy()
+    expect(indicator.textContent).toContain("Your feedback:")
+    expect(indicator.textContent).toContain("Looks good")
+  })
+
+  it("switches when feedbackKey changes", () => {
+    const onFeedbackChange = vi.fn()
+    const fb1: PersistedFeedbackData = {
+      sentiment: "positive",
+      detail: "Good",
+      ownershipLabel: "Your feedback",
+    }
+    const fb2: PersistedFeedbackData = {
+      sentiment: "negative",
+      detail: "Bad",
+      ownershipLabel: "Team feedback",
+    }
+
+    const { rerender } = render(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-1"
+        initialFeedback={fb1}
+      />,
+    )
+
+    // Should show fb1 content
+    expect(screen.getByTestId("persisted-feedback-indicator").textContent).toContain("Good")
+
+    // Switch to different key with different feedback
+    rerender(
+      <FeedbackFooter
+        feedback="negative"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={vi.fn()}
+        feedbackKey="bucket-2"
+        initialFeedback={fb2}
+      />,
+    )
+
+    // Should now show fb2 content
+    const indicator = screen.getByTestId("persisted-feedback-indicator")
+    expect(indicator.textContent).toContain("Team feedback:")
+    expect(indicator.textContent).toContain("Bad")
+  })
+
+  it("does not overwrite active edits for same key", () => {
+    const onFeedbackChange = vi.fn()
+    const onSubmit = vi.fn()
+    const fb: PersistedFeedbackData = {
+      sentiment: "positive",
+      detail: "Initial note",
+      ownershipLabel: "Your feedback",
+    }
+
+    const { rerender } = render(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={onSubmit}
+        feedbackKey="bucket-1"
+        initialFeedback={fb}
+      />,
+    )
+
+    // Click the persisted indicator to open editor
+    fireEvent.click(screen.getByTestId("persisted-feedback-indicator"))
+
+    // Now should be in editing mode with the expansion open
+    expect(screen.getByPlaceholderText("Add optional detail…")).toBeTruthy()
+
+    // Type new detail
+    const input = screen.getByPlaceholderText("Add optional detail…")
+    fireEvent.change(input, { target: { value: "My new note" } })
+
+    // Rerender with updated initialFeedback (simulating prop change) - same key
+    const fbUpdated: PersistedFeedbackData = {
+      sentiment: "negative",
+      detail: "Server-side update",
+      ownershipLabel: "Team feedback",
+    }
+    rerender(
+      <FeedbackFooter
+        feedback="positive"
+        onFeedbackChange={onFeedbackChange}
+        onSubmit={onSubmit}
+        feedbackKey="bucket-1"
+        initialFeedback={fbUpdated}
+      />,
+    )
+
+    // The editor should still be open with the user's text - not the server update
+    const editInput = screen.getByPlaceholderText("Add optional detail…")
+    expect(editInput).toBeTruthy()
+    expect((editInput as HTMLInputElement).value).toBe("My new note")
+  })
+})
+
+// ─── Balance strip rendering ──────────────────────────────────────────────────
+
+describe("Balance context strip", () => {
+  it("renders for structured WHY rows with currentBalance", () => {
+    const signalWithBalance = makeSignal({
+      id: "sig-balance",
+      currentBalance: "$3.0M",
+      balanceContext: "down from $23M",
+    })
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({ signals: [signalWithBalance], signalCount: 1 }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should render balance strip
+    const strip = screen.getByTestId("balance-context-strip")
+    expect(strip).toBeTruthy()
+    expect(strip.textContent).toContain("Current balance")
+    expect(strip.textContent).toContain("$3.0M")
+    expect(strip.textContent).toContain("down from $23M")
+  })
+
+  it("renders only balanceContext when currentBalance is absent", () => {
+    const signalWithContext = makeSignal({
+      id: "sig-ctx",
+      balanceContext: "significant velocity",
+    })
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData({
+          explanationBuckets: [
+            makeBucket({ signals: [signalWithContext], signalCount: 1 }),
+          ],
+        })}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should render balance strip with only context
+    const strip = screen.getByTestId("balance-context-strip")
+    expect(strip).toBeTruthy()
+    expect(strip.textContent).toContain("significant velocity")
+    expect(strip.textContent).not.toContain("Current balance")
+  })
+
+  it("does not render balance strip when neither currentBalance nor balanceContext is present", () => {
+    render(
+      <ScoreWhyChips
+        item={mockItem}
+        signalData={makeSignalData()}
+      />,
+    )
+
+    // Expand bucket
+    fireEvent.click(screen.getByText("Treasury Liquidation"))
+
+    // Should NOT render balance strip
+    expect(screen.queryByTestId("balance-context-strip")).toBeNull()
+  })
+})