diff --git a/src/dashboard/scoreko-dev/composables/useIntegration.ts b/src/dashboard/scoreko-dev/composables/useIntegration.ts
new file mode 100644
index 0000000..2c3118b
--- /dev/null
+++ b/src/dashboard/scoreko-dev/composables/useIntegration.ts
@@ -0,0 +1,444 @@
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+
+// ─── Tipos ─────────────────────────────────────────────────────────────────────
+
+export interface IntegrationTournament {
+  id: string | number;
+  name: string;
+  slug: string;
+  startAt: number | null;
+  endAt: number | null;
+}
+
+export interface IntegrationPlayer {
+  id: string;
+  gamertag: string;
+  name: string;
+  team: string;
+  country: string;
+  twitter: string;
+}
+
+export interface TemporaryPlayerMeta {
+  expiresAt: number;
+  tournamentSlug: string;
+}
+
+export type TemporaryPlayersMap = Record<string, TemporaryPlayerMeta>;
+
+interface TournamentOption {
+  label: string;
+  value: string;
+  caption: string;
+}
+
+interface OAuthSessionResponse {
+  sessionId: string;
+  authUrl: string;
+}
+
+interface OAuthStatusResponse {
+  status: 'pending' | 'completed' | 'error' | 'expired';
+  token?: string;
+  error?: string;
+}
+
+export interface PlayersStore {
+  upsertPlayer: (id: string, data: Omit<IntegrationPlayer, 'id'>) => void;
+  removePlayer: (id: string) => void;
+}
+
+export interface UseIntegrationOptions {
+  /** Prefijo de los mensajes NodeCG, p.ej. 'startgg' | 'challonge' */
+  messagePrefix: string;
+  /** Nombre legible del proveedor para mensajes de error */
+  providerLabel: string;
+  /** Clave de localStorage para el token */
+  tokenStorageKey: string;
+  /** Clave de localStorage para los jugadores temporales */
+  tempPlayersStorageKey: string;
+  /** Segundos que duran los jugadores temporales si el torneo no tiene endAt */
+  tempFallbackDurationSeconds: number;
+  /** Mensaje de error personalizado cuando la API devuelve 401 */
+  on401Message?: string;
+  /** Store de jugadores */
+  playersStore: PlayersStore;
+}
+
+// ─── Utilidad para mensajes NodeCG ─────────────────────────────────────────────
+
+const sendNodeCGMessage = <T>(messageName: string, payload: unknown): Promise<T> =>
+  new Promise((resolve, reject) => {
+    nodecg.sendMessage(messageName, payload, (error: unknown, response: unknown) => {
+      if (error) {
+        reject(new Error(String(error)));
+        return;
+      }
+      resolve(response as T);
+    });
+  });
+
+// ─── Composable ────────────────────────────────────────────────────────────────
+
+export function useIntegration(options: UseIntegrationOptions) {
+  const {
+    messagePrefix,
+    providerLabel,
+    tokenStorageKey,
+    tempPlayersStorageKey,
+    tempFallbackDurationSeconds,
+    on401Message,
+    playersStore,
+  } = options;
+
+  // ── Token ───────────────────────────────────────────────────────────────────
+  const token = ref(localStorage.getItem(tokenStorageKey) ?? '');
+  const hasValidatedToken = ref(false);
+
+  watch(token, (value) => {
+    localStorage.setItem(tokenStorageKey, value);
+    hasValidatedToken.value = false;
+    if (!value.trim()) {
+      recentTournaments.value = [];
+      selectedTournamentSlug.value = '';
+      tournamentInput.value = '';
+      tournamentsError.value = '';
+    }
+  });
+
+  // ── Lista de torneos ────────────────────────────────────────────────────────
+  const recentTournaments = ref<IntegrationTournament[]>([]);
+  const loadingTournaments = ref(false);
+  const tournamentsError = ref('');
+  const selectedTournamentSlug = ref('');
+  const tournamentInput = ref('');
+
+  const tournamentOptions = computed<TournamentOption[]>(() =>
+    recentTournaments.value.map((t) => ({
+      label: t.name,
+      value: t.slug,
+      caption: t.slug,
+    })),
+  );
+
+  const filteredTournamentOptions = ref<TournamentOption[]>(tournamentOptions.value);
+
+  watch(tournamentOptions, (value) => {
+    filteredTournamentOptions.value = value;
+    if (
+      selectedTournamentSlug.value &&
+      !recentTournaments.value.some((t) => t.slug === selectedTournamentSlug.value)
+    ) {
+      selectedTournamentSlug.value = '';
+      tournamentInput.value = '';
+    }
+  });
+
+  const filterTournaments = (value: string, update: (cb: () => void) => void) => {
+    update(() => {
+      const needle = value.toLowerCase().trim();
+      filteredTournamentOptions.value = needle
+        ? tournamentOptions.value.filter(
+          (o) =>
+            o.label.toLowerCase().includes(needle) ||
+            o.caption.toLowerCase().includes(needle),
+        )
+        : tournamentOptions.value;
+    });
+  };
+
+  const selectedTournamentOption = computed<IntegrationTournament | null>(
+    () => recentTournaments.value.find((t) => t.slug === selectedTournamentSlug.value) ?? null,
+  );
+
+  const canImportSelectedTournament = computed(() => Boolean(selectedTournamentOption.value));
+  const hasTokenConfigured = computed(() => Boolean(token.value.trim()));
+
+  const loadRecentTournaments = async () => {
+    const currentToken = token.value.trim();
+    if (!currentToken) {
+      tournamentsError.value = `Add your ${providerLabel} token to load tournaments.`;
+      recentTournaments.value = [];
+      return;
+    }
+
+    tournamentsError.value = '';
+    loadingTournaments.value = true;
+    try {
+      const tournaments = await sendNodeCGMessage<IntegrationTournament[]>(
+        `${messagePrefix}:fetchRecentTournaments`,
+        { token: currentToken },
+      );
+      hasValidatedToken.value = true;
+      recentTournaments.value = tournaments;
+      if (!tournaments.length) {
+        tournamentsError.value = 'There are no recent tournaments for this account.';
+      }
+    } catch (error) {
+      hasValidatedToken.value = false;
+      const message = error instanceof Error ? error.message : 'Could not load tournaments.';
+      tournamentsError.value =
+        on401Message && message.includes('401') ? on401Message : message;
+      recentTournaments.value = [];
+    } finally {
+      loadingTournaments.value = false;
+    }
+  };
+
+  // ── Importación de jugadores ────────────────────────────────────────────────
+  const players = ref<IntegrationPlayer[]>([]);
+  const selectedPlayerIds = ref<string[]>([]);
+  const importDialogOpen = ref(false);
+  const importDialogError = ref('');
+  const loadingPlayers = ref(false);
+  const importingTournament = ref<IntegrationTournament | null>(null);
+
+  const openImportDialog = async (tournament: IntegrationTournament): Promise<void> => {
+    importingTournament.value = tournament;
+    importDialogOpen.value = true;
+    importDialogError.value = '';
+    loadingPlayers.value = true;
+    selectedPlayerIds.value = [];
+    selectedTournamentSlug.value = tournament.slug;
+    tournamentInput.value = tournament.name;
+    players.value = [];
+
+    try {
+      const importedPlayers = await sendNodeCGMessage<IntegrationPlayer[]>(
+        `${messagePrefix}:fetchTournamentPlayers`,
+        { token: token.value.trim(), slug: tournament.slug },
+      );
+      players.value = importedPlayers;
+      selectedPlayerIds.value = importedPlayers.map((p) => p.id);
+    } catch (error) {
+      importDialogError.value =
+        error instanceof Error ? error.message : 'Could not load players';
+      importDialogOpen.value = false;
+    } finally {
+      loadingPlayers.value = false;
+    }
+  };
+
+  const openSelectedTournamentImportDialog = () => {
+    if (selectedTournamentOption.value) {
+      void openImportDialog(selectedTournamentOption.value);
+    }
+  };
+
+  const toggleAllPlayers = () => {
+    selectedPlayerIds.value =
+      selectedPlayerIds.value.length === players.value.length
+        ? []
+        : players.value.map((p) => p.id);
+  };
+
+  const importSelectedPlayers = () => {
+    const selected = players.value.filter((p) => selectedPlayerIds.value.includes(p.id));
+    const tournament = importingTournament.value;
+    const fallbackEndAt =
+      (tournament?.startAt ?? Math.floor(Date.now() / 1000)) + tempFallbackDurationSeconds;
+    const expiresAt = tournament?.endAt ?? fallbackEndAt;
+    const nextMeta = { ...temporaryPlayers.value };
+
+    for (const player of selected) {
+      playersStore.upsertPlayer(player.id, {
+        gamertag: player.gamertag,
+        name: player.name,
+        team: player.team,
+        country: player.country,
+        twitter: player.twitter,
+      });
+      if (tournament) {
+        nextMeta[player.id] = { expiresAt, tournamentSlug: tournament.slug };
+      }
+    }
+
+    temporaryPlayers.value = nextMeta;
+    persistTemporaryPlayers();
+    importDialogOpen.value = false;
+  };
+
+  // ── Jugadores temporales ────────────────────────────────────────────────────
+  const loadTemporaryPlayers = (): TemporaryPlayersMap => {
+    try {
+      const raw = localStorage.getItem(tempPlayersStorageKey);
+      if (!raw) return {};
+      const parsed = JSON.parse(raw) as unknown;
+      if (typeof parsed !== 'object' || parsed === null) return {};
+
+      const result: TemporaryPlayersMap = {};
+      Object.entries(parsed as Record<string, unknown>).forEach(([playerId, value]) => {
+        if (!playerId || typeof value !== 'object' || value === null) return;
+        const candidate = value as Record<string, unknown>;
+        const expiresAt = Number(candidate.expiresAt);
+        const tournamentSlug = String(candidate.tournamentSlug ?? '').trim();
+        if (!Number.isFinite(expiresAt) || expiresAt <= 0 || !tournamentSlug) return;
+        result[playerId] = { expiresAt, tournamentSlug };
+      });
+
+      return result;
+    } catch {
+      return {};
+    }
+  };
+
+  const temporaryPlayers = ref<TemporaryPlayersMap>({});
+
+  const persistTemporaryPlayers = () => {
+    localStorage.setItem(tempPlayersStorageKey, JSON.stringify(temporaryPlayers.value));
+  };
+
+  /**
+   * Elimina del store y del mapa los jugadores temporales cuyo expiresAt
+   * ha pasado. Se llama periódicamente en onMounted.
+   */
+  const cleanupExpiredTemporaryPlayers = () => {
+    const now = Math.floor(Date.now() / 1000);
+    const expiredIds = Object.entries(temporaryPlayers.value)
+      .filter(([, meta]) => meta.expiresAt <= now)
+      .map(([id]) => id);
+
+    if (!expiredIds.length) return;
+
+    const nextMeta = { ...temporaryPlayers.value };
+    for (const id of expiredIds) {
+      playersStore.removePlayer(id);
+      delete nextMeta[id];
+    }
+    temporaryPlayers.value = nextMeta;
+    persistTemporaryPlayers();
+  };
+
+  // ── OAuth ───────────────────────────────────────────────────────────────────
+  const oauthLoading = ref(false);
+  const oauthSessionId = ref('');
+  let oauthPollingTimer: ReturnType<typeof setInterval> | null = null;
+
+  const stopPolling = () => {
+    if (oauthPollingTimer) {
+      clearInterval(oauthPollingTimer);
+      oauthPollingTimer = null;
+    }
+  };
+
+  const checkOAuthStatus = async () => {
+    if (!oauthSessionId.value) return;
+
+    try {
+      const status = await sendNodeCGMessage<OAuthStatusResponse>(
+        `${messagePrefix}:getOAuthSessionStatus`,
+        { sessionId: oauthSessionId.value },
+      );
+
+      if (status.status === 'completed' && status.token) {
+        token.value = status.token;
+        oauthLoading.value = false;
+        stopPolling();
+        oauthSessionId.value = '';
+        tournamentsError.value = '';
+        await loadRecentTournaments();
+        return;
+      }
+
+      if (status.status === 'error' || status.status === 'expired') {
+        oauthLoading.value = false;
+        stopPolling();
+        oauthSessionId.value = '';
+        tournamentsError.value =
+          status.error ?? `Could not complete OAuth login with ${providerLabel}.`;
+      }
+    } catch (error) {
+      oauthLoading.value = false;
+      stopPolling();
+      oauthSessionId.value = '';
+      tournamentsError.value =
+        error instanceof Error ? error.message : 'Could not verify OAuth status.';
+    }
+  };
+
+  const connectWithOAuth = async () => {
+    oauthLoading.value = true;
+    tournamentsError.value = '';
+    stopPolling();
+
+    try {
+      const session = await sendNodeCGMessage<OAuthSessionResponse>(
+        `${messagePrefix}:createOAuthSession`,
+        {},
+      );
+      oauthSessionId.value = session.sessionId;
+      window.open(session.authUrl, '_blank', 'noopener,noreferrer');
+
+      oauthPollingTimer = setInterval(() => {
+        void checkOAuthStatus();
+      }, 1500);
+    } catch (error) {
+      oauthLoading.value = false;
+      tournamentsError.value =
+        error instanceof Error ? error.message : `Could not start OAuth with ${providerLabel}.`;
+    }
+  };
+
+  // ── Ciclo de vida ───────────────────────────────────────────────────────────
+  let cleanupTimer: ReturnType<typeof setInterval> | null = null;
+
+  onMounted(() => {
+    temporaryPlayers.value = loadTemporaryPlayers();
+    cleanupExpiredTemporaryPlayers();
+    cleanupTimer = setInterval(cleanupExpiredTemporaryPlayers, 60 * 1000);
+
+    if (token.value.trim()) {
+      void loadRecentTournaments();
+    }
+  });
+
+  onBeforeUnmount(() => {
+    stopPolling();
+    if (cleanupTimer) {
+      clearInterval(cleanupTimer);
+      cleanupTimer = null;
+    }
+  });
+
+  // ── Retorno como reactive para auto-unwrap en templates ─────────────────────
+  return reactive({
+    // Token
+    token,
+    hasTokenConfigured,
+    hasValidatedToken,
+
+    // Torneos
+    recentTournaments,
+    loadingTournaments,
+    tournamentsError,
+    selectedTournamentSlug,
+    tournamentInput,
+    tournamentOptions,
+    filteredTournamentOptions,
+    selectedTournamentOption,
+    canImportSelectedTournament,
+    filterTournaments,
+    loadRecentTournaments,
+
+    // Importación
+    players,
+    selectedPlayerIds,
+    importDialogOpen,
+    importDialogError,
+    loadingPlayers,
+    importingTournament,
+    openImportDialog,
+    openSelectedTournamentImportDialog,
+    importSelectedPlayers,
+    toggleAllPlayers,
+
+    // Jugadores temporales
+    temporaryPlayers,
+
+    // OAuth
+    oauthLoading,
+    connectWithOAuth,
+  });
+}
+
+export type IntegrationHandle = ReturnType<typeof useIntegration>;
diff --git a/src/dashboard/scoreko-dev/views/Players.vue b/src/dashboard/scoreko-dev/views/Players.vue
index 39b668d..bf46a61 100644
--- a/src/dashboard/scoreko-dev/views/Players.vue
+++ b/src/dashboard/scoreko-dev/views/Players.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import type { QTableColumn } from 'quasar';
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import { computed, reactive, ref, watch } from 'vue';
 import { getCountryLabel, getCountryOptions } from '../../../shared/countries';
 import type { Schemas } from '../../../types';
+import { useIntegration } from '../composables/useIntegration';
 import { locale, t } from '../i18n';
 import { usePlayersStore } from '../stores/players';
 
@@ -11,6 +12,8 @@ defineOptions({ name: 'PlayersView' });
 
 useHead(() => ({ title: t('menuPlayers') }));
 
+// ─── Tipos locales ─────────────────────────────────────────────────────────────
+
 type PlayersMap = Schemas.Players;
 type Player = PlayersMap[string];
 
@@ -18,61 +21,77 @@ interface PlayerRow extends Player {
   id: string;
 }
 
