Add frontend proposal cards for new agent actions

client/package.json

@@ -29,7 +29,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "cross-env CI=false react-scripts build",
-    "electron": "electron ."
+    "electron": "electron .",
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": [

client/src/__tests__/agentProposalCards.test.js

@@ -0,0 +1,87 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AgentProposalCard from "../components/chat/AgentProposalCard";
+
+describe("AgentProposalCard", () => {
+  test("renders prioritize_failure_hotspots card and actions", async () => {
+    const user = userEvent.setup();
+    const onApprove = jest.fn();
+    const onReject = jest.fn();
+    const proposal = {
+      type: "prioritize_failure_hotspots",
+      rationale: "Focus review on areas with recurrent model misses.",
+      payload: {
+        priority_metric: "error_density",
+        max_hotspots: 5,
+        candidate_count: 12,
+      },
+    };
+
+    render(
+      <AgentProposalCard
+        proposal={proposal}
+        onApprove={onApprove}
+        onReject={onReject}
+      />,
+    );
+
+    expect(screen.getByText("Prioritize Failure Hotspots")).toBeInTheDocument();
+    expect(screen.getByText(/recurrent model misses/i)).toBeInTheDocument();
+    expect(screen.getByText(/Priority metric:/i)).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Approve" }));
+    await user.click(screen.getByRole("button", { name: "Reject" }));
+
+    expect(onApprove).toHaveBeenCalledWith(proposal);
+    expect(onReject).toHaveBeenCalledWith(proposal);
+  });
+
+  test("renders preview_correction_impact card and actions", async () => {
+    const user = userEvent.setup();
+    const onApprove = jest.fn();
+    const onReject = jest.fn();
+    const proposal = {
+      type: "preview_correction_impact",
+      rationale: "Estimate impact before applying batch corrections.",
+      payload: {
+        target_region: "slice_020-030",
+        estimated_quality_gain: "+4.2% IoU",
+        confidence: "high",
+      },
+    };
+
+    render(
+      <AgentProposalCard
+        proposal={proposal}
+        onApprove={onApprove}
+        onReject={onReject}
+      />,
+    );
+
+    expect(screen.getByText("Preview Correction Impact")).toBeInTheDocument();
+    expect(screen.getByText(/Estimate impact/i)).toBeInTheDocument();
+    expect(screen.getByText(/Target region:/i)).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Approve" }));
+    await user.click(screen.getByRole("button", { name: "Reject" }));
+
+    expect(onApprove).toHaveBeenCalledWith(proposal);
+    expect(onReject).toHaveBeenCalledWith(proposal);
+  });
+
+  test("falls back for unknown proposal types", () => {
+    const renderFallback = jest.fn(() => <div>Existing card renderer</div>);
+
+    render(
+      <AgentProposalCard
+        proposal={{ type: "legacy_proposal", payload: {} }}
+        renderFallback={renderFallback}
+      />,
+    );
+
+    expect(renderFallback).toHaveBeenCalled();
+    expect(screen.getByText("Existing card renderer")).toBeInTheDocument();
+  });
+});

client/src/components/chat/AgentProposalCard.js

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  extractKeyFields,
+  PROPOSAL_TITLES,
+} from "../../contexts/workflow/proposalCardFields";
+
+const cardStyle = {
+  border: "1px solid #d9d9d9",
+  borderRadius: 8,
+  padding: 10,
+  marginTop: 8,
+};
+
+const rationaleStyle = {
+  margin: "6px 0 8px",
+  color: "#595959",
+  fontSize: 13,
+};
+
+function ProposalCardBody({ proposal }) {
+  if (
+    proposal?.type !== "prioritize_failure_hotspots" &&
+    proposal?.type !== "preview_correction_impact"
+  ) {
+    return null;
+  }
+
+  const keyFields = extractKeyFields(proposal);
+  const rationale = proposal?.rationale || proposal?.summary || "No rationale provided.";
+
+  return (
+    <>
+      <strong>{PROPOSAL_TITLES[proposal.type]}</strong>
+      <div style={rationaleStyle}>{rationale}</div>
+      {keyFields.length > 0 ? (
+        <ul style={{ margin: 0, paddingLeft: 18 }}>
+          {keyFields.map((field) => (
+            <li key={field.label}>
+              <strong>{field.label}:</strong> {String(field.value)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </>
+  );
+}
+
+export default function AgentProposalCard({
+  proposal,
+  onApprove,
+  onReject,
+  renderFallback,
+}) {
+  const isNewProposalType =
+    proposal?.type === "prioritize_failure_hotspots" ||
+    proposal?.type === "preview_correction_impact";
+
+  if (!isNewProposalType) {
+    return renderFallback ? renderFallback(proposal) : null;
+  }
+
+  return (
+    <div data-testid={`proposal-card-${proposal.type}`} style={cardStyle}>
+      <ProposalCardBody proposal={proposal} />
+      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
+        <button type="button" onClick={() => onApprove?.(proposal)}>
+          Approve
+        </button>
+        <button type="button" onClick={() => onReject?.(proposal)}>
+          Reject
+        </button>
+      </div>
+    </div>
+  );
+}

client/src/contexts/workflow/proposalCardFields.js

@@ -0,0 +1,26 @@
+export const PROPOSAL_TITLES = {
+  prioritize_failure_hotspots: "Prioritize Failure Hotspots",
+  preview_correction_impact: "Preview Correction Impact",
+};
+
+export const PROPOSAL_FIELD_CONFIG = {
+  prioritize_failure_hotspots: [
+    { key: "priority_metric", label: "Priority metric" },
+    { key: "max_hotspots", label: "Hotspot limit" },
+    { key: "candidate_count", label: "Candidates" },
+  ],
+  preview_correction_impact: [
+    { key: "target_region", label: "Target region" },
+    { key: "estimated_quality_gain", label: "Est. quality gain" },
+    { key: "confidence", label: "Confidence" },
+  ],
+};
+
+export const extractKeyFields = (proposal) => {
+  const fieldConfig = PROPOSAL_FIELD_CONFIG[proposal?.type] || [];
+  const source = proposal?.payload || {};
+
+  return fieldConfig
+    .map(({ key, label }) => ({ label, value: source[key] }))
+    .filter(({ value }) => value !== undefined && value !== null && value !== "");
+};