Improve issue approval visibility

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/ApprovalPayload.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ApprovalPayloadRenderer, approvalLabel } from "./ApprovalPayload";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("approvalLabel", () => {
+  it("uses payload titles for generic board approvals", () => {
+    expect(
+      approvalLabel("request_board_approval", {
+        title: "Reply with an ASCII frog",
+      }),
+    ).toBe("Board Approval: Reply with an ASCII frog");
+  });
+});
+
+describe("ApprovalPayloadRenderer", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it("renders request_board_approval payload fields without falling back to raw JSON", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{
+            title: "Reply with an ASCII frog",
+            summary: "Board asked for approval before posting the frog.",
+            recommendedAction: "Approve the frog reply.",
+            nextActionOnApproval: "Post the frog comment on the issue.",
+            proposedComment: "(o)<",
+          }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Reply with an ASCII frog");
+    expect(container.textContent).toContain("Board asked for approval before posting the frog.");
+    expect(container.textContent).toContain("Approve the frog reply.");
+    expect(container.textContent).toContain("Post the frog comment on the issue.");
+    expect(container.textContent).toContain("(o)<");
+    expect(container.textContent).not.toContain("\"recommendedAction\"");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+});