Fix Copilot review issues and add tests

- Add quote escaping to escapeHtml in CodeViewer.tsx for XSS protection
- Fix string regex patterns to properly handle escaped quotes
- Use template literal for paragraph wrapping in formatLargeText
- Add vitest and tests for escapeHtml, formatLargeText, and string patterns

Author: ejc3

web/app/components/CodeViewer.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+
+// Test the escapeHtml and string regex patterns used in CodeViewer
+// We test the logic directly since the component uses internal functions
+
+describe('CodeViewer escapeHtml', () => {
+  // Replicate the escapeHtml function from CodeViewer
+  const escapeHtml = (str: string) => str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+
+  it('escapes double quotes for attribute safety', () => {
+    expect(escapeHtml('class="foo"')).toBe('class=&quot;foo&quot;');
+  });
+
+  it('escapes single quotes for attribute safety', () => {
+    expect(escapeHtml("class='foo'")).toBe("class=&#039;foo&#039;");
+  });
+
+  it('escapes HTML tags', () => {
+    expect(escapeHtml('<div>')).toBe('&lt;div&gt;');
+  });
+
+  it('escapes ampersands', () => {
+    expect(escapeHtml('a && b')).toBe('a &amp;&amp; b');
+  });
+});
+
+describe('CodeViewer string regex patterns', () => {
+  // Test the improved string patterns
+  const doubleQuotePattern = /"(?:[^"\\]|\\.)*"/;
+  const singleQuotePattern = /'(?:[^'\\]|\\.)*'/;
+  const backtickPattern = /`(?:[^`\\]|\\.)*`/;
+
+  describe('double-quoted strings', () => {
+    it('matches simple double-quoted strings', () => {
+      expect('"hello"'.match(doubleQuotePattern)?.[0]).toBe('"hello"');
+    });
+
+    it('matches strings with escaped quotes', () => {
+      expect('"He said \\"hello\\""'.match(doubleQuotePattern)?.[0]).toBe('"He said \\"hello\\""');
+    });
+
+    it('matches strings with escaped backslashes', () => {
+      expect('"path\\\\to\\\\file"'.match(doubleQuotePattern)?.[0]).toBe('"path\\\\to\\\\file"');
+    });
+
+    it('matches empty strings', () => {
+      expect('""'.match(doubleQuotePattern)?.[0]).toBe('""');
+    });
+  });
+
+  describe('single-quoted strings', () => {
+    it('matches simple single-quoted strings', () => {
+      expect("'hello'".match(singleQuotePattern)?.[0]).toBe("'hello'");
+    });
+
+    it('matches strings with escaped quotes', () => {
+      expect("'It\\'s fine'".match(singleQuotePattern)?.[0]).toBe("'It\\'s fine'");
+    });
+
+    it('matches empty strings', () => {
+      expect("''".match(singleQuotePattern)?.[0]).toBe("''");
+    });
+  });
+
+  describe('backtick strings', () => {
+    it('matches simple backtick strings', () => {
+      expect('`hello`'.match(backtickPattern)?.[0]).toBe('`hello`');
+    });
+
+    it('matches strings with escaped backticks', () => {
+      expect('`use \\`code\\``'.match(backtickPattern)?.[0]).toBe('`use \\`code\\``');
+    });
+
+    it('matches empty strings', () => {
+      expect('``'.match(backtickPattern)?.[0]).toBe('``');
+    });
+  });
+});

web/app/components/CodeViewer.tsx

@@ -88,12 +88,16 @@ export function CodeViewer({ code, fileName, language }: CodeViewerProps) {
     const escapeHtml = (str: string) => str
       .replace(/&/g, '&')
       .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
 
     // Define token patterns with priorities (first match wins)
     // Order matters: strings and comments first to avoid highlighting inside them
     const tokenPatterns = [
-      { regex: /(["'`])(?:(?=(\\?))\2.)*?\1/, className: 'text-green-400' },      // strings
+      { regex: /"(?:[^"\\]|\\.)*"/, className: 'text-green-400' },                 // double-quoted strings
+      { regex: /'(?:[^'\\]|\\.)*'/, className: 'text-green-400' },                 // single-quoted strings
+      { regex: /`(?:[^`\\]|\\.)*`/, className: 'text-green-400' },                 // backtick strings
       { regex: /\/\/.*$/, className: 'text-gray-500 italic' },                     // single-line comments
       { regex: /\/\*[\s\S]*?\*\//, className: 'text-gray-500 italic' },           // multi-line comments
       { regex: /#.*$/, className: 'text-gray-500 italic' },                        // hash comments

web/app/utils/formatters.test.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { escapeHtml, formatLargeText } from './formatters';
+
+describe('escapeHtml', () => {
+  it('escapes ampersands', () => {
+    expect(escapeHtml('a & b')).toBe('a & b');
+  });
+
+  it('escapes less than', () => {
+    expect(escapeHtml('a < b')).toBe('a &lt; b');
+  });
+
+  it('escapes greater than', () => {
+    expect(escapeHtml('a > b')).toBe('a &gt; b');
+  });
+
+  it('escapes double quotes', () => {
+    expect(escapeHtml('He said "hello"')).toBe('He said &quot;hello&quot;');
+  });
+
+  it('escapes single quotes', () => {
+    expect(escapeHtml("It's fine")).toBe("It&#039;s fine");
+  });
+
+  it('escapes all special characters together', () => {
+    expect(escapeHtml('<script>"alert(\'xss\')&"</script>')).toBe(
+      '&lt;script&gt;&quot;alert(&#039;xss&#039;)&amp;&quot;&lt;/script&gt;'
+    );
+  });
+});
+
+describe('formatLargeText', () => {
+  it('returns empty string for empty input', () => {
+    expect(formatLargeText('')).toBe('');
+  });
+
+  it('wraps simple text in paragraph tags', () => {
+    expect(formatLargeText('Hello world')).toBe('<p>Hello world</p>');
+  });
+
+  it('converts single newlines to br tags', () => {
+    expect(formatLargeText('Line1\nLine2')).toBe('<p>Line1<br>Line2</p>');
+  });
+
+  it('converts double newlines to paragraph breaks with proper nesting', () => {
+    const result = formatLargeText('Line1\n\nLine2');
+    expect(result).toBe('<p>Line1</p><p class="mt-3">Line2</p>');
+  });
+
+  it('handles multiple paragraph breaks correctly', () => {
+    const result = formatLargeText('Para1\n\nPara2\n\nPara3');
+    expect(result).toBe('<p>Para1</p><p class="mt-3">Para2</p><p class="mt-3">Para3</p>');
+  });
+
+  it('escapes HTML in the input', () => {
+    const result = formatLargeText('<script>alert("xss")</script>');
+    expect(result).toContain('&lt;script&gt;');
+    expect(result).not.toContain('<script>');
+  });
+
+  it('formats inline code with backticks', () => {
+    const result = formatLargeText('Use `code` here');
+    expect(result).toContain('<code');
+    expect(result).toContain('>code</code>');
+  });
+
+  it('formats bold text', () => {
+    const result = formatLargeText('This is **bold** text');
+    expect(result).toContain('<strong>bold</strong>');
+  });
+
+  it('formats italic text', () => {
+    const result = formatLargeText('This is *italic* text');
+    expect(result).toContain('<em>italic</em>');
+  });
+});

web/app/utils/formatters.ts

@@ -55,7 +55,7 @@ export function formatLargeText(text: string): string {
   const escaped = escapeHtml(text);
 
   // Simple, safe formatting - just handle line breaks and basic markdown
-  return escaped
+  const formatted = escaped
     // Preserve existing double line breaks as paragraph breaks
     .replace(/\n\n/g, '</p><p class="mt-3">')
     // Convert single line breaks to <br> tags
@@ -65,9 +65,10 @@ export function formatLargeText(text: string): string {
     // Format bold text
     .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
     // Format italic text
-    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-    // Wrap in paragraph
-    .replace(/^(.*)$/, '<p>$1</p>');
+    .replace(/\*([^*]+)\*/g, '<em>$1</em>');
+
+  // Wrap in paragraph tags
+  return `<p>${formatted}</p>`;
 }
 
 /**