@elizaos/plugin-facewear 2.0.3-beta.5 → 2.0.3-beta.7

package/dist/ui/SmartglassesView.js

@@ -0,0 +1,1189 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAgentElement } from "@elizaos/ui/agent-surface";
+import {
+  BatteryCharging,
+  Bluetooth,
+  CheckCircle2,
+  Circle,
+  Clipboard,
+  Download,
+  Glasses,
+  Mic,
+  RefreshCw,
+  Settings2,
+  Wifi,
+  XCircle
+} from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import {
+  encodeBatteryStatusRequest,
+  encodeBrightness,
+  encodeClearScreen,
+  encodeConnectionReady,
+  encodeGetSerial,
+  encodeSilentMode
+} from "../protocol/smartglasses.js";
+import { EvenBridgeTransport } from "../transport/even-bridge.js";
+import {
+  getWebBluetoothG1Transport,
+  WebBluetoothG1Transport
+} from "../transport/web-bluetooth.js";
+import {
+  buildViewDisplayPackets,
+  callWifiBridge,
+  formatWifiStatus,
+  headsetValidationBlocker,
+  isCradleOrChargingState,
+  isMicDisableTap,
+  isMicEnableTap,
+  missingViewEvidence,
+  parseWifiNetworks,
+  viewCommandName,
+  viewNextAction,
+  viewPhysicalBlocker,
+  viewScanDiagnosis,
+  viewSetupHint
+} from "./SmartglassesView.helpers.js";
+const VISIBLE_TEST_LIMIT = 8;
+const VISIBLE_EVENT_LIMIT = 12;
+const VISIBLE_WIFI_LIMIT = 5;
+const PLATFORM_COPY = {
+  desktop: {
+    label: "Desktop",
+    primary: "Chrome/Edge Web Bluetooth",
+    secondary: "Pair both lenses."
+  },
+  ios: {
+    label: "iOS",
+    primary: "Native bridge required",
+    secondary: "Use the host bridge."
+  },
+  android: {
+    label: "Android",
+    primary: "Native bridge preferred",
+    secondary: "Pair and configure in the host."
+  }
+};
+const DISPLAY_PRESETS = [
+  {
+    id: "status",
+    label: "Status",
+    text: "elizaOS smartglasses link online.",
+    className: "border-green-500/40 bg-green-500/10 text-green-700"
+  },
+  {
+    id: "ping",
+    label: "Ping",
+    text: "Display ping. Confirm both lenses render this page.",
+    className: "border-accent/45 bg-accent/10 text-accent"
+  },
+  {
+    id: "nav",
+    label: "Nav",
+    text: "Navigation card ready. Keep eyes forward.",
+    className: "border-amber-500/40 bg-amber-500/10 text-amber-700"
+  }
+];
+function now() {
+  return (/* @__PURE__ */ new Date()).toISOString();
+}
+function timeout(promise, timeoutMs, message) {
+  return new Promise((resolve, reject) => {
+    const id = window.setTimeout(() => reject(new Error(message)), timeoutMs);
+    promise.then(
+      (value) => {
+        window.clearTimeout(id);
+        resolve(value);
+      },
+      (err) => {
+        window.clearTimeout(id);
+        reject(err);
+      }
+    );
+  });
+}
+function normalizeError(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function sleep(ms) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+function getBridge() {
+  if (typeof window === "undefined") return null;
+  return window.__mentraBridge ?? window.__evenBridge ?? null;
+}
+function bytesToHex(data) {
+  return [...data].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+function SmartglassesView() {
+  const [transport, setTransport] = useState(
+    null
+  );
+  const [lenses, setLenses] = useState({
+    left: "idle",
+    right: "idle"
+  });
+  const [events, setEvents] = useState([]);
+  const [writes, setWrites] = useState([]);
+  const [audioChunks, setAudioChunks] = useState([]);
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const [testText, setTestText] = useState("Smartglasses display test.");
+  const [micEnabled, setMicEnabled] = useState(false);
+  const [wifiSsid, setWifiSsid] = useState("");
+  const [wifiPassword, setWifiPassword] = useState("");
+  const [wifiStatus, setWifiStatus] = useState("Not checked");
+  const [wifiNetworks, setWifiNetworks] = useState([]);
+  const [activePlatform, setActivePlatform] = useState("desktop");
+  const [physicalState, setPhysicalState] = useState(null);
+  const [batteryState, setBatteryState] = useState(null);
+  const [batteryLevels, setBatteryLevels] = useState({});
+  const [deviceState, setDeviceState] = useState(null);
+  const [serialNumber, setSerialNumber] = useState(null);
+  const [tests, setTests] = useState({
+    headsetConnected: false,
+    init: false,
+    display: false,
+    serial: false,
+    serialObserved: false,
+    settings: false,
+    microphone: false,
+    micEnableWrite: false,
+    micDisableWrite: false,
+    tapMicEnable: false,
+    tapMicDisable: false,
+    audio: false,
+    transcript: false,
+    eventStream: false
+  });
+  const testsRef = useRef(tests);
+  const displaySeqRef = useRef(0);
+  const bridge = getBridge();
+  const webBluetoothAvailable = Boolean(getWebBluetoothG1Transport());
+  const headsetConnected = lenses.left === "connected" && lenses.right === "connected";
+  const missingEvidence = useMemo(
+    () => missingViewEvidence(
+      tests,
+      lenses,
+      physicalState,
+      batteryState,
+      events,
+      writes
+    ),
+    [batteryState, events, lenses, physicalState, tests, writes]
+  );
+  const physicalBlocker = useMemo(
+    () => viewPhysicalBlocker(
+      tests,
+      lenses,
+      physicalState,
+      batteryState,
+      events,
+      writes
+    ),
+    [batteryState, events, lenses, physicalState, tests, writes]
+  );
+  const report = useMemo(
+    () => ({
+      ok: missingEvidence.length === 0,
+      generatedAt: now(),
+      transport: transport?.name ?? (bridge ? "native-bridge" : null),
+      connected: headsetConnected,
+      lenses,
+      scanDiagnosis: viewScanDiagnosis(lenses),
+      physicalBlocker,
+      setupHint: viewSetupHint(physicalBlocker, physicalState, batteryState),
+      nextAction: viewNextAction(physicalBlocker),
+      serialNumber,
+      tests,
+      missingEvidence,
+      events,
+      writes,
+      audio: audioChunks,
+      wifi: {
+        available: Boolean(bridge),
+        status: wifiStatus,
+        networks: wifiNetworks
+      },
+      headsetState: {
+        physical: physicalState,
+        battery: batteryState,
+        batteryLevels,
+        device: deviceState
+      }
+    }),
+    [
+      bridge,
+      audioChunks,
+      events,
+      headsetConnected,
+      lenses,
+      missingEvidence,
+      physicalBlocker,
+      physicalState,
+      serialNumber,
+      tests,
+      transport,
+      batteryState,
+      batteryLevels,
+      deviceState,
+      wifiNetworks,
+      wifiStatus,
+      writes
+    ]
+  );
+  const { ref: connectRef, agentProps: connectAgentProps } = useAgentElement({
+    id: "setup-connect-headset",
+    role: "button",
+    label: "Connect",
+    group: "setup",
+    status: headsetConnected ? "active" : "inactive",
+    description: "Pair both left and right smartglasses lenses as one headset"
+  });
+  const { ref: runCheckRef, agentProps: runCheckAgentProps } = useAgentElement({
+    id: "test-run-check",
+    role: "button",
+    label: "Run Check",
+    group: "test",
+    description: "Request serial/battery and send display/settings packets"
+  });
+  const { ref: wifiSsidRef, agentProps: wifiSsidAgentProps } = useAgentElement({
+    id: "wifi-ssid",
+    role: "text-input",
+    label: "Wi-Fi SSID",
+    group: "wifi",
+    description: "SSID of the Wi-Fi network to configure on the glasses",
+    getValue: () => wifiSsid,
+    onFill: (value) => setWifiSsid(value)
+  });
+  const { ref: wifiPasswordRef, agentProps: wifiPasswordAgentProps } = useAgentElement({
+    id: "wifi-password",
+    role: "text-input",
+    label: "Wi-Fi password",
+    group: "wifi",
+    description: "Password for the Wi-Fi network to configure on the glasses",
+    getValue: () => wifiPassword,
+    onFill: (value) => setWifiPassword(value)
+  });
+  function appendEvent(type, detail) {
+    setEvents(
+      (current) => [...current, { at: now(), type, detail }].slice(-80)
+    );
+  }
+  function markTest(id, value = true) {
+    setTests((current) => {
+      const next = { ...current, [id]: value };
+      testsRef.current = next;
+      return next;
+    });
+  }
+  function recordWrite(side, data) {
+    setWrites(
+      (current) => [
+        ...current,
+        {
+          at: now(),
+          side,
+          command: viewCommandName(data),
+          bytes: data.length,
+          hex: bytesToHex(data.slice(0, 24))
+        }
+      ].slice(-120)
+    );
+  }
+  async function writeSide(nextTransport, side, data) {
+    await nextTransport.write(side, data);
+    recordWrite(side, data);
+  }
+  async function writeBoth(nextTransport, data) {
+    await nextTransport.writeBoth(data);
+    recordWrite("both", data);
+  }
+  async function setTransportMic(nextTransport, enabled) {
+    await nextTransport.openMicrophone(enabled);
+    recordWrite("right", Uint8Array.from([14, enabled ? 1 : 0]));
+  }
+  async function connectHeadset() {
+    setBusy("connect");
+    setError(null);
+    try {
+      const nextTransport = transport ?? (bridge ? new EvenBridgeTransport(bridge) : new WebBluetoothG1Transport());
+      setTransport(nextTransport);
+      const eventDispose = nextTransport.onEvent((event) => {
+        markTest("eventStream");
+        if (event.stateCategory === "physical") {
+          setPhysicalState(event.stateName ?? event.label ?? null);
+        } else if (event.stateCategory === "battery") {
+          setBatteryState(event.stateName ?? event.label ?? null);
+        } else if (event.stateCategory === "device") {
+          setDeviceState(event.stateName ?? event.label ?? null);
+        }
+        if (event.type === "battery-status" && typeof event.batteryPercent === "number") {
+          setBatteryLevels((current) => ({
+            ...current,
+            [event.side]: event.batteryPercent
+          }));
+        }
+        if (event.type === "serial" && event.serialNumber) {
+          setSerialNumber(event.serialNumber);
+          markTest("serialObserved");
+        }
+        if (isMicEnableTap(event.label)) {
+          markTest("tapMicEnable");
+          setMicEnabled(true);
+          const eventAt = now();
+          setEvents(
+            (current) => [
+              ...current,
+              { at: eventAt, type: "tap", detail: event.label ?? "" }
+            ].slice(-80)
+          );
+          void nextTransport.openMicrophone(true).then(() => {
+            recordWrite("right", Uint8Array.from([14, 1]));
+            markTest("microphone");
+            markTest("micEnableWrite");
+            appendEvent("microphone", "Enabled by tap");
+          }).catch((err) => appendEvent("error", normalizeError(err)));
+        }
+        if (isMicDisableTap(event.label)) {
+          markTest("tapMicDisable");
+          setMicEnabled(false);
+          const eventAt = now();
+          setEvents(
+            (current) => [
+              ...current,
+              { at: eventAt, type: "tap", detail: event.label ?? "" }
+            ].slice(-80)
+          );
+          void nextTransport.openMicrophone(false).then(() => {
+            recordWrite("right", Uint8Array.from([14, 0]));
+            markTest("microphone");
+            markTest("micDisableWrite");
+            appendEvent("microphone", "Disabled by tap");
+          }).catch((err) => appendEvent("error", normalizeError(err)));
+        }
+        appendEvent(
+          "event",
+          `${event.side} ${event.type}${event.label ? ` ${event.label}` : ""}`
+        );
+      });
+      const audioDispose = nextTransport.onAudio(
+        (audio, sampleRate, side, encoding, sequence) => {
+          if (audio.byteLength > 0) markTest("audio");
+          setAudioChunks(
+            (current) => [
+              ...current,
+              {
+                at: now(),
+                side,
+                sampleRate,
+                encoding: encoding ?? null,
+                sequence,
+                bytes: audio.byteLength
+              }
+            ].slice(-80)
+          );
+          appendEvent(
+            "audio",
+            `${side} ${audio.byteLength} bytes @ ${sampleRate}Hz${encoding ? ` ${encoding}` : ""}`
+          );
+        }
+      );
+      const transcriptDispose = "onTranscript" in nextTransport && nextTransport.onTranscript ? nextTransport.onTranscript((text, isFinal) => {
+        markTest("transcript");
+        appendEvent(
+          "transcript",
+          `${isFinal ? "final" : "partial"} ${text}`
+        );
+      }) : void 0;
+      try {
+        if (nextTransport instanceof WebBluetoothG1Transport) {
+          await connectLens(nextTransport, "left");
+          await connectLens(nextTransport, "right");
+        } else {
+          await nextTransport.connect();
+          setLenses({ left: "connected", right: "connected" });
+        }
+      } catch (err) {
+        eventDispose();
+        audioDispose();
+        transcriptDispose?.();
+        throw err;
+      }
+      await writeSide(nextTransport, "left", encodeConnectionReady("left"));
+      await writeSide(nextTransport, "right", encodeConnectionReady("right"));
+      markTest("headsetConnected");
+      markTest("init");
+      appendEvent("connect", "Whole headset connected");
+    } catch (err) {
+      setError(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function connectLens(nextTransport, side) {
+    setLenses((current) => ({ ...current, [side]: "prompting" }));
+    appendEvent("pairing", `Select the ${side} lens in the Bluetooth picker`);
+    try {
+      await timeout(
+        nextTransport.connectLens(side),
+        6e4,
+        `Timed out connecting the ${side} lens`
+      );
+      setLenses((current) => ({ ...current, [side]: "connected" }));
+      appendEvent("connect", `${side} lens connected`);
+    } catch (err) {
+      setLenses((current) => ({ ...current, [side]: "failed" }));
+      throw err;
+    }
+  }
+  async function requireTransport() {
+    if (!transport || !headsetConnected) {
+      throw new Error("Connect the whole headset before running this test");
+    }
+    return transport;
+  }
+  async function sendDisplay() {
+    setBusy("display");
+    setError(null);
+    try {
+      const nextTransport = await requireTransport();
+      const display = buildViewDisplayPackets(testText, {
+        startSeq: displaySeqRef.current
+      });
+      displaySeqRef.current = display.nextSeq;
+      for (const packet of display.packets) {
+        await writeBoth(nextTransport, packet);
+      }
+      markTest("display");
+      appendEvent("display", `Sent ${display.pages} display page(s)`);
+    } catch (err) {
+      setError(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function clearDisplay() {
+    setBusy("clear");
+    setError(null);
+    try {
+      const nextTransport = await requireTransport();
+      await writeBoth(nextTransport, encodeClearScreen());
+      appendEvent("display", "Cleared display");
+    } catch (err) {
+      setError(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function runHardwareCheck() {
+    setBusy("check");
+    setError(null);
+    try {
+      const nextTransport = await requireTransport();
+      await writeSide(nextTransport, "left", encodeGetSerial());
+      await writeBoth(nextTransport, encodeBatteryStatusRequest());
+      await writeBoth(nextTransport, encodeBrightness(32));
+      await writeBoth(nextTransport, encodeSilentMode(false));
+      markTest("serial");
+      markTest("settings");
+      appendEvent("test", "Requested serial/battery and sent settings packets");
+      await sendDisplay();
+    } catch (err) {
+      setError(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+      setBusy(null);
+    }
+  }
+  async function runGuidedValidation() {
+    setBusy("guided");
+    setError(null);
+    let nextTransport = null;
+    try {
+      nextTransport = await requireTransport();
+      const blocker = headsetValidationBlocker(physicalState, batteryState);
+      if (blocker) {
+        throw new Error(blocker);
+      }
+      await setTransportMic(nextTransport, false);
+      setMicEnabled(false);
+      markTest("microphone");
+      markTest("micDisableWrite");
+      const display = buildViewDisplayPackets(
+        "Validation: single tap, speak clearly, then double tap.",
+        { startSeq: displaySeqRef.current }
+      );
+      displaySeqRef.current = display.nextSeq;
+      for (const packet of display.packets) {
+        await writeBoth(nextTransport, packet);
+      }
+      markTest("display");
+      appendEvent("validation", "Single tap, speak clearly, then double tap");
+      const deadline = Date.now() + 6e4;
+      while (Date.now() < deadline) {
+        const current2 = testsRef.current;
+        if (current2.tapMicEnable && current2.audio && current2.tapMicDisable) {
+          appendEvent("validation", "Side-tap microphone validation passed");
+          return;
+        }
+        await sleep(500);
+      }
+      const current = testsRef.current;
+      const missing = [
+        !current.tapMicEnable && "tap mic enable",
+        !current.audio && "right/bridge audio",
+        !current.tapMicDisable && "tap mic disable"
+      ].filter(Boolean);
+      throw new Error(`Guided validation missing: ${missing.join(", ")}`);
+    } catch (err) {
+      setError(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      try {
+        if (nextTransport) {
+          await setTransportMic(nextTransport, false);
+          setMicEnabled(false);
+        }
+      } catch {
+      }
+      setBusy(null);
+    }
+  }
+  async function toggleMic(enabled) {
+    setBusy(enabled ? "mic-on" : "mic-off");
+    setError(null);
+    try {
+      const nextTransport = await requireTransport();
+      await setTransportMic(nextTransport, enabled);
+      setMicEnabled(enabled);
+      markTest("microphone");
+      markTest(enabled ? "micEnableWrite" : "micDisableWrite");
+      appendEvent("microphone", enabled ? "Enabled" : "Disabled");
+    } catch (err) {
+      setError(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function scanWifi() {
+    setBusy("wifi-scan");
+    setError(null);
+    try {
+      if (!bridge) throw new Error("Unavailable");
+      const result = await callWifiBridge(bridge, "request_wifi_scan");
+      const networks = parseWifiNetworks(result);
+      setWifiNetworks(networks);
+      setWifiStatus(
+        networks.length > 0 ? `Found ${networks.length} network(s)` : "Scan requested; waiting for bridge results"
+      );
+      appendEvent("wifi", "Requested Wi-Fi scan through bridge");
+    } catch (err) {
+      setError(normalizeError(err));
+      setWifiStatus(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function refreshWifiStatus() {
+    setBusy("wifi-status");
+    setError(null);
+    try {
+      if (!bridge) throw new Error("Unavailable");
+      const result = await callWifiBridge(bridge, "request_wifi_status");
+      const networks = parseWifiNetworks(result);
+      if (networks.length > 0) setWifiNetworks(networks);
+      setWifiStatus(formatWifiStatus(result));
+      appendEvent("wifi", "Requested Wi-Fi status through bridge");
+    } catch (err) {
+      setError(normalizeError(err));
+      setWifiStatus(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function configureWifi() {
+    setBusy("wifi-configure");
+    setError(null);
+    try {
+      if (!bridge) throw new Error("Unavailable");
+      if (!wifiSsid.trim()) throw new Error("Enter a Wi-Fi SSID");
+      await callWifiBridge(bridge, "set_wifi_credentials", {
+        ssid: wifiSsid.trim(),
+        password: wifiPassword
+      });
+      setWifiStatus(`Credentials sent for ${wifiSsid.trim()}`);
+      appendEvent("wifi", `Sent credentials for ${wifiSsid.trim()}`);
+    } catch (err) {
+      setError(normalizeError(err));
+      setWifiStatus(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function requestWifiSetup() {
+    setBusy("wifi-setup");
+    setError(null);
+    try {
+      if (!bridge) throw new Error("Unavailable");
+      await callWifiBridge(bridge, "request_wifi_setup", {
+        reason: "Smartglasses setup"
+      });
+      setWifiStatus("Native Wi-Fi setup requested");
+      appendEvent("wifi", "Requested native Wi-Fi setup flow");
+    } catch (err) {
+      setError(normalizeError(err));
+      setWifiStatus(normalizeError(err));
+      appendEvent("error", normalizeError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function copyReport() {
+    window.facewearSmartglassesReport = report;
+    await navigator.clipboard?.writeText(JSON.stringify(report, null, 2));
+    appendEvent("report", "Copied diagnostics report");
+  }
+  function downloadReport() {
+    window.facewearSmartglassesReport = report;
+    const blob = new Blob([JSON.stringify(report, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `smartglasses-report-${Date.now()}.json`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+    appendEvent("report", "Downloaded diagnostics report");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto bg-bg text-txt", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Glasses, { className: "h-4 w-4 text-accent" }),
+        /* @__PURE__ */ jsx("h1", { className: "text-sm font-semibold", children: "Smartglasses" })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        StatusPill,
+        {
+          ok: headsetConnected,
+          label: headsetConnected ? "Connected" : "Offline"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-3 p-4", children: [
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Setup" }) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: connectRef,
+              type: "button",
+              onClick: () => void connectHeadset(),
+              disabled: !bridge && !webBluetoothAvailable || busy !== null,
+              "aria-label": "Connect",
+              className: "inline-flex h-9 items-center gap-2 rounded-md bg-accent px-3 text-sm font-medium text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              ...connectAgentProps,
+              children: [
+                /* @__PURE__ */ jsx(Bluetooth, { className: "h-4 w-4" }),
+                "Connect"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-3 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(LensStatus, { side: "left", state: lenses.left }),
+          /* @__PURE__ */ jsx(LensStatus, { side: "right", state: lenses.right })
+        ] }),
+        !webBluetoothAvailable && /* @__PURE__ */ jsx("p", { className: "mt-3 px-1 text-xs text-muted", children: "Web Bluetooth unavailable" }),
+        /* @__PURE__ */ jsx(
+          HeadsetStateHint,
+          {
+            physicalState,
+            batteryState,
+            deviceState
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Platform" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-3 gap-1", children: Object.keys(PLATFORM_COPY).map((key) => /* @__PURE__ */ jsx(
+          PlatformTabButton,
+          {
+            platformKey: key,
+            isActive: activePlatform === key,
+            onSelect: setActivePlatform
+          },
+          key
+        )) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-txt", children: PLATFORM_COPY[activePlatform].primary }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted", children: PLATFORM_COPY[activePlatform].secondary })
+      ] }),
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Test" }) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: runCheckRef,
+              type: "button",
+              onClick: () => void runHardwareCheck(),
+              disabled: !headsetConnected || busy !== null,
+              "aria-label": "Run Check",
+              className: "inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50",
+              ...runCheckAgentProps,
+              children: [
+                /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                "Check"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-3 gap-2", children: DISPLAY_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setTestText(preset.text),
+            "aria-pressed": testText === preset.text,
+            className: `h-14 px-3 text-left text-xs font-semibold transition ${testText === preset.text ? preset.className : "text-muted hover:text-txt"}`,
+            children: preset.label
+          },
+          preset.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: sendDisplay,
+              disabled: !headsetConnected || busy !== null,
+              agentId: "test-send-display",
+              agentLabel: "Send Display",
+              agentGroup: "test",
+              agentDescription: "Send the display test text to the smartglasses",
+              children: "Display"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: clearDisplay,
+              disabled: !headsetConnected || busy !== null,
+              agentId: "test-clear-display",
+              agentLabel: "Clear Display",
+              agentGroup: "test",
+              agentDescription: "Clear the smartglasses display",
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ActionButton,
+            {
+              onClick: () => toggleMic(!micEnabled),
+              disabled: !headsetConnected || busy !== null,
+              agentId: "test-toggle-mic",
+              agentLabel: micEnabled ? "Turn Mic Off" : "Turn Mic On",
+              agentGroup: "test",
+              agentDescription: "Toggle the smartglasses microphone on or off",
+              children: [
+                /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" }),
+                micEnabled ? "Mic Off" : "Mic On"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: runGuidedValidation,
+              disabled: !headsetConnected || busy !== null,
+              agentId: "test-guided-validation",
+              agentLabel: "Guided Validation",
+              agentGroup: "test",
+              agentDescription: "Run the guided side-tap and microphone validation flow",
+              children: "Validate"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-2 sm:grid-cols-2", children: [
+          Object.entries(tests).slice(0, VISIBLE_TEST_LIMIT).map(([id, ok]) => /* @__PURE__ */ jsx(CheckRow, { ok, label: labelForTest(id) }, id)),
+          Object.keys(tests).length > VISIBLE_TEST_LIMIT ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs text-muted", children: [
+            "+",
+            Object.keys(tests).length - VISIBLE_TEST_LIMIT,
+            " checks"
+          ] }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Wifi, { className: "h-4 w-4 text-accent" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Wi-Fi" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-2 sm:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: wifiSsidRef,
+              value: wifiSsid,
+              onChange: (event) => setWifiSsid(event.target.value),
+              placeholder: "SSID",
+              "aria-label": "Wi-Fi SSID",
+              className: "h-9 rounded-md border border-border bg-bg px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
+              ...wifiSsidAgentProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: wifiPasswordRef,
+              value: wifiPassword,
+              onChange: (event) => setWifiPassword(event.target.value),
+              placeholder: "Password",
+              type: "password",
+              "aria-label": "Wi-Fi password",
+              className: "h-9 rounded-md border border-border bg-bg px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
+              ...wifiPasswordAgentProps
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: scanWifi,
+              disabled: !bridge || busy !== null,
+              agentId: "wifi-scan",
+              agentLabel: "Scan Wi-Fi",
+              agentGroup: "wifi",
+              agentDescription: "Scan for nearby Wi-Fi networks through the native bridge",
+              children: "Scan"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: refreshWifiStatus,
+              disabled: !bridge || busy !== null,
+              agentId: "wifi-status",
+              agentLabel: "Refresh Wi-Fi Status",
+              agentGroup: "wifi",
+              agentDescription: "Refresh the current Wi-Fi connection status",
+              children: "Status"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: configureWifi,
+              disabled: !bridge || busy !== null,
+              agentId: "wifi-configure",
+              agentLabel: "Configure Wi-Fi",
+              agentGroup: "wifi",
+              agentDescription: "Send the entered SSID and password to the glasses",
+              children: "Configure"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              onClick: requestWifiSetup,
+              disabled: !bridge || busy !== null,
+              agentId: "wifi-native-setup",
+              agentLabel: "Native Wi-Fi Setup",
+              agentGroup: "wifi",
+              agentDescription: "Launch the native bridge Wi-Fi setup flow",
+              children: "Setup"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs text-muted", children: wifiStatus }),
+        wifiNetworks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-1", children: [
+          wifiNetworks.slice(0, VISIBLE_WIFI_LIMIT).map((network) => /* @__PURE__ */ jsx("span", { className: "px-1.5 py-1 text-xs text-muted", children: network }, network)),
+          wifiNetworks.length > VISIBLE_WIFI_LIMIT ? /* @__PURE__ */ jsxs("span", { className: "px-1.5 py-1 text-xs text-muted", children: [
+            "+",
+            wifiNetworks.length - VISIBLE_WIFI_LIMIT
+          ] }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(BatteryCharging, { className: "h-4 w-4 text-accent" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Report" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-2 text-xs", children: [
+          /* @__PURE__ */ jsx(ReportRow, { label: "Transport", value: report.transport ?? "none" }),
+          /* @__PURE__ */ jsx(ReportRow, { label: "Complete", value: report.ok ? "yes" : "no" }),
+          /* @__PURE__ */ jsx(
+            ReportRow,
+            {
+              label: "Serial",
+              value: report.serialNumber ?? "unknown"
+            }
+          ),
+          /* @__PURE__ */ jsx(ReportRow, { label: "Next", value: report.nextAction ?? "none" }),
+          /* @__PURE__ */ jsx(
+            ReportRow,
+            {
+              label: "Missing",
+              value: report.missingEvidence.length === 0 ? "none" : String(report.missingEvidence.length)
+            }
+          ),
+          /* @__PURE__ */ jsx(ReportRow, { label: "Bridge", value: bridge ? "available" : "none" }),
+          /* @__PURE__ */ jsx(
+            ReportRow,
+            {
+              label: "State",
+              value: [physicalState, batteryState, deviceState].filter(Boolean).join(" / ") || "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReportRow,
+            {
+              label: "Battery",
+              value: formatBatteryLevels(batteryLevels)
+            }
+          ),
+          /* @__PURE__ */ jsx(ReportRow, { label: "Events", value: String(events.length) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            ActionButton,
+            {
+              onClick: copyReport,
+              agentId: "report-copy",
+              agentLabel: "Copy Report",
+              agentGroup: "report",
+              agentDescription: "Copy the smartglasses diagnostics report to the clipboard",
+              children: [
+                /* @__PURE__ */ jsx(Clipboard, { className: "h-4 w-4" }),
+                "Copy"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            ActionButton,
+            {
+              onClick: downloadReport,
+              agentId: "report-download",
+              agentLabel: "Download Report",
+              agentGroup: "report",
+              agentDescription: "Download the smartglasses diagnostics report as JSON",
+              children: [
+                /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+                "Download"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Panel, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4 text-accent" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Events" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 max-h-72 overflow-y-auto", children: [
+          events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-2 text-xs text-muted", children: "None" }) : events.slice().reverse().slice(0, VISIBLE_EVENT_LIMIT).map((event) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "px-1 py-2",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-txt", children: event.type }),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted", children: event.detail })
+              ]
+            },
+            `${event.at}:${event.type}:${event.detail}`
+          )),
+          events.length > VISIBLE_EVENT_LIMIT ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs text-muted", children: [
+            "+",
+            events.length - VISIBLE_EVENT_LIMIT,
+            " older events"
+          ] }) : null
+        ] })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "mx-4 mb-4 px-1 py-2 text-xs text-destructive", children: error })
+  ] });
+}
+function Panel({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "py-2", children });
+}
+function ActionButton({
+  children,
+  disabled,
+  onClick,
+  agentId,
+  agentLabel,
+  agentGroup,
+  agentDescription
+}) {
+  const { ref, agentProps } = useAgentElement({
+    id: agentId,
+    role: "button",
+    label: agentLabel,
+    group: agentGroup,
+    description: agentDescription,
+    onActivate: () => void onClick()
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: () => void onClick(),
+      disabled,
+      "aria-label": agentLabel,
+      className: "inline-flex h-9 items-center gap-2 px-3 text-sm font-medium hover:bg-muted/20 disabled:cursor-not-allowed disabled:opacity-50",
+      ...agentProps,
+      children
+    }
+  );
+}
+function PlatformTabButton({
+  platformKey,
+  isActive,
+  onSelect
+}) {
+  const label = PLATFORM_COPY[platformKey].label;
+  const { ref, agentProps } = useAgentElement({
+    id: `platform-tab-${platformKey}`,
+    role: "tab",
+    label: `${label} platform`,
+    group: "platform-setup",
+    status: isActive ? "active" : "inactive",
+    description: `Show ${label} smartglasses pairing instructions`,
+    onActivate: () => onSelect(platformKey)
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: () => onSelect(platformKey),
+      "aria-current": isActive ? "page" : void 0,
+      "aria-label": `${label} platform`,
+      className: `h-8 px-2 text-xs font-medium transition-colors ${isActive ? "text-accent" : "text-muted hover:bg-muted/20 hover:text-txt"}`,
+      ...agentProps,
+      children: label
+    }
+  );
+}
+function StatusPill({ ok, label }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `inline-flex h-7 items-center gap-1.5 px-1.5 text-xs font-medium ${ok ? "text-green-700 dark:text-green-300" : "text-muted"}`,
+      children: [
+        ok ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(XCircle, { className: "h-3.5 w-3.5" }),
+        label
+      ]
+    }
+  );
+}
+function LensStatus({ side, state }) {
+  const ok = state === "connected";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1 py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Glasses, { className: "h-4 w-4 text-muted" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm capitalize", children: side })
+    ] }),
+    /* @__PURE__ */ jsx(StatusPill, { ok, label: state })
+  ] });
+}
+function HeadsetStateHint({
+  physicalState,
+  batteryState,
+  deviceState
+}) {
+  const chips = [
+    { key: "physical", value: physicalState ?? "" },
+    { key: "battery", value: batteryState ?? "" },
+    { key: "device", value: deviceState ?? "" }
+  ].filter((c) => c.value.length > 0);
+  const blocked = isCradleOrChargingState(physicalState, batteryState);
+  const ready = physicalState === "wearing";
+  const tone = blocked ? "text-amber-800 dark:text-amber-200" : ready ? "text-green-700 dark:text-green-300" : "text-muted";
+  const hint = blocked ? "Remove from charger and wear before validation." : ready ? "Ready for tap/audio validation." : "Wear state required for tap/audio validation.";
+  return /* @__PURE__ */ jsxs("div", { className: `mt-3 px-1 py-2 ${tone}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xs font-semibold uppercase tracking-wider opacity-70", children: "Headset" }),
+      chips.length > 0 ? chips.map((chip) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1 px-1.5 py-0.5 text-2xs font-medium",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "h-1 w-1 rounded-full bg-current opacity-70",
+                "aria-hidden": true
+              }
+            ),
+            chip.value
+          ]
+        },
+        chip.key
+      )) : /* @__PURE__ */ jsx("span", { className: "text-2xs italic opacity-70", children: "no state yet" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-2xs leading-4 opacity-80", children: hint })
+  ] });
+}
+function CheckRow({ ok, label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1 py-2 transition-colors", children: [
+    /* @__PURE__ */ jsx("span", { className: `text-xs ${ok ? "font-medium text-txt" : "text-muted"}`, children: label }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: `inline-flex items-center gap-1.5 rounded-full px-1.5 py-0.5 ${ok ? "text-green-600 dark:text-green-400" : "text-muted"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `h-1.5 w-1.5 rounded-full ${ok ? "bg-green-500" : "bg-muted/40"}`,
+              "aria-hidden": true
+            }
+          ),
+          ok ? /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Circle, { className: "h-3.5 w-3.5" })
+        ]
+      }
+    )
+  ] });
+}
+function ReportRow({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-txt", children: value })
+  ] });
+}
+function formatBatteryLevels(levels) {
+  const left = levels.left === void 0 ? "unknown" : `${levels.left}%`;
+  const right = levels.right === void 0 ? "unknown" : `${levels.right}%`;
+  return `L ${left} / R ${right}`;
+}
+function labelForTest(id) {
+  const labels = {
+    headsetConnected: "Whole headset",
+    init: "Init packets",
+    display: "Display",
+    serial: "Serial request",
+    serialObserved: "Serial observed",
+    settings: "Settings",
+    microphone: "Microphone",
+    micEnableWrite: "Mic enable write",
+    micDisableWrite: "Mic disable write",
+    tapMicEnable: "Tap mic enable",
+    tapMicDisable: "Tap mic disable",
+    audio: "Audio",
+    transcript: "Transcript",
+    eventStream: "Events"
+  };
+  return labels[id] ?? id;
+}
+export {
+  SmartglassesView
+};
+//# sourceMappingURL=SmartglassesView.js.map