feat(helpdesk): redesign Historical tab with per-agent performance widgets

Each agent gets a card with three insight columns:
- Resolution time: Ø / Min / Max (formatted as hours or days)
- Top 3 customers by resolved ticket count (ranked list)
- Top 3 categories by resolved ticket count (ranked list)

Backend collects resolved ticket details per agent: customer names,
categories, and resolution hours. Aggregates top-3 and min/max/avg.
Replaces the old compact single-row layout with rich widget cards
matching the Current tab pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/helpdesk/web/css/helpdesk.css

@@ -300,39 +300,93 @@
     background: var(--app-warning, #f59e0b);
   }
 
-  /* Performance tab — compact rows */
-  .helpdesk-team-perf-row {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--app-spacing) * 0.5);
-    padding: calc(var(--app-spacing) * 0.35) 0;
-    border-bottom: 1px solid color-mix(in srgb, var(--app-muted-border-color) 40%, transparent);
-    font-size: var(--text-sm, 0.875rem);
-  }
-
-  .helpdesk-team-perf-row:last-child {
-    border-bottom: none;
-  }
-
-  .helpdesk-team-perf-name {
-    flex: 1;
-    font-weight: 500;
-  }
-
-  .helpdesk-team-perf-count {
-    font-variant-numeric: tabular-nums;
-    font-weight: 600;
-    font-size: 0.75rem;
-    padding: 0.1em 0.5em;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--app-success, #198754) 12%, transparent);
-    color: var(--app-success, #198754);
-  }
-
   .helpdesk-team-performance-panel > .helpdesk-segment-control {
     margin-bottom: calc(var(--app-spacing) * 0.75);
   }
 
+  /* Performance insights grid inside agent widget */
+  .helpdesk-team-perf-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: calc(var(--app-spacing) * 0.75);
+    padding: calc(var(--app-spacing) * 0.65) calc(var(--app-spacing) * 0.75);
+  }
+
+  @media (max-width: 760px) {
+    .helpdesk-team-perf-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .helpdesk-team-perf-stat-label {
+    display: block;
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: 600;
+    color: var(--app-muted-color);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: calc(var(--app-spacing) * 0.3);
+  }
+
+  .helpdesk-team-perf-times {
+    display: flex;
+    gap: calc(var(--app-spacing) * 0.75);
+  }
+
+  .helpdesk-team-perf-time {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .helpdesk-team-perf-time-value {
+    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+  }
+
+  .helpdesk-team-perf-time-label {
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--app-muted-color);
+  }
+
+  .helpdesk-team-perf-ranked {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    counter-reset: rank;
+  }
+
+  .helpdesk-team-perf-ranked li {
+    display: flex;
+    align-items: baseline;
+    gap: calc(var(--app-spacing) * 0.3);
+    padding: calc(var(--app-spacing) * 0.15) 0;
+    font-size: var(--text-sm, 0.875rem);
+    counter-increment: rank;
+  }
+
+  .helpdesk-team-perf-ranked li::before {
+    content: counter(rank) ".";
+    color: var(--app-muted-color);
+    font-size: var(--text-xs, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    min-width: 1.5ch;
+  }
+
+  .helpdesk-team-perf-ranked-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .helpdesk-team-perf-ranked-count {
+    font-variant-numeric: tabular-nums;
+    color: var(--app-muted-color);
+    font-size: var(--text-xs, 0.75rem);
+  }
+
   /* Clickable rows — shared between search results and ticket list */
   .app-clickable-row {
     cursor: pointer;