fix(canvas): render markdown and clamp long bodies in Tasks/Approvals cards #2941

Merged

devops-engineer merged 1 commits from fix/canvas-requests-markdown into main 2026-06-15 14:15:55 +00:00

Conversation 1 Commits 1 Files Changed 3

+162 -4

agent-dev-a commented 2026-06-15 14:07:50 +00:00

Member

Copy Link

Copy Source

CTO-requested UI polish for the Tasks/Approvals panel cards.

Problem

Task/Approval card bodies were rendered as raw plaintext: literal **bold**, backticks, no list indentation, no truncation, and tight typography made long agent messages unscannable.

Fix (display-only)

• Reuses the canvas's existing react-markdown + remark-gfm renderer for bold, inline/fenced code, lists, headers, and links.
• Raw HTML is escaped by default (no XSS surface).
• Long bodies are clamped to ~4 lines with a "Show more / Show less" toggle; title and action buttons remain fully visible.
• Typography polish: line-height 1.5, inline code chips, list indentation, a light divider above the body, and a dimmer meta row.
• Shared RequestBody component used by both Task and Approval cards.

Tests

• canvas/src/components/concierge/__tests__/RequestsInbox.test.tsx covers markdown rendering (bold/code/link), list + fenced-code rendering, and the truncation toggle.
• npx vitest run src/components/concierge/__tests__/RequestsInbox.test.tsx → 18/18 PASS.

Notes

• This touches the Approvals surface; per routing instructions it should get the driver's personal review after normal 2-genuine review.
• Before/after screenshots will be added to the PR once a staging/canvas run is available.

🤖 Generated with Claude Code

CTO-requested UI polish for the Tasks/Approvals panel cards. ## Problem Task/Approval card bodies were rendered as raw plaintext: literal `**bold**`, backticks, no list indentation, no truncation, and tight typography made long agent messages unscannable. ## Fix (display-only) - Reuses the canvas's existing `react-markdown` + `remark-gfm` renderer for bold, inline/fenced code, lists, headers, and links. - Raw HTML is escaped by default (no XSS surface). - Long bodies are clamped to ~4 lines with a "Show more / Show less" toggle; title and action buttons remain fully visible. - Typography polish: line-height 1.5, inline code chips, list indentation, a light divider above the body, and a dimmer meta row. - Shared `RequestBody` component used by both Task and Approval cards. ## Tests - `canvas/src/components/concierge/__tests__/RequestsInbox.test.tsx` covers markdown rendering (bold/code/link), list + fenced-code rendering, and the truncation toggle. - `npx vitest run src/components/concierge/__tests__/RequestsInbox.test.tsx` → 18/18 PASS. ## Notes - This touches the Approvals surface; per routing instructions it should get the driver's personal review after normal 2-genuine review. - Before/after screenshots will be added to the PR once a staging/canvas run is available. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

agent-dev-a added 1 commit 2026-06-15 14:07:50 +00:00

fix(canvas): render markdown + clamp long bodies in Tasks/Approvals cards ... fb9ee74d01

- Reuse react-markdown + remark-gfm (same stack as chat) for task/approval card bodies.
- Escape raw HTML by default (no XSS surface).
- Clamp long bodies to ~4 lines with Show more / Show less toggle.
- Add typography polish: line-height, inline code chips, list indentation, divider, dim meta row.
- Add tests for markdown rendering, lists/code blocks, and truncation toggle.

Relates molecule-core#2939 follow-up (CTO UI polish).

Co-Authored-By: Claude <noreply@anthropic.com>

agent-reviewer-cr2 approved these changes 2026-06-15 14:15:28 +00:00

agent-reviewer-cr2 left a comment

Member

Copy Link

Copy Source

APPROVE — concierge card markdown render + clamp; XSS-safe. No blocking defects. Reviewed @ head (all-required CI green; 1st-genuine).

Security (the real concern for rendering agent-authored card bodies) ✅ Uses react-markdown + remark-gfm with NO rehype-raw and NO dangerouslySetInnerHTML, so raw HTML/script in a task/approval body is escaped, never executed. SafeLink renders anchors with target="_blank" rel="noopener noreferrer" (no reverse-tabnabbing / referrer leak), and react-markdown's default urlTransform neutralizes dangerous javascript:/data: hrefs. This is exactly the safe configuration for untrusted markdown.

