feat(client/renderer): added markdown cell type feature

[Paulson-Robert]

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

feat(client/renderer): added markdown cell type feature

---

User description

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

Enhancement

---

Description

• Render code cells as markdown when selected

• Add MarkdownIcon and select option in UI

• Handle run action and store cell state

• Exclude markdown cells from outputs collapse

---

Changes walkthrough 📝

Relevant files

Enhancement

8 files CodeCell.tsx Render markdown cells with Markdown component                        +111/-62 config.ts Support markdown type in config conversion                              +2/-0      MarkdownIcon.tsx Add MarkdownIcon SVG component                                                      +20/-0    index.ts Export MarkdownIcon in icons index                                              +2/-1      cell.state.ts Mark markdown cells on run                                                              +11/-1    state.actions.ts Define RunMarkdownCell action type                                              +11/-0    state.store.ts Implement runMarkdownCell logic                                                    +10/-0    NotebookCell.tsx Exclude markdown cells from output collapse                            +191/-171

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Loading State After processing markdown cells, isLoading is never reset to false, which may cause the UI to remain stuck in a loading state. if (this._store.parameters.type === "markdown") { // set the value this._update("parameters.marked", true); runInAction(() => { // store the operation and output this._store.operation = ["MARKDOWN"]; // save the last output this._store.output = this._store.parameters.code; }); } else if (typeof raw === "string") { Duplicate Rendering The Markdown vs Editor rendering logic is duplicated in multiple branches; consider extracting common rendering into a shared component to avoid drift and simplify maintenance. <StyledContainer onDoubleClick={() => EDITOR_TYPE[cell.parameters.type].language === "Markdown" && state.dispatch({ message: ActionMessages.RUN_MARKDOWN_CELL, payload: { queryId: cell.query.id, cellId: cell.id, marked: false, }, }) } >

[QodoAI-Agent]

PR Code Suggestions ✨

Latest suggestions up to fe1a9ee

Category	Suggestion	Impact
Possible issue	Stop loading & set executed Mark the cell as executed and clear the loading state for markdown cells so the UI stops showing a spinner and displays the content. Add isExecuted and isLoading updates. libs/renderer/src/store/state/cell.state.ts [359-368] if (this._store.parameters.type === "markdown") { - // set the value - this._update("parameters.marked", true); - - runInAction(() => { - // store the operation and output - this._store.operation = ["MARKDOWN"]; - // save the last output - this._store.output = this._store.parameters.code; - }); + this._update("parameters.marked", true); + runInAction(() => { + this._store.operation = ["MARKDOWN"]; + this._store.output = this._store.parameters.code; + }); + this._update("isExecuted", true); + this._store.isLoading = false; + return; } Suggestion importance[1-10]: 8 __ Why: Setting isExecuted and clearing isLoading after rendering markdown stops the spinner and correctly marks cell completion.	Medium
	Toggle markdown marked flag Toggle the marked flag instead of always sending false so double-click can both mark and unmark. Use the current value to invert the state. This ensures correct toggling of markdown rendering. libs/renderer/src/components/cell-defaults/code-cell/CodeCell.tsx [631-642] onDoubleClick={() => - EDITOR_TYPE[cell.parameters.type].language === - "Markdown" && + EDITOR_TYPE[cell.parameters.type].language === "Markdown" && state.dispatch({ - message: ActionMessages.RUN_MARKDOWN_CELL, - payload: { - queryId: cell.query.id, - cellId: cell.id, - marked: false, - }, + message: ActionMessages.RUN_MARKDOWN_CELL, + payload: { + queryId: cell.query.id, + cellId: cell.id, + marked: !cell.parameters.marked, + }, }) } Suggestion importance[1-10]: 7 __ Why: The change correctly flips the marked flag on double-click, ensuring markdown cells can be toggled on and off.	Medium
	Early return for markdown branch After handling the markdown branch, return early to avoid pixel execution logic. This prevents unintended calls to runPixel or array handling for markdown cells. libs/renderer/src/store/state/cell.state.ts [359-369] if (this._store.parameters.type === "markdown") { - // set the value - this._update("parameters.marked", true); - - runInAction(() => { - // store the operation and output - this._store.operation = ["MARKDOWN"]; - // save the last output - this._store.output = this._store.parameters.code; - }); + this._update("parameters.marked", true); + runInAction(() => { + this._store.operation = ["MARKDOWN"]; + this._store.output = this._store.parameters.code; + }); + return; } else if (typeof raw === "string") { Suggestion importance[1-10]: 7 __ Why: An early return prevents the pixel execution logic from running for markdown cells, avoiding unintended calls to runPixel.	Medium
	Wrap state update in runInAction Wrap the direct mutation of observable state in runInAction so MobX picks up the change. This ensures the UI observes the update to parameters.marked. libs/renderer/src/store/state/state.store.ts [1678-1683] private runMarkdownCell = (queryId: string, cellId: string, marked: boolean): void => { - const q = this._store.queries[queryId]; - const c = q.getCell(cellId); - // make the cell as marked - this._store.queries[queryId].cells[cellId].parameters.marked = marked + runInAction(() => { + this._store.queries[queryId].cells[cellId].parameters.marked = marked; + }); } Suggestion importance[1-10]: 6 __ Why: Encapsulating the direct mutation in runInAction ensures MobX picks up the change to parameters.marked, improving reactivity.	Low

---

Previous suggestions

Suggestions up to commit 9c4b4eb

Category	Suggestion	Impact
General	Toggle markdown marked flag Check the cell type directly and toggle the marked flag instead of hard-coding false. This ensures double-click correctly shows or hides the markdown view. libs/renderer/src/components/cell-defaults/code-cell/CodeCell.tsx [630-643] <StyledContainer onDoubleClick={() => - EDITOR_TYPE[cell.parameters.type].language === - "Markdown" && + cell.parameters.type === "markdown" && state.dispatch({ message: ActionMessages.RUN_MARKDOWN_CELL, payload: { queryId: cell.query.id, cellId: cell.id, - marked: false, + marked: !cell.parameters.marked, }, }) } > Suggestion importance[1-10]: 7 __ Why: Toggling marked instead of hard-coding false improves UX by allowing users to show/hide markdown on double-click and aligns with the new "markdown" type.	Medium
	Wrap mutation in runInAction Wrap the state mutation in runInAction to batch updates and avoid MobX warnings. This ensures the UI reacts correctly to the flag change. libs/renderer/src/store/state/state.store.ts [1682-1687] private runMarkdownCell = (queryId: string, cellId: string, marked: boolean): void => { - const q = this._store.queries[queryId]; - const c = q.getCell(cellId); - // make the cell as marked - this._store.queries[queryId].cells[cellId].parameters.marked = marked + runInAction(() => { + this._store.queries[queryId].cells[cellId].parameters.marked = marked; + }); } Suggestion importance[1-10]: 7 __ Why: Wrapping the direct mutation of parameters.marked in runInAction ensures MobX batches the update and prevents warnings while keeping UI in sync.	Medium

[johbaxter]

Im cool with the v1 we need to iterate on this and clean UX @ehynd

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-06-13 *

Added

• Support for Markdown cell type in code cells (rendering, icon, and execution)

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'