github/ai-model-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete production-quality Model Router AI traffic control platform

Browse Source
This commit is contained in:
Vardhman Gupta
2026-08-31 17:33:38 +05:30
commit 4e6f742272
66 changed files with 8969 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/SettingsPage.tsx
+95
View File
@@ -0,0 +1,95 @@
import React, { useEffect, useState } from 'react';
import { Sliders, Shield, DollarSign, Cpu, CheckCircle } from 'lucide-react';
import { fetchApi } from '../lib/api';
export const SettingsPage: React.FC = () => {
const [budget, setBudget] = useState<{
daily_limit: number;
monthly_limit: number;
per_request_limit: number;
current_monthly_spend: number;
intervention_mode: string;
} | null>(null);
useEffect(() => {
fetchApi<any>('/api/budgets').then(setBudget).catch(console.error);
}, []);
return (
<div className="space-y-8 max-w-4xl mx-auto pb-16 font-mono">
<div className="border-b border-border-subtle pb-4">
<h2 className="text-xl font-bold text-text-primary tracking-wide flex items-center gap-2">
<Sliders className="w-5 h-5 text-accent-primary" />
SYSTEM CONFIGURATION & BUDGET GUARDS
</h2>
<p className="text-xs text-text-muted mt-1">
Configure daily and monthly spend limits, routing threshold interventions, and environment parameters.
</p>
</div>
{/* Budget Management */}
<div className="rounded-xl border border-border-subtle bg-bg-card p-6 space-y-4">
<div className="flex items-center justify-between border-b border-border-subtle pb-3">
<h3 className="text-xs font-bold text-text-primary uppercase tracking-wider flex items-center gap-2">
<DollarSign className="w-4 h-4 text-accent-success" />
Budget Thresholds & Automated Interventions
</h3>
<span className="text-[10px] px-2 py-0.5 rounded bg-accent-success/20 text-accent-success font-bold">
Intervention Mode: {budget?.intervention_mode || 'NORMAL'}
</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
<div className="p-3.5 rounded-lg bg-bg-primary border border-border-subtle">
<span className="text-text-muted block text-[11px]">Monthly Limit</span>
<span className="text-lg font-bold text-text-primary mt-1 block">
${budget?.monthly_limit?.toFixed(2) || '100.00'}
</span>
</div>
<div className="p-3.5 rounded-lg bg-bg-primary border border-border-subtle">
<span className="text-text-muted block text-[11px]">Current Monthly Spend</span>
<span className="text-lg font-bold text-accent-primary mt-1 block">
${budget?.current_monthly_spend?.toFixed(4) || '0.0000'}
</span>
</div>
<div className="p-3.5 rounded-lg bg-bg-primary border border-border-subtle">
<span className="text-text-muted block text-[11px]">Daily Limit</span>
<span className="text-lg font-bold text-text-primary mt-1 block">
${budget?.daily_limit?.toFixed(2) || '10.00'}
</span>
</div>
</div>
{/* Budget Intervention Legend */}
<div className="space-y-2 pt-2 text-[11px] text-text-muted">
<div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent-success" />
<span>&lt; 80% Budget: Standard balanced multi-criteria routing</span>
</div>
<div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent-secondary" />
<span>&gt;= 80% Budget: Cost optimization weighting enabled</span>
</div>
<div className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-accent-error" />
<span>&gt;= 95% Budget: Hard prefer local / zero-cost models</span>
</div>
</div>
</div>
{/* Security & Secrets */}
<div className="rounded-xl border border-border-subtle bg-bg-card p-6 space-y-4">
<h3 className="text-xs font-bold text-text-primary uppercase tracking-wider flex items-center gap-2">
<Shield className="w-4 h-4 text-accent-primary" />
Security Policy & Secrets Architecture
</h3>
<p className="text-xs text-text-muted leading-relaxed">
Model Router operates under a zero-secret-exposure contract. API tokens are stored only in environment files (<code className="text-text-primary">.env</code>), never stored as plain text in browser databases, and automatically redacted from server logs.
</p>
</div>
</div>
);
};