+ {code}
+
+ )
+ }
+
+ // Minimal mode: just syntax highlighting, no chrome
+ if (mode === 'minimal') {
+ if (isLoading || !highlighted) {
+ return (
+
+ {code}
+
+ )
+ }
+
+ return (
+
+ )
+ }
+
+ // Full mode: rich styling with header and copy button
+ return (
+
+ {code}
+
+ ) : (
+
+ )}
+
+ {children}
+
+ )
+}
diff --git a/apps/web/components/markdown/Markdown.tsx b/apps/web/components/markdown/Markdown.tsx
new file mode 100644
index 00000000..348cfc37
--- /dev/null
+++ b/apps/web/components/markdown/Markdown.tsx
@@ -0,0 +1,301 @@
+import * as React from 'react'
+import ReactMarkdown, { type Components } from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/utils'
+import { CodeBlock, InlineCode } from './CodeBlock'
+import { preprocessLinks } from './linkify'
+
+/**
+ * Render modes for markdown content:
+ *
+ * - 'terminal': Raw output with minimal formatting, control chars visible
+ * Best for: Debug output, raw logs, when you want to see exactly what's there
+ *
+ * - 'minimal': Clean rendering with syntax highlighting but no extra chrome
+ * Best for: Chat messages, inline content, when you want readability without clutter
+ *
+ * - 'full': Rich rendering with beautiful tables, styled code blocks, proper typography
+ * Best for: Documentation, long-form content, when presentation matters
+ */
+export type RenderMode = 'terminal' | 'minimal' | 'full'
+
+export interface MarkdownProps {
+ children: string
+ /**
+ * Render mode controlling formatting level
+ * @default 'minimal'
+ */
+ mode?: RenderMode
+ className?: string
+ /**
+ * Message ID for memoization (optional)
+ * When provided, memoizes parsed blocks to avoid re-parsing during streaming
+ */
+ id?: string
+ /**
+ * Callback when a URL is clicked
+ */
+ onUrlClick?: (url: string) => void
+ /**
+ * Callback when a file path is clicked
+ */
+ onFileClick?: (path: string) => void
+}
+
+// File path detection regex - matches paths starting with /, ~/, or ./
+const FILE_PATH_REGEX =
+ /^(?:\/|~\/|\.\/)[\w\-./@]+\.(?:ts|tsx|js|jsx|mjs|cjs|md|json|yaml|yml|py|go|rs|css|scss|less|html|htm|txt|log|sh|bash|zsh|swift|kt|java|c|cpp|h|hpp|rb|php|xml|toml|ini|cfg|conf|env|sql|graphql|vue|svelte|astro|prisma)$/i
+
+/**
+ * Create custom components based on render mode
+ */
+function createComponents(
+ mode: RenderMode,
+ onUrlClick?: (url: string) => void,
+ onFileClick?: (path: string) => void
+): Partial{children},
+ pre: ({ children }) => {children},
+ // Minimal paragraph spacing
+ p: ({ children }) => {children}
, + // Simple lists + ul: ({ children }) =>{children}
, + // Styled lists + ul: ({ children }) => ( ++ {children} ++ ), + // Horizontal rules + hr: () =>
{children}
, + // Styled lists + ul: ({ children }) => ( ++ {children} ++ ), + // Task lists (GFM) + input: ({ type, checked }) => { + if (type === 'checkbox') { + return ( + + ) + } + return + }, + // Horizontal rules + hr: () =>