diff --git a/package-lock.json b/package-lock.json
index 500da39..3ef9727 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,9 @@
 				"ajv": "^8.12.0",
 				"async-cache-dedupe": "^1.12.0",
 				"classnames": "^2.3.2",
+				"dompurify": "^3.4.12",
+				"highlight.js": "^11.11.1",
+				"marked": "^12.0.2",
 				"prom-client": "^15.1.3"
 			},
 			"devDependencies": {
@@ -2516,7 +2519,6 @@
 			"version": "2.0.7",
 			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
 			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
-			"dev": true,
 			"license": "MIT",
 			"optional": true
 		},
@@ -3900,10 +3902,9 @@
 			"license": "MIT"
 		},
 		"node_modules/dompurify": {
-			"version": "3.4.8",
-			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.8.tgz",
-			"integrity": "sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ==",
-			"dev": true,
+			"version": "3.4.12",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.12.tgz",
+			"integrity": "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==",
 			"license": "(MPL-2.0 OR Apache-2.0)",
 			"optionalDependencies": {
 				"@types/trusted-types": "^2.0.7"
@@ -5094,6 +5095,15 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.11.1",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+			"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/html-encoding-sniffer": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -5905,6 +5915,18 @@
 				"@jridgewell/sourcemap-codec": "^1.5.5"
 			}
 		},
+		"node_modules/marked": {
+			"version": "12.0.2",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+			"integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+			"license": "MIT",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
 		"node_modules/math-intrinsics": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index c902482..465cf45 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,9 @@
 		"ajv": "^8.12.0",
 		"async-cache-dedupe": "^1.12.0",
 		"classnames": "^2.3.2",
+		"dompurify": "^3.4.12",
+		"highlight.js": "^11.11.1",
+		"marked": "^12.0.2",
 		"prom-client": "^15.1.3"
 	}
 }
diff --git a/src/app.postcss b/src/app.postcss
index 44b538a..575eadf 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -26,3 +26,150 @@
 	color: #a7a7ef !important;
 	opacity: 1 !important;
 }
+
+/* Rendered markdown in agent chat replies. Tailwind base strips list/heading
+   styles, so restore just what model output needs. */
+.chat-md > :first-child {
+	margin-top: 0;
+}
+.chat-md p {
+	margin: 0.4rem 0;
+}
+.chat-md ul,
+.chat-md ol {
+	margin: 0.4rem 0;
+	padding-left: 1.25rem;
+}
+.chat-md ul {
+	list-style: disc;
+}
+.chat-md ol {
+	list-style: decimal;
+}
+.chat-md li {
+	margin: 0.15rem 0;
+}
+.chat-md h1,
+.chat-md h2,
+.chat-md h3,
+.chat-md h4 {
+	margin: 0.6rem 0 0.3rem;
+	font-weight: 600;
+	line-height: 1.25;
+}
+.chat-md h1 {
+	font-size: 1.1rem;
+}
+.chat-md h2 {
+	font-size: 1.05rem;
+}
+.chat-md h3,
+.chat-md h4 {
+	font-size: 1rem;
+}
+.chat-md a {
+	color: #2563eb;
+	text-decoration: underline;
+}
+:is(.dark .chat-md) a {
+	color: #93c5fd;
+}
+.chat-md blockquote {
+	margin: 0.4rem 0;
+	padding-left: 0.75rem;
+	border-left: 3px solid #d1d5db;
+	color: #6b7280;
+}
+:is(.dark .chat-md) blockquote {
+	border-left-color: #4b5563;
+	color: #9ca3af;
+}
+/* Inline code */
+.chat-md code {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 0.85em;
+	background: var(--hl-bg);
+	padding: 0.1rem 0.3rem;
+	border-radius: 0.25rem;
+}
+/* Fenced code blocks: the <pre> owns the surface; the inner <code> is bare. */
+.chat-md pre {
+	margin: 0.5rem 0;
+	padding: 0.65rem 0.75rem;
+	overflow-x: auto;
+	border-radius: 0.375rem;
+	background: var(--hl-bg);
+}
+.chat-md pre code {
+	padding: 0;
+	background: none;
+	font-size: 0.8rem;
+	line-height: 1.45;
+}
+
+/* highlight.js palette as CSS variables so a single set of scope rules serves
+   both themes (github light / github-dark). */
+.chat-md {
+	--hl-bg: #f6f8fa;
+	--hl-fg: #24292e;
+	--hl-comment: #6a737d;
+	--hl-keyword: #d73a49;
+	--hl-string: #032f62;
+	--hl-number: #005cc5;
+	--hl-title: #6f42c1;
+	--hl-type: #e36209;
+	--hl-attr: #005cc5;
+}
+:is(.dark .chat-md) {
+	--hl-bg: #161b22;
+	--hl-fg: #c9d1d9;
+	--hl-comment: #8b949e;
+	--hl-keyword: #ff7b72;
+	--hl-string: #a5d6ff;
+	--hl-number: #79c0ff;
+	--hl-title: #d2a8ff;
+	--hl-type: #ffa657;
+	--hl-attr: #79c0ff;
+}
+.chat-md .hljs {
+	color: var(--hl-fg);
+	background: none;
+}
+.chat-md .hljs-comment,
+.chat-md .hljs-quote {
+	color: var(--hl-comment);
+	font-style: italic;
+}
+.chat-md .hljs-keyword,
+.chat-md .hljs-selector-tag,
+.chat-md .hljs-literal,
+.chat-md .hljs-doctag {
+	color: var(--hl-keyword);
+}
+.chat-md .hljs-string,
+.chat-md .hljs-regexp,
+.chat-md .hljs-addition {
+	color: var(--hl-string);
+}
+.chat-md .hljs-number,
+.chat-md .hljs-built_in,
+.chat-md .hljs-bullet {
+	color: var(--hl-number);
+}
+.chat-md .hljs-title,
+.chat-md .hljs-section,
+.chat-md .hljs-function .hljs-title {
+	color: var(--hl-title);
+}
+.chat-md .hljs-type,
+.chat-md .hljs-class .hljs-title,
+.chat-md .hljs-tag,
+.chat-md .hljs-symbol {
+	color: var(--hl-type);
+}
+.chat-md .hljs-attr,
+.chat-md .hljs-attribute,
+.chat-md .hljs-variable,
+.chat-md .hljs-name {
+	color: var(--hl-attr);
+}
diff --git a/src/lib/components/agentChat.svelte b/src/lib/components/agentChat.svelte
index b743821..dec6f51 100644
--- a/src/lib/components/agentChat.svelte
+++ b/src/lib/components/agentChat.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { onMount, afterUpdate } from 'svelte';
 	import type { File, ChatMessage } from '$lib/types';
