')).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 f9f4aae6d..5f9cc4a3c 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 000000000..2d5ad0ec9
--- /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
+
+ )}
+
+
+
+
Tokens {dateLabel}
+
+ {formatTokens(processedStats.todayTokens)}
+ {processedStats.todayTokens >= 1000 && tokens}
+
+
+
+ {processedStats.todayRequests}
+ Requests
+
+
+ {(processedStats.avgResponseTime / 1000).toFixed(1)}s
+ Avg Time
+
+
+ {formatTokens(Math.round(processedStats.todayTokens / Math.max(processedStats.todayRequests, 1)))}
+ Avg/Request
+
+
+
+
+
+
+
{processedStats.weekLabel}
+
+
+ {formatTokens(processedStats.maxDayTokens)}
+ {formatTokens(Math.floor(processedStats.maxDayTokens / 2))}
+ 0
+
+
+ {processedStats.days.map((day, i) => {
+ // Calculate stacked heights for each model - check all possible model name variations
+ const modelKeys = Object.keys(day.models || {});
+ const opusTokens = modelKeys.find(k => k.includes('opus'))
+ ? (day.models[modelKeys.find(k => k.includes('opus'))!]?.tokens || 0)
+ : 0;
+ const sonnetTokens = modelKeys.find(k => k.includes('sonnet'))
+ ? (day.models[modelKeys.find(k => k.includes('sonnet'))!]?.tokens || 0)
+ : 0;
+ const haikuTokens = modelKeys.find(k => k.includes('haiku'))
+ ? (day.models[modelKeys.find(k => k.includes('haiku'))!]?.tokens || 0)
+ : 0;
+
+ const totalHeight = Math.max((day.tokens / processedStats.maxDayTokens) * 100, 4);
+ const opusHeight = day.tokens > 0 ? (opusTokens / day.tokens) * totalHeight : 0;
+ const sonnetHeight = day.tokens > 0 ? (sonnetTokens / day.tokens) * totalHeight : 0;
+ const haikuHeight = day.tokens > 0 ? (haikuTokens / day.tokens) * totalHeight : 0;
+
+ return (
+
setHoveredDay(i)}
+ onMouseLeave={() => setHoveredDay(null)}
+ >
+
+ {opusHeight > 0 && (
+
+ )}
+ {sonnetHeight > 0 && (
+
+ )}
+ {haikuHeight > 0 && (
+
+ )}
+
+ {hoveredDay === i && day.tokens > 0 && (
+
+
{day.dayName}
+ {opusTokens > 0 && (
+
+
+
Opus
+
{formatTokens(opusTokens)}
+
+ )}
+ {sonnetTokens > 0 && (
+
+
+
Sonnet
+
{formatTokens(sonnetTokens)}
+
+ )}
+ {haikuTokens > 0 && (
+
+
+
Haiku
+
{formatTokens(haikuTokens)}
+
+ )}
+
+ Total
+ {formatTokens(day.tokens)}
+
+
+ )}
+
{day.dayName}
+
+ );
+ })}
+ {/* Average line */}
+ {processedStats.avgDayTokens > 0 && (
+
+ avg
+
+ )}
+
+
+
+
+
+
Today by Hour
+
+
+ {formatTokens(processedStats.maxHourTokens)}
+ {formatTokens(Math.floor(processedStats.maxHourTokens / 2))}
+ 0
+
+
+
+ {processedStats.hours.map((hour, i) => {
+ // Calculate stacked heights for each model - check all possible model name variations
+ const modelKeys = Object.keys(hour.models || {});
+ const opusTokens = modelKeys.find(k => k.includes('opus'))
+ ? (hour.models[modelKeys.find(k => k.includes('opus'))!]?.tokens || 0)
+ : 0;
+ const sonnetTokens = modelKeys.find(k => k.includes('sonnet'))
+ ? (hour.models[modelKeys.find(k => k.includes('sonnet'))!]?.tokens || 0)
+ : 0;
+ const haikuTokens = modelKeys.find(k => k.includes('haiku'))
+ ? (hour.models[modelKeys.find(k => k.includes('haiku'))!]?.tokens || 0)
+ : 0;
+
+ const totalHeight = Math.max((hour.tokens / processedStats.maxHourTokens) * 100, 3);
+ const opusHeight = hour.tokens > 0 ? (opusTokens / hour.tokens) * totalHeight : 0;
+ const sonnetHeight = hour.tokens > 0 ? (sonnetTokens / hour.tokens) * totalHeight : 0;
+ const haikuHeight = hour.tokens > 0 ? (haikuTokens / hour.tokens) * totalHeight : 0;
+
+ const hourLabel = i === 0 ? '12 AM' : i === 12 ? '12 PM' : i < 12 ? `${i} AM` : `${i - 12} PM`;
+
+ return (
+
setHoveredHour(i)}
+ onMouseLeave={() => setHoveredHour(null)}
+ >
+
+ {opusHeight > 0 && (
+
+ )}
+ {sonnetHeight > 0 && (
+
+ )}
+ {haikuHeight > 0 && (
+
+ )}
+
+ {hoveredHour === i && hour.tokens > 0 && (
+
+
{hourLabel}
+ {opusTokens > 0 && (
+
+
+
Opus
+
{formatTokens(opusTokens)}
+
+ )}
+ {sonnetTokens > 0 && (
+
+
+
Sonnet
+
{formatTokens(sonnetTokens)}
+
+ )}
+ {haikuTokens > 0 && (
+
+
+
Haiku
+
{formatTokens(haikuTokens)}
+
+ )}
+
+ Total
+ {formatTokens(hour.tokens)}
+
+
+ )}
+
+ );
+ })}
+ {/* "Now" indicator line */}
+ {processedStats.currentTimePosition !== null && (
+
+ )}
+
+
+ 12 AM
+ 6 AM
+ 12 PM
+ 6 PM
+
+
+
+
+
+
+
+
Models
+ {processedStats.models.map((model, i) => (
+
+
+ {model.displayName}
+ {formatTokens(model.tokens)}
+
+
+
+ ))}
+
+
+
{/* Header */}
@@ -516,6 +729,19 @@ export default function Index() {
Claude Code Monitor
+ {viewMode === "requests" && (
+
+ )}