')).toBe('<div>');
+ });
+
+ it('escapes ampersands', () => {
+ expect(escapeHtml('a && b')).toBe('a && 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('``');
+ });
+ });
+});
diff --git a/web/app/components/CodeViewer.tsx b/web/app/components/CodeViewer.tsx
index f9f4aae..5f9cc4a 100644
--- a/web/app/components/CodeViewer.tsx
+++ b/web/app/components/CodeViewer.tsx
@@ -82,39 +82,68 @@ export function CodeViewer({ code, fileName, language }: CodeViewerProps) {
const detectedLanguage = language || getLanguageFromFileName(fileName);
- // Basic syntax highlighting for common tokens
+ // Single-pass syntax highlighting to avoid corrupting HTML class attributes
const highlightCode = (code: string): string => {
- // Escape HTML
- let highlighted = code
+ // Escape HTML helper
+ const escapeHtml = (str: string) => str
.replace(/&/g, '&')
.replace(//g, '>');
-
- // Common patterns for many languages
- const patterns = [
- // Strings
- { regex: /(["'`])(?:(?=(\\?))\2.)*?\1/g, class: 'text-green-400' },
- // Comments
- { regex: /(\/\/.*$)/gm, class: 'text-gray-500 italic' },
- { regex: /(\/\*[\s\S]*?\*\/)/g, class: 'text-gray-500 italic' },
- { regex: /(#.*$)/gm, class: 'text-gray-500 italic' },
- // Numbers
- { regex: /\b(\d+\.?\d*)\b/g, class: 'text-purple-400' },
- // Keywords (common across many languages)
- { regex: /\b(function|const|let|var|if|else|for|while|return|class|import|export|from|async|await|def|elif|except|finally|lambda|with|as|raise|del|global|nonlocal|assert|break|continue|try|catch|throw|new|this|super|extends|implements|interface|abstract|static|public|private|protected|void|int|string|boolean|float|double|char|long|short|byte|enum|struct|typedef|union|namespace|using|package|goto|switch|case|default)\b/g, class: 'text-blue-400' },
- // Boolean and null values
- { regex: /\b(true|false|null|undefined|nil|None|True|False)\b/g, class: 'text-orange-400' },
- // Function calls (basic)
- { regex: /(\w+)(?=\s*\()/g, class: 'text-yellow-400' },
- // Types/Classes (PascalCase)
- { regex: /\b([A-Z][a-zA-Z0-9]*)\b/g, class: 'text-cyan-400' },
+ .replace(/>/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+
+ // Define token patterns with priorities (first match wins)
+ // Order matters: strings and comments first to avoid highlighting inside them
+ const tokenPatterns = [
+ { 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
+ { regex: /\b(function|const|let|var|if|else|for|while|return|class|import|export|from|async|await|def|elif|except|finally|lambda|with|as|raise|del|global|nonlocal|assert|break|continue|try|catch|throw|new|this|super|extends|implements|interface|abstract|static|public|private|protected|void|int|string|boolean|float|double|char|long|short|byte|enum|struct|typedef|union|namespace|using|package|goto|switch|case|default|fn|pub|mod|use|mut|match|loop|impl|trait|where|type|readonly|override)\b/, className: 'text-blue-400' }, // keywords
+ { regex: /\b(true|false|null|undefined|nil|None|True|False|NULL)\b/, className: 'text-orange-400' }, // literals
+ { regex: /\b\d+\.?\d*\b/, className: 'text-purple-400' }, // numbers
+ { regex: /\b[A-Z][a-zA-Z0-9]*\b/, className: 'text-cyan-400' }, // PascalCase (types/classes)
];
- patterns.forEach(({ regex, class: className }) => {
- highlighted = highlighted.replace(regex, `
$&`);
- });
+ // Build a combined regex that matches any token
+ const combinedPattern = new RegExp(
+ tokenPatterns.map(p => `(${p.regex.source})`).join('|'),
+ 'gm'
+ );
+
+ let result = '';
+ let lastIndex = 0;
+
+ // Single pass through the string
+ for (const match of code.matchAll(combinedPattern)) {
+ // Add non-matched text before this match (escaped)
+ if (match.index! > lastIndex) {
+ result += escapeHtml(code.slice(lastIndex, match.index));
+ }
+
+ // Find which pattern matched (first non-undefined capture group)
+ const matchedText = match[0];
+ let className = '';
+ for (let i = 0; i < tokenPatterns.length; i++) {
+ if (match[i + 1] !== undefined) {
+ className = tokenPatterns[i].className;
+ break;
+ }
+ }
+
+ // Add the highlighted token (escape the matched text too)
+ result += `
${escapeHtml(matchedText)}`;
+ lastIndex = match.index! + matchedText.length;
+ }
+
+ // Add remaining text after last match
+ if (lastIndex < code.length) {
+ result += escapeHtml(code.slice(lastIndex));
+ }
- return highlighted;
+ return result;
};
const handleCopy = async () => {
diff --git a/web/app/components/RequestCompareModal.tsx b/web/app/components/RequestCompareModal.tsx
new file mode 100644
index 0000000..2d5ad0e
--- /dev/null
+++ b/web/app/components/RequestCompareModal.tsx
@@ -0,0 +1,1152 @@
+import { useState, useMemo } from 'react';
+import {
+ X,
+ GitCompare,
+ Plus,
+ Minus,
+ Equal,
+ ChevronDown,
+ ChevronRight,
+ MessageCircle,
+ User,
+ Bot,
+ Settings,
+ Clock,
+ Cpu,
+ Brain,
+ ArrowRight,
+ List,
+ FileText,
+ Download
+} from 'lucide-react';
+import { MessageContent } from './MessageContent';
+
+interface Message {
+ role: string;
+ content: any;
+}
+
+interface Request {
+ id: number;
+ timestamp: string;
+ method: string;
+ endpoint: string;
+ headers: Record
;
+ originalModel?: string;
+ routedModel?: string;
+ body?: {
+ model?: string;
+ messages?: Message[];
+ system?: Array<{
+ text: string;
+ type: string;
+ cache_control?: { type: string };
+ }>;
+ tools?: Array<{
+ name: string;
+ description: string;
+ input_schema?: any;
+ }>;
+ max_tokens?: number;
+ temperature?: number;
+ stream?: boolean;
+ };
+ response?: {
+ statusCode: number;
+ headers: Record;
+ body?: any;
+ bodyText?: string;
+ responseTime: number;
+ streamingChunks?: string[];
+ isStreaming: boolean;
+ completedAt: string;
+ };
+}
+
+interface RequestCompareModalProps {
+ request1: Request;
+ request2: Request;
+ onClose: () => void;
+}
+
+type DiffType = 'added' | 'removed' | 'unchanged' | 'modified';
+
+interface MessageDiff {
+ type: DiffType;
+ index1?: number;
+ index2?: number;
+ message1?: Message;
+ message2?: Message;
+}
+
+// Extract text content from a message for comparison
+function getMessageText(content: any): string {
+ if (typeof content === 'string') {
+ return content;
+ }
+ if (Array.isArray(content)) {
+ return content
+ .map(block => {
+ if (typeof block === 'string') return block;
+ if (block.type === 'text') return block.text || '';
+ if (block.type === 'tool_use') return `[Tool: ${block.name}]`;
+ if (block.type === 'tool_result') return `[Tool Result: ${block.tool_use_id}]`;
+ return JSON.stringify(block);
+ })
+ .join('\n');
+ }
+ return JSON.stringify(content);
+}
+
+// Compare two messages to see if they're similar
+function messagesAreSimilar(msg1: Message, msg2: Message): boolean {
+ if (msg1.role !== msg2.role) return false;
+ const text1 = getMessageText(msg1.content);
+ const text2 = getMessageText(msg2.content);
+ // Consider messages similar if they share >80% of content
+ const shorter = Math.min(text1.length, text2.length);
+ const longer = Math.max(text1.length, text2.length);
+ if (longer === 0) return true;
+ if (shorter / longer < 0.5) return false;
+ // Simple check: if one is a prefix of the other or they're equal
+ return text1 === text2 || text1.startsWith(text2.slice(0, 100)) || text2.startsWith(text1.slice(0, 100));
+}
+
+// Compute diff between two message arrays
+function computeMessageDiff(messages1: Message[], messages2: Message[]): MessageDiff[] {
+ const diffs: MessageDiff[] = [];
+ let i = 0;
+ let j = 0;
+
+ while (i < messages1.length || j < messages2.length) {
+ if (i >= messages1.length) {
+ // All remaining messages in request2 are additions
+ diffs.push({
+ type: 'added',
+ index2: j,
+ message2: messages2[j]
+ });
+ j++;
+ } else if (j >= messages2.length) {
+ // All remaining messages in request1 are removals
+ diffs.push({
+ type: 'removed',
+ index1: i,
+ message1: messages1[i]
+ });
+ i++;
+ } else if (messagesAreSimilar(messages1[i], messages2[j])) {
+ // Messages match
+ const text1 = getMessageText(messages1[i].content);
+ const text2 = getMessageText(messages2[j].content);
+ diffs.push({
+ type: text1 === text2 ? 'unchanged' : 'modified',
+ index1: i,
+ index2: j,
+ message1: messages1[i],
+ message2: messages2[j]
+ });
+ i++;
+ j++;
+ } else {
+ // Look ahead to find a match
+ let foundMatch = false;
+
+ // Check if messages1[i] matches something ahead in messages2
+ for (let k = j + 1; k < Math.min(j + 5, messages2.length); k++) {
+ if (messagesAreSimilar(messages1[i], messages2[k])) {
+ // messages2[j..k-1] are additions
+ for (let l = j; l < k; l++) {
+ diffs.push({
+ type: 'added',
+ index2: l,
+ message2: messages2[l]
+ });
+ }
+ j = k;
+ foundMatch = true;
+ break;
+ }
+ }
+
+ if (!foundMatch) {
+ // Check if messages2[j] matches something ahead in messages1
+ for (let k = i + 1; k < Math.min(i + 5, messages1.length); k++) {
+ if (messagesAreSimilar(messages1[k], messages2[j])) {
+ // messages1[i..k-1] are removals
+ for (let l = i; l < k; l++) {
+ diffs.push({
+ type: 'removed',
+ index1: l,
+ message1: messages1[l]
+ });
+ }
+ i = k;
+ foundMatch = true;
+ break;
+ }
+ }
+ }
+
+ if (!foundMatch) {
+ // No match found, treat as removal then addition
+ diffs.push({
+ type: 'removed',
+ index1: i,
+ message1: messages1[i]
+ });
+ i++;
+ }
+ }
+ }
+
+ return diffs;
+}
+
+export function RequestCompareModal({ request1, request2, onClose }: RequestCompareModalProps) {
+ const [viewMode, setViewMode] = useState<'structured' | 'diff'>('structured');
+ const [expandedSections, setExpandedSections] = useState>({
+ summary: true,
+ messages: true,
+ system: false,
+ tools: false
+ });
+
+ const toggleSection = (section: string) => {
+ setExpandedSections(prev => ({
+ ...prev,
+ [section]: !prev[section]
+ }));
+ };
+
+ const messages1 = request1.body?.messages || [];
+ const messages2 = request2.body?.messages || [];
+
+ const messageDiffs = useMemo(() => computeMessageDiff(messages1, messages2), [messages1, messages2]);
+
+ const diffStats = useMemo(() => {
+ const stats = {
+ added: 0,
+ removed: 0,
+ modified: 0,
+ unchanged: 0
+ };
+ messageDiffs.forEach(diff => {
+ stats[diff.type]++;
+ });
+ return stats;
+ }, [messageDiffs]);
+
+ const getModelDisplay = (request: Request) => {
+ const model = request.routedModel || request.body?.model || 'Unknown';
+ if (model.includes('opus')) return { name: 'Opus', color: 'text-purple-600' };
+ if (model.includes('sonnet')) return { name: 'Sonnet', color: 'text-indigo-600' };
+ if (model.includes('haiku')) return { name: 'Haiku', color: 'text-teal-600' };
+ return { name: model, color: 'text-gray-600' };
+ };
+
+ const model1 = getModelDisplay(request1);
+ const model2 = getModelDisplay(request2);
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+
Compare Requests
+
+
{model1.name}
+
+
{model2.name}
+
+
+
+ {/* View mode toggle */}
+
+
+
+
+
+
+
+
+
+ {/* Content */}
+
+ {viewMode === 'diff' ? (
+
+ ) : (
+ <>
+ {/* Summary Section */}
+
+
toggleSection('summary')}
+ >
+
+
+
+ Comparison Summary
+
+ {expandedSections.summary ? (
+
+ ) : (
+
+ )}
+
+
+ {expandedSections.summary && (
+
+ {/* Stats */}
+
+
+
+
+
+ {diffStats.removed}
+
+
Removed
+
+
+
+
+ {diffStats.modified}
+
+
Modified
+
+
+
+
+ {diffStats.unchanged}
+
+
Unchanged
+
+
+
+ {/* Request comparison */}
+
+
+
+
+
+ )}
+
+
+ {/* Messages Diff Section */}
+
+
toggleSection('messages')}
+ >
+
+
+
+ Message Differences
+
+ {messages1.length} vs {messages2.length} messages
+
+
+ {expandedSections.messages ? (
+
+ ) : (
+
+ )}
+
+
+ {expandedSections.messages && (
+
+ {messageDiffs.length === 0 ? (
+
+
+
No messages to compare
+
+ ) : (
+ messageDiffs.map((diff, index) => (
+
+ ))
+ )}
+
+ )}
+
+
+ {/* System Prompts Comparison */}
+ {(request1.body?.system || request2.body?.system) && (
+
+
toggleSection('system')}
+ >
+
+
+
+ System Prompts
+
+ {request1.body?.system?.length || 0} vs {request2.body?.system?.length || 0}
+
+
+ {expandedSections.system ? (
+
+ ) : (
+
+ )}
+
+
+ {expandedSections.system && (
+
+
+
+
Request #1
+ {request1.body?.system?.map((sys, i) => (
+
+
+ {sys.text.slice(0, 500)}{sys.text.length > 500 ? '...' : ''}
+
+
+ )) ||
No system prompt
}
+
+
+
Request #2
+ {request2.body?.system?.map((sys, i) => (
+
+
+ {sys.text.slice(0, 500)}{sys.text.length > 500 ? '...' : ''}
+
+
+ )) ||
No system prompt
}
+
+
+
+ )}
+
+ )}
+
+ {/* Tools Comparison */}
+ {(request1.body?.tools || request2.body?.tools) && (
+
+
toggleSection('tools')}
+ >
+
+
+
+ Available Tools
+
+ {request1.body?.tools?.length || 0} vs {request2.body?.tools?.length || 0}
+
+
+ {expandedSections.tools ? (
+
+ ) : (
+
+ )}
+
+
+ {expandedSections.tools && (
+
+
+
+ )}
+
+ )}
+
+ )}
+
+
+
+
+
+
+
+ Text Diff
+
+
+
+{stats.added} added
+
-{stats.removed} removed
+
{stats.same} unchanged
+
+
+
+
+
+
+
+
+
+
+
+ {diff.map((item, idx) => (
+
+ |
+ {item.lineNum1 || ''}
+ |
+
+ {item.lineNum2 || ''}
+ |
+
+ {item.type === 'added' && +}
+ {item.type === 'removed' && -}
+ |
+
+ {item.line || '\u00A0'}
+ |
+
+ ))}
+
+
+
+
+
+
{label}
+
+
+
+
+
+
+
+ Model:
+ {model.split('-').slice(-1)[0] || model}
+
+
+ Input Tokens:
+ {inputTokens.toLocaleString()}
+
+
+ Output Tokens:
+ {outputTokens.toLocaleString()}
+
+ {cacheRead > 0 && (
+
+ Cache Read:
+ {cacheRead.toLocaleString()}
+
+ )}
+ {cacheCreation > 0 && (
+
+ Cache Creation:
+ {cacheCreation.toLocaleString()}
+
+ )}
+
+
Size Breakdown
+
+ System Prompt:
+ {formatSize(systemSize)}
+
+
+ Tools ({request.body?.tools?.length || 0}):
+ {formatSize(toolsSize)}
+
+
+ Messages ({request.body?.messages?.length || 0}):
+ {formatSize(messagesSize)}
+
+
+ Total:
+ {formatSize(totalSize)}
+
+
+
+ Response Time:
+ {((request.response?.responseTime || 0) / 1000).toFixed(2)}s
+
+
+ Timestamp:
+ {new Date(request.timestamp).toLocaleString()}
+
+
+
+
setExpanded(!expanded)}
+ >
+
+ {styles.icon}
+
+
+
+
{role}
+
+ {styles.label}
+
+ {diff.index1 !== undefined && (
+
#{diff.index1 + 1}
+ )}
+ {diff.index2 !== undefined && diff.index1 !== diff.index2 && (
+
+ {diff.index1 !== undefined ? ` → #${diff.index2 + 1}` : `#${diff.index2 + 1}`}
+
+ )}
+
+ {getMessageSize(diff.message1 || diff.message2)}
+
+
+ {expanded ? (
+
+ ) : (
+
+ )}
+
+ {expanded && (
+
+ {diff.type === 'modified' ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ {added.length > 0 && (
+
+
+
+ Added Tools ({added.length})
+
+
+ {added.map((tool, i) => (
+
+ {tool.name}
+
+ ))}
+
+
+ )}
+ {removed.length > 0 && (
+
+
+
+ Removed Tools ({removed.length})
+
+
+ {removed.map((tool, i) => (
+
+ {tool.name}
+
+ ))}
+
+
+ )}
+ {common.length > 0 && (
+
+
+
+ Common Tools ({common.length})
+
+
+ {common.map((tool, i) => (
+
+ {tool.name}
+
+ ))}
+
+
+ )}
+ {tools1.length === 0 && tools2.length === 0 && (
+
+
+
No tools defined in either request
+
+ )}
+
Claude Code Monitor