@@ -127,7 +110,6 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
prose-ol:my-2
prose-ul:mt-0 prose-ul:mb-3
prose-li:m-0
-
${className}`}
components={{
a: ({ ...props }) =>
,
diff --git a/ui/desktop/src/test/setup.ts b/ui/desktop/src/test/setup.ts
new file mode 100644
index 0000000000..d03e2a87c8
--- /dev/null
+++ b/ui/desktop/src/test/setup.ts
@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock console methods to avoid noise in tests
+// eslint-disable-next-line no-undef
+global.console = {
+ ...console,
+ log: vi.fn(),
+ warn: vi.fn(),
+ error: vi.fn(),
+};
+
+// Mock window.navigator.clipboard for copy functionality tests
+Object.assign(navigator, {
+ clipboard: {
+ writeText: vi.fn(() => Promise.resolve()),
+ },
+});
diff --git a/ui/desktop/src/utils/htmlSecurity.test.ts b/ui/desktop/src/utils/htmlSecurity.test.ts
new file mode 100644
index 0000000000..a13eb74a0d
--- /dev/null
+++ b/ui/desktop/src/utils/htmlSecurity.test.ts
@@ -0,0 +1,269 @@
+import { describe, it, expect } from 'vitest';
+import { containsHTML, wrapHTMLInCodeBlock } from '../utils/htmlSecurity';
+
+describe('HTML Security Detection', () => {
+ describe('containsHTML', () => {
+ describe('should detect dangerous HTML tags', () => {
+ it('detects script tags', () => {
+ expect(containsHTML('')).toBe(true);
+ expect(containsHTML('')).toBe(true);
+ expect(containsHTML('`')).toBe(false);
+ expect(containsHTML('Here is `
` in inline code')).toBe(false);
+ });
+
+ it('ignores plain text', () => {
+ expect(containsHTML('This is just plain text')).toBe(false);
+ expect(containsHTML('No HTML here!')).toBe(false);
+ expect(containsHTML('')).toBe(false);
+ });
+
+ it('ignores mathematical expressions', () => {
+ expect(containsHTML('x < y && y > z')).toBe(false);
+ expect(containsHTML('if (a < b && c > d)')).toBe(false);
+ });
+ });
+
+ describe('edge cases', () => {
+ it('handles mixed content correctly', () => {
+ // Real HTML mixed with safe content
+ expect(containsHTML('Visit
and click here
')).toBe(true);
+
+ // Only safe content
+ expect(containsHTML('Email about setup')).toBe(false);
+ });
+
+ it('handles malformed HTML', () => {
+ expect(containsHTML('')).toBe(false);
+ expect(containsHTML('< div >')).toBe(false);
+ });
+ });
+ });
+
+ describe('wrapHTMLInCodeBlock', () => {
+ describe('should wrap dangerous HTML', () => {
+ it('wraps single line HTML', () => {
+ const input = '';
+ const expected = '```html\n\n```';
+ expect(wrapHTMLInCodeBlock(input)).toBe(expected);
+ });
+
+ it('wraps HTML comments', () => {
+ const input = '';
+ const expected = '```html\n\n```';
+ expect(wrapHTMLInCodeBlock(input)).toBe(expected);
+ });
+
+ it('wraps mixed content selectively', () => {
+ const input = `Normal text
+
This should be wrapped
+More normal text`;
+
+ const expected = `Normal text
+\`\`\`html
+
This should be wrapped
+\`\`\`
+More normal text`;
+
+ expect(wrapHTMLInCodeBlock(input)).toBe(expected);
+ });
+ });
+
+ describe('should preserve safe content', () => {
+ it('preserves auto-links', () => {
+ const input = 'Visit
for more info';
+ expect(wrapHTMLInCodeBlock(input)).toBe(input);
+ });
+
+ it('preserves email addresses', () => {
+ const input = 'Contact for help';
+ expect(wrapHTMLInCodeBlock(input)).toBe(input);
+ });
+
+ it('preserves TypeScript generics', () => {
+ const input = 'const arr: Array = []';
+ expect(wrapHTMLInCodeBlock(input)).toBe(input);
+ });
+
+ it('preserves existing code blocks', () => {
+ const input = `# Title
+
+\`\`\`javascript
+const x = "this is safe
";
+\`\`\`
+
+Normal text`;
+
+ expect(wrapHTMLInCodeBlock(input)).toBe(input);
+ });
+
+ it('preserves inline code', () => {
+ const input = 'Use `
` for line breaks';
+ expect(wrapHTMLInCodeBlock(input)).toBe(input);
+ });
+ });
+
+ describe('complex scenarios', () => {
+ it('handles multiple HTML lines correctly', () => {
+ const input = `# Test Message
+
+Normal paragraph
+
+First HTML line
+Second HTML line
+
+More normal text`;
+
+ const expected = `# Test Message
+
+Normal paragraph
+
+\`\`\`html
+First HTML line
+\`\`\`
+\`\`\`html
+Second HTML line
+\`\`\`
+
+More normal text`;
+
+ expect(wrapHTMLInCodeBlock(input)).toBe(expected);
+ });
+
+ it('respects existing code block boundaries', () => {
+ const input = `Before code block
+
+\`\`\`html
+This is already safe
+
+\`\`\`
+
+This should be wrapped
`;
+
+ const expected = `Before code block
+
+\`\`\`html
+This is already safe
+
+\`\`\`
+
+\`\`\`html
+This should be wrapped
+\`\`\``;
+
+ expect(wrapHTMLInCodeBlock(input)).toBe(expected);
+ });
+
+ it('handles the test suite scenarios', () => {
+ // Test Message 1: One-liners
+ const test1 = `
+
+\`\``;
+ expect(wrapHTMLInCodeBlock(test1)).toBe(test1);
+
+ // Test Message 2: Mixed content - our function wraps the entire line, not just the HTML part
+ const test2 = `Here's a link and HTML content
`;
+ const expected2 = `\`\`\`html
+Here's a link and HTML content
+\`\`\``;
+ expect(wrapHTMLInCodeBlock(test2)).toBe(expected2);
+
+ // Test Message 7: Comment-only
+ const test7 = ``;
+ const expected7 = `\`\`\`html
+
+\`\`\``;
+ expect(wrapHTMLInCodeBlock(test7)).toBe(expected7);
+ });
+ });
+
+ describe('edge cases', () => {
+ it('handles empty input', () => {
+ expect(wrapHTMLInCodeBlock('')).toBe('');
+ });
+
+ it('handles only whitespace', () => {
+ const input = ' \n \n ';
+ expect(wrapHTMLInCodeBlock(input)).toBe(input);
+ });
+
+ it('handles nested code block scenarios', () => {
+ const input = `\`\`\`
+safe in code block
+\`\`\`
+unsafe outside
+\`\`\`
+also safe in code block
+\`\`\``;
+
+ const expected = `\`\`\`
+safe in code block
+\`\`\`
+\`\`\`html
+unsafe outside
+\`\`\`
+\`\`\`
+also safe in code block
+\`\`\``;
+
+ expect(wrapHTMLInCodeBlock(input)).toBe(expected);
+ });
+ });
+ });
+});
diff --git a/ui/desktop/src/utils/htmlSecurity.ts b/ui/desktop/src/utils/htmlSecurity.ts
new file mode 100644
index 0000000000..c3a031a0fe
--- /dev/null
+++ b/ui/desktop/src/utils/htmlSecurity.ts
@@ -0,0 +1,59 @@
+/**
+ * HTML Security Detection Utilities
+ *
+ * These functions detect potentially dangerous HTML content in markdown
+ * and wrap it safely in code blocks to prevent execution.
+ */
+
+/**
+ * Detects if content contains potentially dangerous HTML
+ * @param str - The content to check
+ * @returns true if dangerous HTML is detected
+ */
+export function containsHTML(str: string): boolean {
+ // Remove fenced code blocks and inline code first
+ const withoutCodeBlocks = str.replace(/```[\s\S]*?```/g, '').replace(/`[^`]*`/g, '');
+
+ // Check for HTML comments first
+ const commentRegex = //;
+ const hasComments = commentRegex.test(withoutCodeBlocks);
+
+ // Only detect potentially dangerous HTML tags that could execute or affect layout
+ const dangerousHTMLRegex =
+ /<(script|style|iframe|object|embed|form|input|button|link|meta|base|br|hr|img|div|span|p|h[1-6]|a|strong|em|b|i|u|s|pre|code|blockquote|section|article|header|footer|nav|aside|main|table|tr|td|th|ul|ol|li)(?:\s[^>]*)?(?:\s*\/?>|>[^<]*<\/\1>)/i;
+ const hasDangerousHTML = dangerousHTMLRegex.test(withoutCodeBlocks);
+
+ return hasComments || hasDangerousHTML;
+}
+
+/**
+ * Wraps HTML content in code blocks for safe display
+ * @param content - The markdown content to process
+ * @returns Processed content with HTML wrapped in code blocks
+ */
+export function wrapHTMLInCodeBlock(content: string): string {
+ const lines = content.split('\n');
+ let insideCodeBlock = false;
+
+ const processedLines = lines.map((line) => {
+ // Track if we're inside a code block
+ if (line.trim().startsWith('```')) {
+ insideCodeBlock = !insideCodeBlock;
+ return line;
+ }
+
+ // If we're inside a code block, don't process the content - just leave it as-is
+ if (insideCodeBlock) {
+ return line;
+ }
+
+ // Only check for HTML in lines that are NOT inside code blocks
+ if (containsHTML(line)) {
+ return `\`\`\`html\n${line}\n\`\`\``;
+ }
+
+ return line;
+ });
+
+ return processedLines.join('\n');
+}
diff --git a/ui/desktop/vitest.config.ts b/ui/desktop/vitest.config.ts
new file mode 100644
index 0000000000..7a2965c12f
--- /dev/null
+++ b/ui/desktop/vitest.config.ts
@@ -0,0 +1,22 @@
+///
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'node:path'
+
+const cfg = {
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': resolve(__dirname, './src'),
+ },
+ },
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: ['./src/test/setup.ts'],
+ css: true,
+ include: ['src/**/*.{test,spec}.{js,jsx,ts,tsx}'],
+ },
+} satisfies Record
+
+export default defineConfig(cfg as any)