Merge pull request #88 from liubchigo/main

rajbos · web-flow · commit 0e346308f07b · 2025-08-12T20:11:37.000+02:00
✨Add info on model and limits
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import { Separator } from "@/components/ui/separator";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tooltip as UITooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { DeploymentFooter } from "@/components/DeploymentFooter";
 import { 
@@ -26,6 +27,7 @@ import {
   getDailyModelData,
   getPowerUsers,
   getPowerUserDailyData,
+  COPILOT_PLANS,
   getPowerUserDailyBreakdown,
   getLastDateFromData
 } from "@/lib/utils";
@@ -41,6 +43,7 @@ function App() {
   const [selectedPowerUser, setSelectedPowerUser] = useState<string | null>(null);
   const [lastDateAvailable, setLastDateAvailable] = useState<string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState<string>(COPILOT_PLANS.BUSINESS); // Default to Business
   const [isProcessing, setIsProcessing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   
@@ -316,6 +319,27 @@ function App() {
     }, {} as Record<string, string>);
   }, [uniqueModels]);
 
+  // Helper function to get plan limit based on selected plan
+  const getPlanLimit = useCallback((item: ModelUsageSummary) => {
+    let limit: number;
+    switch (selectedPlan) {
+      case COPILOT_PLANS.INDIVIDUAL:
+        limit = item.individualPlanLimit;
+        break;
+      case COPILOT_PLANS.BUSINESS:
+        limit = item.businessPlanLimit;
+        break;
+      case COPILOT_PLANS.ENTERPRISE:
+        limit = item.enterprisePlanLimit;
+        break;
+      default:
+        limit = item.businessPlanLimit;
+    }
+    
+    // For 0x multiplier models, show "Unlimited" despite having constant plan limits
+    return item.multiplier === 0 ? "Unlimited" : limit.toLocaleString();
+  }, [selectedPlan]);
+
   return (
     <div className="container max-w-7xl mx-auto py-8 px-4 min-h-screen">
       <header className="mb-8">
@@ -672,7 +696,22 @@ function App() {
             {/* Model Usage Table */}
             <div className="mb-6">
               <Card className="p-5">
-                <h3 className="text-md font-medium mb-3">Requests per Model</h3>
+                <div className="flex items-center justify-between mb-3">
+                  <h3 className="text-md font-medium">Requests per Model</h3>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">Plan Type:</span>
+                    <Select value={selectedPlan} onValueChange={setSelectedPlan}>
+                      <SelectTrigger className="w-32">
+                        <SelectValue placeholder="Select plan" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value={COPILOT_PLANS.INDIVIDUAL}>Individual</SelectItem>
+                        <SelectItem value={COPILOT_PLANS.BUSINESS}>Business</SelectItem>
+                        <SelectItem value={COPILOT_PLANS.ENTERPRISE}>Enterprise</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
                 <div className="overflow-auto max-h-60">
                   <Table>
                     <TableHeader>
@@ -681,6 +720,9 @@ function App() {
                         <TableHead className="text-right">Total Requests</TableHead>
                         <TableHead className="text-right">Compliant</TableHead>
                         <TableHead className="text-right">Exceeding</TableHead>
+                        <TableHead className="text-right">Multiplier</TableHead>
+                        <TableHead className="text-right">Plan Limit</TableHead>
+                        <TableHead className="text-right">Excess Cost</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
@@ -690,6 +732,32 @@ function App() {
                           <TableCell className="text-right">{item.totalRequests.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 0})}</TableCell>
                           <TableCell className="text-right">{item.compliantRequests.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 0})}</TableCell>
                           <TableCell className="text-right">{item.exceedingRequests.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 0})}</TableCell>
