diff --git a/stats/src/components/anime/TmdbSelector.test.tsx b/stats/src/components/anime/TmdbSelector.test.tsx
new file mode 100644
index 00000000..0a530319
--- /dev/null
+++ b/stats/src/components/anime/TmdbSelector.test.tsx
@@ -0,0 +1,387 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { Window } from 'happy-dom';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { apiClient } from '../../lib/api-client';
+import type { StatsTmdbSearchResult } from '../../types/stats';
+import { TmdbSelector } from './TmdbSelector';
+
+interface TestWindow extends Window {
+ IS_REACT_ACT_ENVIRONMENT?: boolean;
+}
+
+function installDom(): () => void {
+ const previousWindow = globalThis.window;
+ const previousDocument = globalThis.document;
+ const previousHTMLElement = globalThis.HTMLElement;
+ const previousISReactActEnvironment = (
+ globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+ ).IS_REACT_ACT_ENVIRONMENT;
+ const window = new Window() as TestWindow;
+
+ Object.defineProperty(globalThis, 'window', { value: window, configurable: true });
+ Object.defineProperty(globalThis, 'document', { value: window.document, configurable: true });
+ Object.defineProperty(globalThis, 'HTMLElement', {
+ value: window.HTMLElement,
+ configurable: true,
+ });
+ (
+ globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+ ).IS_REACT_ACT_ENVIRONMENT = true;
+
+ return () => {
+ Object.defineProperty(globalThis, 'window', { value: previousWindow, configurable: true });
+ Object.defineProperty(globalThis, 'document', {
+ value: previousDocument,
+ configurable: true,
+ });
+ Object.defineProperty(globalThis, 'HTMLElement', {
+ value: previousHTMLElement,
+ configurable: true,
+ });
+ (
+ globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+ ).IS_REACT_ACT_ENVIRONMENT = previousISReactActEnvironment;
+ };
+}
+
+const HANZAWA: StatsTmdbSearchResult = {
+ tmdbId: 61222,
+ tmdbType: 'tv',
+ title: 'Hanzawa Naoki',
+ originalTitle: '半沢直樹',
+ originalLanguage: 'ja',
+ overview: null,
+ posterUrl: null,
+ year: 2013,
+ isAnimation: false,
+};
+
+test('TmdbSelector searches the normalized title and links the picked result by id', async () => {
+ const uninstallDom = installDom();
+ const original = {
+ searchTmdb: apiClient.searchTmdb,
+ reassignAnimeTmdb: apiClient.reassignAnimeTmdb,
+ };
+ const searchCalls: string[] = [];
+ const linkCalls: Array<[number, { tmdbId: number; tmdbType: string }]> = [];
+ let linked = 0;
+ apiClient.searchTmdb = (async (query: string) => {
+ searchCalls.push(query);
+ return [HANZAWA];
+ }) as typeof apiClient.searchTmdb;
+ apiClient.reassignAnimeTmdb = (async (animeId: number, info) => {
+ linkCalls.push([animeId, info]);
+ }) as typeof apiClient.reassignAnimeTmdb;
+
+ try {
+ const container = document.createElement('div');
+ document.body.append(container);
+ const root = createRoot(container);
+
+ await act(async () => {
+ root.render(
+
{}}
+ onLinked={() => {
+ linked += 1;
+ }}
+ />,
+ );
+ });
+
+ assert.deepEqual(searchCalls, ['Hanzawa Naoki']);
+ assert.match(container.textContent ?? '', /半沢直樹/);
+ assert.match(container.textContent ?? '', /TV · 2013/);
+
+ const pick = [...container.querySelectorAll('button')].find((button) =>
+ /Select/.test(button.textContent ?? ''),
+ );
+ assert.ok(pick);
+ await act(async () => {
+ pick.click();
+ });
+
+ assert.deepEqual(linkCalls, [[9, { tmdbId: 61222, tmdbType: 'tv' }]]);
+ assert.equal(linked, 1);
+
+ await act(async () => {
+ root.unmount();
+ });
+ } finally {
+ apiClient.searchTmdb = original.searchTmdb;
+ apiClient.reassignAnimeTmdb = original.reassignAnimeTmdb;
+ uninstallDom();
+ }
+});
+
+test('TmdbSelector explains a missing API key instead of showing "No results"', async () => {
+ const uninstallDom = installDom();
+ const originalSearch = apiClient.searchTmdb;
+ apiClient.searchTmdb = (async () => {
+ throw new Error('Stats API error: 503 {"error":"TMDB API key not configured."}');
+ }) as typeof apiClient.searchTmdb;
+
+ try {
+ const container = document.createElement('div');
+ document.body.append(container);
+ const root = createRoot(container);
+
+ await act(async () => {
+ root.render(
+ {}}
+ onLinked={() => {}}
+ />,
+ );
+ });
+
+ assert.match(container.textContent ?? '', /tmdb\.apiKey/);
+ assert.doesNotMatch(container.textContent ?? '', /No results/);
+
+ await act(async () => {
+ root.unmount();
+ });
+ } finally {
+ apiClient.searchTmdb = originalSearch;
+ uninstallDom();
+ }
+});
+
+test('TmdbSelector reports a failed link as a link problem, not a search failure', async () => {
+ const uninstallDom = installDom();
+ const original = {
+ searchTmdb: apiClient.searchTmdb,
+ reassignAnimeTmdb: apiClient.reassignAnimeTmdb,
+ };
+ apiClient.searchTmdb = (async () => [HANZAWA]) as typeof apiClient.searchTmdb;
+ apiClient.reassignAnimeTmdb = (async () => {
+ throw new Error('Stats API error: 404');
+ }) as typeof apiClient.reassignAnimeTmdb;
+
+ try {
+ const container = document.createElement('div');
+ document.body.append(container);
+ const root = createRoot(container);
+
+ await act(async () => {
+ root.render(
+ {}}
+ onLinked={() => {}}
+ />,
+ );
+ });
+
+ const pick = [...container.querySelectorAll('button')].find((button) =>
+ /Select/.test(button.textContent ?? ''),
+ );
+ assert.ok(pick);
+ await act(async () => {
+ pick.click();
+ });
+
+ assert.match(container.textContent ?? '', /TMDB has no details for this title/);
+ assert.doesNotMatch(container.textContent ?? '', /search failed/);
+ // The results stay on screen so the user can pick another one.
+ assert.match(container.textContent ?? '', /半沢直樹/);
+
+ await act(async () => {
+ root.unmount();
+ });
+ } finally {
+ apiClient.searchTmdb = original.searchTmdb;
+ apiClient.reassignAnimeTmdb = original.reassignAnimeTmdb;
+ uninstallDom();
+ }
+});
+
+test('TmdbSelector cannot be dismissed while a link is in flight', async () => {
+ const uninstallDom = installDom();
+ const original = {
+ searchTmdb: apiClient.searchTmdb,
+ reassignAnimeTmdb: apiClient.reassignAnimeTmdb,
+ };
+ let finishLink: () => void = () => {};
+ let closed = 0;
+ apiClient.searchTmdb = (async () => [HANZAWA]) as typeof apiClient.searchTmdb;
+ apiClient.reassignAnimeTmdb = (() =>
+ new Promise((resolve) => {
+ finishLink = resolve;
+ })) as typeof apiClient.reassignAnimeTmdb;
+
+ try {
+ const container = document.createElement('div');
+ document.body.append(container);
+ const root = createRoot(container);
+
+ await act(async () => {
+ root.render(
+ {
+ closed += 1;
+ }}
+ onLinked={() => {}}
+ />,
+ );
+ });
+
+ const pick = [...container.querySelectorAll('button')].find((button) =>
+ /Select/.test(button.textContent ?? ''),
+ );
+ assert.ok(pick);
+ await act(async () => {
+ pick.click();
+ });
+
+ const close = [...container.querySelectorAll('button')].find((button) =>
+ /✕/.test(button.textContent ?? ''),
+ ) as HTMLButtonElement | undefined;
+ assert.ok(close);
+ assert.equal(close.disabled, true);
+ await act(async () => {
+ (container.firstElementChild as HTMLElement).click();
+ });
+ assert.equal(closed, 0);
+
+ await act(async () => {
+ finishLink();
+ });
+
+ await act(async () => {
+ root.unmount();
+ });
+ } finally {
+ apiClient.searchTmdb = original.searchTmdb;
+ apiClient.reassignAnimeTmdb = original.reassignAnimeTmdb;
+ uninstallDom();
+ }
+});
+
+for (const staleFailure of [false, true]) {
+ test(`TmdbSelector ignores superseded ${staleFailure ? 'errors' : 'results'} and loading changes`, async () => {
+ const uninstallDom = installDom();
+ const originalSearch = apiClient.searchTmdb;
+ const requests: Array<{
+ resolve: (results: StatsTmdbSearchResult[]) => void;
+ reject: (error: Error) => void;
+ }> = [];
+ apiClient.searchTmdb = () =>
+ new Promise((resolve, reject) => {
+ requests.push({ resolve, reject });
+ });
+ const container = document.createElement('div');
+ document.body.append(container);
+ const root = createRoot(container);
+ try {
+ const render = (initialQuery: string) =>
+ root.render(
+ {}}
+ onLinked={() => {}}
+ />,
+ );
+ await act(async () => {
+ render('First title');
+ });
+ await act(async () => {
+ render('Second title');
+ });
+ assert.equal(requests.length, 2);
+ await act(async () => {
+ if (staleFailure) requests[0]!.reject(new Error('stale error'));
+ else requests[0]!.resolve([HANZAWA]);
+ });
+ assert.match(container.textContent ?? '', /Searching/);
+ assert.doesNotMatch(container.textContent ?? '', /Hanzawa|failed/);
+ await act(async () => {
+ requests[1]!.resolve([HANZAWA]);
+ });
+ assert.match(container.textContent ?? '', /Hanzawa/);
+ assert.doesNotMatch(container.textContent ?? '', /Searching/);
+ await act(async () => {
+ render('Third title');
+ });
+ await act(async () => {
+ render('');
+ });
+ await act(async () => {
+ requests[2]!.resolve([HANZAWA]);
+ });
+ assert.doesNotMatch(container.textContent ?? '', /Hanzawa|Searching/);
+ } finally {
+ await act(async () => {
+ root.unmount();
+ });
+ apiClient.searchTmdb = originalSearch;
+ uninstallDom();
+ }
+ });
+}
+
+test('TmdbSelector invalidates requests as soon as the user edits or clears the query', async () => {
+ const uninstallDom = installDom();
+ const originalSearch = apiClient.searchTmdb;
+ const requests: Array<(results: StatsTmdbSearchResult[]) => void> = [];
+ apiClient.searchTmdb = () =>
+ new Promise((resolve) => {
+ requests.push(resolve);
+ });
+ const container = document.createElement('div');
+ document.body.append(container);
+ const root = createRoot(container);
+ try {
+ await act(async () => {
+ root.render(
+ {}} onLinked={() => {}} />,
+ );
+ });
+ const input = container.querySelector('input');
+ assert.ok(input);
+ const setValue = Object.getOwnPropertyDescriptor(
+ window.HTMLInputElement.prototype,
+ 'value',
+ )?.set;
+ assert.ok(setValue);
+ const edit = async (value: string) => {
+ await act(async () => {
+ setValue.call(input, value);
+ input.dispatchEvent(new window.Event('input', { bubbles: true }));
+ input.dispatchEvent(new window.KeyboardEvent('keyup', { bubbles: true }));
+ });
+ };
+ await edit('Second');
+ await act(async () => {
+ requests[0]!([HANZAWA]);
+ });
+ assert.doesNotMatch(container.textContent ?? '', /Hanzawa|No results/);
+ assert.match(container.textContent ?? '', /Searching/);
+ await act(async () => {
+ await new Promise((resolve) => setTimeout(resolve, 450));
+ });
+ assert.equal(requests.length, 2);
+ await edit('');
+ assert.doesNotMatch(container.textContent ?? '', /Searching/);
+ await act(async () => {
+ requests[1]!([HANZAWA]);
+ });
+ assert.doesNotMatch(container.textContent ?? '', /Hanzawa|Searching/);
+ } finally {
+ await act(async () => {
+ root.unmount();
+ });
+ apiClient.searchTmdb = originalSearch;
+ uninstallDom();
+ }
+});
diff --git a/stats/src/components/anime/TmdbSelector.tsx b/stats/src/components/anime/TmdbSelector.tsx
new file mode 100644
index 00000000..f77ecfa3
--- /dev/null
+++ b/stats/src/components/anime/TmdbSelector.tsx
@@ -0,0 +1,199 @@
+import { useState, useEffect, useRef } from 'react';
+import { apiClient } from '../../lib/api-client';
+import { normalizeAnilistSearchQuery } from '../../lib/anilist-search-query';
+import type { StatsTmdbSearchResult } from '../../types/stats';
+
+interface TmdbSelectorProps {
+ animeId: number;
+ initialQuery: string;
+ onClose: () => void;
+ onLinked: () => void;
+}
+
+const MISSING_KEY_MESSAGE =
+ 'TMDB API key not configured. Set tmdb.apiKey or tmdb.apiKeyCommand in your config.';
+
+function statusOf(err: unknown): number | null {
+ const match = err instanceof Error ? /^Stats API error: (\d{3})\b/.exec(err.message) : null;
+ return match ? Number(match[1]) : null;
+}
+
+// The stats API answers a missing key with 503 and the message from config.
+function describeSearchError(err: unknown): string {
+ if (statusOf(err) === 503) return MISSING_KEY_MESSAGE;
+ return 'TMDB search failed. Check your connection and API key.';
+}
+
+// The link route answers 404 when TMDB has no details for the picked id or
+// when the library entry itself is gone.
+function describeLinkError(err: unknown): string {
+ switch (statusOf(err)) {
+ case 503:
+ return MISSING_KEY_MESSAGE;
+ case 404:
+ return 'TMDB has no details for this title. Pick another result or refresh the Library.';
+ default:
+ return 'Linking to TMDB failed. Check your connection and try again.';
+ }
+}
+
+export function TmdbSelector({ animeId, initialQuery, onClose, onLinked }: TmdbSelectorProps) {
+ const [query, setQuery] = useState(() => normalizeAnilistSearchQuery(initialQuery));
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [linking, setLinking] = useState(null);
+ const inputRef = useRef(null);
+ const debounceRef = useRef | null>(null);
+ const searchSequenceRef = useRef(0);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ const normalizedInitialQuery = normalizeAnilistSearchQuery(initialQuery);
+ setQuery(normalizedInitialQuery);
+ setResults([]);
+ setError(null);
+ setLoading(false);
+ setLinking(null);
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ if (normalizedInitialQuery) void doSearch(normalizedInitialQuery);
+ return () => {
+ searchSequenceRef.current += 1;
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ };
+ }, [initialQuery, animeId]);
+
+ const doSearch = async (q: string) => {
+ const sequence = ++searchSequenceRef.current;
+ const searchQuery = normalizeAnilistSearchQuery(q);
+ if (!searchQuery) {
+ setResults([]);
+ setError(null);
+ setLoading(false);
+ return;
+ }
+ setLoading(true);
+ setError(null);
+ try {
+ const nextResults = await apiClient.searchTmdb(searchQuery);
+ if (sequence === searchSequenceRef.current) setResults(nextResults);
+ } catch (err) {
+ if (sequence !== searchSequenceRef.current) return;
+ setResults([]);
+ setError(describeSearchError(err));
+ } finally {
+ if (sequence === searchSequenceRef.current) setLoading(false);
+ }
+ };
+
+ const handleInput = (value: string) => {
+ searchSequenceRef.current += 1;
+ setQuery(value);
+ setResults([]);
+ setError(null);
+ const hasQuery = Boolean(normalizeAnilistSearchQuery(value));
+ setLoading(hasQuery);
+ if (debounceRef.current) clearTimeout(debounceRef.current);
+ if (!hasQuery) return;
+ debounceRef.current = setTimeout(() => void doSearch(value), 400);
+ };
+
+ const handleSelect = async (media: StatsTmdbSearchResult) => {
+ setLinking(media.tmdbId);
+ setError(null);
+ try {
+ await apiClient.reassignAnimeTmdb(animeId, {
+ tmdbId: media.tmdbId,
+ tmdbType: media.tmdbType,
+ });
+ onLinked();
+ } catch (err) {
+ setError(describeLinkError(err));
+ setLinking(null);
+ }
+ };
+
+ // Dismissing mid-link would leave the caller unaware of a relink that is
+ // still going to land, so the backdrop and close button wait for it.
+ const handleDismiss = () => {
+ if (linking === null) onClose();
+ };
+
+ return (
+
+
+
e.stopPropagation()}
+ >
+
+
+
Select TMDB Title
+
+
+
handleInput(e.target.value)}
+ placeholder="Search TMDB for a drama or movie..."
+ className="w-full bg-ctp-surface0 border border-ctp-surface1 rounded-lg px-3 py-2 text-sm text-ctp-text placeholder:text-ctp-overlay2 focus:outline-none focus:border-ctp-blue"
+ />
+
+
+
+ {loading &&
Searching...
}
+ {error &&
{error}
}
+ {!loading && !error && results.length === 0 && query.trim() && (
+
No results
+ )}
+ {results.map((media) => (
+
+ ))}
+
+
+
})
+ 