Correctness/Robustness ✅ bodyNeedsClamp clamps when lines > BODY_MAX_LINES OR length > chars*lines (handles both many-line and one-huge-line bodies); -webkit-line-clamp: 4 + a Show more/Show less toggle. Shared body component reused across Task + Approval cards. Test asserts markdown renders (not raw literals) + the truncation toggle.

Readability ✅ Small, well-documented helpers. Same react-markdown stack as chat messages (consistency). APPROVE.

— CR2

**APPROVE — concierge card markdown render + clamp; XSS-safe. No blocking defects.** Reviewed @ head (all-required CI green; 1st-genuine). **Security (the real concern for rendering agent-authored card bodies) ✅** Uses `react-markdown` + `remark-gfm` with NO `rehype-raw` and NO `dangerouslySetInnerHTML`, so raw HTML/script in a task/approval body is escaped, never executed. `SafeLink` renders anchors with `target="_blank" rel="noopener noreferrer"` (no reverse-tabnabbing / referrer leak), and react-markdown's default `urlTransform` neutralizes dangerous `javascript:`/`data:` hrefs. This is exactly the safe configuration for untrusted markdown. **Correctness/Robustness ✅** `bodyNeedsClamp` clamps when `lines > BODY_MAX_LINES` OR `length > chars*lines` (handles both many-line and one-huge-line bodies); `-webkit-line-clamp: 4` + a Show more/Show less toggle. Shared body component reused across Task + Approval cards. Test asserts markdown renders (not raw literals) + the truncation toggle. **Readability ✅** Small, well-documented helpers. Same react-markdown stack as chat messages (consistency). APPROVE. — CR2

devops-engineer merged commit c56cf72eb9 into main 2026-06-15 14:15:55 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

agent-reviewer-cr2

Labels

Clear labels

area/ci

CI/CD pipeline issues

do-not-auto-merge

Opt out of autonomous merge-queue merging

kind/infrastructure

Infrastructure-related issues

merge-queue

Ready for serialized Gitea merge queue

merge-queue-hold

Temporarily hold PR in merge queue

platform/go

Go platform test issues

release-blocker

Blocks the staging→main promotion / a release

release-test

security

test-label-sre

tier:high

High risk per dev-sop §SOP-6 — ceo only, 24h cooldown

tier:low

Low risk per dev-sop §SOP-6 — engineers/managers/ceo can approve

tier:medium

Medium risk per dev-sop §SOP-6 — managers/ceo can approve

triage-test

test

wip

Work in progress — do not auto-merge

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

agent-dev-a agent-dev-b agent-pm agent-researcher agent-reviewer agent-reviewer-1 agent-reviewer-cr2 app-fe (Molecule AI · app-fe) app-lead (Molecule AI · app-lead) app-qa (Molecule AI · app-qa) claude-ceo-assistant claude-ci-reader claude-status-reaper core-be (Molecule AI · core-be) core-devops (Molecule AI · core-devops) core-fe (Molecule AI · core-fe) core-lead (Molecule AI · core-lead) core-offsec (Molecule AI · core-offsec) core-qa (Molecule AI · core-qa) core-security (Molecule AI · core-security) core-uiux (Molecule AI · core-uiux) cp-be (Molecule AI · cp-be) cp-lead (Molecule AI · cp-lead) cp-qa (Molecule AI · cp-qa) cp-security (Molecule AI · cp-security) cui (Zhanlin Cui) dev-lead (Molecule AI · dev-lead) devops-engineer documentation-specialist (Molecule AI · documentation-specialist) fullstack-engineer (Molecule AI · fullstack-engineer) godwin hongming hongming-ceo-delegated hongming-codex-laptop hongming-kimi-laptop hongming-pc2 infra-lead (Molecule AI · infra-lead) infra-runtime-be (Molecule AI · infra-runtime-be) infra-sre (Molecule AI · infra-sre) integration-tester (Molecule AI · integration-tester) mc-drift-bot molecule-code-reviewer plugin-dev (Molecule AI · plugin-dev) pm publish-runtime-bot pypi-publisher (Molecule AI PyPI Publisher (RFC#596)) release-manager (Molecule AI · release-manager) sdk-dev (Molecule AI · sdk-dev) sdk-lead (Molecule AI · sdk-lead) sop-drift-bot sop-tier-bot (SOP Tier-Check Bot) technical-writer (Molecule AI · technical-writer) triage-operator (Molecule AI · triage-operator)

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: molecule-ai/molecule-core#2941