feat(dashboard): wire system stats to Core API with live gauges

- Add SystemStats freezed models matching Core API response
- Add systemStatsProvider to fetch stats from /tools/system/stats
- Update dashboard to display CPU, RAM, VRAM, and disk usage gauges
- Implement color-coded gauges: green ≤50%, orange 51-75%, red >75%
- Add auto-refresh every 30 seconds
- Improve gauge widget: speedometer style, icons below labels
- Update weather widget to match air quality vertical layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

lib/shared/widgets/gauge_widget.dart

@@ -2,7 +2,7 @@ import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
 
-/// A circular gauge widget for displaying percentage values.
+/// A speedometer-style gauge widget for displaying percentage values.
 ///
 /// Commonly used for system stats like CPU, Memory, Disk usage.
 class GaugeWidget extends StatelessWidget {
@@ -52,15 +52,19 @@ class GaugeWidget extends StatelessWidget {
     // Clamp value between 0 and 1
     final clampedValue = value.clamp(0.0, 1.0);
 
+    // Height is smaller since we only draw half circle
+    final gaugeHeight = size * 0.6;
+    final iconSpace = icon != null ? size * 0.36 : 0.0;
+
     return SizedBox(
       width: size,
-      height: size + 24, // Extra space for label
+      height: gaugeHeight + 32 + iconSpace, // Space for label + icon
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
           SizedBox(
             width: size,
-            height: size,
+            height: gaugeHeight,
             child: CustomPaint(
               painter: _GaugePainter(
                 value: clampedValue,
@@ -68,32 +72,21 @@ class GaugeWidget extends StatelessWidget {
                 backgroundColor: effectiveBackgroundColor,
                 strokeWidth: strokeWidth,
               ),
-              child: Center(
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    if (icon != null) ...[
-                      Icon(
-                        icon,
-                        size: size * 0.2,
-                        color: effectiveColor,
-                      ),
-                      SizedBox(height: size * 0.02),
-                    ],
-                    if (showPercentage)
-                      Text(
+              child: Align(
+                alignment: const Alignment(0, 0.6),
+                child: showPercentage
+                    ? Text(
                         '${(clampedValue * 100).round()}%',
                         style: Theme.of(context).textTheme.titleLarge?.copyWith(
                               fontWeight: FontWeight.bold,
-                              fontSize: size * 0.18,
+                              fontSize: size * 0.2,
                             ),
-                      ),
-                  ],
-                ),
+                      )
+                    : const SizedBox.shrink(),
               ),
             ),
           ),
-          const SizedBox(height: 8),
+          const SizedBox(height: 4),
           Text(
             label,
             style: Theme.of(context).textTheme.bodySmall?.copyWith(
@@ -103,6 +96,14 @@ class GaugeWidget extends StatelessWidget {
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
           ),
+          if (icon != null) ...[
+            const SizedBox(height: 8),
+            Icon(
+              icon,
+              size: size * 0.28,
+              color: effectiveColor,
+            ),
+          ],
         ],
       ),
     );
@@ -124,12 +125,13 @@ class _GaugePainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    final center = Offset(size.width / 2, size.height / 2);
+    // Center at bottom of widget for speedometer style
+    final center = Offset(size.width / 2, size.height);
     final radius = (size.width - strokeWidth) / 2;
 
-    // Start from top (-90 degrees) and sweep clockwise
-    const startAngle = -math.pi / 2;
-    const sweepAngle = 2 * math.pi;
+    // Speedometer arc: starts from left (180°) and sweeps 180° to right
+    const startAngle = math.pi; // 180 degrees (left side)
+    const sweepAngle = math.pi; // 180 degrees sweep (semicircle)
 
     // Background arc
     final backgroundPaint = Paint()
@@ -187,7 +189,7 @@ class GaugeRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Wrap(
-      spacing: 16,
+      spacing: 24,
       runSpacing: 16,
       alignment: WrapAlignment.center,
       children: gauges
@@ -196,6 +198,7 @@ class GaugeRow extends StatelessWidget {
               value: data.value,
               label: data.label,
               size: gaugeSize,
+              strokeWidth: gaugeSize * 0.1,
               color: data.color,
               icon: data.icon,
             ),