Files
automaker/apps/ui
Stefan de Vogelaere 7773db559d fix(ui): improve review dialog rendering for tool calls and tables (#657)
* fix(ui): improve review dialog rendering for tool calls and tables

- 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.

* chore: fix git+ssh URL and prettier formatting

- Convert git+ssh:// to git+https:// in package-lock.json for @electron/node-gyp
- Apply prettier formatting to plan-approval-dialog.tsx

* fix(ui): create PlanContentViewer for better plan display

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.

* fix(ui): add show more/less toggle for feature description

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.

* fix(ui): increase description limit and add feature title to dialog

- 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

* feat(ui): render tasks code blocks as proper checkbox lists

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.

* fix(ui): improve plan content parsing robustness

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

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-01-23 01:41:45 +01:00
..
2025-12-21 20:31:57 -05:00
2025-12-21 20:31:57 -05:00