From e9b6b51e9bdd3dc0b9585e8ccd9c97b8f7dd5fb2 Mon Sep 17 00:00:00 2001
From: Naman Rajpal <namanrajpal16@gmail.com>
Date: Sun, 11 Jan 2026 23:05:32 -0800
Subject: [PATCH 1/4] Adding markdown preview in FilePreview

---
 .../components/file-browser/FilePreview.tsx   | 160 +++++++++++++++++-
 1 file changed, 158 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/file-browser/FilePreview.tsx b/frontend/src/components/file-browser/FilePreview.tsx
index 733a5bb..788fa78 100644
--- a/frontend/src/components/file-browser/FilePreview.tsx
+++ b/frontend/src/components/file-browser/FilePreview.tsx
@@ -1,9 +1,14 @@
 import { useState, useCallback, useRef, useEffect, memo } from 'react'
 import { Button } from '@/components/ui/button'
-import { Download, X, Edit3, Save, X as XIcon, WrapText } from 'lucide-react'
+import { Download, X, Edit3, Save, X as XIcon, WrapText, Eye, Code } from 'lucide-react'
 import type { FileInfo } from '@/types/files'
 import { API_BASE_URL } from '@/config'
 import { VirtualizedTextView, type VirtualizedTextViewHandle } from '@/components/ui/virtualized-text-view'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import rehypeRaw from 'rehype-raw'
+import 'highlight.js/styles/github-dark.css'
 
 
 const API_BASE = API_BASE_URL
