@handled-ai/design-system 0.9.24 → 0.9.25

package/src/components/__tests__/score-breakdown-initial.test.tsx

@@ -0,0 +1,310 @@
+/**
+ * Tests for ScoreBreakdown's `initialFeedback` prop and related behaviors.
+ *
+ * Covers:
+ *  - deriveInitialState helper (via observable rendered state)
+ *  - Pre-populated feedback state (thumb shown as active)
+ *  - Pre-populated feedbackText / savedText
+ *  - useEffect sync on prop change (with editingKey guard)
+ *  - submitFeedbackText calls onFactorFeedback with text ?? "" (not undefined)
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ScoreBreakdown } from "../score-breakdown";
+import {
+  makeScoreFactor,
+  makeHighRiskFactor,
+  makeInitialFactorFeedback,
+  makeSingleFactorFeedback,
+  EMPTY_FACTOR_FEEDBACK,
+} from "../../__test-helpers__/fixtures";
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function makeFactors() {
+  return [
+    makeScoreFactor({ key: "revenue_change", label: "Revenue Change" }),
+    makeHighRiskFactor({ key: "cash_runway", label: "Cash Runway" }),
+  ];
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ScoreBreakdown — initialFeedback prop (deriveInitialState)", () => {
+  it("renders factors without initialFeedback (no pre-populated state)", () => {
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={undefined}
+      />,
+    );
+    expect(screen.getByText("Revenue Change")).toBeDefined();
+    expect(screen.getByText("Cash Runway")).toBeDefined();
+  });
+
+  it("with EMPTY_FACTOR_FEEDBACK, renders like undefined (no active thumbs)", () => {
+    // Neither factor should show a saved text or different thumb style
+    const { container } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={EMPTY_FACTOR_FEEDBACK}
+      />,
+    );
+    // No saved text paragraphs — just label and score bar
+    expect(screen.queryByText("Revenue data looks accurate.")).toBeNull();
+    expect(container).toBeDefined();
+  });
+
+  it("pre-populates thumb state for revenue_change as 'up'", () => {
+    // When feedback[key] = 'up', the thumb-up button gets emerald styling
+    // We can observe this by checking that the saved text from detail is rendered
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Revenue data looks accurate.")}
+      />,
+    );
+    // savedText["revenue_change"] = "Revenue data looks accurate." is rendered as an edit button
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+  });
+
+  it("pre-populates thumb state for cash_runway as 'down' with detail", () => {
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("cash_runway", "down", "Cash figures seem too optimistic.")}
+      />,
+    );
+    expect(screen.getByText("Cash figures seem too optimistic.")).toBeDefined();
+  });
+
+  it("pre-populates multiple factors from initialFeedback", () => {
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeInitialFactorFeedback()}
+      />,
+    );
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+    expect(screen.getByText("Cash figures seem too optimistic.")).toBeDefined();
+  });
+
+  it("factors with no matching key in initialFeedback are unaffected", () => {
+    // Only revenue_change is in the initial feedback; cash_runway should have no saved text
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Revenue data looks accurate.")}
+      />,
+    );
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+    expect(screen.queryByText("Cash figures seem too optimistic.")).toBeNull();
+  });
+
+  it("detail = '' does not produce a savedText entry (filterFn filters it)", () => {
+    // makeMinimalInitialScoreFeedback analogue for factor: detail = ""
+    render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "")}
+      />,
+    );
+    // No saved text button rendered (detail is empty, filterFn(v => !!v.detail) excludes it)
+    // But the thumb IS pre-populated — factor shows "up" state
+    // We can't easily assert CSS classes, but we can assert no saved text renders
+    // (the "revenue data looks accurate" text should NOT be here since detail = "")
+    expect(screen.queryByText("Revenue data looks accurate.")).toBeNull();
+  });
+});
+
+describe("ScoreBreakdown — useEffect sync on prop change", () => {
+  it("syncs state when initialFeedback changes from undefined to a value", async () => {
+    const { rerender } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={undefined}
+      />,
+    );
+
+    // No saved text initially
+    expect(screen.queryByText("Revenue data looks accurate.")).toBeNull();
+
+    // Now provide initialFeedback
+    await act(async () => {
+      rerender(
+        <ScoreBreakdown
+          factors={makeFactors()}
+          initialFeedback={makeSingleFactorFeedback(
+            "revenue_change",
+            "up",
+            "Revenue data looks accurate.",
+          )}
+        />,
+      );
+    });
+
+    expect(screen.getByText("Revenue data looks accurate.")).toBeDefined();
+  });
+
+  it("syncs state when initialFeedback changes from one value to another", async () => {
+    const { rerender } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Old detail.")}
+      />,
+    );
+
+    expect(screen.getByText("Old detail.")).toBeDefined();
+
+    await act(async () => {
+      rerender(
+        <ScoreBreakdown
+          factors={makeFactors()}
+          initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "New detail.")}
+        />,
+      );
+    });
+
+    expect(screen.queryByText("Old detail.")).toBeNull();
+    expect(screen.getByText("New detail.")).toBeDefined();
+  });
+
+  it("guard: preserves actively-edited key when initialFeedback changes", async () => {
+    // Start with one value
+    const { rerender, container } = render(
+      <ScoreBreakdown
+        factors={makeFactors()}
+        initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Old detail.")}
+      />,
+    );
+
+    // Click the saved text to enter edit mode (sets editingKey = "revenue_change")
+    const savedTextButton = screen.getByText("Old detail.");
+    await act(async () => {
+      fireEvent.click(savedTextButton);
+    });
+
+    // Now an input should be visible
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+
+    // Change the input text to something different
+    await act(async () => {
+      fireEvent.change(input!, { target: { value: "My in-progress edit" } });
+    });
+
+    // Now the prop changes — sync should skip the editing key
+    await act(async () => {
+      rerender(
+        <ScoreBreakdown
+          factors={makeFactors()}
+          initialFeedback={makeSingleFactorFeedback("revenue_change", "up", "Async update.")}
+        />,
+      );
+    });
+
+    // The input should still have the user's in-progress value
+    const inputAfter = container.querySelector("input") as HTMLInputElement;
+    expect(inputAfter?.value).toBe("My in-progress edit");
+  });
+});
+
+describe("ScoreBreakdown — submitFeedbackText: text ?? '' fix", () => {
+  it("calls onFactorFeedback with empty string when no text entered (not undefined)", async () => {
+    const onFactorFeedback = vi.fn();
+    const { container } = render(
+      <ScoreBreakdown
+        factors={[makeScoreFactor({ key: "revenue_change", label: "Revenue Change" })]}
+        onFactorFeedback={onFactorFeedback}
+        initialFeedback={undefined}
+      />,
+    );
+
+    // Click thumbs-up to set feedback[revenue_change] = "up" and enter edit mode
+    const thumbUpButton = container.querySelectorAll("button")[0];
+    await act(async () => {
+      fireEvent.click(thumbUpButton);
+    });
+
+    // An input should appear (editingKey = "revenue_change")
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+
+    // Blur the input without typing (feedbackText["revenue_change"] = "")
+    await act(async () => {
+      fireEvent.blur(input!);
+    });
+
+    // onFactorFeedback should have been called twice:
+    // 1. from handleFeedback when thumbs clicked: (key, "up")
+    // 2. from submitFeedbackText on blur: (key, "up", "" ) ← the fix
+    const calls = onFactorFeedback.mock.calls;
+    const submitCall = calls.find(
+      (c: unknown[]) => c.length === 3,
+    );
+    expect(submitCall).toBeDefined();
+    expect(submitCall![2]).toBe(""); // "" not undefined
+  });
+
+  it("calls onFactorFeedback with trimmed text when text is entered", async () => {
+    const onFactorFeedback = vi.fn();
+    const { container } = render(
+      <ScoreBreakdown
+        factors={[makeScoreFactor({ key: "revenue_change", label: "Revenue Change" })]}
+        onFactorFeedback={onFactorFeedback}
+        initialFeedback={undefined}
+      />,
+    );
+
+    const thumbUpButton = container.querySelectorAll("button")[0];
+    await act(async () => {
+      fireEvent.click(thumbUpButton);
+    });
+
+    const input = container.querySelector("input");
+    await act(async () => {
+      fireEvent.change(input!, { target: { value: "  Revenue is accurate  " } });
+    });
+
+    await act(async () => {
+      fireEvent.blur(input!);
+    });
+
+    const calls = onFactorFeedback.mock.calls;
+    const submitCall = calls.find(
+      (c: unknown[]) => c.length === 3,
+    );
+    expect(submitCall).toBeDefined();
+    expect(submitCall![2]).toBe("Revenue is accurate"); // trimmed
+  });
+
+  it("pressing Enter submits with text ?? '' (empty string for blank input)", async () => {
+    const onFactorFeedback = vi.fn();
+    const { container } = render(
+      <ScoreBreakdown
+        factors={[makeScoreFactor({ key: "revenue_change", label: "Revenue Change" })]}
+        onFactorFeedback={onFactorFeedback}
+        initialFeedback={undefined}
+      />,
+    );
+
+    const thumbUpButton = container.querySelectorAll("button")[0];
+    await act(async () => {
+      fireEvent.click(thumbUpButton);
+    });
+
+    const input = container.querySelector("input");
+    await act(async () => {
+      fireEvent.keyDown(input!, { key: "Enter" });
+    });
+
+    const calls = onFactorFeedback.mock.calls;
+    const submitCall = calls.find(
+      (c: unknown[]) => c.length === 3,
+    );
+    expect(submitCall).toBeDefined();
+    expect(submitCall![2]).toBe(""); // empty string, not undefined
+  });
+});

package/src/components/__tests__/score-feedback-initial.test.tsx

@@ -0,0 +1,253 @@
+/**
+ * Tests for ScoreFeedback.Root's `initialFeedback` prop and related behaviors.
+ *
+ * Covers:
+ *  - Initial `submittedFeedback` pre-population via prop
+ *  - "Noted" / "Recorded" shown instead of thumbs when pre-populated
+ *  - null initialFeedback → blank state (thumbs shown)
+ *  - useEffect sync: prop changes from null → value updates submittedFeedback
+ *  - useEffect guard: in-progress edit (thumbState ≠ null) skips sync
+ *  - editSubmitted restores prior feedback into editing state
+ *  - handleSubmit calls onSubmitFeedback
+ *  - factor callback fix: text ?? "" (empty string, not undefined)
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ScoreFeedback } from "../score-feedback";
+import {
+  makeInitialScoreFeedback,
+  makeNegativeInitialScoreFeedback,
+  makeMinimalInitialScoreFeedback,
+} from "../../__test-helpers__/fixtures";
+
+// ─── Minimal compound-component wrapper ──────────────────────────────────────
+
+function Wrapper({
+  initialFeedback,
+  onSubmitFeedback,
+}: {
+  initialFeedback?: { type: "up" | "down"; pills: string[]; detail: string } | null;
+  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void;
+}) {
+  return (
+    <ScoreFeedback.Root
+      initialFeedback={initialFeedback}
+      onSubmitFeedback={onSubmitFeedback}
+    >
+      <ScoreFeedback.Trigger />
+      <ScoreFeedback.Panel />
+    </ScoreFeedback.Root>
+  );
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ScoreFeedback.Root — initialFeedback prop", () => {
+  it("shows 'Noted' when initialFeedback.type is 'up'", () => {
+    render(<Wrapper initialFeedback={makeInitialScoreFeedback()} />);
+    expect(screen.getByText("Noted")).toBeDefined();
+  });
+
+  it("shows 'Recorded' when initialFeedback.type is 'down'", () => {
+    render(<Wrapper initialFeedback={makeNegativeInitialScoreFeedback()} />);
+    expect(screen.getByText("Recorded")).toBeDefined();
+  });
+
+  it("does NOT show thumbs when initialFeedback is set (submitted state)", () => {
+    render(
+      <Wrapper initialFeedback={makeInitialScoreFeedback()} />,
+    );
+    // Thumbs-up and thumbs-down buttons should not be rendered
+    // The only button visible should be the "edit" button (with pill/detail), not bare thumbs
+    // We check by absence of the thumb click pattern — no button with onClick=handleThumbClick("up")
+    // More concretely: no thumb buttons means the Trigger is in "submitted" mode
+    expect(screen.queryByTitle?.("")).toBeNull?.(); // optional, just no crash
+    expect(screen.getByText("Noted")).toBeDefined();
+  });
+
+  it("shows thumbs when initialFeedback is null", () => {
+    const { container } = render(<Wrapper initialFeedback={null} />);
+    // Panel is hidden (no thumbState), Trigger shows thumb buttons
+    const buttons = container.querySelectorAll("button");
+    // Two thumb buttons are present
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+    // No "Noted" or "Recorded" text
+    expect(screen.queryByText("Noted")).toBeNull();
+    expect(screen.queryByText("Recorded")).toBeNull();
+  });
+
+  it("shows thumbs when initialFeedback is undefined", () => {
+    const { container } = render(<Wrapper />);
+    const buttons = container.querySelectorAll("button");
+    expect(buttons.length).toBeGreaterThanOrEqual(2);
+    expect(screen.queryByText("Noted")).toBeNull();
+  });
+
+  it("renders submitted pills from initialFeedback", () => {
+    render(
+      <Wrapper
+        initialFeedback={makeInitialScoreFeedback({
+          pills: ["Right timing", "Accurate data"],
+        })}
+      />,
+    );
+    expect(screen.getByText("Right timing")).toBeDefined();
+    expect(screen.getByText("Accurate data")).toBeDefined();
+  });
+
+  it("renders submitted detail text from initialFeedback", () => {
+    render(
+      <Wrapper
+        initialFeedback={makeInitialScoreFeedback({ detail: "Score looks correct." })}
+      />,
+    );
+    expect(screen.getByText("Score looks correct.")).toBeDefined();
+  });
+
+  it("minimal initialFeedback (no pills, no detail) still shows Noted without edit button", () => {
+    const { container } = render(
+      <Wrapper initialFeedback={makeMinimalInitialScoreFeedback("up")} />,
+    );
+    expect(screen.getByText("Noted")).toBeDefined();
+    // No pill text to find — just check no crash
+    const buttons = container.querySelectorAll("button");
+    // The edit button requires pills.length > 0 || detail, so no edit button here
+    expect(buttons.length).toBe(0);
+  });
+});
+
+describe("ScoreFeedback.Root — useEffect sync", () => {
+  it("updates submittedFeedback when initialFeedback prop changes from null to value", async () => {
+    const { rerender } = render(<Wrapper initialFeedback={null} />);
+
+    // Initially null → thumbs shown
+    expect(screen.queryByText("Noted")).toBeNull();
+
+    // Prop changes to a value
+    await act(async () => {
+      rerender(<Wrapper initialFeedback={makeInitialScoreFeedback()} />);
+    });
+
+    // Now should show "Noted"
+    expect(screen.getByText("Noted")).toBeDefined();
+  });
+
+  it("updates from 'up' to 'down' when prop changes", async () => {
+    const { rerender } = render(
+      <Wrapper initialFeedback={makeInitialScoreFeedback()} />,
+    );
+    expect(screen.getByText("Noted")).toBeDefined();
+
+    await act(async () => {
+      rerender(<Wrapper initialFeedback={makeNegativeInitialScoreFeedback()} />);
+    });
+
+    expect(screen.getByText("Recorded")).toBeDefined();
+  });
+
+  it("guard: does NOT sync when user has thumbState set (in-progress edit)", async () => {
+    // Start with null initialFeedback
+    const { rerender, container } = render(<Wrapper initialFeedback={null} />);
+
+    // User clicks thumbs-up to start an edit
+    const buttons = container.querySelectorAll("button");
+    await act(async () => {
+      fireEvent.click(buttons[0]); // thumbs-up button
+    });
+
+    // Now prop changes — should NOT overwrite in-progress edit
+    await act(async () => {
+      rerender(<Wrapper initialFeedback={makeNegativeInitialScoreFeedback()} />);
+    });
+
+    // Should NOT show "Recorded" — user's thumb state takes precedence
+    expect(screen.queryByText("Recorded")).toBeNull();
+    // Panel should be visible (thumbState is set)
+    // The Panel shows "How's this score?" section
+    expect(screen.getByText(/How['']s this score\?/)).toBeDefined();
+  });
+});
+
+describe("ScoreFeedback.Root — onSubmitFeedback callback", () => {
+  it("calls onSubmitFeedback with (type, pills, detail) on submit", async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(
+      <Wrapper initialFeedback={null} onSubmitFeedback={onSubmit} />,
+    );
+
+    // Click thumbs-up
+    const thumbButtons = container.querySelectorAll("button");
+    await act(async () => {
+      fireEvent.click(thumbButtons[0]); // thumbs-up
+    });
+
+    // Select a pill
+    const pillButton = screen.getByText("Right timing");
+    await act(async () => {
+      fireEvent.click(pillButton);
+    });
+
+    // Click Submit
+    const submitButton = screen.getByText("Submit");
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith("up", ["Right timing"], "");
+  });
+
+  it("calls onSubmitFeedback with empty string detail when no detail entered", async () => {
+    const onSubmit = vi.fn();
+    const { container } = render(
+      <Wrapper initialFeedback={null} onSubmitFeedback={onSubmit} />,
+    );
+
+    const thumbButtons = container.querySelectorAll("button");
+    await act(async () => {
+      fireEvent.click(thumbButtons[0]); // thumbs-up
+    });
+
+    const pillButton = screen.getByText("Right timing");
+    await act(async () => {
+      fireEvent.click(pillButton);
+    });
+
+    const submitButton = screen.getByText("Submit");
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
+
+    const [, , detail] = onSubmit.mock.calls[0] as [string, string[], string];
+    expect(detail).toBe("");
+  });
+});
+
+describe("ScoreFeedback.Root — editSubmitted", () => {
+  it("clicking the pills/detail edit area restores feedback into editing state", async () => {
+    const { container } = render(
+      <Wrapper
+        initialFeedback={makeInitialScoreFeedback({
+          pills: ["Right timing"],
+          detail: "Score looks correct.",
+        })}
+      />,
+    );
+
+    // The edit button (wraps pills + detail) should be present
+    const editButton = container.querySelector("button");
+    expect(editButton).not.toBeNull();
+
+    await act(async () => {
+      fireEvent.click(editButton!);
+    });
+
+    // After clicking, the Panel should be visible with "How's this score?"
+    expect(screen.getByText(/How['']s this score\?/)).toBeDefined();
+    // And the previously selected pill should be pre-selected
+    // (visible in the panel's pill list as selected)
+    expect(screen.getAllByText("Right timing").length).toBeGreaterThanOrEqual(1);
+  });
+});

package/src/components/score-breakdown.tsx

@@ -36,28 +36,56 @@ interface ScoreBreakdownProps {
   initialFeedback?: Record<string, { type: "up" | "down"; detail: string }>
 }
 
+function deriveInitialState<T>(
+  init: Record<string, { type: "up" | "down"; detail: string }> | undefined,
+  mapFn: (v: { type: "up" | "down"; detail: string }) => T,
+  filterFn?: (v: { type: "up" | "down"; detail: string }) => boolean,
+): Record<string, T> {
+  if (!init) return {}
+  const entries = Object.entries(init)
+  const filtered = filterFn ? entries.filter(([, v]) => filterFn(v)) : entries
+  return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))
+}
+
 function ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback }: ScoreBreakdownProps) {
   const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>(
-    initialFeedback
-      ? Object.fromEntries(Object.entries(initialFeedback).map(([k, v]) => [k, v.type]))
-      : {}
+    () => deriveInitialState(initialFeedback, (v) => v.type)
   )
   const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>(
-    initialFeedback
-      ? Object.fromEntries(Object.entries(initialFeedback).map(([k, v]) => [k, v.detail]))
-      : {}
+    () => deriveInitialState(initialFeedback, (v) => v.detail)
   )
   const [savedText, setSavedText] = React.useState<Record<string, string>>(
-    initialFeedback
-      ? Object.fromEntries(
-          Object.entries(initialFeedback)
-            .filter(([, v]) => v.detail)
-            .map(([k, v]) => [k, v.detail])
-        )
-      : {}
+    () => deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)
   )
   const [editingKey, setEditingKey] = React.useState<string | null>(null)
 
+  // Sync state when initialFeedback prop changes (e.g. async hydration).
+  // Skip keys the user is actively editing to avoid clobbering in-progress input.
+  React.useEffect(() => {
+    setFeedback((prev) => {
+      const next: Record<string, "up" | "down" | null> = deriveInitialState(initialFeedback, (v) => v.type)
+      // Preserve any key the user is currently editing
+      if (editingKey && prev[editingKey] !== undefined) {
+        next[editingKey] = prev[editingKey]
+      }
+      return next
+    })
+    setFeedbackText((prev) => {
+      const next = deriveInitialState(initialFeedback, (v) => v.detail)
+      if (editingKey && prev[editingKey] !== undefined) {
+        next[editingKey] = prev[editingKey]
+      }
+      return next
+    })
+    setSavedText((prev) => {
+      const next = deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)
+      if (editingKey && prev[editingKey] !== undefined) {
+        next[editingKey] = prev[editingKey]
+      }
+      return next
+    })
+  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- reads editingKey as guard, not trigger
+
   const handleFeedback = (factorKey: string, type: "up" | "down") => {
     const newState = feedback[factorKey] === type ? null : type
     setFeedback((prev) => ({ ...prev, [factorKey]: newState }))

package/src/components/score-feedback.tsx

@@ -61,9 +61,16 @@ function Root({ children, onSubmitFeedback, initialFeedback }: RootProps) {
   const [detailText, setDetailTextState] = React.useState("")
   const [notedType, setNotedType] = React.useState<"up" | "down" | null>(null)
   const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(
-    initialFeedback ? { type: initialFeedback.type, pills: initialFeedback.pills, detail: initialFeedback.detail } : null
+    initialFeedback ?? null
   )
 
+  // Sync submitted feedback when initialFeedback prop changes (e.g. async
+  // detail load). Skip when the user has an in-progress edit (thumbState set).
+  React.useEffect(() => {
+    if (thumbState !== null) return
+    setSubmittedFeedback(initialFeedback ?? null)
+  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- intentionally omits thumbState to read it as a guard, not a trigger
+
   const otherSelected = selectedPills.includes("Other")
 
   const hasRequiredInput =