Add read-only MG4 ADB status collector

web/src/App.tsx

@@ -322,6 +322,17 @@ function StatusContent({ status }: { status: SystemStatus }) {
   const temperature = status.cpu.temperatureCelsius.available
     ? `${status.cpu.temperatureCelsius.value.toFixed(1)}°C`
     : "Unavailable";
+  const headUnitLabel = status.headUnit.available
+    ? status.headUnit.value.identity.model.available
+      ? status.headUnit.value.identity.model.value
+      : "Connected"
+    : status.headUnit.state === "unauthorized"
+      ? "Authorization required"
+      : status.headUnit.state === "disabled"
+        ? "Not configured"
+        : status.headUnit.state === "offline"
+          ? "Offline"
+          : "Unavailable";
 
   return (
     <div className="status-layout">
@@ -348,6 +359,7 @@ function StatusContent({ status }: { status: SystemStatus }) {
         <div><span>Operating system</span><strong>{status.operatingSystem}</strong></div>
         <div><span>Processor</span><strong>{status.cpu.model}</strong></div>
         <div><span>Wi-Fi detail</span><strong>{status.network.wifi.available ? status.network.wifi.value : status.network.wifi.reason}</strong></div>
+        <div><span>MG4 head unit</span><strong title={status.headUnit.available ? "ADB connected" : status.headUnit.reason}>{headUnitLabel}</strong></div>
       </section>
     </div>
   );

web/src/api.ts

@@ -10,6 +10,31 @@ export type Availability<T> =
   | { available: true; value: T }
   | { available: false; reason: string };
 
+export type HeadUnitStatus =
+  | {
+      available: true;
+      value: {
+        state: "connected";
+        identity: {
+          manufacturer: Availability<string>;
+          model: Availability<string>;
+          androidVersion: Availability<string>;
+          apiLevel: Availability<number>;
+          buildId: Availability<string>;
+          abi: Availability<string>;
+        };
+        display: {
+          size: Availability<{ widthPixels: number; heightPixels: number }>;
+          densityDpi: Availability<number>;
+        };
+      };
+    }
+  | {
+      available: false;
+      state: "disabled" | "unavailable" | "offline" | "unauthorized";
+      reason: string;
+    };
+
 export type SystemStatus = {
   collectedAt: string;
   hostname: string;
@@ -28,6 +53,7 @@ export type SystemStatus = {
     wifi: Availability<string>;
   };
   service: { state: "healthy"; processUptimeSeconds: number };
+  headUnit: HeadUnitStatus;
 };
 
 export type UpdateStatus = {

web/src/styles.css

@@ -99,7 +99,7 @@ button:disabled { opacity: 0.55; cursor: not-allowed; }
 .metric p { min-height: 2.6em; margin: 0; color: var(--muted); font-size: 0.83rem; line-height: 1.35; }
 .meter { height: 3px; margin-top: 17px; background: var(--line); }
 .meter span { display: block; height: 100%; background: var(--accent); }
-.system-strip { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 32px; padding: 22px 28px; border: 1px solid var(--line); border-radius: var(--radius); }
+.system-strip { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr 1fr; gap: 28px; padding: 22px 28px; border: 1px solid var(--line); border-radius: var(--radius); }
 .system-strip div { min-width: 0; display: grid; }
 .system-strip strong { overflow: hidden; color: #d9dfd3; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }