feat: format ai responses with marked

src/renderer/components/ChatPanel/ChatPanel.css

@@ -399,3 +399,127 @@
   color: var(--vscode-errorForeground);
   margin-top: 4px;
 }
+
+/* Markdown content styling for AI responses */
+.chat-message.assistant .chat-message-text {
+  white-space: normal;
+}
+
+.chat-message-text p {
+  margin: 0 0 0.5em 0;
+}
+
+.chat-message-text p:last-child {
+  margin-bottom: 0;
+}
+
+.chat-message-text h1,
+.chat-message-text h2,
+.chat-message-text h3,
+.chat-message-text h4 {
+  margin: 0.75em 0 0.5em 0;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+}
+
+.chat-message-text h1:first-child,
+.chat-message-text h2:first-child,
+.chat-message-text h3:first-child {
+  margin-top: 0;
+}
+
+.chat-message-text h1 { font-size: 1.3em; }
+.chat-message-text h2 { font-size: 1.2em; }
+.chat-message-text h3 { font-size: 1.1em; }
+.chat-message-text h4 { font-size: 1em; }
+
+.chat-message-text ul,
+.chat-message-text ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.chat-message-text li {
+  margin: 0.25em 0;
+}
+
+.chat-message-text code {
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 0.9em;
+  padding: 0.15em 0.4em;
+  background-color: var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.2));
+  border-radius: 3px;
+}
+
+.chat-message-text pre {
+  margin: 0.75em 0;
+  padding: 12px;
+  overflow-x: auto;
+  background-color: var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.2));
+  border-radius: 6px;
+}
+
+.chat-message-text pre code {
+  padding: 0;
+  background: transparent;
+  font-size: 0.85em;
+  line-height: 1.4;
+}
+
+.chat-message-text table {
+  width: 100%;
+  margin: 0.75em 0;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.chat-message-text th,
+.chat-message-text td {
+  padding: 8px 12px;
+  text-align: left;
+  border: 1px solid var(--vscode-editorGroup-border);
+}
+
+.chat-message-text th {
+  font-weight: 600;
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.chat-message-text tr:nth-child(even) {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.chat-message-text blockquote {
+  margin: 0.75em 0;
+  padding: 0.5em 1em;
+  border-left: 3px solid var(--vscode-textLink-foreground);
+  background-color: var(--vscode-textBlockQuote-background, rgba(0, 0, 0, 0.1));
+  color: var(--vscode-descriptionForeground);
+}
+
+.chat-message-text blockquote p {
+  margin: 0;
+}
+
+.chat-message-text a {
+  color: var(--vscode-textLink-foreground);
+  text-decoration: none;
+}
+
+.chat-message-text a:hover {
+  text-decoration: underline;
+}
+
+.chat-message-text hr {
+  margin: 1em 0;
+  border: none;
+  border-top: 1px solid var(--vscode-editorGroup-border);
+}
+
+.chat-message-text strong {
+  font-weight: 600;
+}
+
+.chat-message-text em {
+  font-style: italic;
+}

src/renderer/components/ChatPanel/ChatPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import Markdown from 'marked-react';
 import type { ChatMessage, ChatConversation, ChatModel } from '../../types/electron';
 import './ChatPanel.css';
 
@@ -242,7 +243,13 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ conversationId }) => {
               {msg.role === 'user' ? 'You' : 'Assistant'}
             </span>
           </div>
-          <div className="chat-message-text">{msg.content}</div>
+          <div className="chat-message-text">
+            {msg.role === 'assistant' ? (
+              <Markdown gfm>{msg.content}</Markdown>
+            ) : (
+              msg.content
+            )}
+          </div>
         </div>
       </div>
     );
@@ -341,7 +348,9 @@ export const ChatPanel: React.FC<ChatPanelProps> = ({ conversationId }) => {
                 <span className="chat-message-role">Assistant</span>
                 <span className="streaming-indicator">{'\u25CF'}</span>
               </div>
-              <div className="chat-message-text">{streamingContent}</div>
+              <div className="chat-message-text">
+                <Markdown gfm>{streamingContent}</Markdown>
+              </div>
             </div>
           </div>
         )}