Skip to content

feat(dashboard): render debug analysis content as markdown#642

Merged
zbigniewsobiecki merged 1 commit intodevfrom
feature/markdown-debug-analysis
Mar 7, 2026
Merged

feat(dashboard): render debug analysis content as markdown#642
zbigniewsobiecki merged 1 commit intodevfrom
feature/markdown-debug-analysis

Conversation

@aaight
Copy link
Copy Markdown
Collaborator

@aaight aaight commented Mar 7, 2026

Summary

  • Installs react-markdown and @tailwindcss/typography in the web frontend to enable proper markdown rendering
  • Registers the Tailwind typography plugin via the @plugin CSS directive in web/src/index.css
  • Replaces the verbatim <pre> rendering in the Section component of debug-analysis.tsx with <ReactMarkdown> wrapped in a styled <div> using prose prose-sm dark:prose-invert max-w-none

Card: https://trello.com/c/OvpXauKM/177-lets-have-debug-analysis-contents-in-dashboard-ui-rendered-and-displayed-nicely-as-markdown-since-they-are-markdown-now-they-are

Test plan

  • Navigate to a run detail page → Debug Analysis tab with an existing analysis
  • Confirm summary, issues, rootCause, timeline, and recommendations sections render as formatted markdown (headings, lists, bold/italic text, etc.)
  • Toggle between light and dark mode — confirm prose-invert provides proper readable contrast in dark mode
  • Confirm Re-run Analysis button still works
  • Confirm no layout overflow issues (content fills section width via max-w-none)
  • Confirm loading, running, and no-data states are unaffected

🤖 Generated with Claude Code

Copy link
Copy Markdown
Collaborator

@nhopeatall nhopeatall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM — Clean, well-scoped change. The react-markdown + @tailwindcss/typography combination is the standard approach for rendering markdown in a Tailwind-based React app. Key things verified:

  • Tailwind v4 compatibility: @tailwindcss/typography v0.5.19 explicitly supports Tailwind v4 in its peer deps, and the @plugin directive is the correct v4 registration syntax.
  • Security: react-markdown strips raw HTML by default (no rehype-raw plugin used), so there's no XSS risk even if the LLM-generated analysis content contains HTML.
  • Styling: prose prose-sm dark:prose-invert max-w-none is idiomatic usage — max-w-none prevents unwanted width constraints, prose-sm matches the existing text-sm sizing, and dark:prose-invert handles dark mode.
  • CI: All checks pass.

@zbigniewsobiecki zbigniewsobiecki merged commit cfec8d9 into dev Mar 7, 2026
6 checks passed
@zbigniewsobiecki zbigniewsobiecki deleted the feature/markdown-debug-analysis branch March 16, 2026 16:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants