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]),
               )}

components/control/DeviceCard.tsx

@@ -4,17 +4,30 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ActuatorSlider } from "./ActuatorSlider";
 import type { ConnectedDeviceInfo } from "@/lib/buttplug/types";
+import { Battery, BatteryFull, BatteryLow, BatteryMedium, BatteryWarning } from "lucide-react";
 
 interface DeviceCardProps {
   device: ConnectedDeviceInfo;
+  batteryLevel: number | null;
   actuatorValues: Record<number, number>;
   transmittingFeatureIndex: number | null;
   onActuatorChange: (featureIndex: number, value: number) => void;
   onStop: () => void;
 }
 
+function BatteryIndicator({ level }: { level: number }) {
+  const Icon = level < 0.15 ? BatteryWarning : level < 0.4 ? BatteryLow : level < 0.8 ? BatteryMedium : BatteryFull;
+  return (
+    <span className={`flex items-center gap-1 ${level < 0.15 ? "text-destructive" : "text-muted-foreground"}`}>
+      <Icon className="size-3.5" />
+      <span className="bp-readout text-xs">{Math.round(level * 100)}%</span>
+    </span>
+  );
+}
+
 export function DeviceCard({
   device,
+  batteryLevel,
   actuatorValues,
   transmittingFeatureIndex,
   onActuatorChange,
@@ -24,9 +37,17 @@ export function DeviceCard({
     <Card className="bp-glass">
       <CardHeader className="flex flex-row items-center justify-between pb-3">
         <span className="text-sm font-medium text-foreground">{device.displayName ?? device.name}</span>
-        <Button variant="outline" size="sm" onClick={onStop}>
-          Stop
-        </Button>
+        <div className="flex items-center gap-3">
+          {device.hasBattery &&
+            (batteryLevel !== null ? (
+              <BatteryIndicator level={batteryLevel} />
+            ) : (
+              <Battery className="size-3.5 text-muted-foreground" aria-label="Reading battery level" />
+            ))}
+          <Button variant="outline" size="sm" onClick={onStop}>
+            Stop
+          </Button>
+        </div>
       </CardHeader>
       <div className="bp-hairline mx-4" />
       <CardContent className="flex flex-col gap-3 pt-3">