Fix code viewer syntax highlighting corruption

[ejc3]

Fixes HTML class attribute corruption in the code viewer.

The bug

The syntax highlighter was applying regex replacements sequentially, which caused later patterns to match content inside already-generated HTML class attributes. For example, "text-purple-400" would get matched by the number pattern, producing broken output like:

class="text-green-class="text-purple-400">400">"text"

The fix

Replaced sequential regex with a single-pass tokenizer that:

1. Matches all syntax patterns in one pass
2. Only applies highlighting to the matched tokens
3. Escapes HTML on matched content only

Also fixed escapeHtml in formatters.ts to not use document.createElement (fails in SSR).

Changes

• web/app/components/CodeViewer.tsx: Single-pass tokenizer for syntax highlighting
• web/app/utils/formatters.ts: SSR-safe HTML escaping

[Copilot]

Pull request overview

This PR fixes HTML class attribute corruption in the code viewer's syntax highlighting by replacing sequential regex replacements with a single-pass tokenizer. The issue occurred when later patterns matched content inside already-generated HTML attributes (e.g., matching "400" inside class="text-purple-400"). Additionally, the PR makes escapeHtml SSR-compatible by removing the document.createElement dependency.

Key changes:

• Single-pass tokenization prevents regex from matching inside generated HTML attributes
• SSR-safe HTML escaping using manual character replacement
• Simplified formatLargeText with reduced complexity (though with some issues identified)

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.

File	Description
web/app/utils/formatters.ts	Replaced DOM-based HTML escaping with SSR-compatible character replacement; simplified formatLargeText formatting logic
web/app/components/CodeViewer.tsx	Implemented single-pass tokenizer for syntax highlighting using combined regex pattern and iterative matching to prevent HTML corruption

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The final regex .replace(/^(.*)$/, '<p>$1</p>') will wrap the entire result in a single paragraph, creating malformed HTML. Since line 60 already adds </p><p class="mt-3"> for double line breaks, this will produce invalid nesting like <p>...</p><p class="mt-3">...</p>.

Instead, the formatting should either:

1. Split by double newlines first, wrap each section in <p> tags, then apply the other replacements
2. Or wrap the entire result in a container div without the final paragraph wrap

Example: Input "Line1\n\nLine2" will become:
<p>Line1</p><p class="mt-3">Line2<p> (missing closing tag and invalid nesting)

[Copilot]

The string regex pattern /(["'])(?:(?=(\?))\2.)*?\1/has a subtle issue. The backreference\2refers to capture group 2 (the optional backslash from(\?)`), but this creates a non-capturing lookahead that doesn't work as intended for matching escaped characters.

A more reliable pattern for strings would be:

• /"(?:[^"\\]|\\.)*"/ for double quotes
• /'(?:[^'\\]|\\.)*'/ for single quotes
• /(?:[^\\]|\\.)*/` for backticks

Or combine them: /(["'])(?:[^\1\\]|\.)*?\1/` (though backreferences in character classes aren't supported in JS regex)

The current pattern may fail on strings containing escaped quotes like "He said \"hello\"" or produce incorrect matches.

Suggested change

	{ 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-quoted strings

[Copilot]

The escapeHtml function is missing escaping for the " and ' characters, which are necessary for complete XSS protection especially when the escaped content might be used in HTML attribute contexts.

The function should also escape:

• " as "
• ' as ' or '

While this code viewer uses the escaped content in element text nodes (where quotes don't need escaping), maintaining consistency with the escapeHtml in formatters.ts (lines 44-45) would be safer and prevent future issues if the usage context changes.

Suggested change

	.replace(/>/g, '>');
	.replace(/>/g, '>')
	.replace(/"/g, '"')
	.replace(/'/g, ''');

[Copilot]

[nitpick] The combined regex pattern creates a large number of capture groups (8 patterns = 8 capture groups). For every match, all capture groups are checked in the loop (lines 125-130) even though only one will ever be defined.

Consider optimizing by using named capture groups or storing pattern indices to avoid the linear search:

const tokenPatterns = [
  { regex: /(["'`])(?:(?=(\\?))\2.)*?\1/, className: 'text-green-400', name: 'string' },
  // ... other patterns
];

// Then use a Map for O(1) lookup
const patternMap = new Map(tokenPatterns.map((p, i) => [i, p]));

Or simply store the result of the loop since you're already iterating through patterns when finding which matched.

[Copilot]

[nitpick] The non-null assertion operator ! is used on match.index which is guaranteed to be defined for successful matches from matchAll(). However, TypeScript's type definitions may not reflect this guarantee.

While this is technically safe, consider using nullish coalescing for better defensive programming:

if (match.index ?? 0 > lastIndex) {
  result += escapeHtml(code.slice(lastIndex, match.index ?? 0));
}

Or assert once at the start of the loop:

const index = match.index!;
if (index > lastIndex) {
  result += escapeHtml(code.slice(lastIndex, index));
}

[Copilot]

The number regex pattern /\b\d+\.?\d*\b/ will match numbers like "123." (trailing decimal point with no digits after). This is technically valid in some contexts but may not be intended.

Consider using /\b\d+(?:\.\d+)?\b/ which requires at least one digit after the decimal point, or /\b\d+\.?\d+\b|\b\d+\b/ to match either integers or proper decimals.

Examples of current behavior:

• "123." → matches (may be unintended)
• "123.456" → matches ✓
• "123" → matches ✓
• ".456" → no match ✓

Suggested change

	{ regex: /\b\d+\.?\d*\b/, className: 'text-purple-400' }, // numbers
	{ regex: /\b\d+(?:\.\d+)?\b/, className: 'text-purple-400' }, // numbers