From 94f722d993dca4e8aa6cd2f3197cbe7d3bdcba9c Mon Sep 17 00:00:00 2001
From: Sanath Samarasinghe <sanath.s@outlook.com>
Date: Thu, 19 Feb 2026 06:03:16 +0100
Subject: [PATCH] feat: add markdown preview toggle for Write tool (#21)

---
 .../chat/items/linkedTool/WriteToolViewer.tsx | 38 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx b/src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx
index 22cd90b1..d08d7005 100644
--- a/src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx
+++ b/src/renderer/components/chat/items/linkedTool/WriteToolViewer.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { CodeBlockViewer } from '@renderer/components/chat/viewers';
+import { CodeBlockViewer, MarkdownViewer } from '@renderer/components/chat/viewers';
 
 import type { LinkedToolItem } from '@renderer/types/groups';
 
@@ -20,13 +20,47 @@ export const WriteToolViewer: React.FC<WriteToolViewerProps> = ({ linkedTool })
   const filePath = (toolUseResult?.filePath as string) || (linkedTool.input.file_path as string);
   const content = (toolUseResult?.content as string) || (linkedTool.input.content as string) || '';
   const isCreate = toolUseResult?.type === 'create';
+  const isMarkdownFile = /\.mdx?$/i.test(filePath);
+  const [viewMode, setViewMode] = React.useState<'code' | 'preview'>('code');
 
   return (
     <div className="space-y-2">
       <div className="mb-1 text-xs text-zinc-500">
         {isCreate ? 'Created file' : 'Wrote to file'}
       </div>
-      <CodeBlockViewer fileName={filePath} content={content} startLine={1} />
+      {isMarkdownFile && (
+        <div className="flex items-center justify-end gap-1">
+          <button
+            type="button"
+            onClick={() => setViewMode('code')}
+            className="rounded px-2 py-1 text-xs transition-colors"
+            style={{
+              backgroundColor: viewMode === 'code' ? 'var(--tag-bg)' : 'transparent',
+              color: viewMode === 'code' ? 'var(--tag-text)' : 'var(--color-text-muted)',
+              border: '1px solid var(--tag-border)',
+            }}
+          >
+            Code
+          </button>
+          <button
+            type="button"
+            onClick={() => setViewMode('preview')}
+            className="rounded px-2 py-1 text-xs transition-colors"
+            style={{
+              backgroundColor: viewMode === 'preview' ? 'var(--tag-bg)' : 'transparent',
+              color: viewMode === 'preview' ? 'var(--tag-text)' : 'var(--color-text-muted)',
+              border: '1px solid var(--tag-border)',
+            }}
+          >
+            Preview
+          </button>
+        </div>
+      )}
+      {isMarkdownFile && viewMode === 'preview' ? (
+        <MarkdownViewer content={content} label="Markdown Preview" copyable />
+      ) : (
+        <CodeBlockViewer fileName={filePath} content={content} startLine={1} />
+      )}
     </div>
   );
 };