feat: extend icon/avatar treatment to user/org groupings

Add avatar support to chart legends, tooltips, and hero cards for
username/organization/login columns. getGroupIconSvg now returns
an <img> tag with the GitHub avatar for user columns. Added
columnHasIcons() helper to replace hardcoded sku/product checks.

Author: austenstone

src/components/HeroCardsGrid.tsx

@@ -3,7 +3,7 @@ import { HeroCard } from './HeroCard';
 import type { ReportSchema } from '../lib/report-schema';
 import type { ReportSummary, AnyReportRow, TokenUsageRow } from '../lib/types';
 import { REPORT_TYPES } from '../lib/types';
-import { formatCurrency, formatCompact, formatDisplayValue, getGroupIcon } from '../lib/formatters';
+import { formatCurrency, formatCompact, formatDisplayValue, getGroupIcon, getAvatarUrl } from '../lib/formatters';
 import { topN } from '../lib/aggregation';
 import styles from '../App.module.css';
 
@@ -68,11 +68,17 @@ export function HeroCardsGrid({ schema, summary, visibleRows, reportType }: Hero
                   3,
                 );
                 return top3.map((m) => {
-                  const label = formatDisplayValue(m.key, card.breakdownGroupField!);
-                  const GroupIcon = getGroupIcon(m.key, card.breakdownGroupField!);
+                  const field = card.breakdownGroupField!;
+                  const label = formatDisplayValue(m.key, field);
+                  const GroupIcon = getGroupIcon(m.key, field);
+                  const isAvatar = (field === 'username' || field === 'organization' || field === 'login' || field === 'userLogin') && m.key;
                   return (
                     <span key={m.key}>
-                      <span>{GroupIcon && <GroupIcon size={14} />}{label}</span>
+                      <span>
+                        {isAvatar && <img src={getAvatarUrl(m.key, 28)} width={14} height={14} alt="" style={{ borderRadius: '50%', verticalAlign: 'middle', marginRight: 3 }} loading="lazy" />}
+                        {GroupIcon && <GroupIcon size={14} />}
+                        {label}
+                      </span>
                       <span>{card.format === 'currency' ? formatCurrency(m.value) : formatCompact(m.value)}</span>
                     </span>
                   );

src/components/charts/CostBreakdownChart.tsx

@@ -5,7 +5,7 @@ import { ActionList, ActionMenu } from '@primer/react';
 import { useReport } from '../../context/useReport';
 import { groupBy, sumBy, timeBucket as bucketRows } from '../../lib/aggregation';
 import { buildColorMap } from '../../lib/chart-theme';
-import { formatDisplayValue, formatCompact, bucketKeyToTimestamp, getGroupIconSvg } from '../../lib/formatters';
+import { formatDisplayValue, formatCompact, bucketKeyToTimestamp, getGroupIconSvg, columnHasIcons } from '../../lib/formatters';
 import type { MetricOption } from '../../lib/report-schema';
 import type { AnyReportRow, BillingRow } from '../../lib/types';
 import styles from './Charts.module.css';
@@ -53,7 +53,7 @@ export function CostBreakdownChart({ stackField = 'model', metricOptions }: Cost
 
       const seriesColor = colorMap.get(groupInfo.group) ?? '#808fa3';
       const displayName = formatDisplayValue(groupInfo.group, stackField) || ' ';
-      const hasIcons = stackField === 'sku' || stackField === 'product';
+      const hasIcons = columnHasIcons(stackField);
       const iconHtml = hasIcons ? getGroupIconSvg(groupInfo.group, stackField, seriesColor) : '';
       return {
         type: 'column' as const,
@@ -102,7 +102,7 @@ export function CostBreakdownChart({ stackField = 'model', metricOptions }: Cost
           : '<tr style="border-top: 1px solid var(--borderColor-muted, #d1d9e0b3);"><td><b>Total:&nbsp;</b></td><td style="text-align: right;"><b>{point.total:,.0f}</b></td></tr></table>',
       },
       plotOptions: { column: { stacking: 'normal' } },
-      legend: stackField === 'sku' || stackField === 'product'
+      legend: columnHasIcons(stackField)
         ? { symbolWidth: 0, symbolHeight: 0, symbolPadding: 0 }
         : { symbolWidth: 16, symbolHeight: 12, symbolPadding: 5 },
       series,

src/components/charts/ModelBreakdownChart.tsx

@@ -5,7 +5,7 @@ import { ActionList, ActionMenu, SegmentedControl } from '@primer/react';
 import { CopilotIcon, CreditCardIcon } from '@primer/octicons-react';
 import { useReport } from '../../context/useReport';
 import { groupBy, sumBy, topN } from '../../lib/aggregation';
-import { humanizeColumn, formatCompact, formatDisplayValue, getAvatarUrl, getGroupIconSvg } from '../../lib/formatters';
+import { humanizeColumn, formatCompact, formatDisplayValue, getAvatarUrl, getGroupIconSvg, columnHasIcons } from '../../lib/formatters';
 import { buildColorMap, getModelIconUrl } from '../../lib/chart-theme';
 import { REPORT_TYPES } from '../../lib/types';
 import type { MetricOption } from '../../lib/report-schema';
@@ -93,7 +93,7 @@ export function GroupBreakdownChart({ stackField = 'model', metricOptions }: Gro
 
       const seriesColor = colorMap.get(stackInfo.stack) ?? '#808fa3';
       const displayName = formatDisplayValue(stackInfo.stack, stackField) || ' ';
-      const hasIcons = stackField === 'sku' || stackField === 'product';
+      const hasIcons = columnHasIcons(stackField);
       const iconHtml = hasIcons ? getGroupIconSvg(stackInfo.stack, stackField, seriesColor) : '';
       return {
         type: 'bar' as const,
@@ -136,7 +136,7 @@ export function GroupBreakdownChart({ stackField = 'model', metricOptions }: Gro
             const name = typeof this.value === 'string' ? this.value : String(this.value);
             const isAvatar = groupByColumn === 'username' || groupByColumn === 'organization';
             const isModel = groupByColumn === 'model';
-            const hasIcons = groupByColumn === 'sku' || groupByColumn === 'product';
+            const hasIcons = columnHasIcons(groupByColumn);
             if (isAvatar && name) {
               return `<span style="display:inline-flex;align-items:center;gap:6px;">${name}<img src="${getAvatarUrl(name)}" width="16" height="16" style="border-radius:50%;" loading="lazy" /></span>`;
             }
@@ -174,7 +174,7 @@ export function GroupBreakdownChart({ stackField = 'model', metricOptions }: Gro
           : '<tr style="border-top: 1px solid var(--borderColor-muted, #d1d9e0b3);"><td><b>Total:&nbsp;</b></td><td style="text-align: right;"><b>{point.total:,.0f}</b></td></tr></table>',
       },
       plotOptions: { bar: { stacking: 'normal' } },
-      legend: stackField === 'sku' || stackField === 'product'
+      legend: columnHasIcons(stackField)
         ? { symbolWidth: 0, symbolHeight: 0, symbolPadding: 0 }
         : { symbolWidth: 16, symbolHeight: 12, symbolPadding: 5 },
       series,

src/components/charts/TimeSeriesChart.tsx

@@ -4,7 +4,7 @@ import { HighchartsReact } from 'highcharts-react-official';
 import { ActionList, ActionMenu, SegmentedControl } from '@primer/react';
 import { useReport } from '../../context/useReport';
 import { groupBy, sumBy, timeBucket as bucketRows } from '../../lib/aggregation';
-import { humanizeColumn, formatDisplayValue, formatCompact, bucketKeyToTimestamp, getGroupIconSvg } from '../../lib/formatters';
+import { humanizeColumn, formatDisplayValue, formatCompact, bucketKeyToTimestamp, getGroupIconSvg, columnHasIcons } from '../../lib/formatters';
 import { buildColorMap } from '../../lib/chart-theme';
 import { getStoredValue, setStoredValue, STORAGE_KEYS } from '../../lib/local-storage';
 import type { MetricOption } from '../../lib/report-schema';
@@ -134,7 +134,7 @@ export function TimeSeriesChart({ metricOptions }: { metricOptions?: MetricOptio
       }
 
       const displayName = formatDisplayValue(group.key, groupByColumn) || ' ';
-      const hasIcons = groupByColumn === 'sku' || groupByColumn === 'product';
+      const hasIcons = columnHasIcons(groupByColumn);
       const icon = hasIcons ? getGroupIconSvg(group.key, groupByColumn, color) : '';
 
       series.push({
@@ -180,7 +180,7 @@ export function TimeSeriesChart({ metricOptions }: { metricOptions?: MetricOptio
             },
       },
       series,
-      legend: groupByColumn === 'sku' || groupByColumn === 'product'
+      legend: columnHasIcons(groupByColumn)
         ? { symbolWidth: 0, symbolHeight: 0, symbolPadding: 0 }
         : { symbolWidth: 16, symbolHeight: 12, symbolPadding: 5 },
       chart: { height: 400 },

src/lib/formatters.ts

@@ -37,14 +37,24 @@ export function getProductIconSvg(rawValue: string, color?: string): string {
   return renderIcon(icon, color);
 }
 
+const AVATAR_COLUMNS = new Set(['username', 'organization', 'login', 'userLogin']);
+
 /** Columns that have dedicated icon functions */
 export function getGroupIconSvg(rawValue: string, column: string, color?: string): string {
   if (column === 'sku') return getSkuIconSvg(rawValue, color);
   if (column === 'product') return getProductIconSvg(rawValue, color);
+  if (AVATAR_COLUMNS.has(column) && rawValue) {
+    return `<img src="${getAvatarUrl(rawValue, 32)}" width="16" height="16" style="border-radius:50%;flex-shrink:0;" loading="lazy" />`;
+  }
   return '';
 }
 
-/** Get the React icon component for a group value */
+/** Check if a column has custom icon/avatar treatment */
+export function columnHasIcons(column: string): boolean {
+  return column === 'sku' || column === 'product' || AVATAR_COLUMNS.has(column);
+}
+
+/** Get the React icon component for a group value (SKU/product only, not avatars) */
 export function getGroupIcon(rawValue: string, column: string): OcticonComponent | null {
   if (column === 'sku') { const i = getSkuIcon(rawValue); return i === TagIcon ? null : i; }
   if (column === 'product') { const i = getProductIcon(rawValue); return i === TagIcon ? null : i; }