@extrachill/chat 0.2.2 → 0.3.1

package/css/chat.css

@@ -149,6 +149,89 @@
 	margin-top: 8px;
 }
 
+/* Markdown content styles */
+.ec-chat-message__bubble h1,
+.ec-chat-message__bubble h2,
+.ec-chat-message__bubble h3,
+.ec-chat-message__bubble h4,
+.ec-chat-message__bubble h5,
+.ec-chat-message__bubble h6 {
+	margin: 12px 0 4px;
+	line-height: 1.3;
+}
+
+.ec-chat-message__bubble h1:first-child,
+.ec-chat-message__bubble h2:first-child,
+.ec-chat-message__bubble h3:first-child {
+	margin-top: 0;
+}
+
+.ec-chat-message__bubble h1 { font-size: 1.25em; }
+.ec-chat-message__bubble h2 { font-size: 1.15em; }
+.ec-chat-message__bubble h3 { font-size: 1.05em; }
+
+.ec-chat-message__bubble ul,
+.ec-chat-message__bubble ol {
+	margin: 6px 0;
+	padding-left: 1.5em;
+}
+
+.ec-chat-message__bubble li {
+	margin-bottom: 2px;
+}
+
+.ec-chat-message__bubble li + li {
+	margin-top: 2px;
+}
+
+.ec-chat-message__bubble code {
+	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+	font-size: 0.875em;
+	padding: 1px 4px;
+	border-radius: 3px;
+	background: rgba(0, 0, 0, 0.06);
+}
+
+.ec-chat-message--user .ec-chat-message__bubble code {
+	background: rgba(255, 255, 255, 0.15);
+}
+
+.ec-chat-message__bubble pre {
+	margin: 8px 0;
+	padding: 10px 12px;
+	border-radius: 6px;
+	background: rgba(0, 0, 0, 0.06);
+	overflow-x: auto;
+	font-size: 0.85em;
+	line-height: 1.45;
+}
+
+.ec-chat-message--user .ec-chat-message__bubble pre {
+	background: rgba(255, 255, 255, 0.1);
+}
+
+.ec-chat-message__bubble pre code {
+	padding: 0;
+	background: none;
+	font-size: inherit;
+}
+
+.ec-chat-message__bubble a {
+	color: inherit;
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.ec-chat-message__bubble hr {
+	border: none;
+	border-top: 1px solid var(--ec-chat-border);
+	margin: 8px 0;
+}
+
+.ec-chat-message__bubble strong {
+	font-weight: 600;
+}
+
 .ec-chat-message__timestamp {
 	font-size: 11px;
 	color: var(--ec-chat-text-muted);

package/dist/components/ChatMessage.d.ts

@@ -7,7 +7,6 @@ export interface ChatMessageProps {
     contentFormat?: ContentFormat;
     /**
      * Custom content renderer. When provided, overrides contentFormat.
-     * Use this to plug in your own markdown renderer (react-markdown, etc.).
      */
     renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
     /** Additional CSS class name on the outer wrapper. */
@@ -17,7 +16,7 @@ export interface ChatMessageProps {
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
  */
 export declare function ChatMessage({ message, contentFormat, renderContent, className, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatMessage.d.ts.map

package/dist/components/ChatMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAyBlB"}
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKvF,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAyBlB"}

package/dist/components/ChatMessage.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { lazy, Suspense } from 'react';
+import { markdownToHtml } from "../markdown.js";
+const ReactMarkdown = lazy(() => import('react-markdown'));
 /**
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
  */
 export function ChatMessage({ message, contentFormat = 'markdown', renderContent, className, }) {
     const isUser = message.role === 'user';
@@ -14,13 +17,21 @@ export function ChatMessage({ message, contentFormat = 'markdown', renderContent
                     ? renderContent(message.content, message.role)
                     : _jsx(DefaultContent, { content: message.content, format: contentFormat }) }), message.timestamp && (_jsx("time", { className: `${baseClass}__timestamp`, dateTime: message.timestamp, title: new Date(message.timestamp).toLocaleString(), children: formatTime(message.timestamp) }))] }));
 }
+/**
+ * Markdown rendered via lazy-loaded react-markdown.
+ * Falls back to the built-in lightweight parser while loading.
+ */
+function MarkdownContent({ content }) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { dangerouslySetInnerHTML: { __html: markdownToHtml(content) } }), children: _jsx(ReactMarkdown, { children: content }) }));
+}
 function DefaultContent({ content, format }) {
     if (format === 'html') {
         return _jsx("div", { dangerouslySetInnerHTML: { __html: content } });
     }
-    // For 'text' and 'markdown' (without a custom renderer), render as text
-    // with basic paragraph splitting. Consumers should provide renderContent
-    // for proper markdown support.
+    if (format === 'markdown') {
+        return _jsx(MarkdownContent, { content: content });
+    }
+    // Plain text — split on double newlines for paragraphs.
     return (_jsx(_Fragment, { children: content.split('\n\n').map((paragraph, i) => (_jsx("p", { children: paragraph }, i))) }));
 }
 function formatTime(iso) {

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export type { MessageRole, ToolCall, ToolResultMeta, ChatMessage, ContentFormat,
 export type { FetchFn, FetchOptions, ChatApiConfig, SendResult, ContinueResult } from './api.ts';
 export { sendMessage, continueResponse, listSessions, loadSession, deleteSession, } from './api.ts';
 export { normalizeMessage, normalizeConversation, normalizeSession } from './normalizer.ts';
+export { markdownToHtml } from './markdown.ts';
 export { ChatMessage as ChatMessageComponent, type ChatMessageProps, } from './components/ChatMessage.tsx';
 export { ChatMessages, type ChatMessagesProps, } from './components/ChatMessages.tsx';
 export { ChatInput, type ChatInputProps, } from './components/ChatInput.tsx';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,eAAe,GACf,MAAM,kBAAkB,CAAC;AAG1B,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACjG,OAAO,EACN,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG5F,OAAO,EACN,WAAW,IAAI,oBAAoB,EACnC,KAAK,gBAAgB,GACrB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,YAAY,EACZ,KAAK,iBAAiB,GACtB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACN,SAAS,EACT,KAAK,cAAc,GACnB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACN,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,SAAS,GACd,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,aAAa,EACb,KAAK,kBAAkB,GACvB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACN,gBAAgB,EAChB,KAAK,qBAAqB,GAC1B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,GAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,eAAe,GACf,MAAM,kBAAkB,CAAC;AAG1B,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AACjG,OAAO,EACN,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,aAAa,GACb,MAAM,UAAU,CAAC;AAGlB,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAG5F,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,EACN,WAAW,IAAI,oBAAoB,EACnC,KAAK,gBAAgB,GACrB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,YAAY,EACZ,KAAK,iBAAiB,GACtB,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EACN,SAAS,EACT,KAAK,cAAc,GACnB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACN,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,SAAS,GACd,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,GACzB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EACN,aAAa,EACb,KAAK,kBAAkB,GACvB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACN,gBAAgB,EAChB,KAAK,qBAAqB,GAC1B,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EACN,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,aAAa,GAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,6 +1,8 @@
 export { sendMessage, continueResponse, listSessions, loadSession, deleteSession, } from "./api.js";
 // Normalizer
 export { normalizeMessage, normalizeConversation, normalizeSession } from "./normalizer.js";
+// Markdown
+export { markdownToHtml } from "./markdown.js";
 // Components
 export { ChatMessage as ChatMessageComponent, } from "./components/ChatMessage.js";
 export { ChatMessages, } from "./components/ChatMessages.js";

package/dist/markdown.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Lightweight markdown-to-HTML converter for chat messages.
+ *
+ * Handles the subset of markdown that LLM responses typically produce:
+ * headings, bold, italic, inline code, code blocks, links, lists,
+ * and paragraphs. Not a full CommonMark parser — just enough for
+ * clean chat rendering without heavy dependencies.
+ */
+/**
+ * Parse markdown string into HTML.
+ */
+export declare function markdownToHtml(source: string): string;
+//# sourceMappingURL=markdown.d.ts.map

package/dist/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../src/markdown.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAqCH;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAuFrD"}

package/dist/markdown.js

@@ -0,0 +1,116 @@
+/**
+ * Lightweight markdown-to-HTML converter for chat messages.
+ *
+ * Handles the subset of markdown that LLM responses typically produce:
+ * headings, bold, italic, inline code, code blocks, links, lists,
+ * and paragraphs. Not a full CommonMark parser — just enough for
+ * clean chat rendering without heavy dependencies.
+ */
+const ESCAPED = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+};
+function escapeHtml(text) {
+    return text.replace(/[&<>"]/g, (ch) => ESCAPED[ch] ?? ch);
+}
+/**
+ * Convert inline markdown to HTML.
+ * Order matters — code spans must be processed before bold/italic
+ * to avoid mangling backtick contents.
+ */
+function inlineMarkdown(text) {
+    let html = escapeHtml(text);
+    // Inline code (must come first to protect contents)
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+    // Bold + italic
+    html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+    // Bold
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    // Italic
+    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+    // Links [text](url)
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    return html;
+}
+/**
+ * Parse markdown string into HTML.
+ */
+export function markdownToHtml(source) {
+    const lines = source.split('\n');
+    const output = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Fenced code block
+        if (line.startsWith('```')) {
+            const lang = line.slice(3).trim();
+            const codeLines = [];
+            i++;
+            while (i < lines.length && !lines[i].startsWith('```')) {
+                codeLines.push(escapeHtml(lines[i]));
+                i++;
+            }
+            i++; // skip closing ```
+            const langAttr = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+            output.push(`<pre><code${langAttr}>${codeLines.join('\n')}</code></pre>`);
+            continue;
+        }
+        // Heading
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+            const level = headingMatch[1].length;
+            output.push(`<h${level}>${inlineMarkdown(headingMatch[2])}</h${level}>`);
+            i++;
+            continue;
+        }
+        // Horizontal rule
+        if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+            output.push('<hr>');
+            i++;
+            continue;
+        }
+        // Unordered list
+        if (/^\s*[-*+]\s/.test(line)) {
+            const listItems = [];
+            while (i < lines.length && /^\s*[-*+]\s/.test(lines[i])) {
+                listItems.push(`<li>${inlineMarkdown(lines[i].replace(/^\s*[-*+]\s+/, ''))}</li>`);
+                i++;
+            }
+            output.push(`<ul>${listItems.join('')}</ul>`);
+            continue;
+        }
+        // Ordered list
+        if (/^\s*\d+[.)]\s/.test(line)) {
+            const listItems = [];
+            while (i < lines.length && /^\s*\d+[.)]\s/.test(lines[i])) {
+                listItems.push(`<li>${inlineMarkdown(lines[i].replace(/^\s*\d+[.)]\s+/, ''))}</li>`);
+                i++;
+            }
+            output.push(`<ol>${listItems.join('')}</ol>`);
+            continue;
+        }
+        // Empty line — skip (paragraph breaks handled by grouping)
+        if (line.trim() === '') {
+            i++;
+            continue;
+        }
+        // Paragraph — collect consecutive non-empty, non-special lines
+        const paraLines = [];
+        while (i < lines.length &&
+            lines[i].trim() !== '' &&
+            !lines[i].startsWith('```') &&
+            !lines[i].match(/^#{1,6}\s/) &&
+            !/^\s*[-*+]\s/.test(lines[i]) &&
+            !/^\s*\d+[.)]\s/.test(lines[i]) &&
+            !/^(-{3,}|\*{3,}|_{3,})$/.test(lines[i].trim())) {
+            paraLines.push(lines[i]);
+            i++;
+        }
+        if (paraLines.length > 0) {
+            output.push(`<p>${inlineMarkdown(paraLines.join('\n'))}</p>`);
+        }
+    }
+    return output.join('');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extrachill/chat",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Chat UI components with built-in REST API client. Speaks the standard chat message format natively.",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,10 +52,13 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "typescript": "^5.7.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "typescript": "^5.7.0"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0"
   }
 }

