Add SpoolBuddy device management settings tab

Previously, if a SpoolBuddy daemon crashed during registration it could
  end up registered twice. The kiosk UI silently used only the first
  device and there was no UI path to remove the orphan — administrators
  had to delete the row directly in the database.

  Adds a new Settings → SpoolBuddy tab that lists every registered device
  with live connection status, system details (firmware, IP, CPU temp,
  memory, disk, OS, daemon + system uptime), hardware health flags, and
  an Unregister action gated by a confirm modal. A yellow banner appears
  whenever more than one device is registered to flag likely crash-
  duplicates. Backend adds DELETE /spoolbuddy/devices/{device_id} gated
  by inventory:delete and broadcasts spoolbuddy_unregistered over WS so
  other tabs refresh immediately.

  The tab header shows a device-count pill and a green/gray status bullet
  reflecting whether at least one registered device is online. An online
  device that is accidentally unregistered re-registers itself on its
  next heartbeat. Localized in English, German, and Japanese. The kiosk
  layout still uses devices[0] — once the orphan is unregistered, the
  remaining device naturally becomes [0].

frontend/src/components/SpoolBuddySettings.tsx

@@ -0,0 +1,295 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  Loader2,
+  Trash2,
+  Cpu,
+  HardDrive,
+  Thermometer,
+  Wifi,
+  WifiOff,
+  AlertTriangle,
+  Info,
+  CheckCircle2,
+  XCircle,
+  Clock,
+} from 'lucide-react';
+import { spoolbuddyApi, type SpoolBuddyDevice } from '../api/client';
+import { Card, CardContent, CardHeader } from './Card';
+import { Button } from './Button';
+import { ConfirmModal } from './ConfirmModal';
+import { useToast } from '../contexts/ToastContext';
+import { formatRelativeTime } from '../utils/date';
+
+function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.floor(seconds / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  const remM = m % 60;
+  if (h < 24) return remM ? `${h}h ${remM}m` : `${h}h`;
+  const d = Math.floor(h / 24);
+  const remH = h % 24;
+  return remH ? `${d}d ${remH}h` : `${d}d`;
+}
+
+function formatMB(mb?: number): string {
+  if (mb === undefined || mb === null) return '—';
+  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`;
+  return `${Math.round(mb)} MB`;
+}
+
+interface DeviceCardProps {
+  device: SpoolBuddyDevice;
+  onUnregister: (device: SpoolBuddyDevice) => void;
+  isDeleting: boolean;
+}
+
+function DeviceCard({ device, onUnregister, isDeleting }: DeviceCardProps) {
+  const { t } = useTranslation();
+  const stats = device.system_stats;
+  const mem = stats?.memory;
+  const disk = stats?.disk;
+  const online = device.online;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between gap-3 flex-wrap">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="text-base font-semibold text-white truncate">{device.hostname}</h3>
+              <span
+                className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
+                  online
+                    ? 'bg-green-500/15 text-green-400 border border-green-500/40'
+                    : 'bg-gray-500/15 text-gray-400 border border-gray-500/40'
+                }`}
+              >
+                {online ? <Wifi className="w-3 h-3" /> : <WifiOff className="w-3 h-3" />}
+                {online ? t('settings.spoolbuddy.online') : t('settings.spoolbuddy.offline')}
+              </span>
+            </div>
+            <p className="text-xs text-bambu-gray font-mono mt-1 truncate">{device.device_id}</p>
+          </div>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => onUnregister(device)}
+            disabled={isDeleting}
+            aria-label={t('settings.spoolbuddy.unregister')}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            <span className="hidden sm:inline">{t('settings.spoolbuddy.unregister')}</span>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {/* Connection */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
+          <div>
+            <div className="text-bambu-gray">{t('settings.spoolbuddy.ipAddress')}</div>
+            <div className="text-white font-mono">{device.ip_address}</div>
+          </div>
+          <div>
+            <div className="text-bambu-gray">{t('settings.spoolbuddy.firmware')}</div>
+            <div className="text-white">{device.firmware_version ?? '—'}</div>
+          </div>
+          <div>
+            <div className="text-bambu-gray flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {t('settings.spoolbuddy.lastSeen')}
+            </div>
+            <div className="text-white">
+              {device.last_seen ? formatRelativeTime(device.last_seen) : t('settings.spoolbuddy.never')}
+            </div>
+          </div>
+          <div>
+            <div className="text-bambu-gray">{t('settings.spoolbuddy.daemonUptime')}</div>
+            <div className="text-white">{formatUptime(device.uptime_s)}</div>
+          </div>
+        </div>
+
+        {/* Hardware flags */}
+        <div className="flex items-center gap-3 text-xs flex-wrap">
+          <span className="flex items-center gap-1 text-bambu-gray">
+            {device.nfc_ok ? (
+              <CheckCircle2 className="w-3.5 h-3.5 text-green-400" />
+            ) : (
+              <XCircle className="w-3.5 h-3.5 text-red-400" />
+            )}
+            {t('settings.spoolbuddy.nfc')}
+            {device.nfc_reader_type && <span className="text-bambu-gray/70">({device.nfc_reader_type})</span>}
+          </span>
+          <span className="flex items-center gap-1 text-bambu-gray">
+            {device.scale_ok ? (
+              <CheckCircle2 className="w-3.5 h-3.5 text-green-400" />
+            ) : (
+              <XCircle className="w-3.5 h-3.5 text-red-400" />
+            )}
+            {t('settings.spoolbuddy.scale')}
+          </span>
+        </div>
+
+        {/* System stats */}
+        {stats && (
+          <div className="pt-2 border-t border-bambu-dark-tertiary">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 text-xs">
+              {stats.cpu_temp_c !== undefined && (
+                <div className="flex items-center gap-2">
+                  <Thermometer className="w-3.5 h-3.5 text-bambu-gray" />
+                  <div>
+                    <div className="text-bambu-gray">{t('settings.spoolbuddy.cpuTemp')}</div>
+                    <div className="text-white">{stats.cpu_temp_c.toFixed(1)}°C</div>
+                  </div>
+                </div>
+              )}
+              {mem && mem.percent !== undefined && (
+                <div className="flex items-center gap-2">
+                  <Cpu className="w-3.5 h-3.5 text-bambu-gray" />
+                  <div>
+                    <div className="text-bambu-gray">{t('settings.spoolbuddy.memory')}</div>
+                    <div className="text-white">
+                      {mem.percent.toFixed(0)}% ({formatMB(mem.used_mb)} / {formatMB(mem.total_mb)})
+                    </div>
+                  </div>
+                </div>
+              )}
+              {disk && disk.percent !== undefined && (
+                <div className="flex items-center gap-2">
+                  <HardDrive className="w-3.5 h-3.5 text-bambu-gray" />
+                  <div>
+                    <div className="text-bambu-gray">{t('settings.spoolbuddy.disk')}</div>
+                    <div className="text-white">
+                      {disk.percent.toFixed(0)}% ({disk.used_gb?.toFixed(1)} / {disk.total_gb?.toFixed(1)} GB)
+                    </div>
+                  </div>
+                </div>
+              )}
+              {stats.system_uptime_s !== undefined && (
+                <div className="flex items-center gap-2">
+                  <Clock className="w-3.5 h-3.5 text-bambu-gray" />
+                  <div>
+                    <div className="text-bambu-gray">{t('settings.spoolbuddy.systemUptime')}</div>
+                    <div className="text-white">{formatUptime(stats.system_uptime_s)}</div>
+                  </div>
+                </div>
+              )}
+            </div>
+            {stats.os && (
+              <div className="mt-3 text-xs text-bambu-gray font-mono truncate">
+                {[stats.os.os, stats.os.kernel, stats.os.arch, stats.os.python && `Python ${stats.os.python}`]
+                  .filter(Boolean)
+                  .join(' · ')}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function SpoolBuddySettings() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const [pendingDelete, setPendingDelete] = useState<SpoolBuddyDevice | null>(null);
+
+  const { data: devices = [], isLoading } = useQuery({
+    queryKey: ['spoolbuddy-devices'],
+    queryFn: () => spoolbuddyApi.getDevices(),
+    refetchInterval: 15000,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (deviceId: string) => spoolbuddyApi.deleteDevice(deviceId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['spoolbuddy-devices'] });
+      showToast(t('settings.spoolbuddy.unregisterSuccess'), 'success');
+      setPendingDelete(null);
+    },
+    onError: (err: Error) => {
+      showToast(err.message || t('settings.spoolbuddy.unregisterError'), 'error');
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="py-8 flex justify-center">
+          <Loader2 className="w-6 h-6 animate-spin text-bambu-green" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const hasDuplicates = devices.length > 1;
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardContent className="py-3 px-4">
+          <div className="flex items-start gap-2 text-xs">
+            <Info className="w-4 h-4 text-blue-400 flex-shrink-0 mt-0.5" />
+            <div className="text-bambu-gray">
+              <p className="text-white font-medium mb-1">{t('settings.spoolbuddy.infoTitle')}</p>
+              <p>{t('settings.spoolbuddy.infoBody')}</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {hasDuplicates && (
+        <Card className="border-l-4 border-l-yellow-500">
+          <CardContent className="py-3 px-4">
+            <div className="flex items-start gap-2 text-xs">
+              <AlertTriangle className="w-4 h-4 text-yellow-500 flex-shrink-0 mt-0.5" />
+              <div className="text-bambu-gray">
+                <p className="text-white font-medium mb-1">
+                  {t('settings.spoolbuddy.duplicatesTitle', { count: devices.length })}
+                </p>
+                <p>{t('settings.spoolbuddy.duplicatesBody')}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {devices.length === 0 ? (
+        <Card>
+          <CardContent className="py-8 text-center text-bambu-gray text-sm">
+            {t('settings.spoolbuddy.empty')}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {devices.map((device) => (
+            <DeviceCard
+              key={device.id}
+              device={device}
+              onUnregister={setPendingDelete}
+              isDeleting={deleteMutation.isPending && deleteMutation.variables === device.device_id}
+            />
+          ))}
+        </div>
+      )}
+
+      {pendingDelete && (
+        <ConfirmModal
+          variant="danger"
+          title={t('settings.spoolbuddy.confirmTitle')}
+          message={t('settings.spoolbuddy.confirmBody', {
+            hostname: pendingDelete.hostname,
+            deviceId: pendingDelete.device_id,
+          })}
+          confirmText={t('settings.spoolbuddy.unregister')}
+          isLoading={deleteMutation.isPending}
+          onConfirm={() => deleteMutation.mutate(pendingDelete.device_id)}
+          onCancel={() => setPendingDelete(null)}
+        />
+      )}
+    </div>
+  );
+}