Add markdown support to policy agent UI

[lucanovera]

Ticket ENG-3782

Description Of Changes

Adds markdown rendering to agent responses in the policy builder agent chat. Until now the agent's replies rendered as plain text, so anything the LLM emitted with structure — headings, bullet/numbered lists, inline code, bold, links, fenced code blocks, tables — showed up as raw characters. This PR routes agent (AI-role) bubble content through @ant-design/x-markdown's XMarkdown component, wrapped in antd Typography so rendered elements inherit the design system's text styles.

User-role bubbles are unchanged — rendering user input as markdown would mangle accidental special characters in their prompts.

Notable details:

• Why a new dep. Admin-ui had no markdown renderer, and @ant-design/x (already in fidesui) doesn't ship one — @ant-design/x-markdown is a separate package by the same authors. It bundles marked + dompurify, so output is sanitized by default.
• ESM entry, not CJS. fidesui re-exports XMarkdown from @ant-design/x-markdown/es. The /lib (CJS) build does deep require("./*.css") calls that Turbopack errors on with "module factory is not available". The ESM build's import "./*.css" goes through Next's CSS pipeline cleanly. To keep Jest happy with raw ESM in node_modules, the package is added to jest.config.js transformIgnorePatterns so babel-jest transforms it.
• escapeRawHtml enabled. Raw HTML in markdown is rendered as plain text rather than parsed — defense in depth against the agent emitting <script> or other unintended tags, on top of the package's built-in DOMPurify sanitization.
• Table styling. The package renders markdown tables with display: block; width: max-content; max-width: 100%; overflow: auto so they can scroll horizontally. Tailwind's preflight (:where(*) { word-wrap: break-word }) and the package's own .x-markdown div/span/li { word-break: break-word } were collapsing cell content (including inline <strong>) so the table never grew wide enough to trigger overflow. A small override on table cells + descendants restores natural wrapping (word-break: normal; overflow-wrap: normal), so prose cells wrap at word boundaries and long unbreakable runs (URLs, identifiers) force the horizontal scroll the package already supports.
• Chat panel widened from 350px → 400px (and 300px → 350px at the <1280px breakpoint) so rendered lists, code blocks, and tables have a bit more breathing room.

Code Changes

• Added @ant-design/x-markdown to clients/fidesui/package.json and re-exported XMarkdown from clients/fidesui/src/index.ts via the ESM (/es) entry.
• Updated clients/admin-ui/jest.config.js transformIgnorePatterns to allow babel-jest to transform @ant-design/x-markdown.
• Wired XMarkdown into AgentChatPanel.tsx via the ai role's contentRender. The renderer is hoisted to module scope to satisfy react/no-unstable-nested-components. Passes escapeRawHtml for safety.
• Added scoped .x-markdown styles in AgentChatPanel.module.scss to zero out the default list padding/margin and to fix table-cell wrapping so horizontal scroll triggers when needed.
• Widened the chat wrapper in AccessPolicyEditor.module.scss to fit richer content.

Steps to Confirm

1. Open the access-policy editor and start a conversation with the policy builder agent.
2. Send a prompt that nudges the agent to produce structured output — e.g. "Write a policy that denies third party uses. Explain everything in detail using lots of markdown."
3. Verify in the agent bubble:
   • Headings, bold, italics, and inline code render as styled elements (not raw **...** etc.).
   • Bullet/numbered lists render with markers.
   • Links are clickable.
   • Fenced code blocks render with monospace/background.
   • Tables render with borders, and if the table is wider than the bubble, a horizontal scrollbar appears inside the bubble (the table doesn't blow out the panel width).
4. Ask the agent to include <script>alert(1)</script> in its reply. Confirm it renders as visible text rather than executing.
5. Resize the window narrow (≤1280px) and confirm the chat panel reflows to 350px and content still renders correctly.

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	May 14, 2026 1:33pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		May 14, 2026 1:33pm

[github-actions]

Dependency Review

The following issues were found:

• ✅ 0 vulnerable package(s)

See the Details below.

Snapshot Warnings

⚠️: No snapshots were found for the head SHA 2398354.

Ensure that dependencies are being submitted on PR branches and consider enabling retry-on-snapshot-warnings. See the documentation for more information and troubleshooting advice.

Scanned Files

• clients/fidesui/package.json
• clients/package-lock.json

[kruulik]

Looks great!

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		6.7% (3048/45442)	6.06% (1592/26252)	4.68% (631/13464)
fides-js		79.17% (1977/2497)	66.25% (1249/1885)	73.31% (349/476)
privacy-center		82.53% (364/441)	79.74% (189/237)	74.07% (60/81)