+	import { renderMarkdown } from '$lib/markdown';
+	import { highlightWithin } from '$lib/highlight';
 
 	export let files: File[];
 	// Async ops capture these at start, so a late response commits to the example
@@ -49,6 +51,7 @@
 		if (scrollEl && !forcePin) autoFollow = atBottom();
 	}
 	afterUpdate(() => {
+		if (scrollEl) highlightWithin(scrollEl);
 		if (!scrollEl || !(forcePin || autoFollow)) return;
 		scrollEl.scrollTop = scrollEl.scrollHeight;
 		if (typeof requestAnimationFrame !== 'undefined') {
@@ -298,14 +301,21 @@
 		class="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-3"
 	>
 		{#each messages as m}
-			<div
-				class="text-sm {m.role === 'user'
-					? 'text-gray-900 dark:text-white'
-					: 'text-blue-700 dark:text-blue-300'}"
-			>
-				<span class="font-medium">{m.role === 'user' ? 'You' : 'Agent'}:</span>
-				<span class="whitespace-pre-wrap">{m.content}</span>
-			</div>
+			{#if m.role === 'user'}
+				<div class="text-sm text-gray-900 dark:text-white">
+					<span class="font-medium">You:</span>
+					<span class="whitespace-pre-wrap">{m.content}</span>
+				</div>
+			{:else}
+				<div class="text-sm">
+					<span class="font-medium text-blue-700 dark:text-blue-300">Agent:</span>
+					<!-- Model output is untrusted; renderMarkdown sanitizes (DOMPurify) before {@html}. -->
+					<div class="chat-md mt-1 text-gray-900 dark:text-gray-100">
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						{@html renderMarkdown(m.content)}
+					</div>
+				</div>
+			{/if}
 		{/each}
 		{#if currentBusy}
 			<div class="text-sm italic text-gray-400">Thinking…</div>
diff --git a/src/lib/components/agentChat.test.ts b/src/lib/components/agentChat.test.ts
index dbead2c..65db91a 100644
--- a/src/lib/components/agentChat.test.ts
+++ b/src/lib/components/agentChat.test.ts
@@ -266,6 +266,37 @@ describe('agentChat.svelte', () => {
 		);
 	});
 
+	it('renders assistant markdown as HTML and keeps user text plain', async () => {
+		vi.stubGlobal('fetch', mockFetch({ reply: 'x', files }));
+		const { getByText, container } = render(AgentChat, {
+			props: {
+				files,
+				onFilesChange: vi.fn(),
+				messages: [
+					{ role: 'user' as const, content: 'make it **bold**' },
+					{
+						role: 'assistant' as const,
+						content: 'sure: **done**\n```js\nconst z = 4;\n```'
+					}
+				],
+				chatCacheKey: 'chat:A'
+			}
+		});
+		await waitFor(() => expect(getByText('gpt-4o')).toBeInTheDocument());
+
+		// Assistant markdown becomes real HTML elements.
+		expect(container.querySelector('.chat-md strong')?.textContent).toBe('done');
+
+		// Fenced code renders as pre/code and gets syntax-highlighted by highlight.js.
+		const codeEl = container.querySelector('.chat-md pre code');
+		expect(codeEl?.textContent).toContain('const z = 4;');
+		await waitFor(() => expect(codeEl?.querySelector('.hljs-keyword')).not.toBeNull());
+
+		// User asterisks are shown literally, not rendered.
+		expect(getByText(/make it \*\*bold\*\*/)).toBeInTheDocument();
+		expect(container.querySelector('.chat-md strong')?.textContent).not.toBe('bold');
+	});
+
 	it('the header info summary appears on hover', async () => {
 		vi.stubGlobal('fetch', mockFetch({ reply: 'x', files }));
 		const { getByText, getByLabelText, queryByText, findByText } = render(AgentChat, {
diff --git a/src/lib/highlight.ts b/src/lib/highlight.ts
new file mode 100644
index 0000000..03e051c
--- /dev/null
+++ b/src/lib/highlight.ts
@@ -0,0 +1,28 @@
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import bash from 'highlight.js/lib/languages/bash';
+import python from 'highlight.js/lib/languages/python';
+import markdown from 'highlight.js/lib/languages/markdown';
+
+// Core build + a lean set of languages the demos actually use, so we don't
+// pull in highlight.js's full ~200-language registry.
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('xml', xml); // also covers HTML
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('markdown', markdown);
+
+// Colorize any code blocks under `root` that haven't been highlighted yet.
+// highlightElement stamps data-highlighted, so re-renders skip finished blocks.
+export function highlightWithin(root: HTMLElement): void {
+	root.querySelectorAll<HTMLElement>('pre code').forEach((el) => {
+		if (!el.dataset.highlighted) hljs.highlightElement(el);
+	});
+}
diff --git a/src/lib/markdown.test.ts b/src/lib/markdown.test.ts
new file mode 100644
index 0000000..8268e9f
--- /dev/null
+++ b/src/lib/markdown.test.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { renderMarkdown } from './markdown';
+
+describe('renderMarkdown', () => {
+	it('renders inline markdown to HTML', () => {
+		const html = renderMarkdown('a **bold** and `code` word');
+		expect(html).toContain('<strong>bold</strong>');
+		expect(html).toContain('<code>code</code>');
+	});
+
+	it('renders fenced code blocks as pre/code with a language class', () => {
+		const html = renderMarkdown('```js\nconst zoom = 4;\n```');
+		expect(html).toContain('<pre>');
+		expect(html).toMatch(/<code[^>]*class="[^"]*language-js/);
+		expect(html).toContain('const zoom = 4;');
+	});
+
+	it('strips dangerous markup from model output', () => {
+		const html = renderMarkdown('hi <img src=x onerror=alert(1)> <script>alert(2)</script>');
+		expect(html).not.toContain('onerror');
+		expect(html).not.toContain('<script>');
+	});
+
+	it('opens links in a new tab with noopener', () => {
+		const html = renderMarkdown('[docs](https://example.com)');
+		expect(html).toContain('target="_blank"');
+		expect(html).toContain('rel="noopener noreferrer"');
+	});
+});
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
new file mode 100644
index 0000000..5029154
--- /dev/null
+++ b/src/lib/markdown.ts
@@ -0,0 +1,39 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+
+marked.setOptions({ gfm: true, breaks: true });
+
+let hookRegistered = false;
+
+// Open model-supplied links in a new tab and strip the opener reference.
+function registerHooks() {
+	if (hookRegistered) return;
+	DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+		if (node.tagName === 'A' && node.getAttribute('href')) {
+			node.setAttribute('target', '_blank');
+			node.setAttribute('rel', 'noopener noreferrer');
+		}
+	});
+	hookRegistered = true;
+}
+
+// Render untrusted model output to sanitized HTML. Code blocks are left for
+// highlight.js to colorize on the live DOM after insertion. On the server
+// (no window) DOMPurify can't run, so fall back to escaped plain text.
+export function renderMarkdown(src: string): string {
+	const text = src ?? '';
+	if (typeof window === 'undefined') {
+		return escapeHtml(text);
+	}
+	registerHooks();
+	const html = marked.parse(text, { async: false }) as string;
+	return DOMPurify.sanitize(html, { ADD_ATTR: ['target', 'rel'] });
+}
+
+function escapeHtml(s: string): string {
+	return s
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}