-interface StartGGTournament {
-  id: number;
-  name: string;
-  slug: string;
-  startAt: number | null;
-  endAt: number | null;
-}
-
-interface StartGGImportedPlayer extends Player {
-  id: string;
-}
-
-interface ChallongeTournament {
-  id: string;
-  name: string;
-  slug: string;
-  startAt: number | null;
-  endAt: number | null;
-}
-
-interface ChallongeImportedPlayer extends Player {
-  id: string;
-}
+// ─── Constantes ────────────────────────────────────────────────────────────────
 
 const STARTGG_TOKEN_STORAGE_KEY = 'scoreko-dev.startgg-token';
 const CHALLONGE_TOKEN_STORAGE_KEY = 'scoreko-dev.challonge-token';
 const STARTGG_TEMP_PLAYERS_STORAGE_KEY = 'scoreko-dev.startgg-temp-players';
 const CHALLONGE_TEMP_PLAYERS_STORAGE_KEY = 'scoreko-dev.challonge-temp-players';
-const STARTGG_TEMP_FALLBACK_DURATION_SECONDS = 12 * 60 * 60;
+const TEMP_FALLBACK_DURATION_SECONDS = 12 * 60 * 60;
 
-interface TemporaryStartGGPlayerMeta {
-  expiresAt: number;
-  tournamentSlug: string;
-}
-
-type TemporaryStartGGPlayersMap = Record<string, TemporaryStartGGPlayerMeta>;
-type TemporaryChallongePlayersMap = Record<string, TemporaryStartGGPlayerMeta>;
+// ─── Store y utilidades ────────────────────────────────────────────────────────
 
 const playersStore = usePlayersStore();
+const $q = useQuasar();
 const rows = computed<PlayerRow[]>(() => playersStore.rows);
 
-const filter = ref('');
-const isDialogOpen = ref(false);
-const editingId = ref<string | null>(null);
-const fileInput = ref<HTMLInputElement | null>(null);
+// ─── Integraciones ─────────────────────────────────────────────────────────────
 
