Typing lessons like duolingo & musicmouse cleanup

web/src/hooks/usePlayerState.ts

@@ -15,7 +15,12 @@ const RECONNECT_DELAY_MS = 1500;
 export interface Connection {
   state: PlayerState | null;
   online: boolean;
-  /** Apply a change locally so a keypress feels instant; the next frame reconciles. */
+  /** Apply a change locally so a keypress feels instant; the next frame reconciles.
+   *
+   * A plain whole-object patch is enough here because state only ever arrives pushed
+   * over the websocket - there's no in-flight poll that could resolve late and stomp
+   * on it. `useHomeAssistant`'s `optimistic()` solves the same problem for a *polled*
+   * source, where that race is real, with a per-entity timestamp guard instead. */
   optimistic: (patch: Partial<PlayerState>) => void;
 }
 
@@ -34,13 +39,21 @@ export function usePlayerState(onLibraryChanged: () => void): Connection {
 
     const connect = () => {
       const protocol = location.protocol === "https:" ? "wss:" : "ws:";
-      socket = new WebSocket(`${protocol}//${location.host}/api/ws`);
+      const ws = new WebSocket(`${protocol}//${location.host}/api/ws`);
+      socket = ws;
 
       socket.onopen = () => {
         setOnline(true);
         // The server sends a snapshot on connect, but a reconnect may have missed
-        // changes in between, so ask for the truth as well.
-        void api.state().then(setState).catch(() => undefined);
+        // changes in between, so ask for the truth as well. Guarded against a slow
+        // response landing after a *later* reconnect already replaced this socket -
+        // every other fetch-on-mount hook in this codebase guards the same way.
+        void api
+          .state()
+          .then((fetched) => {
+            if (!closed && socket === ws) setState(fetched);
+          })
+          .catch(() => undefined);
       };
 
       socket.onmessage = (event) => {