package/src/components/ChatMessage.tsx

@@ -1,5 +1,8 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, lazy, Suspense } from 'react';
 import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
+import { markdownToHtml } from '../markdown.ts';
+
+const ReactMarkdown = lazy(() => import('react-markdown'));
 
 export interface ChatMessageProps {
 	/** The message to render. */
@@ -8,7 +11,6 @@ export interface ChatMessageProps {
 	contentFormat?: ContentFormat;
 	/**
 	 * Custom content renderer. When provided, overrides contentFormat.
-	 * Use this to plug in your own markdown renderer (react-markdown, etc.).
 	 */
 	renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
 	/** Additional CSS class name on the outer wrapper. */
@@ -19,7 +21,7 @@ export interface ChatMessageProps {
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
  */
 export function ChatMessage({
 	message,
@@ -58,14 +60,32 @@ interface DefaultContentProps {
 	format: ContentFormat;
 }
 
+/**
+ * Markdown rendered via lazy-loaded react-markdown.
+ * Falls back to the built-in lightweight parser while loading.
+ */
+function MarkdownContent({ content }: { content: string }) {
+	return (
+		<Suspense
+			fallback={
+				<div dangerouslySetInnerHTML={{ __html: markdownToHtml(content) }} />
+			}
+		>
+			<ReactMarkdown>{content}</ReactMarkdown>
+		</Suspense>
+	);
+}
+
 function DefaultContent({ content, format }: DefaultContentProps) {
 	if (format === 'html') {
 		return <div dangerouslySetInnerHTML={{ __html: content }} />;
 	}
 
-	// For 'text' and 'markdown' (without a custom renderer), render as text
-	// with basic paragraph splitting. Consumers should provide renderContent
-	// for proper markdown support.
+	if (format === 'markdown') {
+		return <MarkdownContent content={content} />;
+	}
+
+	// Plain text — split on double newlines for paragraphs.
 	return (
 		<>
 			{content.split('\n\n').map((paragraph, i) => (

package/src/index.ts

@@ -26,6 +26,9 @@ export {
 // Normalizer
 export { normalizeMessage, normalizeConversation, normalizeSession } from './normalizer.ts';
 
+// Markdown
+export { markdownToHtml } from './markdown.ts';
+
 // Components
 export {
 	ChatMessage as ChatMessageComponent,

package/src/markdown.ts

@@ -0,0 +1,135 @@
+/**
+ * Lightweight markdown-to-HTML converter for chat messages.
+ *
+ * Handles the subset of markdown that LLM responses typically produce:
+ * headings, bold, italic, inline code, code blocks, links, lists,
+ * and paragraphs. Not a full CommonMark parser — just enough for
+ * clean chat rendering without heavy dependencies.
+ */
+
+const ESCAPED: Record<string, string> = {
+	'&': '&amp;',
+	'<': '&lt;',
+	'>': '&gt;',
+	'"': '&quot;',
+};
+
+function escapeHtml(text: string): string {
+	return text.replace(/[&<>"]/g, (ch) => ESCAPED[ch] ?? ch);
+}
+
+/**
+ * Convert inline markdown to HTML.
+ * Order matters — code spans must be processed before bold/italic
+ * to avoid mangling backtick contents.
+ */
+function inlineMarkdown(text: string): string {
+	let html = escapeHtml(text);
+
+	// Inline code (must come first to protect contents)
+	html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+	// Bold + italic
+	html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+	// Bold
+	html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+	// Italic
+	html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+	// Links [text](url)
+	html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+
+	return html;
+}
+
+/**
+ * Parse markdown string into HTML.
+ */
+export function markdownToHtml(source: string): string {
+	const lines = source.split('\n');
+	const output: string[] = [];
+	let i = 0;
+
+	while (i < lines.length) {
+		const line = lines[i];
+
+		// Fenced code block
+		if (line.startsWith('```')) {
+			const lang = line.slice(3).trim();
+			const codeLines: string[] = [];
+			i++;
+			while (i < lines.length && !lines[i].startsWith('```')) {
+				codeLines.push(escapeHtml(lines[i]));
+				i++;
+			}
+			i++; // skip closing ```
+			const langAttr = lang ? ` class="language-${escapeHtml(lang)}"` : '';
+			output.push(`<pre><code${langAttr}>${codeLines.join('\n')}</code></pre>`);
+			continue;
+		}
+
+		// Heading
+		const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+		if (headingMatch) {
+			const level = headingMatch[1].length;
+			output.push(`<h${level}>${inlineMarkdown(headingMatch[2])}</h${level}>`);
+			i++;
+			continue;
+		}
+
+		// Horizontal rule
+		if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+			output.push('<hr>');
+			i++;
+			continue;
+		}
+
+		// Unordered list
+		if (/^\s*[-*+]\s/.test(line)) {
+			const listItems: string[] = [];
+			while (i < lines.length && /^\s*[-*+]\s/.test(lines[i])) {
+				listItems.push(`<li>${inlineMarkdown(lines[i].replace(/^\s*[-*+]\s+/, ''))}</li>`);
+				i++;
+			}
+			output.push(`<ul>${listItems.join('')}</ul>`);
+			continue;
+		}
+
+		// Ordered list
+		if (/^\s*\d+[.)]\s/.test(line)) {
+			const listItems: string[] = [];
+			while (i < lines.length && /^\s*\d+[.)]\s/.test(lines[i])) {
+				listItems.push(`<li>${inlineMarkdown(lines[i].replace(/^\s*\d+[.)]\s+/, ''))}</li>`);
+				i++;
+			}
+			output.push(`<ol>${listItems.join('')}</ol>`);
+			continue;
+		}
+
+		// Empty line — skip (paragraph breaks handled by grouping)
+		if (line.trim() === '') {
+			i++;
+			continue;
+		}
+
+		// Paragraph — collect consecutive non-empty, non-special lines
+		const paraLines: string[] = [];
+		while (
+			i < lines.length &&
+			lines[i].trim() !== '' &&
+			!lines[i].startsWith('```') &&
+			!lines[i].match(/^#{1,6}\s/) &&
+			!/^\s*[-*+]\s/.test(lines[i]) &&
+			!/^\s*\d+[.)]\s/.test(lines[i]) &&
+			!/^(-{3,}|\*{3,}|_{3,})$/.test(lines[i].trim())
+		) {
+			paraLines.push(lines[i]);
+			i++;
+		}
+		if (paraLines.length > 0) {
+			output.push(`<p>${inlineMarkdown(paraLines.join('\n'))}</p>`);
+		}
+	}
+
+	return output.join('');
+}