From 7d8bb30fc54414244389f023e2884518673782f5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 25 Sep 2026 08:53:18 +0000
Subject: [PATCH 1/2] Fix review findings and extend the test suite

CI
- Run checkout before setup-node and pass node-version/cache to setup-node
  (a merge had swapped them, so CI never pinned Node 22); read-only token.

Spotify auth/API/player
- A refresh rejected because another tab already rotated the refresh token
  now uses that tab's tokens instead of logging every tab out.
- Logout during an in-flight refresh stays logged out.
- forceRefresh(rejectedToken) skips the refresh when a concurrent request
  already replaced the token.
- The OAuth callback requires a stored state and always clears the
  verifier/state; logout clears them too.
- Cap Retry-After at 30 s and fail with a readable message beyond that.
- A failed SDK load is retried by the next player; disconnect() before the
  SDK loads no longer leaves a stray connected player.

Swipe session / dedupe / history
- Undo followed immediately by removing the same song no longer loses its
  History entry (the restore leaves a newer entry alone).
- Restores ignore removals that are still queued, so they land at the
  right index.
- A restore that fails partway trims the entry, so retrying or Undo does
  not add a copy twice (session and dedupe).
- A second Restore click while one is queued is ignored.
- Undo on Liked Songs re-likes in reverse so the original order is kept.
- Malformed stored History entries are dropped instead of crashing.

UI
- Swipe gestures and keyboard shortcuts are pure, tested functions:
  flicking a keep-drag back no longer removes the song; Alt/Cmd+Arrow
  (browser Back) and other chords no longer swipe; Space on a focused
  button presses the button.
- A stale 404 play-retry no longer starts the previous card's song.
- Login errors are shown instead of being swallowed; reduced motion is
  respected; History panel takes focus, closes on Escape and labels each
  Restore button; dedupe empty-state Back is disabled while busy.

Tests: 129 -> 184, including a new player.ts suite, gestures and
playWithRetry tests; each regression test fails on the previous code.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RofS2KTGcgYYorEqtuB5Uo
---
 .github/workflows/ci.yml        |   5 +-
 src/App.tsx                     |  13 ++-
 src/components/DedupeScreen.tsx |   2 +-
 src/components/HistoryPanel.tsx |  21 +++-
 src/components/SwipeCard.tsx    |  10 +-
 src/components/SwipeScreen.tsx  |  27 ++---
 src/components/gestures.test.ts |  89 +++++++++++++++
 src/components/gestures.ts      |  53 +++++++++
 src/core/historyStore.test.ts   |  15 +++
 src/core/historyStore.ts        |  17 ++-
 src/dedupe/controller.test.ts   |  42 +++++++
 src/dedupe/controller.ts        |  23 +++-
 src/hooks/usePlayer.test.ts     |  60 ++++++++++
 src/hooks/usePlayer.ts          |  22 +++-
 src/main.tsx                    |   7 +-
 src/session/controller.test.ts  |  87 +++++++++++++++
 src/session/controller.ts       |  41 ++++---
 src/session/restore.test.ts     |  42 +++++++
 src/session/restore.ts          |  28 ++++-
 src/spotify/api.test.ts         |  15 +++
 src/spotify/api.ts              |  18 ++-
 src/spotify/auth.test.ts        |  94 ++++++++++++++++
 src/spotify/auth.ts             |  33 +++++-
 src/spotify/player.test.ts      | 189 ++++++++++++++++++++++++++++++++
 src/spotify/player.ts           |  19 +++-
 25 files changed, 902 insertions(+), 70 deletions(-)
 create mode 100644 src/components/gestures.test.ts
 create mode 100644 src/components/gestures.ts
 create mode 100644 src/hooks/usePlayer.test.ts
 create mode 100644 src/spotify/player.test.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b521d83..152ef2f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -4,12 +4,15 @@ on:
   push:
   pull_request:
 
+permissions:
+  contents: read
+
 jobs:
   test-and-build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/setup-node@v7
       - uses: actions/checkout@v7
+      - uses: actions/setup-node@v7
         with:
           node-version: 22
           cache: npm
diff --git a/src/App.tsx b/src/App.tsx
index 483b1df..2f9f355 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { createHistoryStore } from './core/historyStore';
 import type { PlaylistSummary } from './core/playlists';
 import { createApi } from './spotify/api';
 import { createAuth } from './spotify/auth';
+import { describeError } from './spotify/errors';
 import { createWebPlayer, type WebPlayer } from './spotify/player';
 
 const CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID ?? '';
@@ -23,7 +24,7 @@ const auth = createAuth({
 
 const api = createApi({
   getAccessToken: () => auth.getAccessToken(),
-  forceRefresh: () => auth.forceRefresh(),
+  forceRefresh: (rejectedToken) => auth.forceRefresh(rejectedToken),
   fetch: (input, init) => window.fetch(input, init),
 });
 
@@ -108,7 +109,15 @@ export function App() {
         </main>
       );
     case 'connect':
-      return <ConnectScreen clientIdMissing={!CLIENT_ID} error={screen.error} onConnect={() => void auth.login()} />;
+      return (
+        <ConnectScreen
+          clientIdMissing={!CLIENT_ID}
+          error={screen.error}
+          onConnect={() =>
+            auth.login().catch((e: unknown) => setScreen({ name: 'connect', error: describeError(e) }))
+          }
+        />
+      );
     case 'picker':
       return (
         <PlaylistPicker
diff --git a/src/components/DedupeScreen.tsx b/src/components/DedupeScreen.tsx
index a7c2c81..513cb47 100644
--- a/src/components/DedupeScreen.tsx
+++ b/src/components/DedupeScreen.tsx
@@ -185,7 +185,7 @@ function DedupeView({
           <div className="empty">
             <h2>No duplicates in {playlist.name}</h2>
             <p className="muted">Every song appears once.</p>
-            <button className="primary" onClick={onExit}>
+            <button className="primary" onClick={onExit} disabled={snap.busy}>
               Back to playlists
             </button>
           </div>
diff --git a/src/components/HistoryPanel.tsx b/src/components/HistoryPanel.tsx
index cabdda6..646ceda 100644
--- a/src/components/HistoryPanel.tsx
+++ b/src/components/HistoryPanel.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react';
 import type { RemovedEntry } from '../core/historyStore';
 
 interface Props {
@@ -10,11 +11,25 @@ interface Props {
 }
 
 export function HistoryPanel({ entries, sessionId, note, onRestore, onClose }: Props) {
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    // The panel can cover the card: move focus into it, and let Escape close it.
+    closeRef.current?.focus();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCloseRef.current();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
   return (
     <aside className="history" aria-label="Removed songs">
       <header>
         <h2>Removed songs</h2>
-        <button className="link" onClick={onClose} aria-label="Close">
+        <button ref={closeRef} className="link" onClick={onClose} aria-label="Close">
           ✕
         </button>
       </header>
@@ -33,7 +48,9 @@ export function HistoryPanel({ entries, sessionId, note, onRestore, onClose }: P
                   {entry.sessionId !== sessionId && ` · ${new Date(entry.removedAt).toLocaleDateString()}`}
                 </span>
               </div>
-              <button onClick={() => onRestore(entry.uri)}>Restore</button>
+              <button onClick={() => onRestore(entry.uri)} aria-label={`Restore ${entry.name}`}>
+                Restore
+              </button>
             </li>
           ))}
         </ul>
diff --git a/src/components/SwipeCard.tsx b/src/components/SwipeCard.tsx
index 5a24421..0018a84 100644
--- a/src/components/SwipeCard.tsx
+++ b/src/components/SwipeCard.tsx
@@ -1,10 +1,8 @@
 import { motion, useMotionValue, useTransform, type PanInfo } from 'motion/react';
 import type { Card } from '../core/deck';
+import { SWIPE_DISTANCE, swipeIntent, type SwipeDirection } from './gestures';
 
-export type SwipeDirection = 'keep' | 'remove';
-
-const SWIPE_DISTANCE = 120;
-const SWIPE_VELOCITY = 600;
+export type { SwipeDirection } from './gestures';
 
 const variants = {
   enter: { scale: 0.95, opacity: 0 },
@@ -29,8 +27,8 @@ export function SwipeCard({ card, direction, onSwipe }: Props) {
   const removeOpacity = useTransform(x, [-SWIPE_DISTANCE, -30], [1, 0]);
 
   const onDragEnd = (_event: unknown, info: PanInfo) => {
-    if (info.offset.x > SWIPE_DISTANCE || info.velocity.x > SWIPE_VELOCITY) onSwipe('keep');
-    else if (info.offset.x < -SWIPE_DISTANCE || info.velocity.x < -SWIPE_VELOCITY) onSwipe('remove');
+    const intent = swipeIntent(info.offset.x, info.velocity.x);
+    if (intent) onSwipe(intent);
   };
 
   return (
diff --git a/src/components/SwipeScreen.tsx b/src/components/SwipeScreen.tsx
index 0e6463c..13c0437 100644
--- a/src/components/SwipeScreen.tsx
+++ b/src/components/SwipeScreen.tsx
@@ -11,6 +11,7 @@ import type { SpotifyApi } from '../spotify/api';
 import { AuthError, describeError } from '../spotify/errors';
 import type { WebPlayer } from '../spotify/player';
 import { DoneScreen } from './DoneScreen';
+import { shortcutFor } from './gestures';
 import { HistoryPanel } from './HistoryPanel';
 import { Loading } from './Loading';
 import { PlayerControls } from './PlayerControls';
@@ -123,23 +124,15 @@ function SwipeView({
   useEffect(() => {
     if (!started) return;
     const onKey = (e: KeyboardEvent) => {
-      if (e.repeat || e.target instanceof HTMLInputElement) return;
-      // While the History panel is open it can cover the card at narrow widths, so
-      // ←/→ must not remove or keep a song the user can't see. Undo and Space still work.
-      if (e.key === 'ArrowRight') {
-        if (!showHistory) swipe('keep');
-      } else if (e.key === 'ArrowLeft') {
-        if (!showHistory) swipe('remove');
-      } else if (e.key === ' ') {
-        e.preventDefault();
-        // Only the current card's own playback should toggle: on an unplayable card or
-        // the Done screen the SDK still holds the previous track, so togglePlay would
-        // resume that instead.
-        if (card?.isPlayable) void player.togglePlay();
-      } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
-        e.preventDefault();
-        controller.undo();
-      }
+      const shortcut = shortcutFor(e, { historyOpen: showHistory });
+      if (!shortcut) return;
+      e.preventDefault();
+      if (shortcut === 'keep' || shortcut === 'remove') swipe(shortcut);
+      else if (shortcut === 'undo') controller.undo();
+      // Only the current card's own playback should toggle: on an unplayable card or
+      // the Done screen the SDK still holds the previous track, so togglePlay would
+      // resume that instead.
+      else if (card?.isPlayable) void player.togglePlay();
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
diff --git a/src/components/gestures.test.ts b/src/components/gestures.test.ts
new file mode 100644
index 0000000..6763b67
--- /dev/null
+++ b/src/components/gestures.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest';
+import { shortcutFor, swipeIntent, type KeyLike } from './gestures';
+
+describe('swipeIntent', () => {
+  it('swipes once the card is dragged far enough', () => {
+    expect(swipeIntent(130, 0)).toBe('keep');
+    expect(swipeIntent(-130, 0)).toBe('remove');
+  });
+
+  it('snaps back from a short, slow drag', () => {
+    expect(swipeIntent(50, 0)).toBeNull();
+    expect(swipeIntent(-50, 100)).toBeNull();
+  });
+
+  it('swipes on a fast flick in the direction of the drag', () => {
+    expect(swipeIntent(40, 800)).toBe('keep');
+    expect(swipeIntent(-40, -800)).toBe('remove');
+  });
+
+  it('does not remove a song when a keep drag is flicked back to the middle', () => {
+    expect(swipeIntent(50, -700)).toBeNull();
+    expect(swipeIntent(-50, 700)).toBeNull();
+  });
+
+  it('cancels a long drag that is flicked back', () => {
+    expect(swipeIntent(200, -900)).toBeNull();
+  });
+
+  it('ignores a flick that barely moved the card', () => {
+    expect(swipeIntent(5, 900)).toBeNull();
+  });
+});
+
+const key = (k: string, extra: Partial<KeyLike> = {}): KeyLike => ({
+  key: k,
+  repeat: false,
+  altKey: false,
+  ctrlKey: false,
+  metaKey: false,
+  shiftKey: false,
+  target: null,
+  ...extra,
+});
+
+/** A stand-in for a DOM element: `closest` matches when the selector lists the tag. */
+const element = (tag: string) => ({ closest: (selector: string) => (selector.split(', ').includes(tag) ? {} : null) }) as unknown as EventTarget;
+
+describe('shortcutFor', () => {
+  const closed = { historyOpen: false };
+
+  it('maps arrows, Space and Ctrl/Cmd+Z', () => {
+    expect(shortcutFor(key('ArrowRight'), closed)).toBe('keep');
+    expect(shortcutFor(key('ArrowLeft'), closed)).toBe('remove');
+    expect(shortcutFor(key(' '), closed)).toBe('toggle');
+    expect(shortcutFor(key('z', { ctrlKey: true }), closed)).toBe('undo');
+    expect(shortcutFor(key('Z', { metaKey: true }), closed)).toBe('undo');
+  });
+
+  it('ignores held-down keys and typing in text fields', () => {
+    expect(shortcutFor(key('ArrowLeft', { repeat: true }), closed)).toBeNull();
+    expect(shortcutFor(key('ArrowLeft', { target: element('input') }), closed)).toBeNull();
+    expect(shortcutFor(key('z', { ctrlKey: true, target: element('textarea') }), closed)).toBeNull();
+  });
+
+  it('never removes a song on the browser’s Back shortcut or other chords', () => {
+    expect(shortcutFor(key('ArrowLeft', { altKey: true }), closed)).toBeNull();
+    expect(shortcutFor(key('ArrowLeft', { metaKey: true }), closed)).toBeNull();
+    expect(shortcutFor(key('ArrowLeft', { ctrlKey: true }), closed)).toBeNull();
+    expect(shortcutFor(key('ArrowRight', { shiftKey: true }), closed)).toBeNull();
+  });
+
+  it('does not keep or remove while History covers the card, but still undoes and toggles', () => {
+    const open = { historyOpen: true };
+    expect(shortcutFor(key('ArrowRight'), open)).toBeNull();
+    expect(shortcutFor(key('ArrowLeft'), open)).toBeNull();
+    expect(shortcutFor(key('z', { ctrlKey: true }), open)).toBe('undo');
+    expect(shortcutFor(key(' '), open)).toBe('toggle');
+  });
+
+  it('lets Space press a focused button instead of toggling playback', () => {
+    expect(shortcutFor(key(' ', { target: element('button') }), closed)).toBeNull();
+    expect(shortcutFor(key('ArrowRight', { target: element('button') }), closed)).toBe('keep');
+  });
+
+  it('ignores other keys', () => {
+    expect(shortcutFor(key('a'), closed)).toBeNull();
+    expect(shortcutFor(key('Enter'), closed)).toBeNull();
+  });
+});
diff --git a/src/components/gestures.ts b/src/components/gestures.ts
new file mode 100644
index 0000000..bd68995
--- /dev/null
+++ b/src/components/gestures.ts
@@ -0,0 +1,53 @@
+export type SwipeDirection = 'keep' | 'remove';
+
+export const SWIPE_DISTANCE = 120;
+const SWIPE_VELOCITY = 600;
+/** A flick must have moved the card at least this far in the flick's direction. */
+const FLICK_MIN_OFFSET = 30;
+
+const directionOf = (dx: number): SwipeDirection => (dx > 0 ? 'keep' : 'remove');
+
+/**
+ * What a released drag means: past the distance threshold, or a fast flick the same
+ * way the card was dragged. Flicking back toward the middle cancels the swipe.
+ */
+export function swipeIntent(offsetX: number, velocityX: number): SwipeDirection | null {
+  const flicking = Math.abs(velocityX) > SWIPE_VELOCITY;
+  const sameWay = Math.sign(offsetX) === Math.sign(velocityX);
+  if (Math.abs(offsetX) > SWIPE_DISTANCE) return flicking && !sameWay ? null : directionOf(offsetX);
+  if (flicking && sameWay && Math.abs(offsetX) >= FLICK_MIN_OFFSET) return directionOf(offsetX);
+  return null;
+}
+
+export type Shortcut = SwipeDirection | 'toggle' | 'undo';
+
+export interface KeyLike {
+  key: string;
+  repeat: boolean;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  target: EventTarget | null;
+}
+
+const TEXT_FIELDS = 'input, select, textarea, [contenteditable]';
+const CONTROLS = `button, a[href], ${TEXT_FIELDS}`;
+
+const targetMatches = (target: EventTarget | null, selector: string) =>
+  Boolean((target as Element | null)?.closest?.(selector));
+
+/** Maps a keydown on the swipe screen to its shortcut, or null to leave it to the browser. */
+export function shortcutFor(e: KeyLike, { historyOpen }: { historyOpen: boolean }): Shortcut | null {
+  if (e.repeat || targetMatches(e.target, TEXT_FIELDS)) return null;
+  if ((e.ctrlKey || e.metaKey) && !e.altKey && e.key.toLowerCase() === 'z') return 'undo';
+  // Alt/Cmd+← is the browser's Back: never let it (or other chords) remove a song.
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return null;
+  // While the History panel is open it can cover the card at narrow widths, so
+  // ←/→ must not remove or keep a song the user can't see. Undo and Space still work.
+  if (e.key === 'ArrowRight') return historyOpen ? null : 'keep';
+  if (e.key === 'ArrowLeft') return historyOpen ? null : 'remove';
+  // Space on a focused button must press that button, not toggle playback.
+  if (e.key === ' ') return targetMatches(e.target, CONTROLS) ? null : 'toggle';
+  return null;
+}
diff --git a/src/core/historyStore.test.ts b/src/core/historyStore.test.ts
index 9cd9ff9..58e9eb8 100644
--- a/src/core/historyStore.test.ts
+++ b/src/core/historyStore.test.ts
@@ -49,6 +49,21 @@ describe('createHistoryStore', () => {
     expect(createHistoryStore(storage).load('p1')).toEqual([]);
   });
 
+  it('drops malformed stored entries instead of failing', () => {
+    const storage = memoryStorage();
+    storage.setItem('spotify-swipe:history:pl', JSON.stringify([null, { uri: 'x' }, 'junk', entry('a')]));
+    const store = createHistoryStore(storage);
+    expect(store.load('pl')).toEqual([entry('a')]);
+    store.add('pl', entry('b', 2));
+    expect(store.load('pl').map((e) => e.uri)).toEqual(['b', 'a']);
+  });
+
+  it('treats stored JSON that is not a list as empty', () => {
+    const storage = memoryStorage();
+    storage.setItem('spotify-swipe:history:pl', '{"uri":"a"}');
+    expect(createHistoryStore(storage).load('pl')).toEqual([]);
+  });
+
   it('keeps working in memory when storage writes fail', () => {
     const storage = memoryStorage();
     storage.setItem = () => {
diff --git a/src/core/historyStore.ts b/src/core/historyStore.ts
index a37598f..17d5711 100644
--- a/src/core/historyStore.ts
+++ b/src/core/historyStore.ts
@@ -20,6 +20,21 @@ export interface HistoryStore {
 // Keys keep the app's old name so existing logins and History survive the rename to Swipify.
 const storageKey = (playlistId: string) => `spotify-swipe:history:${playlistId}`;
 
+function isEntry(value: unknown): value is RemovedEntry {
+  const e = value as Partial<RemovedEntry> | null;
+  return (
+    typeof e === 'object' &&
+    e !== null &&
+    typeof e.uri === 'string' &&
+    typeof e.name === 'string' &&
+    Array.isArray(e.artists) &&
+    Array.isArray(e.positions) &&
+    e.positions.every((p) => Number.isInteger(p)) &&
+    typeof e.sessionId === 'string' &&
+    typeof e.removedAt === 'number'
+  );
+}
+
 /**
  * Removal history kept in memory and mirrored to `storage` so it survives reloads.
  * Storage failures are swallowed: the in-memory copy keeps undo/restore working.
@@ -34,7 +49,7 @@ export function createHistoryStore(storage: Storage | null): HistoryStore {
     try {
       const raw = storage?.getItem(storageKey(playlistId));
       const parsed: unknown = raw ? JSON.parse(raw) : [];
-      if (Array.isArray(parsed)) entries = parsed as RemovedEntry[];
+      if (Array.isArray(parsed)) entries = parsed.filter(isEntry);
     } catch {
       // Corrupt or unreadable storage: start with an empty history.
     }
diff --git a/src/dedupe/controller.test.ts b/src/dedupe/controller.test.ts
index f6dfc92..2762ef7 100644
--- a/src/dedupe/controller.test.ts
+++ b/src/dedupe/controller.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { collectCards, type RawPlaylistRow } from '../core/deck';
 import { findDuplicates, planRemoval } from '../core/duplicates';
+import { LIKED_SONGS_ID } from '../core/playlists';
 import { createHistoryStore } from '../core/historyStore';
 import { ApiError, AuthError } from '../spotify/errors';
 import { memoryStorage } from '../test/memoryStorage';
@@ -295,4 +296,45 @@ describe('createDedupeRun', () => {
       expect(spotify.rows).toEqual(['a', 'b', 'a2', 'a2']);
     });
   });
+
+  it('restore failing partway, then Undo, does not add the restored row twice', async () => {
+    const playlist = ['a', 'b', 'a2', 'c', 'a2'];
+    const { spotify, controller, ops } = setup([], playlist, { a2: 'a' });
+    controller.start(ops);
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b', 'c']);
+    const add = spotify.api.addItems.getMockImplementation()!;
+    spotify.api.addItems.mockImplementationOnce(add).mockRejectedValueOnce(new TypeError('Failed to fetch'));
+    controller.restore('a2');
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b', 'a2', 'c']);
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(playlist);
+  });
+
+  it('undo on Liked Songs re-likes songs so they keep their original order on top', async () => {
+    const liked = ['a', 'b', 'a2', 'c', 'b2'];
+    const names = { a2: 'a', b2: 'b' };
+    const spotify = fakeSpotify(liked);
+    // Liked Songs has no positions: a re-liked song goes to the top.
+    spotify.api.addItems.mockImplementation(async (_p: string, uris: string[]) => {
+      spotify.rows.unshift(...uris);
+    });
+    const ops = planRemoval(findDuplicates(collectCards(liked.map(row(names))).cards), new Set());
+    const controller = createDedupeRun({
+      api: spotify.api,
+      history: createHistoryStore(memoryStorage()),
+      playlistId: LIKED_SONGS_ID,
+      runId: 'r1',
+      now: () => 1000,
+      playlistLength: liked.length,
+    });
+    controller.start(ops);
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b', 'c']);
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a2', 'b2', 'a', 'b', 'c']);
+  });
 });
diff --git a/src/dedupe/controller.ts b/src/dedupe/controller.ts
index 65e7017..2869f33 100644
--- a/src/dedupe/controller.ts
+++ b/src/dedupe/controller.ts
@@ -1,6 +1,7 @@
 import type { Card } from '../core/deck';
 import { countRemoved, historyPositions, type RemovalOp } from '../core/duplicates';
 import type { HistoryStore, RemovedEntry } from '../core/historyStore';
+import { LIKED_SONGS_ID } from '../core/playlists';
 import { clampIndex } from '../core/positions';
 import { restoreEntry } from '../session/restore';
 import type { SpotifyApi } from '../spotify/api';
@@ -236,7 +237,10 @@ export function createDedupeRun(deps: DedupeDeps): DedupeController {
       const before = { phase: snapshot.phase, total: snapshot.total };
       enqueue(async () => {
         // In ascending order, every earlier row is back, so each original index is right.
-        const rows = [...missing].sort((a, b) => a.index - b.index);
+        // Liked Songs ignores positions and puts each re-liked song on top, so go in
+        // descending order there to keep the songs' original order.
+        const direction = playlistId === LIKED_SONGS_ID ? -1 : 1;
+        const rows = [...missing].sort((a, b) => direction * (a.index - b.index));
         update({ phase: 'undoing', done: 0, total: rows.length, error: null });
         try {
           for (const row of rows) {
@@ -263,10 +267,19 @@ export function createDedupeRun(deps: DedupeDeps): DedupeController {
         const rows: MissingRow[] =
           reAddPending && op?.kind === 'copies' && op.card.uri === uri
             ? [{ uri, index: op.keep }]
-            : missing.filter((row) => row.uri === uri);
-        await restoreEntry({ api, history, playlistId }, uri, length);
-        rows.forEach(rowBack);
-        update({});
+            : missing.filter((row) => row.uri === uri).sort((a, b) => a.index - b.index);
+        // Rows go back one at a time, so a failure partway doesn't leave a re-added
+        // row in `missing` for Undo to add a second time.
+        let back = 0;
+        const onInserted = () => {
+          const row = rows[back++];
+          if (row) rowBack(row);
+        };
+        try {
+          await restoreEntry({ api, history, playlistId }, uri, length, { onInserted });
+        } finally {
+          update({});
+        }
       });
     },
 
diff --git a/src/hooks/usePlayer.test.ts b/src/hooks/usePlayer.test.ts
new file mode 100644
index 0000000..4bb0cbb
--- /dev/null
+++ b/src/hooks/usePlayer.test.ts
@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { ApiError, AuthError } from '../spotify/errors';
+import { playWithRetry } from './usePlayer';
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('playWithRetry', () => {
+  it('plays once when Spotify accepts', async () => {
+    const play = vi.fn(async () => {});
+    await playWithRetry({ play }, 'dev', 'spotify:track:a', 5000);
+    expect(play).toHaveBeenCalledExactlyOnceWith('dev', 'spotify:track:a', 5000);
+  });
+
+  it('retries a 404 once after a second, while the device registers', async () => {
+    vi.useFakeTimers();
+    const play = vi.fn<(d: string, u: string, p?: number) => Promise<void>>();
+    play.mockRejectedValueOnce(new ApiError(404, 'Device not found')).mockResolvedValueOnce();
+    const done = playWithRetry({ play }, 'dev', 'spotify:track:a');
+    await vi.advanceTimersByTimeAsync(999);
+    expect(play).toHaveBeenCalledTimes(1);
+    await vi.advanceTimersByTimeAsync(1);
+    await done;
+    expect(play).toHaveBeenCalledTimes(2);
+  });
+
+  it('rethrows a second 404', async () => {
+    vi.useFakeTimers();
+    const play = vi.fn(async () => {
+      throw new ApiError(404, 'Device not found');
+    });
+    const done = expect(playWithRetry({ play }, 'dev', 'spotify:track:a')).rejects.toMatchObject({ status: 404 });
+    await vi.advanceTimersByTimeAsync(1000);
+    await done;
+    expect(play).toHaveBeenCalledTimes(2);
+  });
+
+  it('does not retry other errors', async () => {
+    for (const error of [new ApiError(403, 'Premium required'), new AuthError(), new TypeError('Failed to fetch')]) {
+      const play = vi.fn(async () => {
+        throw error;
+      });
+      await expect(playWithRetry({ play }, 'dev', 'spotify:track:a')).rejects.toBe(error);
+      expect(play).toHaveBeenCalledTimes(1);
+    }
+  });
+
+  it('skips the retry once the user has moved to another card', async () => {
+    vi.useFakeTimers();
+    let current = true;
+    const play = vi.fn<(d: string, u: string, p?: number) => Promise<void>>();
+    play.mockRejectedValueOnce(new ApiError(404, 'Device not found'));
+    const done = playWithRetry({ play }, 'dev', 'spotify:track:a', 0, () => current);
+    current = false;
+    await vi.advanceTimersByTimeAsync(1000);
+    await done;
+    expect(play).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/hooks/usePlayer.ts b/src/hooks/usePlayer.ts
index e325540..782e8a3 100644
--- a/src/hooks/usePlayer.ts
+++ b/src/hooks/usePlayer.ts
@@ -8,13 +8,24 @@ export function usePlayerSnapshot(player: WebPlayer): PlayerSnapshot {
   return useSyncExternalStore(player.subscribe, player.getSnapshot);
 }
 
-async function playWithRetry(api: Pick<SpotifyApi, 'play'>, deviceId: string, uri: string, positionMs = 0) {
+/**
+ * Plays `uri`, retrying once on 404. `isCurrent` turns false once the user has moved to
+ * another card: the retry is then skipped so it can't start the previous card's song.
+ */
+export async function playWithRetry(
+  api: Pick<SpotifyApi, 'play'>,
+  deviceId: string,
+  uri: string,
+  positionMs = 0,
+  isCurrent: () => boolean = () => true,
+) {
   try {
     await api.play(deviceId, uri, positionMs);
   } catch (error) {
     if (!(error instanceof ApiError && error.status === 404)) throw error;
     // A freshly created SDK device can take a moment before the Web API knows it.
     await new Promise((resolve) => setTimeout(resolve, 1000));
+    if (!isCurrent()) return;
     await api.play(deviceId, uri, positionMs);
   }
 }
@@ -44,7 +55,14 @@ export function useCardPlayback(
       void player.pause();
       return;
     }
-    playWithRetry(api, snap.deviceId, playUri).catch((error: unknown) => onErrorRef.current(error));
+    let current = true;
+    const isCurrent = () => current;
+    playWithRetry(api, snap.deviceId, playUri, 0, isCurrent).catch((error: unknown) => {
+      if (isCurrent()) onErrorRef.current(error);
+    });
+    return () => {
+      current = false;
+    };
   }, [started, snap.deviceId, playUri, playable, player, api]);
 
   useEffect(() => {
diff --git a/src/main.tsx b/src/main.tsx
index d3d9b1c..75990d9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,3 +1,4 @@
+import { MotionConfig } from 'motion/react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './styles.css';
@@ -9,5 +10,9 @@ if (location.hostname === 'localhost') {
 } else {
   // No StrictMode: its double-run effects would redeem the one-time login code twice
   // and create two Spotify players.
-  createRoot(document.getElementById('root')!).render(<App />);
+  createRoot(document.getElementById('root')!).render(
+    <MotionConfig reducedMotion="user">
+      <App />
+    </MotionConfig>,
+  );
 }
diff --git a/src/session/controller.test.ts b/src/session/controller.test.ts
index 9f8c48c..984d176 100644
--- a/src/session/controller.test.ts
+++ b/src/session/controller.test.ts
@@ -266,3 +266,90 @@ describe('createSession', () => {
     expect(controller.getSnapshot().error).toBeNull();
   });
 });
+
+/** A playlist "on Spotify" that the fake API edits the way the real one does. */
+function fakeSpotify(initial: string[]) {
+  const rows = [...initial];
+  const api = {
+    removeItems: vi.fn(async (_playlistId: string, uris: string[]) => {
+      for (let i = rows.length - 1; i >= 0; i--) if (uris.includes(rows[i])) rows.splice(i, 1);
+    }),
+    addItems: vi.fn(async (_playlistId: string, uris: string[], position: number) => {
+      rows.splice(position, 0, ...uris);
+    }),
+  };
+  return { rows, api };
+}
+
+/** Deck in the order of `order`, over `playlist`; the clock ticks on every call. */
+function setupPlaylist(playlist: string[], order: string[]) {
+  const spotify = fakeSpotify(playlist);
+  const history = createHistoryStore(memoryStorage());
+  const positions = (uri: string) => playlist.flatMap((u, i) => (u === uri ? [i] : []));
+  const deck: Deck = { cards: order.map((uri) => card(uri, positions(uri))), skipped: 0, totalRows: playlist.length };
+  let clock = 1000;
+  const controller = createSession(
+    { api: spotify.api, history, playlistId: 'pl', sessionId: 's1', now: () => clock++ },
+    deck,
+  );
+  return { spotify, controller };
+}
+
+describe('createSession against a playlist', () => {
+  it('keeps the History entry when a song is removed again right after undo', async () => {
+    const { spotify, controller } = setupPlaylist(['a', 'b'], ['a', 'b']);
+    controller.remove();
+    await controller.idle();
+    controller.undo();
+    controller.remove(); // before the restore has run
+    await controller.idle();
+    expect(spotify.rows).toEqual(['b']);
+    expect(controller.getSnapshot().session.decisions.a).toBe('remove');
+    expect(controller.getSnapshot().history.map((e) => e.uri)).toEqual(['a']);
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b']);
+  });
+
+  it('does not count a removal that is still queued when restoring another song', async () => {
+    const { spotify, controller } = setupPlaylist(['x', 'b', 'y', 'a'], ['a', 'b', 'x', 'y']);
+    controller.remove();
+    await controller.idle();
+    controller.restore('a');
+    controller.remove(); // b, queued behind the restore
+    await controller.idle();
+    expect(spotify.rows).toEqual(['x', 'y', 'a']);
+  });
+
+  it('does not add a copy twice when an undo fails partway and is retried', async () => {
+    const { spotify, controller } = setupPlaylist(['a', 'b', 'a'], ['a', 'b']);
+    controller.remove();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['b']);
+    const addOnce = spotify.api.addItems.getMockImplementation()!;
+    spotify.api.addItems.mockImplementationOnce(addOnce).mockRejectedValueOnce(new TypeError('Failed to fetch'));
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b']);
+    expect(controller.getSnapshot().session.decisions.a).toBe('remove');
+    expect(controller.getSnapshot().history[0].positions).toEqual([2]);
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b', 'a']);
+    expect(controller.getSnapshot().history).toEqual([]);
+  });
+
+  it('ignores a second Restore click while the first is still queued', async () => {
+    const { spotify, controller } = setupPlaylist(['a', 'b'], ['a', 'b']);
+    controller.remove();
+    await controller.idle();
+    spotify.api.addItems.mockRejectedValueOnce(new ApiError(403, 'Forbidden'));
+    controller.restore('a');
+    controller.restore('a');
+    await controller.idle();
+    expect(spotify.api.addItems).toHaveBeenCalledTimes(1);
+    expect(spotify.rows).toEqual(['b']);
+    expect(controller.getSnapshot().session.decisions.a).toBe('remove');
+    expect(controller.getSnapshot().history.map((e) => e.uri)).toEqual(['a']);
+  });
+});
diff --git a/src/session/controller.ts b/src/session/controller.ts
index 4fddac1..8ebc0d4 100644
--- a/src/session/controller.ts
+++ b/src/session/controller.ts
@@ -52,6 +52,10 @@ export function createSession(deps: SessionDeps, deck: Deck): SessionController
   const length = { current: deck.totalRows };
   let pending = 0;
   let queue: Promise<void> = Promise.resolve();
+  /** Songs whose DELETE is queued or in flight. */
+  const unconfirmed = new Set<string>();
+  /** Songs with a restore queued or in flight. */
+  const restoring = new Set<string>();
 
   // The song is back in the playlist, so it is no longer removed: drop any history
   // entry left over from a session that removed it, before it can be shown as
@@ -92,18 +96,23 @@ export function createSession(deps: SessionDeps, deck: Deck): SessionController
       });
   }
 
-  async function restoreOnSpotify(uri: string) {
-    await restoreEntry({ api, history, playlistId }, uri, length);
-    update({ history: history.load(playlistId) });
-  }
-
-  async function restoreWithRollback(uri: string) {
-    try {
-      await restoreOnSpotify(uri);
-    } catch (error) {
-      dispatch({ type: 'restoreFailed', uri });
-      throw error;
-    }
+  function enqueueRestore(uri: string) {
+    // Captured now: a remove() of the same song queued behind this restore writes a
+    // newer entry, which must stay in History.
+    const removedAt = history.load(playlistId).find((e) => e.uri === uri)?.removedAt;
+    if (removedAt === undefined) return; // The removal never reached Spotify.
+    restoring.add(uri);
+    enqueue(async () => {
+      try {
+        await restoreEntry({ api, history, playlistId }, uri, length, { removedAt, unconfirmed });
+      } catch (error) {
+        dispatch({ type: 'restoreFailed', uri });
+        throw error;
+      } finally {
+        restoring.delete(uri);
+        update({ history: history.load(playlistId) });
+      }
+    });
   }
 
   return {
@@ -137,6 +146,7 @@ export function createSession(deps: SessionDeps, deck: Deck): SessionController
         removedAt: now(),
       });
       update({ history: history.load(playlistId) });
+      unconfirmed.add(card.uri);
       enqueue(async () => {
         try {
           await api.removeItems(playlistId, [card.uri]);
@@ -154,6 +164,8 @@ export function createSession(deps: SessionDeps, deck: Deck): SessionController
           throw new Error(
             `Couldn't confirm the removal of "${card.name}" — if it went through, you can restore it from History.`,
           );
+        } finally {
+          unconfirmed.delete(card.uri);
         }
         length.current -= card.positions.length;
       });
@@ -165,12 +177,13 @@ export function createSession(deps: SessionDeps, deck: Deck): SessionController
       const last = snapshot.session.undoStack[snapshot.session.undoStack.length - 1];
       if (!last) return;
       dispatch({ type: 'undo' });
-      if (last.decision === 'remove') enqueue(() => restoreWithRollback(last.uri));
+      if (last.decision === 'remove') enqueueRestore(last.uri);
     },
 
     restore(uri) {
+      if (restoring.has(uri)) return; // e.g. a double click on Restore
       dispatch({ type: 'restored', uri });
-      enqueue(() => restoreWithRollback(uri));
+      enqueueRestore(uri);
     },
 
     dismissError: () => update({ error: null }),
diff --git a/src/session/restore.test.ts b/src/session/restore.test.ts
index 552a432..3ed0e74 100644
--- a/src/session/restore.test.ts
+++ b/src/session/restore.test.ts
@@ -37,4 +37,46 @@ describe('restoreEntry', () => {
     await restoreEntry({ api, history: createHistoryStore(memoryStorage()), playlistId: 'pl' }, 'a', { current: 0 });
     expect(api.addItems).not.toHaveBeenCalled();
   });
+
+  it('trims the entry after each insert, so a retry after a failure does not add a copy twice', async () => {
+    const history = createHistoryStore(memoryStorage());
+    history.add('pl', entry('a', [0, 2]));
+    const api = { addItems: vi.fn(async (_p: string, _uris: string[], _position: number) => {}) };
+    api.addItems.mockResolvedValueOnce().mockRejectedValueOnce(new TypeError('Failed to fetch'));
+    const length = { current: 1 };
+
+    await expect(restoreEntry({ api, history, playlistId: 'pl' }, 'a', length)).rejects.toThrow();
+    expect(length.current).toBe(2);
+    expect(history.load('pl')[0].positions).toEqual([2]);
+
+    await restoreEntry({ api, history, playlistId: 'pl' }, 'a', length);
+    expect(api.addItems).toHaveBeenLastCalledWith('pl', ['a'], 2);
+    expect(history.load('pl')).toEqual([]);
+  });
+
+  it('inserts positions given out of order in ascending order', async () => {
+    const history = createHistoryStore(memoryStorage());
+    history.add('pl', entry('a', [5, 1]));
+    const api = { addItems: vi.fn(async (_p: string, _uris: string[], _position: number) => {}) };
+    await restoreEntry({ api, history, playlistId: 'pl' }, 'a', { current: 10 });
+    expect(api.addItems.mock.calls.map((call) => call[2])).toEqual([1, 5]);
+  });
+
+  it('does not count songs whose removal is still queued', async () => {
+    const history = createHistoryStore(memoryStorage());
+    history.add('pl', entry('a', [3]));
+    history.add('pl', entry('b', [1]));
+    const api = { addItems: vi.fn(async (_p: string, _uris: string[], _position: number) => {}) };
+    await restoreEntry({ api, history, playlistId: 'pl' }, 'a', { current: 3 }, { unconfirmed: new Set(['b']) });
+    expect(api.addItems).toHaveBeenCalledWith('pl', ['a'], 3);
+  });
+
+  it('puts the song back but keeps a newer entry written since the restore was asked for', async () => {
+    const history = createHistoryStore(memoryStorage());
+    history.add('pl', { ...entry('a', [0]), removedAt: 2 });
+    const api = { addItems: vi.fn(async (_p: string, _uris: string[], _position: number) => {}) };
+    await restoreEntry({ api, history, playlistId: 'pl' }, 'a', { current: 1 }, { removedAt: 1 });
+    expect(api.addItems).toHaveBeenCalledTimes(1);
+    expect(history.load('pl')).toEqual([{ ...entry('a', [0]), removedAt: 2 }]);
+  });
 });
diff --git a/src/session/restore.ts b/src/session/restore.ts
index b53d91e..f0683e7 100644
--- a/src/session/restore.ts
+++ b/src/session/restore.ts
@@ -8,25 +8,45 @@ export interface RestoreDeps {
   playlistId: string;
 }
 
+export interface RestoreOptions {
+  /**
+   * `removedAt` of the entry when the restore was asked for. If the song was removed
+   * again since (its DELETE queued behind this restore), it is still put back, but the
+   * newer entry stays in History.
+   */
+  removedAt?: number;
+  /** Songs whose DELETE hasn't run yet: they are still in the playlist. */
+  unconfirmed?: ReadonlySet<string>;
+  /** Called after each copy is back, in ascending position order. */
+  onInserted?: () => void;
+}
+
 /**
  * Puts a removed song back at its original positions and drops its History entry.
  * `length` is the playlist's current row count and is updated after every insert, so
- * it stays right even if a later insert fails.
+ * it stays right even if a later insert fails. The entry is trimmed after every
+ * insert too, so retrying after a failure doesn't add a copy twice.
  */
 export async function restoreEntry(
   { api, history, playlistId }: RestoreDeps,
   uri: string,
   length: { current: number },
+  { removedAt, unconfirmed, onInserted }: RestoreOptions = {},
 ): Promise<void> {
   const entries = history.load(playlistId);
   const entry = entries.find((e) => e.uri === uri);
   if (!entry) return; // The removal never reached Spotify, so there is nothing to put back.
+  const ours = removedAt === undefined || entry.removedAt === removedAt;
   const otherRemoved = entries
-    .filter((e) => e.sessionId === entry.sessionId && e.uri !== uri)
+    .filter((e) => e.sessionId === entry.sessionId && e.uri !== uri && !unconfirmed?.has(e.uri))
     .flatMap((e) => e.positions);
-  for (const index of restoreIndices(entry.positions, otherRemoved)) {
+  const positions = [...entry.positions].sort((a, b) => a - b);
+  const indices = restoreIndices(positions, otherRemoved);
+  for (const [i, index] of indices.entries()) {
     await api.addItems(playlistId, [uri], clampIndex(index, length.current));
     length.current++;
+    if (ours) history.add(playlistId, { ...entry, positions: positions.slice(i + 1) });
+    onInserted?.();
   }
-  history.remove(playlistId, uri);
+  if (ours) history.remove(playlistId, uri);
 }
diff --git a/src/spotify/api.test.ts b/src/spotify/api.test.ts
index b4d7560..9bcee94 100644
--- a/src/spotify/api.test.ts
+++ b/src/spotify/api.test.ts
@@ -39,6 +39,7 @@ describe('createApi', () => {
       .mockResolvedValueOnce(json({ id: 'me', display_name: null }));
     expect(await api.getMe()).toEqual({ id: 'me', displayName: null });
     expect(forceRefresh).toHaveBeenCalledTimes(1);
+    expect(forceRefresh).toHaveBeenCalledWith('token-1');
     expect(authHeader(fetchMock.mock.calls[1])).toBe('Bearer fresh-token');
   });
 
@@ -59,6 +60,20 @@ describe('createApi', () => {
     expect(fetchMock).toHaveBeenCalledTimes(2);
   });
 
+  it('waits one second when Retry-After is missing', async () => {
+    const { api, fetchMock, sleep } = setup();
+    fetchMock.mockResolvedValueOnce(json({}, 429)).mockResolvedValueOnce(json({ id: 'me', display_name: null }));
+    await api.getMe();
+    expect(sleep).toHaveBeenCalledWith(1000);
+  });
+
+  it('fails at once instead of waiting for a very long Retry-After', async () => {
+    const { api, fetchMock, sleep } = setup();
+    fetchMock.mockResolvedValueOnce(json({}, 429, { 'Retry-After': '3600' }));
+    await expect(api.getMe()).rejects.toMatchObject({ status: 429, message: expect.stringMatching(/60 min/) });
+    expect(sleep).not.toHaveBeenCalled();
+  });
+
   it('stops retrying 429 after three attempts', async () => {
     const { api, fetchMock, sleep } = setup();
     fetchMock.mockImplementation(async () => json({}, 429, { 'Retry-After': '1' }));
diff --git a/src/spotify/api.ts b/src/spotify/api.ts
index ba1bad9..b0747a8 100644
--- a/src/spotify/api.ts
+++ b/src/spotify/api.ts
@@ -4,10 +4,12 @@ import { ApiError, AuthError } from './errors';
 
 const BASE = 'https://api.spotify.com/v1';
 const MAX_RATE_LIMIT_RETRIES = 3;
+/** Longer Retry-After waits fail instead of leaving the UI hanging. */
+const MAX_RETRY_AFTER_S = 30;
 
 export interface ApiDeps {
   getAccessToken: () => Promise<string>;
-  forceRefresh: () => Promise<string>;
+  forceRefresh: (rejectedToken: string) => Promise<string>;
   fetch: typeof fetch;
   sleep?: (ms: number) => Promise<void>;
 }
@@ -73,13 +75,19 @@ export function createApi(deps: ApiDeps): SpotifyApi {
 
       if (res.status === 401) {
         if (refreshed) throw new AuthError();
-        token = await deps.forceRefresh();
+        token = await deps.forceRefresh(token);
         refreshed = true;
         continue;
       }
-      if (res.status === 429 && attempt < MAX_RATE_LIMIT_RETRIES) {
-        await sleep((Number(res.headers.get('Retry-After')) || 1) * 1000);
-        continue;
+      if (res.status === 429) {
+        const retryAfter = Number(res.headers.get('Retry-After')) || 1;
+        if (retryAfter > MAX_RETRY_AFTER_S) {
+          throw new ApiError(429, `Too many requests — try again in ${Math.ceil(retryAfter / 60)} min.`);
+        }
+        if (attempt < MAX_RATE_LIMIT_RETRIES) {
+          await sleep(retryAfter * 1000);
+          continue;
+        }
       }
 
       const text = await res.text();
diff --git a/src/spotify/auth.test.ts b/src/spotify/auth.test.ts
index bcf5c5c..e0b1cde 100644
--- a/src/spotify/auth.test.ts
+++ b/src/spotify/auth.test.ts
@@ -93,12 +93,81 @@ describe('getAccessToken', () => {
     expect(auth.isLoggedIn()).toBe(true);
   });
 
+  it('keeps another tab’s rotated tokens when its own refresh is rejected', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storeTokens(storage, NOW);
+    fetchMock.mockImplementationOnce(async () => {
+      // Another tab refreshed first and rotated the refresh token.
+      storage.setItem(
+        TOKENS_KEY,
+        JSON.stringify({ accessToken: 'tab-access', refreshToken: 'tab-refresh', expiresAt: NOW + 3_600_000, scopes: SCOPES }),
+      );
+      return json({ error: 'invalid_grant' }, 400);
+    });
+    expect(await auth.getAccessToken()).toBe('tab-access');
+    expect(auth.isLoggedIn()).toBe(true);
+  });
+
+  it('stays logged out when logout happens during a refresh', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storeTokens(storage, NOW);
+    let respond!: (res: Response) => void;
+    fetchMock.mockReturnValueOnce(new Promise((resolve) => (respond = resolve)));
+    const pending = auth.getAccessToken();
+    auth.logout();
+    respond(json({ access_token: 'new-access', expires_in: 3600 }));
+    await expect(pending).rejects.toBeInstanceOf(AuthError);
+    expect(storage.getItem(TOKENS_KEY)).toBeNull();
+  });
+
+  it('refreshes again after an earlier refresh has settled', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storeTokens(storage, NOW);
+    fetchMock
+      .mockResolvedValueOnce(json({ access_token: 'a1', expires_in: 0 }))
+      .mockResolvedValueOnce(json({ access_token: 'a2', expires_in: 3600 }));
+    expect(await auth.getAccessToken()).toBe('a1');
+    expect(await auth.getAccessToken()).toBe('a2');
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+
+  it('stays logged in when the token endpoint fails with a server error', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storeTokens(storage, NOW);
+    fetchMock.mockResolvedValueOnce(json({}, 500));
+    await expect(auth.getAccessToken()).rejects.toMatchObject({ status: 500 });
+    expect(auth.isLoggedIn()).toBe(true);
+  });
+
+  it('treats corrupt stored tokens as logged out', async () => {
+    const { auth, storage } = setup();
+    storage.setItem(TOKENS_KEY, '{not json');
+    expect(auth.isLoggedIn()).toBe(false);
+    await expect(auth.getAccessToken()).rejects.toBeInstanceOf(AuthError);
+  });
+
   it('rejects with AuthError when not logged in', async () => {
     const { auth } = setup();
     await expect(auth.getAccessToken()).rejects.toBeInstanceOf(AuthError);
   });
 });
 
+describe('forceRefresh', () => {
+  it('refreshes even while the stored token looks valid', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storeTokens(storage, NOW + 3_600_000);
+    fetchMock.mockResolvedValueOnce(json({ access_token: 'new-access', expires_in: 3600 }));
+    expect(await auth.forceRefresh('old-access')).toBe('new-access');
+  });
+
+  it('returns the current token when the rejected one was already replaced', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storeTokens(storage, NOW + 3_600_000);
+    expect(await auth.forceRefresh('older-access')).toBe('old-access');
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});
+
 describe('login and callback', () => {
   it('redirects to Spotify with a PKCE challenge, all scopes and a stored state', async () => {
     const { auth, storage, navigate } = setup();
@@ -129,6 +198,7 @@ describe('login and callback', () => {
     expect(body.get('redirect_uri')).toBe('http://127.0.0.1:5173/callback');
     expect(auth.isLoggedIn()).toBe(true);
     expect(storage.getItem('spotify-swipe:verifier')).toBeNull();
+    expect(storage.getItem('spotify-swipe:state')).toBeNull();
   });
 
   it('rejects a callback whose state does not match', async () => {
@@ -139,6 +209,30 @@ describe('login and callback', () => {
     expect(fetchMock).not.toHaveBeenCalled();
   });
 
+  it('rejects a callback when no state was stored or returned', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storage.setItem('spotify-swipe:verifier', 'verifier-abc');
+    await expect(auth.handleCallback('?code=c')).rejects.toBeInstanceOf(AuthError);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('forgets the verifier and state after a rejected callback', async () => {
+    const { auth, storage } = setup();
+    storage.setItem('spotify-swipe:verifier', 'verifier-abc');
+    storage.setItem('spotify-swipe:state', 'state-xyz');
+    await expect(auth.handleCallback('?code=c&state=evil')).rejects.toBeInstanceOf(AuthError);
+    expect(storage.getItem('spotify-swipe:verifier')).toBeNull();
+    expect(storage.getItem('spotify-swipe:state')).toBeNull();
+  });
+
+  it('rejects a callback without a code', async () => {
+    const { auth, storage, fetchMock } = setup();
+    storage.setItem('spotify-swipe:verifier', 'verifier-abc');
+    storage.setItem('spotify-swipe:state', 'state-xyz');
+    await expect(auth.handleCallback('?state=state-xyz')).rejects.toBeInstanceOf(AuthError);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
   it('rejects a callback where the user cancelled', async () => {
     const { auth } = setup();
     await expect(auth.handleCallback('?error=access_denied')).rejects.toThrow(/cancelled/);
diff --git a/src/spotify/auth.ts b/src/spotify/auth.ts
index 939cf0a..7bde996 100644
--- a/src/spotify/auth.ts
+++ b/src/spotify/auth.ts
@@ -54,7 +54,8 @@ export interface Auth {
   login(): Promise<void>;
   handleCallback(search: string): Promise<void>;
   getAccessToken(): Promise<string>;
-  forceRefresh(): Promise<string>;
+  /** Refresh after Spotify rejected `rejectedToken`, unless it was already replaced. */
+  forceRefresh(rejectedToken?: string): Promise<string>;
   logout(): void;
 }
 
@@ -62,6 +63,8 @@ export interface Auth {
 export function createAuth(deps: AuthDeps): Auth {
   const { storage } = deps;
   let refreshing: Promise<string> | null = null;
+  /** Bumped by logout, so a refresh still in flight does not save its tokens afterwards. */
+  let generation = 0;
 
   function readTokens(): Tokens | null {
     try {
@@ -100,12 +103,20 @@ export function createAuth(deps: AuthDeps): Auth {
     refreshing ??= (async () => {
       const tokens = readTokens();
       if (!tokens?.refreshToken) throw new AuthError('Not logged in');
+      const startedIn = generation;
       try {
         const response = await requestToken({ grant_type: 'refresh_token', refresh_token: tokens.refreshToken });
+        if (startedIn !== generation) throw new AuthError('Not logged in');
         return saveTokens(response, tokens).accessToken;
       } catch (error) {
+        if (!(error instanceof AuthError)) throw error;
+        // Another tab may have rotated the refresh token first: use its tokens instead.
+        const current = readTokens();
+        if (startedIn === generation && current?.refreshToken && current.refreshToken !== tokens.refreshToken) {
+          return current.accessToken;
+        }
         // Only a rejected refresh token means the login is gone; network errors are retryable.
-        if (error instanceof AuthError) storage.removeItem(TOKENS_KEY);
+        if (current?.refreshToken === tokens.refreshToken) storage.removeItem(TOKENS_KEY);
         throw error;
       }
     })().finally(() => {
@@ -152,7 +163,11 @@ export function createAuth(deps: AuthDeps): Auth {
       if (denied) throw new AuthError(`Spotify login was cancelled (${denied}).`);
       const code = params.get('code');
       const verifier = storage.getItem(VERIFIER_KEY);
-      if (!code || !verifier || params.get('state') !== storage.getItem(STATE_KEY)) {
+      const state = storage.getItem(STATE_KEY);
+      // Each login attempt's verifier and state are single-use, whatever the outcome.
+      storage.removeItem(VERIFIER_KEY);
+      storage.removeItem(STATE_KEY);
+      if (!code || !verifier || !state || params.get('state') !== state) {
         throw new AuthError('The login response did not match. Please try again.');
       }
       const response = await requestToken({
@@ -162,8 +177,6 @@ export function createAuth(deps: AuthDeps): Auth {
         code_verifier: verifier,
       });
       saveTokens(response);
-      storage.removeItem(VERIFIER_KEY);
-      storage.removeItem(STATE_KEY);
     },
 
     async getAccessToken() {
@@ -173,10 +186,18 @@ export function createAuth(deps: AuthDeps): Auth {
       return refresh();
     },
 
-    forceRefresh: refresh,
+    async forceRefresh(rejectedToken) {
+      const tokens = readTokens();
+      // A concurrent request already swapped the rejected token for a new one.
+      if (rejectedToken && tokens && tokens.accessToken !== rejectedToken) return tokens.accessToken;
+      return refresh();
+    },
 
     logout() {
+      generation++;
       storage.removeItem(TOKENS_KEY);
+      storage.removeItem(VERIFIER_KEY);
+      storage.removeItem(STATE_KEY);
     },
   };
 }
diff --git a/src/spotify/player.test.ts b/src/spotify/player.test.ts
new file mode 100644
index 0000000..8fa40b9
--- /dev/null
+++ b/src/spotify/player.test.ts
@@ -0,0 +1,189 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+type Listener = (payload: unknown) => void;
+
+/** Stand-in for the SDK's Spotify.Player, recording listeners and calls. */
+class FakePlayer {
+  static instances: FakePlayer[] = [];
+  listeners = new Map<string, Listener>();
+  connect = vi.fn(async () => true);
+  disconnect = vi.fn();
+  activateElement = vi.fn(async () => {});
+  togglePlay = vi.fn(async () => {});
+  pause = vi.fn(async () => {});
+  seek = vi.fn(async (_ms: number) => {});
+
+  constructor(readonly options: { getOAuthToken: (cb: (token: string) => void) => void }) {
+    FakePlayer.instances.push(this);
+  }
+
+  addListener(event: string, listener: Listener) {
+    this.listeners.set(event, listener);
+    return true;
+  }
+
+  emit(event: string, payload?: unknown) {
+    this.listeners.get(event)!(payload);
+  }
+}
+
+let scripts: { src: string; onerror: (() => void) | null; remove: () => void }[];
+let win: { Spotify?: { Player: typeof FakePlayer }; onSpotifyWebPlaybackSDKReady?: () => void };
+
+beforeEach(() => {
+  vi.resetModules(); // player.ts caches the SDK load per module instance
+  FakePlayer.instances = [];
+  scripts = [];
+  win = {};
+  vi.stubGlobal('window', win);
+  vi.stubGlobal('document', {
+    createElement: () => {
+      const script = { src: '', async: false, onerror: null, remove: () => scripts.splice(scripts.indexOf(script), 1) };
+      return script;
+    },
+    body: { appendChild: (script: (typeof scripts)[number]) => scripts.push(script) },
+  });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+async function createLoaded(getToken = async () => 'token') {
+  win.Spotify = { Player: FakePlayer };
+  const { createWebPlayer } = await import('./player');
+  const player = createWebPlayer(getToken);
+  await flush();
+  return { player, sdk: FakePlayer.instances[0] };
+}
+
+describe('createWebPlayer', () => {
+  it('loads the SDK script once for several players', async () => {
+    const { createWebPlayer } = await import('./player');
+    createWebPlayer(async () => 't');
+    createWebPlayer(async () => 't');
+    expect(scripts.map((s) => s.src)).toEqual(['https://sdk.scdn.co/spotify-player.js']);
+    win.Spotify = { Player: FakePlayer };
+    win.onSpotifyWebPlaybackSDKReady!();
+    await flush();
+    expect(FakePlayer.instances).toHaveLength(2);
+    expect(FakePlayer.instances.every((p) => p.connect.mock.calls.length === 1)).toBe(true);
+  });
+
+  it('uses an SDK that is already loaded without adding a script', async () => {
+    const { sdk } = await createLoaded();
+    expect(scripts).toEqual([]);
+    expect(sdk.connect).toHaveBeenCalled();
+  });
+
+  it('reports a failed SDK load, and the next player tries again', async () => {
+    const { createWebPlayer } = await import('./player');
+    const first = createWebPlayer(async () => 't');
+    scripts[0].onerror!();
+    await flush();
+    expect(first.getSnapshot().error).toBe('Could not load the Spotify player.');
+    expect(scripts).toEqual([]);
+
+    createWebPlayer(async () => 't');
+    expect(scripts).toHaveLength(1);
+  });
+
+  it('does not create a player when disconnected before the SDK loaded', async () => {
+    const { createWebPlayer } = await import('./player');
+    const player = createWebPlayer(async () => 't');
+    player.disconnect();
+    win.Spotify = { Player: FakePlayer };
+    win.onSpotifyWebPlaybackSDKReady!();
+    await flush();
+    expect(FakePlayer.instances).toEqual([]);
+  });
+
+  it('tracks readiness and the device id', async () => {
+    const { player, sdk } = await createLoaded();
+    sdk.emit('ready', { device_id: 'dev-1' });
+    expect(player.getSnapshot()).toMatchObject({ deviceId: 'dev-1', ready: true });
+    sdk.emit('not_ready', { device_id: 'dev-1' });
+    expect(player.getSnapshot().ready).toBe(false);
+  });
+
+  it('maps playback state', async () => {
+    const { player, sdk } = await createLoaded();
+    sdk.emit('player_state_changed', {
+      paused: false,
+      position: 1200,
+      duration: 180_000,
+      track_window: { current_track: { uri: 'spotify:track:a' } },
+    });
+    expect(player.getSnapshot()).toMatchObject({
+      paused: false,
+      positionMs: 1200,
+      durationMs: 180_000,
+      trackUri: 'spotify:track:a',
+      movedAway: false,
+    });
+  });
+
+  it('only reports playback as moved away after this tab was playing', async () => {
+    const { player, sdk } = await createLoaded();
+    sdk.emit('player_state_changed', null);
+    expect(player.getSnapshot().movedAway).toBe(false);
+    sdk.emit('player_state_changed', { paused: false, position: 0, duration: 1, track_window: { current_track: null } });
+    sdk.emit('player_state_changed', null);
+    expect(player.getSnapshot()).toMatchObject({ movedAway: true, paused: true });
+  });
+
+  it.each([
+    ['initialization_error', { message: 'no EME' }, "This browser can't play Spotify here: no EME"],
+    ['authentication_error', { message: 'x' }, 'Your Spotify login expired — please reconnect.'],
+    ['account_error', { message: 'x' }, 'In-browser playback needs Spotify Premium.'],
+    ['playback_error', { message: 'boom' }, 'Playback error: boom'],
+  ])('turns %s into a readable error', async (event, payload, message) => {
+    const { player, sdk } = await createLoaded();
+    sdk.emit(event, payload);
+    expect(player.getSnapshot().error).toBe(message);
+  });
+
+  it('hands the SDK a token, or reports a lost login', async () => {
+    const { sdk } = await createLoaded(async () => 'the-token');
+    const callback = vi.fn();
+    sdk.options.getOAuthToken(callback);
+    await flush();
+    expect(callback).toHaveBeenCalledWith('the-token');
+
+    const failing = await createLoaded(async () => {
+      throw new Error('no login');
+    });
+    const failingSdk = FakePlayer.instances[1];
+    const never = vi.fn();
+    failingSdk.options.getOAuthToken(never);
+    await flush();
+    expect(never).not.toHaveBeenCalled();
+    expect(failing.player.getSnapshot().error).toMatch(/login expired/);
+  });
+
+  it('notifies subscribers until they unsubscribe', async () => {
+    const { player, sdk } = await createLoaded();
+    const listener = vi.fn();
+    const unsubscribe = player.subscribe(listener);
+    sdk.emit('ready', { device_id: 'd' });
+    unsubscribe();
+    sdk.emit('not_ready', { device_id: 'd' });
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes controls through to the SDK player', async () => {
+    const { player, sdk } = await createLoaded();
+    await player.activate();
+    await player.togglePlay();
+    await player.pause();
+    await player.seek(5000);
+    player.disconnect();
+    expect(sdk.activateElement).toHaveBeenCalled();
+    expect(sdk.togglePlay).toHaveBeenCalled();
+    expect(sdk.pause).toHaveBeenCalled();
+    expect(sdk.seek).toHaveBeenCalledWith(5000);
+    expect(sdk.disconnect).toHaveBeenCalled();
+  });
+});
diff --git a/src/spotify/player.ts b/src/spotify/player.ts
index 3d12e89..99aee0c 100644
--- a/src/spotify/player.ts
+++ b/src/spotify/player.ts
@@ -36,7 +36,12 @@ function loadSdk(): Promise<void> {
     const script = document.createElement('script');
     script.src = SDK_URL;
     script.async = true;
-    script.onerror = () => reject(new Error('Could not load the Spotify player.'));
+    script.onerror = () => {
+      // Forget the failure so the next player (e.g. after reconnecting) tries again.
+      sdkLoaded = null;
+      script.remove();
+      reject(new Error('Could not load the Spotify player.'));
+    };
     document.body.appendChild(script);
   });
   return sdkLoaded;
@@ -47,6 +52,7 @@ export function createWebPlayer(getToken: () => Promise<string>): WebPlayer {
   const listeners = new Set<() => void>();
   let player: Spotify.Player | null = null;
   let wasActive = false;
+  let disposed = false;
   let snapshot: PlayerSnapshot = {
     deviceId: null,
     ready: false,
@@ -66,6 +72,7 @@ export function createWebPlayer(getToken: () => Promise<string>): WebPlayer {
 
   loadSdk().then(
     () => {
+      if (disposed) return;
       player = new window.Spotify.Player({
         name: 'Swipify',
         volume: 0.8,
@@ -101,7 +108,9 @@ export function createWebPlayer(getToken: () => Promise<string>): WebPlayer {
       player.addListener('playback_error', ({ message }) => update({ error: `Playback error: ${message}` }));
       void player.connect();
     },
-    (error: Error) => update({ error: error.message }),
+    (error: Error) => {
+      if (!disposed) update({ error: error.message });
+    },
   );
 
   return {
@@ -124,6 +133,10 @@ export function createWebPlayer(getToken: () => Promise<string>): WebPlayer {
     seek: async (ms) => {
       await player?.seek(ms);
     },
-    disconnect: () => player?.disconnect(),
+    disconnect: () => {
+      disposed = true;
+      listeners.clear();
+      player?.disconnect();
+    },
   };
 }

From fefb08996b53e0a85db8fed9236b00c4385e7c34 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 25 Sep 2026 08:59:40 +0000
Subject: [PATCH 2/2] Fix gaps found in the follow-up review

- restoreEntry re-checks before every History write that the entry is
  still the one it was asked to restore, so removing the song again while
  its restore POST is in flight no longer loses the new entry (the earlier
  fix only covered a remove queued before the restore started).
- History Restore is ignored while the song's own DELETE is unconfirmed:
  if that DELETE failed without being applied, the restore duplicated it.
- Dedupe Undo trims the song's History entry after each re-added row, so
  Restore after a partly failed Undo no longer adds extra copies.
- History panel focuses itself rather than its Close button, so Space
  still toggles playback while it is open; focus returns on close.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RofS2KTGcgYYorEqtuB5Uo
---
 src/components/HistoryPanel.tsx | 17 +++++++++++------
 src/components/gestures.test.ts |  2 ++
 src/dedupe/controller.test.ts   | 17 +++++++++++++++++
 src/dedupe/controller.ts        | 19 ++++++++++++++++++
 src/session/controller.test.ts  | 34 +++++++++++++++++++++++++++++++++
 src/session/controller.ts       |  3 +++
 src/session/restore.ts          |  9 ++++++---
 src/styles.css                  |  1 +
 8 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/src/components/HistoryPanel.tsx b/src/components/HistoryPanel.tsx
index 646ceda..79f97d5 100644
--- a/src/components/HistoryPanel.tsx
+++ b/src/components/HistoryPanel.tsx
@@ -11,25 +11,30 @@ interface Props {
 }
 
 export function HistoryPanel({ entries, sessionId, note, onRestore, onClose }: Props) {
-  const closeRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLElement>(null);
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
 
   useEffect(() => {
-    // The panel can cover the card: move focus into it, and let Escape close it.
-    closeRef.current?.focus();
+    // The panel can cover the card: move focus into it (the panel itself, not a button,
+    // so Space still toggles playback), let Escape close it, and give focus back after.
+    const previous = document.activeElement as HTMLElement | null;
+    panelRef.current?.focus();
     const onKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onCloseRef.current();
     };
     window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      previous?.focus?.();
+    };
   }, []);
 
   return (
-    <aside className="history" aria-label="Removed songs">
+    <aside ref={panelRef} className="history" aria-label="Removed songs" tabIndex={-1}>
       <header>
         <h2>Removed songs</h2>
-        <button ref={closeRef} className="link" onClick={onClose} aria-label="Close">
+        <button className="link" onClick={onClose} aria-label="Close">
           ✕
         </button>
       </header>
diff --git a/src/components/gestures.test.ts b/src/components/gestures.test.ts
index 6763b67..00fbaf9 100644
--- a/src/components/gestures.test.ts
+++ b/src/components/gestures.test.ts
@@ -75,6 +75,8 @@ describe('shortcutFor', () => {
     expect(shortcutFor(key('ArrowLeft'), open)).toBeNull();
     expect(shortcutFor(key('z', { ctrlKey: true }), open)).toBe('undo');
     expect(shortcutFor(key(' '), open)).toBe('toggle');
+    // The open panel itself has focus, not one of its buttons.
+    expect(shortcutFor(key(' ', { target: element('aside') }), open)).toBe('toggle');
   });
 
   it('lets Space press a focused button instead of toggling playback', () => {
diff --git a/src/dedupe/controller.test.ts b/src/dedupe/controller.test.ts
index 2762ef7..e66d807 100644
--- a/src/dedupe/controller.test.ts
+++ b/src/dedupe/controller.test.ts
@@ -337,4 +337,21 @@ describe('createDedupeRun', () => {
     await controller.idle();
     expect(spotify.rows).toEqual(['a2', 'b2', 'a', 'b', 'c']);
   });
+
+  it('undo failing partway, then Restore, puts back only what is still missing', async () => {
+    const playlist = ['a', 'b', 'a2', 'c', 'a2'];
+    const { spotify, controller, ops } = setup([], playlist, { a2: 'a' });
+    controller.start(ops);
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b', 'c']);
+    const add = spotify.api.addItems.getMockImplementation()!;
+    spotify.api.addItems.mockImplementationOnce(add).mockRejectedValueOnce(new TypeError('Failed to fetch'));
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b', 'a2', 'c']);
+    controller.restore('a2');
+    await controller.idle();
+    expect(spotify.rows).toEqual(playlist);
+    expect(controller.getSnapshot()).toMatchObject({ removed: 0, history: [] });
+  });
 });
diff --git a/src/dedupe/controller.ts b/src/dedupe/controller.ts
index 2869f33..8a91b59 100644
--- a/src/dedupe/controller.ts
+++ b/src/dedupe/controller.ts
@@ -150,6 +150,24 @@ export function createDedupeRun(deps: DedupeDeps): DedupeController {
     }
   }
 
+  /**
+   * Undo put `row` back: drop its position from the song's History entry, so a later
+   * Restore after a failed Undo doesn't add it a second time. Positions are in History's
+   * index space, but ascending, so the row's rank among the song's missing rows picks it.
+   */
+  function trimEntry(row: MissingRow) {
+    const op = ops[next];
+    // A pending copies op's safety entry only covers the kept row; rowBack drops it.
+    if (reAddPending && op?.kind === 'copies' && op.card.uri === row.uri) return;
+    const entry = history.load(playlistId).find((e) => e.uri === row.uri && e.sessionId === runId);
+    const rowsOfSong = missing.filter((r) => r.uri === row.uri);
+    if (!entry || entry.positions.length !== rowsOfSong.length) return;
+    const rank = rowsOfSong.filter((r) => r.index < row.index).length;
+    const positions = [...entry.positions].sort((a, b) => a - b);
+    positions.splice(rank, 1);
+    history.add(playlistId, { ...entry, positions });
+  }
+
   /** Deletes every copy of `card`. Its History entry must already be written. */
   async function removeSong(card: Card) {
     try {
@@ -246,6 +264,7 @@ export function createDedupeRun(deps: DedupeDeps): DedupeController {
           for (const row of rows) {
             await api.addItems(playlistId, [row.uri], clampIndex(row.index, length.current));
             length.current++;
+            trimEntry(row);
             rowBack(row);
             update({ done: snapshot.done + 1 });
           }
diff --git a/src/session/controller.test.ts b/src/session/controller.test.ts
index 984d176..0537123 100644
--- a/src/session/controller.test.ts
+++ b/src/session/controller.test.ts
@@ -352,4 +352,38 @@ describe('createSession against a playlist', () => {
     expect(controller.getSnapshot().session.decisions.a).toBe('remove');
     expect(controller.getSnapshot().history.map((e) => e.uri)).toEqual(['a']);
   });
+
+  it('keeps the History entry when the song is removed again while its restore is in flight', async () => {
+    const { spotify, controller } = setupPlaylist(['a', 'b'], ['a', 'b']);
+    controller.remove();
+    await controller.idle();
+    const gate = deferred();
+    const add = spotify.api.addItems.getMockImplementation()!;
+    spotify.api.addItems.mockImplementationOnce(async (...args) => {
+      await gate.promise;
+      return add(...args);
+    });
+    controller.undo();
+    await flush();
+    expect(spotify.api.addItems).toHaveBeenCalledTimes(1); // the restore POST is in flight
+    controller.remove();
+    gate.resolve();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['b']);
+    expect(controller.getSnapshot().history.map((e) => e.uri)).toEqual(['a']);
+    expect(controller.getSnapshot().history[0].positions).toEqual([0]);
+    controller.undo();
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b']);
+  });
+
+  it('ignores Restore while the song’s own removal is still in flight', async () => {
+    const { spotify, controller } = setupPlaylist(['a', 'b'], ['a', 'b']);
+    spotify.api.removeItems.mockRejectedValueOnce(new TypeError('Failed to fetch')); // DELETE not applied
+    controller.remove();
+    controller.restore('a');
+    await controller.idle();
+    expect(spotify.rows).toEqual(['a', 'b']);
+    expect(spotify.api.addItems).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/session/controller.ts b/src/session/controller.ts
index 8ebc0d4..f7f587f 100644
--- a/src/session/controller.ts
+++ b/src/session/controller.ts
@@ -182,6 +182,9 @@ export function createSession(deps: SessionDeps, deck: Deck): SessionController
 
     restore(uri) {
       if (restoring.has(uri)) return; // e.g. a double click on Restore
+      // Its DELETE hasn't finished: if that fails without being applied, a restore
+      // would add a second copy.
+      if (unconfirmed.has(uri)) return;
       dispatch({ type: 'restored', uri });
       enqueueRestore(uri);
     },
diff --git a/src/session/restore.ts b/src/session/restore.ts
index f0683e7..b65456a 100644
--- a/src/session/restore.ts
+++ b/src/session/restore.ts
@@ -36,7 +36,10 @@ export async function restoreEntry(
   const entries = history.load(playlistId);
   const entry = entries.find((e) => e.uri === uri);
   if (!entry) return; // The removal never reached Spotify, so there is nothing to put back.
-  const ours = removedAt === undefined || entry.removedAt === removedAt;
+  // Checked before every History write: the song can be removed again while an insert
+  // is in flight, and that newer entry must survive.
+  const ours = () =>
+    removedAt === undefined || history.load(playlistId).find((e) => e.uri === uri)?.removedAt === removedAt;
   const otherRemoved = entries
     .filter((e) => e.sessionId === entry.sessionId && e.uri !== uri && !unconfirmed?.has(e.uri))
     .flatMap((e) => e.positions);
@@ -45,8 +48,8 @@ export async function restoreEntry(
   for (const [i, index] of indices.entries()) {
     await api.addItems(playlistId, [uri], clampIndex(index, length.current));
     length.current++;
-    if (ours) history.add(playlistId, { ...entry, positions: positions.slice(i + 1) });
+    if (ours()) history.add(playlistId, { ...entry, positions: positions.slice(i + 1) });
     onInserted?.();
   }
-  if (ours) history.remove(playlistId, uri);
+  if (ours()) history.remove(playlistId, uri);
 }
diff --git a/src/styles.css b/src/styles.css
index 876346c..8bbc7ac 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -92,6 +92,7 @@ button.link:hover { color: var(--text); }
 
 /* History panel */
 .history { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10; width: min(380px, 100vw); padding: 1rem; overflow-y: auto; background: var(--surface); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); }
+.history:focus { outline: none; }
 .history header { display: flex; justify-content: space-between; align-items: center; }
 .history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
 .history li { display: flex; align-items: center; gap: 0.75rem; }