feat(app): add markdown preview/source toggle for file tabs - #22057

Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom
alankyshum:feat/markdown-preview
Closed

feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom
alankyshum:feat/markdown-preview

Conversation

@alankyshum

@alankyshumalankyshum commented Apr 11, 2026

Copy link
Copy Markdown

Summary

Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.

Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.

Changes

  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)

Design Decisions

  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown

Credit

This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).

Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com

@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot added the needs:compliance This means the issue will auto-close after 2 hours. label Apr 11, 2026
@github-actions

github-actionsBot commented Apr 11, 2026

Copy link
Copy Markdown
Contributor

This PR doesn't fully meet our contributing guidelines and PR template.

What needs to be fixed:

  • PR description is missing required template sections. Please use the PR template.

Please edit this PR description to address the above within 2 hours, or it will be automatically closed.

If you believe this was flagged incorrectly, please let a maintainer know.

@github-actions

github-actionsBot commented Apr 11, 2026

Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

Potentially Related PR Found:

Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees

No one assigned

Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(app): add markdown preview/source toggle for file tabs - #22057
Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Closed
feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom 
alankyshum:feat/markdown-preview
Conversation
@alankyshum
@alankyshumalankyshum
commented
Apr 11, 2026

Copy link


Copy Markdown

Summary
Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.
Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.
Changes
  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)
Design Decisions
  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown
Credit
This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).
Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com
@alankyshum@kimi-chen@Paperclip-Paperclip
feat(app): add markdown preview/source toggle for file tabs
771673f
Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.
Based on work by @kimi-chen in anomalyco#13704.
Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actionsgithub-actionsBot
added
the 
needs:compliance
This means the issue will auto-close after 2 hours.
label
Apr 11, 2026
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
This PR doesn't fully meet our contributing guidelines and PR template.
What needs to be fixed:
  • PR description is missing required template sections. Please use the PR template.
Please edit this PR description to address the above within 2 hours, or it will be automatically closed.
If you believe this was flagged incorrectly, please let a maintainer know.
@github-actions
github-actionsBot
commented
Apr 11, 2026

Copy link


Copy Markdown

Contributor
The following comment was made by an LLM, it may be inaccurate:
Potentially Related PR Found:
Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@HonaHonaAwaiting requested review from HonaHona will be requested when the pull request is marked ready for reviewHona is a code owner
@BrendonovichBrendonovichAwaiting requested review from BrendonovichBrendonovich will be requested when the pull request is marked ready for reviewBrendonovich is a code owner

Assignees


No one assigned


Labels

needs:complianceThis means the issue will auto-close after 2 hours.

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

1 participant

@alankyshum