+                          <TableCell className="text-right">{item.multiplier}x</TableCell>
+                          <TableCell className="text-right">{getPlanLimit(item)}</TableCell>
+                          <TableCell className="text-right">${item.excessCost.toFixed(2)}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              </Card>
+            </div>
+            
+            {/* Models List Card */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
+              <Card className="p-5">
+                <h3 className="text-md font-medium mb-3">Models List</h3>
+                <div className="overflow-auto max-h-60">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Model Name</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {uniqueModels.map((model) => (
+                        <TableRow key={model}>
+                          <TableCell>{model}</TableCell>
                         </TableRow>
                       ))}
                     </TableBody>
@@ -772,7 +840,6 @@ function App() {
                     stroke="#10b981" 
                     strokeWidth={2}
                     activeDot={{ r: 6 }}
-                    stackId="1"
                   />
                   <Line
                     key="exceeding"
@@ -782,7 +849,6 @@ function App() {
                     stroke="#ef4444" 
                     strokeWidth={2}
                     activeDot={{ r: 6 }}
-                    stackId="1"
                   />
                 </LineChart>
               </ChartContainer>
@@ -800,7 +866,10 @@ function App() {
             <Separator className="mb-6" />
             <div className="bg-card p-4 rounded-lg border">
               <ChartContainer 
-                config={getModelColors()}
+                config={Object.entries(getModelColors()).reduce((acc, [model, color]) => {
+                  acc[model] = { color };
+                  return acc;
+                }, {} as Record<string, { color: string }>)}
                 className="h-[500px] w-full"
               >
                 <BarChart data={barChartData()}>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -122,9 +122,15 @@ export function parseCSV(csv: string): CopilotUsageData[] {
 
 export interface ModelUsageSummary {
   model: string;
+  displayName: string; // For grouping default models
   totalRequests: number;
   compliantRequests: number;
   exceedingRequests: number;
+  multiplier: number;
+  individualPlanLimit: number;
+  businessPlanLimit: number;
+  enterprisePlanLimit: number;
+  excessCost: number; // Cost for exceeding requests
 }
 
 export interface DailyModelData {
@@ -168,11 +174,20 @@ export function getModelUsageSummary(data: CopilotUsageData[]): ModelUsageSummar
   
   data.forEach(item => {
     if (!summary[item.model]) {
+      const multiplier = MODEL_MULTIPLIERS[item.model] || 1;
+      const displayName = DEFAULT_MODELS.includes(item.model) ? 'Default' : item.model;
+      
       summary[item.model] = {
         model: item.model,
+        displayName,
         totalRequests: 0,
         compliantRequests: 0,
-        exceedingRequests: 0
+        exceedingRequests: 0,
+        multiplier,
+        individualPlanLimit: PLAN_MONTHLY_LIMITS[COPILOT_PLANS.INDIVIDUAL],
+        businessPlanLimit: PLAN_MONTHLY_LIMITS[COPILOT_PLANS.BUSINESS],
+        enterprisePlanLimit: PLAN_MONTHLY_LIMITS[COPILOT_PLANS.ENTERPRISE],
+        excessCost: 0
       };
     }
     
@@ -185,8 +200,39 @@ export function getModelUsageSummary(data: CopilotUsageData[]): ModelUsageSummar
     }
   });
   
+  // Calculate excess costs and group default models
+  const summaryArray = Object.values(summary);
+  const groupedSummary: Record<string, ModelUsageSummary> = {};
+  
+  summaryArray.forEach(item => {
+    const key = item.displayName;
+    
+    if (!groupedSummary[key]) {
+      groupedSummary[key] = {
+        ...item,
+        model: key === 'Default' ? 'Default (GPT-4o, GPT-4.1)' : item.model
+      };
+    } else {
+      // Merge default models
+      groupedSummary[key].totalRequests += item.totalRequests;
+      groupedSummary[key].compliantRequests += item.compliantRequests;
+      groupedSummary[key].exceedingRequests += item.exceedingRequests;
+    }
+    
+    // For grouped default models, ensure multiplier is 0 and limits use constant values
+    if (key === 'Default') {
+      groupedSummary[key].multiplier = 0;
+      groupedSummary[key].individualPlanLimit = PLAN_MONTHLY_LIMITS[COPILOT_PLANS.INDIVIDUAL];
+      groupedSummary[key].businessPlanLimit = PLAN_MONTHLY_LIMITS[COPILOT_PLANS.BUSINESS];
+      groupedSummary[key].enterprisePlanLimit = PLAN_MONTHLY_LIMITS[COPILOT_PLANS.ENTERPRISE];
+    }
+    
+    // Calculate excess cost
+    groupedSummary[key].excessCost = groupedSummary[key].exceedingRequests * groupedSummary[key].multiplier * EXCESS_REQUEST_COST;
+  });
+  
   // Convert to array and sort by total requests (descending)
-  return Object.values(summary).sort((a, b) => b.totalRequests - a.totalRequests);
+  return Object.values(groupedSummary).sort((a, b) => b.totalRequests - a.totalRequests);
 }
 
 export function getDailyModelData(data: CopilotUsageData[]): DailyModelData[] {
@@ -241,6 +287,55 @@ export interface PowerUserDailyBreakdown {
 
 
 
+// Copilot plan constants
+export const COPILOT_PLANS = {
+  INDIVIDUAL: 'Individual',
+  BUSINESS: 'Business', 
+  ENTERPRISE: 'Enterprise'
+} as const;
+
+export const PLAN_MONTHLY_LIMITS = {
+  [COPILOT_PLANS.INDIVIDUAL]: 50,
+  [COPILOT_PLANS.BUSINESS]: 300,
+  [COPILOT_PLANS.ENTERPRISE]: 1000
+} as const;
+
+// Model multipliers based on GitHub documentation (for paid plans)
+export const MODEL_MULTIPLIERS: Record<string, number> = {
+  // Default models (0x multiplier for paid plans)
+  'gpt-4o-2024-11-20': 0,
+  'gpt-4.1-2025-04-14': 0,
+  'gpt-4o': 0,
+  'gpt-4.1': 0,
+  // GPT-4.5 models
+  'gpt-4.5': 50,
+  // Vision models
+  'gpt-4.1-vision': 0,
+  // Claude models
+  'claude-sonnet-3.5': 1,
+  'claude-sonnet-3.7': 1,
+  'claude-sonnet-3.7-thinking': 1.25,
+  'claude-sonnet-4': 1,
+  'claude-opus-4': 10,
+  // Gemini models
+  'gemini-2.0-flash': 0.25,
+  'gemini-2.5-pro': 1,
+  // O-series models
+  'o1': 10,
+  'o3': 1,
+  'o3-mini': 0.33,
+  'o3-mini-2025-01-31': 0.33,
+  'o4-mini': 0.33,
+  'o4-mini-2025-04-16': 0.33,
+  // Add other models as needed - fallback to 1x for unknown models
+};
+
+// Default models that should be grouped
+export const DEFAULT_MODELS = ['gpt-4o-2024-11-20', 'gpt-4.1-2025-04-14'];
+
+// Cost per excess request (in USD) for premium requests
+export const EXCESS_REQUEST_COST = 0.04; // $0.04 per excess request
+
 export function getPowerUsers(data: CopilotUsageData[]): PowerUserSummary {
   // First, aggregate total requests per user
   const userTotals: Record<string, number> = {};
diff --git a/src/test/model-info-limits.test.ts b/src/test/model-info-limits.test.ts