@@ -20,18 +25,38 @@ interface FilePreviewProps {
 }
 
 export const FilePreview = memo(function FilePreview({ file, hideHeader = false, isMobileModal = false, onCloseModal, onFileSaved, initialLineNumber }: FilePreviewProps) {
+  const isMarkdownFile = file.name.endsWith('.md') || file.name.endsWith('.mdx') || file.mimeType === 'text/markdown'
+  
   const [viewMode, setViewMode] = useState<'preview' | 'edit'>('preview')
   const [editContent, setEditContent] = useState('')
   const [isSaving, setIsSaving] = useState(false)
   const [hasVirtualizedChanges, setHasVirtualizedChanges] = useState(false)
   const [highlightedLine, setHighlightedLine] = useState<number | undefined>(initialLineNumber)
   const [lineWrap, setLineWrap] = useState(true)
+  const [markdownPreview, setMarkdownPreview] = useState(isMarkdownFile)
+  const [fullMarkdownContent, setFullMarkdownContent] = useState<string | null>(null)
+  const [isLoadingFullContent, setIsLoadingFullContent] = useState(false)
   const virtualizedRef = useRef<VirtualizedTextViewHandle>(null)
   const contentRef = useRef<HTMLDivElement>(null)
   
   
   const shouldVirtualize = file.size > VIRTUALIZATION_THRESHOLD_BYTES && !file.mimeType?.startsWith('image/')
   
+  useEffect(() => {
+    if (shouldVirtualize && isMarkdownFile && markdownPreview && !fullMarkdownContent) {
+      setIsLoadingFullContent(true)
+      fetch(`${API_BASE}/api/files/${file.path}?raw=true`)
+        .then(res => res.text())
+        .then(content => {
+          setFullMarkdownContent(content)
+          setIsLoadingFullContent(false)
+        })
+        .catch(() => {
+          setIsLoadingFullContent(false)
+        })
+    }
+  }, [shouldVirtualize, isMarkdownFile, markdownPreview, fullMarkdownContent, file.path])
+  
   
 
   useEffect(() => {
@@ -165,6 +190,69 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
     }
 
     if (shouldVirtualize && isTextFile) {
+      if (isMarkdownFile && markdownPreview && viewMode !== 'edit') {
+        if (isLoadingFullContent) {
+          return (
+            <div className="flex items-center justify-center h-32">
+              <div className="w-6 h-6 border-2 border-muted-foreground border-t-transparent rounded-full animate-spin" />
+            </div>
+          )
+        }
+        if (fullMarkdownContent) {
+          return (
+            <div className="pb-[200px] p-4 prose prose-invert prose-enhanced max-w-none text-foreground overflow-hidden break-words leading-snug">
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeHighlight, rehypeRaw]}
+                components={{
+                  code({ className, children, ...props }) {
+                    const isInline = !className || !className.includes('language-')
+                    if (isInline) {
+                      return (
+                        <code className={className || "bg-accent px-1.5 py-0.5 rounded text-sm text-foreground break-all"} {...props}>
+                          {children}
+                        </code>
+                      )
+                    }
+                    return <code className={className} {...props}>{children}</code>
+                  },
+                  pre({ children }) {
+                    return (
+                      <pre className="bg-accent p-1 rounded-lg overflow-x-auto whitespace-pre-wrap break-words border border-border my-4">
+                        {children}
+                      </pre>
+                    )
+                  },
+                  p({ children }) {
+                    return <p className="text-foreground my-0.5 md:my-1">{children}</p>
+                  },
+                  strong({ children }) {
+                    return <strong className="font-semibold text-foreground">{children}</strong>
+                  },
+                  ul({ children }) {
+                    return <ul className="list-disc text-foreground my-0.5 md:my-1">{children}</ul>
+                  },
+                  ol({ children }) {
+                    return <ol className="list-decimal text-foreground my-0.5 md:my-1">{children}</ol>
+                  },
+                  li({ children }) {
+                    return <li className="text-foreground my-0.5 md:my-1">{children}</li>
+                  },
+                  table({ children }) {
+                    return (
+                      <div className="table-wrapper">
+                        <table>{children}</table>
+                      </div>
+                    )
+                  }
+                }}
+              >
+                {fullMarkdownContent}
+              </ReactMarkdown>
+            </div>
+          )
+        }
+      }
       return (
         <VirtualizedTextView
           ref={virtualizedRef}
@@ -208,6 +296,62 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
             </div>
           )
         }
+        
+        if (isMarkdownFile && markdownPreview) {
+          return (
+            <div className="pb-[200px] p-4 prose prose-invert prose-enhanced max-w-none text-foreground overflow-hidden break-words leading-snug">
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={[rehypeHighlight, rehypeRaw]}
+                components={{
+                  code({ className, children, ...props }) {
+                    const isInline = !className || !className.includes('language-')
+                    if (isInline) {
+                      return (
+                        <code className={className || "bg-accent px-1.5 py-0.5 rounded text-sm text-foreground break-all"} {...props}>
+                          {children}
+                        </code>
+                      )
+                    }
+                    return <code className={className} {...props}>{children}</code>
+                  },
+                  pre({ children }) {
+                    return (
+                      <pre className="bg-accent p-1 rounded-lg overflow-x-auto whitespace-pre-wrap break-words border border-border my-4">
+                        {children}
+                      </pre>
+                    )
+                  },
+                  p({ children }) {
+                    return <p className="text-foreground my-0.5 md:my-1">{children}</p>
+                  },
+                  strong({ children }) {
+                    return <strong className="font-semibold text-foreground">{children}</strong>
+                  },
+                  ul({ children }) {
+                    return <ul className="list-disc text-foreground my-0.5 md:my-1">{children}</ul>
+                  },
+                  ol({ children }) {
+                    return <ol className="list-decimal text-foreground my-0.5 md:my-1">{children}</ol>
+                  },
+                  li({ children }) {
+                    return <li className="text-foreground my-0.5 md:my-1">{children}</li>
+                  },
+                  table({ children }) {
+                    return (
+                      <div className="table-wrapper">
+                        <table>{children}</table>
+                      </div>
+                    )
+                  }
+                }}
+              >
+                {textContent}
+              </ReactMarkdown>
+            </div>
+          )
+        }
+        
         const lines = textContent.split('\n')
         return (
           <div className={`pb-[200px] text-sm bg-muted text-foreground rounded font-mono ${
@@ -288,7 +432,19 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
             </div>
             
             <div className="flex items-center gap-1 flex-shrink-0 mt-1">
-              {isTextFile && (
+              {isMarkdownFile && viewMode !== 'edit' && (
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={(e) => { e.stopPropagation(); e.preventDefault(); setMarkdownPreview(!markdownPreview) }} 
+                  className={`h-7 w-7 p-0 ${markdownPreview ? 'bg-primary text-primary-foreground' : ''}`}
+                  title={markdownPreview ? "Show raw markdown" : "Preview rendered markdown"}
+                >
+                  {markdownPreview ? <Code className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+                </Button>
+              )}
+              
+              {isTextFile && !markdownPreview && (
                 <Button 
                   variant="outline" 
                   size="sm" 

From 6ea542e4f756e4fced5e523d75005c5e7eb6aaed Mon Sep 17 00:00:00 2001
From: Naman Rajpal <namanrajpal16@gmail.com>
Date: Sun, 11 Jan 2026 23:23:17 -0800
Subject: [PATCH 2/4] Refactor markdown rendering into reusable components

---
 .../components/file-browser/FilePreview.tsx   | 112 +-----------------
 .../file-browser/MarkdownRenderer.tsx         |  26 ++++
 .../file-browser/markdownComponents.tsx       |  44 +++++++
 3 files changed, 73 insertions(+), 109 deletions(-)
 create mode 100644 frontend/src/components/file-browser/MarkdownRenderer.tsx
 create mode 100644 frontend/src/components/file-browser/markdownComponents.tsx

diff --git a/frontend/src/components/file-browser/FilePreview.tsx b/frontend/src/components/file-browser/FilePreview.tsx
index 788fa78..d916cbc 100644
--- a/frontend/src/components/file-browser/FilePreview.tsx
+++ b/frontend/src/components/file-browser/FilePreview.tsx
@@ -4,11 +4,7 @@ import { Download, X, Edit3, Save, X as XIcon, WrapText, Eye, Code } from 'lucid
 import type { FileInfo } from '@/types/files'
 import { API_BASE_URL } from '@/config'
 import { VirtualizedTextView, type VirtualizedTextViewHandle } from '@/components/ui/virtualized-text-view'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import rehypeHighlight from 'rehype-highlight'
-import rehypeRaw from 'rehype-raw'
-import 'highlight.js/styles/github-dark.css'
+import { MarkdownRenderer } from './MarkdownRenderer'
 
 
 const API_BASE = API_BASE_URL
@@ -199,58 +195,7 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
           )
         }
         if (fullMarkdownContent) {
-          return (
-            <div className="pb-[200px] p-4 prose prose-invert prose-enhanced max-w-none text-foreground overflow-hidden break-words leading-snug">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeHighlight, rehypeRaw]}
-                components={{
-                  code({ className, children, ...props }) {
-                    const isInline = !className || !className.includes('language-')
-                    if (isInline) {
-                      return (
-                        <code className={className || "bg-accent px-1.5 py-0.5 rounded text-sm text-foreground break-all"} {...props}>
-                          {children}
-                        </code>
-                      )
-                    }
-                    return <code className={className} {...props}>{children}</code>
-                  },
-                  pre({ children }) {
-                    return (
-                      <pre className="bg-accent p-1 rounded-lg overflow-x-auto whitespace-pre-wrap break-words border border-border my-4">
-                        {children}
-                      </pre>
-                    )
-                  },
-                  p({ children }) {
-                    return <p className="text-foreground my-0.5 md:my-1">{children}</p>
-                  },
-                  strong({ children }) {
-                    return <strong className="font-semibold text-foreground">{children}</strong>
-                  },
-                  ul({ children }) {
-                    return <ul className="list-disc text-foreground my-0.5 md:my-1">{children}</ul>
-                  },
-                  ol({ children }) {
-                    return <ol className="list-decimal text-foreground my-0.5 md:my-1">{children}</ol>
-                  },
-                  li({ children }) {
-                    return <li className="text-foreground my-0.5 md:my-1">{children}</li>
-                  },
-                  table({ children }) {
-                    return (
-                      <div className="table-wrapper">
-                        <table>{children}</table>
-                      </div>
-                    )
-                  }
-                }}
-              >
-                {fullMarkdownContent}
-              </ReactMarkdown>
-            </div>
-          )
+          return <MarkdownRenderer content={fullMarkdownContent} />
         }
       }
       return (
@@ -298,58 +243,7 @@ export const FilePreview = memo(function FilePreview({ file, hideHeader = false,
         }
         
         if (isMarkdownFile && markdownPreview) {
-          return (
-            <div className="pb-[200px] p-4 prose prose-invert prose-enhanced max-w-none text-foreground overflow-hidden break-words leading-snug">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeHighlight, rehypeRaw]}
-                components={{
-                  code({ className, children, ...props }) {
-                    const isInline = !className || !className.includes('language-')
-                    if (isInline) {
-                      return (
-                        <code className={className || "bg-accent px-1.5 py-0.5 rounded text-sm text-foreground break-all"} {...props}>
-                          {children}
-                        </code>
-                      )
-                    }
-                    return <code className={className} {...props}>{children}</code>
-                  },
-                  pre({ children }) {
-                    return (
-                      <pre className="bg-accent p-1 rounded-lg overflow-x-auto whitespace-pre-wrap break-words border border-border my-4">
-                        {children}
-                      </pre>
-                    )
-                  },
-                  p({ children }) {
-                    return <p className="text-foreground my-0.5 md:my-1">{children}</p>
-                  },
-                  strong({ children }) {
-                    return <strong className="font-semibold text-foreground">{children}</strong>
-                  },
-                  ul({ children }) {
-                    return <ul className="list-disc text-foreground my-0.5 md:my-1">{children}</ul>
-                  },
-                  ol({ children }) {
-                    return <ol className="list-decimal text-foreground my-0.5 md:my-1">{children}</ol>
-                  },
-                  li({ children }) {
-                    return <li className="text-foreground my-0.5 md:my-1">{children}</li>
-                  },
-                  table({ children }) {
-                    return (
-                      <div className="table-wrapper">
-                        <table>{children}</table>
-                      </div>
-                    )
-                  }
-                }}
-              >
-                {textContent}
-              </ReactMarkdown>
-            </div>
-          )
+          return <MarkdownRenderer content={textContent} />
         }
         
         const lines = textContent.split('\n')
diff --git a/frontend/src/components/file-browser/MarkdownRenderer.tsx b/frontend/src/components/file-browser/MarkdownRenderer.tsx
new file mode 100644
index 0000000..454b088
--- /dev/null
+++ b/frontend/src/components/file-browser/MarkdownRenderer.tsx
@@ -0,0 +1,26 @@
+import { memo } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import rehypeHighlight from 'rehype-highlight'
+import rehypeRaw from 'rehype-raw'
+import { markdownComponents } from './markdownComponents'
+import 'highlight.js/styles/github-dark.css'
+
+interface MarkdownRendererProps {
+  content: string
+  className?: string
+}
+
+export const MarkdownRenderer = memo(function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+  return (
+    <div className={`pb-[200px] p-4 prose prose-invert prose-enhanced max-w-none text-foreground overflow-hidden break-words leading-snug ${className}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeHighlight, rehypeRaw]}
+        components={markdownComponents}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+})
diff --git a/frontend/src/components/file-browser/markdownComponents.tsx b/frontend/src/components/file-browser/markdownComponents.tsx
new file mode 100644
index 0000000..72a4e70
--- /dev/null
+++ b/frontend/src/components/file-browser/markdownComponents.tsx
@@ -0,0 +1,44 @@
+import type { Components } from 'react-markdown'
+
+export const markdownComponents: Components = {
+  code({ className, children, ...props }) {
+    const isInline = !className || !className.includes('language-')
+    if (isInline) {
+      return (
+        <code className={className || "bg-accent px-1.5 py-0.5 rounded text-sm text-foreground break-all"} {...props}>
+          {children}
+        </code>
+      )
+    }
+    return <code className={className} {...props}>{children}</code>
+  },
+  pre({ children }) {
+    return (
+      <pre className="bg-accent p-1 rounded-lg overflow-x-auto whitespace-pre-wrap break-words border border-border my-4">
+        {children}
+      </pre>
+    )
+  },
+  p({ children }) {
+    return <p className="text-foreground my-0.5 md:my-1">{children}</p>
+  },
+  strong({ children }) {
+    return <strong className="font-semibold text-foreground">{children}</strong>
+  },
+  ul({ children }) {
+    return <ul className="list-disc text-foreground my-0.5 md:my-1">{children}</ul>
+  },
+  ol({ children }) {
+    return <ol className="list-decimal text-foreground my-0.5 md:my-1">{children}</ol>
+  },
+  li({ children }) {
+    return <li className="text-foreground my-0.5 md:my-1">{children}</li>
+  },
+  table({ children }) {
+    return (
+      <div className="table-wrapper">
+        <table>{children}</table>
+      </div>
+    )
+  }
+}

