Implement Agent Mode Statistics display with models used by users (#226)

* Initial plan

* Initial exploration and setup complete

Co-authored-by: karpikpl <[email protected]>

* Implement Agent Mode Statistics display with models used by users

Co-authored-by: karpikpl <[email protected]>

* Rename agent mode to GitHub.com and update terminology

Co-authored-by: karpikpl <[email protected]>

* Merge with main and move GitHub.com calculations to backend

Co-authored-by: karpikpl <[email protected]>

* model info

* Update e2e-tests/pages/GitHubTab.ts

Co-authored-by: Copilot <[email protected]>

* Update app/components/AgentModeViewer.vue

Co-authored-by: Copilot <[email protected]>

* Update server/api/github-stats.ts

Co-authored-by: Copilot <[email protected]>

* Update e2e-tests/pages/GitHubTab.ts

Co-authored-by: Copilot <[email protected]>

* code cleanup after copilot made a mess

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: karpikpl <[email protected]>
Co-authored-by: Piotr Karpala <[email protected]>
Co-authored-by: Piotr Karpala <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

app/assets/global.css

@@ -22,20 +22,57 @@
     margin-bottom: 25px;
   }
 
-  /* Fix tab hover styles - light blue background */
-  .v-tab:hover {
-    background-color: rgba(63, 81, 181, 0.1) !important;
+  /* Fix tab hover styles - dark blue overlay using pseudo-element */
+  .v-tab {
+    position: relative !important;
   }
 
-  .v-tab:hover .v-tab__overlay {
-    display: none !important;
+  .v-tab:hover::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    background-color: rgba(44, 32, 157, 0.557) !important;
+    pointer-events: none !important;
+    z-index: 1 !important;
+  }
+
+  /* Ensure tab content is above overlay */
+  .v-tab .v-tab__content {
+    position: relative !important;
+    z-index: 2 !important;
+  }
+
+  /* Fix expansion panel title overlay on hover - gray overlay */
+  .v-expansion-panel-title:hover .v-expansion-panel-title__overlay {
+    display: block !important;
+    background-color: rgba(0, 0, 0, 0.04) !important;
+    opacity: 1 !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    pointer-events: none !important;
   }
 
   /* Fix button hover styles - light gray background */
   .v-btn:hover {
-    background-color: rgba(0, 0, 0, 0.04) !important;
+    background-color: rgba(63, 81, 181, 0.1) !important;
   }
 
   .v-btn:hover .v-btn__overlay {
     display: none !important;
+  }
+
+  /* Override Vuetify's default overlay behavior for tabs */
+  .v-tab.v-btn--variant-text .v-tab__overlay {
+    background: transparent !important;
+  }
+
+  /* Override Vuetify's default overlay behavior for variant-text buttons in tabs */
+  .v-tab .v-btn--variant-text .v-btn__overlay {
+    background: transparent !important;
   }

app/components/AgentModeViewer.vue

@@ -106,13 +106,14 @@ const dateRangeText = computed(() => {
   const from = parseDate(fromDate.value)
   const to = parseDate(toDate.value)
   const diffDays = Math.ceil((to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24)) + 1
-  
+  const withoutHolidays = excludeHolidays.value ? ' (excluding holidays/weekends)' : ''
+
   if (diffDays === 1) {
-    return `For ${from.toLocaleDateString()}`
+    return `For ${from.toLocaleDateString()}${withoutHolidays}`
   } else if (diffDays <= 28 && isLast28Days()) {
-    return 'Over the last 28 days'
+    return `Over the last 28 days ${withoutHolidays}`
   } else {
-    return `From ${from.toLocaleDateString()} to ${to.toLocaleDateString()} (${diffDays} days)`
+    return `From ${from.toLocaleDateString()} to ${to.toLocaleDateString()} (${diffDays} days)${withoutHolidays}`
   }
 })
 

app/components/DateRangeSelector.vue

@@ -35,8 +35,9 @@
     </v-toolbar>
 
     <!-- Date Range Selector - Hidden for seats tab -->
-    <DateRangeSelector
-v-show="tab !== 'seat analysis' && !signInRequired" :loading="isLoading"
+    <DateRangeSelector 
+      v-show="tab !== 'seat analysis' && !signInRequired" 
+      :loading="isLoading"
       @date-range-changed="handleDateRangeChange" />
 
     <!-- Organization info for seats tab -->
@@ -79,6 +80,7 @@ v-if="item === 'editors'" :metrics="metrics" :breakdown-key="'editor'"
             <CopilotChatViewer
 v-if="item === 'copilot chat'" :metrics="metrics"
               :date-range-description="dateRangeDescription" />
+            <AgentModeViewer v-if="item === 'github.com'" :original-metrics="originalMetrics" :date-range="dateRange" :date-range-description="dateRangeDescription" />
             <SeatsAnalysisViewer v-if="item === 'seat analysis'" :seats="seats" />
             <ApiResponse
 v-if="item === 'api response'" :metrics="metrics" :original-metrics="originalMetrics"
@@ -107,6 +109,7 @@ import BreakdownComponent from './BreakdownComponent.vue'
 import CopilotChatViewer from './CopilotChatViewer.vue'
 import SeatsAnalysisViewer from './SeatsAnalysisViewer.vue'
 import ApiResponse from './ApiResponse.vue'
+import AgentModeViewer from './AgentModeViewer.vue'
 import DateRangeSelector from './DateRangeSelector.vue'
 import { Options } from '@/model/Options';
 import { useRoute } from 'vue-router';
@@ -119,6 +122,7 @@ export default defineNuxtComponent({
     CopilotChatViewer,
     SeatsAnalysisViewer,
     ApiResponse,
+    AgentModeViewer,
     DateRangeSelector
   },
   methods: {
@@ -211,7 +215,7 @@ export default defineNuxtComponent({
 
   data() {
     return {
-      tabItems: ['languages', 'editors', 'copilot chat', 'seat analysis', 'api response'],
+      tabItems: ['languages', 'editors', 'copilot chat', 'github.com', 'seat analysis', 'api response'],
       tab: null,
       dateRangeDescription: 'Over the last 28 days',
       isLoading: false,

app/components/MainComponent.vue

@@ -4,5 +4,4 @@ import type { Metrics } from "@/model/Metrics";
 interface MetricsApiResponse {
     metrics: Metrics[]; // Replace `any` with the actual type of metrics
     usage: CopilotMetrics[];   // Replace `any` with the actual type of usage
-    valid_until: number; // Timestamp indicating when the data is valid until
 }

app/types/metricsApiResponse.d.ts

@@ -0,0 +1,93 @@
+import { test } from '@playwright/test';
+import { GitHubTab } from './pages/GitHubTab';
+import { DashboardPage } from './pages/DashboardPage';
+
+
+test.describe('AgentModeViewer Component', () => {
+
+  let dashboard: DashboardPage;
+
+  test.beforeAll(async ({ browser }) => {
+    const page = await browser.newPage();
+    await page.goto('/orgs/octo-demo-org?mock=true');
+
+    dashboard = new DashboardPage(page);
+
+    // wait for the data
+    await dashboard.expectMetricLabelsVisible();
+  });
+
+  test.afterAll(async () => {
+    await dashboard?.close();
+  });
+
+
+  test('should display loading state initially', async () => {
+    // Check if the github.com container is present
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectContainerVisible();
+  });
+
+  test('should display Copilot Statistics title', async () => {
+    // Wait for the component to load and display the title
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectStatisticsTitleVisible();
+  });
+
+  test('should display overview cards', async () => {
+    // Check if all four overview cards are present
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectOverviewCardsVisible();
+  });
+
+  test('should display chart sections', async () => {
+    // Check if chart sections are present
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectChartSectionsVisible();
+  });
+
+  test('should display models section', async () => {
+    // Check if models section is present
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectModelsSectionVisible();
+  });
+
+  test('should handle chart rendering without performance issues', async () => {
+    // Measure page performance and check charts
+    const githubTab = await dashboard.gotoGitHubTab();
+    const renderTime = await githubTab.expectRenderTimeUnderLimit(5000);
+    const chartCount = await githubTab.expectChartContainersPresent();
+
+    console.log(`Render time: ${renderTime}ms, Chart containers: ${chartCount}`);
+  });
+
+  test('should display tooltips on hover', async () => {
+    // Test tooltip functionality
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectTooltipInteraction();
+  });
+
+  test('should handle expansion panels correctly', async () => {
+    // Look for expansion panels and interact with them
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.clickFirstExpansionPanel();
+  });
+
+  test('should not show requestAnimationFrame performance warnings', async () => {
+    // Monitor console for performance warnings
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.monitorPerformanceWarnings();
+  });
+
+  test('should be responsive on different screen sizes', async () => {
+    // Test responsive design across different viewports
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.expectResponsiveDesign();
+  });
+
+  test('should maintain chart aspect ratio', async () => {
+    // Check that chart containers have the correct styling
+    const githubTab = await dashboard.gotoGitHubTab();
+    await githubTab.validateChartContainerStyles();
+  });
+});

e2e-tests/github-tab.spec.ts

@@ -4,6 +4,7 @@ import { EditorsTab } from './EditorsTab';
 import { SeatAnalysisTab } from './SeatAnalysisTab';
 import { ApiResponseTab } from './ApiResponseTab';
 import { CopilotChatTab } from './CopilotChatTab';
+import { GitHubTab } from './GitHubTab';
 
 export class DashboardPage {
     readonly page: Page;
@@ -23,6 +24,7 @@ export class DashboardPage {
     readonly seatAnalysisTabLink: Locator;
     readonly apiResponseTabLink: Locator;
     readonly copilotChatTabLink: Locator;
+    readonly githubTabLink: Locator;
 
     constructor(page: Page) {
         this.page = page;
@@ -32,12 +34,13 @@ export class DashboardPage {
         this.totalLinesSuggestedLabel = page.getByRole('heading', { name: 'Total Lines Suggested | Total' })
         this.totalLinesSuggestedValue = page.locator('.v-card-item').filter({ has: page.getByText('Total Lines of code Suggested') }).locator('.text-h4')
         this.toolbarTitle = page.locator(".toolbar-title")
-        
+
         this.languagesTabLink = page.getByRole('tab', { name: 'languages' })
         this.editorsTabLink = page.getByRole('tab', { name: 'editors' })
         this.seatAnalysisTabLink = page.getByRole('tab', { name: 'seat analysis' })
         this.apiResponseTabLink = page.getByRole('tab', { name: 'api response' })
         this.copilotChatTabLink = page.getByRole('tab', { name: 'copilot chat' })
+        this.githubTabLink = page.getByRole('tab', { name: 'github.com' })
 
         this.teamTabLink = page.getByRole('tab', { name: 'team' })
         this.orgTabLink = page.getByRole('tab', { name: 'organization' })
@@ -98,6 +101,11 @@ export class DashboardPage {
         return new CopilotChatTab(this.page);
     }
 
+    async gotoGitHubTab() {
+        await this.githubTabLink.click();
+        return new GitHubTab(this.page);
+    }
+
     async close() {
         await this.page.close();
     }