fix(metrics): explain what 100% CPU means in chart tooltips

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

resources/views/livewire/fleet/metrics.blade.php

@@ -6,6 +6,10 @@ $tabButtonInactive = 'text-neutral-500 hover:text-black dark:text-fg-faint dark:
 // Tiles read "Fleet …" across all servers, but just "CPU / Memory / …" when scoped to one.
 $scoped = $serverUuid !== '';
 
+$cpuHelper = $scoped
+    ? 'Average usage of all CPU cores on this server. 100% means that all cores are fully busy.'
+    : 'Average CPU usage of the servers. The value of each server is the average of all its CPU cores, so 100% means that all cores are fully busy. Servers are not weighted by their number of cores.';
+
 $rangeListboxOptions = [
     ['value' => '24h', 'label' => 'Last 24 hours'],
     ['value' => '7d', 'label' => 'Last 7 days'],
@@ -213,7 +217,7 @@ $serverListboxOptions = array_merge(
              fleet series fall into a clean 2x2 below (no orphaned cell). --}}
         <div class="grid gap-6 lg:grid-cols-2">
             @foreach (['cpu' => 'CPU', 'memory' => 'Memory used', 'network' => 'Network throughput', 'load' => 'Load average', 'disk' => 'Disk usage'] as $key => $label)
-                <x-application.settings-section :title="$label" @class(['lg:col-span-2' => $key === 'cpu'])>
+                <x-application.settings-section :title="$label" :helper="$key === 'cpu' ? $cpuHelper : null" @class(['lg:col-span-2' => $key === 'cpu'])>
                     <x-slot:actions>
                         <div wire:ignore id="fleet-chart-{{ $key }}-legend" class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs"></div>
                     </x-slot:actions>
@@ -231,7 +235,7 @@ $serverListboxOptions = array_merge(
                 <div class="data-table-header fleet-servers-table-grid border-b-0!">
                     @include('livewire.traffic._sort-header', ['column' => 'name', 'label' => 'Server', 'text' => true, 'class' => 'justify-self-start'])
                     @foreach (['cpu' => 'CPU', 'memory' => 'Memory', 'disk' => 'Disk', 'load' => 'Load', 'network' => 'Network'] as $column => $label)
-                        @include('livewire.traffic._sort-header', ['column' => $column, 'label' => $label, 'text' => true, 'dir' => 'desc', 'class' => 'justify-self-start'])
+                        @include('livewire.traffic._sort-header', ['column' => $column, 'label' => $label, 'text' => true, 'dir' => 'desc', 'class' => 'justify-self-start', 'title' => $column === 'cpu' ? 'Sort by CPU. 100% means that all cores of the server are fully busy.' : null])
                     @endforeach
                     @include('livewire.traffic._sort-header', ['column' => 'containers', 'label' => 'Containers', 'class' => 'justify-self-end'])
                 </div>
@@ -296,7 +300,7 @@ $serverListboxOptions = array_merge(
                         @include('livewire.traffic._sort-header', ['column' => 'name', 'label' => 'Container', 'text' => true, 'class' => 'justify-self-start'])
                         @include('livewire.traffic._sort-header', ['column' => 'server', 'label' => 'Server', 'text' => true, 'class' => 'justify-self-start'])
                         @foreach ($containerMetrics as $key => $label)
-                            @include('livewire.traffic._sort-header', ['column' => $key, 'label' => $label, 'class' => 'justify-self-end'])
+                            @include('livewire.traffic._sort-header', ['column' => $key, 'label' => $label, 'class' => 'justify-self-end', 'title' => $key === 'cpu' ? 'Sort by CPU. 100% means one CPU core is fully busy, so a container can go above 100%.' : null])
                         @endforeach
                     </div>
                     <div class="flex flex-col">

resources/views/livewire/project/shared/metrics.blade.php

@@ -63,7 +63,7 @@
         </x-application.settings-section>
 
         <x-application.settings-section id="cpu-metrics-section" title="CPU usage"
-            helper="Percentage of available CPU capacity used by the application container.">
+            helper="CPU usage of the container, as in docker stats. 100% means one CPU core is fully busy, so a container that uses more than one core can go above 100%. The maximum is the number of cores × 100%.">
             <x-slot:actions>
                 <div wire:ignore id="{!! $chartId !!}-cpu-legend" class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs"></div>
             </x-slot:actions>

resources/views/livewire/server/charts.blade.php

@@ -63,7 +63,7 @@
                      charts fall into a 2x2 below (mirrors the fleet /metrics layout). --}}
                 <div class="grid gap-6 lg:grid-cols-2">
                     <x-application.settings-section id="server-cpu-metrics-section" title="CPU usage" class="lg:col-span-2"
-                        helper="Percentage of available CPU capacity used by this server.">
+                        helper="Average usage of all CPU cores on this server. 100% means that all cores are fully busy. For example, on a server with 8 cores, one fully busy core shows as 12.5%.">
                         <x-slot:actions>
                             <div wire:ignore id="{!! $chartId !!}-cpu-legend" class="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs"></div>
                         </x-slot:actions>