public/claude-code-proxy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Working version with openai

Browse source
This commit is contained in:
Seif Ghazi 2025-08-02 22:40:01 -04:00
parent 80a25f7ba7
commit 1e0173c768
No known key found for this signature in database
GPG key ID: 4519A4B1EEC1494E
11 changed files with 904 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

102
web/app/components/RequestDetailContent.tsx
View file

@ -29,6 +29,8 @@ interface Request {
method: string;
endpoint: string;
headers: Record<string, string[]>;
originalModel?: string;
routedModel?: string;
body?: {
model?: string;
messages?: Array<{
@ -150,7 +152,7 @@ export default function RequestDetailContent({ request, onGrade }: RequestDetail
<div className="flex items-center space-x-3">
<span className="text-gray-500 font-medium min-w-[80px]">Endpoint:</span>
<code className="text-blue-600 bg-blue-50 px-2 py-1 rounded font-mono text-xs border border-blue-200">
{request.endpoint}
{request.routedModel && request.routedModel.startsWith('gpt-') ? '/v1/chat/completions' : request.endpoint}
</code>
</div>
</div>
@ -329,12 +331,49 @@ export default function RequestDetailContent({ request, onGrade }: RequestDetail
</div>
</div>
{expandedSections.model && (
<div className="p-6">
<div className="grid grid-cols-2 gap-4">
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
<div className="text-xs text-gray-500 mb-1">Model</div>
<div className="text-sm font-medium text-gray-900">{request.body.model || 'N/A'}</div>
<div className="p-6 space-y-4">
{/* Model Routing Information */}
{request.routedModel && request.routedModel !== request.originalModel && (
<div className="bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-xl p-4">
<div className="flex items-center space-x-4">
<div className="flex-1">
<div className="flex items-center space-x-2 mb-2">
<span className="text-sm font-semibold text-purple-700">Requested Model</span>
<code className="text-xs bg-white px-2 py-1 rounded font-mono border border-purple-200">
{request.originalModel || request.body.model}
</code>
</div>
<div className="flex items-center space-x-3">
<div className="flex items-center space-x-2">
<ArrowLeftRight className="w-4 h-4 text-purple-600" />
<span className="text-xs text-purple-600 font-medium">Routed to</span>
</div>
<code className="text-sm bg-white px-3 py-1.5 rounded font-mono font-semibold border border-blue-200 text-blue-700">
{request.routedModel}
</code>
<span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full border border-blue-200">
{request.routedModel.startsWith('gpt-') ? 'OpenAI' : 'Anthropic'}
</span>
</div>
</div>
<div className="text-right">
<div className="text-xs text-gray-500 mb-1">Target Endpoint</div>
<code className="text-xs bg-white px-2 py-1 rounded font-mono border border-gray-200">
{request.routedModel.startsWith('gpt-') ? '/v1/chat/completions' : '/v1/messages'}
</code>
</div>
</div>
</div>
)}
{/* Model Parameters */}
<div className="grid grid-cols-2 gap-4">
{!request.routedModel || request.routedModel === request.originalModel ? (
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
<div className="text-xs text-gray-500 mb-1">Model</div>
<div className="text-sm font-medium text-gray-900">{request.originalModel || request.body.model || 'N/A'}</div>
</div>
) : null}
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
<div className="text-xs text-gray-500 mb-1">Max Tokens</div>
<div className="text-sm font-medium text-gray-900">
@ -619,6 +658,57 @@ function ResponseDetails({ response }: { response: NonNullable<Request['response
</div>
</div>
{/* Token Usage */}
{response.body?.usage && (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<Brain className="w-4 h-4 text-indigo-600" />
<span className="text-xs font-medium text-indigo-700">Input Tokens</span>
</div>
<div className="text-lg font-bold text-indigo-700">
{response.body.usage.input_tokens?.toLocaleString() || '0'}
</div>
<div className="text-xs text-indigo-700 opacity-75">Prompt</div>
</div>
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<MessageCircle className="w-4 h-4 text-emerald-600" />
<span className="text-xs font-medium text-emerald-700">Output Tokens</span>
</div>
<div className="text-lg font-bold text-emerald-700">
{response.body.usage.output_tokens?.toLocaleString() || '0'}
</div>
<div className="text-xs text-emerald-700 opacity-75">Response</div>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<Cpu className="w-4 h-4 text-amber-600" />
<span className="text-xs font-medium text-amber-700">Total Tokens</span>
</div>
<div className="text-lg font-bold text-amber-700">
{((response.body.usage.input_tokens || 0) + (response.body.usage.output_tokens || 0)).toLocaleString()}
</div>
<div className="text-xs text-amber-700 opacity-75">Combined</div>
</div>
{response.body.usage.cache_read_input_tokens && (
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<Bot className="w-4 h-4 text-green-600" />
<span className="text-xs font-medium text-green-700">Cached Tokens</span>
</div>
<div className="text-lg font-bold text-green-700">
{response.body.usage.cache_read_input_tokens.toLocaleString()}
</div>
<div className="text-xs text-green-700 opacity-75">From Cache</div>
</div>
)}
</div>
)}
{/* Response Headers */}
{response.headers && (
<div className="bg-gray-50 border border-gray-200 rounded-xl overflow-hidden">