feat: update sidebar icons and labels for improved clarity; adjust report schema icons

Author: austenstone

src/App.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { IconButton, PageLayout } from '@primer/react';
-import { SidebarExpandIcon } from '@primer/octicons-react';
+import { SidebarCollapseIcon } from '@primer/octicons-react';
 import { ReportProvider } from './context/ReportContext';
 import { useReport } from './context/useReport';
 import { ReportPageLayout } from './components/ReportPageLayout';
@@ -107,7 +107,7 @@ function AppContent() {
           <div style={{ position: 'absolute', top: 16, left: 16, zIndex: 1 }}>
             <IconButton
               aria-label="Expand sidebar"
-              icon={SidebarExpandIcon}
+              icon={SidebarCollapseIcon}
               variant="invisible"
               size="small"
               onClick={() => setSidebarCollapsed(false)}

src/components/InsightsSidebar.tsx

@@ -14,7 +14,7 @@ import {
   MoonIcon,
   PackageIcon,
   QuestionIcon,
-  SidebarCollapseIcon,
+  SidebarExpandIcon,
   SparkleIcon,
   SunIcon,
   ZapIcon,
@@ -67,17 +67,17 @@ export function InsightsSidebar({
     <div className={styles.sidebarContent}>
       <div className={styles.sidebarHeader}>
         <Heading as="h2" className={styles.sidebarHeading}>
-          Insights
+          Reports
         </Heading>
         <IconButton
           aria-label="Collapse sidebar"
-          icon={SidebarCollapseIcon}
+          icon={SidebarExpandIcon}
           variant="invisible"
           size="small"
           onClick={onCollapse}
         />
       </div>
-      <NavList aria-label="Insights navigation">
+      <NavList aria-label="Reports navigation">
         {NAV_PAGES.map(({ id, label, icon: Icon }) => {
           const isUsagePage = id === PAGE_TYPES.USAGE;
           const showSubNav = isUsagePage && availableProducts.length > 1;

src/components/ReportPageLayout.tsx

@@ -22,17 +22,22 @@ import { PageHeader } from '@primer/react/experimental';
 import type { IconProps } from '@primer/octicons-react';
 import {
   AiModelIcon,
+  AppsIcon,
   ColumnsIcon,
   CopilotIcon,
+  CpuIcon,
+  CreditCardIcon,
+  DeviceDesktopIcon,
   DownloadIcon,
   FileIcon,
   GraphIcon,
+  IdBadgeIcon,
   OrganizationIcon,
-  PackageIcon,
   PersonIcon,
   RepoIcon,
-  ServerIcon,
+  ShieldIcon,
   TableIcon,
+  TagIcon,
   UploadIcon,
   WorkflowIcon,
 } from '@primer/octicons-react';
@@ -98,23 +103,23 @@ const FIELD_ICONS: Record<string, FunctionComponent<PropsWithChildren<IconProps>
   username: PersonIcon,
   model: AiModelIcon,
   organization: OrganizationIcon,
-  sku: ServerIcon,
-  costCenterName: TableIcon,
-  product: PackageIcon,
+  sku: TagIcon,
+  costCenterName: CreditCardIcon,
+  product: AppsIcon,
   repository: RepoIcon,
   workflowPath: WorkflowIcon,
   login: PersonIcon,
   userLogin: PersonIcon,
-  licenseType: PackageIcon,
-  enterpriseRoles: OrganizationIcon,
-  role: PersonIcon,
-  lastSurfaceUsed: ServerIcon,
+  licenseType: IdBadgeIcon,
+  enterpriseRoles: ShieldIcon,
+  role: ShieldIcon,
+  lastSurfaceUsed: DeviceDesktopIcon,
 };
 
 const REPORT_TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
   premium_request: CopilotIcon,
-  token_usage: ServerIcon,
-  usage_report: WorkflowIcon,
+  token_usage: CpuIcon,
+  usage_report: GraphIcon,
 };
 
 function downloadReportAsCsv(report: NonNullable<ReturnType<typeof useReport>['activeReport']>) {

src/components/ReportTable.tsx

@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import { Avatar, Button, SelectPanel } from '@primer/react';
 import { Table as PrimerTable } from '@primer/react/experimental';
-import { ColumnsIcon, CreditCardIcon, PackageIcon, RepoIcon, 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';
@@ -28,8 +28,8 @@ import styles from './ReportTable.module.css';
 
 /** Icon to show next to non-avatar, non-model group values */
 const COLUMN_ICONS: Record<string, React.ComponentType<{ size?: number; className?: string }>> = {
-  sku: PackageIcon,
-  product: PackageIcon,
+  sku: TagIcon,
+  product: AppsIcon,
   costCenterName: CreditCardIcon,
   repository: RepoIcon,
   workflowPath: WorkflowIcon,

src/lib/report-schema.ts

@@ -3,9 +3,8 @@ import type { ReportType } from './types';
 import { REPORT_TYPES } from './types';
 import {
   CopilotIcon,
+  CpuIcon,
   GraphIcon,
-  ServerIcon,
-  WorkflowIcon,
   ShieldLockIcon,
   PeopleIcon,
   PersonIcon,
@@ -134,7 +133,7 @@ const TOKEN_USAGE_SCHEMA: ReportSchema = {
   type: REPORT_TYPES.TOKEN_USAGE,
   label: 'Token Usage',
   pluralLabel: 'Token Usage Reports',
-  icon: ServerIcon,
+  icon: CpuIcon,
   description: 'Token-Based Billing Report Explorer',
   emptyStateTitle: 'Copilot Usage Viewer',
   emptyStateText: 'Upload a GitHub billing CSV to visualize Copilot spend, premium requests, and token usage.',
@@ -151,7 +150,7 @@ const USAGE_REPORT_SCHEMA: ReportSchema = {
   type: REPORT_TYPES.USAGE_REPORT,
   label: 'Usage Report',
   pluralLabel: 'Metered Usage Reports',
-  icon: WorkflowIcon,
+  icon: GraphIcon,
   description: 'GitHub Actions, Packages, LFS & Copilot Seats',
   emptyStateTitle: 'Metered Usage Viewer',
   emptyStateText: 'Upload a GitHub metered usage CSV to visualize Actions minutes, storage, and product spend.',
@@ -377,8 +376,8 @@ export interface NavPageConfig {
 }
 
 export const NAV_PAGES: NavPageConfig[] = [
-  { id: PAGE_TYPES.COPILOT, label: 'Copilot usage', icon: CopilotIcon },
   { id: PAGE_TYPES.USAGE, label: 'Metered usage', icon: GraphIcon },
+  { id: PAGE_TYPES.COPILOT, label: 'Copilot usage', icon: CopilotIcon },
   { id: PAGE_TYPES.GHAS, label: 'GHAS committers', icon: ShieldLockIcon },
   { id: PAGE_TYPES.SEAT_ACTIVITY, label: 'Seat activity', icon: PersonIcon },
   { id: PAGE_TYPES.MEMBERS, label: 'Dormant users', icon: PeopleIcon },