From 2131ede7b8df75bbf5d2e0ad6a81a5a9d95d7e78 Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Wed, 29 Apr 2026 14:22:31 -0400
Subject: [PATCH] feat(board): render approval
 summary/recommendedAction/nextActionOnApproval as markdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces plain <p> tags in BoardApprovalPayloadContent with MarkdownBody
(softBreaks enabled) so agent-authored markdown in these three fields —
headers, bullets, and newlines — renders correctly in the Board UI instead
of collapsing into a single unstyled paragraph.  No schema change; the
fields remain plain strings in the approval payload, only the renderer
changed.  Matches how comments, issue documents, and interaction cards
already render markdown via MarkdownBody.

Test coverage added for ## header → <h2>, bullet list → <ul><li>, and
plain-prose regression (no markup injected for single-line inputs).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/components/ApprovalPayload.test.tsx | 151 ++++++++++++++++++---
 ui/src/components/ApprovalPayload.tsx      |   7 +-
 2 files changed, 135 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/ApprovalPayload.test.tsx b/ui/src/components/ApprovalPayload.test.tsx
index c11405e9..1b082e06 100644
--- a/ui/src/components/ApprovalPayload.test.tsx
+++ b/ui/src/components/ApprovalPayload.test.tsx
@@ -1,13 +1,33 @@
 // @vitest-environment jsdom
 
 import { act } from "react";
+import type { ReactNode } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThemeProvider } from "../context/ThemeContext";
 import { ApprovalPayloadRenderer, approvalLabel } from "./ApprovalPayload";
 
+vi.mock("@/lib/router", () => ({
+  Link: ({ children, to }: { children: ReactNode; to: string }) => <a href={to}>{children}</a>,
+}));
+
+vi.mock("../api/issues", () => ({
+  issuesApi: { get: vi.fn() },
+}));
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
+function withProviders(children: ReactNode) {
+  return (
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <ThemeProvider>{children}</ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+
 describe("approvalLabel", () => {
   it("uses payload titles for generic board approvals", () => {
     expect(
@@ -35,17 +55,19 @@ describe("ApprovalPayloadRenderer", () => {
 
     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.",
-            risks: ["The frog might be too powerful."],
-            proposedComment: "(o)<",
-          }}
-        />,
+        withProviders(
+          <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.",
+              risks: ["The frog might be too powerful."],
+              proposedComment: "(o)<",
+            }}
+          />,
+        ),
       );
     });
 
@@ -67,14 +89,16 @@ describe("ApprovalPayloadRenderer", () => {
 
     act(() => {
       root.render(
-        <ApprovalPayloadRenderer
-          type="request_board_approval"
-          hidePrimaryTitle
-          payload={{
-            title: "Reply with an ASCII frog",
-            summary: "Board asked for approval before posting the frog.",
-          }}
-        />,
+        withProviders(
+          <ApprovalPayloadRenderer
+            type="request_board_approval"
+            hidePrimaryTitle
+            payload={{
+              title: "Reply with an ASCII frog",
+              summary: "Board asked for approval before posting the frog.",
+            }}
+          />,
+        ),
       );
     });
 
@@ -86,3 +110,90 @@ describe("ApprovalPayloadRenderer", () => {
     });
   });
 });
+
+describe("BoardApprovalPayloadContent markdown rendering", () => {
+  it("renders a ## header in summary as an h2 element", () => {
+    const html = renderToStaticMarkup(
+      withProviders(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{ summary: "## Analysis\n\nThis is the summary." }}
+        />,
+      ),
+    );
+    expect(html).toContain("<h2");
+    expect(html).toContain("Analysis");
+    expect(html).toContain("This is the summary.");
+  });
+
+  it("renders a bulleted list in summary as ul and li elements", () => {
+    const html = renderToStaticMarkup(
+      withProviders(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{ summary: "- Item one\n- Item two" }}
+        />,
+      ),
+    );
+    expect(html).toContain("<ul");
+    expect(html).toContain("<li");
+    expect(html).toContain("Item one");
+    expect(html).toContain("Item two");
+  });
+
+  it("renders a ## header in recommendedAction as an h2 element", () => {
+    const html = renderToStaticMarkup(
+      withProviders(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{ recommendedAction: "## Approve\n\nApprove this action." }}
+        />,
+      ),
+    );
+    expect(html).toContain("<h2");
+    expect(html).toContain("Approve");
+    expect(html).toContain("Approve this action.");
+  });
+
+  it("renders a bulleted list in recommendedAction as ul and li elements", () => {
+    const html = renderToStaticMarkup(
+      withProviders(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{ recommendedAction: "- Step one\n- Step two" }}
+        />,
+      ),
+    );
+    expect(html).toContain("<ul");
+    expect(html).toContain("<li");
+    expect(html).toContain("Step one");
+  });
+
+  it("renders plain prose summary without adding list or heading markup", () => {
+    const html = renderToStaticMarkup(
+      withProviders(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{ summary: "This is a simple one-line summary." }}
+        />,
+      ),
+    );
+    expect(html).toContain("This is a simple one-line summary.");
+    expect(html).not.toContain("<ul");
+    expect(html).not.toContain("<h2");
+  });
+
+  it("renders plain prose recommendedAction without markdown markup", () => {
+    const html = renderToStaticMarkup(
+      withProviders(
+        <ApprovalPayloadRenderer
+          type="request_board_approval"
+          payload={{ recommendedAction: "Approve the deployment." }}
+        />,
+      ),
+    );
+    expect(html).toContain("Approve the deployment.");
+    expect(html).not.toContain("<ul");
+    expect(html).not.toContain("<h2");
+  });
+});
diff --git a/ui/src/components/ApprovalPayload.tsx b/ui/src/components/ApprovalPayload.tsx
index 6a1fe259..c56e084b 100644
--- a/ui/src/components/ApprovalPayload.tsx
+++ b/ui/src/components/ApprovalPayload.tsx
@@ -1,5 +1,6 @@
 import { UserPlus, Lightbulb, ShieldAlert, ShieldCheck } from "lucide-react";
 import { formatCents } from "../lib/utils";
+import { MarkdownBody } from "./MarkdownBody";
 
 export const typeLabel: Record<string, string> = {
   hire_agent: "Hire Agent",
@@ -185,7 +186,7 @@ function BoardApprovalPayloadContent({ payload }: { payload: Record<string, unkn
       {summary && (
         <div className="space-y-1">
           <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground">Summary</p>
-          <p className="leading-6 text-foreground/90">{summary}</p>
+          <MarkdownBody softBreaks>{summary}</MarkdownBody>
         </div>
       )}
       {recommendedAction && (
@@ -193,13 +194,13 @@ function BoardApprovalPayloadContent({ payload }: { payload: Record<string, unkn
           <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-amber-700 dark:text-amber-300">
             Recommended action
           </p>
-          <p className="mt-1 leading-6 text-foreground">{recommendedAction}</p>
+          <MarkdownBody softBreaks className="mt-1">{recommendedAction}</MarkdownBody>
         </div>
       )}
       {nextActionOnApproval && (
         <div className="rounded-lg border border-border/60 bg-background/60 px-3.5 py-3">
           <p className="text-[11px] font-medium uppercase tracking-[0.08em] text-muted-foreground">On approval</p>
-          <p className="mt-1 leading-6 text-foreground">{nextActionOnApproval}</p>
+          <MarkdownBody softBreaks className="mt-1">{nextActionOnApproval}</MarkdownBody>
         </div>
       )}
       {risks.length > 0 && (