Merge pull request #9 from github/feat/products-view

feat: add products view with per-product usage breakdown

Author: asizikov

src/App.css

@@ -9,10 +9,12 @@ import { OrganizationsView } from './views/OrganizationsView'
 import { ModelsView } from './views/ModelsView'
 import { ReportGuideView } from './views/ReportGuideView'
 import { FaqView } from './views/FaqView'
+import { ProductsView } from './views/ProductsView'
 import { QuickStatsAggregator, type QuickStatsResult } from './pipeline/aggregators/quickStatsAggregator'
 import { ReportContextAggregator, type ReportContextResult } from './pipeline/aggregators/reportContextAggregator'
 import { DailyUsageAggregator, type DailyUsageData } from './pipeline/aggregators/dailyUsageAggregator'
 import { ModelUsageAggregator, type ModelUsageResult } from './pipeline/aggregators/modelUsageAggregator'
+import { ProductUsageAggregator, type ProductUsageResult } from './pipeline/aggregators/productUsageAggregator'
 import { CostCenterAggregator, type CostCenterResult } from './pipeline/aggregators/costCenterAggregator'
 import { OrganizationAggregator, type OrganizationResult } from './pipeline/aggregators/organizationAggregator'
 import { UserUsageAggregator, type UserUsageResult } from './pipeline/aggregators/userUsageAggregator'
