Upgrade to buttplug v5, add battery level display, bump to 0.2.0

buttplug-wasm@3.0.0 still declares buttplug@^4.0.2 as its dependency,
and v5 changed the OutputCmd wire shape (Value: number[] -> number) -
a real protocol difference, not just a type mismatch. Confirmed by
testing against real Lovense hardware that device control still works
in practice, so the bump stands; the risk is documented at the
client.connect() cast in case a future device/build doesn't fare as
well.

Also fixes a Map vs ReadonlyMap mismatch in the version-agnostic
feature-type extraction (v4 returns Map, v5 returns ReadonlyMap) that
surfaced while making this change, and adds a battery indicator to each
connected device's card - reads once on connect, refreshes every 60s,
using device.hasInput("Battery") to detect support.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W8WkFF5ppURBAB918593Eb

components/control/ButtplugConsole.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
   disconnectAll,
+  getBatteryLevel,
   getButtplugClientHandle,
   getDevice,
   isWebBluetoothSupported,
@@ -42,6 +43,8 @@ export function ButtplugConsole() {
   const devices = useButtplugStore((s) => s.devices);
   const actuatorValues = useButtplugStore((s) => s.actuatorValues);
   const setActuatorValue = useButtplugStore((s) => s.setActuatorValue);
+  const batteryLevels = useButtplugStore((s) => s.batteryLevels);
+  const setBatteryLevel = useButtplugStore((s) => s.setBatteryLevel);
   const storeError = useButtplugStore((s) => s.error);
 
   const [activeSession, setActiveSession] = useState<ActivePlaySession | null>(null);
@@ -64,6 +67,21 @@ export function ButtplugConsole() {
     };
   }, []);
 
+  useEffect(() => {
+    const devicesWithBattery = Object.values(devices).filter((d) => d.hasBattery);
+    if (devicesWithBattery.length === 0) return;
+
+    function refresh() {
+      for (const device of devicesWithBattery) {
+        void getBatteryLevel(device.index).then((level) => setBatteryLevel(device.index, level));
+      }
+    }
+
+    refresh();
+    const interval = setInterval(refresh, 60_000);
+    return () => clearInterval(interval);
+  }, [devices, setBatteryLevel]);
+
   async function ensureRuntime(): Promise<ButtplugRuntime> {
     if (runtimeRef.current) return runtimeRef.current;
     const { runtime } = await getButtplugClientHandle();
@@ -153,11 +171,17 @@ export function ButtplugConsole() {
           const runtime = await ensureRuntime();
           const liveDevice = await getDevice(device.index);
           const feature = liveDevice && findFeature(liveDevice, featureIndex);
-          if (!liveDevice || !feature) return;
+          if (!liveDevice || !feature) {
+            toast.error(`${device.name}: device not found - try reconnecting.`);
+            return;
+          }
           setTransmittingKey(key);
           const cmd = buildOutputCommand(runtime, actuator, v);
           await feature.runOutput(cmd);
           eventBuffer.record({ deviceIndex: device.index, commandType: actuator.outputType, featureIndex, value: v });
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          toast.error(`${device.name}: command failed - ${message}`);
         } finally {
           setTransmittingKey((k) => (k === key ? null : k));
         }
@@ -214,6 +238,7 @@ export function ButtplugConsole() {
             <DeviceCard
               key={device.index}
               device={device}
+              batteryLevel={batteryLevels[device.index] ?? null}
               actuatorValues={Object.fromEntries(
                 device.actuators.map((a) => [a.featureIndex, actuatorValues[actuatorKey(device.index, a.featureIndex)] ?? 0]),
               )}