feat(ui): color Agent Activity KPI numbers and add user selection hint (#352)

* feat(ui): color Agent Activity KPI numbers and add user selection hint

- AgentActivityViewer: apply Vuetify semantic colors to KPI values
  - Lines of code changed: text-primary (blue)
  - Agent contribution %: text-success (green)
  - Avg lines deleted: text-warning (orange)
  Matches the color pattern used in SeatsAnalysisViewer and MetricsViewer.

- UserMetricsViewer: add info alert in User Insights section when no
  user is selected, prompting users to click a row in the table above
  to drill down into individual usage details.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(teams): replace broken team link with deselect button, add loading overlay

- Comparison cards: replace 'mdi-open-in-new' link (pointing to removed
  /enterprises/:ent/teams/:slug route) with an [x] close button that
  removes the team from the selection
- Single-team header: replace 'View Team' external link with a red
  'Deselect' button that clears the team selection
- Add v-overlay with spinner that locks the UI during data fetching
  (updateChartData now sets isLoading=true/false with try/finally)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* chore: bump version to 3.4.1

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: karpikpl

app/components/AgentActivityViewer.vue

@@ -35,7 +35,7 @@
           <v-card-item>
             <div class="text-caption text-medium-emphasis">Lines of code changed with AI</div>
             <div class="text-caption text-medium-emphasis mb-2">{{ dateRangeDescription }}</div>
-            <div class="kpi-value">{{ formatCompact(totalLocChanged) }}</div>
+            <div class="kpi-value text-primary">{{ formatCompact(totalLocChanged) }}</div>
           </v-card-item>
         </v-card>
       </v-col>
@@ -44,7 +44,7 @@
           <v-card-item>
             <div class="text-caption text-medium-emphasis">Agent contribution</div>
             <div class="text-caption text-medium-emphasis mb-2">% of all AI code changes</div>
-            <div class="kpi-value">{{ agentContributionPct.toFixed(0) }}%</div>
+            <div class="kpi-value text-success">{{ agentContributionPct.toFixed(0) }}%</div>
             <div class="text-caption text-medium-emphasis mt-1">
               {{ formatCompact(agentLocChanged) }} of {{ formatCompact(totalLocChanged) }} lines
             </div>
@@ -56,7 +56,7 @@
           <v-card-item>
             <div class="text-caption text-medium-emphasis">Avg lines deleted by agent per user</div>
             <div class="text-caption text-medium-emphasis mb-2">{{ dateRangeDescription }}</div>
-            <div class="kpi-value">{{ avgAgentLinesDeleted.toLocaleString() }}</div>
+            <div class="kpi-value text-warning">{{ avgAgentLinesDeleted.toLocaleString() }}</div>
           </v-card-item>
         </v-card>
       </v-col>

app/components/TeamsComponent.vue

@@ -1,5 +1,15 @@
 <template>
-  <div>
+  <div style="position: relative;">
+    <!-- Loading overlay while fetching team metrics -->
+    <v-overlay
+      :model-value="isLoading"
+      contained
+      persistent
+      class="align-center justify-center"
+    >
+      <v-progress-circular indeterminate color="primary" size="48" />
+    </v-overlay>
+
     <!-- Description card (matches org style) -->
     <v-card variant="outlined" class="mx-4 mt-3 mb-1 pa-3" density="compact">
       <div class="d-flex flex-wrap align-start gap-2 text-body-2">
@@ -78,12 +88,12 @@
             <div class="text-medium-emphasis">{{ dateRangeDesc }}</div>
           </div>
           <v-btn
-            :href="getTeamDetailUrl(selectedTeams[0]!)"
-            target="_blank"
             variant="outlined"
             size="small"
-            append-icon="mdi-open-in-new"
-          >View Team</v-btn>
+            color="error"
+            prepend-icon="mdi-close"
+            @click="selectedTeams = []"
+          >Deselect</v-btn>
         </div>
       </v-card>
 
@@ -279,8 +289,14 @@
                 <v-icon size="18" :color="card.color.border">mdi-account-group</v-icon>
                 <span class="text-subtitle-2 font-weight-medium">{{ card.teamName }}</span>
                 <v-spacer />
-                <v-btn :href="getTeamDetailUrl(card.slug)" target="_blank" variant="text" size="x-small" icon>
-                  <v-icon size="14">mdi-open-in-new</v-icon>
+                <v-btn
+                  variant="text"
+                  size="x-small"
+                  icon
+                  :title="`Remove ${card.teamName}`"
+                  @click="selectedTeams = selectedTeams.filter(s => s !== card.slug)"
+                >
+                  <v-icon size="14">mdi-close</v-icon>
                 </v-btn>
               </div>
               <div class="d-flex justify-space-between text-caption text-medium-emphasis">
@@ -821,6 +837,9 @@ export default defineComponent({
       }
     })
 
+    // ── Loading state ─────────────────────────────────────────────────────────
+    const isLoading = ref(false)
+
     // ── User Metrics ──────────────────────────────────────────────────────────
     const singleTeamUserMetrics = ref<UserTotals[]>([])
     const userMetricsError = ref<string | null>(null)
@@ -953,9 +972,12 @@ export default defineComponent({
         editorBarChartData.value = { labels: [], datasets: [] }
         singleTeamUserMetrics.value = []
         userMetricsError.value = null
+        isLoading.value = false
         return
       }
 
+      isLoading.value = true
+      try {
       const loaded = await Promise.all(selectedTeams.value.map(slug => loadMetricsForTeam(slug)))
       perTeamData.value = loaded
 
@@ -1039,6 +1061,9 @@ export default defineComponent({
         singleTeamUserMetrics.value = []
         userMetricsError.value = null
       }
+      } finally {
+        isLoading.value = false
+      }
     }
 
     onMounted(async () => { await loadTeams() })
@@ -1051,6 +1076,7 @@ export default defineComponent({
       // state
       availableTeams,
       selectedTeams,
+      isLoading,
       chartColumns,
       perTeamData,
       // modes

app/components/UserMetricsViewer.vue

@@ -311,6 +311,19 @@
         </div>
 
         <v-row>
+          <!-- Empty state when no user selected -->
+          <v-col v-if="!selectedUser" cols="12">
+            <v-alert
+              type="info"
+              variant="tonal"
+              density="compact"
+              icon="mdi-cursor-pointer"
+              class="mb-2"
+            >
+              <strong>Select a user</strong> from the table above to see their individual usage details, language breakdown, model preferences, and activity history.
+            </v-alert>
+          </v-col>
+
           <!-- 1. Language Distribution -->
           <v-col cols="12" :md="chartColumns === '2' ? 6 : 12">
             <v-card variant="outlined" class="pa-4">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-metrics-viewer",
-  "version": "3.3.1",
+  "version": "3.4.1",
   "private": true,
   "type": "module",
   "scripts": {