feat: markdown support for gh issues / pull requests

apps/ui/package.json

@@ -72,6 +72,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",

apps/ui/src/components/ui/markdown.tsx

@@ -1,4 +1,6 @@
 import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
 import { cn } from '@/lib/utils';
 
 interface MarkdownProps {
@@ -9,6 +11,7 @@ interface MarkdownProps {
 /**
  * Reusable Markdown component for rendering markdown content
  * Theme-aware styling that adapts to all predefined themes
+ * Supports raw HTML elements including images
  */
 export function Markdown({ children, className }: MarkdownProps) {
   return (
@@ -37,10 +40,12 @@ export function Markdown({ children, className }: MarkdownProps) {
         '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic [&_blockquote]:my-2',
         // Horizontal rules
         '[&_hr]:border-border [&_hr]:my-4',
+        // Images
+        '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-2 [&_img]:border [&_img]:border-border',
         className
       )}
     >
-      <ReactMarkdown>{children}</ReactMarkdown>
+      <ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>{children}</ReactMarkdown>
     </div>
   );
 }

apps/ui/src/components/views/github-issues-view.tsx

@@ -3,6 +3,7 @@ import { CircleDot, Loader2, RefreshCw, ExternalLink, CheckCircle2, Circle, X }
 import { getElectronAPI, GitHubIssue } from '@/lib/electron';
 import { useAppStore } from '@/store/app-store';
 import { Button } from '@/components/ui/button';
+import { Markdown } from '@/components/ui/markdown';
 import { cn } from '@/lib/utils';
 
 export function GitHubIssuesView() {
@@ -241,9 +242,7 @@ export function GitHubIssuesView() {
 
             {/* Body */}
             {selectedIssue.body ? (
-              <div className="prose prose-sm dark:prose-invert max-w-none">
-                <div className="whitespace-pre-wrap text-sm">{selectedIssue.body}</div>
-              </div>
+              <Markdown className="text-sm">{selectedIssue.body}</Markdown>
             ) : (
               <p className="text-sm text-muted-foreground italic">No description provided.</p>
             )}

apps/ui/src/components/views/github-prs-view.tsx

@@ -1,17 +1,9 @@
 import { useState, useEffect, useCallback } from 'react';
-import {
-  GitPullRequest,
-  Loader2,
-  RefreshCw,
-  ExternalLink,
-  GitMerge,
-  Circle,
-  X,
-  AlertCircle,
-} from 'lucide-react';
+import { GitPullRequest, Loader2, RefreshCw, ExternalLink, GitMerge, X } from 'lucide-react';
 import { getElectronAPI, GitHubPR } from '@/lib/electron';
 import { useAppStore } from '@/store/app-store';
 import { Button } from '@/components/ui/button';
+import { Markdown } from '@/components/ui/markdown';
 import { cn } from '@/lib/utils';
 
 export function GitHubPRsView() {
@@ -296,9 +288,7 @@ export function GitHubPRsView() {
 
             {/* Body */}
             {selectedPR.body ? (
-              <div className="prose prose-sm dark:prose-invert max-w-none">
-                <div className="whitespace-pre-wrap text-sm">{selectedPR.body}</div>
-              </div>
+              <Markdown className="text-sm">{selectedPR.body}</Markdown>
             ) : (
               <p className="text-sm text-muted-foreground italic">No description provided.</p>
             )}

package.json

@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "cross-spawn": "^7.0.6",
+    "rehype-sanitize": "^6.0.0",
     "tree-kill": "^1.2.2"
   },
   "devDependencies": {