Feature: Markdown preview toggle for README files

[kyashrathore]

Summary

Add the ability to open a rendered markdown preview in a new tab when viewing .md or .mdx files.

Motivation

When working with documentation files, it's useful to see how the rendered markdown will look without leaving OpenCode. This is especially helpful for reviewing README files, documentation, and other markdown content.

Proposed UX

Preview Button

When a markdown file (.md or .mdx) is the active tab, show an eye icon button in the header toolbar area (far right, separate from file tabs). This follows VS Code's pattern where editor actions appear in the top-right header area, separate from the tab bar.

┌─────────────────────────────────────────────────────────────────┐
│ [README.md] [config.ts]                              [👁]       │
├─────────────────────────────────────────────────────────────────┤
│ # Project Title                                                 │
│                                                                 │
│ ```bash                                                         │
│ npm install                                                     │
│ ```                                                             │
└─────────────────────────────────────────────────────────────────┘

• Button only appears when a markdown file is active
• Clicking opens rendered preview in a new tab

Keyboard Shortcut

Cmd+Shift+V (Mac) / Ctrl+Shift+V (Windows/Linux) opens preview in new tab - matching VS Code conventions.

Preview Tab Behavior

• Opens as a new tab named Preview: README.md
• Renders markdown using existing Markdown component
• Read-only view (no line selection - that's only available in source view)
• Closing the preview tab returns focus to source

Why Preview Opens in New Tab (Not Toggle)

Line selection for prompts only works in source view - the rendered HTML doesn't maintain source line mappings. Opening preview in a separate tab keeps source available for line selection while allowing preview for reading.

Current State

• Markdown component exists in packages/ui/src/components/markdown.tsx
• Uses marked library with DOMPurify sanitization
• No preview mechanism currently exists

Implementation Notes

• Add preview button to header toolbar (conditionally shown for markdown files)
• Create special "preview" tab type that renders via Markdown component
• Register mod+shift+v keyboard shortcut

[github-actions]

For keybind-related issues, please also check our pinned keybinds documentation: #4997

[kyashrathore]

Feature support available now.