fix(ui): improve review dialog rendering for tool calls and tables #657
Conversation
- Replace Markdown component with LogViewer in plan-approval-dialog to properly format tool calls with collapsible sections and JSON highlighting - Add remark-gfm plugin to Markdown component for GitHub Flavored Markdown support including tables, task lists, and strikethrough - Add table styling classes to Markdown component for proper table rendering - Install remark-gfm and rehype-sanitize dependencies Fixes mixed/broken rendering in review dialog where tool calls showed as raw text and markdown tables showed as pipe-separated text.
- Convert git+ssh:// to git+https:// in package-lock.json for @electron/node-gyp - Apply prettier formatting to plan-approval-dialog.tsx
Summary of ChangesHello @stefandevo, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly upgrades the user interface's ability to display complex content within the review dialog. By integrating a specialized log viewer for tool calls and extending markdown support to include GitHub Flavored Markdown features, the changes aim to provide a more accurate, readable, and functional presentation of review-related information, ultimately improving the user experience for plan approvals. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughReplaces Markdown rendering in the plan approval dialog with a PlanContentViewer that parses tool calls and plan markdown; adds GitHub-Flavored Markdown support and table styling via Changes
Sequence Diagram(s)(Skipped — changes are UI-focused and the flow is straightforward; diagram omitted.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request successfully addresses the UI rendering issues for tool calls and tables. Replacing the Markdown component with LogViewer in the plan-approval-dialog provides a more structured and interactive display for tool calls, including collapsible sections and JSON highlighting. The enhancements to the Markdown component with remark-gfm and dedicated table styling significantly improve the rendering of GitHub Flavored Markdown tables. The dependency updates are consistent with these functional changes.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx`:
- Line 14: The component currently imports and uses LogViewer to display plan
content (imported symbol: LogViewer) which treats everything as raw log lines;
replace that usage with a Markdown renderer (e.g., your project's Markdown
component or react-markdown) so headings, lists and tables render correctly, or
add a strict type check (e.g., isLogEntries(planContent)) before choosing
LogViewer; update the imports to bring in the markdown renderer and adjust the
render path inside the PlanApprovalDialog (where plan content is emitted) to
render planContent via the markdown component when not actual log entries,
keeping LogViewer only for verified log entry data.
apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx
Outdated
Show resolved
Hide resolved
stefandevo
added
Do Not Merge
The previous LogViewer approach showed tool calls prominently but hid the actual plan/specification markdown content. The new PlanContentViewer: - Separates tool calls (exploration) from plan markdown - Shows the plan/specification markdown prominently using Markdown component - Collapses tool calls by default in an "Exploration" section - Properly renders GFM tables in the plan content This provides a better UX where users see the important plan content first, with tool calls available but not distracting.
The feature description in the plan approval dialog header was truncated at 150 characters with no way to see the full text. Now users can click "show more" to expand and "show less" to collapse.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@apps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsx`:
- Around line 36-47: The heading detection is too strict and skips plans when a
heading follows a tool call: relax the heading regex to accept any heading text
(e.g. change trimmed.match(/^#{1,3}\s+\w/) to trimmed.match(/^#{1,3}\s+/) or
equivalent that allows emoji/non-word chars) and, before breaking and setting
planStartIndex, ensure any active tool is flushed/closed (handle currentTool:
finalize or push the active tool result so it doesn't block plan detection).
Apply the same relaxed-heading + flush-currentTool change to the analogous logic
in the block covering lines 79-118.
- Around line 50-60: The regex that extracts the tool name (trimmed.match(...))
uses \w+ which truncates names with dots/hyphens; change the capture group to
match one or more non-whitespace characters (e.g., \S+ or [^\s]+) so toolMatch
captures names like "web.run" or "file-read", then set currentTool =
toolMatch[1] as before and leave the rest of the toolCalls push logic
(currentTool, currentInput) unchanged.
apps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsx
Outdated
Show resolved
Hide resolved
- Increase description character limit from 150 to 250 characters - Add feature title to dialog header (e.g., "Review Plan - Feature Title") only if title exists and is <= 50 characters
When markdown contains a ```tasks code block, it now renders as: - Phase headers (## Phase 1: ...) as styled section headings - Task items (- [ ] or - [x]) with proper checkbox icons - Checked items show green checkmark and strikethrough text - Unchecked items show empty square icon This makes implementation task lists in plans much more readable compared to rendering them as raw code blocks.
Address CodeRabbit review feedback:
1. Relax heading detection regex to match emoji and non-word chars
- Change \w to \S so headings like "## ✅ Plan" are detected
- Change \*\*[A-Z] to \*\*\S for bold section detection
2. Flush active tool call when heading is detected
- Prevents plan content being dropped when heading follows tool call
without a blank line separator
3. Support tool names with dots/hyphens
- Change \w+ to [^\s]+ so names like "web.run" or "file-read" work
stefandevo
added
Testers-Requested
2 participants
Summary
Fixes the review dialog rendering issues where tool calls showed as raw text and markdown tables didn't render properly.
Fixes #632
Changes
New
PlanContentViewerComponentEnhanced
MarkdownComponentremark-gfmplugin for GitHub Flavored Markdown support (tables, task lists, strikethrough)taskscode blocks - renders as proper checkbox lists:## Phase 1: ...) → styled section headings- [ ]) → ☐ empty square icon- [x]) → ✓ green checkmark + strikethroughDialog Header Improvements
Files Changed
apps/ui/package.jsonrehype-sanitize@^6.0.0,remark-gfm@^4.0.1apps/ui/src/components/ui/markdown.tsxapps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsxapps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsxpackage-lock.jsonTest plan
taskscode blocks render as checkbox lists (not code blocks)Screenshot
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.