fix(site): table pipe rendering + theme-safe mermaid diagrams#245
Merged
Conversation
Tables (closes #193): - Parse table rows with an escape/code-aware splitter so escaped pipes (P(X\|Y)) and pipes inside inline-code spans no longer shatter cells - Normalize each row to the header column count - Split markdown on /\r?\n/ so CRLF docs do not leak a trailing \r Diagrams (closes #233): - Replace the non-rendering block-beta protocol landscape in phase 16/03 with a standard flowchart, and convert the stateDiagram note from literal \n to block-note syntax - Add a hue-preserving HSL fill transform to the mermaid renderer: in dark mode light fills are darkened, in light mode dark fills are lightened, so hard-coded node colors stay legible in both themes
📝 WalkthroughWalkthroughThe PR updates communication protocol documentation diagrams and enhances the in-browser markdown parser for robustness. Changes include refactoring Mermaid diagram syntax, supporting Windows newlines in markdown, improving table cell parsing to handle escaped pipes and inline code, and adding theme-aware color preprocessing for Mermaid diagrams. ChangesMarkdown Parser and Diagram Enhancements
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
phases/16-multi-agent-and-swarms/03-communication-protocols/docs/en.md (1)
1-10:⚠️ Potential issue | 🟠 Major | ⚡ Quick winAdd required
docs/en.mdfrontmatter block.This file is missing the required YAML frontmatter (
Title, one-line hook,Type,Languages,Prerequisites,Time estimate, and 4–6Learning Objectivesbullets). Please add it at the top before the H1.Suggested patch
+--- +Title: Communication Protocols +Hook: Learn how MCP, A2A, ACP, and ANP fit together to build robust multi-agent systems. +Type: Build +Languages: TypeScript +Prerequisites: Phase 14 (Agent Engineering), Lesson 16.01 (Why Multi-Agent) +Time estimate: 120 minutes +Learning Objectives: + - Implement MCP tool discovery and invocation for external tool use. + - Build A2A Agent Card and task endpoints for agent delegation. + - Compare MCP, A2A, ACP, and ANP by problem scope and tradeoffs. + - Compose multiple protocols in one end-to-end system design. + - Apply protocol selection heuristics for production agent architectures. +--- + # Communication ProtocolsAs per coding guidelines, "
**/docs/en.md: Include frontmatter in docs/en.md with fields: Title, one-line hook, Type (Learn|Build|Reference), Languages (matching main.* files), Prerequisites, Time estimate, and 4-6 Learning Objectives bullet points."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@phases/16-multi-agent-and-swarms/03-communication-protocols/docs/en.md` around lines 1 - 10, Add a YAML frontmatter block at the very top of docs/en.md (before the "# Communication Protocols" H1) containing Title, a one-line hook, Type (Learn|Build|Reference), Languages (matching the repository's main.* files), Prerequisites, Time estimate, and a Learning Objectives list of 4–6 bullet points; ensure the field names are exactly Title, one-line hook, Type, Languages, Prerequisites, Time estimate, and Learning Objectives so the site parser recognizes them and that the Learning Objectives describe concrete outcomes related to communication protocols and multi-agent coordination.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@site/lesson.html`:
- Around line 2363-2392: splitTableRow currently unescapes backslash-escaped
pipes before checking inCode, so sequences like `\|` inside backtick spans
become `|`; change the logic so the handler for a backslash followed by '|' only
consumes the escape and appends '|' when not inside a code span (i.e., check
inCode before treating '\\' + '|' as an escape), and when inCode append the raw
backslash and '|' to cur; adjust the condition around the backslash handling in
function splitTableRow (variables: inCode, cur, ch) accordingly so escaped pipes
are preserved inside inline code.
---
Outside diff comments:
In `@phases/16-multi-agent-and-swarms/03-communication-protocols/docs/en.md`:
- Around line 1-10: Add a YAML frontmatter block at the very top of docs/en.md
(before the "# Communication Protocols" H1) containing Title, a one-line hook,
Type (Learn|Build|Reference), Languages (matching the repository's main.*
files), Prerequisites, Time estimate, and a Learning Objectives list of 4–6
bullet points; ensure the field names are exactly Title, one-line hook, Type,
Languages, Prerequisites, Time estimate, and Learning Objectives so the site
parser recognizes them and that the Learning Objectives describe concrete
outcomes related to communication protocols and multi-agent coordination.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4238c9dd-be59-4187-9096-9244144ff979
📒 Files selected for processing (2)
phases/16-multi-agent-and-swarms/03-communication-protocols/docs/en.mdsite/lesson.html
Comment on lines
+2363
to
+2392
| function splitTableRow(line) { | ||
| // Split a markdown table row on cell delimiters while respecting | ||
| // escaped pipes (P(X\|Y)) and pipes inside inline-code spans (`a | b`). | ||
| var cells = []; | ||
| var cur = ''; | ||
| var inCode = false; | ||
| for (var i = 0; i < line.length; i++) { | ||
| var ch = line.charAt(i); | ||
| if (ch === '\\' && line.charAt(i + 1) === '|') { | ||
| cur += '|'; | ||
| i++; | ||
| continue; | ||
| } | ||
| if (ch === '`') { | ||
| inCode = !inCode; | ||
| cur += ch; | ||
| continue; | ||
| } | ||
| if (ch === '|' && !inCode) { | ||
| cells.push(cur); | ||
| cur = ''; | ||
| continue; | ||
| } | ||
| cur += ch; | ||
| } | ||
| cells.push(cur); | ||
| if (cells.length && cells[0].trim() === '') cells.shift(); | ||
| if (cells.length && cells[cells.length - 1].trim() === '') cells.pop(); | ||
| return cells.map(function (c) { return c.trim(); }); | ||
| } |
There was a problem hiding this comment.
Preserve \| inside inline code spans.
splitTableRow() unescapes \| before it checks whether the parser is currently inside backticks, so a cell like `\|` is rendered as `|`. That still mutates valid Markdown content in the exact case this helper is supposed to protect.
Suggested fix
for (var i = 0; i < line.length; i++) {
var ch = line.charAt(i);
- if (ch === '\\' && line.charAt(i + 1) === '|') {
- cur += '|';
- i++;
- continue;
- }
if (ch === '`') {
inCode = !inCode;
cur += ch;
continue;
}
+ if (!inCode && ch === '\\' && line.charAt(i + 1) === '|') {
+ cur += '|';
+ i++;
+ continue;
+ }
if (ch === '|' && !inCode) {
cells.push(cur);
cur = '';
continue;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| function splitTableRow(line) { | |
| // Split a markdown table row on cell delimiters while respecting | |
| // escaped pipes (P(X\|Y)) and pipes inside inline-code spans (`a | b`). | |
| var cells = []; | |
| var cur = ''; | |
| var inCode = false; | |
| for (var i = 0; i < line.length; i++) { | |
| var ch = line.charAt(i); | |
| if (ch === '\\' && line.charAt(i + 1) === '|') { | |
| cur += '|'; | |
| i++; | |
| continue; | |
| } | |
| if (ch === '`') { | |
| inCode = !inCode; | |
| cur += ch; | |
| continue; | |
| } | |
| if (ch === '|' && !inCode) { | |
| cells.push(cur); | |
| cur = ''; | |
| continue; | |
| } | |
| cur += ch; | |
| } | |
| cells.push(cur); | |
| if (cells.length && cells[0].trim() === '') cells.shift(); | |
| if (cells.length && cells[cells.length - 1].trim() === '') cells.pop(); | |
| return cells.map(function (c) { return c.trim(); }); | |
| } | |
| function splitTableRow(line) { | |
| // Split a markdown table row on cell delimiters while respecting | |
| // escaped pipes (P(X\|Y)) and pipes inside inline-code spans (`a | b`). | |
| var cells = []; | |
| var cur = ''; | |
| var inCode = false; | |
| for (var i = 0; i < line.length; i++) { | |
| var ch = line.charAt(i); | |
| if (ch === '`') { | |
| inCode = !inCode; | |
| cur += ch; | |
| continue; | |
| } | |
| if (!inCode && ch === '\\' && line.charAt(i + 1) === '|') { | |
| cur += '|'; | |
| i++; | |
| continue; | |
| } | |
| if (ch === '|' && !inCode) { | |
| cells.push(cur); | |
| cur = ''; | |
| continue; | |
| } | |
| cur += ch; | |
| } | |
| cells.push(cur); | |
| if (cells.length && cells[0].trim() === '') cells.shift(); | |
| if (cells.length && cells[cells.length - 1].trim() === '') cells.pop(); | |
| return cells.map(function (c) { return c.trim(); }); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@site/lesson.html` around lines 2363 - 2392, splitTableRow currently unescapes
backslash-escaped pipes before checking inCode, so sequences like `\|` inside
backtick spans become `|`; change the logic so the handler for a backslash
followed by '|' only consumes the escape and appends '|' when not inside a code
span (i.e., check inCode before treating '\\' + '|' as an escape), and when
inCode append the raw backslash and '|' to cur; adjust the condition around the
backslash handling in function splitTableRow (variables: inCode, cur, ch)
accordingly so escaped pipes are preserved inside inline code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the two most-reported website rendering bugs at the source, in the shared lesson renderer, so they apply across the whole curriculum.
Tables — closes #193
Lesson tables shattered when a cell contained an escaped pipe (
P(X\|Y)) or a pipe inside an inline-code span. Root cause: the renderer split rows on every|.\|(and unescapes it to|) and pipes inside backtick spans.parseMdnow splits on/\r?\n/so a CRLF checkout doesn't leak a trailing\r.Verified on
phases/02-ml-fundamentals/14-naive-bayes: 4 tables, balanced columns,P(A, B | C) = P(A | C) * P(B | C)renders intact, zero console errors.Diagrams — closes #233
block-betaprotocol-landscape diagram inphases/16-multi-agent-and-swarms/03-communication-protocolsdid not render (showed "Diagram could not be rendered"). Replaced with a standardflowchart. Also converted the A2A lifecyclestateDiagramnote from literal\nto block-note syntax.#1a1a2e, used 190× across lessons) vanish in light mode. Added a hue-preserving HSL transform to the mermaid renderer — in dark mode light fills are darkened, in light mode dark fills are lightened. Color-coding survives; labels stay legible in both themes. Verified end-to-end: pastels render as deep same-hue fills in dark mode, navies render as pale same-hue fills in light mode.Supersedes / relates to
build.js) — already inmain; this adds the same guard to the lesson renderer