@@ -55,9 +57,10 @@ function App() {
   const [fileName, setFileName] = useState<string | null>(null)
   const [dragActive, setDragActive] = useState(false)
   const [dailyUsageData, setDailyUsageData] = useState<DailyUsageData[]>([])
-  const [activeView, setActiveView] = useState<'overview' | 'users' | 'userDetails' | 'costCenters' | 'orgs' | 'models' | 'guide' | 'faq'>('overview')
+  const [activeView, setActiveView] = useState<'overview' | 'users' | 'userDetails' | 'costCenters' | 'orgs' | 'models' | 'products' | 'guide' | 'faq'>('overview')
   const [userUsage, setUserUsage] = useState<UserUsageResult | null>(null)
   const [modelUsage, setModelUsage] = useState<ModelUsageResult | null>(null)
+  const [productUsage, setProductUsage] = useState<ProductUsageResult | null>(null)
   const [selectedUsername, setSelectedUsername] = useState<string>('')
   const [costCenters, setCostCenters] = useState<CostCenterResult | null>(null)
   const [orgs, setOrgs] = useState<OrganizationResult | null>(null)
@@ -71,6 +74,7 @@ function App() {
     setDailyUsageData([])
     setUserUsage(null)
     setModelUsage(null)
+    setProductUsage(null)
     setSelectedUsername('')
     setCostCenters(null)
     setOrgs(null)
@@ -82,6 +86,7 @@ function App() {
       const contextAggregator = new ReportContextAggregator()
       const dailyAggregator = new DailyUsageAggregator()
       const modelAggregator = new ModelUsageAggregator()
+      const productAggregator = new ProductUsageAggregator()
       const costCenterAggregator = new CostCenterAggregator()
       const orgAggregator = new OrganizationAggregator()
       const userAggregator = new UserUsageAggregator()
@@ -91,6 +96,7 @@ function App() {
         contextAggregator,
         dailyAggregator,
         modelAggregator,
+        productAggregator,
         costCenterAggregator,
         orgAggregator,
         userAggregator,
@@ -102,6 +108,7 @@ function App() {
 
       const nextModelUsage = modelAggregator.result()
       setModelUsage(nextModelUsage)
+  setProductUsage(productAggregator.result())
 
       setCostCenters(costCenterAggregator.result())
       setOrgs(orgAggregator.result())
@@ -292,6 +299,17 @@ function App() {
                   </button>
                 )}
 
+                <button
+                  type="button"
+                  className={`sidebar__item ${activeView === 'products' ? 'sidebar__item--active' : ''}`}
+                  onClick={() => setActiveView('products')}
+                >
+                  <svg className="sidebar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+                    <path d="M3 9h18M3 15h18M9 3v18M15 3v18" />
+                  </svg>
+                  <span className="sidebar__label">Products</span>
+                </button>
+
                 {orgs && orgs.organizations.length > 0 && (
                   <button
                     type="button"
@@ -321,6 +339,8 @@ function App() {
                   </button>
                 )}
 
+                <hr className="sidebar__divider" />
+
                 <button
                   type="button"
                   className={`sidebar__item ${activeView === 'guide' ? 'sidebar__item--active' : ''}`}
@@ -554,6 +574,10 @@ function App() {
               <div className="view-content">
                 <CostCentersView data={costCenters ?? { costCenters: [] }} rangeStart={rangeStart} />
               </div>
+            ) : activeView === 'products' ? (
+              <div className="view-content">
+                <ProductsView data={productUsage ?? { products: [] }} />
+              </div>
             ) : activeView === 'guide' ? (
               <div className="view-content">
                 <ReportGuideView />

src/App.tsx

@@ -6,6 +6,8 @@ export { DailyUsageAggregator } from './dailyUsageAggregator'
 export type { DailyUsageData, DailyUsageResult } from './dailyUsageAggregator'
 export { ModelUsageAggregator } from './modelUsageAggregator'
 export type { ModelDailyUsageData, ModelUsageResult, ModelUsageTotals } from './modelUsageAggregator'
+export { ProductUsageAggregator } from './productUsageAggregator'
+export type { ProductUsage, ProductUsageResult, ProductUsageTotals } from './productUsageAggregator'
 export { CostCenterAggregator } from './costCenterAggregator'
 export type { CostCenterResult, CostCenterUsage, CostTotals } from './costCenterAggregator'
 export { OrganizationAggregator } from './organizationAggregator'

src/pipeline/aggregators/index.ts

@@ -0,0 +1,89 @@
+import type { Aggregator } from './base'
+import { getUsageMetrics, type TokenUsageHeader, type TokenUsageRecord } from '../parser'
+
+export type ProductUsageTotals = {
+  requests: number
+  aiuQuantity: number
+  grossAmount: number
+  aiuGrossAmount: number
+}
+
+export type ProductUsage = {
+  product: string
+  totals: ProductUsageTotals
+  models: Record<string, ProductUsageTotals>
+}
+
+export type ProductUsageResult = {
+  products: ProductUsage[]
+}
+
+function createTotals(): ProductUsageTotals {
+  return {
+    requests: 0,
+    aiuQuantity: 0,
+    grossAmount: 0,
+    aiuGrossAmount: 0,
+  }
+}
+
+function getFriendlyProductName(record: TokenUsageRecord): string {
+  const model = record.model.trim()
+
+  if (model === 'Code Review model') return 'Code Review'
+  if (model === 'Coding Agent model') return 'Coding Agent'
+  return 'Copilot'
+}
+
+export class ProductUsageAggregator implements Aggregator<TokenUsageRecord, ProductUsageResult, TokenUsageHeader> {
+  private readonly byProduct = new Map<string, { totals: ProductUsageTotals; models: Map<string, ProductUsageTotals> }>()
+
+  onHeader(): void {
+    // header is intentionally ignored (we rely on parsed TokenUsageRecord fields)
+  }
+
+  accumulate(record: TokenUsageRecord): void {
+    const product = getFriendlyProductName(record)
+    const model = record.model.trim() || 'Unknown'
+
+    let productUsage = this.byProduct.get(product)
+    if (!productUsage) {
+      productUsage = {
+        totals: createTotals(),
+        models: new Map(),
+      }
+      this.byProduct.set(product, productUsage)
+    }
+
+    const { requests, aiuQuantity, grossAmount, aiuGrossAmount } = getUsageMetrics(record)
+    productUsage.totals.requests += requests
+    productUsage.totals.aiuQuantity += aiuQuantity
+    productUsage.totals.grossAmount += grossAmount
+    productUsage.totals.aiuGrossAmount += aiuGrossAmount
+
+    let modelTotals = productUsage.models.get(model)
+    if (!modelTotals) {
+      modelTotals = createTotals()
+      productUsage.models.set(model, modelTotals)
+    }
+
+    modelTotals.requests += requests
+    modelTotals.aiuQuantity += aiuQuantity
+    modelTotals.grossAmount += grossAmount
+    modelTotals.aiuGrossAmount += aiuGrossAmount
+  }
+
+  result(): ProductUsageResult {
+    const products = Array.from(this.byProduct.entries())
+      .map<ProductUsage>(([product, usage]) => ({
+        product,
+        totals: usage.totals,
+        models: Object.fromEntries(
+          Array.from(usage.models.entries()).sort((a, b) => b[1].grossAmount - a[1].grossAmount),
+        ),
+      }))
+      .sort((a, b) => b.totals.grossAmount - a.totals.grossAmount)
+
+    return { products }
+  }
+}

src/pipeline/aggregators/productUsageAggregator.ts

@@ -133,9 +133,9 @@ export function CostCentersView({ data, rangeStart }: { data: CostCenterResult;
       </div>
 
       <div className="cost-centers-view__tables">
-        <div className="cost-centers-view__tableWrap">
+          <div className="cost-centers-view__tableWrap data-table-wrap">
           <div className="cost-centers-view__tableTitle">Per model</div>
-          <table className="cost-centers-view__table">
+          <table className="cost-centers-view__table data-table">
             <thead>
               <tr>
                 <th>Model</th>
@@ -166,9 +166,9 @@ export function CostCentersView({ data, rangeStart }: { data: CostCenterResult;
           </table>
         </div>
 
-        <div className="cost-centers-view__tableWrap">
+          <div className="cost-centers-view__tableWrap data-table-wrap">
           <div className="cost-centers-view__tableTitle">Per user</div>
-          <table className="cost-centers-view__table">
+          <table className="cost-centers-view__table data-table">
             <thead>
               <tr>
                 <th>User</th>

src/views/CostCentersView.tsx

@@ -20,8 +20,8 @@ export function OrganizationsView({ data }: { data: OrganizationResult }) {
         </div>
       </div>
 
-      <div className="orgs-view__tableWrap">
-        <table className="orgs-view__table">
+      <div className="orgs-view__tableWrap data-table-wrap">
+        <table className="orgs-view__table data-table">
           <thead>
             <tr>
               <th>Organization</th>