test(coverage): Batch 3 — CopilotMessageList (markdown + sanitization + apply)

[qnbs]

User description

Summary

Coverage lift Batch 3 (plan #3). components/copilot/CopilotMessageList.tsx (249 LOC, previously 0%) — a branch-heavy file (the micro-markdown renderer + DOMPurify sanitization + apply-button logic).

10 tests covering:

• Empty state (no messages).
• User message rendered as plain text (angle brackets shown literally).
• Assistant markdown → HTML: bold, heading, unordered list, inline code, fenced code block.
• DOMPurify sanitization — <script>, <img onerror> stripped (guards the PR fix(security): harden prompt injection and plugin storage isolation #114 hardening).
• Pending spinner for a streaming assistant message with no content yet.
• "Apply to chapter" gating: shows only on the last assistant message and with an active section and a code block; extracts the fenced block and calls onApply; disabled + "Applying…" label while applying.

Pure test-only PR. Deterministic — scrollIntoView stubbed, Spinner mocked.

Gates

• lint ✅ · typecheck ✅ · 10 tests ✅

🤖 Generated with Claude Code

---

CodeAnt-AI Description

Add coverage for Copilot message rendering and apply behavior

What Changed

• Covers the empty state, plain user messages, and assistant messages rendered with markdown formatting
• Verifies unsafe HTML is removed from assistant content while normal text still shows
• Checks the pending spinner, when the “Apply to chapter” button appears, and that it applies the last assistant message’s code block only when a section is active
• Confirms the apply button is disabled and relabeled while an apply action is in progress

Impact

✅ Safer Copilot message display
✅ Fewer broken apply actions
✅ Clearer coverage for chat and apply flow

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

[qnbs]

@CodeAnt-AI review

[codeant-ai]

CodeAnt AI is reviewing your PR.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
storycraft-studio	Ready	Preview, Comment	Jun 14, 2026 3:48pm

[codeant-ai]

CodeAnt AI is running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds tests that ensure Copilot assistant messages are rendered via markdown then sanitized before display, and that the Apply to chapter action uses only the last assistant message with a fenced code block.

sequenceDiagram
participant User
participant CopilotUI
participant MarkdownRenderer
participant Sanitizer
participant ChapterEditor
User->>CopilotUI: View conversation with assistant response
CopilotUI->>MarkdownRenderer: Render assistant markdown to HTML
MarkdownRenderer->>Sanitizer: Sanitize rendered HTML
Sanitizer-->>MarkdownRenderer: Return safe HTML only
MarkdownRenderer-->>CopilotUI: Display sanitized assistant message
User->>CopilotUI: Click Apply to chapter on last assistant message
CopilotUI->>ChapterEditor: Extract code block and call onApply

Loading

---

Generated by CodeAnt AI

[codeant-ai]

CodeAnt AI finished running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

CodeAnt AI finished reviewing your PR.

[qnbs]

@CodeAnt-AI review

[codeant-ai]

CodeAnt AI is running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds tests that verify how CopilotMessageList renders user and assistant messages, sanitizes assistant markdown content, and gates the Apply to chapter action so it only triggers with safe code blocks on the last assistant message when a chapter is active.

sequenceDiagram
participant User
participant CopilotUI
participant CopilotMessageList
participant DOMPurify
participant ChapterEditor
CopilotUI->>CopilotMessageList: Render messages with labels, hasActiveSection, onApply, applyStatus
CopilotMessageList->>DOMPurify: Sanitize assistant markdown to safe HTML
DOMPurify-->>CopilotMessageList: Return sanitized HTML for rendering
alt Last assistant message has fenced code block and section is active
CopilotMessageList-->>User: Show Apply to chapter button
else Conditions not met
CopilotMessageList-->>User: Do not show apply action
end
User->>CopilotMessageList: Click Apply to chapter on last assistant message
CopilotMessageList->>CopilotMessageList: Extract fenced code block text
CopilotMessageList->>ChapterEditor: onApply(code block text)
ChapterEditor-->>User: Apply rewritten content to chapter

Loading

---

Generated by CodeAnt AI

[codeant-ai]

CodeAnt AI finished running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[qnbs]

@CodeAnt-AI review

[codeant-ai]

CodeAnt AI is running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds coverage for how CopilotMessageList renders sanitized assistant markdown and controls the Apply to chapter action on the last assistant code block when a chapter is active.

sequenceDiagram
participant User
participant Parent
participant CopilotList
participant DOMPurify
Parent->>CopilotList: Render with messages and apply state
CopilotList->>DOMPurify: Sanitize assistant markdown to safe HTML
DOMPurify-->>CopilotList: Return sanitized HTML
CopilotList-->>User: Show chat messages and apply button on last assistant code block
User->>CopilotList: Click Apply to chapter
CopilotList->>Parent: Call onApply with fenced code block
Parent->>CopilotList: Update applyStatus to applying
CopilotList-->>User: Disable button and show applying label

Loading

---

Generated by CodeAnt AI

[codeant-ai]

CodeAnt AI finished running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[qnbs]

@CodeAnt-AI review

[codeant-ai]

CodeAnt AI is running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[codeant-ai]

Sequence Diagram

This PR adds tests that verify how CopilotMessageList renders assistant markdown with sanitization and controls when the Apply to chapter action is shown, disabled, and invoked with the correct code block.

sequenceDiagram
participant User
participant CopilotUI as Copilot UI
participant Renderer as Markdown renderer
participant Sanitizer
participant Editor as Chapter editor
User->>CopilotUI: View assistant reply with markdown
CopilotUI->>Renderer: Convert markdown to HTML
Renderer-->>CopilotUI: Rendered HTML
CopilotUI->>Sanitizer: Sanitize rendered HTML
Sanitizer-->>CopilotUI: Safe HTML
CopilotUI-->>User: Show formatted assistant message
alt Last assistant has code block and section active
CopilotUI-->>User: Show Apply to chapter button
User->>CopilotUI: Click Apply to chapter
CopilotUI->>CopilotUI: Extract fenced code block from last assistant
CopilotUI->>Editor: Call onApply with extracted code
CopilotUI-->>User: Disable button and show Applying label
end

Loading

---

Generated by CodeAnt AI

[codeant-ai]

CodeAnt AI finished running the review.

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn