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

lib/buttplug/client.ts

@@ -1,4 +1,4 @@
-import type { ButtplugClient, ButtplugClientDevice } from "buttplug";
+import type { ButtplugClient, ButtplugClientDevice, InputType } from "buttplug";
 import { deriveActuators, type ButtplugRuntime } from "./commands";
 import { useButtplugStore } from "./store";
 import type { ConnectedDeviceInfo } from "./types";
@@ -20,6 +20,9 @@ function toDeviceInfo(device: ButtplugClientDevice): ConnectedDeviceInfo {
     name: device.name,
     displayName: device.displayName,
     actuators: deriveActuators(device),
+    // "Battery" is a string enum value - passing the literal avoids needing
+    // InputType as a runtime import here (see commands.ts for the same trick).
+    hasBattery: device.hasInput("Battery" as InputType),
   };
 }
 
@@ -45,7 +48,14 @@ async function initClient(): Promise<ClientHandle> {
   });
 
   const connector = new ButtplugWasmClientConnector();
-  await client.connect(connector);
+  // EXPERIMENTAL: buttplug-wasm@3.0.0's embedded server was built against
+  // buttplug@^4.0.2's wire format; buttplug@5's OutputCmd message shape
+  // changed (`Value` went from number[] to a bare number), which is a real
+  // protocol break, not just a type mismatch - the cast below silences that
+  // signal rather than fixing it. Scanning/pairing may still work since
+  // DeviceAdded's shape didn't change; device *commands* may be silently
+  // rejected or mis-parsed server-side. Revert to buttplug@^4.0.2 if so.
+  await client.connect(connector as unknown as Parameters<typeof client.connect>[0]);
 
   useButtplugStore.getState().setConnected(true);
   for (const device of client.devices.values()) {
@@ -94,3 +104,14 @@ export async function getDevice(deviceIndex: number): Promise<ButtplugClientDevi
   const { client } = await getButtplugClientHandle();
   return client.devices.get(deviceIndex);
 }
+
+/** Reads the current battery level (0-1), or null if unsupported/unreadable. */
+export async function getBatteryLevel(deviceIndex: number): Promise<number | null> {
+  const device = await getDevice(deviceIndex);
+  if (!device || !device.hasInput("Battery" as InputType)) return null;
+  try {
+    return await device.battery();
+  } catch {
+    return null;
+  }
+}

lib/buttplug/commands.ts

@@ -2,8 +2,10 @@ import type { ButtplugClientDevice, DeviceOutputCommand, OutputType } from "butt
 import type { ActuatorInfo, NormalizedOutputType } from "./types";
 
 // buttplug@4's barrel doesn't re-export `ButtplugClientDeviceFeature` itself,
-// so its type is recovered from the `features` map it's stored in.
-type DeviceFeature = ButtplugClientDevice["features"] extends Map<number, infer F> ? F : never;
+// so its type is recovered from the `features` map it's stored in. Matched
+// against ReadonlyMap (not Map) so this works whether `.features` returns a
+// mutable Map (v4) or a ReadonlyMap (v5) - Map structurally extends ReadonlyMap.
+type DeviceFeature = ButtplugClientDevice["features"] extends ReadonlyMap<number, infer F> ? F : never;
 
 /**
  * The pieces of the dynamically-imported `buttplug` module namespace this

lib/buttplug/store.ts

@@ -10,12 +10,15 @@ interface ButtplugStoreState {
   devices: Record<number, ConnectedDeviceInfo>;
   /** Last-known slider value per `${deviceIndex}:${featureIndex}`, for UI display only. */
   actuatorValues: Record<string, number>;
+  /** Last-known battery reading (0-1) per device index; absent until first read completes. */
+  batteryLevels: Record<number, number | null>;
   error: string | null;
   setConnected: (connected: boolean) => void;
   setScanning: (scanning: boolean) => void;
   upsertDevice: (device: ConnectedDeviceInfo) => void;
   removeDevice: (index: number) => void;
   setActuatorValue: (deviceIndex: number, featureIndex: number, value: number) => void;
+  setBatteryLevel: (deviceIndex: number, level: number | null) => void;
   setError: (message: string | null) => void;
   reset: () => void;
 }
@@ -25,6 +28,7 @@ export const useButtplugStore = create<ButtplugStoreState>((set) => ({
   scanning: false,
   devices: {},
   actuatorValues: {},
+  batteryLevels: {},
   error: null,
   setConnected: (connected) => set({ connected }),
   setScanning: (scanning) => set({ scanning }),
@@ -33,12 +37,16 @@ export const useButtplugStore = create<ButtplugStoreState>((set) => ({
     set((s) => {
       const devices = { ...s.devices };
       delete devices[index];
-      return { devices };
+      const batteryLevels = { ...s.batteryLevels };
+      delete batteryLevels[index];
+      return { devices, batteryLevels };
     }),
   setActuatorValue: (deviceIndex, featureIndex, value) =>
     set((s) => ({
       actuatorValues: { ...s.actuatorValues, [actuatorKey(deviceIndex, featureIndex)]: value },
     })),
+  setBatteryLevel: (deviceIndex, level) =>
+    set((s) => ({ batteryLevels: { ...s.batteryLevels, [deviceIndex]: level } })),
   setError: (message) => set({ error: message }),
-  reset: () => set({ connected: false, scanning: false, devices: {}, actuatorValues: {} }),
+  reset: () => set({ connected: false, scanning: false, devices: {}, actuatorValues: {}, batteryLevels: {} }),
 }));

lib/buttplug/types.ts

@@ -20,6 +20,7 @@ export interface ConnectedDeviceInfo {
   name: string;
   displayName?: string;
   actuators: ActuatorInfo[];
+  hasBattery: boolean;
 }
 
 /** A single dispatched command, timestamped relative to session start. */