[Feature]: In-App Markdown Preview

[vernonthedev]

Before submitting

• I searched existing issues and did not find a duplicate.
• I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

T3 Code's agents frequently read, write, and reference Markdown files (READMEs, docs, changelogs, agent output summaries). Currently there is no way to view rendered Markdown inside the users must open an external editor or browser to see the formatted result. When agents produce Markdown output, it is displayed as raw text, which is hard to read and makes reviewing agent-generated docs a friction-heavy experience.

Proposed solution

A rendered Markdown preview pane that can display any .md file or Markdown string output from an agent, inline in the app, without leaving T3 Code.

Two surfaces:

1. File preview - when a .md file is opened or selected in the file tree, show a split view: raw source on the left, rendered preview on the right. A toggle collapses either pane to full-width.
2. Agent output preview - when an agent task produces a Markdown-formatted result (e.g., a generated README or code review summary), render it in the output panel rather than showing raw text.
   Rendering requirements:

• CommonMark compliant

• GitHub Flavored Markdown (GFM) support: tables, task lists, strikethrough, fenced code blocks with syntax highlighting

• Code blocks: syntax highlighting using the app's existing theme tokens

• Safe HTML rendering: sanitise any HTML inside Markdown to prevent XSS; no raw <script> tags rendered

• Relative image paths resolved against the workspace root
  UX:

• Scroll sync between source and preview panes in split view

• Copy-rendered-content button on agent output blocks

• Preview-only mode for read-only files (no source pane)

Why this matters

Markdown is the de facto format for agent-generated documentation, commit messages, summaries, and project notes. Forcing users to leave the app to read rendered output creates unnecessary friction and breaks the focused workflow T3 Code is trying to enable. Rendering it in-app completes the read/write loop for Markdown content.

Smallest useful scope

Agent output panel renders Markdown output from agent tasks (no file tree integration required for MVP). Use a well-maintained library (e.g., marked + DOMPurify, or @uiw/react-markdown-preview) to keep implementation scope small.

Alternatives considered

Opening .md files in the system default app (e.g., Typora, VS Code) rejected because it breaks the in-app workflow and provides no preview for agent-generated output strings that are never written to disk.

Risks or tradeoffs

• HTML sanitisation is non-negotiable: if Markdown contains user-supplied or agent-generated HTML, unsanitised rendering is an XSS vector inside the Electron/Tauri webview.
• Scroll sync in split view is complex to implement correctly for long documents - acceptable to defer to a follow-up if it blocks the MVP.
• Large Markdown files (e.g., generated changelogs with thousands of lines) need virtual rendering or lazy parsing to avoid UI jank.

Examples or references

• VS Code Markdown Preview; split-pane model with scroll sync
• marked + DOMPurify; lightweight, well-audited rendering stack
• Obsidian; live preview / source toggle UX pattern

Contribution

• I would be open to helping implement this.