fix: render markdown in chat messages (TAB-62)

src/components/chat/ChatView.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from "react";
 import { AnimatePresence, motion } from "framer-motion";
+import { renderMarkdown } from "@/lib/renderMarkdown";
 
 // ─── Types ──────────────────────────────────────
 
@@ -49,8 +50,8 @@ function TwinMessage({ content, timestamp }: { content: string; timestamp: strin
       transition={{ duration: 0.3, ease: "easeOut" }}
       className="flex flex-col gap-1 max-w-[85%]"
     >
-      <div className="bg-[#141417] border border-[#333] rounded-[12px] px-3 py-2.5">
-        <p className="text-[13px] text-[#f5f5f7] italic leading-relaxed">{content}</p>
+      <div className="bg-[#141417] border border-[#333] rounded-[12px] px-3 py-2.5 text-[13px] text-[#f5f5f7] italic leading-relaxed space-y-2">
+        {renderMarkdown(content)}
       </div>
       <span className="text-[10px] text-[#8e8e93] pl-1">{timestamp}</span>
     </motion.div>
@@ -267,8 +268,8 @@ export default function ChatView({
             {isThinking && <ThinkingIndicator />}
           </AnimatePresence>
 
-          {/* VNC PiP */}
-          <VncPip streamUrl={vncStreamUrl} />
+          {/* VNC PiP — only show when stream is active */}
+          {vncStreamUrl && <VncPip streamUrl={vncStreamUrl} />}
         </div>
 
         {/* Input */}

src/components/wizard/ChatScreen.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import { postChat } from "@/lib/api";
 import type { ActionTaken } from "@/lib/api";
 import MascotFace from "@/components/mascot/MascotFace";
+import { renderMarkdown } from "@/lib/renderMarkdown";
 
 interface ChatMessage {
   role: "user" | "assistant";
@@ -93,7 +94,13 @@ export default function ChatScreen({ sessionId, name }: ChatScreenProps) {
                   : "bg-gray-100 text-black"
               }`}
             >
-              <p className="text-sm sm:text-base whitespace-pre-wrap">{msg.text}</p>
+              {msg.role === "assistant" ? (
+                <div className="text-sm sm:text-base space-y-2">
+                  {renderMarkdown(msg.text)}
+                </div>
+              ) : (
+                <p className="text-sm sm:text-base whitespace-pre-wrap">{msg.text}</p>
+              )}
               {msg.actions && msg.actions.length > 0 && (
                 <div className="flex flex-wrap gap-2 mt-2">
                   {msg.actions.map((action, j) => (

src/lib/renderMarkdown.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+/**
+ * Lightweight markdown renderer for chat messages.
+ * Handles: **bold**, *italic*, numbered lists, and paragraph breaks.
+ */
+
+function renderInline(text: string): React.ReactNode[] {
+  const parts: React.ReactNode[] = [];
+  // Match **bold** and *italic* patterns
+  const regex = /(\*\*(.+?)\*\*|\*(.+?)\*)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Text before this match
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    if (match[2]) {
+      // **bold**
+      parts.push(<strong key={match.index} className="font-semibold">{match[2]}</strong>);
+    } else if (match[3]) {
+      // *italic*
+      parts.push(<em key={match.index}>{match[3]}</em>);
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Remaining text after last match
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length > 0 ? parts : [text];
+}
+
+export function renderMarkdown(text: string): React.ReactNode {
+  // Split into paragraphs by double newlines
+  const paragraphs = text.split(/\n{2,}/);
+
+  return paragraphs.map((paragraph, pIdx) => {
+    const trimmed = paragraph.trim();
+    if (!trimmed) return null;
+
+    // Check if this paragraph is a numbered list block
+    const lines = trimmed.split("\n");
+    const isNumberedList = lines.every(
+      (line) => /^\d+\.\s/.test(line.trim()) || line.trim() === ""
+    );
+
+    if (isNumberedList) {
+      return (
+        <ol key={pIdx} className="list-decimal list-inside space-y-1.5">
+          {lines
+            .filter((line) => line.trim())
+            .map((line, lIdx) => {
+              const content = line.replace(/^\d+\.\s*/, "");
+              return <li key={lIdx}>{renderInline(content)}</li>;
+            })}
+        </ol>
+      );
+    }
+
+    // Check if it's a bullet list
+    const isBulletList = lines.every(
+      (line) => /^[-•]\s/.test(line.trim()) || line.trim() === ""
+    );
+
+    if (isBulletList) {
+      return (
+        <ul key={pIdx} className="list-disc list-inside space-y-1">
+          {lines
+            .filter((line) => line.trim())
+            .map((line, lIdx) => {
+              const content = line.replace(/^[-•]\s*/, "");
+              return <li key={lIdx}>{renderInline(content)}</li>;
+            })}
+        </ul>
+      );
+    }
+
+    // Regular paragraph — preserve single newlines as <br>
+    return (
+      <p key={pIdx}>
+        {lines.map((line, lIdx) => (
+          <React.Fragment key={lIdx}>
+            {lIdx > 0 && <br />}
+            {renderInline(line)}
+          </React.Fragment>
+        ))}
+      </p>
+    );
+  });
+}