From 0d565c29b127a6c127a8aefd16ae437638d1736d Mon Sep 17 00:00:00 2001
From: Naman Rajpal <namanrajpal16@gmail.com>
Date: Mon, 12 Jan 2026 22:57:25 -0800
Subject: [PATCH 3/4] Fix: Make syntax highlighting theme-aware

---
 .../file-browser/MarkdownRenderer.tsx         |  2 +-
 .../file-browser/markdown-highlight.css       | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/file-browser/markdown-highlight.css

diff --git a/frontend/src/components/file-browser/MarkdownRenderer.tsx b/frontend/src/components/file-browser/MarkdownRenderer.tsx
index 454b088..51671c6 100644
--- a/frontend/src/components/file-browser/MarkdownRenderer.tsx
+++ b/frontend/src/components/file-browser/MarkdownRenderer.tsx
@@ -4,7 +4,7 @@ import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeRaw from 'rehype-raw'
 import { markdownComponents } from './markdownComponents'
-import 'highlight.js/styles/github-dark.css'
+import './markdown-highlight.css'
 
 interface MarkdownRendererProps {
   content: string
diff --git a/frontend/src/components/file-browser/markdown-highlight.css b/frontend/src/components/file-browser/markdown-highlight.css
new file mode 100644
index 0000000..f85a9aa
--- /dev/null
+++ b/frontend/src/components/file-browser/markdown-highlight.css
@@ -0,0 +1,30 @@
+@import 'highlight.js/styles/github.css' layer(highlight-light);
+@import 'highlight.js/styles/github-dark.css' layer(highlight-dark);
+
+@layer highlight-light {
+  :root:not(.dark) .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: var(--color-accent);
+    color: var(--color-foreground);
+  }
+}
+
+@layer highlight-dark {
+  .dark .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: var(--color-accent);
+    color: var(--color-foreground);
+  }
+}
+
+:root:not(.dark) .hljs-dark {
+  display: none;
+}
+
+.dark .hljs:not(.hljs-dark) {
+  display: none;
+}