-const emptyPlayer: Player = {
-  gamertag: '',
-  name: '',
-  country: '',
-  team: '',
-  twitter: '',
+const startgg = useIntegration({
+  messagePrefix: 'startgg',
+  providerLabel: 'start.gg',
+  tokenStorageKey: STARTGG_TOKEN_STORAGE_KEY,
+  tempPlayersStorageKey: STARTGG_TEMP_PLAYERS_STORAGE_KEY,
+  tempFallbackDurationSeconds: TEMP_FALLBACK_DURATION_SECONDS,
+  playersStore,
+});
+
+const challonge = useIntegration({
+  messagePrefix: 'challonge',
+  providerLabel: 'Challonge',
+  tokenStorageKey: CHALLONGE_TOKEN_STORAGE_KEY,
+  tempPlayersStorageKey: CHALLONGE_TEMP_PLAYERS_STORAGE_KEY,
+  tempFallbackDurationSeconds: TEMP_FALLBACK_DURATION_SECONDS,
+  on401Message:
+    'Challonge rejected the token (401 Unauthorized). Re-connect OAuth so it grants scopes (me, tournaments:read, participants:read) or paste a valid personal API token.',
+  playersStore,
+});
+
+// Notifica errores de apertura del diálogo de importación (sustituye window.alert)
+watch(() => startgg.importDialogError, (msg) => {
+  if (msg) $q.notify({ type: 'negative', message: msg });
+});
+watch(() => challonge.importDialogError, (msg) => {
+  if (msg) $q.notify({ type: 'negative', message: msg });
+});
+
+// ─── Badges de fuente de jugadores ────────────────────────────────────────────
+
+const playerSource = (id: string): 'startgg' | 'challonge' | null => {
+  if (id in startgg.temporaryPlayers) return 'startgg';
+  if (id in challonge.temporaryPlayers) return 'challonge';
+  return null;
 };
 
-const form = reactive<Player>({ ...emptyPlayer });
+const playerExpiresAt = (id: string): number | null =>
+  startgg.temporaryPlayers[id]?.expiresAt ?? challonge.temporaryPlayers[id]?.expiresAt ?? null;
+
+const formatExpiresAt = (ts: number): string =>
+  new Date(ts * 1000).toLocaleDateString(locale.value, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+// ─── Label de conexión de Challonge ───────────────────────────────────────────
+
+const challongeConnectionLabel = computed(() =>
+  challonge.hasValidatedToken ? t('playersConnected') : 'Token set',
+);
+
+// ─── Tabla de jugadores ────────────────────────────────────────────────────────
+
+const filter = ref('');
 
 const columns = computed<QTableColumn<PlayerRow>[]>(() => [
   { name: 'gamertag', label: 'Gamertag', field: 'gamertag', sortable: true, align: 'left' },
@@ -88,19 +107,18 @@ const columns = computed<QTableColumn<PlayerRow>[]>(() => [
   { name: 'actions', label: t('playersLabelActions'), field: (row) => row.id, sortable: false, align: 'right' },
 ]);
 
+// ─── Selector de país ──────────────────────────────────────────────────────────
+
 const countryOptions = computed(() => getCountryOptions(locale.value));
 const filteredCountryOptions = ref(countryOptions.value);
 const countryInput = ref('');
-const filterCountries = (value: string, update: (callback: () => void) => void) => {
+
+const filterCountries = (value: string, update: (cb: () => void) => void) => {
   update(() => {
     const needle = value.toLowerCase().trim();
-    if (!needle) {
-      filteredCountryOptions.value = countryOptions.value;
-      return;
-    }
-    filteredCountryOptions.value = countryOptions.value.filter((country) =>
-      country.label.toLowerCase().includes(needle),
-    );
+    filteredCountryOptions.value = needle
+      ? countryOptions.value.filter((c) => c.label.toLowerCase().includes(needle))
+      : countryOptions.value;
   });
 };
 
@@ -108,650 +126,23 @@ watch(countryOptions, (value) => {
   filteredCountryOptions.value = value;
 });
 
+// ─── Diálogo de edición / creación de jugadores ────────────────────────────────
+
+const emptyPlayer: Player = { gamertag: '', name: '', country: '', team: '', twitter: '' };
+const form = reactive<Player>({ ...emptyPlayer });
+const isDialogOpen = ref(false);
+const editingId = ref<string | null>(null);
+
 watch(
   () => form.country,
-  (value) => {
-    countryInput.value = getCountryLabel(value, locale.value);
-  },
+  (value) => { countryInput.value = getCountryLabel(value, locale.value); },
   { immediate: true },
 );
 
-const startGGToken = ref(localStorage.getItem(STARTGG_TOKEN_STORAGE_KEY) ?? '');
-const challongeToken = ref(localStorage.getItem(CHALLONGE_TOKEN_STORAGE_KEY) ?? '');
-const recentTournaments = ref<StartGGTournament[]>([]);
-const loadingTournaments = ref(false);
-const tournamentsError = ref('');
-const isImportDialogOpen = ref(false);
-const loadingTournamentPlayers = ref(false);
-const importingTournament = ref<StartGGTournament | null>(null);
-const startGGPlayers = ref<StartGGImportedPlayer[]>([]);
-const selectedStartGGPlayerIds = ref<string[]>([]);
-const selectedTournamentSlug = ref('');
-const tournamentInput = ref('');
-const temporaryStartGGPlayers = ref<TemporaryStartGGPlayersMap>({});
-const temporaryChallongePlayers = ref<TemporaryChallongePlayersMap>({});
-let temporaryCleanupTimer: ReturnType<typeof setInterval> | null = null;
-
-const oauthLoading = ref(false);
-const challongeOauthLoading = ref(false);
-const isManualTokenDialogOpen = ref(false);
-const manualTokenDraft = ref('');
-const isChallongeManualTokenDialogOpen = ref(false);
-const challongeManualTokenDraft = ref('');
-const oauthSessionId = ref('');
-const challongeOauthSessionId = ref('');
-let oauthPollingTimer: ReturnType<typeof setInterval> | null = null;
-let challongeOauthPollingTimer: ReturnType<typeof setInterval> | null = null;
-
-const challongeRecentTournaments = ref<ChallongeTournament[]>([]);
-const challongeLoadingTournaments = ref(false);
-const challongeTournamentsError = ref('');
-const selectedChallongeTournamentSlug = ref('');
-const challongeTournamentInput = ref('');
-const challongePlayers = ref<ChallongeImportedPlayer[]>([]);
-const selectedChallongePlayerIds = ref<string[]>([]);
-const challongeImportDialogOpen = ref(false);
-const loadingChallongeTournamentPlayers = ref(false);
-const importingChallongeTournament = ref<ChallongeTournament | null>(null);
-const hasValidatedChallongeToken = ref(false);
-
-interface OAuthSessionResponse {
-  sessionId: string;
-  authUrl: string;
-}
-
-interface OAuthStatusResponse {
-  status: 'pending' | 'completed' | 'error' | 'expired';
-  token?: string;
-  error?: string;
-}
-
-watch(startGGToken, (value) => {
-  localStorage.setItem(STARTGG_TOKEN_STORAGE_KEY, value);
-});
-
-watch(challongeToken, (value) => {
-  localStorage.setItem(CHALLONGE_TOKEN_STORAGE_KEY, value);
-  hasValidatedChallongeToken.value = false;
-});
-
-const persistTemporaryStartGGPlayers = () => {
-  localStorage.setItem(STARTGG_TEMP_PLAYERS_STORAGE_KEY, JSON.stringify(temporaryStartGGPlayers.value));
-};
-
-const persistTemporaryChallongePlayers = () => {
-  localStorage.setItem(CHALLONGE_TEMP_PLAYERS_STORAGE_KEY, JSON.stringify(temporaryChallongePlayers.value));
-};
-
-const loadTemporaryStartGGPlayers = (): TemporaryStartGGPlayersMap => {
-  try {
-    const raw = localStorage.getItem(STARTGG_TEMP_PLAYERS_STORAGE_KEY);
-    if (!raw) {
-      return {};
-    }
-    const parsed = JSON.parse(raw) as unknown;
-    if (typeof parsed !== 'object' || parsed === null) {
-      return {};
-    }
-
-    const result: TemporaryStartGGPlayersMap = {};
-    Object.entries(parsed as Record<string, unknown>).forEach(([playerId, value]) => {
-      if (!playerId || typeof value !== 'object' || value === null) {
-        return;
-      }
-      const candidate = value as Record<string, unknown>;
-      const expiresAt = Number(candidate.expiresAt);
-      const tournamentSlug = String(candidate.tournamentSlug || '').trim();
-      if (!Number.isFinite(expiresAt) || expiresAt <= 0 || !tournamentSlug) {
-        return;
-      }
-      result[playerId] = {
-        expiresAt,
-        tournamentSlug,
-      };
-    });
-
-    return result;
-  } catch {
-    return {};
-  }
-};
-
-const loadTemporaryChallongePlayers = (): TemporaryChallongePlayersMap => {
-  try {
-    const raw = localStorage.getItem(CHALLONGE_TEMP_PLAYERS_STORAGE_KEY);
-    if (!raw) {
-      return {};
-    }
-    const parsed = JSON.parse(raw) as unknown;
-    if (typeof parsed !== 'object' || parsed === null) {
-      return {};
-    }
-
-    const result: TemporaryChallongePlayersMap = {};
-    Object.entries(parsed as Record<string, unknown>).forEach(([playerId, value]) => {
-      if (!playerId || typeof value !== 'object' || value === null) {
-        return;
-      }
-      const candidate = value as Record<string, unknown>;
-      const expiresAt = Number(candidate.expiresAt);
-      const tournamentSlug = String(candidate.tournamentSlug || '').trim();
-      if (!Number.isFinite(expiresAt) || expiresAt <= 0 || !tournamentSlug) {
-        return;
-      }
-      result[playerId] = {
-        expiresAt,
-        tournamentSlug,
-      };
-    });
-
-    return result;
-  } catch {
-    return {};
-  }
-};
-
-const tournamentOptions = computed(() =>
-  recentTournaments.value.map((tournament) => ({
-    label: tournament.name,
-    value: tournament.slug,
-    caption: tournament.slug,
-  })),
-);
-const filteredTournamentOptions = ref(tournamentOptions.value);
-
-watch(tournamentOptions, (value) => {
-  filteredTournamentOptions.value = value;
-  if (selectedTournamentSlug.value && !recentTournaments.value.some((item) => item.slug === selectedTournamentSlug.value)) {
-    selectedTournamentSlug.value = '';
-    tournamentInput.value = '';
-  }
-});
-
-const selectedTournamentOption = computed(() =>
-  recentTournaments.value.find((item) => item.slug === selectedTournamentSlug.value) ?? null,
-);
-const canImportSelectedTournament = computed(() => Boolean(selectedTournamentOption.value));
-const hasStartGGTokenConfigured = computed(() => Boolean(startGGToken.value.trim()));
-
-const filterTournaments = (value: string, update: (callback: () => void) => void) => {
-  update(() => {
-    const needle = value.toLowerCase().trim();
-    if (!needle) {
-      filteredTournamentOptions.value = tournamentOptions.value;
-      return;
-    }
-
-    filteredTournamentOptions.value = tournamentOptions.value.filter((option) =>
-      option.label.toLowerCase().includes(needle) || option.caption.toLowerCase().includes(needle),
-    );
-  });
-};
-
-const sendNodeCGMessage = <T>(messageName: string, payload: unknown): Promise<T> =>
-  new Promise((resolve, reject) => {
-    nodecg.sendMessage(messageName, payload, (error: unknown, response: unknown) => {
-      if (error) {
-        reject(new Error(String(error)));
-        return;
-      }
-      resolve(response as T);
-    });
-  });
-
-const clearOAuthPolling = () => {
-  if (oauthPollingTimer) {
-    clearInterval(oauthPollingTimer);
-    oauthPollingTimer = null;
-  }
-};
-
-const clearChallongeOAuthPolling = () => {
-  if (challongeOauthPollingTimer) {
-    clearInterval(challongeOauthPollingTimer);
-    challongeOauthPollingTimer = null;
-  }
-};
-
-const clearTemporaryCleanupTimer = () => {
-  if (temporaryCleanupTimer) {
-    clearInterval(temporaryCleanupTimer);
-    temporaryCleanupTimer = null;
-  }
-};
-
-const cleanupExpiredTemporaryPlayers = () => {
-  const now = Math.floor(Date.now() / 1000);
-  const expiredStartGGIds = Object.entries(temporaryStartGGPlayers.value)
-    .filter(([, meta]) => meta.expiresAt <= now)
-    .map(([playerId]) => playerId);
-  const expiredChallongeIds = Object.entries(temporaryChallongePlayers.value)
-    .filter(([, meta]) => meta.expiresAt <= now)
-    .map(([playerId]) => playerId);
-
-  const expiredIds = Array.from(new Set([...expiredStartGGIds, ...expiredChallongeIds]));
-
-  if (!expiredIds.length) {
-    return;
-  }
-
-  const nextStartGGMeta = { ...temporaryStartGGPlayers.value };
-  const nextChallongeMeta = { ...temporaryChallongePlayers.value };
-  expiredIds.forEach((playerId) => {
-    playersStore.removePlayer(playerId);
-    delete nextStartGGMeta[playerId];
-    delete nextChallongeMeta[playerId];
-  });
-
-  temporaryStartGGPlayers.value = nextStartGGMeta;
-  temporaryChallongePlayers.value = nextChallongeMeta;
-  persistTemporaryStartGGPlayers();
-  persistTemporaryChallongePlayers();
-};
-
-const checkOAuthStatus = async () => {
-  if (!oauthSessionId.value) {
-    return;
-  }
-
-  try {
-    const status = await sendNodeCGMessage<OAuthStatusResponse>('startgg:getOAuthSessionStatus', {
-      sessionId: oauthSessionId.value,
-    });
-
-    if (status.status === 'completed' && status.token) {
-      startGGToken.value = status.token;
-      oauthLoading.value = false;
-      clearOAuthPolling();
-      oauthSessionId.value = '';
-      tournamentsError.value = '';
-      await loadRecentTournaments();
-      return;
-    }
-
-    if (status.status === 'error' || status.status === 'expired') {
-      oauthLoading.value = false;
-      clearOAuthPolling();
-      oauthSessionId.value = '';
-      tournamentsError.value = status.error || 'Could not complete OAuth login with start.gg.';
-    }
-  } catch (error) {
-    oauthLoading.value = false;
-    clearOAuthPolling();
-    oauthSessionId.value = '';
-    tournamentsError.value = error instanceof Error ? error.message : 'Could not verify OAuth status.';
-  }
-};
-
-const checkChallongeOAuthStatus = async () => {
-  if (!challongeOauthSessionId.value) {
-    return;
-  }
-
-  try {
-    const status = await sendNodeCGMessage<OAuthStatusResponse>('challonge:getOAuthSessionStatus', {
-      sessionId: challongeOauthSessionId.value,
-    });
-
-    if (status.status === 'completed' && status.token) {
-      challongeToken.value = status.token;
-      challongeOauthLoading.value = false;
-      clearChallongeOAuthPolling();
-      challongeOauthSessionId.value = '';
-      challongeTournamentsError.value = '';
-      await loadChallongeRecentTournaments();
-      return;
-    }
-
-    if (status.status === 'error' || status.status === 'expired') {
-      challongeOauthLoading.value = false;
-      clearChallongeOAuthPolling();
-      challongeOauthSessionId.value = '';
-      challongeTournamentsError.value = status.error || 'Could not complete OAuth login with Challonge.';
-    }
-  } catch (error) {
-    challongeOauthLoading.value = false;
-    clearChallongeOAuthPolling();
-    challongeOauthSessionId.value = '';
-    challongeTournamentsError.value = error instanceof Error ? error.message : 'Could not verify OAuth status.';
-  }
-};
-
-const connectWithStartGGOAuth = async () => {
-  oauthLoading.value = true;
-  tournamentsError.value = '';
-  clearOAuthPolling();
-
-  try {
-    const session = await sendNodeCGMessage<OAuthSessionResponse>('startgg:createOAuthSession', {});
-    oauthSessionId.value = session.sessionId;
-    window.open(session.authUrl, '_blank', 'noopener,noreferrer');
-
-    oauthPollingTimer = setInterval(() => {
-      void checkOAuthStatus();
-    }, 1500);
-  } catch (error) {
-    oauthLoading.value = false;
-    tournamentsError.value = error instanceof Error ? error.message : 'Could not start OAuth with start.gg.';
-  }
-};
-
-const connectWithChallongeOAuth = async () => {
-  challongeOauthLoading.value = true;
-  challongeTournamentsError.value = '';
-  clearChallongeOAuthPolling();
-
-  try {
-    const session = await sendNodeCGMessage<OAuthSessionResponse>('challonge:createOAuthSession', {});
-    challongeOauthSessionId.value = session.sessionId;
-    window.open(session.authUrl, '_blank', 'noopener,noreferrer');
-
-    challongeOauthPollingTimer = setInterval(() => {
-      void checkChallongeOAuthStatus();
-    }, 1500);
-  } catch (error) {
-    challongeOauthLoading.value = false;
-    challongeTournamentsError.value = error instanceof Error ? error.message : 'Could not start OAuth with Challonge.';
-  }
-};
-
-const openManualTokenDialog = () => {
-  manualTokenDraft.value = startGGToken.value;
-  isManualTokenDialogOpen.value = true;
-};
-
-const saveManualToken = () => {
-  startGGToken.value = manualTokenDraft.value.trim();
-
-  if (!startGGToken.value) {
-    recentTournaments.value = [];
-    selectedTournamentSlug.value = '';
-    tournamentInput.value = '';
-    tournamentsError.value = '';
-  }
-
-  isManualTokenDialogOpen.value = false;
-};
-
-const loadRecentTournaments = async () => {
-  const token = startGGToken.value.trim();
-  if (!token) {
-    tournamentsError.value = 'Add your start.gg token to load tournaments.';
-    recentTournaments.value = [];
-    return;
-  }
-
-  tournamentsError.value = '';
-  loadingTournaments.value = true;
-  try {
-    const tournaments = await sendNodeCGMessage<StartGGTournament[]>('startgg:fetchRecentTournaments', {
-      token,
-    });
-    recentTournaments.value = tournaments;
-    if (!tournaments.length) {
-      tournamentsError.value = 'There are no recent tournaments for this account.';
-    }
-  } catch (error) {
-    tournamentsError.value = error instanceof Error ? error.message : 'Could not load tournaments.';
-    recentTournaments.value = [];
-  } finally {
-    loadingTournaments.value = false;
-  }
-};
-
-const challongeTournamentOptions = computed(() =>
-  challongeRecentTournaments.value.map((tournament) => ({
-    label: tournament.name,
-    value: tournament.slug,
-    caption: tournament.slug,
-  })),
-);
-const filteredChallongeTournamentOptions = ref(challongeTournamentOptions.value);
-
-watch(challongeTournamentOptions, (value) => {
-  filteredChallongeTournamentOptions.value = value;
-  if (selectedChallongeTournamentSlug.value && !challongeRecentTournaments.value.some((item) => item.slug === selectedChallongeTournamentSlug.value)) {
-    selectedChallongeTournamentSlug.value = '';
-    challongeTournamentInput.value = '';
-  }
-});
-
-const selectedChallongeTournamentOption = computed(() =>
-  challongeRecentTournaments.value.find((item) => item.slug === selectedChallongeTournamentSlug.value) ?? null,
-);
-const canImportSelectedChallongeTournament = computed(() => Boolean(selectedChallongeTournamentOption.value));
-const hasChallongeTokenConfigured = computed(() => Boolean(challongeToken.value.trim()));
-
-const challongeConnectionLabel = computed(() => (hasValidatedChallongeToken.value ? t('playersConnected') : 'Token set'));
-
-const playerSource = (id: string): 'startgg' | 'challonge' | null => {
-  if (id in temporaryStartGGPlayers.value) return 'startgg';
-  if (id in temporaryChallongePlayers.value) return 'challonge';
-  return null;
-};
-
-const playerExpiresAt = (id: string): number | null => {
-  const meta = temporaryStartGGPlayers.value[id] ?? temporaryChallongePlayers.value[id] ?? null;
-  return meta ? meta.expiresAt : null;
-};
-
-const formatExpiresAt = (ts: number): string =>
-  new Date(ts * 1000).toLocaleDateString(locale.value, { month: 'short', day: 'numeric', year: 'numeric' });
-
-const filterChallongeTournaments = (value: string, update: (callback: () => void) => void) => {
-  update(() => {
-    const needle = value.toLowerCase().trim();
-    if (!needle) {
-      filteredChallongeTournamentOptions.value = challongeTournamentOptions.value;
-      return;
-    }
-
-    filteredChallongeTournamentOptions.value = challongeTournamentOptions.value.filter((option) =>
-      option.label.toLowerCase().includes(needle) || option.caption.toLowerCase().includes(needle),
-    );
-  });
-};
-
-const loadChallongeRecentTournaments = async () => {
-  const token = challongeToken.value.trim();
-  if (!token) {
-    challongeTournamentsError.value = 'Add your Challonge token to load tournaments.';
-    challongeRecentTournaments.value = [];
-    return;
-  }
-
-  challongeTournamentsError.value = '';
-  challongeLoadingTournaments.value = true;
-  try {
-    const tournaments = await sendNodeCGMessage<ChallongeTournament[]>('challonge:fetchRecentTournaments', {
-      token,
-    });
-    hasValidatedChallongeToken.value = true;
-    challongeRecentTournaments.value = tournaments;
-    if (!tournaments.length) {
-      challongeTournamentsError.value = 'There are no recent tournaments for this account.';
-    }
-  } catch (error) {
-    hasValidatedChallongeToken.value = false;
-    const message = error instanceof Error ? error.message : 'Could not load tournaments.';
-    challongeTournamentsError.value = message.includes('401')
-      ? 'Challonge rejected the token (401 Unauthorized). Re-connect OAuth so it grants scopes (me, tournaments:read, participants:read) or paste a valid personal API token.'
-      : message;
-    challongeRecentTournaments.value = [];
-  } finally {
-    challongeLoadingTournaments.value = false;
-  }
-};
-
-const openChallongeManualTokenDialog = () => {
-  challongeManualTokenDraft.value = challongeToken.value;
-  isChallongeManualTokenDialogOpen.value = true;
-};
-
-const saveChallongeManualToken = () => {
-  challongeToken.value = challongeManualTokenDraft.value.trim();
-
-  if (!challongeToken.value) {
-    challongeRecentTournaments.value = [];
-    selectedChallongeTournamentSlug.value = '';
-    challongeTournamentInput.value = '';
-    challongeTournamentsError.value = '';
-  }
-
-  isChallongeManualTokenDialogOpen.value = false;
-};
-
-const openChallongeImportDialog = async (tournament: ChallongeTournament) => {
-  importingChallongeTournament.value = tournament;
-  challongeImportDialogOpen.value = true;
-  loadingChallongeTournamentPlayers.value = true;
-  selectedChallongePlayerIds.value = [];
-  selectedChallongeTournamentSlug.value = tournament.slug;
-  challongeTournamentInput.value = tournament.name;
-  challongePlayers.value = [];
-
-  try {
-    const importedPlayers = await sendNodeCGMessage<ChallongeImportedPlayer[]>('challonge:fetchTournamentPlayers', {
-      token: challongeToken.value.trim(),
-      slug: tournament.slug,
-    });
-    challongePlayers.value = importedPlayers;
-    selectedChallongePlayerIds.value = importedPlayers.map((player) => player.id);
-  } catch (error) {
-    const message = error instanceof Error ? error.message : 'Could not load players';
-    window.alert(message);
-    challongeImportDialogOpen.value = false;
-  } finally {
-    loadingChallongeTournamentPlayers.value = false;
-  }
-};
-
-const openSelectedChallongeTournamentImportDialog = () => {
-  if (!selectedChallongeTournamentOption.value) {
-    return;
-  }
-  void openChallongeImportDialog(selectedChallongeTournamentOption.value);
-};
-
-const importSelectedChallongePlayers = () => {
-  const selectedPlayers = challongePlayers.value.filter((player) =>
-    selectedChallongePlayerIds.value.includes(player.id),
-  );
-
-  const nextMeta = { ...temporaryChallongePlayers.value };
-  const tournament = importingChallongeTournament.value;
-  const fallbackEndAt = (tournament?.startAt ?? Math.floor(Date.now() / 1000)) + STARTGG_TEMP_FALLBACK_DURATION_SECONDS;
-  const expiresAt = tournament?.endAt ?? fallbackEndAt;
-
-  selectedPlayers.forEach((player) => {
-    playersStore.upsertPlayer(player.id, {
-      gamertag: player.gamertag,
-      name: player.name,
-      team: player.team,
-      country: player.country,
-      twitter: player.twitter,
-    });
-
-    if (tournament) {
-      nextMeta[player.id] = {
-        expiresAt,
-        tournamentSlug: tournament.slug,
-      };
-    }
-  });
-
-  temporaryChallongePlayers.value = nextMeta;
-  persistTemporaryChallongePlayers();
-  challongeImportDialogOpen.value = false;
-};
-
-const openStartGGImportDialog = async (tournament: StartGGTournament) => {
-  importingTournament.value = tournament;
-  isImportDialogOpen.value = true;
-  loadingTournamentPlayers.value = true;
-  selectedStartGGPlayerIds.value = [];
-  selectedTournamentSlug.value = tournament.slug;
-  tournamentInput.value = tournament.name;
-  startGGPlayers.value = [];
-
-  try {
-    const importedPlayers = await sendNodeCGMessage<StartGGImportedPlayer[]>('startgg:fetchTournamentPlayers', {
-      token: startGGToken.value.trim(),
-      slug: tournament.slug,
-    });
-    startGGPlayers.value = importedPlayers;
-    selectedStartGGPlayerIds.value = importedPlayers.map((player) => player.id);
-  } catch (error) {
-    const message = error instanceof Error ? error.message : 'Could not load players';
-    window.alert(message);
-    isImportDialogOpen.value = false;
-  } finally {
-    loadingTournamentPlayers.value = false;
-  }
-};
-
-
-const openSelectedTournamentImportDialog = () => {
-  if (!selectedTournamentOption.value) {
-    return;
-  }
-  void openStartGGImportDialog(selectedTournamentOption.value);
-};
-
-const toggleAllStartGGPlayers = () => {
-  if (selectedStartGGPlayerIds.value.length === startGGPlayers.value.length) {
-    selectedStartGGPlayerIds.value = [];
-  } else {
-    selectedStartGGPlayerIds.value = startGGPlayers.value.map((p) => p.id);
-  }
-};
-
-const toggleAllChallongePlayers = () => {
-  if (selectedChallongePlayerIds.value.length === challongePlayers.value.length) {
-    selectedChallongePlayerIds.value = [];
-  } else {
-    selectedChallongePlayerIds.value = challongePlayers.value.map((p) => p.id);
-  }
-};
-
-const importSelectedStartGGPlayers = () => {
-  const selectedPlayers = startGGPlayers.value.filter((player) =>
-    selectedStartGGPlayerIds.value.includes(player.id),
-  );
-
-  const nextMeta = { ...temporaryStartGGPlayers.value };
-  const tournament = importingTournament.value;
-  const fallbackEndAt = (tournament?.startAt ?? Math.floor(Date.now() / 1000)) + STARTGG_TEMP_FALLBACK_DURATION_SECONDS;
-  const expiresAt = tournament?.endAt ?? fallbackEndAt;
-
-  selectedPlayers.forEach((player) => {
-    playersStore.upsertPlayer(player.id, {
-      gamertag: player.gamertag,
-      name: player.name,
-      team: player.team,
-      country: player.country,
-      twitter: player.twitter,
-    });
-
-    if (tournament) {
-      nextMeta[player.id] = {
-        expiresAt,
-        tournamentSlug: tournament.slug,
-      };
-    }
-  });
-
-  temporaryStartGGPlayers.value = nextMeta;
-  persistTemporaryStartGGPlayers();
-  isImportDialogOpen.value = false;
-};
-
-const generateId = () => {
-  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
-    return crypto.randomUUID();
-  }
-  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
-};
+const generateId = () =>
+  typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID()
+    : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
 
 const openCreateDialog = () => {
   editingId.value = null;
@@ -761,26 +152,55 @@ const openCreateDialog = () => {
 
 const openEditDialog = (row: PlayerRow) => {
   editingId.value = row.id;
-  const { id, ...playerData } = row;
-  void id;
+  // CORRECCIÓN: evitar el patrón `void id` usando un alias _id
+  const { id: _id, ...playerData } = row;
   Object.assign(form, playerData);
   isDialogOpen.value = true;
 };
 
 const savePlayer = () => {
-  const id = editingId.value ?? generateId();
-  playersStore.upsertPlayer(id, { ...form });
+  playersStore.upsertPlayer(editingId.value ?? generateId(), { ...form });
   isDialogOpen.value = false;
 };
 
 const deletePlayer = (row: PlayerRow) => {
-  const confirmed = window.confirm(`Delete ${row.gamertag || 'this player'}?`);
-  if (!confirmed) {
-    return;
+  if (window.confirm(`Delete ${row.gamertag || 'this player'}?`)) {
+    playersStore.removePlayer(row.id);
   }
-  playersStore.removePlayer(row.id);
 };
 
+// ─── Diálogos de token manual ──────────────────────────────────────────────────
+
+const isStartggManualDialogOpen = ref(false);
+const startggManualDraft = ref('');
+
+const openStartggManualDialog = () => {
+  startggManualDraft.value = startgg.token;
+  isStartggManualDialogOpen.value = true;
+};
+
+const saveStartggManualToken = () => {
+  startgg.token = startggManualDraft.value.trim();
+  isStartggManualDialogOpen.value = false;
+};
+
+const isChallongeManualDialogOpen = ref(false);
+const challongeManualDraft = ref('');
+
+const openChallongeManualDialog = () => {
+  challongeManualDraft.value = challonge.token;
+  isChallongeManualDialogOpen.value = true;
+};
+
+const saveChallongeManualToken = () => {
+  challonge.token = challongeManualDraft.value.trim();
+  isChallongeManualDialogOpen.value = false;
+};
+
+// ─── Exportar / importar JSON ──────────────────────────────────────────────────
+
+const fileInput = ref<HTMLInputElement | null>(null);
+
 const exportPlayers = () => {
   const data = JSON.stringify(playersStore.players, null, 2);
   const blob = new Blob([data], { type: 'application/json' });
@@ -792,48 +212,22 @@ const exportPlayers = () => {
   URL.revokeObjectURL(url);
 };
 
-const triggerImport = () => {
-  fileInput.value?.click();
-};
+const triggerImport = () => { fileInput.value?.click(); };
 
 const handleImport = async (event: Event) => {
   const target = event.target as HTMLInputElement | null;
   const file = target?.files?.[0];
-  if (!file) {
-    return;
-  }
+  if (!file) return;
   try {
     const text = await file.text();
     const parsed = JSON.parse(text) as unknown;
     playersStore.setPlayers(parsed as PlayersMap);
   } catch {
-    window.alert('Could not import JSON. Check the format.');
+    $q.notify({ type: 'negative', message: 'Could not import JSON. Check the format.' });
   } finally {
-    if (target) {
-      target.value = '';
-    }
+    if (target) target.value = '';
   }
 };
-
-onMounted(() => {
-  temporaryStartGGPlayers.value = loadTemporaryStartGGPlayers();
-  temporaryChallongePlayers.value = loadTemporaryChallongePlayers();
-  cleanupExpiredTemporaryPlayers();
-  temporaryCleanupTimer = setInterval(cleanupExpiredTemporaryPlayers, 60 * 1000);
-
-  if (startGGToken.value.trim()) {
-    void loadRecentTournaments();
-  }
-  if (challongeToken.value.trim()) {
-    void loadChallongeRecentTournaments();
-  }
-});
-
-onBeforeUnmount(() => {
-  clearOAuthPolling();
-  clearChallongeOAuthPolling();
-  clearTemporaryCleanupTimer();
-});
 </script>
 
 <template>
@@ -913,7 +307,7 @@ onBeforeUnmount(() => {
                   dense
                   outline
                   color="blue-4"
-                  class="q-ma-none"
+                  class="q-my-none q-mr-none q-ml-xs"
                   style="font-size: 10px; height: 18px;"
                 >
                   start.gg
@@ -926,7 +320,7 @@ onBeforeUnmount(() => {
                   dense
                   outline
                   color="orange-4"
-                  class="q-ma-none"
+                  class="q-my-none q-mr-none q-ml-xs"
                   style="font-size: 10px; height: 18px;"
                 >
                   Challonge
@@ -963,19 +357,14 @@ onBeforeUnmount(() => {
         </QTable>
       </div>
 
+      <!-- Panel de integraciones -->
       <div class="col-12 col-lg-4 players-startgg-column">
         <div class="players-integrations-stack">
-          <QCard
-            flat
-            bordered
-            class="q-pa-md"
-          >
+
+          <!-- ── start.gg ─────────────────────────────────────────────────── -->
+          <QCard flat bordered class="q-pa-md">
             <div class="text-h6 q-mb-sm startgg-heading">
-              <svg
-                class="startgg-heading__icon"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
+              <svg class="startgg-heading__icon" viewBox="0 0 24 24" aria-hidden="true">
                 <path d="M6 0A5.999 5.999 0 00.002 6v5.252a.75.75 0 00.75.748H5.25a.748.748 0 00.75-.747V6.749C6 6.334 6.336 6 6.748 6h16.497a.748.748 0 00.749-.748V.749A.743.743 0 0023.247 0zm12.75 12a.748.748 0 00-.75.75v4.5a.748.748 0 01-.747.748H.753a.754.754 0 00-.75.751v4.5a.75.75 0 00.75.751H18a5.999 5.999 0 005.999-6v-5.25a.75.75 0 00-.75-.75z" />
               </svg>
               <span>start.gg</span>
@@ -986,13 +375,13 @@ onBeforeUnmount(() => {
             <div class="row q-col-gutter-sm items-center">
               <div class="col-auto">
                 <QBtn
-                  v-if="!hasStartGGTokenConfigured"
+                  v-if="!startgg.hasTokenConfigured"
                   color="primary"
                   icon="login"
                   no-caps
                   :label="t('playersConnectStartgg')"
-                  :loading="oauthLoading"
-                  @click="connectWithStartGGOAuth"
+                  :loading="startgg.oauthLoading"
+                  @click="startgg.connectWithOAuth"
                 />
                 <QBtn
                   v-else
@@ -1002,7 +391,7 @@ onBeforeUnmount(() => {
                   no-caps
                   :label="t('playersConnected')"
                   class="startgg-connected-btn"
-                  @click="openManualTokenDialog"
+                  @click="openStartggManualDialog"
                 />
               </div>
               <div class="col-auto">
@@ -1012,32 +401,27 @@ onBeforeUnmount(() => {
                   icon="vpn_key"
                   no-caps
                   :label="t('playersUsePersonalApi')"
-                  @click="openManualTokenDialog"
+                  @click="openStartggManualDialog"
                 />
               </div>
             </div>
-            <div
-              v-if="tournamentsError"
-              class="text-negative q-mt-sm"
-            >
-              {{ tournamentsError }}
+            <div v-if="startgg.tournamentsError" class="text-negative q-mt-sm">
+              {{ startgg.tournamentsError }}
             </div>
             <div class="row items-center q-mt-md startgg-tournament-row">
               <QBtn
-                flat
-                round
-                dense
+                flat round dense
                 text-color="white"
                 icon="sync"
                 class="startgg-refresh-btn"
-                :loading="loadingTournaments"
-                @click="loadRecentTournaments"
+                :loading="startgg.loadingTournaments"
+                @click="startgg.loadRecentTournaments"
               />
               <div class="col">
                 <QSelect
-                  v-model="selectedTournamentSlug"
-                  v-model:input-value="tournamentInput"
-                  :options="filteredTournamentOptions"
+                  v-model="startgg.selectedTournamentSlug"
+                  v-model:input-value="startgg.tournamentInput"
+                  :options="startgg.filteredTournamentOptions"
                   option-value="value"
                   option-label="label"
                   emit-value
@@ -1050,31 +434,26 @@ onBeforeUnmount(() => {
                   dense
                   :label="t('playersTournament')"
                   class="players-underlined-field"
-                  @filter="filterTournaments"
+                  @filter="startgg.filterTournaments"
                 >
                   <template #option="scope">
                     <QItem v-bind="scope.itemProps">
                       <QItemSection>
                         <QItemLabel>{{ scope.opt.label }}</QItemLabel>
-                        <QItemLabel caption>
-                          {{ scope.opt.caption }}
-                        </QItemLabel>
+                        <QItemLabel caption>{{ scope.opt.caption }}</QItemLabel>
                       </QItemSection>
                     </QItem>
                   </template>
                 </QSelect>
               </div>
-              <div
-                v-if="canImportSelectedTournament"
-                class="col-auto"
-              >
+              <div v-if="startgg.canImportSelectedTournament" class="col-auto">
                 <QBtn
                   color="primary"
                   unelevated
                   round
                   icon="person_add"
                   :aria-label="t('playersImportPlayers')"
-                  @click="openSelectedTournamentImportDialog"
+                  @click="startgg.openSelectedTournamentImportDialog"
                 >
                   <QTooltip>{{ t('playersImportPlayers') }}</QTooltip>
                 </QBtn>
@@ -1082,11 +461,8 @@ onBeforeUnmount(() => {
             </div>
           </QCard>
 
-          <QCard
-            flat
-            bordered
-            class="q-pa-md"
-          >
+          <!-- ── Challonge ──────────────────────────────────────────────────── -->
+          <QCard flat bordered class="q-pa-md">
             <div class="text-h6 q-mb-sm startgg-heading">
               <img
                 class="challonge-heading__icon"
@@ -1101,22 +477,22 @@ onBeforeUnmount(() => {
             <div class="row q-col-gutter-sm items-center">
               <div class="col-auto">
                 <QBtn
-                  v-if="!hasChallongeTokenConfigured"
+                  v-if="!challonge.hasTokenConfigured"
                   color="primary"
                   icon="login"
                   no-caps
                   :label="t('playersConnectChallonge')"
-                  :loading="challongeOauthLoading"
-                  @click="connectWithChallongeOAuth"
+                  :loading="challonge.oauthLoading"
+                  @click="challonge.connectWithOAuth"
                 />
                 <QBtn
                   v-else
                   outline
-                  :color="hasValidatedChallongeToken ? 'positive' : 'warning'"
+                  :color="challonge.hasValidatedToken ? 'positive' : 'warning'"
                   icon="check_circle"
                   no-caps
                   :label="challongeConnectionLabel"
-                  @click="openChallongeManualTokenDialog"
+                  @click="openChallongeManualDialog"
                 />
               </div>
               <div class="col-auto">
@@ -1126,32 +502,27 @@ onBeforeUnmount(() => {
                   icon="vpn_key"
                   no-caps
                   :label="t('playersUsePersonalApi')"
-                  @click="openChallongeManualTokenDialog"
+                  @click="openChallongeManualDialog"
                 />
               </div>
             </div>
-            <div
-              v-if="challongeTournamentsError"
-              class="text-negative q-mt-sm"
-            >
-              {{ challongeTournamentsError }}
+            <div v-if="challonge.tournamentsError" class="text-negative q-mt-sm">
+              {{ challonge.tournamentsError }}
             </div>
             <div class="row items-center q-mt-md startgg-tournament-row">
               <QBtn
-                flat
-                round
-                dense
+                flat round dense
                 text-color="white"
                 icon="sync"
                 class="startgg-refresh-btn"
-                :loading="challongeLoadingTournaments"
-                @click="loadChallongeRecentTournaments"
+                :loading="challonge.loadingTournaments"
+                @click="challonge.loadRecentTournaments"
               />
               <div class="col">
                 <QSelect
-                  v-model="selectedChallongeTournamentSlug"
-                  v-model:input-value="challongeTournamentInput"
-                  :options="filteredChallongeTournamentOptions"
+                  v-model="challonge.selectedTournamentSlug"
+                  v-model:input-value="challonge.tournamentInput"
+                  :options="challonge.filteredTournamentOptions"
                   option-value="value"
                   option-label="label"
                   emit-value
@@ -1164,49 +535,138 @@ onBeforeUnmount(() => {
                   dense
                   :label="t('playersTournament')"
                   class="players-underlined-field"
-                  @filter="filterChallongeTournaments"
+                  @filter="challonge.filterTournaments"
                 >
                   <template #option="scope">
                     <QItem v-bind="scope.itemProps">
                       <QItemSection>
                         <QItemLabel>{{ scope.opt.label }}</QItemLabel>
-                        <QItemLabel caption>
-                          {{ scope.opt.caption }}
-                        </QItemLabel>
+                        <QItemLabel caption>{{ scope.opt.caption }}</QItemLabel>
                       </QItemSection>
                     </QItem>
                   </template>
                 </QSelect>
               </div>
-              <div
-                v-if="canImportSelectedChallongeTournament"
-                class="col-auto"
-              >
+              <div v-if="challonge.canImportSelectedTournament" class="col-auto">
                 <QBtn
                   color="primary"
                   unelevated
                   round
                   icon="person_add"
                   :aria-label="t('playersImportPlayers')"
-                  @click="openSelectedChallongeTournamentImportDialog"
+                  @click="challonge.openSelectedTournamentImportDialog"
                 >
                   <QTooltip>{{ t('playersImportPlayers') }}</QTooltip>
                 </QBtn>
               </div>
             </div>
           </QCard>
+
         </div>
       </div>
     </div>
 
-    <QDialog v-model="isManualTokenDialogOpen">
+    <!-- ── Diálogo importar jugadores start.gg ─────────────────────────────── -->
+    <QDialog v-model="startgg.importDialogOpen">
       <QCard class="players-dialog">
         <QCardSection>
           <div class="text-h6">
-            Personal start.gg API
+            Import from {{ startgg.importingTournament?.name || 'start.gg' }}
           </div>
         </QCardSection>
         <QSeparator />
+        <QCardSection>
+          <div v-if="startgg.loadingPlayers" class="row items-center q-gutter-sm">
+            <QSpinner />
+            <span>Loading participants...</span>
+          </div>
+          <div v-else>
+            <div class="row q-gutter-sm q-mb-sm">
+              <QBtn
+                flat dense no-caps size="sm" color="primary"
+                :label="startgg.selectedPlayerIds.length === startgg.players.length ? 'Deselect all' : 'Select all'"
+                @click="startgg.toggleAllPlayers"
+              />
+              <span class="text-caption text-grey-6 self-center">
+                {{ startgg.selectedPlayerIds.length }} / {{ startgg.players.length }} selected
+              </span>
+            </div>
+            <QOptionGroup
+              v-model="startgg.selectedPlayerIds"
+              type="checkbox"
+              :options="startgg.players.map((player) => ({
+                label: `${player.gamertag}${player.team ? ` (${player.team})` : ''}${player.country ? ` - ${getCountryLabel(player.country, locale)}` : ''}`,
+                value: player.id,
+              }))"
+            />
+          </div>
+        </QCardSection>
+        <QSeparator />
+        <QCardActions align="right">
+          <QBtn flat no-caps label="Cancel" color="secondary" @click="startgg.importDialogOpen = false" />
+          <QBtn
+            no-caps color="primary" label="Import selected"
+            :disable="!startgg.selectedPlayerIds.length"
+            @click="startgg.importSelectedPlayers"
+          />
+        </QCardActions>
+      </QCard>
+    </QDialog>
+
+    <!-- ── Diálogo importar jugadores Challonge ────────────────────────────── -->
+    <QDialog v-model="challonge.importDialogOpen">
+      <QCard class="players-dialog">
+        <QCardSection>
+          <div class="text-h6">
+            Import from {{ challonge.importingTournament?.name || 'Challonge' }}
+          </div>
+        </QCardSection>
+        <QSeparator />
+        <QCardSection>
+          <div v-if="challonge.loadingPlayers" class="row items-center q-gutter-sm">
+            <QSpinner />
+            <span>Loading participants...</span>
+          </div>
+          <div v-else>
+            <div class="row q-gutter-sm q-mb-sm">
+              <QBtn
+                flat dense no-caps size="sm" color="primary"
+                :label="challonge.selectedPlayerIds.length === challonge.players.length ? 'Deselect all' : 'Select all'"
+                @click="challonge.toggleAllPlayers"
+              />
+              <span class="text-caption text-grey-6 self-center">
+                {{ challonge.selectedPlayerIds.length }} / {{ challonge.players.length }} selected
+              </span>
+            </div>
+            <QOptionGroup
+              v-model="challonge.selectedPlayerIds"
+              type="checkbox"
+              :options="challonge.players.map((player) => ({
+                label: `${player.gamertag}${player.team ? ` (${player.team})` : ''}`,
+                value: player.id,
+              }))"
+            />
+          </div>
+        </QCardSection>
+        <QSeparator />
+        <QCardActions align="right">
+          <QBtn flat no-caps label="Cancel" color="secondary" @click="challonge.importDialogOpen = false" />
+          <QBtn
+            no-caps color="primary" label="Import selected"
+            :disable="!challonge.selectedPlayerIds.length"
+            @click="challonge.importSelectedPlayers"
+          />
+        </QCardActions>
+      </QCard>
+    </QDialog>
+
+    <!-- ── Diálogo token personal start.gg ────────────────────────────────── -->
+    <QDialog v-model="isStartggManualDialogOpen">
+      <QCard class="players-dialog">
+        <QCardSection>
+          <div class="text-h6">Personal start.gg API</div>
+        </QCardSection>
+        <QSeparator />
         <QCardSection>
           <div class="text-body2 q-mb-sm">
             If OAuth fails, you can create your personal token manually with these steps:
@@ -1219,167 +679,25 @@ onBeforeUnmount(() => {
             <li>Copy the generated token and paste it into Scoreko</li>
           </ol>
           <QInput
-            v-model="manualTokenDraft"
+            v-model="startggManualDraft"
             label="Paste your personal token"
-            dense
-            outlined
-            type="password"
+            dense outlined type="password"
           />
         </QCardSection>
         <QSeparator />
         <QCardActions align="right">
-          <QBtn
-            flat
-            no-caps
-            label="Cancel"
-            color="secondary"
-            @click="isManualTokenDialogOpen = false"
-          />
-          <QBtn
-            flat
-            no-caps
-            color="negative"
-            label="Delete token"
-            @click="manualTokenDraft = ''; saveManualToken()"
-          />
-          <QBtn
-            no-caps
-            color="primary"
-            label="Save token"
-            @click="saveManualToken"
-          />
+          <QBtn flat no-caps label="Cancel" color="secondary" @click="isStartggManualDialogOpen = false" />
+          <QBtn flat no-caps color="negative" label="Delete token" @click="startggManualDraft = ''; saveStartggManualToken()" />
+          <QBtn no-caps color="primary" label="Save token" @click="saveStartggManualToken" />
         </QCardActions>
       </QCard>
     </QDialog>
 
-    <QDialog v-model="isImportDialogOpen">
+    <!-- ── Diálogo token personal Challonge ───────────────────────────────── -->
+    <QDialog v-model="isChallongeManualDialogOpen">
       <QCard class="players-dialog">
         <QCardSection>
-          <div class="text-h6">
-            Import from {{ importingTournament?.name || 'start.gg' }}
-          </div>
-        </QCardSection>
-        <QSeparator />
-        <QCardSection>
-          <div
-            v-if="loadingTournamentPlayers"
-            class="row items-center q-gutter-sm"
-          >
-            <QSpinner />
-            <span>Loading participants...</span>
-          </div>
-          <div v-else>
-            <div class="row q-gutter-sm q-mb-sm">
-              <QBtn
-                flat
-                dense
-                no-caps
-                size="sm"
-                color="primary"
-                :label="selectedStartGGPlayerIds.length === startGGPlayers.length ? 'Deselect all' : 'Select all'"
-                @click="toggleAllStartGGPlayers"
-              />
-              <span class="text-caption text-grey-6 self-center">
-                {{ selectedStartGGPlayerIds.length }} / {{ startGGPlayers.length }} selected
-              </span>
-            </div>
-            <QOptionGroup
-              v-model="selectedStartGGPlayerIds"
-              type="checkbox"
-              :options="startGGPlayers.map((player) => ({
-                label: `${player.gamertag}${player.team ? ` (${player.team})` : ''}${player.country ? ` - ${getCountryLabel(player.country, locale)}` : ''}`,
-                value: player.id,
-              }))"
-            />
-          </div>
-        </QCardSection>
-        <QSeparator />
-        <QCardActions align="right">
-          <QBtn
-            flat
-            no-caps
-            label="Cancel"
-            color="secondary"
-            @click="isImportDialogOpen = false"
-          />
-          <QBtn
-            no-caps
-            color="primary"
-            label="Import selected"
-            :disable="!selectedStartGGPlayerIds.length"
-            @click="importSelectedStartGGPlayers"
-          />
-        </QCardActions>
-      </QCard>
-    </QDialog>
-
-    <QDialog v-model="challongeImportDialogOpen">
-      <QCard class="players-dialog">
-        <QCardSection>
-          <div class="text-h6">
-            Import from {{ importingChallongeTournament?.name || 'Challonge' }}
-          </div>
-        </QCardSection>
-        <QSeparator />
-        <QCardSection>
-          <div
-            v-if="loadingChallongeTournamentPlayers"
-            class="row items-center q-gutter-sm"
-          >
-            <QSpinner />
-            <span>Loading participants...</span>
-          </div>
-          <div v-else>
-            <div class="row q-gutter-sm q-mb-sm">
-              <QBtn
-                flat
-                dense
-                no-caps
-                size="sm"
-                color="primary"
-                :label="selectedChallongePlayerIds.length === challongePlayers.length ? 'Deselect all' : 'Select all'"
-                @click="toggleAllChallongePlayers"
-              />
-              <span class="text-caption text-grey-6 self-center">
-                {{ selectedChallongePlayerIds.length }} / {{ challongePlayers.length }} selected
-              </span>
-            </div>
-            <QOptionGroup
-              v-model="selectedChallongePlayerIds"
-              type="checkbox"
-              :options="challongePlayers.map((player) => ({
-                label: `${player.gamertag}${player.team ? ` (${player.team})` : ''}`,
-                value: player.id,
-              }))"
-            />
-          </div>
-        </QCardSection>
-        <QSeparator />
-        <QCardActions align="right">
-          <QBtn
-            flat
-            no-caps
-            label="Cancel"
-            color="secondary"
-            @click="challongeImportDialogOpen = false"
-          />
-          <QBtn
-            no-caps
-            color="primary"
-            label="Import selected"
-            :disable="!selectedChallongePlayerIds.length"
-            @click="importSelectedChallongePlayers"
-          />
-        </QCardActions>
-      </QCard>
-    </QDialog>
-
-    <QDialog v-model="isChallongeManualTokenDialogOpen">
-      <QCard class="players-dialog">
-        <QCardSection>
-          <div class="text-h6">
-            Personal Challonge API
-          </div>
+          <div class="text-h6">Personal Challonge API</div>
         </QCardSection>
         <QSeparator />
         <QCardSection>
@@ -1387,39 +705,21 @@ onBeforeUnmount(() => {
             If OAuth fails, paste a personal Challonge API token.
           </div>
           <QInput
-            v-model="challongeManualTokenDraft"
+            v-model="challongeManualDraft"
             label="Paste your personal Challonge token"
-            dense
-            outlined
-            type="password"
+            dense outlined type="password"
           />
         </QCardSection>
         <QSeparator />
         <QCardActions align="right">
-          <QBtn
-            flat
-            no-caps
-            label="Cancel"
-            color="secondary"
-            @click="isChallongeManualTokenDialogOpen = false"
-          />
-          <QBtn
-            flat
-            no-caps
-            color="negative"
-            label="Delete token"
-            @click="challongeManualTokenDraft = ''; saveChallongeManualToken()"
-          />
-          <QBtn
-            no-caps
-            color="primary"
-            label="Save token"
-            @click="saveChallongeManualToken"
-          />
+          <QBtn flat no-caps label="Cancel" color="secondary" @click="isChallongeManualDialogOpen = false" />
+          <QBtn flat no-caps color="negative" label="Delete token" @click="challongeManualDraft = ''; saveChallongeManualToken()" />
+          <QBtn no-caps color="primary" label="Save token" @click="saveChallongeManualToken" />
         </QCardActions>
       </QCard>
     </QDialog>
 
+    <!-- ── Diálogo crear / editar jugador ─────────────────────────────────── -->
     <QDialog v-model="isDialogOpen">
       <QCard class="players-dialog">
         <QCardSection>
@@ -1443,12 +743,7 @@ onBeforeUnmount(() => {
                 />
               </div>
               <div class="col-12">
-                <QInput
-                  v-model="form.name"
-                  label="Name"
-                  dense
-                  class="players-underlined-field"
-                />
+                <QInput v-model="form.name" label="Name" dense class="players-underlined-field" />
               </div>
               <div class="col-12">
                 <QSelect
@@ -1471,39 +766,18 @@ onBeforeUnmount(() => {
                 />
               </div>
               <div class="col-12">
-                <QInput
-                  v-model="form.team"
-                  :label="t('playersLabelTeam')"
-                  dense
-                  class="players-underlined-field"
-                />
+                <QInput v-model="form.team" :label="t('playersLabelTeam')" dense class="players-underlined-field" />
               </div>
               <div class="col-12">
-                <QInput
-                  v-model="form.twitter"
-                  label="Twitter"
-                  dense
-                  class="players-underlined-field"
-                />
+                <QInput v-model="form.twitter" label="Twitter" dense class="players-underlined-field" />
               </div>
             </div>
           </QForm>
         </QCardSection>
         <QSeparator />
         <QCardActions align="right">
-          <QBtn
-            flat
-            no-caps
-            label="Cancel"
-            color="secondary"
-            @click="isDialogOpen = false"
-          />
-          <QBtn
-            no-caps
-            color="primary"
-            label="Save"
-            @click="savePlayer"
-          />
+          <QBtn flat no-caps label="Cancel" color="secondary" @click="isDialogOpen = false" />
+          <QBtn no-caps color="primary" label="Save" @click="savePlayer" />
         </QCardActions>
       </QCard>
     </QDialog>
@@ -1540,13 +814,11 @@ onBeforeUnmount(() => {
   gap: 12px;
 }
 
-
 .players-dialog {
   min-width: 320px;
   width: min(720px, 90vw);
 }
 
-
 .startgg-heading {
   display: inline-flex;
   align-items: center;
@@ -1604,4 +876,4 @@ onBeforeUnmount(() => {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/extension/challonge.ts b/src/extension/challonge.ts
index 9ca4d6a..a999abe 100644
--- a/src/extension/challonge.ts
+++ b/src/extension/challonge.ts
@@ -1,6 +1,7 @@
-import { createServer, type Server, type ServerResponse } from 'node:http';
-import { randomUUID } from 'node:crypto';
 import { nodecg } from './util/nodecg.js';
+import { createOAuthServer, type OAuthConfig } from './util/oauth-server.js';
+
+// ─── Constantes ────────────────────────────────────────────────────────────────
 
 const CHALLONGE_API_BASE = 'https://api.challonge.com/v2.1';
 const CHALLONGE_OAUTH_AUTHORIZE_ENDPOINT = 'https://api.challonge.com/oauth/authorize';
@@ -17,21 +18,9 @@ const CHALLONGE_OAUTH_SCOPES = [
 const CHALLONGE_OAUTH_CALLBACK_PATH = '/challonge/callback';
 const CHALLONGE_OAUTH_DEFAULT_PORT = 34921;
 const CHALLONGE_OAUTH_SESSION_TTL_MS = 10 * 60 * 1000;
+const RECENT_TOURNAMENTS_LIMIT = 20;
 
-interface OAuthConfig {
-  clientId: string;
-  clientSecret: string;
-  callbackPort: number;
-}
-
-interface OAuthSession {
-  sessionId: string;
-  state: string;
-  expiresAt: number;
-  status: 'pending' | 'completed' | 'error' | 'expired';
-  token?: string;
-  error?: string;
-}
+// ─── Tipos ─────────────────────────────────────────────────────────────────────
 
 interface OAuthTokenResponse {
   access_token?: string;
@@ -57,157 +46,90 @@ interface ImportedPlayer {
   twitter: string;
 }
 
-const oauthSessions = new Map<string, OAuthSession>();
-let oauthCallbackServer: Server | null = null;
-
-const getStringProp = (payload: unknown, key: string): string => {
-  if (typeof payload !== 'object' || payload === null || !(key in payload)) {
-    return '';
-  }
-
-  const value = (payload as Record<string, unknown>)[key];
-  return typeof value === 'string' ? value.trim() : String(value || '').trim();
-};
-
-const getNumberProp = (payload: Record<string, unknown>, keys: string[]): number | null => {
-  for (const key of keys) {
-    const raw = payload[key];
-    if (typeof raw === 'number' && Number.isFinite(raw)) {
-      return raw;
-    }
-    if (typeof raw === 'string') {
-      const parsed = Number(raw);
-      if (Number.isFinite(parsed)) {
-        return parsed;
-      }
-    }
-  }
-  return null;
-};
-
-const sendAck = (ack: unknown, error: string | null, response?: unknown) => {
-  if (typeof ack !== 'function') {
-    return;
-  }
-  ack(error, response);
-};
+// ─── Config OAuth ──────────────────────────────────────────────────────────────
 
 const getOAuthConfig = (): OAuthConfig | null => {
   const bundleConfig = nodecg.bundleConfig as unknown as Record<string, unknown>;
-  const clientId = String(bundleConfig.challongeClientId || '').trim();
-  const clientSecret = String(bundleConfig.challongeClientSecret || '').trim();
+  const clientId = String(bundleConfig.challongeClientId ?? '').trim();
+  const clientSecret = String(bundleConfig.challongeClientSecret ?? '').trim();
   const rawPort = Number(bundleConfig.challongeOAuthPort ?? CHALLONGE_OAUTH_DEFAULT_PORT);
-  const callbackPort = Number.isFinite(rawPort) && rawPort > 0 ? rawPort : CHALLONGE_OAUTH_DEFAULT_PORT;
+  const callbackPort =
+    Number.isFinite(rawPort) && rawPort > 0 ? rawPort : CHALLONGE_OAUTH_DEFAULT_PORT;
 
-  if (!clientId || !clientSecret) {
-    return null;
-  }
+  if (!clientId || !clientSecret) return null;
 
-  return {
-    clientId,
-    clientSecret,
-    callbackPort,
-  };
+  return { clientId, clientSecret, callbackPort };
 };
 
-const getCallbackUrl = (callbackPort: number) => `http://127.0.0.1:${callbackPort}${CHALLONGE_OAUTH_CALLBACK_PATH}`;
-
-const updateOAuthSession = (sessionId: string, update: Partial<OAuthSession>) => {
-  const session = oauthSessions.get(sessionId);
-  if (!session) {
-    return;
-  }
-
-  oauthSessions.set(sessionId, {
-    ...session,
-    ...update,
-  });
-};
-
-const cleanupExpiredOAuthSessions = () => {
-  const now = Date.now();
-  oauthSessions.forEach((session, sessionId) => {
-    if (session.expiresAt <= now && session.status === 'pending') {
-      updateOAuthSession(sessionId, { status: 'expired' });
-    }
-  });
-};
-
-const renderCallbackHtml = (title: string, message: string) => `<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="utf-8" />
-    <title>${title}</title>
-    <style>
-      body { font-family: Arial, sans-serif; margin: 2rem; background: #121212; color: #fff; }
-      .box { max-width: 680px; padding: 1rem 1.2rem; border: 1px solid #444; border-radius: 8px; }
-    </style>
-  </head>
-  <body>
-    <div class="box">
-      <h2>${title}</h2>
-      <p>${message}</p>
-      <p>You can close this tab and return to Scoreko.</p>
-    </div>
-  </body>
-</html>`;
-
-const respondWithCallbackHtml = (res: ServerResponse, statusCode: number, title: string, message: string) => {
-  res.statusCode = statusCode;
-  res.setHeader('Content-Type', 'text/html; charset=utf-8');
-  res.end(renderCallbackHtml(title, message));
-};
-
-const parseOAuthTokenPayload = async (response: Response): Promise<OAuthTokenResponse> => {
-  const rawBody = await response.text();
-  try {
-    return JSON.parse(rawBody) as OAuthTokenResponse;
-  } catch {
-    return { message: rawBody };
-  }
-};
+// ─── Intercambio de token ──────────────────────────────────────────────────────
 
 const exchangeOAuthCodeForToken = async (
   code: string,
   redirectUri: string,
-  oauthConfig: OAuthConfig,
+  config: OAuthConfig,
 ): Promise<string> => {
   const params = new URLSearchParams({
     grant_type: 'authorization_code',
     code,
-    client_id: oauthConfig.clientId,
-    client_secret: oauthConfig.clientSecret,
+    client_id: config.clientId,
+    client_secret: config.clientSecret,
     redirect_uri: redirectUri,
   });
 
   const response = await fetch(CHALLONGE_OAUTH_TOKEN_ENDPOINT, {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    },
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     body: params.toString(),
   });
 
-  const payload = await parseOAuthTokenPayload(response);
-
-  if (!response.ok) {
-    throw new Error(payload.error_description || payload.error || payload.message || `OAuth token request failed (${response.status})`);
+  const rawBody = await response.text();
+  let payload: OAuthTokenResponse;
+  try {
+    payload = JSON.parse(rawBody) as OAuthTokenResponse;
+  } catch {
+    payload = { message: rawBody };
   }
 
-  const token = String(payload.access_token || '').trim();
+  if (!response.ok) {
+    throw new Error(
+      payload.error_description ??
+      payload.error ??
+      payload.message ??
+      `OAuth token request failed (${response.status})`,
+    );
+  }
+
+  const token = String(payload.access_token ?? '').trim();
   if (!token) {
-    throw new Error(payload.error_description || payload.error || payload.message || 'OAuth token response did not include an access token');
+    throw new Error(
+      payload.error_description ??
+      payload.error ??
+      payload.message ??
+      'OAuth token response did not include an access token',
+    );
   }
 
   return token;
 };
 
+// ─── Servidor OAuth ────────────────────────────────────────────────────────────
+
+const oauthServer = createOAuthServer({
+  provider: 'Challonge',
+  callbackPath: CHALLONGE_OAUTH_CALLBACK_PATH,
+  authorizeEndpoint: CHALLONGE_OAUTH_AUTHORIZE_ENDPOINT,
+  scope: CHALLONGE_OAUTH_SCOPES,
+  sessionTtlMs: CHALLONGE_OAUTH_SESSION_TTL_MS,
+  exchangeToken: exchangeOAuthCodeForToken,
+});
+
+// ─── API de Challonge ──────────────────────────────────────────────────────────
+
+type ChallongeErrorPayload = { errors?: { detail?: string }; error?: string } | null;
+
 const parseJsonResponse = async (response: Response): Promise<unknown> => {
   const rawBody = await response.text();
-  if (!rawBody) {
-    return null;
-  }
-
+  if (!rawBody) return null;
   try {
     return JSON.parse(rawBody) as unknown;
   } catch {
@@ -215,9 +137,21 @@ const parseJsonResponse = async (response: Response): Promise<unknown> => {
   }
 };
 
+/**
+ * Realiza una petición autenticada a la API de Challonge.
+ *
+ * Intenta primero con OAuth v2 (Bearer token).
+ * Si recibe 401, reintenta con autenticación v1 (API key personal pegada manualmente).
+ * En cualquier otro error no-2xx, lanza inmediatamente.
+ *
+ * CORRECCIÓN: en la versión anterior, el bloque de error final era dead code
+ * porque el body de v2 ya había sido consumido y la condición `!v2Response.ok`
+ * nunca se alcanzaba tras el fallback v1.
+ */
 const requestChallonge = async (path: string, token: string): Promise<unknown> => {
   const requestUrl = `${CHALLONGE_API_BASE}${path}`;
 
+  // ── Intento v2 (OAuth Bearer) ─────────────────────────────────────────────
   const v2Response = await fetch(requestUrl, {
     headers: {
       Accept: 'application/json',
@@ -226,14 +160,13 @@ const requestChallonge = async (path: string, token: string): Promise<unknown> =
       Authorization: `Bearer ${token}`,
     },
   });
-
   const v2Payload = await parseJsonResponse(v2Response);
 
   if (v2Response.ok) {
     return v2Payload;
   }
 
-  // Fallback for personal API keys pasted manually (v1 auth style).
+  // ── Fallback v1 (API key personal pegada manualmente) ─────────────────────
   if (v2Response.status === 401) {
     const v1Response = await fetch(requestUrl, {
       headers: {
@@ -243,46 +176,68 @@ const requestChallonge = async (path: string, token: string): Promise<unknown> =
         Authorization: token,
       },
     });
-
     const v1Payload = await parseJsonResponse(v1Response);
+
     if (v1Response.ok) {
       return v1Payload;
     }
-  }
 
-  const maybeError = v2Payload as { errors?: { detail?: string }; error?: string } | null;
-  if (!v2Response.ok) {
+    const v1Error = v1Payload as ChallongeErrorPayload;
     throw new Error(
-      maybeError?.errors?.detail || maybeError?.error || `Challonge responded with ${v2Response.status} ${v2Response.statusText}`.trim(),
+      v1Error?.errors?.detail ??
+      v1Error?.error ??
+      `Challonge responded with ${v1Response.status} ${v1Response.statusText}`.trim(),
     );
   }
 
-  return v2Payload;
+  // ── Otros errores v2 (4xx/5xx que no sean 401) ────────────────────────────
+  const v2Error = v2Payload as ChallongeErrorPayload;
+  throw new Error(
+    v2Error?.errors?.detail ??
+    v2Error?.error ??
+    `Challonge responded with ${v2Response.status} ${v2Response.statusText}`.trim(),
+  );
 };
 
+// ─── Parsers de respuesta ──────────────────────────────────────────────────────
+
 const normalizeTournamentSlug = (value: string): string => {
   const trimmed = value.trim();
-  if (!trimmed) {
-    return '';
+  if (!trimmed) return '';
+  return trimmed
+    .replace(/^https?:\/\/[^/]+\//i, '')
+    .replace(/^tournaments\//i, '')
+    .replace(/^\/+/, '');
+};
+
+const getNumberProp = (payload: Record<string, unknown>, keys: string[]): number | null => {
+  for (const key of keys) {
+    const raw = payload[key];
+    if (typeof raw === 'number' && Number.isFinite(raw)) return raw;
+    if (typeof raw === 'string') {
+      const parsed = Number(raw);
+      if (Number.isFinite(parsed)) return parsed;
+    }
   }
-  return trimmed.replace(/^https?:\/\/[^/]+\//i, '').replace(/^tournaments\//i, '').replace(/^\/+/, '');
+  return null;
 };
 
 const parseRecentTournaments = (payload: unknown): RecentTournament[] => {
   const rows: RecentTournament[] = [];
 
   const push = (candidate: Record<string, unknown>) => {
-    const attributes = (typeof candidate.attributes === 'object' && candidate.attributes !== null)
-      ? (candidate.attributes as Record<string, unknown>)
-      : candidate;
+    const attributes =
+      typeof candidate.attributes === 'object' && candidate.attributes !== null
+        ? (candidate.attributes as Record<string, unknown>)
+        : candidate;
 
-    const id = String(candidate.id || attributes.id || attributes.tournament_id || '').trim();
-    const name = String(attributes.name || attributes.full_name || '').trim();
-    const slug = normalizeTournamentSlug(String(attributes.url || attributes.slug || attributes.identifier || id));
+    const id = String(candidate.id ?? attributes.id ?? attributes.tournament_id ?? '').trim();
+    const name = String(attributes.name ?? attributes.full_name ?? '').trim();
+    const slug = normalizeTournamentSlug(
+      String(attributes.url ?? attributes.slug ?? attributes.identifier ?? id),
+    );
 
-    if (!id || !name || !slug) {
-      return;
-    }
+    if (!id || !name || !slug) return;
 
     rows.push({
       id,
@@ -294,26 +249,25 @@ const parseRecentTournaments = (payload: unknown): RecentTournament[] => {
   };
 
   if (Array.isArray(payload)) {
-    payload.forEach((row) => {
+    for (const row of payload) {
       const wrapper = row as Record<string, unknown>;
-      const tournament = (typeof wrapper.tournament === 'object' && wrapper.tournament !== null)
-        ? (wrapper.tournament as Record<string, unknown>)
-        : wrapper;
+      const tournament =
+        typeof wrapper.tournament === 'object' && wrapper.tournament !== null
+          ? (wrapper.tournament as Record<string, unknown>)
+          : wrapper;
       push(tournament);
-    });
+    }
     return rows;
   }
 
   if (typeof payload === 'object' && payload !== null) {
-    const root = payload as Record<string, unknown>;
-    const data = root.data;
+    const data = (payload as Record<string, unknown>).data;
     if (Array.isArray(data)) {
-      data.forEach((row) => {
+      for (const row of data) {
         if (typeof row === 'object' && row !== null) {
           push(row as Record<string, unknown>);
         }
-      });
-      return rows;
+      }
     }
   }
 
@@ -324,201 +278,127 @@ const parseImportedPlayers = (payload: unknown): ImportedPlayer[] => {
   const map = new Map<string, ImportedPlayer>();
 
   const push = (candidate: Record<string, unknown>) => {
-    const attributes = (typeof candidate.attributes === 'object' && candidate.attributes !== null)
-      ? (candidate.attributes as Record<string, unknown>)
-      : candidate;
+    const attributes =
+      typeof candidate.attributes === 'object' && candidate.attributes !== null
+        ? (candidate.attributes as Record<string, unknown>)
+        : candidate;
 
-    const id = String(candidate.id || attributes.id || attributes.participant_id || '').trim();
-    const gamertag = String(
-      attributes.display_name
-      || attributes.name
-      || attributes.username
-      || attributes.gamer_tag
-      || '',
+    const id = String(
+      candidate.id ?? attributes.id ?? attributes.participant_id ?? '',
     ).trim();
 
-    if (!id || !gamertag) {
-      return;
-    }
+    const rawDisplayName = String(
+      attributes.display_name ??
+      attributes.name ??
+      attributes.username ??
+      attributes.gamer_tag ??
+      '',
+    ).trim();
 
+    if (!id || !rawDisplayName) return;
+
+    // Detectar patrón "TEAM | Gamertag" o "TEAM |Gamertag" (muy común en fighting games).
+    // Si se detecta, extraer el equipo del propio nombre y limpiar el gamertag.
+    const PIPE_PATTERN = /^(.+?)\s*\|\s*(.+)$/;
+    const pipeMatch = PIPE_PATTERN.exec(rawDisplayName);
+
+    const teamFromName = pipeMatch ? pipeMatch[1].trim() : '';
+    const gamertag = pipeMatch ? pipeMatch[2].trim() : rawDisplayName;
+
+    // team_name de la API tiene prioridad; si no existe, usar el extraído del nombre.
+    const team = String(attributes.team_name ?? '').trim() || teamFromName;
+
+    // Challonge no expone un campo de nombre real separado del username/display_name.
+    // Se deja vacío para no duplicar el gamertag en el campo name.
     map.set(id, {
       id,
       gamertag,
-      name: gamertag,
-      team: String(attributes.group_player_ids || attributes.team_name || '').trim(),
+      name: '',
+      team,
       country: '',
-      twitter: String(attributes.twitter_handle || attributes.twitter || '').trim(),
+      twitter: String(attributes.twitter_handle ?? attributes.twitter ?? '').trim(),
     });
   };
 
   if (Array.isArray(payload)) {
-    payload.forEach((row) => {
+    for (const row of payload) {
       const wrapper = row as Record<string, unknown>;
-      const participant = (typeof wrapper.participant === 'object' && wrapper.participant !== null)
-        ? (wrapper.participant as Record<string, unknown>)
-        : wrapper;
+      const participant =
+        typeof wrapper.participant === 'object' && wrapper.participant !== null
+          ? (wrapper.participant as Record<string, unknown>)
+          : wrapper;
       push(participant);
-    });
+    }
     return Array.from(map.values());
   }
 
   if (typeof payload === 'object' && payload !== null) {
-    const root = payload as Record<string, unknown>;
-    const data = root.data;
+    const data = (payload as Record<string, unknown>).data;
     if (Array.isArray(data)) {
-      data.forEach((row) => {
+      for (const row of data) {
         if (typeof row === 'object' && row !== null) {
           push(row as Record<string, unknown>);
         }
-      });
+      }
     }
   }
 
   return Array.from(map.values());
 };
 
-const ensureOAuthCallbackServer = async (oauthConfig: OAuthConfig) => {
-  if (oauthCallbackServer) {
-    return;
-  }
+// ─── Utilidades ────────────────────────────────────────────────────────────────
 
-  const callbackUrl = getCallbackUrl(oauthConfig.callbackPort);
-
-  const server = createServer((req, res) => {
-    if (!req.url) {
-      res.statusCode = 400;
-      res.end('Bad request');
-      return;
-    }
-
-    const requestUrl = new URL(req.url, callbackUrl);
-    if (requestUrl.pathname !== CHALLONGE_OAUTH_CALLBACK_PATH) {
-      res.statusCode = 404;
-      res.end('Not found');
-      return;
-    }
-
-    cleanupExpiredOAuthSessions();
-
-    const state = requestUrl.searchParams.get('state') || '';
-    const code = requestUrl.searchParams.get('code') || '';
-    const error = requestUrl.searchParams.get('error') || '';
-
-    const session = Array.from(oauthSessions.values()).find((candidate) => candidate.state === state);
-    if (!session) {
-      respondWithCallbackHtml(res, 400, 'Invalid OAuth', 'No active session was found for this authorization.');
-      return;
-    }
-
-    if (session.expiresAt <= Date.now()) {
-      updateOAuthSession(session.sessionId, { status: 'expired' });
-      respondWithCallbackHtml(res, 400, 'Session expired', 'The OAuth session expired. Start the process again from Scoreko.');
-      return;
-    }
-
-    if (error) {
-      updateOAuthSession(session.sessionId, { status: 'error', error });
-      respondWithCallbackHtml(res, 400, 'OAuth canceled', `Challonge returned this error: ${error}`);
-      return;
-    }
-
-    if (!code) {
-      updateOAuthSession(session.sessionId, {
-        status: 'error',
-        error: 'Missing authorization code',
-      });
-      respondWithCallbackHtml(res, 400, 'Incomplete OAuth', 'No authorization code was received.');
-      return;
-    }
-
-    void exchangeOAuthCodeForToken(code, callbackUrl, oauthConfig)
-      .then((token) => {
-        updateOAuthSession(session.sessionId, { status: 'completed', token, error: undefined });
-      })
-      .catch((exchangeError) => {
-        const message = exchangeError instanceof Error ? exchangeError.message : 'Failed to exchange authorization code';
-        updateOAuthSession(session.sessionId, { status: 'error', error: message });
-      });
-
-    respondWithCallbackHtml(res, 200, 'Authorization received', 'Your authorization was received. Finishing sign-in in the background...');
-  });
-
-  await new Promise<void>((resolve, reject) => {
-    server.once('error', reject);
-    server.listen(oauthConfig.callbackPort, '127.0.0.1', () => {
-      server.off('error', reject);
-      resolve();
-    });
-  });
-
-  oauthCallbackServer = server;
+const getStringProp = (payload: unknown, key: string): string => {
+  if (typeof payload !== 'object' || payload === null || !(key in payload)) return '';
+  const value = (payload as Record<string, unknown>)[key];
+  return typeof value === 'string' ? value.trim() : String(value ?? '').trim();
 };
 
+const sendAck = (ack: unknown, error: string | null, response?: unknown) => {
+  if (typeof ack === 'function') ack(error, response);
+};
+
+// ─── Listeners de NodeCG ───────────────────────────────────────────────────────
+
 nodecg.listenFor('challonge:createOAuthSession', async (_payload: unknown, ack) => {
-  const oauthConfig = getOAuthConfig();
-  if (!oauthConfig) {
-    sendAck(ack, 'OAuth is not configured in this installation (missing challongeClientId/challongeClientSecret). Use the Client ID and Client Secret from a Challonge OAuth app.');
+  const config = getOAuthConfig();
+  if (!config) {
+    sendAck(
+      ack,
+      'OAuth is not configured in this installation (missing challongeClientId/challongeClientSecret). Use the Client ID and Client Secret from a Challonge OAuth app.',
+    );
     return;
   }
 
   try {
-    await ensureOAuthCallbackServer(oauthConfig);
-  } catch (serverError) {
-    const message = serverError instanceof Error ? serverError.message : 'Could not start the local OAuth callback';
-    sendAck(ack, message);
+    await oauthServer.ensureServer(config);
+  } catch (err) {
+    sendAck(ack, err instanceof Error ? err.message : 'Could not start the local OAuth callback');
     return;
   }
 
-  cleanupExpiredOAuthSessions();
-
-  const sessionId = randomUUID();
-  const state = randomUUID();
-  oauthSessions.set(sessionId, {
-    sessionId,
-    state,
-    expiresAt: Date.now() + CHALLONGE_OAUTH_SESSION_TTL_MS,
-    status: 'pending',
-  });
-
-  const params = new URLSearchParams({
-    response_type: 'code',
-    client_id: oauthConfig.clientId,
-    redirect_uri: getCallbackUrl(oauthConfig.callbackPort),
-    scope: CHALLONGE_OAUTH_SCOPES,
-    state,
-  });
-
-  sendAck(ack, null, {
-    sessionId,
-    authUrl: `${CHALLONGE_OAUTH_AUTHORIZE_ENDPOINT}?${params.toString()}`,
-  });
+  const session = oauthServer.createSession(config);
+  sendAck(ack, null, session);
 });
 
 nodecg.listenFor('challonge:getOAuthSessionStatus', (payload: unknown, ack) => {
-  cleanupExpiredOAuthSessions();
-
   const sessionId = getStringProp(payload, 'sessionId');
   if (!sessionId) {
     sendAck(ack, 'Missing OAuth session id');
     return;
   }
 
-  const session = oauthSessions.get(sessionId);
-  if (!session) {
+  const status = oauthServer.getSessionStatus(sessionId);
+  if (!status) {
     sendAck(ack, 'OAuth session not found');
     return;
   }
 
-  sendAck(ack, null, {
-    status: session.status,
-    token: session.status === 'completed' ? session.token : undefined,
-    error: session.status === 'error' ? session.error : undefined,
-  });
+  sendAck(ack, null, status);
 });
 
 nodecg.listenFor('challonge:fetchRecentTournaments', async (payload: unknown, ack) => {
   const token = getStringProp(payload, 'token');
-
   if (!token) {
     sendAck(ack, 'Missing Challonge API token');
     return;
@@ -528,12 +408,10 @@ nodecg.listenFor('challonge:fetchRecentTournaments', async (payload: unknown, ac
     const raw = await requestChallonge('/tournaments.json', token);
     const tournaments = parseRecentTournaments(raw)
       .sort((a, b) => (b.startAt ?? 0) - (a.startAt ?? 0))
-      .slice(0, 20);
-
+      .slice(0, RECENT_TOURNAMENTS_LIMIT);
     sendAck(ack, null, tournaments);
   } catch (error) {
-    const message = error instanceof Error ? error.message : 'Unknown error while loading tournaments';
-    sendAck(ack, message);
+    sendAck(ack, error instanceof Error ? error.message : 'Unknown error while loading tournaments');
   }
 });
 
@@ -541,22 +419,16 @@ nodecg.listenFor('challonge:fetchTournamentPlayers', async (payload: unknown, ac
   const token = getStringProp(payload, 'token');
   const slug = normalizeTournamentSlug(getStringProp(payload, 'slug'));
 
-  if (!token) {
-    sendAck(ack, 'Missing Challonge API token');
-    return;
-  }
-
-  if (!slug) {
-    sendAck(ack, 'Missing tournament slug');
-    return;
-  }
+  if (!token) { sendAck(ack, 'Missing Challonge API token'); return; }
+  if (!slug) { sendAck(ack, 'Missing tournament slug'); return; }
 
   try {
-    const raw = await requestChallonge(`/tournaments/${encodeURIComponent(slug)}/participants.json`, token);
-    const players = parseImportedPlayers(raw);
-    sendAck(ack, null, players);
+    const raw = await requestChallonge(
+      `/tournaments/${encodeURIComponent(slug)}/participants.json`,
+      token,
+    );
+    sendAck(ack, null, parseImportedPlayers(raw));
   } catch (error) {
-    const message = error instanceof Error ? error.message : 'Unknown error while importing players';
-    sendAck(ack, message);
+    sendAck(ack, error instanceof Error ? error.message : 'Unknown error while importing players');
   }
 });
diff --git a/src/extension/startgg.ts b/src/extension/startgg.ts
index 6c3282d..9c6de0d 100644
--- a/src/extension/startgg.ts
+++ b/src/extension/startgg.ts
@@ -1,8 +1,9 @@
-import { createServer, type Server, type ServerResponse } from 'node:http';
-import { randomUUID } from 'node:crypto';
 import { getData, type CountryRecord } from 'country-list';
+import { createOAuthServer, type OAuthConfig } from './util/oauth-server.js';
 import { nodecg } from './util/nodecg.js';
 
+// ─── Constantes ────────────────────────────────────────────────────────────────
+
 const STARTGG_ENDPOINT = 'https://api.start.gg/gql/alpha';
 const STARTGG_OAUTH_AUTHORIZE_ENDPOINT = 'https://www.start.gg/api/-/rest/oauth/authorize';
 const STARTGG_OAUTH_TOKEN_ENDPOINTS = [
@@ -17,6 +18,8 @@ const STARTGG_OAUTH_SESSION_TTL_MS = 10 * 60 * 1000;
 const RECENT_TOURNAMENTS_LIMIT = 12;
 const PARTICIPANTS_PAGE_SIZE = 120;
 
+// ─── Tipos ─────────────────────────────────────────────────────────────────────
+
 interface StartGGGraphQLResponse<T> {
   data?: T;
   errors?: Array<{ message?: string }>;
@@ -39,21 +42,6 @@ interface ImportedPlayer {
   twitter: string;
 }
 
-interface OAuthConfig {
-  clientId: string;
-  clientSecret: string;
-  callbackPort: number;
-}
-
-interface OAuthSession {
-  sessionId: string;
-  state: string;
-  expiresAt: number;
-  status: 'pending' | 'completed' | 'error' | 'expired';
-  token?: string;
-  error?: string;
-}
-
 interface OAuthTokenResponse {
   access_token?: string;
   error?: string;
@@ -61,31 +49,98 @@ interface OAuthTokenResponse {
   message?: string;
 }
 
-const oauthSessions = new Map<string, OAuthSession>();
-let oauthCallbackServer: Server | null = null;
+// ─── Config OAuth ──────────────────────────────────────────────────────────────
 
-const getStringProp = (payload: unknown, key: string): string => {
-  if (typeof payload !== 'object' || payload === null || !(key in payload)) {
-    return '';
-  }
+const getOAuthConfig = (): OAuthConfig | null => {
+  const bundleConfig = nodecg.bundleConfig as unknown as Record<string, unknown>;
+  const clientId = String(bundleConfig.startggClientId ?? '').trim();
+  const clientSecret = String(bundleConfig.startggClientSecret ?? '').trim();
+  const rawPort = Number(bundleConfig.startggOAuthPort ?? STARTGG_OAUTH_DEFAULT_PORT);
+  const callbackPort =
+    Number.isFinite(rawPort) && rawPort > 0 ? rawPort : STARTGG_OAUTH_DEFAULT_PORT;
 
-  const value = (payload as Record<string, unknown>)[key];
-  return typeof value === 'string' ? value.trim() : String(value || '').trim();
+  if (!clientId || !clientSecret) return null;
+
+  return { clientId, clientSecret, callbackPort };
 };
 
-const updateOAuthSession = (sessionId: string, update: Partial<OAuthSession>) => {
-  const session = oauthSessions.get(sessionId);
-  if (!session) {
-    return;
-  }
+// ─── Intercambio de token (multi-endpoint) ─────────────────────────────────────
 
-  oauthSessions.set(sessionId, {
-    ...session,
-    ...update,
+const parseOAuthTokenPayload = async (response: Response): Promise<OAuthTokenResponse> => {
+  const rawBody = await response.text();
+  try {
+    return JSON.parse(rawBody) as OAuthTokenResponse;
+  } catch {
+    return { message: rawBody };
+  }
+};
+
+const exchangeOAuthCodeForToken = async (
+  code: string,
+  redirectUri: string,
+  config: OAuthConfig,
+): Promise<string> => {
+  const params = new URLSearchParams({
+    grant_type: 'authorization_code',
+    code,
+    client_id: config.clientId,
+    client_secret: config.clientSecret,
+    redirect_uri: redirectUri,
   });
+
+  let lastError = 'Unknown OAuth token exchange error';
+
+  for (const tokenEndpoint of STARTGG_OAUTH_TOKEN_ENDPOINTS) {
+    const response = await fetch(tokenEndpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: params.toString(),
+    });
+
+    const payload = await parseOAuthTokenPayload(response);
+
+    if (response.ok) {
+      const token = String(payload.access_token ?? '').trim();
+      if (token) return token;
+      lastError =
+        payload.error_description ??
+        payload.error ??
+        payload.message ??
+        'OAuth token response did not include an access token';
+      continue;
+    }
+
+    lastError =
+      payload.error_description ??
+      payload.error ??
+      payload.message ??
+      `OAuth token request failed (${response.status})`;
+
+    // Solo 404 justifica probar el siguiente endpoint
+    if (response.status !== 404) break;
+  }
+
+  throw new Error(lastError);
 };
 
-const requestStartGG = async <T>(query: string, variables: Record<string, unknown>, token: string): Promise<T> => {
+// ─── Servidor OAuth ────────────────────────────────────────────────────────────
+
+const oauthServer = createOAuthServer({
+  provider: 'start.gg',
+  callbackPath: STARTGG_OAUTH_CALLBACK_PATH,
+  authorizeEndpoint: STARTGG_OAUTH_AUTHORIZE_ENDPOINT,
+  scope: STARTGG_OAUTH_SCOPES,
+  sessionTtlMs: STARTGG_OAUTH_SESSION_TTL_MS,
+  exchangeToken: exchangeOAuthCodeForToken,
+});
+
+// ─── GraphQL ───────────────────────────────────────────────────────────────────
+
+const requestStartGG = async <T>(
+  query: string,
+  variables: Record<string, unknown>,
+  token: string,
+): Promise<T> => {
   const response = await fetch(STARTGG_ENDPOINT, {
     method: 'POST',
     headers: {
@@ -107,7 +162,7 @@ const requestStartGG = async <T>(query: string, variables: Record<string, unknow
   }
 
   if (payload.errors?.length) {
-    throw new Error(payload.errors[0]?.message || 'Unknown start.gg error');
+    throw new Error(payload.errors[0]?.message ?? 'Unknown start.gg error');
   }
 
   if (!payload.data) {
@@ -117,286 +172,75 @@ const requestStartGG = async <T>(query: string, variables: Record<string, unknow
   return payload.data;
 };
 
+// ─── Resolución de países ──────────────────────────────────────────────────────
+
 const countries = getData();
-const countryByCode = new Set(countries.map((country: CountryRecord) => country.code.toUpperCase()));
-const countryByName = new Map(countries.map((country: CountryRecord) => [country.name.toLowerCase(), country.code.toUpperCase()]));
+const countryByCode = new Set(countries.map((c: CountryRecord) => c.code.toUpperCase()));
+const countryByName = new Map(
+  countries.map((c: CountryRecord) => [c.name.toLowerCase(), c.code.toUpperCase()]),
+);
 
 const resolveCountryCodeFromStartGG = (country: string | null | undefined): string => {
-  const raw = (country || '').trim();
-  if (!raw) {
-    return '';
-  }
-
+  const raw = (country ?? '').trim();
+  if (!raw) return '';
   const upper = raw.toUpperCase();
-  if (countryByCode.has(upper)) {
-    return upper;
-  }
-
+  if (countryByCode.has(upper)) return upper;
   return countryByName.get(raw.toLowerCase()) ?? '';
 };
 
+// ─── Utilidades ────────────────────────────────────────────────────────────────
+
+const getStringProp = (payload: unknown, key: string): string => {
+  if (typeof payload !== 'object' || payload === null || !(key in payload)) return '';
+  const value = (payload as Record<string, unknown>)[key];
+  return typeof value === 'string' ? value.trim() : String(value ?? '').trim();
+};
+
 const sendAck = (ack: unknown, error: string | null, response?: unknown) => {
-  if (typeof ack !== 'function') {
-    return;
-  }
-  ack(error, response);
+  if (typeof ack === 'function') ack(error, response);
 };
 
-const getOAuthConfig = (): OAuthConfig | null => {
-  const bundleConfig = nodecg.bundleConfig as unknown as Record<string, unknown>;
-  const clientId = String(bundleConfig.startggClientId || '').trim();
-  const clientSecret = String(bundleConfig.startggClientSecret || '').trim();
-  const rawPort = Number(bundleConfig.startggOAuthPort ?? STARTGG_OAUTH_DEFAULT_PORT);
-  const callbackPort = Number.isFinite(rawPort) && rawPort > 0 ? rawPort : STARTGG_OAUTH_DEFAULT_PORT;
-
-  if (!clientId || !clientSecret) {
-    return null;
-  }
-
-  return {
-    clientId,
-    clientSecret,
-    callbackPort,
-  };
-};
-
-const getCallbackUrl = (callbackPort: number) => `http://127.0.0.1:${callbackPort}${STARTGG_OAUTH_CALLBACK_PATH}`;
-
-const cleanupExpiredOAuthSessions = () => {
-  const now = Date.now();
-  oauthSessions.forEach((session, sessionId) => {
-    if (session.expiresAt <= now && session.status === 'pending') {
-      updateOAuthSession(sessionId, { status: 'expired' });
-    }
-  });
-};
-
-const respondWithCallbackHtml = (res: ServerResponse, statusCode: number, title: string, message: string) => {
-  res.statusCode = statusCode;
-  res.setHeader('Content-Type', 'text/html; charset=utf-8');
-  res.end(renderCallbackHtml(title, message));
-};
-
-const renderCallbackHtml = (title: string, message: string) => `<!doctype html>
-<html lang="es">
-  <head>
-    <meta charset="utf-8" />
-    <title>${title}</title>
-    <style>
-      body { font-family: Arial, sans-serif; margin: 2rem; background: #121212; color: #fff; }
-      .box { max-width: 680px; padding: 1rem 1.2rem; border: 1px solid #444; border-radius: 8px; }
-      .ok { color: #66bb6a; }
-      .ko { color: #ef5350; }
-    </style>
-  </head>
-  <body>
-    <div class="box">
-      <h2>${title}</h2>
-      <p>${message}</p>
-      <p>You can close this tab and return to Scoreko.</p>
-    </div>
-  </body>
-</html>`;
-
-const parseOAuthTokenPayload = async (response: Response): Promise<OAuthTokenResponse> => {
-  const rawBody = await response.text();
-  try {
-    return JSON.parse(rawBody) as OAuthTokenResponse;
-  } catch {
-    return { message: rawBody };
-  }
-};
-
-const exchangeOAuthCodeForToken = async (
-  code: string,
-  redirectUri: string,
-  oauthConfig: OAuthConfig,
-): Promise<string> => {
-  const params = new URLSearchParams({
-    grant_type: 'authorization_code',
-    code,
-    client_id: oauthConfig.clientId,
-    client_secret: oauthConfig.clientSecret,
-    redirect_uri: redirectUri,
-  });
-
-  let lastError = 'Unknown OAuth token exchange error';
-
-  for (const tokenEndpoint of STARTGG_OAUTH_TOKEN_ENDPOINTS) {
-    const response = await fetch(tokenEndpoint, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: params.toString(),
-    });
-
-    const payload = await parseOAuthTokenPayload(response);
-
-    if (response.ok) {
-      const token = String(payload.access_token || '').trim();
-      if (token) {
-        return token;
-      }
-
-      lastError = payload.error_description || payload.error || payload.message || 'OAuth token response did not include an access token';
-      continue;
-    }
-
-    lastError = payload.error_description || payload.error || payload.message || `OAuth token request failed (${response.status})`;
-
-    if (response.status !== 404) {
-      break;
-    }
-  }
-
-  throw new Error(lastError);
-};
-
-const ensureOAuthCallbackServer = async (oauthConfig: OAuthConfig) => {
-  if (oauthCallbackServer) {
-    return;
-  }
-
-  const callbackUrl = getCallbackUrl(oauthConfig.callbackPort);
-
-  const server = createServer((req, res) => {
-    if (!req.url) {
-      res.statusCode = 400;
-      res.end('Bad request');
-      return;
-    }
-
-    const requestUrl = new URL(req.url, callbackUrl);
-    if (requestUrl.pathname !== STARTGG_OAUTH_CALLBACK_PATH) {
-      res.statusCode = 404;
-      res.end('Not found');
-      return;
-    }
-
-    cleanupExpiredOAuthSessions();
-
-    const state = requestUrl.searchParams.get('state') || '';
-    const code = requestUrl.searchParams.get('code') || '';
-    const error = requestUrl.searchParams.get('error') || '';
-
-    const session = Array.from(oauthSessions.values()).find((candidate) => candidate.state === state);
-    if (!session) {
-      respondWithCallbackHtml(res, 400, 'Invalid OAuth', 'No active session was found for this authorization.');
-      return;
-    }
-
-    if (session.expiresAt <= Date.now()) {
-      updateOAuthSession(session.sessionId, { status: 'expired' });
-      respondWithCallbackHtml(res, 400, 'Session expired', 'The OAuth session expired. Start the process again from Scoreko.');
-      return;
-    }
-
-    if (error) {
-      updateOAuthSession(session.sessionId, { status: 'error', error });
-      respondWithCallbackHtml(res, 400, 'OAuth canceled', `start.gg returned this error: ${error}`);
-      return;
-    }
-
-    if (!code) {
-      updateOAuthSession(session.sessionId, {
-        status: 'error',
-        error: 'Missing authorization code',
-      });
-      respondWithCallbackHtml(res, 400, 'Incomplete OAuth', 'No authorization code was received.');
-      return;
-    }
-
-    void exchangeOAuthCodeForToken(code, callbackUrl, oauthConfig)
-      .then((token) => {
-        updateOAuthSession(session.sessionId, { status: 'completed', token, error: undefined });
-      })
-      .catch((exchangeError) => {
-        const message = exchangeError instanceof Error ? exchangeError.message : 'Failed to exchange authorization code';
-        updateOAuthSession(session.sessionId, { status: 'error', error: message });
-      });
-
-    respondWithCallbackHtml(res, 200, 'Authorization received', 'Your authorization was received. Finishing sign-in in the background...');
-  });
-
-  await new Promise<void>((resolve, reject) => {
-    server.once('error', reject);
-    server.listen(oauthConfig.callbackPort, '127.0.0.1', () => {
-      server.off('error', reject);
-      resolve();
-    });
-  });
-
-  oauthCallbackServer = server;
-};
+// ─── Listeners de NodeCG ───────────────────────────────────────────────────────
 
 nodecg.listenFor('startgg:createOAuthSession', async (_payload: unknown, ack) => {
-  const oauthConfig = getOAuthConfig();
-  if (!oauthConfig) {
-    sendAck(ack, 'OAuth is not configured in this installation (missing startggClientId/startggClientSecret). Use the Client ID and Client Secret from a start.gg OAuth app.');
+  const config = getOAuthConfig();
+  if (!config) {
+    sendAck(
+      ack,
+      'OAuth is not configured in this installation (missing startggClientId/startggClientSecret). Use the Client ID and Client Secret from a start.gg OAuth app.',
+    );
     return;
   }
 
   try {
-    await ensureOAuthCallbackServer(oauthConfig);
-  } catch (serverError) {
-    const message = serverError instanceof Error ? serverError.message : 'Could not start the local OAuth callback';
-    sendAck(ack, message);
+    await oauthServer.ensureServer(config);
+  } catch (err) {
+    sendAck(ack, err instanceof Error ? err.message : 'Could not start the local OAuth callback');
     return;
   }
 
-  cleanupExpiredOAuthSessions();
-
-  const sessionId = randomUUID();
-  const state = randomUUID();
-  const session: OAuthSession = {
-    sessionId,
-    state,
-    expiresAt: Date.now() + STARTGG_OAUTH_SESSION_TTL_MS,
-    status: 'pending',
-  };
-  oauthSessions.set(sessionId, session);
-
-  const params = new URLSearchParams({
-    response_type: 'code',
-    client_id: oauthConfig.clientId,
-    redirect_uri: getCallbackUrl(oauthConfig.callbackPort),
-    scope: STARTGG_OAUTH_SCOPES,
-    state,
-  });
-
-  sendAck(ack, null, {
-    sessionId,
-    authUrl: `${STARTGG_OAUTH_AUTHORIZE_ENDPOINT}?${params.toString()}`,
-  });
+  const session = oauthServer.createSession(config);
+  sendAck(ack, null, session);
 });
 
 nodecg.listenFor('startgg:getOAuthSessionStatus', (payload: unknown, ack) => {
-  cleanupExpiredOAuthSessions();
-
   const sessionId = getStringProp(payload, 'sessionId');
-
   if (!sessionId) {
     sendAck(ack, 'Missing OAuth session id');
     return;
   }
 
-  const session = oauthSessions.get(sessionId);
-  if (!session) {
+  const status = oauthServer.getSessionStatus(sessionId);
+  if (!status) {
     sendAck(ack, 'OAuth session not found');
     return;
   }
 
-  sendAck(ack, null, {
-    status: session.status,
-    token: session.status === 'completed' ? session.token : undefined,
-    error: session.status === 'error' ? session.error : undefined,
-  });
+  sendAck(ack, null, status);
 });
 
 nodecg.listenFor('startgg:fetchRecentTournaments', async (payload: unknown, ack) => {
   const token = getStringProp(payload, 'token');
-
   if (!token) {
     sendAck(ack, 'Missing start.gg API token');
     return;
@@ -423,21 +267,15 @@ nodecg.listenFor('startgg:fetchRecentTournaments', async (payload: unknown, ack)
       currentUser: { tournaments: { nodes: RecentTournament[] } } | null;
     }>(query, { perPage: RECENT_TOURNAMENTS_LIMIT }, token);
 
-    const tournaments = data.currentUser?.tournaments.nodes
-      .filter((item) => item.slug)
-      .sort((a, b) => (b.startAt ?? 0) - (a.startAt ?? 0))
-      .map((item) => ({
-        id: item.id,
-        name: item.name,
-        slug: item.slug,
-        startAt: item.startAt,
-        endAt: item.endAt,
-      })) ?? [];
+    const tournaments =
+      data.currentUser?.tournaments.nodes
+        .filter((item) => item.slug)
+        .sort((a, b) => (b.startAt ?? 0) - (a.startAt ?? 0))
+        .map(({ id, name, slug, startAt, endAt }) => ({ id, name, slug, startAt, endAt })) ?? [];
 
     sendAck(ack, null, tournaments);
   } catch (error) {
-    const message = error instanceof Error ? error.message : 'Unknown error while loading tournaments';
-    sendAck(ack, message);
+    sendAck(ack, error instanceof Error ? error.message : 'Unknown error while loading tournaments');
   }
 });
 
@@ -445,15 +283,8 @@ nodecg.listenFor('startgg:fetchTournamentPlayers', async (payload: unknown, ack)
   const token = getStringProp(payload, 'token');
   const slug = getStringProp(payload, 'slug');
 
-  if (!token) {
-    sendAck(ack, 'Missing start.gg API token');
-    return;
-  }
-
-  if (!slug) {
-    sendAck(ack, 'Missing tournament slug');
-    return;
-  }
+  if (!token) { sendAck(ack, 'Missing start.gg API token'); return; }
+  if (!slug) { sendAck(ack, 'Missing tournament slug'); return; }
 
   const query = `
     query TournamentParticipants($slug: String!, $page: Int!, $perPage: Int!) {
@@ -491,50 +322,37 @@ nodecg.listenFor('startgg:fetchTournamentPlayers', async (payload: unknown, ack)
               id: number;
               gamerTag: string | null;
               prefix: string | null;
-              user: {
-                location: {
-                  country: string | null;
-                } | null;
-              } | null;
+              user: { location: { country: string | null } | null } | null;
             }>;
           };
         } | null;
-      }>(query, {
-        slug,
-        page: currentPage,
-        perPage: PARTICIPANTS_PAGE_SIZE,
-      }, token);
+      }>(query, { slug, page: currentPage, perPage: PARTICIPANTS_PAGE_SIZE }, token);
 
-      if (!data.tournament) {
-        throw new Error('Tournament not found');
-      }
+      if (!data.tournament) throw new Error('Tournament not found');
 
       const apiTotalPages = Number(data.tournament.participants.pageInfo.totalPages);
       totalPages = Number.isFinite(apiTotalPages) ? Math.max(apiTotalPages, 1) : 1;
 
-      data.tournament.participants.nodes.forEach((participant) => {
+      for (const participant of data.tournament.participants.nodes) {
         const playerId = String(participant.id);
-        const gamertag = (participant.gamerTag || '').trim();
-        if (!gamertag) {
-          return;
-        }
-        const country = resolveCountryCodeFromStartGG(participant.user?.location?.country);
+        const gamertag = (participant.gamerTag ?? '').trim();
+        if (!gamertag) continue;
+
         playersMap.set(playerId, {
           id: playerId,
           gamertag,
           name: gamertag,
-          team: (participant.prefix || '').trim(),
-          country,
+          team: (participant.prefix ?? '').trim(),
+          country: resolveCountryCodeFromStartGG(participant.user?.location?.country),
           twitter: '',
         });
-      });
+      }
 
       currentPage += 1;
     }
 
     sendAck(ack, null, Array.from(playersMap.values()));
   } catch (error) {
-    const message = error instanceof Error ? error.message : 'Unknown error while importing players';
-    sendAck(ack, message);
+    sendAck(ack, error instanceof Error ? error.message : 'Unknown error while importing players');
   }
 });
diff --git a/src/extension/util/oauth-server.ts b/src/extension/util/oauth-server.ts
new file mode 100644
index 0000000..6bc95a8
--- /dev/null
+++ b/src/extension/util/oauth-server.ts
@@ -0,0 +1,273 @@
+import { createServer, type Server, type ServerResponse } from 'node:http';
+import { randomUUID } from 'node:crypto';
+
+// ─── Tipos públicos ────────────────────────────────────────────────────────────
+
+export interface OAuthConfig {
+  clientId: string;
+  clientSecret: string;
+  callbackPort: number;
+}
+
+export interface OAuthSessionStatus {
+  status: 'pending' | 'completed' | 'error' | 'expired';
+  token?: string;
+  error?: string;
+}
+
+export interface CreateSessionResult {
+  sessionId: string;
+  authUrl: string;
+}
+
+export interface OAuthServerOptions {
+  /** Nombre legible del proveedor, usado en mensajes y HTML del callback */
+  provider: string;
+  /** Ruta del callback OAuth, p.ej. '/startgg/callback' */
+  callbackPath: string;
+  /** URL del endpoint de autorización del proveedor */
+  authorizeEndpoint: string;
+  /** Scopes separados por espacio */
+  scope: string;
+  /** Milisegundos antes de que una sesión pendiente expire */
+  sessionTtlMs: number;
+  /**
+   * Intercambia un código de autorización por un access token.
+   * Lanza un error si el intercambio falla.
+   */
+  exchangeToken: (code: string, redirectUri: string, config: OAuthConfig) => Promise<string>;
+}
+
+export interface OAuthServerHandle {
+  /** Arranca el servidor de callback si aún no está corriendo */
+  ensureServer(config: OAuthConfig): Promise<void>;
+  /** Crea una nueva sesión OAuth y devuelve sessionId + URL de autorización */
+  createSession(config: OAuthConfig): CreateSessionResult;
+  /** Devuelve el estado actual de una sesión, o null si no existe */
+  getSessionStatus(sessionId: string): OAuthSessionStatus | null;
+}
+
+// ─── Tipos internos ────────────────────────────────────────────────────────────
+
+interface OAuthSession {
+  sessionId: string;
+  state: string;
+  expiresAt: number;
+  status: 'pending' | 'completed' | 'error' | 'expired';
+  token?: string;
+  error?: string;
+}
+
+// ─── HTML de callback ──────────────────────────────────────────────────────────
+
+const renderCallbackHtml = (title: string, message: string) => `<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="utf-8" />
+    <title>${title}</title>
+    <style>
+      body { font-family: Arial, sans-serif; margin: 2rem; background: #121212; color: #fff; }
+      .box { max-width: 680px; padding: 1rem 1.2rem; border: 1px solid #444; border-radius: 8px; }
+      .ok { color: #66bb6a; }
+      .ko { color: #ef5350; }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <h2>${title}</h2>
+      <p>${message}</p>
+      <p>You can close this tab and return to Scoreko.</p>
+    </div>
+  </body>
+</html>`;
+
+const respondWithCallbackHtml = (
+  res: ServerResponse,
+  statusCode: number,
+  title: string,
+  message: string,
+) => {
+  res.statusCode = statusCode;
+  res.setHeader('Content-Type', 'text/html; charset=utf-8');
+  res.end(renderCallbackHtml(title, message));
+};
+
+// ─── Factory principal ─────────────────────────────────────────────────────────
+
+export const createOAuthServer = (options: OAuthServerOptions): OAuthServerHandle => {
+  const sessions = new Map<string, OAuthSession>();
+  let server: Server | null = null;
+
+  const getCallbackUrl = (port: number) =>
+    `http://127.0.0.1:${port}${options.callbackPath}`;
+
+  const updateSession = (sessionId: string, update: Partial<OAuthSession>) => {
+    const session = sessions.get(sessionId);
+    if (!session) return;
+    sessions.set(sessionId, { ...session, ...update });
+  };
+
+  /**
+   * Marca como expiradas las sesiones pendientes que han superado su TTL,
+   * y elimina del Map las sesiones ya terminadas (completed / error / expired)
+   * que también hayan superado su TTL.
+   */
+  const cleanupSessions = () => {
+    const now = Date.now();
+    sessions.forEach((session, sessionId) => {
+      if (session.expiresAt > now) return;
+
+      if (session.status === 'pending') {
+        updateSession(sessionId, { status: 'expired' });
+      }
+
+      // Eliminar sesiones terminadas que ya hayan expirado para no crecer sin límite
+      if (session.status !== 'pending') {
+        sessions.delete(sessionId);
+      }
+    });
+  };
+
+  const ensureServer = async (config: OAuthConfig): Promise<void> => {
+    if (server) return;
+
+    const callbackUrl = getCallbackUrl(config.callbackPort);
+
+    const newServer = createServer((req, res) => {
+      if (!req.url) {
+        res.statusCode = 400;
+        res.end('Bad request');
+        return;
+      }
+
+      const requestUrl = new URL(req.url, callbackUrl);
+      if (requestUrl.pathname !== options.callbackPath) {
+        res.statusCode = 404;
+        res.end('Not found');
+        return;
+      }
+
+      cleanupSessions();
+
+      const state = requestUrl.searchParams.get('state') ?? '';
+      const code = requestUrl.searchParams.get('code') ?? '';
+      const error = requestUrl.searchParams.get('error') ?? '';
+
+      const session = Array.from(sessions.values()).find((s) => s.state === state);
+
+      if (!session) {
+        respondWithCallbackHtml(
+          res, 400,
+          'Invalid OAuth',
+          'No active session was found for this authorization.',
+        );
+        return;
+      }
+
+      if (session.expiresAt <= Date.now()) {
+        updateSession(session.sessionId, { status: 'expired' });
+        respondWithCallbackHtml(
+          res, 400,
+          'Session expired',
+          'The OAuth session expired. Start the process again from Scoreko.',
+        );
+        return;
+      }
+
+      if (error) {
+        updateSession(session.sessionId, { status: 'error', error });
+        respondWithCallbackHtml(
+          res, 400,
+          'OAuth canceled',
+          `${options.provider} returned this error: ${error}`,
+        );
+        return;
+      }
+
+      if (!code) {
+        updateSession(session.sessionId, { status: 'error', error: 'Missing authorization code' });
+        respondWithCallbackHtml(
+          res, 400,
+          'Incomplete OAuth',
+          'No authorization code was received.',
+        );
+        return;
+      }
+
+      void options
+        .exchangeToken(code, callbackUrl, config)
+        .then((token) => {
+          updateSession(session.sessionId, { status: 'completed', token, error: undefined });
+        })
+        .catch((err: unknown) => {
+          const message =
+            err instanceof Error ? err.message : 'Failed to exchange authorization code';
+          updateSession(session.sessionId, { status: 'error', error: message });
+        });
+
+      respondWithCallbackHtml(
+        res, 200,
+        'Authorization received',
+        'Your authorization was received. Finishing sign-in in the background...',
+      );
+    });
+
+    // Si el servidor sufre un error tras arrancar, resetear la referencia
+    // para que la próxima llamada a ensureServer() pueda reiniciarlo.
+    newServer.on('error', (err) => {
+      console.error(`[${options.provider}] OAuth callback server error:`, err);
+      server = null;
+    });
+
+    await new Promise<void>((resolve, reject) => {
+      newServer.once('error', reject);
+      newServer.listen(config.callbackPort, '127.0.0.1', () => {
+        newServer.off('error', reject);
+        resolve();
+      });
+    });
+
+    server = newServer;
+  };
+
+  const createSession = (config: OAuthConfig): CreateSessionResult => {
+    cleanupSessions();
+
+    const sessionId = randomUUID();
+    const state = randomUUID();
+
+    sessions.set(sessionId, {
+      sessionId,
+      state,
+      expiresAt: Date.now() + options.sessionTtlMs,
+      status: 'pending',
+    });
+
+    const params = new URLSearchParams({
+      response_type: 'code',
+      client_id: config.clientId,
+      redirect_uri: getCallbackUrl(config.callbackPort),
+      scope: options.scope,
+      state,
+    });
+
+    return {
+      sessionId,
+      authUrl: `${options.authorizeEndpoint}?${params.toString()}`,
+    };
+  };
+
+  const getSessionStatus = (sessionId: string): OAuthSessionStatus | null => {
+    cleanupSessions();
+    const session = sessions.get(sessionId);
+    if (!session) return null;
+
+    return {
+      status: session.status,
+      token: session.status === 'completed' ? session.token : undefined,
+      error: session.status === 'error' ? session.error : undefined,
+    };
+  };
+
+  return { ensureServer, createSession, getSessionStatus };
+};