From c573c6414cb602303c75233a2b05882aaa70a6de Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sun, 7 Dec 2025 13:12:08 +0100
Subject: [PATCH] Add machine info tooltip to serial number in header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show detailed machine information when hovering over serial number:
- Serial number
- MAC address
- Total stitches sewn by machine
- Stitches since last service

Tooltip dynamically includes only available information.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/App.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6cb39e0..b4edf53 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -118,7 +118,24 @@ function App() {
               <div className="flex items-center gap-2">
                 <h1 className="text-lg font-bold text-white leading-tight">SKiTCH Controller</h1>
                 {machine.isConnected && machine.machineInfo?.serialNumber && (
-                  <span className="text-sm text-blue-200">• {machine.machineInfo.serialNumber}</span>
+                  <span
+                    className="text-sm text-blue-200 cursor-help"
+                    title={`Serial: ${machine.machineInfo.serialNumber}${
+                      machine.machineInfo.macAddress
+                        ? `\nMAC: ${machine.machineInfo.macAddress}`
+                        : ''
+                    }${
+                      machine.machineInfo.totalCount !== undefined
+                        ? `\nTotal stitches: ${machine.machineInfo.totalCount.toLocaleString()}`
+                        : ''
+                    }${
+                      machine.machineInfo.serviceCount !== undefined
+                        ? `\nStitches since service: ${machine.machineInfo.serviceCount.toLocaleString()}`
+                        : ''
+                    }`}
+                  >
+                    • {machine.machineInfo.serialNumber}
+                  </span>
                 )}
                 {machine.isPolling && (
                   <ArrowPathIcon className="w-3.5 h-3.5 text-blue-200 animate-spin" title="Auto-refreshing status" />