From 265b9e1a3ca1efdd459ed76de001709ce35d35c0 Mon Sep 17 00:00:00 2001
From: Naman Rajpal <namanrajpal16@gmail.com>
Date: Mon, 12 Jan 2026 23:12:01 -0800
Subject: [PATCH 4/4] Refactor: Follow project conventions for naming and CSS
 organization

---
 ...nComponents.tsx => MarkdownComponents.tsx} |  0
 .../file-browser/MarkdownRenderer.tsx         |  3 +-
 .../file-browser/markdown-highlight.css       | 30 -----------------
 frontend/src/index.css                        | 32 +++++++++++++++++++
 4 files changed, 33 insertions(+), 32 deletions(-)
 rename frontend/src/components/file-browser/{markdownComponents.tsx => MarkdownComponents.tsx} (100%)
 delete mode 100644 frontend/src/components/file-browser/markdown-highlight.css

diff --git a/frontend/src/components/file-browser/markdownComponents.tsx b/frontend/src/components/file-browser/MarkdownComponents.tsx
similarity index 100%
rename from frontend/src/components/file-browser/markdownComponents.tsx
rename to frontend/src/components/file-browser/MarkdownComponents.tsx
diff --git a/frontend/src/components/file-browser/MarkdownRenderer.tsx b/frontend/src/components/file-browser/MarkdownRenderer.tsx
index 51671c6..2d662d7 100644
--- a/frontend/src/components/file-browser/MarkdownRenderer.tsx
+++ b/frontend/src/components/file-browser/MarkdownRenderer.tsx
@@ -3,8 +3,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeRaw from 'rehype-raw'
-import { markdownComponents } from './markdownComponents'
-import './markdown-highlight.css'
+import { markdownComponents } from './MarkdownComponents'
 
 interface MarkdownRendererProps {
   content: string
diff --git a/frontend/src/components/file-browser/markdown-highlight.css b/frontend/src/components/file-browser/markdown-highlight.css
deleted file mode 100644
index f85a9aa..0000000
--- a/frontend/src/components/file-browser/markdown-highlight.css
+++ /dev/null
@@ -1,30 +0,0 @@
-@import 'highlight.js/styles/github.css' layer(highlight-light);
-@import 'highlight.js/styles/github-dark.css' layer(highlight-dark);
-
-@layer highlight-light {
-  :root:not(.dark) .hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 0.5em;
-    background: var(--color-accent);
-    color: var(--color-foreground);
-  }
-}
-
-@layer highlight-dark {
-  .dark .hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 0.5em;
-    background: var(--color-accent);
-    color: var(--color-foreground);
-  }
-}
-
-:root:not(.dark) .hljs-dark {
-  display: none;
-}
-
-.dark .hljs:not(.hljs-dark) {
-  display: none;
-}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b856d32..e32573f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -308,3 +308,35 @@ body {
     font-size: 16px !important;
   }
 }
+
+/* Syntax highlighting for markdown code blocks */
+@import 'highlight.js/styles/github.css' layer(highlight-light);
+@import 'highlight.js/styles/github-dark.css' layer(highlight-dark);
+
+@layer highlight-light {
+  :root:not(.dark) .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: var(--color-accent);
+    color: var(--color-foreground);
+  }
+}
+
+@layer highlight-dark {
+  .dark .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: var(--color-accent);
+    color: var(--color-foreground);
+  }
+}
+
+:root:not(.dark) .hljs-dark {
+  display: none;
+}
+
+.dark .hljs:not(.hljs-dark) {
+  display: none;
+}