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

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.
+// so its type is recovered from the `features` map it's stored in. Matched
-type DeviceFeature = ButtplugClientDevice["features"] extends Map<number, infer F> ? F : never;
+// 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. */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sexy",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "better-sqlite3": "^13.0.3",
-    "buttplug": "^4.0.2",
+    "buttplug": "^5.0.1",
     "buttplug-wasm": "^3.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

pnpm-lock.yaml

@@ -12,8 +12,8 @@ importers:
         specifier: ^13.0.3
         version: 13.0.3
       buttplug:
-        specifier: ^4.0.2
+        specifier: ^5.0.1
-        version: 4.0.2
+        version: 5.0.1
       buttplug-wasm:
         specifier: ^3.0.0
         version: 3.0.0
@@ -2292,6 +2292,9 @@ packages:
   buttplug@4.0.2:
     resolution: {integrity: sha512-PciEJEoBkHjeA0UFfdymr5+jHXukzF0T8Pg7TaAxxWFb/0Ynfy1dWaGt1c7O5E1sfJSVyWxrvBQQCSeNWzprbg==}
 
+  buttplug@5.0.1:
+    resolution: {integrity: sha512-m7Qzoi6TEsr0DkqqXc3Gun/wikWiHziQeXu73Oxzd1ETqj2y1P0VdJ9QxAT811bLcTIYvyf0VkuHlXbEGcEXCw==}
+
   bytes@3.1.2:
     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
     engines: {node: '>= 0.8'}
@@ -6531,6 +6534,14 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  buttplug@5.0.1:
+    dependencies:
+      eventemitter3: 5.0.4
+      ws: 8.21.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   bytes@3.1.2: {}
 
   call-bind-apply-helpers@1.0.2: