feat: format SKU labels in hero card breakdowns

Use formatDisplayValue for pretty names (actions_linux → Actions Linux)
and show product-specific Octicons. Extracted getSkuIcon to shared
formatters module.

Author: austenstone

src/App.module.css

@@ -141,6 +141,13 @@
   display: flex;
   justify-content: space-between;
   gap: var(--base-size-8, 8px);
+  align-items: center;
+}
+
+.heroCardBreakdown span svg {
+  flex-shrink: 0;
+  margin-right: 3px;
+  vertical-align: text-bottom;
 }
 
 .reportTabs,

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 } from '../lib/formatters';
+import { formatCurrency, formatCompact, formatDisplayValue, getSkuIcon } from '../lib/formatters';
 import { topN } from '../lib/aggregation';
 import styles from '../App.module.css';
 
@@ -67,12 +67,17 @@ export function HeroCardsGrid({ schema, summary, visibleRows, reportType }: Hero
                   card.breakdownMetricField as keyof AnyReportRow & string,
                   3,
                 );
-                return top3.map((m) => (
-                  <span key={m.key}>
-                    <span>{m.key}</span>
-                    <span>{card.format === 'currency' ? formatCurrency(m.value) : formatCompact(m.value)}</span>
-                  </span>
-                ));
+                return top3.map((m) => {
+                  const label = formatDisplayValue(m.key, card.breakdownGroupField!);
+                  const isSkuBreakdown = card.breakdownGroupField === 'sku';
+                  const SkuIcon = isSkuBreakdown ? getSkuIcon(m.key) : null;
+                  return (
+                    <span key={m.key}>
+                      <span>{SkuIcon && <SkuIcon size={14} />}{label}</span>
+                      <span>{card.format === 'currency' ? formatCurrency(m.value) : formatCompact(m.value)}</span>
+                    </span>
+                  );
+                });
               })()}
 
               {/* Static breakdown entries */}

src/components/ReportTable.tsx

@@ -14,12 +14,12 @@ import {
 } from '@tanstack/react-table';
 import { Avatar, Button, CounterLabel, SelectPanel } from '@primer/react';
 import { Table as PrimerTable } from '@primer/react/experimental';
-import { AppsIcon, ColumnsIcon, CopilotIcon, CreditCardIcon, DatabaseIcon, PackageIcon, RepoIcon, TagIcon, WorkflowIcon } from '@primer/octicons-react';
+import { AppsIcon, ColumnsIcon, CreditCardIcon, RepoIcon, TagIcon, WorkflowIcon } from '@primer/octicons-react';
 import { OnboardingBubble, ONBOARDING_STEPS } from './onboarding';
 import { type ActionListItemInput } from '@primer/react/deprecated';
 import { useReport } from '../context/useReport';
 import { groupBy, sumBy } from '../lib/aggregation';
-import { formatCurrency, formatCompact, humanizeColumn, formatDisplayValue, getAvatarUrl, formatDatetime } from '../lib/formatters';
+import { formatCurrency, formatCompact, humanizeColumn, formatDisplayValue, getAvatarUrl, formatDatetime, getSkuIcon } from '../lib/formatters';
 import type { AnyReportRow, TokenUsageRow, UsageReportRow } from '../lib/types';
 import { REPORT_TYPES } from '../lib/types';
 import { getModelIconUrl } from '../lib/chart-theme';
@@ -35,17 +35,7 @@ const COLUMN_ICONS: Record<string, React.ComponentType<{ size?: number; classNam
   workflowPath: WorkflowIcon,
 };
 
-type OcticonComponent = React.ComponentType<{ size?: number; className?: string }>;
 
-/** Map a raw SKU key to the product-relevant Octicon */
-function getSkuIcon(rawValue: string): OcticonComponent {
-  const v = rawValue.toLowerCase();
-  if (v.startsWith('actions')) return WorkflowIcon;
-  if (v.startsWith('copilot') || v.startsWith('coding_agent') || v.startsWith('spark')) return CopilotIcon;
-  if (v.startsWith('packages')) return PackageIcon;
-  if (v.startsWith('git_lfs')) return DatabaseIcon;
-  return TagIcon;
-}
 
 // Extend TanStack's ColumnMeta to support our align property
 declare module '@tanstack/react-table' {

src/lib/formatters.ts

@@ -1,3 +1,18 @@
+import type { ComponentType } from 'react';
+import { CopilotIcon, DatabaseIcon, PackageIcon, TagIcon, WorkflowIcon } from '@primer/octicons-react';
+
+type OcticonComponent = ComponentType<{ size?: number; className?: string }>;
+
+/** Map a raw SKU key to the product-relevant Octicon */
+export function getSkuIcon(rawValue: string): OcticonComponent {
+  const v = rawValue.toLowerCase();
+  if (v.startsWith('actions')) return WorkflowIcon;
+  if (v.startsWith('copilot') || v.startsWith('coding_agent') || v.startsWith('spark')) return CopilotIcon;
+  if (v.startsWith('packages')) return PackageIcon;
+  if (v.startsWith('git_lfs')) return DatabaseIcon;
+  return TagIcon;
+}
+
 /** Format a number as USD currency */
 export function formatCurrency(value: number): string {
   return new Intl.NumberFormat('en-US', {