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/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">